diff --git a/img/20190509_155243.jpg b/img/20190509_155243.jpg
deleted file mode 100644
index 1d88fab..0000000
Binary files a/img/20190509_155243.jpg and /dev/null differ
diff --git a/img/20190509_155259.jpg b/img/20190509_155259.jpg
deleted file mode 100644
index cdbcd6f..0000000
Binary files a/img/20190509_155259.jpg and /dev/null differ
diff --git a/img/20190509_155312.jpg b/img/20190509_155312.jpg
deleted file mode 100644
index c229947..0000000
Binary files a/img/20190509_155312.jpg and /dev/null differ
diff --git a/img/Anh.png b/img/Anh.png
new file mode 100644
index 0000000..364de9d
Binary files /dev/null and b/img/Anh.png differ
diff --git a/img/Loc.png b/img/Loc.png
new file mode 100644
index 0000000..9547074
Binary files /dev/null and b/img/Loc.png differ
diff --git a/img/Phil.png b/img/Phil.png
new file mode 100644
index 0000000..5671456
Binary files /dev/null and b/img/Phil.png differ
diff --git a/img/platypus-environment.jpg b/img/platypus-environment.jpg
new file mode 100644
index 0000000..00a1939
Binary files /dev/null and b/img/platypus-environment.jpg differ
diff --git a/img/platypus-food.webp b/img/platypus-food.webp
new file mode 100644
index 0000000..63290d1
Binary files /dev/null and b/img/platypus-food.webp differ
diff --git a/img/platypus-tips.jpg b/img/platypus-tips.jpg
new file mode 100644
index 0000000..b2945bb
Binary files /dev/null and b/img/platypus-tips.jpg differ
diff --git a/index.html b/index.html
index a44f5f3..507e4d1 100644
--- a/index.html
+++ b/index.html
@@ -51,55 +51,55 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
         </div>
     </header>
     <section class="" style="background-color: #D86000">
-        <div class="environment container py-3">
+        <div class="environment container py-5">
             <div class="card" style="width: 18rem">
-                <img src="..." class="card-img-top" alt="...">
-                <div class="card-body">
-                    <h5 class="card-title">Special title treatment</h5>
-                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                <img src="img/platypus-food.webp" class="card-img-top" alt="Platypus and Food">
+                <div class="card-body card-body-flex">
+                    <h5 class="card-title">FOOD</h5>
+                    <p class="card-text">- platypus are carnivores<br/> - they feed on annelid worms, insect larvae, freshwater shrimp, and freshwater yabby (crayfish)<br/> - platypus eats 20% of its body weight (equivalent to a 150lb human eating 30lbs of food)</p>
+                    <a href="#" class="btn btn-primary">More Info</a>
                 </div>
             </div>
             <div class="card" style="width: 18rem">
-                <div class="card-header">
-                    Featured
-                </div>
-                <div class="card-body">
-                    <h5 class="card-title">Special title treatment</h5>
-                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                <img src="img/platypus-environment.jpg" class="card-img-top" alt="Platypus Environment">
+                <div class="card-body card-body-flex">
+                    <h5 class="card-title">ENVIRONMENT</h5>
+                    <p class="card-text">-platypus needs a constant source of water (i.e. freshwater lakes, rivers, lagoons, farm dams, and streams)<br/> - they are considered nocturnal and are non-sociable. They tend to only gather during mating season.</p>
+                    <a href="#" class="btn btn-primary">More Info</a>
                 </div>
             </div>
             <div class="card " style="width: 18rem">
-                <div class="card-header">
-                    Featured
-                </div>
-                <div class="card-body">
-                    <h5 class="card-title">Special title treatment</h5>
-                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-                    <a href="#" class="btn btn-primary">Go somewhere</a>
+                <img src="img/platypus-tips.jpg" class="card-img-top" alt="Some Tips">
+                <div class="card-body card-body-flex">
+                    <h5 class="card-title">EXTRA TIPS</h5>
+                    <p class="card-text">- platypus have venomous barb. Be careful when handling them<br/> - it’s actually ILLEGAL to own a platypus, bylaw according to Australian wildlife<br/> - Those with a license to handle platypus can rescue them. After rehab platypus
+                        are released back into the wild.</p>
+                    <a href="#" class="btn btn-primary">More Info</a>
                 </div>
             </div>
         </div>
     </section>
     <section class="" style="background-color: #189090">
-        <div class="container employees py-3">
-            <div class="card" style="width: 18rem;">
-                <img src="..." class="card-img-top" alt="...">
+        <div class="container employees py-5">
+            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+                <img src="img/Phil.png" class="avatar" alt="Phil's Avatar">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <h5 class="card-title employee-name text-danger">PHIL</h5>
+                    <p class="card-text text-warning">Product Owner</p>
                 </div>
             </div>
-            <div class="card" style="width: 18rem;">
-                <img src="..." class="card-img-top" alt="...">
+            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+                <img src="img/Loc.png" class="avatar" alt="Loc's Avatar">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <h5 class="card-title employee-name text-danger">LOC</h5>
+                    <p class="card-text text-warning">Developer</p>
                 </div>
             </div>
-            <div class="card" style="width: 18rem;">
-                <img src="..." class="card-img-top" alt="...">
+            <div class="card bg-transparent no-border card-body-flex" style="width: 18rem;">
+                <img src="img/Anh.png" class="avatar" alt="Anh' Avatar">
                 <div class="card-body">
-                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                    <h5 class="card-title employee-name text-danger">ANH</h5>
+                    <p class="card-text text-warning">Scrum Master</p>
                 </div>
             </div>
         </div>
diff --git a/style.css b/style.css
index b6615c3..7e1eea1 100644
--- a/style.css
+++ b/style.css
@@ -111,4 +111,31 @@ footer {
     font-family: 'Sanomat Grab Web Regular', sans-serif;
     letter-spacing: 1px;
     padding-bottom: 20px;
+}
+
+
+/* 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;
 }
\ No newline at end of file