diff --git a/src/components/NetworkChart.tsx b/src/components/NetworkChart.tsx
index 59cc3bb..4b9ebf8 100644
--- a/src/components/NetworkChart.tsx
+++ b/src/components/NetworkChart.tsx
@@ -3,7 +3,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
 import { fetchMonitor } from "@/lib/nezha-api"
-import { formatTime } from "@/lib/utils"
+import { cn, formatTime } from "@/lib/utils"
 import { formatRelativeTime } from "@/lib/utils"
 import { NezhaMonitor, ServerMonitorChart } from "@/types/nezha-api"
 import { useQuery } from "@tanstack/react-query"
@@ -93,6 +93,10 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 
   const defaultChart = "All"
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const [activeChart, setActiveChart] = React.useState(defaultChart)
   const [isPeakEnabled, setIsPeakEnabled] = React.useState(false)
 
@@ -236,7 +240,11 @@ export const NetworkChartClient = React.memo(function NetworkChart({
   }, [isPeakEnabled, activeChart, formattedData, chartData, chartDataKey, defaultChart])
 
   return (
-    <Card>
+    <Card
+      className={cn({
+        "bg-card/80": customBackgroundImage,
+      })}
+    >
       <CardHeader className="flex flex-col items-stretch space-y-0 p-0 sm:flex-row">
         <div className="flex flex-none flex-col justify-center gap-1 border-b px-6 py-4">
           <CardTitle className="flex flex-none items-center gap-0.5 text-md">{serverName}</CardTitle>
diff --git a/src/components/ServerDetailChart.tsx b/src/components/ServerDetailChart.tsx
index 4dca62a..468603a 100644
--- a/src/components/ServerDetailChart.tsx
+++ b/src/components/ServerDetailChart.tsx
@@ -2,7 +2,7 @@ import { Card, CardContent } from "@/components/ui/card"
 import { ChartConfig, ChartContainer } from "@/components/ui/chart"
 import { useWebSocketContext } from "@/hooks/use-websocket-context"
 import { formatBytes } from "@/lib/format"
-import { formatNezhaInfo, formatRelativeTime } from "@/lib/utils"
+import { cn, formatNezhaInfo, formatRelativeTime } from "@/lib/utils"
 import { NezhaServer, NezhaWebsocketResponse } from "@/types/nezha-api"
 import { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -99,6 +99,10 @@ export default function ServerDetailChart({ server_id }: { server_id: string })
 function GpuChart({ now, gpuStat, gpuName }: { now: number; gpuStat: number; gpuName?: string }) {
   const [gpuChartData, setGpuChartData] = useState([] as gpuChartData[])
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   useEffect(() => {
     if (gpuStat) {
       const timestamp = Date.now().toString()
@@ -125,7 +129,11 @@ function GpuChart({ now, gpuStat, gpuName }: { now: number; gpuStat: number; gpu
   } satisfies ChartConfig
 
   return (
-    <Card>
+    <Card
+      className={cn({
+        "bg-card/80": customBackgroundImage,
+      })}
+    >
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
@@ -173,6 +181,10 @@ function CpuChart({ now, data }: { now: number; data: NezhaServer }) {
 
   const { cpu } = formatNezhaInfo(now, data)
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   useEffect(() => {
     if (data) {
       const timestamp = Date.now().toString()
@@ -199,7 +211,11 @@ function CpuChart({ now, data }: { now: number; data: NezhaServer }) {
   } satisfies ChartConfig
 
   return (
-    <Card>
+    <Card
+      className={cn({
+        "bg-card/80": customBackgroundImage,
+      })}
+    >
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
@@ -243,6 +259,10 @@ function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation()
   const [processChartData, setProcessChartData] = useState([] as processChartData[])
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const { process } = formatNezhaInfo(now, data)
 
   useEffect(() => {
@@ -271,7 +291,11 @@ function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
   } satisfies ChartConfig
 
   return (
-    <Card>
+    <Card
+      className={cn({
+        "bg-card/80": customBackgroundImage,
+      })}
+    >
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
@@ -321,6 +345,10 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation()
   const [memChartData, setMemChartData] = useState([] as memChartData[])
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const { mem, swap } = formatNezhaInfo(now, data)
 
   useEffect(() => {
@@ -352,7 +380,11 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
   } satisfies ChartConfig
 
   return (
-    <Card>
+    <Card
+      className={cn({
+        "bg-card/80": customBackgroundImage,
+      })}
+    >
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
@@ -429,6 +461,10 @@ function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation()
   const [diskChartData, setDiskChartData] = useState([] as diskChartData[])
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const { disk } = formatNezhaInfo(now, data)
 
   useEffect(() => {
@@ -457,7 +493,11 @@ function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
   } satisfies ChartConfig
 
   return (
-    <Card>
+    <Card
+      className={cn({
+        "bg-card/80": customBackgroundImage,
+      })}
+    >
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
           <div className="flex items-center justify-between">
@@ -506,6 +546,10 @@ function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation()
   const [networkChartData, setNetworkChartData] = useState([] as networkChartData[])
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const { up, down } = formatNezhaInfo(now, data)
 
   useEffect(() => {
@@ -543,7 +587,11 @@ function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
   } satisfies ChartConfig
 
   return (
-    <Card>
+    <Card
+      className={cn({
+        "bg-card/80": customBackgroundImage,
+      })}
+    >
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
           <div className="flex items-center">
@@ -612,6 +660,10 @@ function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
 function ConnectChart({ now, data }: { now: number; data: NezhaServer }) {
   const [connectChartData, setConnectChartData] = useState([] as connectChartData[])
 
+  const customBackgroundImage =
+    // @ts-expect-error CustomBackgroundImage is a global variable
+    (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
+
   const { tcp, udp } = formatNezhaInfo(now, data)
 
   useEffect(() => {
@@ -643,7 +695,11 @@ function ConnectChart({ now, data }: { now: number; data: NezhaServer }) {
   } satisfies ChartConfig
 
   return (
-    <Card>
+    <Card
+      className={cn({
+        "bg-card/80": customBackgroundImage,
+      })}
+    >
       <CardContent className="px-6 py-3">
         <section className="flex flex-col gap-1">
           <div className="flex items-center">