diff --git a/public/ActivityFeed.js b/public/ActivityFeed.js
new file mode 100644
index 0000000..08ef52d
--- /dev/null
+++ b/public/ActivityFeed.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+function 
diff --git a/public/App.js b/public/App.js
index a46a147..0363933 100644
--- a/public/App.js
+++ b/public/App.js
@@ -1,3 +1,13 @@
 function App(){
-  return <div><Main /></div>
-}
\ No newline at end of file
+  return (
+    <div>
+      <NavBar />
+      <Logo />
+      <SearchBar />
+      <Tweet />
+      <UserProfile />
+      <Trends />
+      <Header />
+    </div>
+  );
+}
diff --git a/public/Header.js b/public/Header.js
new file mode 100644
index 0000000..49bba2f
--- /dev/null
+++ b/public/Header.js
@@ -0,0 +1,3 @@
+function Header() {
+  return <h1>stuff</h1>
+}
diff --git a/public/Logo.js b/public/Logo.js
new file mode 100644
index 0000000..346adff
--- /dev/null
+++ b/public/Logo.js
@@ -0,0 +1,7 @@
+function Logo() {
+  return (
+    <div className="Logo">
+      <h1>Logo</h1>
+    </div>
+  );
+}
diff --git a/public/Main.js b/public/Main.js
deleted file mode 100644
index cb7c512..0000000
--- a/public/Main.js
+++ /dev/null
@@ -1,3 +0,0 @@
-function Main(){
-  return <div>Hello</div>
-}
\ No newline at end of file
diff --git a/public/NavBar.js b/public/NavBar.js
new file mode 100644
index 0000000..146d9ce
--- /dev/null
+++ b/public/NavBar.js
@@ -0,0 +1,10 @@
+function NavBar() {
+  return (
+    <div className="NavBar">
+      <button>Home</button>
+      <button>Moments</button>
+      <button>Notifications</button>
+      <button>Messages</button>
+    </div>
+  );
+}
diff --git a/public/SearchBar.js b/public/SearchBar.js
new file mode 100644
index 0000000..48f8b73
--- /dev/null
+++ b/public/SearchBar.js
@@ -0,0 +1,7 @@
+function SearchBar() {
+  return (
+    <div className="SearchBar">
+      <h1>Search Bar</h1>
+    </div>
+  );
+}
diff --git a/public/Trends.js b/public/Trends.js
new file mode 100644
index 0000000..1503f84
--- /dev/null
+++ b/public/Trends.js
@@ -0,0 +1,3 @@
+function Trends() {
+  return <h1 className="Trends">These are the latest trends!</h1>
+}
diff --git a/public/Tweet.js b/public/Tweet.js
new file mode 100644
index 0000000..ee462b2
--- /dev/null
+++ b/public/Tweet.js
@@ -0,0 +1,7 @@
+function Tweet() {
+  return (
+    <div>
+    <h1 className="Tweet">This is where you type a tweet</h1>
+    </div>
+  )
+}
diff --git a/public/UserProfile.js b/public/UserProfile.js
new file mode 100644
index 0000000..9db81f8
--- /dev/null
+++ b/public/UserProfile.js
@@ -0,0 +1,3 @@
+function UserProfile() {
+  return <h1>UserProfile</h1>
+}
diff --git a/public/Video.js b/public/Video.js
new file mode 100644
index 0000000..79edf36
--- /dev/null
+++ b/public/Video.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+function
diff --git a/public/WhoToFollow.js b/public/WhoToFollow.js
new file mode 100644
index 0000000..79edf36
--- /dev/null
+++ b/public/WhoToFollow.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+function
diff --git a/public/index.html b/public/index.html
index 460ce2f..72d7b33 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,11 +27,11 @@
         "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,7 +41,7 @@
     <script type="text/jsx">
     var tweet = React.createElement("h1",null,tweets[1])
     ReactDOM.render(
-      tweet, 
+      tweet,
       document.getElementById('root')
     );
     </script>
@@ -55,6 +55,15 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-   
+    <script src="UserProfile.js" type="text/jsx"></script>
+    <script src="Tweet.js" type="text/jsx"></script>
+    <script src="Trends.js" type="text/jsx"></script>
+    <script src="SearchBar.js" type="text/jsx"></script>
+    <script src="NavBar.js" type="text/jsx"></script>
+    <script src="Logo.js" type="text/jsx"></script>
+    <script src="Header.js" type="text/jsx"></script>
+    <script src="App.js" type="text/jsx"></script>
+    <script src="index.js" type="text/jsx"></script>
+
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
index 15adfdc..64a31eb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,3 +22,34 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.NavBar {
+  border: 1px solid red;
+  float: left;
+}
+
+.SearchBar {
+  border: 1px solid red;
+  float: right;
+}
+
+.Logo {
+  border: 1px solid red;
+  float: left;
+  height: 20px;
+  width: 500px;
+}
+
+.Trends {
+  border: 1px solid red;
+  align-items: center;
+  width: 150px;
+  height: 150px;
+}
+
+.Tweet {
+  border: 1px solid red;
+  float: right;
+  width: 300px;
+  height: 700px;
+}
diff --git a/src/App.js b/src/App.js
index d7bd2a7..49e94da 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,8 +4,7 @@ import './App.css';
 
 function App(){
    return (
-    <div>
-
+    <div className='App'>
     </div>
   );
  }