diff --git a/src/App.css b/src/App.css
index 74b5e05..2c03832 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,10 @@
+body{
+  background-color: #f1f1f1;
+}
+
 .App {
   text-align: center;
+  justify-content: column;
 }
 
 .App-logo {
@@ -14,7 +19,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  /* background-color: #282c34; */
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -36,3 +41,74 @@
     transform: rotate(360deg);
   }
 }
+
+.header-container{
+  /* background-color: rgb(180, 222, 189); */
+  font-size: 25px;
+  font-family: 'Trebuchet MS';
+    /* margin: 20px; */
+  border-radius: 10px;
+  margin: 20px;
+  flex: display;
+}
+
+.title-box{
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* background-color: wheat; */
+}
+
+.title-box input{
+  height: 50px;
+  width: 500px; 
+}
+
+.nav-box{
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  /* background-color: burlywood; */
+}
+
+.nav-box a{
+  background-color: rgb(218, 219, 221);
+  padding: 10px;
+  font-size: 25px;
+  border-radius: 10px;
+  flex: 1;
+  font-family:'Trebuchet MS', sans-serif 
+}
+
+.content-container{
+  /* column-gap: 2cap; */
+  margin: 20px;
+  display: flex;
+  gap: 20px;
+}
+
+.content-photo{
+  background-color: rgb(205, 191, 188);
+  height: 300px;
+  width: 40vw;
+}
+
+.content-box{
+  background-color: rgb(180, 222, 189);
+  height: 300px;
+  width: 60vw;
+}
+
+.more-content-container{
+  justify-content: center;
+  background-color: rgb(173, 156, 173);
+  margin: 20px;
+  height: 500px;
+}
+
+.more-content-container a{
+  height: 100px;
+  width: 600px;
+  background-color: yellow;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 34fe397..5fd466c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,32 +8,47 @@ function App() {
   return (
     <Router>
       <div className="App">
-        <nav >
-          <NavLink 
-            to="/">
-            Home
-          </NavLink>
-          <NavLink 
-            to="/login" 
-
-          >
-            Login
-          </NavLink>
-          <NavLink 
-            to="/signup" 
-          >
-            Signup
-          </NavLink>
-        </nav>
 
         <div>
-          <h1>Workout App</h1>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<Signup />} />
           </Routes>
         </div>
+
+        <div className='header-container'>
+          <div className='title-box'>
+            <h1 id='title'>Workout App</h1>
+            <input type='text' id='search-input' placeholder='Search for anything!'></input>
+          </div>
+
+          <div className='nav-box'>
+            <NavLink to="/">
+              Home
+            </NavLink>
+            <NavLink to="/login" >
+              Login
+            </NavLink>
+            <NavLink to="/signup" >
+              Signup
+            </NavLink>
+          </div>
+        </div>
+
+        <div className='content-container'>
+          <div className='content-photo'>
+            <h1>photo</h1>
+          </div>
+          <div className='content-box'>
+            <h1>content</h1>
+          </div>
+        </div>
+
+        <div className='more-content-container'>
+          <div> more content (slide deck?) </div>
+        </div>
+
       </div>
     </Router>
   );