diff --git a/public/App.js b/public/App.js
index a46a147..bc47e01 100644
--- a/public/App.js
+++ b/public/App.js
@@ -1,3 +1,6 @@
 function App(){
-  return <div><Main /></div>
-}
\ No newline at end of file
+  return <div>
+          <Header />
+          <Main />
+        </div>
+}
diff --git a/public/CenterCol.js b/public/CenterCol.js
new file mode 100644
index 0000000..32dde7b
--- /dev/null
+++ b/public/CenterCol.js
@@ -0,0 +1,13 @@
+function CenterCol() {
+  return (
+            <div className="centercol">
+              <div className="tweets">
+                <h2>Tweets go here</h2>
+                <h4>Tweet</h4>
+                <h4>Tweet</h4>
+                <h4>Tweet</h4>
+                <h4>Tweet</h4>
+              </div>
+            </div>
+  )
+}
diff --git a/public/Header.js b/public/Header.js
new file mode 100644
index 0000000..2bff161
--- /dev/null
+++ b/public/Header.js
@@ -0,0 +1,20 @@
+function Header() {
+  /*props is an object
+  let props = {
+    stuff:"stuff",
+    title:"title",
+  };
+  */
+  return (
+          <div>
+            <div className="header">
+                <ul>
+                  <li>Home</li>
+                  <li>Moments</li>
+                  <li>Notifications</li>
+                  <li>Messages</li>
+                </ul>
+            </div>
+          </div>
+          )
+}
diff --git a/public/LeftCol.js b/public/LeftCol.js
new file mode 100644
index 0000000..b46c67d
--- /dev/null
+++ b/public/LeftCol.js
@@ -0,0 +1,17 @@
+function LeftCol() {
+  return (
+          <div className="leftcol">
+            <div className="profile">
+              <h3>User Name</h3>
+              <p>User info</p>
+            </div>
+            <div className="trends">
+              <h3>List of Trends</h3>
+              <p>trend</p>
+              <p>trend</p>
+              <p>trend</p>
+            </div>
+
+          </div>
+  )
+}
diff --git a/public/Main.js b/public/Main.js
index cb7c512..6009c12 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>
+              <div className="main">
+                <LeftCol />
+                <CenterCol />
+                <RightCol />
+              </div>
+          </div>
+}
diff --git a/public/RightCol.js b/public/RightCol.js
new file mode 100644
index 0000000..6ec51c9
--- /dev/null
+++ b/public/RightCol.js
@@ -0,0 +1,13 @@
+function RightCol() {
+  return (
+            <div className="rightcol">
+              <div className="follow">
+                <h2>follow them</h2>
+                <h2>follow them</h2>
+              </div>
+              <div className="videos">
+                <p>Video goes here</p>
+              </div>
+            </div>
+  )
+}
diff --git a/public/index.html b/public/index.html
index 031925a..b8be9ba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,6 +17,61 @@
   <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>
     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    <style>
+      .header {
+        width:100%;
+        height: 40px;
+        text-align: left;
+        background-color: lightblue;
+      }
+
+      .header li {
+        display: inline-block;
+        padding: 0px 15px;
+      }
+
+      .main {
+        display: flex;
+        flex-direction: row;
+        text-align: center;
+      }
+
+      .leftcol {
+        flex-grow: 1;
+      }
+
+      .centercol {
+        flex-grow: 2;
+      }
+
+      .rightcol {
+        flex-grow: 1;
+      }
+
+      .profile {
+        background-color: orange;
+        width: 100%;
+        height: auto;
+      }
+      .trends {
+        background-color: yellow;
+        width: 100%;
+        height: auto;
+      }
+
+      .tweets {
+        background-color: blue;
+      }
+
+      .follow {
+        background-color: gray;
+      }
+
+      .videos {
+        background-color: pink;
+      }
+
+    </style>
   </head>
   <body>
     <div id="root"></div>
@@ -30,6 +85,10 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
+    <script src="Header.js" type="text/jsx"></script>
+    <script src="LeftCol.js" type="text/jsx"></script>
+    <script src="CenterCol.js" type="text/jsx"></script>
+    <script src="RightCol.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>