diff --git a/src/components/CycleTransferStatsClient.tsx b/src/components/CycleTransferStatsClient.tsx
index 6b0ab39..5858334 100644
--- a/src/components/CycleTransferStatsClient.tsx
+++ b/src/components/CycleTransferStatsClient.tsx
@@ -31,7 +31,7 @@ export const CycleTransferStatsClient: React.FC<CycleTransferStatsClientProps> =
         "w-full bg-white px-4 py-3 rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
         className,
         {
-          "bg-card/50": customBackgroundImage,
+          "bg-card/80": customBackgroundImage,
         },
       )}
     >
diff --git a/src/components/GroupSwitch.tsx b/src/components/GroupSwitch.tsx
index 54c8dec..78fc34a 100644
--- a/src/components/GroupSwitch.tsx
+++ b/src/components/GroupSwitch.tsx
@@ -17,7 +17,7 @@ export default function GroupSwitch({
     <div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
       <div
         className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", {
-          "bg-stone-100/50 dark:bg-stone-800/50": customBackgroundImage,
+          "bg-stone-100/80 dark:bg-stone-800/80": customBackgroundImage,
         })}
       >
         {tabs.map((tab: string) => (
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
index 4fabe9c..a413793 100644
--- a/src/components/LanguageSwitcher.tsx
+++ b/src/components/LanguageSwitcher.tsx
@@ -33,7 +33,7 @@ export function LanguageSwitcher() {
           variant="outline"
           size="sm"
           className={cn("rounded-full px-[9px] bg-white dark:bg-black", {
-            "bg-white/50 dark:bg-black/50": customBackgroundImage,
+            "bg-white/80 dark:bg-black/80": customBackgroundImage,
           })}
         >
           {localeItems.find((item) => item.code === locale)?.name}
diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 8f504f4..5a7d00e 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -43,7 +43,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
           "lg:flex-row": !fixedTopServerName,
         },
         {
-          "bg-card/50": customBackgroundImage,
+          "bg-card/80": customBackgroundImage,
         },
       )}
       onClick={() => navigate(`/server/${serverInfo.id}`)}
@@ -141,7 +141,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
           "lg:flex-row": !fixedTopServerName,
         },
         {
-          "bg-card/50": customBackgroundImage,
+          "bg-card/80": customBackgroundImage,
         },
       )}
       onClick={() => navigate(`/server/${serverInfo.id}`, { replace: true })}
diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx
index e3751f5..4625139 100644
--- a/src/components/ServerCardInline.tsx
+++ b/src/components/ServerCardInline.tsx
@@ -34,7 +34,7 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
         className={cn(
           "flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
           {
-            "bg-card/50": customBackgroundImage,
+            "bg-card/80": customBackgroundImage,
           },
         )}
         onClick={() => navigate(`/server/${serverInfo.id}`)}
@@ -118,7 +118,7 @@ export default function ServerCardInline({ now, serverInfo }: { now: number; ser
       className={cn(
         "flex  min-h-[61px] min-w-[900px] items-center justify-start p-3 md:px-5 flex-row cursor-pointer hover:bg-accent/50 transition-colors",
         {
-          "bg-card/50": customBackgroundImage,
+          "bg-card/80": customBackgroundImage,
         },
       )}
       onClick={() => navigate(`/server/${serverInfo.id}`)}
diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
index ca9c6b3..8d3390a 100644
--- a/src/components/ServerDetailOverview.tsx
+++ b/src/components/ServerDetailOverview.tsx
@@ -55,8 +55,16 @@ export default function ServerDetailOverview({ server_id }: { server_id: string
     last_active_time_string,
   } = formatNezhaInfo(nezhaWsData.now, server)
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   return (
-    <div>
+    <div
+      className={cn({
+        "bg-card/80 p-4 rounded-[10px]": customBackgroundImage,
+      })}
+    >
       <div
         onClick={() => navigate("/")}
         className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-1 text-xl"
diff --git a/src/components/ServerOverview.tsx b/src/components/ServerOverview.tsx
index f6e5e9d..b951b75 100644
--- a/src/components/ServerOverview.tsx
+++ b/src/components/ServerOverview.tsx
@@ -37,7 +37,7 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
             setStatus("all")
           }}
           className={cn("hover:border-blue-500 cursor-pointer transition-all", {
-            "bg-card/50": customBackgroundImage,
+            "bg-card/80": customBackgroundImage,
           })}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
@@ -59,7 +59,7 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
           className={cn(
             "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
             {
-              "bg-card/50": customBackgroundImage,
+              "bg-card/80": customBackgroundImage,
             },
             {
               "ring-green-500 ring-2 border-transparent": status === "online",
@@ -87,7 +87,7 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
           className={cn(
             "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
             {
-              "bg-card/50": customBackgroundImage,
+              "bg-card/80": customBackgroundImage,
             },
             {
               "ring-red-500 ring-2 border-transparent": status === "offline",
@@ -109,7 +109,7 @@ export default function ServerOverview({ online, offline, total, up, down, upSpe
         </Card>
         <Card
           className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all", {
-            "bg-card/50": customBackgroundImage,
+            "bg-card/80": customBackgroundImage,
           })}
         >
           <CardContent className="flex h-full items-center relative px-6 py-3">
diff --git a/src/components/ServiceTrackerClient.tsx b/src/components/ServiceTrackerClient.tsx
index 44eb1d9..3fa16cd 100644
--- a/src/components/ServiceTrackerClient.tsx
+++ b/src/components/ServiceTrackerClient.tsx
@@ -26,7 +26,7 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({ days, clas
         "w-full space-y-3 bg-white px-4 py-4  rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
         className,
         {
-          "bg-card/50": customBackgroundImage,
+          "bg-card/80": customBackgroundImage,
         },
       )}
     >
diff --git a/src/components/TabSwitch.tsx b/src/components/TabSwitch.tsx
index 8308e33..7fb1a37 100644
--- a/src/components/TabSwitch.tsx
+++ b/src/components/TabSwitch.tsx
@@ -11,7 +11,7 @@ export default function TabSwitch({ tabs, currentTab, setCurrentTab }: { tabs: s
     <div className="z-50 flex flex-col items-start rounded-[50px]">
       <div
         className={cn("flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800", {
-          "bg-stone-100/50 dark:bg-stone-800/50": customBackgroundImage,
+          "bg-stone-100/80 dark:bg-stone-800/80": customBackgroundImage,
         })}
       >
         {tabs.map((tab: string) => (
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index 76c32e2..6838fc9 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -28,7 +28,7 @@ export function ModeToggle() {
           variant="outline"
           size="sm"
           className={cn("rounded-full px-[9px] bg-white dark:bg-black", {
-            "bg-white/50 dark:bg-black/50": customBackgroundImage,
+            "bg-white/80 dark:bg-black/80": customBackgroundImage,
           })}
         >
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx
index 5f1053f..02b6dd1 100644
--- a/src/pages/Server.tsx
+++ b/src/pages/Server.tsx
@@ -202,7 +202,7 @@ export default function Servers() {
                 "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
               },
               {
-                "bg-opacity-50": customBackgroundImage,
+                "bg-opacity-80": customBackgroundImage,
               },
             )}
           >
@@ -219,7 +219,7 @@ export default function Servers() {
                 "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
               },
               {
-                "bg-opacity-50": customBackgroundImage,
+                "bg-opacity-80": customBackgroundImage,
               },
             )}
           >
@@ -236,7 +236,7 @@ export default function Servers() {
                 "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
               },
               {
-                "bg-opacity-50": customBackgroundImage,
+                "bg-opacity-80": customBackgroundImage,
               },
             )}
           >
@@ -253,7 +253,7 @@ export default function Servers() {
                   "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] dark:bg-stone-700 bg-stone-200": settingsOpen,
                 },
                 {
-                  "dark:bg-stone-800/50 bg-stone-100/50 ": customBackgroundImage,
+                  "dark:bg-stone-800/80 bg-stone-100/80 ": customBackgroundImage,
                 },
               )}
             >