diff --git a/index.html b/index.html
index f8708a4..5b3c760 100644
--- a/index.html
+++ b/index.html
@@ -499,7 +499,7 @@ <h2 class="title is-3">Measuring Motion Fidelity</h2>
                         <br>
 
                         <div style="text-align: center;">
-                            <img src="sm/assets/pics/metrics.png" alt="motion_fidelity" width="50%">
+                            <img src="sm/assets/pics/metrics.png" alt="motion_fidelity" id="metrics_image">
                         </div>
 
                     </div>
diff --git a/static/css/index.css b/static/css/index.css
index a407ee1..08eee2f 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -463,4 +463,15 @@ body {
     /* Set the width to 60% for larger screens */
     width: 60%;
   }
+}
+
+#metrics_image {
+  /* Default width for small screens or when no media query matches */
+  width: 100%;
+
+  /* Media query for screens with a minimum width of 768 pixels (adjust as needed) */
+  @media screen and (min-width: 768px) {
+    /* Set the width to 60% for larger screens */
+    width: 50%;
+  }
 }
\ No newline at end of file