diff --git a/apps/www/src/app/api/og/server/[id]/players/route.tsx b/apps/www/src/app/api/og/server/[id]/players/route.tsx
index 9ace55f..32d6ade 100644
--- a/apps/www/src/app/api/og/server/[id]/players/route.tsx
+++ b/apps/www/src/app/api/og/server/[id]/players/route.tsx
@@ -555,6 +555,21 @@ export async function GET(
       console.error("Failed to load fonts for error page:", e);
     }
 
+    // Try to load the banner image
+    let bannerImageData: Buffer | null = null;
+    try {
+      const bannerPath = path.join(
+        process.cwd(),
+        "public",
+        "branding",
+        "dark-banner.png"
+      );
+      bannerImageData = fs.readFileSync(bannerPath);
+    } catch (e) {
+      // If banner image fails to load, use a solid color background
+      console.error("Failed to load banner image for error page:", e);
+    }
+
     return new ImageResponse(
       (
         <div
@@ -562,6 +577,7 @@ export async function GET(
             display: "flex",
             fontSize: 60,
             color: "white",
+            background: bannerImageData ? undefined : "#121212",
             width: "100%",
             height: "100%",
             padding: "50px 50px",
@@ -569,7 +585,11 @@ export async function GET(
             justifyContent: "center",
             alignItems: "center",
             fontFamily: "Inter",
-            backgroundColor: "white"
+            ...(bannerImageData && {
+              backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }),
           }}
         >
           <div
diff --git a/apps/www/src/app/api/og/server/[id]/route.tsx b/apps/www/src/app/api/og/server/[id]/route.tsx
index 61f41a8..c40047e 100644
--- a/apps/www/src/app/api/og/server/[id]/route.tsx
+++ b/apps/www/src/app/api/og/server/[id]/route.tsx
@@ -154,6 +154,7 @@ export async function GET(
               textAlign: "center",
               justifyContent: "center",
               alignItems: "center",
+              backgroundImage: `url(${new URL("/branding/bg-banner.png", request.url).toString()})`,
               backgroundSize: "cover",
               backgroundPosition: "center",
               fontFamily: "Inter",
@@ -421,6 +422,16 @@ export async function GET(
     const [interRegular, interBold] = await loadFonts();
     console.error("Error generating OG image:", error);
 
+    // Try to load the banner image again in case it failed earlier
+    let bannerImageData: ArrayBuffer | undefined;
+    try {
+      bannerImageData = await fetch(
+        new URL("/branding/dark-banner.png", request.url)
+      ).then((res) => res.arrayBuffer());
+    } catch (e) {
+      // If banner image fails to load, use a solid color background
+      console.error("Failed to load banner image for error page:", e);
+    }
 
     return new ImageResponse(
       (
@@ -429,7 +440,7 @@ export async function GET(
             display: "flex",
             fontSize: 60,
             color: "white",
-            background:  "#121212",
+            background: bannerImageData ? undefined : "#121212",
             width: "100%",
             height: "100%",
             padding: "50px 50px",