diff --git a/css/index.css b/css/index.css
index e764f2b01f..b684497a3c 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1 +1,266 @@
-/* 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;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+.nav-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1%;
+  padding-left: 20%;
+  padding-right: 12%;
+}
+.nav-bar a {
+  display: inline-block;
+  text-decoration: none;
+  color: #212529;
+  font-size: 1.9rem;
+}
+.footer {
+  width: 100%;
+  border-top: 2px dashed silver;
+  background: #FFEBCD;
+}
+.footer p {
+  text-align: center;
+  color: #212529;
+  font-size: 1.6rem;
+  padding: 20px;
+}
+header {
+  height: 200%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1%;
+  padding-left: 20%;
+  padding-right: 12%;
+  border-bottom: 2px dashed #C0C0C0;
+}
+.main-content {
+  width: 60%;
+  margin-left: 20%;
+  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;
+}
+.home .content-pick .btn {
+  background-color: #17A2B8;
+  font-size: 1.6rem;
+  color: #FFFFFF;
+  text-align: center;
+  border-radius: 35%;
+  width: 75%;
+  height: 15%;
+  padding: 3.5%;
+}
diff --git a/index.html b/index.html
index bb8663b768..6f5f515e0c 100644
--- a/index.html
+++ b/index.html
@@ -15,10 +15,24 @@
 </head>
 
 <body>
+  <header>
+    <h1>Fun Bus</h1>
+      <div class="nav-bar">
+        <nav>
+          <a href="home">Home</a>
+          <a href="about">About Us</a>
+          <a href="blog">Blog</a>
+          <a href="contact">Contact</a>
 
-  
-     
-  <div class="container home">
+        </nav>
+      </div>
+  </header>
+  <section class="main-content">
+    <img src="https://i.postimg.cc/TYZGSPV1/fun-bus.jpg">
+    <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>
+    <div class="container home">
    
     <section class="content-section">
       <div class="text-content">
diff --git a/less/home-page.less b/less/home-page.less
index 5528d8a7a5..66dc24bc93 100644
--- a/less/home-page.less
+++ b/less/home-page.less
@@ -1,11 +1,27 @@
-.home {
+header {
+  height: 200%;
+  .flex-container();
+  .border-bottom();
+  
+}
+.main-content {
+  width: 60%;
+  margin-left: 20%;
+  .border-bottom();
+}
+
+
+
+
 
+
+.home {
+ 
   .content-section {
     margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
    
     
     .text-content {
@@ -57,5 +73,8 @@
       width: 30%;
       margin-bottom: 30px;
     }
+    .btn {
+      .button-container();
+    }
   }
-}// home
\ No newline at end of file
+}// home
diff --git a/less/index.less b/less/index.less
index c113ca2c46..7d92cb4587 100644
--- a/less/index.less
+++ b/less/index.less
@@ -1 +1,11 @@
 // 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..0b8f2190a2 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -1 +1,37 @@
-// Mixins in here
\ No newline at end of file
+// Mixins in here
+.flex-container() {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 1%;
+    padding-left: 20%;
+    padding-right: 12%;
+}
+
+.border-bottom() {
+    border-bottom: 2px dashed @silver;
+}
+
+.button-container(){
+    background-color: @eastern-blue;
+    font-size: 1.6rem;
+    color:@white;
+    text-align: center;
+    border-radius: 35%;
+    width: 75%;
+    height:15%;
+    padding:3.5%
+   
+}
+
+@media @mobile {
+    
+}
+
+
+
+
+
+
+
+
diff --git a/less/navigation.less b/less/navigation.less
index f89120a0f1..ab6d101ac2 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -1 +1,10 @@
-// Navigation Styles here
\ No newline at end of file
+.nav-bar {
+    .flex-container();
+    
+    a{
+        display: inline-block;
+        text-decoration: none;
+        color: @shark;
+        font-size: 1.9rem;
+    }
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 916eb0b7e0..233e8b9023 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -11,4 +11,7 @@
 @silver: #C0C0C0;
 @shark: #212529;
 @eastern-blue: #17A2B8;
-@sandy-beach: #FFEBCD;
\ No newline at end of file
+@sandy-beach: #FFEBCD;
+
+@mobile: ~"(min-width: 500px)";
+@desktop: ~"(min-width: 800px)";
\ No newline at end of file
