diff --git a/public/App.js b/public/App.js
index a46a147..4fd6aef 100644
--- a/public/App.js
+++ b/public/App.js
@@ -1,3 +1,9 @@
 function App(){
-  return <div><Main /></div>
-}
\ No newline at end of file
+  return (
+    <div>
+      <Header />
+      <Main />
+      <Footer />
+    </div>
+  )
+}
diff --git a/public/Blue.js b/public/Blue.js
new file mode 100644
index 0000000..387050e
--- /dev/null
+++ b/public/Blue.js
@@ -0,0 +1,10 @@
+function Blue() {
+
+  return (
+    <div className="blue">
+      <p>muh background is blue</p>
+      <Kat3 />
+      <p>lorem ipsum</p>
+    </div>
+  )
+}
diff --git a/public/Footer.js b/public/Footer.js
new file mode 100644
index 0000000..1760927
--- /dev/null
+++ b/public/Footer.js
@@ -0,0 +1,4 @@
+function Footer() {
+
+  return <h2 className="footer">smelly footer</h2>
+}
diff --git a/public/Green.js b/public/Green.js
new file mode 100644
index 0000000..45bf6a1
--- /dev/null
+++ b/public/Green.js
@@ -0,0 +1,10 @@
+function Green() {
+
+  return (
+    <div className="green">
+      <p>muh background is green</p>
+      <Kat2 />
+      <p>lorem ipsum</p>
+    </div>
+  )
+}
diff --git a/public/Header.js b/public/Header.js
new file mode 100644
index 0000000..3e0cea2
--- /dev/null
+++ b/public/Header.js
@@ -0,0 +1,4 @@
+function Header() {
+
+  return <h1 className="header">Welcome to Kitter</h1>
+}
diff --git a/public/Kat1.js b/public/Kat1.js
new file mode 100644
index 0000000..a39349b
--- /dev/null
+++ b/public/Kat1.js
@@ -0,0 +1,5 @@
+function Kat1() {
+  return (
+    <img src="https://media.giphy.com/media/v6aOjy0Qo1fIA/giphy.gif" className="kat1"></img>
+  )
+}
diff --git a/public/Kat2.js b/public/Kat2.js
new file mode 100644
index 0000000..529f5a3
--- /dev/null
+++ b/public/Kat2.js
@@ -0,0 +1,4 @@
+function Kat2() {
+
+  return <img src="http://37.media.tumblr.com/90a30135ab8238399008c6e00fd48553/tumblr_n2uh3b7Oey1qdlh1io1_250.gif" className="kat2"></img>
+}
diff --git a/public/Kat3.js b/public/Kat3.js
new file mode 100644
index 0000000..7897785
--- /dev/null
+++ b/public/Kat3.js
@@ -0,0 +1,5 @@
+function Kat3() {
+  return (
+    <img src="http://www.drodd.com/images10/funny-cat-gifs3.gif" className="kat3"></img>
+  )
+}
diff --git a/public/Main.js b/public/Main.js
index cb7c512..092092a 100644
--- a/public/Main.js
+++ b/public/Main.js
@@ -1,3 +1,9 @@
 function Main(){
-  return <div>Hello</div>
-}
\ No newline at end of file
+  return (
+    <div className='main'>
+      <Red />
+      <Green />
+      <Blue />
+    </div>
+  )
+}
diff --git a/public/Red.js b/public/Red.js
new file mode 100644
index 0000000..1e5120c
--- /dev/null
+++ b/public/Red.js
@@ -0,0 +1,10 @@
+function Red() {
+
+  return (
+    <div className="red">
+      <p>muh background is red</p>
+      <Kat1 />
+      <p>lorem ipsum</p>
+    </div>
+  )
+}
diff --git a/public/index.html b/public/index.html
index 460ce2f..5e29941 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,6 +13,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="styles.css">
     <title>React App</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
@@ -20,18 +21,18 @@
   </head>
   <body>
     <div id="root"></div>
-    <script>
+    <!-- <script>
       var tweets = [
         "ACA class was so awesome today.",
         "I just checked out that new restaurant, it was okay",
         "I just saw a movie that changed my life",
         "shirts are 50% of at Macy's today"
       ];
-    
+
     </script>
 
     <script>
-    
+
       var h1 = document.createElement("h1");
       h1.innerHTML = tweets[0];
       document.body.appendChild(h1);
@@ -41,10 +42,22 @@
     <script type="text/jsx">
     var tweet = React.createElement("h1",null,tweets[1])
     ReactDOM.render(
-      tweet, 
+      tweet,
       document.getElementById('root')
     );
-    </script>
+    </script> -->
+
+    <script src="Kat1.js" type="text/jsx"></script>
+    <script src="Kat2.js" type="text/jsx"></script>
+    <script src="Kat3.js" type="text/jsx"></script>
+    <script src="Red.js" type="text/jsx"></script>
+    <script src="Green.js" type="text/jsx"></script>
+    <script src="Blue.js" type="text/jsx"></script>
+    <script src="Header.js" type="text/jsx"></script>
+    <script src="Footer.js" type="text/jsx"></script>
+    <script src="Main.js"type="text/jsx"></script>
+    <script src='App.js' type="text/jsx"></script>
+    <script src="Index.js" type="text/jsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -55,6 +68,6 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-   
+
   </body>
 </html>
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..c3d39c8
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,46 @@
+.header {
+  width: auto;
+  height: 10vh;
+  background-color: grey;
+  text-align: center;
+}
+
+.main {
+  display: flex;
+  height: 75vh;
+  width: auto;
+  justify-content: center;
+}
+
+.red {
+  width: 30%;
+  height: 100%;
+  background-color: red;
+  text-align: center;
+}
+
+.green {
+  width: 30%;
+  height: 100%;
+  background-color: green;
+  text-align: center;
+}
+
+.blue {
+  width: 30%;
+  height: 100%;
+  background-color: blue;
+  text-align: center;
+}
+
+.kat1 {
+  height: 75%;
+  width: auto;
+}
+
+.footer {
+  width: auto;
+  height: 10vh;
+  background-color: grey;
+  text-align: center;
+}
