diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
index e8fd776..25ba788 100644
--- a/app/opengraph-image.tsx
+++ b/app/opengraph-image.tsx
@@ -4,6 +4,14 @@ export const alt = "Puzzle Trainer";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";
 
+const GAMES = [
+  { label: "Q", color: "#d97706" },
+  { label: "T", color: "#ea580c" },
+  { label: "Z", color: "#2563eb" },
+  { label: "S", color: "#16a34a" },
+  { label: "P", color: "#7c3aed" },
+];
+
 export default function OGImage() {
   return new ImageResponse(
     (
@@ -19,39 +27,33 @@ export default function OGImage() {
           fontFamily: "system-ui, -apple-system, sans-serif",
         }}
       >
-        {/* Game icons row */}
         <div style={{ display: "flex", gap: 24, marginBottom: 40 }}>
-          {["♛", "☀", "∞", "#", "▦"].map((icon, i) => (
+          {GAMES.map((g) => (
             <div
-              key={i}
+              key={g.label}
               style={{
                 width: 72,
                 height: 72,
-                background: "#111827",
+                background: g.color,
                 borderRadius: 16,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 fontSize: 32,
-                color: "#f9fafb",
+                fontWeight: 700,
+                color: "#ffffff",
               }}
             >
-              {icon}
+              {g.label}
             </div>
           ))}
         </div>
-
-        {/* Title */}
         <div style={{ fontSize: 72, fontWeight: 700, color: "#111827", letterSpacing: -2 }}>
           Puzzle Trainer
         </div>
-
-        {/* Tagline */}
         <div style={{ fontSize: 28, color: "#6b7280", marginTop: 16 }}>
           5 puzzles logiques · chaque jour
         </div>
-
-        {/* URL */}
         <div
           style={{
             position: "absolute",