diff --git a/css/index.css b/css/index.css
index e764f2b01f..6c399a9d47 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,372 @@
-/* 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.6rem;
+  padding-bottom: 8px;
+}
+
+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;
+}
+
+nav {
+  margin-left: 62px;
+  text-decoration: none;
+  text-decoration-color: black;
+  justify-content: center;
+}
+
+nav a {
+  margin-left: 30px;
+  font-size: 2rem;
+  text-decoration: none;
+  color: teal;
+
+}
+
+nav .first-anchor {
+  margin-left: 0;
+}
+
+.btn {
+  border-radius: 15px;
+  color: white;
+  background-color: teal;
+  text-align: center;
+  padding: 1rem;
+  font-size: 1.6rem;
+  margin-right: 20px;
+}
+
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+
+header {
+  width: 100%;
+  margin: 20px 0;
+  padding: 20px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  text-align: center;
+}
+
+header h2 {
+  font-size: 3rem;
+}
+
+@media (max-width: 500px) {
+  header {
+    flex-direction: column;
+    align-items: center;
+    margin-left: 20px 0;
+    margin-bottom: 20px;
+  }
+}
+
+.img {
+  margin: center;
+  border-width: 25px 30px 30px 20px;
+  padding-right: 20px 0;
+  border-top: 2px dashed black;
+}
+
+.welcome {
+  margin-top: 20px;
+  border-bottom: 2px dashed black;
+}
+
+.welcome h2 {
+  margin-bottom: 20px;
+}
+
+.home .content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+@media (max-width: 500px) {
+  .home .content-section {
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+  }
+}
+
+.home .content-section .text-content {
+  width: 48%;
+  padding-right: 1%;
+}
+
+@media (max-width: 500px) {
+  .home .content-section .text-content {
+    flex-direction: column-reverse;
+    justify-content: center;
+    width: 100%;
+  }
+}
+
+.home .content-section .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+
+@media (max-width: 500px) {
+  .home .content-section .img-content {
+    width: 70%;
+    align-items: center;
+    margin-left: 60px;
+  }
+}
+
+.home .content-section .img-content img {
+  border-radius: 10px;
+}
+
+.home .inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+
+@media (max-width: 500px) {
+  .home .inverse-content {
+    width: 100%;
+    flex-direction: column-reverse;
+  }
+}
+
+.home .inverse-content .text-content {
+  padding-left: 1%;
+  padding-right: 0;
+}
+
+.home .inverse-content .img-content {
+  padding-right: 1%;
+  padding-left: 0;
+}
+
+.home .content-destination {
+  width: 75%;
+  margin: 0 auto 30px;
+}
+
+.home .content-destination img {
+  border-radius: 10px;
+}
+
+.home .content-pick {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 500px) {
+  .home .content-pick {
+    flex-direction: column;
+  }
+
+  .home .content-pick .destination {
+    width: 100%;
+    margin-bottom: 30px;
+  }
+
+  .home .content-pick .destination .btn {
+    border-radius: 15px;
+    background-color: teal;
+    text-align: center;
+    padding: 1rem;
+    font-size: 1.6rem;
+    margin-right: 20px;
+    border: 2px solid black;
+    color: white;
+  }
+}
\ No newline at end of file
diff --git a/design-files/design_file_desktop_wc.jpg b/design-files/design_file_desktop_wc.jpg
new file mode 100644
index 0000000000..97aba7b236
Binary files /dev/null and b/design-files/design_file_desktop_wc.jpg differ
diff --git a/index.html b/index.html
index bb8663b768..e0bacf65f2 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +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>
 
@@ -15,11 +16,23 @@
 </head>
 
 <body>
+  <header>
+    <h2>Fun Bus</h2>
+      <nav>
+        <a href="" class="first-anchor">Home</a>
+        <a href="">About Us</a>
+        <a href="">Blog</a>
+        <a href="">Contact</a>
+      </nav>
+      <!--<button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="toggle dark mode"><svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496"><path fill="currentColor" d="M8, 256C8, 504, 256, 5044S504, 393, 504, 256, 393, 8, 256, 8" transform="translate(-8 -8)"/></svg>-->
+  </header>
 
-  
-     
   <div class="container home">
-   
+    <img class="img" src="img/fun-bus.jpg">
+    <section class="welcome">
+      <h2>Welcome To Fun Bus!</h2>
+      <p>Traveling expedition modern, clean webdesign blogger clean website them website modern.  Design pretty design, travelblogger, adventure WordPress wanderlust them blogger website expedition them travelblogger.  Adventure fun traveler pretty design website expedition.</p>
+    </section>
     <section class="content-section">
       <div class="text-content">
         <h2>Let's Go!</h2>
@@ -39,8 +52,8 @@ <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>
@@ -51,17 +64,17 @@ <h2>Pick Your Destination</h2>
       <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>
+        <button class="btn">Sign Me Up!</button>
       </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>
+        <button class="btn">Sign Me Up!</button>
       </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>
+        <button class="btn">Sign Me Up!</button>
       </div>
     </section>
   </div><!-- container -->
@@ -71,4 +84,5 @@ <h4>Island Getaway</h4>
   </footer>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..962dbc44ec 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,3 +1,44 @@
+// Header and nav styling
+header {
+  width: 100%;
+  margin: 20px 0;
+  padding: 20px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+
+  h2 {
+    font-size: 3rem;
+  }
+
+  @media @mobile {
+    flex-direction: column;
+    align-items: center;
+    margin-left: 20px 0;
+    margin-bottom: 20px;
+  }
+}
+
+// Mid-content styling
+
+.img {
+  margin: center;
+  border-width: 25px 30px 30px 20px;
+  padding-right: 20px 0;
+  border-top: 2px dashed black;
+}
+
+.welcome {
+  margin-top: 20px;
+  border-bottom: 2px dashed black;
+
+  h2 {
+    margin-bottom: 20px;
+  }
+}
+
+// Mid-content styling continued and Mobile media queries nested
+
 .home {
 
   .content-section {
@@ -6,17 +47,33 @@
     flex-wrap: wrap;
     justify-content: space-between;
 
-   
-    
+    @media @mobile {
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+    }
+
     .text-content {
       width: 48%;
       padding-right: 1%;
+
+      @media @mobile {
+        flex-direction: column-reverse;
+        justify-content: center;
+        width: 100%;
+      }
     }
 
     .img-content {
       width: 48%;
       padding-left: 1%;
 
+      @media @mobile {
+        width: 70%;
+        align-items: center;
+        margin-left: 60px;
+      }
+
       img {
         border-radius: 10px;
       }
@@ -27,6 +84,11 @@
     padding-bottom: 30px;
     border-bottom: 2px dashed @navigation-border;
 
+    @media @mobile {
+      width: 100%;
+      flex-direction: column-reverse;
+    }
+
     .text-content {
       padding-left: 1%;
       padding-right: 0;
@@ -53,9 +115,25 @@
     display: flex;
     justify-content: space-between;
 
-    .destination {
-      width: 30%;
-      margin-bottom: 30px;
+    @media @mobile {
+      flex-direction: column;
+
+      .destination {
+        width: 100%;
+        margin-bottom: 30px;
+
+        .btn {
+          border-radius: 15px;
+          background-color: teal;
+          text-align: center;
+          padding: 1rem;
+          font-size: 1.6rem;
+          margin-right: 20px;
+          .custom-button(2px solid black, white);
+        }
+      }
     }
   }
-}// home
\ No newline at end of file
+}
+
+// home
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c113ca2c46..1dafa6e947 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,16 @@
 // Follow the order in the readme
+
+// Variables and Mixins
+@import "variables.less";
+@import "mixins.less";
+
+// Reset
+@import "reset.less";
+
+// Global
+@import "global.less";
+
+// Components
+@import "navigation.less";
+@import "footer.less";
+@import "home-page.less";
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..c0c839f9ce 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,9 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+
+.custom-button (@border, @color){
+    border: @border;
+    color: @color;
+}
+
+
+
diff --git a/less/navigation.css b/less/navigation.css
new file mode 100644
index 0000000000..01aff74046
--- /dev/null
+++ b/less/navigation.css
@@ -0,0 +1,22 @@
+nav {
+  margin-left: 62px;
+  text-decoration: none;
+  text-decoration-color: black;
+  justify-content: center;
+}
+nav a {
+  margin-left: 20px;
+  font-size: 2rem;
+}
+nav .first-anchor {
+  margin-left: 0;
+}
+.btn {
+  border-radius: 15px;
+  color: white;
+  background-color: teal;
+  text-align: center;
+  padding: 1rem;
+  font-size: 1.6rem;
+  margin-right: 20px;
+}
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..b8719e2656 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,27 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+
+nav {
+    margin-left: 62px;
+    text-decoration: none;
+    text-decoration-color: black;
+    justify-content: center;
+
+    a {
+        margin-left: 20px;
+        font-size: 2rem;
+    }
+
+    .first-anchor {
+        margin-left: 0;
+    }
+}
+
+.btn {
+    border-radius: 15px;
+    color: white;
+    background-color: teal;
+    text-align: center;
+    padding: 1rem;
+    font-size: 1.6rem;
+    margin-right: 20px;
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..c27bdccb22 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -11,4 +11,13 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+// Escaped Values
+
+@mobile: ~"(max-width: 500px)";
+@desktop: ~"(max-width: 800px)";
+
+
+
+