diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..aef844305a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index e764f2b01f..1c6161eeca 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,358 @@
-/* LESS needs to be processed */
\ No newline at end of file
+/* //for button only
+@font-size: 1.8rem;
+@background: #008080;
+@color:  white; */
+.Cntr-flx {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 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;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+.main-nav {
+  padding-bottom: 25px;
+  border-bottom: 1px dashed #b3b2b2;
+  max-width: 1000px;
+  width: 100%;
+  margin: 0 auto;
+}
+.main-nav .nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  width: 80%;
+}
+@media (max-width: 500px) {
+  .main-nav .nav-container {
+    flex-wrap: wrap;
+    text-align: center;
+  }
+}
+.main-nav .nav-container .big-txt {
+  width: 100%;
+  flex-basis: 100%;
+  margin: 15px 0;
+}
+.main-nav .nav-container .mnu-link {
+  display: flex;
+  justify-content: space-around;
+  width: 40%;
+  font-size: 1.6rem;
+}
+@media (max-width: 500px) {
+  .main-nav .nav-container .mnu-link {
+    width: 100%;
+    flex-basis: 100%;
+    justify-content: space-between;
+  }
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed #b3b2b2;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+.home {
+  max-width: 800px;
+  width: 100%;
+}
+@media (max-width: 500px) {
+  .home {
+    width: 90%;
+  }
+}
+.home .top-cont-mod {
+  padding-bottom: 15px;
+  border-bottom: 2px dashed #b3b2b2;
+}
+.home .top-cont-mod img {
+  margin-bottom: 20px;
+}
+.home .content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.home .text-content {
+  width: 48%;
+  padding-right: 1%;
+}
+@media (max-width: 500px) {
+  .home .text-content {
+    width: 100%;
+  }
+}
+.home .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+.home .img-content img {
+  border-radius: 10px;
+}
+@media (max-width: 500px) {
+  .home .img-content img {
+    width: 100%;
+  }
+}
+@media (max-width: 500px) {
+  .home .img-content {
+    width: 100%;
+  }
+}
+.home .inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #b3b2b2;
+}
+.home .inverse-content .text-content {
+  padding-left: 1%;
+  padding-right: 0;
+}
+.home .inverse-content .img-content {
+  padding-right: 1%;
+  padding-left: 0;
+}
+@media (max-width: 500px) {
+  .home .inverse-content .img-content {
+    order: 1;
+  }
+}
+@media (max-width: 500px) {
+  .home .inverse-content .img-content img {
+    width: 100%;
+  }
+}
+.home .content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+.home .content-destination img {
+  border-radius: 10px;
+}
+@media (max-width: 500px) {
+  .home .content-destination {
+    width: 100%;
+  }
+}
+.home .content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #b3b2b2;
+  display: flex;
+  justify-content: space-between;
+}
+.home .content-pick .destination {
+  width: 50%;
+  margin-bottom: 30px;
+}
+.home .content-pick .destination .btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.8rem;
+  background: #008080;
+  color: white;
+  border-radius: 25px;
+  width: 80%;
+  height: 45px;
+  cursor: pointer;
+}
+@media (max-width: 500px) {
+  .home .content-pick .destination .btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.8rem;
+    background: #17A2B8;
+    color: white;
+    border-radius: 25px;
+    width: 80%;
+    height: 45px;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}
+@media (max-width: 500px) {
+  .home .content-pick .destination {
+    width: 80%;
+    margin: 0 auto;
+  }
+}
+@media (max-width: 500px) {
+  .home .content-pick {
+    flex-direction: column;
+    margin: 0 auto;
+  }
+}
diff --git a/index.html b/index.html
index bb8663b768..1377afa589 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Fun Bus Travel Agency - Solution</title>
 
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
@@ -13,16 +13,31 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
 </head>
-
+<!--Navigation Menu -->
 <body>
-
-  
-     
+  <header class="main-nav">
+    <div class="container nav-container">
+      <h1 class="big-txt">Fun Bus</h1>
+      <nav class="mnu-link">
+        <a href="#">Home</a>
+        <a href="#">About</a>
+        <a href="#">Blog</a>
+        <a href="#">Contact</a>
+      </nav>
+    </div>
+  </header>
+  <!--Top part of fun bus-->
   <div class="container home">
-   
+    <!--Added top content mod-->
+    <section class="top-cont-mod">
+      <img src="img/fun-bus.jpg" alt="Fun Bus">
+      <h2>Welcome To Fun Bus!</h2>
+      <p>Traveling expedition, modern, clean webdesign blogger clean website theme website modern. Design pretty design, travelblogger adventure Wordpress wanderlust theme blogger website expedition theme travelblogger. Adventure fun traveler pretty design website expedition.</p>
+    </section>
+
     <section class="content-section">
       <div class="text-content">
-        <h2>Let's Go!</h2>
+        <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>
@@ -67,8 +82,7 @@ <h4>Island Getaway</h4>
   </div><!-- container -->
 
   <footer class="footer">
-    <p>Copyright Fun Bus 2018</p>
+    <p>Copyright Fun Bus 2020</p>
   </footer>
-
 </body>
 </html>
\ No newline at end of file
diff --git a/less/footer.less b/less/footer.less
index 71cff032e9..1b3ebe1ba8 100644
--- a/less/footer.less
+++ b/less/footer.less
@@ -1,6 +1,6 @@
 .footer {
   width: 100%;
-  border-top: 2px dashed silver;
+  border-top: 2px dashed @silver;
   background: @sandy-beach;
   
   p {
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..8fc05bacfb 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,16 +1,34 @@
 .home {
+  max-width: 800px;
+  width: @width;
+  //for mobile only
+  @media @mob-500{
+    width: 90%;    
+  }
+  // for the text above the line 
+  .top-cont-mod{
+    padding-bottom: 15px;
+    border-bottom: 2px dashed @navigation-border;
+    //for the bus pic on the header
+    img{
+      margin-bottom: 20px;
+    }
+  }
 
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+  }    
 
-   
-    
     .text-content {
       width: 48%;
       padding-right: 1%;
+
+      @media @mob-500 {
+        width: 100%;
+      }
     }
 
     .img-content {
@@ -19,9 +37,17 @@
 
       img {
         border-radius: 10px;
+        
+        @media @mob-500 {
+          width: 100%;
+        }
+      }
+
+      @media @mob-500 {
+        width: 100%;
       }
     }
-  }
+  
 
   .inverse-content {
     padding-bottom: 30px;
@@ -35,7 +61,17 @@
     .img-content {
       padding-right: 1%;
       padding-left: 0;
-    }
+      //if order is not 1 at 500 the image will not be ordered
+      @media @mob-500 {
+        order: 1;
+      }
+
+      img {
+        @media @mob-500 {
+          width: 100%;
+        }
+      }//img content
+    }//inverse content
   }
 
   .content-destination {
@@ -45,8 +81,13 @@
     img {
       border-radius: 10px;
     }
+
+    @media @mob-500 {
+      width: 100%;
+    }
   }
 
+
   .content-pick {
     padding-top: 30px;
     border-top: 2px dashed @navigation-border;
@@ -54,8 +95,29 @@
     justify-content: space-between;
 
     .destination {
-      width: 30%;
+      width: 50%;
       margin-bottom: 30px;
+      //making the button passing size,color,bg-color
+      .btn {
+        .make-btn(1.8rem, #008080, white);
+        //making the button with a differnt shade of green
+        @media @mob-500 {
+          .make-btn(1.8rem, #17A2B8, white);
+          width: 100%;
+          margin-bottom: 20px;
+        }
+        cursor: pointer;
+      }
+      
+      @media @mob-500 {
+        width: 80%;
+        margin: 0 auto;
+      }
+    }
+
+    @media @mob-500 {
+      flex-direction: column;
+      margin: 0 auto;
     }
   }
 }// home
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c113ca2c46..dc0111390e 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,8 @@
 // Follow the order in the readme
+@import "variables.less";
+@import "mixins.less";
+@import "reset.less";
+@import "global.less";
+@import "navigation.less";
+@import "footer.less";
+@import "home-page.less";
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..2a846a3f67 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,16 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+.Cntr-flx {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.make-btn(@font-size, @background, @color) {
+  .Cntr-flx;
+  font-size: @font-size;
+  background: @background;
+  color: @color;
+  border-radius: 25px;
+  width: 80%;
+  height: 45px;
+}
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..ca566d15cc 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,40 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+//main nav with 3 items
+.main-nav {
+padding-bottom: 25px;
+border-bottom: 1px dashed @navigation-border;
+max-width: 1000px;
+width: 100%;
+margin: 0 auto;
+
+//
+.nav-container{
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  width: 80%;
+
+  @media @mob-500 {
+    flex-wrap: wrap;
+    text-align: center;
+  }
+//top text 'Fun Bus'
+  .big-txt{
+    width: 100%;
+    flex-basis: 100%;
+    margin: 15px 0;
+  }
+  .mnu-link{
+    display: flex;
+    justify-content:space-around ;
+    width: 40%;
+    font-size: 1.6rem;
+
+    @media @mob-500 {
+      width: 100%;
+      flex-basis: 100%;
+      justify-content: space-between;
+    }
+  }
+}
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..13848ace4a 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -8,7 +8,17 @@
 
 // Colors
 @white: #FFFFFF;
-@silver: #C0C0C0;
+@silver: rgb(179, 178, 178);
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+//for mobile
+@mob-500: ~"(max-width: 500px)";
+@width: 100%;
+
+/* //for button only
+@font-size: 1.8rem;
+@background: #008080;
+@color:  white; */
+