diff --git a/enjoy/assets/default-img.jpg b/enjoy/assets/default-img.jpg
new file mode 100644
index 00000000..9fc3362d
Binary files /dev/null and b/enjoy/assets/default-img.jpg differ
diff --git a/enjoy/assets/default-img.png b/enjoy/assets/default-img.png
new file mode 100644
index 00000000..1a9bcb82
Binary files /dev/null and b/enjoy/assets/default-img.png differ
diff --git a/enjoy/src/renderer/components/stories/story-card.tsx b/enjoy/src/renderer/components/stories/story-card.tsx
index de8994ec..11a56e69 100644
--- a/enjoy/src/renderer/components/stories/story-card.tsx
+++ b/enjoy/src/renderer/components/stories/story-card.tsx
@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { cn } from "@renderer/lib/utils";
+import { cn, imgErrorToDefalut } from "@renderer/lib/utils";
 
 export const StoryCard = (props: { story: StoryType; className?: string }) => {
   const { story, className } = props;
@@ -16,6 +16,7 @@ export const StoryCard = (props: { story: StoryType; className?: string }) => {
             <img
               crossOrigin="anonymous"
               src={story.metadata.image}
+              onError={imgErrorToDefalut} 
               className="w-full h-full object-cover hover:scale-105"
             />
           </div>
diff --git a/enjoy/src/renderer/lib/utils.ts b/enjoy/src/renderer/lib/utils.ts
index 18ae276f..f9545abe 100644
--- a/enjoy/src/renderer/lib/utils.ts
+++ b/enjoy/src/renderer/lib/utils.ts
@@ -137,3 +137,10 @@ export function renderPitchContour(options: {
     },
   });
 }
+
+export function imgErrorToDefalut(e: React.SyntheticEvent<HTMLImageElement, Event>) {
+  const target = e.target as HTMLImageElement;
+  target.onerror = null; 
+  target.src = "assets/default-img.jpg";
+}
+