diff --git a/public/project-images/Bg0Geue-cY8-unsplash.jpg b/public/project-images/Bg0Geue-cY8-unsplash.jpg
new file mode 100644
index 0000000..2c4a55a
Binary files /dev/null and b/public/project-images/Bg0Geue-cY8-unsplash.jpg differ
diff --git a/public/project-images/OqtafYT5kTw-unsplash.jpg b/public/project-images/OqtafYT5kTw-unsplash.jpg
new file mode 100644
index 0000000..d1b03e5
Binary files /dev/null and b/public/project-images/OqtafYT5kTw-unsplash.jpg differ
diff --git a/public/project-images/f4pUuCc3M0g-unsplash.jpg b/public/project-images/f4pUuCc3M0g-unsplash.jpg
new file mode 100644
index 0000000..1f6d7e1
Binary files /dev/null and b/public/project-images/f4pUuCc3M0g-unsplash.jpg differ
diff --git a/src/components/projects/CardImage.jsx b/src/components/projects/CardImage.jsx
index 3c7d4a2..d140cba 100644
--- a/src/components/projects/CardImage.jsx
+++ b/src/components/projects/CardImage.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { getRandomImage } from "../../utils/getRandomImage";
 
-export default function ContentCardImage() {
+export default function ContentCardImage({ baseUrl }) {
   const placeholderProjectImages = [
     "Bg0Geue-cY8",
     "f4pUuCc3M0g",
@@ -15,7 +15,7 @@ export default function ContentCardImage() {
 
   return (
     <img
-      src={`https://source.unsplash.com/${randomImage}`}
+      src={`${baseUrl}/project-images/${randomImage}-unsplash.jpg`}
       className="w-full h-40 object-cover object-center"
       loading="lazy"
     />
diff --git a/src/pages/ecosystems/index.astro b/src/pages/ecosystems/index.astro
index 1dd1bbc..d1e97fb 100644
--- a/src/pages/ecosystems/index.astro
+++ b/src/pages/ecosystems/index.astro
@@ -95,7 +95,11 @@ const uniqueTags = extractUniqueTagsObject(flattenedRelatedProjects);
                     slot="cardImage"
                   />
                 ) : (
-                  <CardImage slot="cardImage" client:visible />
+                  <CardImage
+                    slot="cardImage"
+                    baseUrl={baseUrl}
+                    client:only="react"
+                  />
                 )}
 
                 <CardContent
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 36a0b60..5f2b9ce 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -95,7 +95,11 @@ const uniqueTags = extractUniqueTagsObject(allProjects);
                     slot="cardImage"
                   />
                 ) : (
-                  <CardImage slot="cardImage" client:load />
+                  <CardImage
+                    slot="cardImage"
+                    baseUrl={baseUrl}
+                    client:only="react"
+                  />
                 )}
 
                 <CardContent