diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js
index a346a2f..beb45e3 100644
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -612,21 +612,22 @@ const MainPageLayout = () => {
                         justifyContent: "center",
                       }}
                     >
-                      <img
-                        src={box.image}
-                        alt={box.title}
-                        fetchPriority="high"
-                        loading="eager"
-                        style={{
-                          maxWidth: "100%",
-                          maxHeight: "100%",
-                          objectFit: "contain",
-                          position: "absolute",
-                          top: "50%",
-                          left: "50%",
-                          transform: "translate(-50%, -50%)",
-                        }}
-                      />
+                      {/* Image loaded only when needed */}
+                      {getOpacity(pageType) === 1 && (
+                        <img
+                          src={box.image}
+                          alt={box.title}
+                          style={{
+                            maxWidth: "100%",
+                            maxHeight: "100%",
+                            objectFit: "contain",
+                            position: "absolute",
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
+                          }}
+                        />
+                      )}
                       <Box
                         sx={{
                           position: "absolute",