diff --git a/public/template-thumbnails/model-product-hover.png b/public/template-thumbnails/model-product-hover.png
deleted file mode 100644
index 921e7a7c..00000000
Binary files a/public/template-thumbnails/model-product-hover.png and /dev/null differ
diff --git a/public/template-thumbnails/style-transfer-hover.png b/public/template-thumbnails/style-transfer-hover.png
deleted file mode 100644
index 79b68c5c..00000000
Binary files a/public/template-thumbnails/style-transfer-hover.png and /dev/null differ
diff --git a/src/components/quickstart/TemplateExplorerView.tsx b/src/components/quickstart/TemplateExplorerView.tsx
index d35c3e2d..5c8158e0 100644
--- a/src/components/quickstart/TemplateExplorerView.tsx
+++ b/src/components/quickstart/TemplateExplorerView.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { WorkflowFile } from "@/store/workflowStore";
-import { getAllPresets, PRESET_TEMPLATES } from "@/lib/quickstart/templates";
+import { getAllPresets, PRESET_TEMPLATES, getTemplateContent } from "@/lib/quickstart/templates";
 import { QuickstartBackButton } from "./QuickstartBackButton";
 import { TemplateCard } from "./TemplateCard";
 import { CommunityWorkflowMeta, TemplateCategory, TemplateMetadata } from "@/types/quickstart";
@@ -69,20 +69,27 @@ export function TemplateExplorerView({
     return metadata;
   }, []);
 
-  // Template thumbnail images (static paths)
-  const templateThumbnails: Record<string, { primary: string; hover?: string }> = {
-    "product-shot": { primary: "/template-thumbnails/product-shot.png" },
-    "model-product": {
-      primary: "/template-thumbnails/model-product.png",
-      hover: "/template-thumbnails/model-product-hover.png"
-    },
-    "color-variations": { primary: "/template-thumbnails/color-variations.png" },
-    "background-swap": { primary: "/template-thumbnails/background-swap.png" },
-    "style-transfer": {
-      primary: "/template-thumbnails/style-transfer.png",
-      hover: "/template-thumbnails/style-transfer-hover.png"
-    },
-    "scene-composite": { primary: "/template-thumbnails/scene-composite.png" },
+  // Get primary thumbnail from template content (first image)
+  const primaryThumbnails = useMemo(() => {
+    const images: Record<string, string | undefined> = {};
+    PRESET_TEMPLATES.forEach((template) => {
+      const content = getTemplateContent(template.id, "full");
+      if (content?.images) {
+        const imageUrls = Object.values(content.images).map((img) => img.url);
+        images[template.id] = imageUrls[0];
+      }
+    });
+    return images;
+  }, []);
+
+  // Hover thumbnails (workflow screenshots)
+  const hoverThumbnails: Record<string, string> = {
+    "product-shot": "/template-thumbnails/product-shot.png",
+    "model-product": "/template-thumbnails/model-product.png",
+    "color-variations": "/template-thumbnails/color-variations.png",
+    "background-swap": "/template-thumbnails/background-swap.png",
+    "style-transfer": "/template-thumbnails/style-transfer.png",
+    "scene-composite": "/template-thumbnails/scene-composite.png",
   };
 
   // Filter presets based on search, category, and tags
@@ -408,8 +415,8 @@ export function TemplateExplorerView({
                     key={preset.id}
                     template={preset}
                     nodeCount={presetMetadata[preset.id]?.nodeCount ?? 0}
-                    previewImage={templateThumbnails[preset.id]?.primary}
-                    hoverImage={templateThumbnails[preset.id]?.hover}
+                    previewImage={primaryThumbnails[preset.id]}
+                    hoverImage={hoverThumbnails[preset.id]}
                     isLoading={loadingWorkflowId === preset.id}
                     onUseWorkflow={() => handlePresetSelect(preset.id)}
                     disabled={isLoading && loadingWorkflowId !== preset.id}