diff --git a/package-lock.json b/package-lock.json
index 08dbcd3..b356fd5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@fold-dev/docs",
-  "version": "24.6.5.1",
+  "version": "24.6.6.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@fold-dev/docs",
-      "version": "24.6.5.1",
+      "version": "24.6.6.1",
       "license": "ISC",
       "dependencies": {
         "@fold-dev/core": "^0.11.7",
diff --git a/package.json b/package.json
index 0e3bb1b..9b09279 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fold-dev/docs",
-  "version": "24.6.6.0",
+  "version": "24.6.6.1",
   "description": "UI components for product teams.",
   "scripts": {
     "prepare": "husky install",
diff --git a/src/components/core.component.tsx b/src/components/core.component.tsx
index 6065cbf..131bd76 100644
--- a/src/components/core.component.tsx
+++ b/src/components/core.component.tsx
@@ -1377,13 +1377,6 @@ export const CoreComponent = () => {
         highlightCode(snippet1, 'javascript').then((html) => setHtml(html))
     }, [])
 
-    useEffect(() => {
-        ['app-sandbox-light.png', 'app-sandbox-dark.png'].map((imageUrl) => {
-            const img = new window.Image()
-            img.src = imageUrl
-        })
-    }, [])
-
     return (
         <>
             <View
@@ -1513,6 +1506,30 @@ export const CoreComponent = () => {
                             width={1250}
                             style={{ left: 0, top: -35, transform: 'rotateZ(8deg)' }}
                             position="absolute">
+                            <img
+                                className="lazy-load-dark"
+                                style={{ 
+                                    visibility: 'hidden', 
+                                    position: 'absolute', 
+                                    zIndex: -1, 
+                                    top: 0, 
+                                    left: 0,
+                                    width: 0,
+                                    height: 0,
+                                }}
+                            />
+                            <img
+                                className="lazy-load-light"
+                                style={{ 
+                                    visibility: 'hidden', 
+                                    position: 'absolute', 
+                                    zIndex: -1, 
+                                    top: 0, 
+                                    left: 0,
+                                    width: 0,
+                                    height: 0,
+                                }}
+                            />
                             <img 
                                 style={{ position: 'relative', zIndex: 0 }}
                                 src="app-sandbox-light.png" 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 4fe65d5..e119b58 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -218,6 +218,14 @@ body {
     margin: 1rem 0;
 }
 
+.lazy-load-dark {
+    content: url("../../public/app-sandbox-dark.png");
+}
+
+.lazy-load-light {
+    content: url("../../public/app-sandbox-light.png");
+}
+
 [data-theme="dark"] .pro-image {
     content: url("../../public/app-sandbox-dark.png");
 }