diff --git a/public/demo-dark-min.png b/public/demo-dark-min.png
new file mode 100644
index 0000000..b9e4e2f
Binary files /dev/null and b/public/demo-dark-min.png differ
diff --git a/public/demo-dark.png b/public/demo-dark.png
deleted file mode 100644
index faefa1e..0000000
Binary files a/public/demo-dark.png and /dev/null differ
diff --git a/public/demo-light-min.png b/public/demo-light-min.png
new file mode 100644
index 0000000..589ef06
Binary files /dev/null and b/public/demo-light-min.png differ
diff --git a/public/demo-light.png b/public/demo-light.png
deleted file mode 100644
index 1a11cae..0000000
Binary files a/public/demo-light.png and /dev/null differ
diff --git a/public/demo-mobile-dark-min.png b/public/demo-mobile-dark-min.png
new file mode 100644
index 0000000..fca9bf1
Binary files /dev/null and b/public/demo-mobile-dark-min.png differ
diff --git a/public/demo-mobile-dark.png b/public/demo-mobile-dark.png
deleted file mode 100644
index 4a57a7d..0000000
Binary files a/public/demo-mobile-dark.png and /dev/null differ
diff --git a/public/demo-mobile-light-min.png b/public/demo-mobile-light-min.png
new file mode 100644
index 0000000..d88ad2d
Binary files /dev/null and b/public/demo-mobile-light-min.png differ
diff --git a/public/demo-mobile-light.png b/public/demo-mobile-light.png
deleted file mode 100644
index 7ac9dc9..0000000
Binary files a/public/demo-mobile-light.png and /dev/null differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3ba6b21..7ae1869 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -64,7 +64,7 @@ export default function HomePage() {
           </section>
           <div className="w-full flex justify-center relative">
             <Image
-              src="/demo-light.png"
+              src="/demo-light-min.png"
               width={1080}
               height={608}
               alt="demo"
@@ -72,7 +72,7 @@ export default function HomePage() {
               className="border rounded-xl shadow-sm dark:hidden"
             />
             <Image
-              src="/demo-dark.png"
+              src="/demo-dark-min.png"
               width={1080}
               height={608}
               alt="demo-dark"
@@ -80,14 +80,14 @@ export default function HomePage() {
               className="border border-zinc-600 rounded-xl shadow-sm hidden dark:block dark:shadow-gray-500/5"
             />
             <Image
-              src="/demo-mobile-light.png"
+              src="/demo-mobile-light-min.png"
               width={228}
               height={494}
               alt="demo-mobile"
               className="border rounded-xl absolute bottom-0 right-0 hidden lg:block dark:hidden"
             />
             <Image
-              src="/demo-mobile-dark.png"
+              src="/demo-mobile-dark-min.png"
               width={228}
               height={494}
               alt="demo-mobile"