diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 2c40253..05c085c 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,34 +1,29 @@
 
 <!--Main Navigation-->
-<header>
+
 
   <!--Navbar-->
-  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
+  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
     <logo>
       <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
     </logo>
     <links>
       <ul class="navbar-nav mr-auto">
-        <li class="nav-item active waves-light" mdbWavesEffect>
-          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        <li class="nav-item waves-light" mdbWavesEffect>
+          <a class="nav-link" mdbPageScroll href="#introSection" [pageScrollDuration]="600">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item waves-light" mdbWavesEffect>
-          <a class="nav-link" href="#">Link</a>
+          <a class="nav-link" mdbPageScroll href="#featuresSection" [pageScrollDuration]="600">Features</a>
         </li>
         <li class="nav-item waves-light" mdbWavesEffect>
-          <a class="nav-link" href="#">Profile</a>
+          <a class="nav-link" mdbPageScroll href="#teamSection" [pageScrollDuration]="600">Team</a>
         </li>
       </ul>
-      <form class="form-inline waves-light" mdbWavesEffect>
-        <div class="md-form mt-0">
-          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-        </div>
-      </form>
     </links>
   </mdb-navbar>
 
   <!--Intro Section-->
-  <section class="view intro-2">
+  <section class="view intro-2 mask rgba-gradient" id="introSection">
     <div class="full-bg-img mask rgba-gradient">
       <div class="container flex-center">
         <div class="d-flex align-items-center content-height w-100">
@@ -133,7 +128,224 @@
     </div>
   </section>
 
-</header>
+
 <!--Main Navigation-->
 
-<button (click)="facebook()" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></button>
\ No newline at end of file
+<!--Section: Features v.1-->
+<section class="features text-center" id="featuresSection">
+
+  <div class="container-fluid wow fadeInDown">
+    <!--Section heading-->
+    <h2 class="h1 py-5 font-weight-bold">Why is it so great?</h2>
+    <!--Section description-->
+    <p class="px-5 mb-5 pb-3 lead grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Ut enim ad minim veniam.</p>
+  </div>
+
+  <!--Grid row-->
+  <div class="row">
+
+    <!--Grid column-->
+    <div class="col-md-4 wow fadeInLeft">
+      <i class="fa fa-area-chart fa-3x red-text"></i>
+      <h5 class="font-weight-bold mt-3">Analytics</h5>
+      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
+        deleniti hic.
+      </p>
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-md-4 wow fadeInUp">
+      <i class="fa fa-book fa-3x cyan-text"></i>
+      <h5 class="font-weight-bold mt-3">Tutorials</h5>
+      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
+        deleniti hic.
+      </p>
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-md-4 wow fadeInRight">
+      <i class="fa fa-comments-o fa-3x orange-text"></i>
+      <h5 class="font-weight-bold mt-3">Support</h5>
+      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
+        deleniti hic.
+      </p>
+    </div>
+    <!--Grid column-->
+
+  </div>
+  <!--Grid row-->
+
+</section>
+<!--Section: Features v.1-->
+
+<hr id="teamSection">
+
+<!-- Section: Team v.3 -->
+<section class="team-section my-5">
+
+  <div class="container-fluid wow fadeInDown">
+    <!-- Section heading -->
+    <h2 class="h1-responsive font-weight-bold text-center my-5">Our amazing team</h2>
+    <!-- Section description -->
+    <p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
+      veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>
+  </div>
+  <!-- Grid row-->
+  <div class="row text-center text-md-left wow fadeInLeft">
+
+    <!-- Grid column -->
+    <div class="col-lg-6 col-md-12 mb-5">
+      <div class="col-md-4 col-lg-6 float-left">
+        <div class="avatar mx-auto mb-md-0 mb-4">
+          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
+        </div>
+      </div>
+      <div class="col-md-8 col-lg-6 float-right">
+        <h4 class="font-weight-bold mb-3">John Doe</h4>
+        <h6 class="font-weight-bold grey-text mb-3">Web Designer</h6>
+        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
+        <!-- Facebook-->
+        <a class="p-2 fa-lg fb-ic">
+          <i class="fa fa-facebook"> </i>
+        </a>
+        <!-- Twitter -->
+        <a class="p-2 fa-lg tw-ic">
+          <i class="fa fa-twitter"> </i>
+        </a>
+        <!-- GitHub-->
+        <a class="p-2 fa-lg git-ic">
+          <i class="fa fa-github"> </i>
+        </a>
+      </div>
+    </div>
+    <!-- Grid column -->
+
+    <!-- Grid column -->
+    <div class="col-lg-6 col-md-12 mb-5">
+      <div class="col-md-4 col-lg-6 float-left">
+        <div class="avatar mx-auto mb-md-0 mb-4">
+          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded z-depth-1" alt="Sample avatar">
+        </div>
+      </div>
+      <div class="col-md-8 col-lg-6 float-right">
+        <h4 class="font-weight-bold mb-3">Maria Kate</h4>
+        <h6 class="font-weight-bold grey-text mb-3">Photographer</h6>
+        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
+        <!-- Facebook-->
+        <a class="p-2 fa-lg fb-ic">
+          <i class="fa fa-facebook"> </i>
+        </a>
+        <!-- Twitter -->
+        <a class="p-2 fa-lg tw-ic">
+          <i class="fa fa-twitter"> </i>
+        </a>
+        <!-- GitHub-->
+        <a class="p-2 fa-lg git-ic">
+          <i class="fa fa-github"> </i>
+        </a>
+      </div>
+    </div>
+    <!-- Grid column -->
+
+  </div>
+  <!-- Grid row-->
+
+  <!-- Grid row-->
+  <div class="row text-center text-md-left wow fadeInRight">
+
+    <!-- Grid column -->
+    <div class="col-lg-6 col-md-12 mb-lg-0 mb-5">
+      <div class="col-md-4 col-lg-6 float-left">
+        <div class="avatar mx-auto mb-md-0 mb-4">
+          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
+        </div>
+      </div>
+      <div class="col-md-8 col-lg-6 float-right">
+        <h4 class="font-weight-bold mb-3">Anna Deynah</h4>
+        <h6 class="font-weight-bold grey-text mb-3">Web Developer</h6>
+        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
+        <!-- Facebook-->
+        <a class="p-2 fa-lg fb-ic">
+          <i class="fa fa-facebook"> </i>
+        </a>
+        <!-- Twitter -->
+        <a class="p-2 fa-lg tw-ic">
+          <i class="fa fa-twitter"> </i>
+        </a>
+        <!-- GitHub-->
+        <a class="p-2 fa-lg git-ic">
+          <i class="fa fa-github"> </i>
+        </a>
+      </div>
+    </div>
+    <!-- Grid column -->
+
+    <!-- Grid column -->
+    <div class="col-lg-6 col-md-12">
+      <div class="col-md-4 col-lg-6 float-left">
+        <div class="avatar mx-auto mb-md-0 mb-4">
+          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
+        </div>
+      </div>
+      <div class="col-md-8 col-lg-6 float-right">
+        <h4 class="font-weight-bold mb-3">Sarah Melyah</h4>
+        <h6 class="font-weight-bold grey-text mb-3">Front-end Developer</h6>
+        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
+        <!-- Facebook-->
+        <a class="p-2 fa-lg fb-ic">
+          <i class="fa fa-facebook"> </i>
+        </a>
+        <!-- Twitter -->
+        <a class="p-2 fa-lg tw-ic">
+          <i class="fa fa-twitter"> </i>
+        </a>
+        <!-- GitHub-->
+        <a class="p-2 fa-lg git-ic">
+          <i class="fa fa-github"> </i>
+        </a>
+      </div>
+    </div>
+    <!-- Grid column -->
+
+  </div>
+  <!-- Grid row-->
+
+</section>
+<!-- Section: Team v.3 -->
+
+<!--Footer-->
+<footer class="page-footer mdb-color text-center text-md-left pt-4 mt-4">
+
+  <!--Social buttons-->
+  <div class="text-center mb-3">
+
+    <a class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
+      <i class="fa fa-facebook"> </i>
+    </a>
+    <a class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
+      <i class="fa fa-twitter"> </i>
+    </a>
+    <a class="btn-floating btn-small btn-gplus waves-light" mdbWavesEffect>
+      <i class="fa fa-google-plus"> </i>
+    </a>
+
+  </div>
+  <!--/.Social buttons-->
+
+  <!--Copyright-->
+  <div class="footer-copyright text-center py-3">
+    <div class="container-fluid">
+      © 2018 Copyright:
+      <a href="https://www.MDBootstrap.com"> Nom </a>
+
+    </div>
+  </div>
+  <!--/.Copyright-->
+
+</footer>
+<!--/.Footer-->
+
+<!--<button (click)="facebook()" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></button>-->
\ No newline at end of file
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index c7d52b5..b86b900 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -1,21 +1,21 @@
+.header {
+  height: 100%;
+}
+
+.features {
+  padding: 5%;
+}
 
 .intro-2 {
   background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
   background-size: cover;
+  background-attachment: fixed
 }
 .view {
   height: 100vh !important;
 }
-.top-nav-collapse {
-  background-color: #3f51b5 !important;
-}
-.navbar:not(.top-nav-collapse) {
-  background: transparent !important;
-}
-@media (max-width: 768px) {
-  .navbar:not(.top-nav-collapse) {
-    background: #3f51b5 !important;
-  }
+.navbar.scrolling-navbar.top-nav-collapse {
+  background: indigo;
 }
 .rgba-gradient .full-bg-img {
   background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
@@ -42,3 +42,8 @@ h6 {
     height: 1040px;
   }
 }
+
+.team-section {
+  padding : 5%;
+  padding-top: 0%;
+}