diff --git a/biome.json b/biome.json
index fc4d0b6b..d732ca29 100644
--- a/biome.json
+++ b/biome.json
@@ -159,7 +159,7 @@
       }
     },
     {
-      "includes": ["**/opengraph-image.tsx", "**/twitter-image.tsx"],
+      "includes": ["**/opengraph-image.tsx", "**/twitter-image.tsx", "**/x-card/route.tsx"],
       "linter": {
         "rules": {
           "performance": {
diff --git a/src/app/tools/shader-lab/x-card/route.tsx b/src/app/tools/shader-lab/x-card/route.tsx
new file mode 100644
index 00000000..4e7387ad
--- /dev/null
+++ b/src/app/tools/shader-lab/x-card/route.tsx
@@ -0,0 +1,23 @@
+import { ImageResponse } from "next/og"
+
+const size = { height: 630, width: 1200 }
+
+export async function GET(request: Request) {
+  const src = new URL("/opengraph-image.jpg?v=2", request.url).toString()
+
+  return new ImageResponse(
+    <div style={{ display: "flex", height: size.height, width: size.width }}>
+      <img
+        alt=""
+        height={size.height}
+        src={src}
+        style={{ height: size.height, width: size.width }}
+        width={size.width}
+      />
+    </div>,
+    {
+      ...size,
+      headers: { "Cache-Control": "public, max-age=0, must-revalidate" },
+    }
+  )
+}
diff --git a/src/lib/app.ts b/src/lib/app.ts
index 01946ac7..a71b4dcc 100644
--- a/src/lib/app.ts
+++ b/src/lib/app.ts
@@ -42,7 +42,7 @@ export const APP_TWITTER_IMAGES = [
   {
     alt: APP_DEFAULT_TITLE,
     height: 630,
-    url: "/opengraph-image.jpg?v=2",
+    url: "/tools/shader-lab/x-card",
     width: 1200,
   },
 ]