diff --git a/about-us.html b/about-us.html
index 6442391..23cbdb7 100644
--- a/about-us.html
+++ b/about-us.html
@@ -49,12 +49,12 @@
             </form>
         </div>
     </nav>
-    <header class="">
+    <header class="header-aboutus">
         <div class="container">
             <div class="aboutus-header-style">
                 <h1 class="header-title">WHO ARE WE ?</h1>
                 <div class="container employees p-5 row">
-                    <div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem; ">
+                    <div class="card bg-transparent no-border card-body-flex aboutus-page-card" style="width: 18rem; ">
                         <img src="img/Phil.png " class="avatar-aboutus" alt="Phil 's Avatar">
                         <div class="card-body">
                             <h5 class="card-title employee-name-aboutus text-danger px-4">PHIL</h5>
@@ -63,7 +63,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">PHIL</h5>
                             <p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
                         </div>
                     </div>
-                    <div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem; ">
+                    <div class="card bg-transparent no-border card-body-flex aboutus-page-card" style="width: 18rem; ">
                         <img src="img/Anh.png " class="avatar-aboutus" alt="Anh ' Avatar">
                         <div class="card-body">
                             <h5 class="card-title employee-name-aboutus text-danger px-4">ANH</h5>
@@ -74,7 +74,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">ANH</h5>
                     </div>
                 </div>
                 <div class="container employees p-5 row">
-                    <div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
+                    <div class="card bg-transparent no-border card-body-flex aboutus-page-card" style="width: 18rem;">
                         <img src="img/Loc.png" class="avatar-aboutus" alt="Loc's Avatar ">
                         <div class="card-body ">
                             <h5 class="card-title employee-name-aboutus text-danger px-4">LOC</h5>
@@ -83,7 +83,7 @@ <h5 class="card-title employee-name-aboutus text-danger px-4">LOC</h5>
                             <p class="card-text text-warning">Or do you guys think we should make-up our info about what we did in this "save the platypus campaign"</p>
                         </div>
                     </div>
-                    <div class="card bg-transparent no-border card-body-flex aboutus-card" style="width: 18rem;">
+                    <div class="card bg-transparent no-border card-body-flex aboutus-page-card" style="width: 18rem;">
                         <img src="img/Vy.png" class="avatar-aboutus" alt="Vy's Avatar ">
                         <div class="card-body ">
                             <h5 class="card-title employee-name-aboutus text-danger px-4">Vy</h5>
diff --git a/img/about-us-bg.png b/img/about-us-bg.png
new file mode 100644
index 0000000..64ca7b8
Binary files /dev/null and b/img/about-us-bg.png differ
diff --git a/index.html b/index.html
index 7e775dd..b78fc91 100644
--- a/index.html
+++ b/index.html
@@ -121,8 +121,8 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
     </section>
     <section class="environment-section">
         <div class="environment container no-stretch py-3">
-            <<!--img src="img/medium-bg.png" alt="environment-picture" class="environment-bg" />-->
-            <div class="card environment-card " style="width: 18rem ">
+            <!--img src="img/medium-bg.png" alt="environment-picture" class="environment-bg" />-->
+            <div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
                 <img src="img/platypus-food.webp " class="card-img-top " alt="Platypus and Food ">
                 <div class="card-body card-body-flex ">
                     <p>
@@ -140,7 +140,7 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
                     </div>
                 </div>
             </div>
-            <div class="card environment-card " style="width: 18rem ">
+            <div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
                 <img src="img/platypus-environment.jpg " class="card-img-top " alt="Platypus Environment ">
                 <div class="card-body card-body-flex ">
                     <p>
@@ -158,7 +158,7 @@ <h1 style="color: #1d9df3; font-family: Arial; text-decoration: none;">WHAT IS A
                 </div>
             </div>
 
-            <div class="card environment-card " style="width: 18rem ">
+            <div class="card environment-card col-12 col-lg-4 p-3" style="width: 18rem ">
                 <img src="img/platypus-tips.jpg " class="card-img-top " alt="Some Tips ">
                 <div class="card-body card-body-flex ">
                     <p>
@@ -210,28 +210,28 @@ <h1 style="color:#F09048; font-family: Arial; text-decoration: underline;">RESCU
     </section>
     <section class=" " style="background-color: #189090 ">
         <div class="container employees p-5 ">
-            <div class="card bg-transparent no-border card-body-flex " style="width: 18rem; ">
+            <div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem; ">
                 <img src="img/Phil.png " class="avatar " alt="Phil 's Avatar">
                 <div class="card-body">
                     <h5 class="card-title employee-name text-danger px-4">PHIL</h5>
                     <p class="card-text text-warning">Product Owner</p>
                 </div>
             </div>
-            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+            <div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem;">
                 <img src="img/Loc.png" class="avatar" alt="Loc's Avatar ">
                 <div class="card-body ">
                     <h5 class="card-title employee-name text-danger px-4">LOC</h5>
                     <p class="card-text text-warning ">Developer</p>
                 </div>
             </div>
-            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+            <div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem;">
                 <img src="img/Vy.png" class="avatar" alt="Vy's Avatar ">
                 <div class="card-body ">
                     <h5 class="card-title employee-name text-danger px-4">Vy</h5>
                     <p class="card-text text-warning ">Developer</p>
                 </div>
             </div>
-            <div class="card bg-transparent no-border card-body-flex " style="width: 18rem; ">
+            <div class="card bg-transparent no-border card-body-flex aboutus-card col-sm-12 col-md-6 col-lg-3" style="width: 18rem; ">
                 <img src="img/Anh.png " class="avatar " alt="Anh ' Avatar">
                 <div class="card-body">
                     <h5 class="card-title employee-name text-danger px-4">ANH</h5>
diff --git a/style.css b/style.css
index 01913f1..50cc0a4 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,7 @@ nav {
 
 header {
     background-color: white;
-    min-height: 400px;
+    min-height: 600px;
     background-image: url("img/platypus-hero2.jpg");
     background-attachment: fixed;
     background-repeat: no-repeat;
@@ -26,6 +26,14 @@ header {
     background-size: cover;
 }
 
+.header-aboutus {
+    background-image: url("img/about-us-bg.png");
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
 .environment-section {
     background-image: url("img/environment-background.jpg");
     background-attachment: fixed;
@@ -38,6 +46,7 @@ header {
     min-height: 300px;
     display: flex;
     justify-content: space-around;
+    flex-wrap: wrap;
     text-align: center;
     position: relative;
     overflow: hidden;
@@ -48,6 +57,7 @@ header {
     display: flex;
     justify-content: space-around;
     text-align: center;
+    flex-wrap: wrap;
 }
 
 footer {
@@ -146,8 +156,8 @@ nav ul {
     align-items: center;
     position: relative;
     color: #F09048;
-    border: 2px solid rgba(48, 24, 24, .9);
-    background-color: rgba(48, 24, 24, .9);
+    border: 2px solid rgba(48, 24, 24, .8);
+    background-color: rgba(48, 24, 24, .8);
     padding: 20px 0px;
     margin: 100px auto 30px auto;
     width: 60rem;
@@ -247,6 +257,7 @@ a:hover {
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
+    background-color: rgba(0, 0, 0, .7);
 }
 
 .environment-text {
@@ -255,7 +266,7 @@ a:hover {
 }
 
 .environment-card {
-    background-color: rgba(0, 0, 0, .7);
+    background-color: rgba(0, 0, 0, 0);
     border: none;
     z-index: 2;
 }
@@ -320,8 +331,8 @@ a:hover {
 
 .avatar {
     border-radius: 50%;
-    width: 200px;
-    height: 200px;
+    width: 75%;
+    height: auto;
     border: 8px solid #D86000;
 }
 
@@ -501,6 +512,10 @@ s
 }
 
 .aboutus-card {
+    min-width: 25%;
+}
+
+.aboutus-page-card {
     min-width: 50%;
 }