diff --git a/about.html b/about.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/index.html b/index.html
index c6405aef7..9794c875f 100644
--- a/index.html
+++ b/index.html
@@ -5,16 +5,29 @@
   <meta charset="utf-8">
 
   <title>Sprint Challenge - Home</title>
-
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
-  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="style/index.css">
 
 </head>
 
 <body>
     <div class="container">
+        <header class="header-content">
+            <img src="./assets/lambda-black.png" class="lambdaimg" alt="Lambda Company Logo">
+            <nav>
+                <a href="index.html">Home</a>
+                <a href="about.html">About</a>
+                <a href="#">Products</a>
+                <a href="">Blog</a>
+                <a href="">Contact</a>
+            </nav>
+        </header>
    
         <section class="top-content">
+            <div class="top-content-img">
+            <img src="./assets/jumbo.jpg" class="jumbo" alt="Background Photo">
+            </div>
             <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,17 +43,17 @@ <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>
+                <div class="box1">Box 1</div>
+                <div class="box2">Box 2</div>
+                <div class="box3">Box 3</div>
+                <div class="box4">Box 4</div>
+                <div class="box5">Box 5</div>
+                <div class="box6">Box 6</div>
+                <div class="box7">Box 7</div>
+                <div class="box8">Box 8</div>
+                <div class="box9">Box 9</div>
+                <div class="box10">Box 10</div>
+              </div>
         
         </section>
 
diff --git a/style/index.css b/style/index.css
index ae29d6cee..14dc1ca33 100644
--- a/style/index.css
+++ b/style/index.css
@@ -71,6 +71,22 @@ p {
     margin: 0 auto;
 }
 
+header{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-top: 20px;
+    padding-bottom: 40px;
+}
+
+header nav a{
+    padding: 30px;
+    color: grey;
+    text-decoration: none;
+}
+
+
+
 .top-content {
     display: flex;
     flex-wrap: wrap;
@@ -79,6 +95,10 @@ p {
     border-bottom: 1px dashed black;
 }
 
+.top-content-img{
+    padding-bottom: 20px;
+}
+
 .top-content .text-container {
     width: 48%;
     padding: 0 1%;
@@ -88,6 +108,10 @@ p {
 .middle-content {
     margin-bottom: 20px;
     border-bottom: 1px dashed black;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .middle-content h2 {
@@ -98,7 +122,7 @@ p {
 .middle-content .boxes {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: space-between;
 }
 
 .middle-content .boxes .box {
@@ -108,8 +132,64 @@ p {
     margin: 20px 2.5%;
     color: white;
     display: flex;
-    align-items: center;
+}
+
+.box1{
+    background: teal;
+    
+}
+
+.box2{
+    background: gold;
+    
+}
+
+.box3{
+    background: cadetblue;
+    
+}
+
+.box4{
+    background: coral;
+    
+}
+
+.box5{
+    background: crimson;
+    
+}
+
+.box6{
+    background: forestgreen;
+    
+}
+
+.box7{
+    background: darkorchid;
+    
+}
+
+.box8{
+    background: hotpink;
+    
+}
+
+.box9{
+    background: indigo;
+    
+}
+
+.box10{
+    background: dodgerblue;
+    
+}
+.boxes div{
+    margin: 1rem;
+    width: 6rem;
+    height: 6rem;
+    display: flex;
     justify-content: center;
+    align-items: center;
 }
 
 .bottom-content {
@@ -143,4 +223,40 @@ footer nav {
 footer nav a {
     color: white;
     text-decoration: none;
+}
+@media(max-width: 500px){
+    header{
+        flex-direction: column;
+        align-items: center;
+
+    }
+    header nav{
+        flex-direction: column;
+        display: flex;
+        margin: .5rem;
+    }
+    header nav a {
+        margin: 0px;
+        border: 1px solid black;
+        padding: .5rem 5rem;
+        border-radius: .5rem;
+    }
+    .top-content .text-container{
+        width: 100%;
+    }
+    .middle-content .boxes{
+        flex-direction: column;
+        align-items: center;
+
+    }
+    .middle-content .boxes div:nth-child(n+5){
+        display: none;
+    }
+    footer{
+        display:none;
+    }
+    .bottom-content{
+        display: none;
+    }
+    
 }
\ No newline at end of file
