diff --git a/src/components/Practice/Mechanics3.jsx b/src/components/Practice/Mechanics3.jsx
index 4d45453..8bc563d 100644
--- a/src/components/Practice/Mechanics3.jsx
+++ b/src/components/Practice/Mechanics3.jsx
@@ -261,6 +261,7 @@ const Mechanics2 = ({
               <Box sx={{ position: "relative", cursor: "zoom-in" }}>
                 {image && (
                   <img
+                    onClick={() => setZoomOpen(true)}
                     src={image}
                     style={{
                       borderRadius: "20px",
diff --git a/src/components/Practice/Mechanics5.jsx b/src/components/Practice/Mechanics5.jsx
index c08d93c..76121f0 100644
--- a/src/components/Practice/Mechanics5.jsx
+++ b/src/components/Practice/Mechanics5.jsx
@@ -232,7 +232,14 @@ const Mechanics5 = ({
               justifyContent: "center",
             }}
           >
-            <Box sx={{ position: "relative", outline: "none" }}>
+            <Box
+              sx={{
+                position: "relative",
+                outline: "none",
+                height: "500px",
+                width: "500px",
+              }}
+            >
               {/* Subtle gradient overlay at the top of the zoomed image */}
               <Box
                 sx={{
@@ -269,8 +276,9 @@ const Mechanics5 = ({
                 src={image}
                 alt="Zoomed content"
                 style={{
-                  maxWidth: "90vw",
-                  maxHeight: "90vh",
+                  // maxWidth: "90vw",
+                  // maxHeight: "90vh",
+                  width: "100%",
                   borderRadius: "8px",
                 }}
               />