diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 6592ca8..9afdf47 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -54,10 +54,12 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
       root.classList.remove(theme);
     });
     root.classList.add(theme);
-    document.documentElement.style.setProperty(
-      "--background-image",
-      `url(${background})`
-    );
+    if (background) {
+      document.documentElement.style.setProperty(
+        "--background-image",
+        `url(${background})`
+      );
+    }
   }, [theme, themes, background]);
 
   const value = {
diff --git a/src/index.tsx b/src/index.tsx
index 476b6d6..ae0594b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -33,21 +33,22 @@ export default function App() {
     console.log(container);
   };
   return (
-    <div className={!background && "bg-primary"}>
+    <div>
       {window.location.origin === "https://nebulaproxy.io" && <Meta />}
       {/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
       <Suspense fallback={<LoadSuspense />}>
-        <main className="absolute z-50 h-screen w-screen">
+        <main className="absolute z-30 h-screen w-screen">
           <Routes />
         </main>
-        <div className="-z-10 h-full w-full bg-primary">
+        <div
+          className={`z-20 h-screen w-screen ${!background && "bg-primary"}`}
+        >
           {init && particlesUrl !== "none" && (
             <Particles
               id="tsparticles"
               url={particlesUrl}
               particlesLoaded={particlesLoaded}
-              class="bg-primary"
-              zIndex={-10}
+              className="bg-primary"
             />
           )}
         </div>