diff --git a/assets/aluminum_4381614.png b/assets/aluminum_4381614.png
new file mode 100644
index 0000000..7dfe1a9
Binary files /dev/null and b/assets/aluminum_4381614.png differ
diff --git a/assets/exterior-cleaning_17073146.png b/assets/exterior-cleaning_17073146.png
new file mode 100644
index 0000000..0325822
Binary files /dev/null and b/assets/exterior-cleaning_17073146.png differ
diff --git a/assets/recycling-bin_532768.png b/assets/recycling-bin_532768.png
new file mode 100644
index 0000000..177b799
Binary files /dev/null and b/assets/recycling-bin_532768.png differ
diff --git a/assets/solidarity_16825525.png b/assets/solidarity_16825525.png
new file mode 100644
index 0000000..18a7efe
Binary files /dev/null and b/assets/solidarity_16825525.png differ
diff --git a/index.html b/index.html
index 1ae32a7..040ff28 100644
--- a/index.html
+++ b/index.html
@@ -242,18 +242,22 @@ <h2>About Us</h2>
                             <h3>Our Mission</h3>
                             <div class="mission-box">
                                 <div class="mission-item">
+                                    <img src="./assets/recycling-bin_532768.png" alt="Reduce Waste">
                                     <h4>Reduce Waste</h4>
                                     <p>Minimize waste generation through innovative technologies and education.</p>
                                 </div>
                                 <div class="mission-item">
+                                    <img src="./assets/aluminum_4381614.png" alt="Promote Recycling">
                                     <h4>Promote Recycling</h4>
                                     <p>Encourage responsible disposal and recycling practices in every community.</p>
                                 </div>
                                 <div class="mission-item">
+                                    <img src="./assets/solidarity_16825525.png" alt="Empower Communities">
                                     <h4>Empower Communities</h4>
                                     <p>Equip individuals with knowledge and tools for sustainable living.</p>
                                 </div>
                                 <div class="mission-item">
+                                    <img src="./assets/exterior-cleaning_17073146.png" alt="Build a Cleaner Future">
                                     <h4>Build a Cleaner Future</h4>
                                     <p>Protect the environment for future generations.</p>
                                 </div>
diff --git a/styles.css b/styles.css
index 2b3400e..3b7d467 100644
--- a/styles.css
+++ b/styles.css
@@ -921,3 +921,71 @@ body.dark-mode {
       width: 100%;
   }
 }
+
+/* Global styling */
+body {
+  margin: 0;
+  font-family: 'Arial', sans-serif;
+  background-color: #f9f9f9; /* Light background to make the mission section stand out */
+}
+
+.mission-container {
+  padding: 50px;
+  background-color: #f4f4f4;
+  text-align: center;
+}
+
+.mission-container h3 {
+  font-size: 2.5rem;
+  margin-bottom: 40px;
+  color: #333;
+}
+
+.mission-box {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
+  gap: 20px;
+}
+
+.mission-item {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 15px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.mission-item:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
+}
+
+.mission-item img {
+  max-width: 80px;
+  margin-bottom: 20px;
+  transition: transform 0.3s;
+}
+
+.mission-item:hover img {
+  transform: scale(1.1);
+}
+
+.mission-item h4 {
+  font-size: 1.5rem;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.mission-item p {
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.5;
+}
+
+/* Responsive grid layout for smaller screens */
+@media (max-width: 768px) {
+  .mission-box {
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+}