diff --git a/index.html b/index.html
index d32d8ad25c..e0f0545da0 100644
--- a/index.html
+++ b/index.html
@@ -12,9 +12,30 @@
 </head>
 
 <body>
+    <header class=".header">
+        <nav>
+        <div class="lambda">
+         <img src="/Sprint-Challenge--User-Interface/assets/lambda-black.png">
+        </div>  
+         <ul class="nav"> 
+          <li><a href="#">Home</a></li>
+          <li> <a href="#">About</a></li>
+          <li><a href="#">Products</a></li>
+          <li><a href="#">Blog</a></li>
+          <li><a href="#">Contact</a></li>
+         </ul>
+       </nav>
+ </header>
+ 
     <div class="container">
    
+        <div class=".jumbo">
+            <img src="/Sprint-Challenge--User-Interface/assets/jumbo.jpg">
+        </div>
+    
         <section class="top-content">
+          
+         
             <div class="text-container">
                 <h2>The Future</h2>
                 <p>Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.</p>
@@ -30,16 +51,16 @@ <h2>The Past</h2>
             <h2>Why Did It Have To Be Boxes...</h2>
             
             <div class="boxes">
-                <div class="box">Box 1</div>
-                <div class="box">Box 2</div>
-                <div class="box">Box 3</div>
-                <div class="box">Box 4</div>
-                <div class="box">Box 5</div>
-                <div class="box">Box 6</div>
-                <div class="box">Box 7</div>
-                <div class="box">Box 8</div>
-                <div class="box">Box 9</div>
-                <div class="box">Box 10</div>
+                <div class="box box1 column1">Box 1</div>
+                <div class="box box2 column1">Box 2</div>
+                <div class="box box3 column1">Box 3</div>
+                <div class="box box4 column1">Box 4</div>
+                <div class="box box5 column1">Box 5</div>
+                <div class="box box6 column2">Box 6</div>
+                <div class="box box7 column2">Box 7</div>
+                <div class="box box8 column2">Box 8</div>
+                <div class="box box9 column2">Box 9</div>
+                <div class="box box10 column2">Box 10</div>
             </div>
         
         </section>
diff --git a/style/index.css b/style/index.css
index ae29d6ceee..f15f636d90 100644
--- a/style/index.css
+++ b/style/index.css
@@ -65,6 +65,45 @@ h1, h2, h3, h4, h5 {
 p {
     line-height: 1.4;
 }
+/*-----Nav Bar*-----*/
+
+.nav,.lambda,nav,.header{
+
+width:100%;
+display:flex;
+flex-direction: row;
+justify-content: center;
+margin: 1% 0 2% 0;
+
+}
+
+
+
+
+  li{
+    list-style:none;
+  }
+
+  a{
+    color:black;
+    text-decoration:none;
+    padding:17px 15px;
+    display:inline-block;
+    text-transform:uppercase;
+  }
+
+
+ 
+/*-----Nav Bar*-----*/
+
+
+/*boxes*/
+
+
+/*boxes*/
+
+
+
 
 .container {
     width: 800px;
@@ -112,6 +151,9 @@ p {
     justify-content: center;
 }
 
+
+
+
 .bottom-content {
     display: flex;
     margin: 0 2% 20px;
@@ -143,4 +185,59 @@ footer nav {
 footer nav a {
     color: white;
     text-decoration: none;
-}
\ No newline at end of file
+}
+
+
+/*----Media Queries----*/
+
+@media (max-width: 800px) {
+
+    .middle-content {
+        margin-bottom: 20px;
+        border-bottom: 1px dashed black;
+    }
+    
+    .middle-content h2 {
+        padding: 0 2%;
+        margin-bottom: 0;
+    }
+    
+    .middle-content .boxes {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        justify-content: center;
+     
+  
+    }
+.middle-content .boxes .box {
+    width: 12.5%;
+    height: 100px;
+    background: black;
+    margin: 20px 2.5%;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    
+}
+
+.boxes{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-flow: column wrap;
+    align-content: stretch;
+}
+
+.bottom-content{
+    
+    display: flex;
+    flex-wrap: wrap;
+      
+}
+
+
+
+
+}
