diff --git a/.DS_Store b/.DS_Store
index faa2d1e803..25255c582e 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/README.md b/README.md
index 8c6cbcf19f..8517851eb7 100644
--- a/README.md
+++ b/README.md
@@ -4,29 +4,29 @@ Fun Bus is a travel agency looking for some help on their website.  They want a
 
 ## Task 1: Set Up The Project With Git
 
-- [ ] Create a forked copy of this project.
-- [ ] Add your team lead as collaborator on Github.
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
- 
+- [X] Create a forked copy of this project.
+- [X] Add your team lead as collaborator on Github.
+- [X] Clone your OWN version of the repository (Not Lambda's by mistake!).
+- [X] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [X] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [X] Push commits: git push origin `<firstName-lastName>`.
+
 Follow these steps for completing your project.
 
-- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
-- [ ] Add your team lead as a reviewer on the pull-request
-- [ ] Your team lead will count the project as complete by merging the branch back into master.
+- [X] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo). **Please don't merge your own pull request**
+- [X] Add your team lead as a reviewer on the pull-request
+- [X] Your team lead will count the project as complete by merging the branch back into master.
 
 ## Task 2: Set up your preprocessor
-* [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your team lead for help.
-* [ ] Open your terminal and navigate to your preprocessing project by using the `cd` command
-* [ ] Once in your project's root folder, run the following command `less-watch-compiler less css index.less`
-* [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file.
-* [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task
+* [X] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your team lead for help.
+* [X] Open your terminal and navigate to your preprocessing project by using the `cd` command
+* [X] Once in your project's root folder, run the following command `less-watch-compiler less css index.less`
+* [X] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red` in your `index.less` file.
+* [X] Once you see the red screen, you can delete that style and you're ready to start on the next task
 
 ## Task 3: Import LESS Files
 
-* [ ] Navigate to your `index.less` file. Notice the file is blank.  In order for you to see the styles for this project you must import them in a certain order.  That order is as follows:
+* [X] Navigate to your `index.less` file. Notice the file is blank.  In order for you to see the styles for this project you must import them in a certain order.  That order is as follows:
 
 1. `variables.less`
 2. `mixins.less`
@@ -38,21 +38,18 @@ Follow these steps for completing your project.
 
 
 ## Task 4: Desktop Updates Needed
-* [ ] Review the [desktop design file](design-files/fun-bus-desktop.png).  Notice the navigation, header, and buttons at the bottom of the page are missing.
-* [ ] Navigation: Use the `navigation.less` file for all your navigation styling
-* [ ] Main Header: Use the `home-page.less` file for the header styling.
-* [ ] Buttons: Create a parametric mixin that can create the missing buttons in the design file. Use the `mixins.less` file to create your mixin.
+* [X] Review the [desktop design file](design-files/fun-bus-desktop.png).  Notice the navigation, header, and buttons at the bottom of the page are missing.
+* [X] Navigation: Use the `navigation.less` file for all your navigation styling
+* [X] Main Header: Use the `home-page.less` file for the header styling.
+* [X] Buttons: Create a parametric mixin that can create the missing buttons in the design file. Use the `mixins.less` file to create your mixin.
 
 
 ## Task 5: Mobile Updates Needed
-* [ ] Use escaping to create a variable named `@mobile` that contains this value: `(max-width: 500px)`.  Use the `variables.less` file to house your variables.
-* [ ] Review the [mobile design file](design-files/fun-bus-mobile.png). You will see several design updates that need updating. 
-* [ ] Match the design file at `500px` as well as you can 
+* [X] Use escaping to create a variable named `@mobile` that contains this value: `(max-width: 500px)`.  Use the `variables.less` file to house your variables.
+* [X] Review the [mobile design file](design-files/fun-bus-mobile.png). You will see several design updates that need updating.
+* [X] Match the design file at `500px` as well as you can
 
-## Stretch Goals: 
+## Stretch Goals:
 * [ ] Create an animation mixin using parametric mixins
-* [ ] Introduce a form with inputs allowing users to select a vacation package and a submit button at the bottom of the page. Introduce inputs for name, email, phone number, and an area for them to leave special instructions. 
+* [ ] Introduce a form with inputs allowing users to select a vacation package and a submit button at the bottom of the page. Introduce inputs for name, email, phone number, and an area for them to leave special instructions.
 * [ ] Style the site to look good at all sizes, not just desktop and phone
-
-
-
diff --git a/css/index.css b/css/index.css
index e764f2b01f..9b1adfd52e 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,317 @@
-/* LESS needs to be processed */
\ No newline at end of file
+.font-class {
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+}
+.button-class {
+  background-color: teal;
+  padding: 10px;
+  border-radius: 10px;
+  text-align: center;
+  width: 75%;
+}
+.btn {
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+  background-color: teal;
+  padding: 10px;
+  border-radius: 10px;
+  text-align: center;
+  width: 75%;
+}
+/* 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;
+}
+a {
+  text-decoration: none;
+  color: black;
+  padding-left: 12px;
+  padding-right: 12px;
+  font-size: 14px;
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+.home section.navigation-area {
+  padding-top: 10px;
+}
+.home div.navigation-area {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 10px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.home div.navigation-items {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.home h2.navigation-area {
+  padding-top: 20px;
+}
+.home p.navigation-area {
+  padding-bottom: 15px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.home .content-section {
+  margin: 30px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.home .content-section .text-content {
+  width: 48%;
+  padding-right: 1%;
+}
+.home .content-section .img-content {
+  width: 48%;
+  padding-left: 1%;
+}
+.home .content-section .img-content img {
+  border-radius: 10px;
+}
+.home .inverse-content {
+  padding-bottom: 30px;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.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;
+}
+.home .content-pick .destination {
+  width: 30%;
+  margin-bottom: 30px;
+}
+@media (max-width: 500px) {
+  .home .navigation-area {
+    margin: 10px;
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+  .home .navigation-items {
+    margin-left: 80px;
+  }
+  .home h1 {
+    margin-left: 150px;
+    margin-right: 40px;
+  }
+  .home img {
+    width: 95%;
+  }
+  .home .content-destination {
+    width: 95%;
+  }
+  .home .content-section {
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin-left: 20px;
+    width: 200%;
+  }
+  .home .inverse-content {
+    flex-direction: column-reverse;
+  }
+  .home .content-pick {
+    margin: 10px;
+    flex-direction: column;
+    width: 200%;
+  }
+  .home .destination {
+    margin-left: 100px;
+  }
+  .home .btn {
+    width: 300px;
+  }
+}
diff --git a/design-files/fun-bus-desktop.png b/design-files/fun-bus-desktop.png
index 6c1af0ee56..b9b73bcbd8 100644
Binary files a/design-files/fun-bus-desktop.png and b/design-files/fun-bus-desktop.png differ
diff --git a/index.html b/index.html
index bb8663b768..33de7c34ea 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
 
   <title>Fun Bus Travel Agency - Solution</title>
-
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
   <link href="css/index.css" rel="stylesheet">
 
@@ -15,15 +15,25 @@
 </head>
 
 <body>
-
-  
-     
   <div class="container home">
-   
+    <section class= "navigation-area">
+      <div class="navigation-area">
+        <h1>Fun Bus</h1>
+          <div class="navigation-items">
+            <a href="#">Home</a>
+            <a href="#">About Us</a>
+            <a href="#">Blog</a>
+            <a href="#">Contact</a>
+          </div>
+      </div>
+      <img class="header-bus" src= "./img/fun-bus.jpg"/>
+      <h2 class="navigation-area">Welcome To Fun Bus!</h2>
+      <p class="navigation-area">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>
-        <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty simple traveling fun WordPress wanderlust darn simple organized.</p> 
+        <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">
@@ -36,10 +46,10 @@ <h2>Let's Go!</h2>
       </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>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>
@@ -71,4 +81,4 @@ <h4>Island Getaway</h4>
   </footer>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..3e5e4faa0f 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,13 +1,37 @@
 .home {
 
+  section.navigation-area {
+    padding-top: 10px;
+  }
+
+  div.navigation-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 10px;
+    border-bottom: 2px dashed @navigation-border;
+  }
+
+  div.navigation-items {
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  h2.navigation-area {
+    padding-top: 20px;
+  }
+
+  p.navigation-area {
+    padding-bottom: 15px;
+    border-bottom: 2px dashed @navigation-border;
+  }
+
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 
-   
-    
     .text-content {
       width: 48%;
       padding-right: 1%;
@@ -58,4 +82,55 @@
       margin-bottom: 30px;
     }
   }
-}// home
\ No newline at end of file
+
+  @media (max-width:500px) {
+    .navigation-area {
+      margin: 10px;
+      flex-wrap: wrap;
+      flex-direction: column;
+    }
+
+    .navigation-items {
+      margin-left: 80px;
+    }
+
+    h1 {
+      margin-left: 150px;
+      margin-right: 40px;
+    }
+
+    img {
+      width: 95%;
+    }
+
+    .content-destination {
+      width: 95%;
+    }
+
+    .content-section {
+      flex-direction: column;
+      flex-wrap: wrap;
+      margin-left: 20px;
+      width: 200%;
+    }
+
+    .inverse-content {
+      flex-direction: column-reverse;
+    }
+
+    .content-pick {
+      margin: 10px;
+      flex-direction: column;
+      width: 200%;
+    }
+
+    .destination {
+      margin-left: 100px;
+    }
+
+    .btn {
+      width: 300px;
+    }
+  }
+
+}// home
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..7524dff195 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,20 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+
+.font-class {
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.button-class {
+  background-color: teal;
+  padding: 10px;
+  border-radius: 10px;
+  text-align: center;
+  width: 75%;
+}
+
+.btn {
+    .font-class ();
+    .button-class ();
+}
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..5ebcaa30df 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,22 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+
+a {
+  text-decoration: none;
+  color: black;
+  padding-left: 12px;
+  padding-right: 12px;
+  font-size: 14px;
+
+  a.link {
+
+  }
+
+  a.hover {
+
+  }
+
+  a.active {
+
+  }
+
+}