diff --git a/public/images/preview/predictive-occupancy-dark.webp b/public/images/preview/predictive-occupancy-dark.webp
new file mode 100644
index 0000000..6a1361c
Binary files /dev/null and b/public/images/preview/predictive-occupancy-dark.webp differ
diff --git a/public/images/preview/predictive-occupancy.webp b/public/images/preview/predictive-occupancy.webp
index 9629a22..2a13717 100644
Binary files a/public/images/preview/predictive-occupancy.webp and b/public/images/preview/predictive-occupancy.webp differ
diff --git a/public/images/preview/trends-dark.webp b/public/images/preview/trends-dark.webp
new file mode 100644
index 0000000..52ab297
Binary files /dev/null and b/public/images/preview/trends-dark.webp differ
diff --git a/public/images/preview/trends.webp b/public/images/preview/trends.webp
index fb3749c..bd31696 100644
Binary files a/public/images/preview/trends.webp and b/public/images/preview/trends.webp differ
diff --git a/src/pages/preview/sections/PreviewFeatures.tsx b/src/pages/preview/sections/PreviewFeatures.tsx
index d3c1954..02332f0 100644
--- a/src/pages/preview/sections/PreviewFeatures.tsx
+++ b/src/pages/preview/sections/PreviewFeatures.tsx
@@ -15,6 +15,7 @@ const previewItems: BentoItem[] = [
     description: "Know before you go. See expected lounge occupancy hours in advance with AI-powered predictions based on real-world usage patterns.",
     size: "large",
     image: "/images/preview/predictive-occupancy.webp",
+    imageDark: "/images/preview/predictive-occupancy-dark.webp",
     theme: "steel",
   },
   {
@@ -22,6 +23,7 @@ const previewItems: BentoItem[] = [
     description: "Decide at a glance. Instantly see whether a lounge is busier or quieter than usual with glanceable occupancy insights.",
     size: "large",
     image: "/images/preview/trends.webp",
+    imageDark: "/images/preview/trends-dark.webp",
     theme: "gold",
   }
 ];