diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..963cc3c
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="./src/favicon.ico">
+    <!-- <link type="text/css" href="./src/App.css"> -->
+    <title>React App</title>
+  </head>
+  <body> 
+    <div id="header"></div>
+
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` in this folder.
+      To create a production bundle, use `npm run build`.
+    -->
+
+    
+
+
+
+  </body>
+</html>
diff --git a/index.html b/index.html
index f896715..b7c583f 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,12 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="./src/favicon.ico">
+    <!-- <link type="text/css" href="./src/App.css"> -->
     <title>React App</title>
   </head>
-  <body>
+  <body> 
+    <div id="header"></div>
+
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/App.css b/src/App.css
index 15adfdc..91de268 100644
--- a/src/App.css
+++ b/src/App.css
@@ -8,10 +8,11 @@
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
+  padding: 1em;
   color: white;
+  background-color: black;
+  clear: left;
+  text-align: center;
 }
 
 .App-intro {
diff --git a/src/App.js b/src/App.js
index 45f9f45..9608197 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,141 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-var HelloWorld = React.createClass({
-  render: function() {
-    return (
-      <div>
-        <h1>Hello World!</h1>
-      </div>
-    )
-  }
-})
+var BodyStyle = {
+	textAlign:"center",
+	listStyle: "none",
+	margin: "auto",
+    width: "50%",
+    padding: "10px"
+};
+
+var UlStyles = {
+	listStyle: "none",
+    margin: "0",
+    padding: "0"
+};
+
+var LiStyles = {
+	listStyle: "none",
+    display: "inline",
+    padding: "10"
+};
+
+var HeaderStyles = {
+	padding: "1em",
+	color: "white",
+	backgroundColor: "black",
+	clear: "left",
+	textAlign: "center"
+};
+
+
+
+var MainApp = React.createClass({
+	render: function() {
+		return (
+			<div>
+
+				<div style={HeaderStyles}>
+					<h1>We Sell Stuff And Things</h1>
+					
+					<div>
+						<ul style={UlStyles}>
+						  <li style={LiStyles}><a href="default.asp">Home</a></li>
+						  <li style={LiStyles}><a href="news.asp">News</a></li>
+						  <li style={LiStyles}><a href="contact.html">Contact</a></li>
+						  <li style={LiStyles}><a href="about.asp">About</a></li>
+						</ul>
+					</div>
+
+				</div>
+				
+				<ol style={BodyStyle}><h1>Main Body</h1>
+					<ProductOne gifSource="https://media.giphy.com/media/3oz8xPYW0sc64eJEEU/giphy.gif" />
+
+					<ProductOne gifSource="https://media.giphy.com/media/3o6ZtjHtp4I73pYpeE/giphy.gif"/>
+
+					<ProductOne gifSource="https://media.giphy.com/media/h0m6DAVQ1zBfi/giphy.gif"/>
+				</ol>
+
+			</div>	
+			)
+	}
+});
+
+var ProductOne = React.createClass({
+	render: function() {
+		return (
+				<li><img src={this.props.gifSource}></img>
+					<ul style={UlStyles}>
+						<li>It Bends Alot</li>
+						<li>Price: It Costs Alot</li>
+						<li>Devlivery: FREEE!!!</li>
+					</ul>
+				</li>
+			)
+	}
+});
+
+// var ProductTwo = React.createClass({
+// 	render: function() {
+// 		return (
+// 				<li><img src="https://media.giphy.com/media/3oz8xPYW0sc64eJEEU/giphy.gif" alt="#"/>
+// 					<ul>
+// 						<li>It Bends A Bit</li>
+// 						<li>Price: It Costs A bit</li>
+// 						<li>Devlivery: ALOT!!!</li>
+// 					</ul>
+// 				</li>
+// 			)
+// 	}
+// });
+
+// var ProductThree = React.createClass({
+// 	render: function() {
+// 		return (
+// 				<li><img src="https://media.giphy.com/media/3o6ZtjHtp4I73pYpeE/giphy.gif" alt="#"/>
+// 					<ul>
+// 						<li>It Bends Not</li>
+// 						<li>Price: It Costs Not</li>
+// 						<li>Devlivery: A Tonn!!!</li>
+// 					</ul>
+
+// 				</li>
+// 			)
+// 	}
+// });
+
+
+
+
+// ReactDOM.render(
+//   <Header />,
+//   document.getElementById('header')
+// );
 
 ReactDOM.render(
-  <HelloWorld />,
+  <MainApp />,
   document.getElementById('root')
 );
+
+
+
+
+
+
+
+// Examples 
+
+// <div>
+// 	<Item itemName="Hammer"
+// 	itemDescription="bestPants ever"
+// 	itemSrc="http://sdfsdfsd.jpg"
+// 	/>
+// </div>
+
+
+
+
+
+
diff --git a/src/index.css b/src/index.css
index b4cc725..2076219 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,3 +3,4 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
