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 b3a15d5..04e1c9c 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
@@ -35,6 +35,14 @@ export async function GET(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
+    // Load banner image from filesystem
+    const bannerPath = path.join(
+      process.cwd(),
+      "public",
+      "branding",
+      "bg-banner.png"
+    );
+    const bannerImageData = fs.readFileSync(bannerPath);
 
     const id = (await params).id;
 
@@ -60,7 +68,7 @@ export async function GET(
               textAlign: "center",
               justifyContent: "center",
               alignItems: "center",
-              backgroundImage: `url(${new URL("/branding/bg-banner.png", request.url).toString()})`,
+              backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
               backgroundSize: "cover",
               backgroundPosition: "center",
               fontFamily: "Inter",
@@ -248,7 +256,7 @@ export async function GET(
             position: "relative",
             overflow: "hidden",
             fontFamily: "Inter",
-            backgroundImage: `url(${new URL("/branding/bg-banner.png", request.url).toString()})`,
+            backgroundImage: `url(data:image/png;base64,${bannerImageData.toString("base64")})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}
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 154ec10..3f36a5f 100644
--- a/apps/www/src/app/api/og/server/[id]/route.tsx
+++ b/apps/www/src/app/api/og/server/[id]/route.tsx
@@ -128,6 +128,10 @@ export async function GET(
   { params }: { params: Promise<{ id: string }> }
 ) {
   try {
+    // Load banner image
+    const bannerImageData = await fetch(
+      new URL("/branding/bg-banner.png", request.url)
+    ).then((res) => res.arrayBuffer());
 
     const id = (await params).id;
 
@@ -154,7 +158,7 @@ export async function GET(
               textAlign: "center",
               justifyContent: "center",
               alignItems: "center",
-              backgroundImage: `url(${new URL("/branding/bg-banner.png", request.url).toString()})`,
+              backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
               backgroundSize: "cover",
               backgroundPosition: "center",
               fontFamily: "Inter",
@@ -222,7 +226,7 @@ export async function GET(
             position: "relative",
             overflow: "hidden",
             fontFamily: "Inter",
-            backgroundImage: `url(${new URL("/branding/bg-banner.png", request.url).toString()})`,
+            backgroundImage: `url(data:image/png;base64,${Buffer.from(bannerImageData).toString("base64")})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}