diff --git a/css/custom.css b/css/custom.css
index 673317f..197ca2c 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -219,6 +219,37 @@ img, picture, video, canvas, svg{
     }
 }
 
+/* Mission Image Responsive Styles */
+.mission-responsive-img {
+    width: 100%;
+    height: auto;
+    max-width: 600px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+.mission-circle-img {
+    width: 100%;
+    height: auto;
+    max-width: 200px;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    border-radius: 50%;
+    display: block;
+    margin: 0 auto;
+}
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .mission-responsive-img {
+        max-width: 100%;
+    }
+    
+    .mission-circle-img {
+        max-width: 150px;
+    }
+}
+
 a{
 	text-decoration: none;
 }
diff --git a/index.html b/index.html
index 2f74fd4..54110b8 100644
--- a/index.html
+++ b/index.html
@@ -337,14 +337,14 @@
                         <!-- Mission Image Start -->
                         <div class="mission-img">
                             <figure class="image-anime reveal">
-                                <img src="images/about.gif" style="width: 450px; height: 750px;" alt="">
+                                <img src="images/about.gif" alt="" class="mission-responsive-img">
                             </figure>
                         </div>
                         <!-- Mission Image End -->
 
                         <!-- Mission Life Circle Start -->
                         <div class="mission-life-circle">
-                            <img src="images/hero-bg.jpg" alt="" style="width: 160px; height: auto;">
+                            <img src="images/hero-bg.jpg" alt="" class="mission-circle-img">
                         </div>
                         <!-- Mission Life Circle End -->
                     </div>