diff --git a/css/index.css b/css/index.css
index e764f2b01f..85e87be718 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,357 @@
-/* LESS needs to be processed */
\ No newline at end of file
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  font-size: 62.5%;
+}
+html,
+body {
+  font-family: 'Roboto', sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Indie Flower', cursive;
+}
+h1 {
+  font-size: 4rem;
+}
+h2 {
+  font-size: 3.2rem;
+  padding-bottom: 10px;
+}
+h4 {
+  font-size: 2.5rem;
+  padding-bottom: 10px;
+}
+p {
+  line-height: 1.5;
+  font-size: 1.6rem;
+  padding-bottom: 10px;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+@media (max-width: 500px) {
+  img {
+    width: 96%;
+  }
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+@media (max-width: 500px) {
+  .container {
+    max-width: 500px;
+    width: 100%;
+    margin: 0 auto;
+  }
+}
+.navContainer {
+  border-bottom: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: center;
+}
+.navContainer .navTop {
+  width: 800px;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin: 25px 0px 0px 0px;
+  padding-bottom: 25px;
+}
+@media (max-width: 500px) {
+  .navContainer .navTop {
+    flex-direction: column;
+    align-items: center;
+    margin: 3% 0 0 0;
+    padding-bottom: 2%;
+  }
+}
+.navContainer .navTop h1 {
+  width: fit-content;
+}
+.navContainer .navTop nav {
+  width: 50%;
+  display: flex;
+  justify-content: space-around;
+}
+@media (max-width: 500px) {
+  .navContainer .navTop nav {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    padding-top: 3%;
+  }
+}
+.navContainer .navTop nav a {
+  color: #212529;
+  font-size: 17.5px;
+  text-decoration: none;
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+.home .headerInfo {
+  border-bottom: 2px dashed #C0C0C0;
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.home .headerInfo img {
+  margin-bottom: 10px;
+}
+.home .headerInfo h1 {
+  margin: 10px 0px;
+}
+@media (max-width: 500px) {
+  .home {
+    align-items: center;
+    margin: 0 auto;
+  }
+}
+.content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.content-section .text-content {
+  width: 48%;
+  padding-right: 1%;
+}
+.content-section .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+.content-section .img-content img {
+  border-radius: 10px;
+}
+@media (max-width: 500px) {
+  .content-section {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+  }
+  .content-section .text-content {
+    padding-right: 1%;
+    width: 96%;
+  }
+  .content-section .img-content {
+    width: 100%;
+    padding-left: 0%;
+  }
+  .content-section .img-content img {
+    color: red;
+  }
+}
+.inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+@media (max-width: 500px) {
+  .inverse-content {
+    flex-direction: column-reverse;
+  }
+}
+.inverse-content .text-content {
+  padding-left: 1%;
+  padding-right: 0;
+}
+.inverse-content .img-content {
+  padding-right: 1%;
+  padding-left: 0;
+}
+.content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+.content-destination img {
+  border-radius: 10px;
+}
+@media (max-width: 500px) {
+  .content-destination {
+    width: 100%;
+    margin: 0 auto 30px auto;
+  }
+  .content-destination img {
+    border-radius: 10px;
+  }
+}
+.content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+}
+.content-pick .destination {
+  width: 30%;
+  margin-bottom: 30px;
+}
+.content-pick .destination .btn {
+  width: 80%;
+  color: white;
+  border-radius: 15px;
+  font-size: 20px;
+  background-color: #17A2B8;
+  text-align: center;
+  padding: 12px 20px;
+}
+@media (max-width: 500px) {
+  .content-pick {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .content-pick .destination {
+    width: 75%;
+    display: flex;
+    flex-direction: column;
+  }
+  .content-pick .destination .btn {
+    width: auto;
+  }
+}
diff --git a/index.html b/index.html
index bb8663b768..a3b7d16be7 100644
--- a/index.html
+++ b/index.html
@@ -1,74 +1,135 @@
-<!doctype html>
+<!DOCTYPE html>
 
 <html lang="en">
-<head>
-  <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
 
-  <title>Fun Bus Travel Agency - Solution</title>
+    <title>Fun Bus Travel Agency - Solution</title>
 
-  <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
-  <link href="css/index.css" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto"
+      rel="stylesheet"
+    />
+    <link href="css/index.css" rel="stylesheet" />
 
-  <!--[if lt IE 9]>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-  <![endif]-->
-</head>
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
 
-<body>
+  <body>
 
-  
-     
-  <div class="container home">
-   
-    <section class="content-section">
-      <div class="text-content">
-        <h2>Let's Go!</h2>
-        <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.</p> 
-        <p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.</p>
-      </div>
-      <div class="img-content">
-        <img src="img/adventure.jpg" alt="Let's go on an adventure!">
-      </div>
-    </section>
-    <section class="content-section inverse-content">
-      <div class="img-content">
-          <img src="img/fun.jpg" class="img-fluid rounded" alt="Lets have fun!">
-      </div>
-      <div class="text-content">
-        <h2>Adventure Awaits</h2>
-        <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.</p> 
-        <p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website theme.</p>
-      </div>
-     
-    </section>
-    <section class="content-destination">
-      <h2>Pick Your Destination</h2>
-      <p>Expedition excursion design darn excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
-      <img src="img/destination.jpg" alt="Second slide">
-    </section>
-    <section class="content-pick">
+    <section class="topPage"> 
 
-      <div class="destination">
-        <h4>Fun In The Sun</h4>
-        <p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
-        <div class="btn">Sign Me Up!</div>
-      </div>
-      <div class="destination">
-        <h4>Mountain Excursion</h4>
-        <p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
-        <div class="btn">Sign Me Up!</div>
-      </div>
-      <div class="destination">
-        <h4>Island Getaway</h4>
-        <p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
-        <div class="btn">Sign Me Up!</div>
-      </div>
-    </section>
-  </div><!-- container -->
+      <h1><a class="homeButton" href="#Home">Fun Bus
+      </a></h1>
+    
 
-  <footer class="footer">
-    <p>Copyright Fun Bus 2018</p>
-  </footer>
+    <nav class="navContainer">
+      <a href="#Home">Home</a>
+      <a href="#About Us">About Us</a>
+      <a href="#Blog"> Blog</a>
+      <a href="#Contact">Contact</a>
+    </nav>
+  </section>
 
-</body>
-</html>
\ No newline at end of file
+  <div class="heroImage">
+    <img src="img\fun-bus.jpg"/>
+  </div>
+<div class="middleContainer">
+  <section class="middleContent">
+    <h2>Welcome to the Fun Bus!</h2>
+    <p>
+      Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design, traveloggewr adventure Wordpress wanderlust theme blogger website expedition theme travelblogger Adventer fun travler pretty design website expedition.
+    </p>
+    
+
+  </section>
+</div>
+
+    <div class="container-home">
+      <section class="content-section">
+        <div class="text-content">
+          <h2>Let's Go!</h2>
+          <p>
+            Adventure webdesign pretty design design, excursion cute WordPress
+            blogger design webdesign adventure. Pretty simple traveling fun
+            WordPress wanderlust darn simple organized.
+          </p>
+          <p>
+            Expedition colorful design simple excursion blogger blogger design
+            WordPress design, design organized website theme.
+          </p>
+        </div>
+        <div class="img-content">
+          <img src="img/adventure.jpg" alt="Let's go on an adventure!" />
+        </div>
+      </section>
+      <section class="content-section inverse-content">
+        <div class="img-content">
+          <img
+            src="img/fun.jpg"
+            class="img-fluid rounded"
+            alt="Lets have fun!"
+          />
+        </div>
+        <div class="text-content">
+          <h2>Adventure Awaits</h2>
+          <p>
+            Adventure webdesign pretty design design, excursion cute WordPress
+            blogger design webdesign adventure. Pretty simple traveling fun
+            WordPress wanderlust darn simple organized.
+          </p>
+          <p>
+            Expedition colorful design simple excursion blogger blogger design
+            WordPress design, design organized website theme.
+          </p>
+        </div>
+      </section>
+      <section class="content-destination">
+        <h2>Pick Your Destination</h2>
+        <p>
+          Expedition excursion design darn excursion fun, clean simple organized
+          WordPress Travel colorful webdesign. Traveler blogger website design
+          expedition clean excursion traveling.
+        </p>
+        <img src="img/destination.jpg" alt="Second slide" />
+      </section>
+      <section class="content-pick">
+        <div class="destination">
+          <h4>Fun In The Sun</h4>
+          <p>
+            Expedition excursion design excursion fun, clean simple organized
+            WordPress Travel colorful webdesign. Traveler blogger website design
+            expedition clean excursion traveling.
+          </p>
+          <div class="btn">Sign Me Up!</div>
+        </div>
+        <div class="destination">
+          <h4>Mountain Excursion</h4>
+          <p>
+            Expedition excursion design excursion fun, clean simple organized
+            WordPress Travel colorful webdesign. Traveler blogger website design
+            expedition clean excursion traveling.
+          </p>
+          <div class="btn">Sign Me Up!</div>
+        </div>
+        <div class="destination">
+          <h4>Island Getaway</h4>
+          <p>
+            Expedition excursion design excursion fun, clean simple organized
+            WordPress Travel colorful webdesign. Traveler blogger website design
+            expedition clean excursion traveling.
+          </p>
+          <div class="btn">Sign Me Up!</div>
+        </div>
+      </section>
+    </div>
+    <!-- container -->
+
+    <footer class="footer">
+      
+      <p>Copyright Fun Bus 2018</p>
+    </footer>
+  </body>
+</html>
diff --git a/less/global.less b/less/global.less
index abe21bf970..e13850e0b0 100644
--- a/less/global.less
+++ b/less/global.less
@@ -37,10 +37,20 @@ p {
 img {
   max-width: 100%;
   height: auto;
+
+  @media @mobile {
+    width: 96%;
+  }
 }
 
 .container {
   max-width: 800px;
   width: 100%;
   margin: 0 auto;
-}
+
+  @media @mobile {
+    max-width: 500px;
+    width: 100%;
+    margin: 0 auto;
+  }
+}
\ No newline at end of file
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..e7ac1a743f 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,32 +1,93 @@
 .home {
 
+  .headerInfo {
+    border-bottom: 2px dashed @silver;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+
+    img {
+      margin-bottom: 10px;
+    }
+
+    h1 {
+      margin: 10px 0px;
+    }
+  }
+
+  @media @mobile {
+    align-items: center;
+    margin: 0 auto;
+    
+
+
+  }
+  }
+
+
+    
+    
+    
+
+
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    align-items: center;
 
-   
-    
     .text-content {
       width: 48%;
       padding-right: 1%;
-    }
+
+      }
 
     .img-content {
       width: 48%;
       padding-left: 1%;
 
+
       img {
         border-radius: 10px;
+
+      }
+    }
+    @media @mobile {
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+
+         .text-content {
+        padding-right: 1%;
+        width: 96%;
+
+      }
+
+      .img-content {
+        width: 100%;
+        padding-left: 0%;
+
+        img {
+          color: red;
+
+        }
+
       }
+
     }
   }
+  
 
   .inverse-content {
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
 
+    @media @mobile {
+      flex-direction: column-reverse;
+    }
+
     .text-content {
       padding-left: 1%;
       padding-right: 0;
@@ -45,6 +106,15 @@
     img {
       border-radius: 10px;
     }
+
+    @media @mobile {
+      width: 100%;
+      margin: 0 auto 30px auto;
+
+      img {
+        border-radius: 10px;
+      }
+    }
   }
 
   .content-pick {
@@ -56,6 +126,32 @@
     .destination {
       width: 30%;
       margin-bottom: 30px;
+
+      .btn {
+        .btnMaker();
+      }
+    }
+
+@media @mobile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+
+
+
+  .destination {
+    width: 75%;
+    display: flex;
+    flex-direction: column;
+
+    .btn {
+      width: auto;
     }
   }
-}// home
\ No newline at end of file
+
+}
+
+
+
+  }
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c113ca2c46..302c8821ca 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,15 @@
 // Follow the order in the readme
+
+@import 'variables';
+
+@import 'mixins';
+
+@import 'reset';
+
+@import 'global';
+
+@import  'navigation';
+
+@import 'footer';
+
+@import 'home-page';
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..c07cdc9133 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,17 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+
+
+//BUTTONS
+
+.btnMaker(@color:white, @border-radius:15px, @font-size
+:20px, @background-color: @button-bg) {
+
+    width: 80%;
+    color:@color;
+    border-radius:@border-radius; 
+    font-size:@font-size ;
+    background-color:@background-color;
+    text-align: center;
+    padding: 12px 20px;
+
+}
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..cc13bd9a6d 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,59 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+
+.navContainer {
+    border-bottom: 2px dashed @silver;
+    display: flex;
+    justify-content: center;
+
+    @media @mobile {
+        
+    }
+    
+    .navTop {
+            width: 800px;
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+            margin: 25px 0px 0px 0px;
+            padding-bottom: 25px;
+         
+            @media @mobile {
+                flex-direction: column;
+                align-items: center;
+                margin: 3% 0 0 0;
+                padding-bottom: 2%;
+        
+            }
+        
+            h1 {
+                width: fit-content;
+        
+            }
+        
+            nav {
+                width: 50%;
+                display: flex;
+                justify-content: space-around;
+
+                @media @mobile {
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-around;
+                    padding-top: 3%;
+
+                }
+            
+        
+        
+            a {
+                color: @shark;
+                font-size: 17.5px;
+                text-decoration: none;
+        
+            
+        }
+
+        }
+        }
+        
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..6a4ce14337 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -11,4 +11,9 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+
+// MOBILE DESIGN
+
+@mobile: (max-width: 500px);
\ No newline at end of file