diff --git a/apps/web/app/blog/[slug]/opengraph-image.tsx b/apps/web/app/blog/[slug]/opengraph-image.tsx
index 5024191..7a6b5a6 100644
--- a/apps/web/app/blog/[slug]/opengraph-image.tsx
+++ b/apps/web/app/blog/[slug]/opengraph-image.tsx
@@ -1,7 +1,7 @@
 import { ImageResponse } from "next/og";
 import { allPosts } from "contentlayer/generated";
 import { blogThumbnails } from "../../../src/components/blog/blogThumbnails";
-import { OGImageTemplate } from "../../../src/components/OGImageTemplate";
+import { BlogOGImageTemplate } from "../../../src/components/BlogOGImageTemplate";
 import { getOgFonts, OG_IMAGE_SIZE } from "../../../src/lib/og-helper";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
@@ -18,20 +18,21 @@ export default async function Image({
   const { slug } = await params;
   const post = allPosts.find((p) => p.slug === slug);
 
-  // If we have a custom generated thumbnail, serve it directly as the OG image
+  let backgroundImageSrc: string | undefined = undefined;
+
+  // If we have a custom generated thumbnail, convert it to a data URI for Satori
   if (post?.thumbnail) {
     try {
       const filePath = path.join(process.cwd(), "public", post.thumbnail);
       const fileBuffer = await fs.readFile(filePath);
-      return new Response(fileBuffer, {
-        headers: {
-          "Content-Type": "image/png",
-          "Cache-Control": "public, max-age=31536000, immutable",
-        },
-      });
+
+      const ext = path.extname(post.thumbnail).substring(1).toLowerCase();
+      const mimeType = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : "image/png";
+
+      backgroundImageSrc = `data:${mimeType};base64,${fileBuffer.toString("base64")}`;
     } catch (err) {
-      console.warn(`[OG Image Generator] Could not read thumbnail file for ${slug}:`, err);
-      // Fall through to dynamic generation
+      console.warn(`[OG Image Generator] Could not read thumbnail file for ${slug} to use as background:`, err);
+      // Fall through to standard plain background
     }
   }
 
@@ -48,12 +49,13 @@ export default async function Image({
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    <OGImageTemplate
+    <BlogOGImageTemplate
       title={title}
       description={description}
       label={label}
       accentColor={accentColor}
       keyword={keyword}
+      backgroundImageSrc={backgroundImageSrc}
     />,
     {
       ...OG_IMAGE_SIZE,
diff --git a/apps/web/src/components/BlogOGImageTemplate.tsx b/apps/web/src/components/BlogOGImageTemplate.tsx
new file mode 100644
index 0000000..c7fc279
--- /dev/null
+++ b/apps/web/src/components/BlogOGImageTemplate.tsx
@@ -0,0 +1,258 @@
+import React from "react";
+
+interface BlogOGImageTemplateProps {
+    title: string;
+    description?: string;
+    label?: string;
+    accentColor?: string;
+    keyword?: string;
+    backgroundImageSrc?: string;
+}
+
+export function BlogOGImageTemplate({
+    title,
+    description,
+    label,
+    accentColor,
+    keyword,
+    backgroundImageSrc,
+}: BlogOGImageTemplateProps) {
+    const accent = accentColor || "#3b82f6";
+    const white = "#ffffff";
+    const slateLight = "#cbd5e1"; // slate-300 for readable descriptions on dark bg
+
+    const containerStyle: React.CSSProperties = {
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "center",
+        backgroundColor: "#0f172a", // base dark slate
+        padding: "80px",
+        position: "relative",
+        fontFamily: "Inter",
+    };
+
+    return (
+        <div style={containerStyle}>
+            {/* Primary Thumbnail Background Image */}
+            {backgroundImageSrc && (
+                <img
+                    src={backgroundImageSrc}
+                    width="1200"
+                    height="630"
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                    }}
+                />
+            )}
+
+            {/* Dark overlay to make text highly legible */}
+            <div
+                style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: "flex",
+                    // Deep dark gradient that is almost solid on the left and fades out slightly on the right
+                    backgroundImage: "linear-gradient(to right, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.88) 50%, rgba(15, 23, 42, 0.6) 100%)",
+                }}
+            />
+
+            {/* Subtle Grid Pattern overlay */}
+            <div
+                style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundImage: `linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)`,
+                    backgroundSize: "40px 40px",
+                    display: "flex",
+                }}
+            />
+
+            {/* Accent geometric block (right side) */}
+            <div
+                style={{
+                    position: "absolute",
+                    top: "60px",
+                    right: "80px",
+                    width: "200px",
+                    height: "200px",
+                    borderRadius: "24px",
+                    border: `3px solid ${accent}`,
+                    opacity: 0.3,
+                    display: "flex",
+                }}
+            />
+            <div
+                style={{
+                    position: "absolute",
+                    top: "100px",
+                    right: "120px",
+                    width: "160px",
+                    height: "160px",
+                    borderRadius: "20px",
+                    backgroundColor: accent,
+                    opacity: 0.15,
+                    display: "flex",
+                }}
+            />
+
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    position: "relative",
+                    zIndex: 10,
+                    maxWidth: "850px",
+                }}
+            >
+                {/* Label / Category */}
+                {label && (
+                    <div
+                        style={{
+                            fontSize: "18px",
+                            fontWeight: 700,
+                            color: accent,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.2em",
+                            marginBottom: "24px",
+                            display: "flex",
+                        }}
+                    >
+                        {label}
+                    </div>
+                )}
+
+                {/* Title */}
+                <div
+                    style={{
+                        fontSize: title.length > 40 ? "56px" : "72px",
+                        fontWeight: 700,
+                        color: white,
+                        lineHeight: "1.1",
+                        marginBottom: "28px",
+                        display: "flex",
+                        letterSpacing: "-0.03em",
+                    }}
+                >
+                    {title}
+                </div>
+
+                {/* Description */}
+                {description && (
+                    <div
+                        style={{
+                            fontSize: "26px",
+                            color: slateLight,
+                            lineHeight: "1.45",
+                            display: "flex",
+                            fontWeight: 400,
+                        }}
+                    >
+                        {description.length > 120
+                            ? description.substring(0, 117) + "..."
+                            : description}
+                    </div>
+                )}
+            </div>
+
+            {/* Brand Footer */}
+            <div
+                style={{
+                    position: "absolute",
+                    bottom: "60px",
+                    left: "80px",
+                    display: "flex",
+                    alignItems: "center",
+                }}
+            >
+                <div
+                    style={{
+                        width: "50px",
+                        height: "3px",
+                        backgroundColor: white,
+                        borderRadius: "2px",
+                        marginRight: "16px",
+                        opacity: 0.8,
+                    }}
+                />
+                <div
+                    style={{
+                        fontSize: "20px",
+                        fontWeight: 700,
+                        color: white,
+                        textTransform: "lowercase",
+                        letterSpacing: "0.05em",
+                        display: "flex",
+                        opacity: 0.8,
+                    }}
+                >
+                    mintel.me
+                </div>
+            </div>
+
+            {/* Keyword badge (bottom-right) */}
+            {keyword && (
+                <div
+                    style={{
+                        position: "absolute",
+                        bottom: "60px",
+                        right: "80px",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                    }}
+                >
+                    <div
+                        style={{
+                            width: "8px",
+                            height: "8px",
+                            borderRadius: "4px",
+                            backgroundColor: accent,
+                            display: "flex",
+                            opacity: 0.8,
+                        }}
+                    />
+                    <div
+                        style={{
+                            fontSize: "14px",
+                            fontWeight: 700,
+                            color: white,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.15em",
+                            fontFamily: "ui-monospace, monospace",
+                            display: "flex",
+                            opacity: 0.6,
+                        }}
+                    >
+                        {keyword}
+                    </div>
+                </div>
+            )}
+
+            {/* Accent Strip */}
+            <div
+                style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "5px",
+                    backgroundColor: accent,
+                }}
+            />
+        </div>
+    );
+}