diff --git a/index.html b/index.html
index 5ea7a6b..b2ec71f 100644
--- a/index.html
+++ b/index.html
@@ -23,31 +23,42 @@
     <nav class="bg-black fixed-top">
         <div class="container navbar-nav navbar-light navbar-expand-lg py-2 nav-flex">
             <a href="#" class="navbar-brand"><img src="img/platypus-logo.png" alt="Startup-logo" height="45px"></a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav">
                     <li class="nav-item active">
                         <a class="nav-link nav-linkto " href="#">Home <span class="sr-only">(current)</span></a>
-                    </li>
+                    </li>   
                     <li class="nav-item">
                         <a class="nav-link nav-linkto" href="#">About Us</a>
                     </li>
+                    <li class="nav-item">
+                        <a class="nav-link nav-linkto" href="#">Rescued Platypus</a>
+                    </li>
+                    <li class="nav-item res-invisible-1">
+                        <a class="nav-link nav-linkto" href="#">Help A Platypus</a>
+                    </li>
+                    <li class="nav-item res-invisible-1">
+                        <a class="nav-link nav-linkto" href="#">Search</a>
+                    </li>
                 </ul>
             </div>
-            <form class="form-inline">
-                <button class="mx-2 btn btn-nav my-2 my-sm-0" type="submit">HELP A PLATYPUS</button>
-                <button class="mx-2 btn btn-nav my-2 my-sm-0 search-icon" type="submit"><i
-                        class="fas fa-search"></i></button>
-            </form>
+                <form class="form-inline res-invisible-2">
+                    <button class="mx-2 btn btn-nav my-2 my-sm-0" type="submit">HELP A PLATYPUS</button>
+                    <button class="mx-2 btn btn-nav my-2 my-sm-0 search-icon" type="submit"><i
+                            class="fas fa-search"></i></button>
+                </form>
         </div>
     </nav>
     <header class="">
         <div class="container">
             <div class="header-style">
                 <h1 class="header-title">Be a Hero! Rescue a Platypus.</h1>
-                <h4 class="header-subtitle">"Because the platypus both lays eggs and produces milk, <br /> it's one of the few animals that can make it's own custard."</h4>
+                <h4 class="header-subtitle">"Because the platypus both lays eggs and produces milk, <br /> it's one of
+                    the few animals that can make it's own custard."</h4>
                 <button class="mx-2 btn btn-nav my-2 my-sm-0" id="header-button" type="submit">MORE INFO</button>
             </div>
         </div>
@@ -90,6 +101,7 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
                     </div>
                 </div>
             </div>
+
             <div class="card environment-card " style="width: 18rem ">
                 <img src="img/platypus-tips.jpg " class="card-img-top " alt="Some Tips ">
                 <div class="card-body card-body-flex ">
@@ -144,8 +156,9 @@ <h5 class="card-title employee-name text-danger px-4">ANH</h5>
     </section>
     <footer class="">
         <div class="container row">
-            <a href="#" class="navbar-brand" style="margin-top: 50px;"><img src="img/platypus-logo.png" alt="Startup-logo" height="85px"></a>
-            <div class="footer-links d-flex col-6">
+            <a href="#" class="navbar-brand" style="margin-top: 50px;"><img src="img/platypus-logo.png" alt="Startup-logo"
+                    height="85px"></a>
+            <div class="footer-links d-flex col-7">
                 <div class="list-header"><a class="font-weight-bold">Company</a>
                     <ul class="footer-list text-muted">
                         <li><a>About</a></li>
@@ -169,23 +182,15 @@ <h5 class="card-title employee-name text-danger px-4">ANH</h5>
                     </ul>
                 </div>
             </div>
-            <div class="social-media-btn col-4">
-                <ul class="row">
-                    <li>
-                        <a href="#" class="fa fa-instagram"></a>
-                    </li>
-                    <li>
-                        <a href="#" class="fa fa-twitter"></a>
-                    </li>
-                    <li>
-                        <a href="#" class="fa fa-facebook"></a>
-                    </li>
-                </ul>
-            </div>
-
+                <div class="social-media-btn col-3">
+                    <ul class="row">
+                        <li><a href="#" class="fa fa-instagram"></a></li>
+                        <li><a href="#" class="fa fa-twitter"></a></li>
+                        <li><a href="#" class="fa fa-facebook"></a></li>
+                    </ul>
+                </div>
         </div>
     </footer>
-
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
diff --git a/readme.md b/readme.md
index 452a115..ca231cc 100644
--- a/readme.md
+++ b/readme.md
@@ -1,17 +1,19 @@
 ## Adopt Platypus ##
 
-Create landing page and about us page
-Landing page: A website that will help people to adopt a platypus. It has info on how to care for platypus. It also has about us section. 
+
+A website that will help people to adopt a platypus. It has info on how to care for platypus. It also has about us section. 
 
 
 ## Team Members ##
 
-Phil (Product Owner)
-Anh (Scrum Master)
-Austin (DEV)
+* Phil (*Product Owner*)
+* Anh (*Scrum Master*)
+* Austin (*DEV*)
+* Vy (*DEV*)
 
 ## View At ##
 
+
 https://github.com/vietanhdtd/adopt-platypus
 
 
diff --git a/style.css b/style.css
index 38f71df..97b4968 100644
--- a/style.css
+++ b/style.css
@@ -1,269 +1,389 @@
-    /*page-structure*/
-    
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-    
-    body {
-        font-family: 'Sanomat Grab Web Regular', sans-serif;
-        font-size: 1.146em;
-        font-weight: 400;
-    }
-    
-    nav {
-        color: white;
-    }
-    
-    header {
-        background-color: white;
-        min-height: 400px;
-        background-image: url("img/platypus-hero2.jpg");
-        background-attachment: fixed;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        height: 650px;
-    }
-    
-    .environment-section {
-        background-image: url("img/environment-background.jpg");
-        background-attachment: fixed;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-    }
-    
-    .environment {
-        min-height: 300px;
-        display: flex;
-        justify-content: space-around;
-        text-align: center;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .employees {
-        min-height: 300px;
-        display: flex;
-        justify-content: space-around;
-        text-align: center;
-    }
-    
-    footer {
-        background-color: black;
-        min-height: 100px;
-        color: white;
-    }
-    /*nav-style*/
-    
-    .bg-black {
-        background-color: rgba(48, 24, 24, .8);
-    }
-    
-    .nav-linkto {
-        color: #F09048 !important;
-        font-weight: 400;
-        transition: all 0.3s;
-    }
-    
-    .nav-linkto:hover {
-        color: #189090!important;
-    }
-    
-    .btn-nav {
-        color: #F09048;
-        border: 2px solid #F09048;
-        transition: all 0.3s;
-        font-weight: 400;
-    }
-    
-    .btn-nav:hover {
-        color: white;
-        border-color: #189090;
-        background-color: #189090;
-    }
-    
-    .search-icon {
-        border: none;
-    }
-    
-    .nav-flex {
-        display: flex;
-        justify-content: space-around;
-        flex-wrap: wrap;
-    }
-    /* header style */
-    
-    .header-style {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-        position: relative;
-        top: 200px;
-        color: #F09048;
-        border: 2px solid rgba(48, 24, 24, .9);
-        background-color: rgba(48, 24, 24, .9);
-        padding: 20px 0px;
-        margin: 0px auto;
-        width: 60rem;
-    }
-    
-    .header-title {
-        font-size: 60px;
-        font-family: 'Sanomat Grab Web Regular', sans-serif;
-        padding-bottom: 15px;
-        color: #D86000;
-    }
-    
-    .header-subtitle {
-        font-size: 18px;
-        font-weight: 300;
-        font-family: 'Sanomat Grab Web Regular', sans-serif;
-        letter-spacing: 1px;
-        padding-bottom: 20px;
-    }
-    /* footer style */
-    
-    .container {
-        display: flex;
-        justify-content: space-between;
-        margin: auto;
-    }
-    
-    li {
-        list-style: none;
-        color: #F09048;
-    }
-    
-    li:hover {
-        color: #D86000;
-        cursor: pointer;
-    }
-    
-    .footer-links {}
-    
-    .list-header {
-        width: 100%;
-        color: #D86000;
-        line-height: 50px;
-        margin-top: 50px;
-    }
-    
-    .social-media-btn {
-        justify-content: center;
-        display: flex;
-        margin-top: 50px;
-    }
-    
-    .fa {
-        margin: 0px 20px 0 0;
-        padding: 15px;
-        width: 60px;
-        height: 60px;
-        font-size: 30px;
-        text-align: center;
-        border-radius: 50%;
-        color: #D86000;
-        background-color: #222326;
-        text-decoration: none;
-        transition: all .3;
-    }
-    
-    .fa:hover {
-        color: #F09048;
-        cursor: pointer;
-        background-color: #424242;
-    }
-    
-    a:hover {
-        text-decoration: none;
-    }
-    /* environment-style */
-    
-    .card-body-flex {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-    }
-    
-    .environment-text {
-        font-size: 1.1rem;
-        color: white;
-    }
-    
-    .environment-card {
-        background-color: rgba(0, 0, 0, .5);
-        border: none;
-        z-index: 2;
-    }
-    
-    .environment-Info {
-        padding: .5rem 2rem;
-        font-weight: bold;
-        color: #F09048;
-        font-size: 1.2rem;
-        text-decoration: underline;
-    }
-    
-    .environment-Info:hover {
-        color: #189090;
-    }
-    
-    .environment-moreInfo {
-        color: #F09048;
-        border: 2px solid #F09048;
-        transition: all 0.3s;
-        font-weight: 400;
-    }
-    
-    .environment-moreInfo:hover {
-        color: white;
-        border-color: #189090;
-        background-color: #189090;
-    }
-    
-    .no-stretch {
-        align-items: flex-start;
-    }
-    
-    .environment-bg {
-        width: 150%;
-        z-index: 0;
-        position: absolute;
-        top: -150px;
-        left: -100px;
-    }
-    /* employees-style */
-    
-    .employee-name {
-        font-size: 2em;
-        font-weight: 600;
-        background-color: aquamarine;
-    }
-    
-    .no-border {
-        border: none;
-    }
-    
-    .avatar {
-        border-radius: 50%;
-        width: 200px;
-        height: 200px;
-        border: 8px solid #D86000;
-    }
-    
-    #header-button {
-        font-family: 'Sanomat Grab Web Regular', sans-serif;
-        font-size: 1.146em;
-        font-weight: 400;
-        color: #D86000;
-        border-color: #D86000;
-    }
-    
-    #header-button:hover {
-        background-color: black
-    }
\ No newline at end of file
+/*page-structure*/
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    font-size: 1.146em;
+    font-weight: 400;
+}
+
+nav {
+    color: white;
+}
+
+header {
+    background-color: white;
+    min-height: 400px;
+    background-image: url("img/platypus-hero2.jpg");
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    height: 650px;
+}
+
+.environment-section {
+    background-image: url("img/environment-background.jpg");
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+.environment {
+    min-height: 300px;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.employees {
+    min-height: 300px;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+}
+
+footer {
+    background-color: #301818;
+    min-height: 100px;
+    color: white;
+}
+
+
+/*nav-style*/
+
+.bg-black {
+    background-color: rgba(48, 24, 24, .8);
+}
+
+.nav-linkto {
+    color: #F09048 !important;
+    font-weight: 400;
+    transition: all 0.3s;
+}
+
+.nav-linkto:hover {
+    color: #189090!important;
+}
+
+.btn-nav {
+    color: #F09048;
+    border: 2px solid #F09048;
+    transition: all 0.3s;
+    font-weight: 400;
+}
+
+.btn-nav:hover {
+    color: white;
+    border-color: #189090;
+    background-color: #189090;
+}
+
+.search-icon {
+    border: none;
+}
+
+.res-invisible-1 {
+    display: none;
+}
+
+@media screen and (max-width: 989px) {
+    .res-invisible-2 {
+        display: none;
+    }
+    .res-invisible-1 {
+        display: block;
+    }
+}
+
+.nav-flex {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+nav ul {
+    display: flex;
+    align-items: center;
+}
+
+
+/* header style */
+
+.header-style {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    top: 200px;
+    color: #F09048;
+    border: 2px solid rgba(48, 24, 24, .9);
+    background-color: rgba(48, 24, 24, .9);
+    padding: 20px 0px;
+    margin: 0px auto;
+    width: 60rem;
+    height: 18rem;
+}
+
+.header-title {
+    font-size: 60px;
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    padding-bottom: 10px;
+    color: #F09048;
+    text-align: center;
+}
+
+.header-subtitle {
+    font-size: 18px;
+    font-weight: 300;
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    letter-spacing: 1px;
+    padding-bottom: 25px;
+    color: #F09048;
+    text-align: center;
+}
+
+
+/* footer style */
+
+.container {
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+}
+
+li {
+    list-style: none;
+    color: #F09048;
+}
+
+li:hover {
+    color: #D86000;
+    cursor: pointer;
+}
+
+.footer-links {}
+
+.list-header {
+    width: 100%;
+    color: #D86000;
+    line-height: 50px;
+    margin-top: 50px;
+}
+
+.social-media-btn {
+    justify-content: center;
+    display: flex;
+    margin-top: 50px;
+}
+
+.fa {
+    margin: 0px 20px 0 0;
+    padding: 15px;
+    width: 60px;
+    height: 60px;
+    font-size: 30px;
+    text-align: center;
+    border-radius: 50%;
+    color: #D86000;
+    text-decoration: none;
+    transition: all .3;
+}
+
+.fa:hover {
+    color: #F09048;
+    cursor: pointer;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+
+/* environment-style */
+
+.card-body-flex {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.environment-text {
+    font-size: 1.1rem;
+    color: white;
+}
+
+.environment-card {
+    background-color: rgba(0, 0, 0, .5);
+    border: none;
+    z-index: 2;
+}
+
+.environment-Info {
+    padding: .5rem 2rem;
+    font-weight: bold;
+    color: #F09048;
+    font-size: 1.2rem;
+    text-decoration: underline;
+}
+
+.environment-Info:hover {
+    color: #189090;
+}
+
+.environment-moreInfo {
+    color: #F09048;
+    border: 2px solid #F09048;
+    transition: all 0.3s;
+    font-weight: 400;
+}
+
+.environment-moreInfo:hover {
+    color: white;
+    border-color: #189090;
+    background-color: #189090;
+}
+
+.no-stretch {
+    align-items: flex-start;
+}
+
+.environment-bg {
+    width: 150%;
+    z-index: 0;
+    position: absolute;
+    top: -150px;
+    left: -100px;
+}
+
+
+/* employees-style */
+
+.employee-name {
+    font-size: 2em;
+    font-weight: 600;
+    background-color: aquamarine;
+}
+
+.no-border {
+    border: none;
+}
+
+.avatar {
+    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+    border: 8px solid #D86000;
+}
+
+#header-button {
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    font-size: 1.146em;
+    font-weight: 400;
+    color: #F09048;
+    border-color: #F09048;
+}
+
+#header-button:hover {
+    color: white;
+    border-color: #189090;
+    background-color: #189090;
+}
+
+
+/* footer style */
+
+footer .container {
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+    padding-top: 30px;
+}
+
+footer li {
+    list-style: none;
+    color: #F09048;
+}
+
+footer li:hover {
+    color: #189090;
+    cursor: pointer;
+}
+
+.list-header {
+    width: 150px;
+    color: #D86000;
+    line-height: 50px;
+    margin-top: 50px;
+    padding-bottom: 70px;
+}
+
+.social-media-btn {
+    justify-content: center;
+    display: flex;
+    margin-top: 50px;
+}
+
+.fa {
+    margin: 0px 20px 0 0;
+    padding: 15px;
+    font-size: 50px;
+    text-align: center;
+    border-radius: 50%;
+    color: #D86000;
+    text-decoration: none;
+}
+
+.fa:hover {
+    color: #189090;
+    cursor: pointer;
+}
+
+footer a:hover {
+    text-decoration: none;
+}
+
+
+/* environment-style */
+
+.card-body-flex {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+/* employees-style */
+
+.employee-name {
+    font-size: 2em;
+    font-weight: 600;
+}
+
+.no-border {
+    border: none;
+}
+
+.avatar {
+    border-radius: 50%;
+    width: 200px;
+}
+
+#header-button {
+    font-family: 'Sanomat Grab Web Regular', sans-serif;
+    font-size: 1.146em;
+    font-weight: 400;
+    color: #D86000;
+    border-color: #D86000;
+}
\ No newline at end of file