diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c5a15ca..56d9ea7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import AppProvider from "@/components/AppProvider";
+import { ThemeProvider } from "@/components/ui/theme-provider";
 import ssrSettings from "@/ssrSettings.json";
 import clsx from "clsx";
 import { Metadata } from "next";
@@ -52,7 +53,14 @@ export default function RootLayout({
       />
 
       <body className={clsx(font.className, "text-primary")}>
-        <AppProvider>{children}</AppProvider>
+        <ThemeProvider
+          storageKey="ssr-theme"
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+        >
+          <AppProvider>{children}</AppProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/src/components/AppProvider.tsx b/src/components/AppProvider.tsx
index 19ab442..84b1040 100644
--- a/src/components/AppProvider.tsx
+++ b/src/components/AppProvider.tsx
@@ -5,7 +5,6 @@ import { useSettingsStore } from "@/store/settingsStore";
 import React from "react";
 import { ToastContainer } from "react-toastify";
 import { TooltipProvider } from "./ui/Tooltip";
-import { ThemeProvider } from "./ui/theme-provider";
 
 const UPDATE_INTERVAL = 1000 * 60 * 5; // 5 minutes
 
@@ -52,17 +51,15 @@ export default class AppProvider extends React.Component {
     const props: any = this.props;
 
     return (
-      <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-        <TooltipProvider>
-          <ToastContainer
-            className="z-50"
-            position="top-right"
-            theme="dark"
-            pauseOnFocusLoss={false}
-          />
-          {props.children}
-        </TooltipProvider>
-      </ThemeProvider>
+      <TooltipProvider>
+        <ToastContainer
+          className="z-50"
+          position="top-right"
+          theme="dark"
+          pauseOnFocusLoss={false}
+        />
+        {props.children}
+      </TooltipProvider>
     );
   }
 }
