diff --git a/src/components/Practice/Mechanics3.jsx b/src/components/Practice/Mechanics3.jsx
index e89913f0..3a560810 100644
--- a/src/components/Practice/Mechanics3.jsx
+++ b/src/components/Practice/Mechanics3.jsx
@@ -261,8 +261,8 @@ const Mechanics2 = ({
                 },
               }}
             >
-              <Box sx={{ position: "relative", cursor: "zoom-in" }}>
-                {image && (
+              {image?.split("/")?.[4] && (
+                <Box sx={{ position: "relative", cursor: "zoom-in" }}>
                   <img
                     onClick={() => setZoomOpen(true)}
                     src={image}
@@ -273,32 +273,36 @@ const Mechanics2 = ({
                     }}
                     alt=""
                   />
-                )}
 
-                {/* Subtle gradient overlay across the top */}
-                <Box
-                  sx={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    height: "40px", // Height of the gradient overlay
-                    background:
-                      "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
-                    borderTopLeftRadius: "20px",
-                    borderTopRightRadius: "20px",
-                    display: "flex",
-                    alignItems: "center",
-                    paddingLeft: "8px",
-                  }}
-                >
-                  {/* Zoom icon positioned in the top-left corner */}
-                  <ZoomInIcon
-                    onClick={() => setZoomOpen(true)}
-                    sx={{ color: "white", fontSize: "22px", cursor: "pointer" }}
-                  />
+                  {/* Subtle gradient overlay across the top */}
+                  <Box
+                    sx={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      height: "40px", // Height of the gradient overlay
+                      background:
+                        "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                      borderTopLeftRadius: "20px",
+                      borderTopRightRadius: "20px",
+                      display: "flex",
+                      alignItems: "center",
+                      paddingLeft: "8px",
+                    }}
+                  >
+                    {/* Zoom icon positioned in the top-left corner */}
+                    <ZoomInIcon
+                      onClick={() => setZoomOpen(true)}
+                      sx={{
+                        color: "white",
+                        fontSize: "22px",
+                        cursor: "pointer",
+                      }}
+                    />
+                  </Box>
                 </Box>
-              </Box>
+              )}
               <Modal
                 open={zoomOpen}
                 onClose={() => setZoomOpen(false)}