diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 786afdc..ff4badb 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -26,13 +26,13 @@ export const metadata: Metadata = {
     siteName: "c0upons",
     type: "website",
     locale: "en_US",
-    images: [{ url: `${BASE}/og-image.png`, width: 1200, height: 630, alt: "c0upons — Community Coupon Codes" }],
+    images: [{ url: `${BASE}/opengraph-image`, width: 1200, height: 630, alt: "c0upons — Community Coupon Codes" }],
   },
   twitter: {
     card: "summary_large_image",
     title: "c0upons — Community Coupon Codes",
     description: "Find and share the best coupon codes and deals, updated daily by the community.",
-    images: [`${BASE}/og-image.png`],
+    images: [`${BASE}/opengraph-image`],
   },
   icons: {
     icon: "/favicon.svg",
diff --git a/apps/web/app/opengraph-image.tsx b/apps/web/app/opengraph-image.tsx
new file mode 100644
index 0000000..277bd8d
--- /dev/null
+++ b/apps/web/app/opengraph-image.tsx
@@ -0,0 +1,71 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+export const alt = "c0upons — Community Coupon Codes";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+export default function Image() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: "#ffffff",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          fontFamily: "Arial Black, Arial, sans-serif",
+        }}
+      >
+        {/* Orange accent bar */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 12,
+            background: "#f97316",
+          }}
+        />
+        {/* Logo text */}
+        <div
+          style={{
+            fontSize: 120,
+            fontWeight: 900,
+            color: "#f97316",
+            letterSpacing: "-2px",
+          }}
+        >
+          c0upons
+        </div>
+        {/* Tagline */}
+        <div
+          style={{
+            fontSize: 36,
+            fontWeight: 400,
+            color: "#374151",
+            marginTop: 24,
+          }}
+        >
+          Community Coupon Codes &amp; Deals
+        </div>
+        {/* Bottom accent bar */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 12,
+            background: "#f97316",
+          }}
+        />
+      </div>
+    ),
+    { ...size }
+  );
+}