diff --git a/README.md b/README.md
index 8c6cbcf19f..1c251e42cb 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,20 +38,20 @@ 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: 
 * [ ] 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. 
+* [x] 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..6c7f976cc8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,360 @@
-/* LESS needs to be processed */
\ No newline at end of file
+.buttons:hover {
+  opacity: 1;
+}
+/* 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;
+}
+@media (max-width:500px) {
+  .container {
+    max-width: 500px;
+    width: 90%;
+    margin: 0 5%;
+  }
+}
+nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 96px;
+}
+nav h1 {
+  width: 60%;
+}
+nav a {
+  font-size: 1.6rem;
+  text-decoration: none;
+  color: black;
+}
+hr.header-border {
+  border: 1.2px dashed lightGray;
+  margin: 0 -10vh;
+  width: 120%;
+}
+@media (max-width:500px) {
+  nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+  nav h1 {
+    width: 100%;
+    text-align: center;
+  }
+  nav a {
+    font-size: 1.6rem;
+    text-decoration: none;
+    color: black;
+  }
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+@media (max-width:500px) {
+  .footer p {
+    font-weight: bold;
+  }
+}
+.home main {
+  margin: 30px 0;
+  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;
+}
+@media (max-width:500px) {
+  .home .content-section {
+    flex-direction: column;
+  }
+  .home .content-section .text-content {
+    width: 96%;
+    padding: 12px 2%;
+  }
+  .home .content-section .img-content {
+    width: 100%;
+  }
+}
+.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;
+}
+@media (max-width:500px) {
+  .home .inverse-content {
+    flex-direction: column-reverse;
+  }
+}
+.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 input {
+  width: 32%;
+  display: flex;
+  flex-direction: row;
+  padding: 12px;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+@media (max-width:500px) {
+  .home input {
+    width: 100%;
+    flex-direction: column;
+    margin: 6px 0;
+  }
+}
+.home textarea {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 18px 0;
+}
+@media (max-width:500px) {
+  .home textarea {
+    margin: 6px 0;
+  }
+}
+.home form {
+  padding-top: 30px;
+  border-top: 2px dashed #C0C0C0;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.home form .destination {
+  width: 30%;
+  margin-bottom: 30px;
+}
+@media (max-width:500px) {
+  .home form {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home form .destination {
+    width: 80%;
+  }
+}
+.home .btn {
+  background: #17A2B8;
+  color: #000000;
+  width: 100%;
+  padding: 12px;
+  border-radius: 15px;
+  margin: 10px 0;
+  text-align: center;
+  font-size: 1.75rem;
+  font-weight: bold;
+  opacity: 0.6;
+  transition: 2s;
+  cursor: pointer;
+}
diff --git a/index.html b/index.html
index bb8663b768..d64fb1bbf0 100644
--- a/index.html
+++ b/index.html
@@ -12,13 +12,33 @@
   <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
-
-  
      
   <div class="container home">
+
+    <nav>
+      <h1>Fun Bus</h1>
+      <a href="#home">Home</a>
+      <a href="#about">About Us</a>
+      <a href="#blog">Blog</a>
+      <a href="#contact">Contact</a>
+    </nav>
+
+    <hr class="header-border">
+    <img src="img/fun-bus.jpg" alt="Fun Bus" />
+
+    <main>
+      <br />
+      <h2>Welcome to Fun Bus!</h2>
+      <p>
+        Traveling expedition modern, clean web design blogger clean website theme website modern. Design pretty
+        design, travel blogger adventure WordPress wonderlust theme blogger website expedition theme travel
+        blogger. Adventure fun traveler pretty design website expedition.
+      </p>
+    </main>
    
     <section class="content-section">
       <div class="text-content">
@@ -48,21 +68,32 @@ <h2>Pick Your Destination</h2>
     </section>
     <section class="content-pick">
 
+      <!-- Created a simple form to use the existing sign up buttons. Of course, form won't work
+      without database access -->
+      <form method="POST" action="" name="choosePackage">
+
+        <input type="text" name="fullName" placeholder="Full Name" />
+        <input type="email" name="email" placeholder="Email" />
+        <input type="tel" name="phone" placeholder="Phone" />
+        <textarea name="instructions" placeholder="Do you have any Special Instructions?"></textarea>
+
       <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>
+        <input type="submit" class="btn" name="package1" value="Sign me up" />
       </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>
+        <input type="submit" class="btn" name="package2" value="Sign me up" />
       </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>
+        <input type="submit" class="btn" name="package3" value="Sign me up" />
       </div>
+
+      </form>
     </section>
   </div><!-- container -->
 
diff --git a/less/footer.less b/less/footer.less
index 71cff032e9..d2d612b9db 100644
--- a/less/footer.less
+++ b/less/footer.less
@@ -8,5 +8,9 @@
     color: @font-color;
     font-size: 1.6rem;
     padding: 20px;
+
+    @media@phone {
+      font-weight:bold;
+    }
   }
 }
\ No newline at end of file
diff --git a/less/global.less b/less/global.less
index abe21bf970..df32fcfe03 100644
--- a/less/global.less
+++ b/less/global.less
@@ -44,3 +44,11 @@ img {
   width: 100%;
   margin: 0 auto;
 }
+
+@media@phone {
+  .container {
+    max-width:500px;
+    width:90%;
+    margin:0 5%;
+  }
+}
\ No newline at end of file
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..b051d4cac3 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,12 +1,15 @@
 .home {
 
+  main {
+    margin:30px 0;
+    border-bottom:2px dashed @navigation-border;
+  }
+
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
-   
     
     .text-content {
       width: 48%;
@@ -21,6 +24,19 @@
         border-radius: 10px;
       }
     }
+
+    @media@phone {
+      flex-direction:column;
+
+    .text-content {
+      width:96%;
+      padding:12px 2%;
+    }
+
+    .img-content {
+      width:100%;
+    }
+  }
   }
 
   .inverse-content {
@@ -36,6 +52,12 @@
       padding-right: 1%;
       padding-left: 0;
     }
+
+    @media@phone {
+
+      flex-direction:column-reverse;
+
+    }
   }
 
   .content-destination {
@@ -45,17 +67,65 @@
     img {
       border-radius: 10px;
     }
+
+    @media@phone {
+      width:100%;
+    }
+  }
+
+  input { 
+    width:32%;
+    display:flex;
+    flex-direction:row;
+    padding:12px;
+    justify-content:space-evenly;
+    flex-wrap:wrap;
+
+    @media@phone {
+      width:100%;
+      flex-direction:column;
+      margin:6px 0;
+    }
   }
 
-  .content-pick {
+  textarea {
+    width:100%;
+    display:flex;
+    flex-direction:row;
+    padding:12px;
+    justify-content:center;
+    flex-wrap:wrap;
+    margin:18px 0;
+
+    @media@phone {
+      margin:6px 0;
+    }
+  }
+
+  form {
     padding-top: 30px;
     border-top: 2px dashed @navigation-border;
     display: flex;
     justify-content: space-between;
+    flex-wrap:wrap;
 
     .destination {
       width: 30%;
       margin-bottom: 30px;
     }
+
+    @media@phone {
+      flex-direction:column;
+      justify-content:center;
+      align-items:center;
+
+      .destination {
+        width:80%;
+      }
+    }
+  }
+
+  .btn {
+    .buttons(@button-bg,@font-color);
   }
 }// home
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c113ca2c46..19a7e9ccb0 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,14 @@
 // Follow the order in the readme
+@import 'variables';
+
+@import 'mixins';
+
+@import 'reset';
+
+@import 'global';
+
+@import 'navigation';
+
+@import 'footer';
+
+@import 'home-page';
diff --git a/less/mixins.less b/less/mixins.less
index 2d5c603558..d6e19da45f 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,19 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+.buttons(@button-bg,@font-color) {
+    background:@button-bg;
+    color:darken(@font-color,20%);
+    width:100%;
+    padding:12px;
+    border-radius:15px;
+    margin:10px 0;
+    text-align:center;
+    font-size:1.75rem;
+    font-weight:bold;
+    opacity:0.6;
+    transition:2s; // Stretch goal!
+    cursor:pointer;
+}
+
+.buttons:hover {
+    opacity:1;
+}
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..d0117bb277 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,47 @@
-// Navigation Styles here
\ No newline at end of file
+// Navigation Styles here
+
+
+nav {
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:space-evenly;
+    height:96px;
+}
+
+nav h1 {
+    width:60%;
+}
+
+nav a {
+    font-size:1.6rem;
+    text-decoration:none;
+    color:black;
+}
+
+hr.header-border {
+    border:1.2px dashed lightGray;
+    margin:0 -10vh;
+    width:120%;
+}
+
+@media @phone{
+    nav {
+        display:flex;
+        flex-direction:row;
+        flex-wrap:wrap;
+        align-items:center;
+        justify-content:space-evenly;
+    }
+
+    nav h1 {
+        width:100%;
+        text-align:center;
+    }
+
+    nav a {
+        font-size:1.6rem;
+        text-decoration:none;
+        color:black;
+    }
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..c56c6dfdaa 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -6,9 +6,13 @@
 @navigation-border: @silver;
 @footer-bg: @sandy-beach;
 
+
 // Colors
 @white: #FFFFFF;
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+// Responsiveness
+@phone: ~'(max-width:500px)';
\ No newline at end of file