diff --git a/index.html b/index.html
index 33efe26..b479ec6 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,12 @@
         <!--<link rel="icon" type="image/svg+xml" href="/vite.svg" />-->
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Tauri + React + Typescript</title>
+        <style>
+            html,
+            body {
+                background-color: #121212;
+            }
+        </style>
     </head>
 
     <body>
diff --git a/package-lock.json b/package-lock.json
index 2586ccc..bb4d3bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^1.31.0",
+        "next-themes": "^0.4.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-resizable-panels": "^4.12.3",
@@ -4800,6 +4801,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.53",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.53.tgz",
diff --git a/package.json b/package.json
index df923d7..e29bc23 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.31.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-resizable-panels": "^4.12.3",
diff --git a/src/App.tsx b/src/App.tsx
index da1f891..cbb8fb0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import {
   ResizablePanelGroup,
 } from "./components/ui/resizable";
 import Sidebar from "./components/view/Sidebar";
+import { ThemeProvider } from "next-themes";
 
 export default function App() {
   const appRef = useRef<Enclave | null>(null);
@@ -27,24 +28,26 @@ export default function App() {
   }
 
   return (
-    <main className="size-screen flex">
-      {appRef.current?.accounts &&
-      appRef.current.accounts.accounts.length === 0 ? (
-        <NewProfilePage appRef={appRef} />
-      ) : (
-        <>
-          <ServerList appRef={appRef} />
-          <ResizablePanelGroup orientation="horizontal" className="h-screen">
-            <ResizablePanel defaultSize="420px">
-              <Sidebar appRef={appRef} />
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize="100%">
-              <div className="h-screen"></div>
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </>
-      )}
-    </main>
+    <ThemeProvider attribute="class" defaultTheme="system">
+      <main className="size-screen flex">
+        {appRef.current?.accounts &&
+        appRef.current.accounts.accounts.length === 0 ? (
+          <NewProfilePage appRef={appRef} />
+        ) : (
+          <>
+            <ServerList appRef={appRef} />
+            <ResizablePanelGroup orientation="horizontal" className="h-screen">
+              <ResizablePanel defaultSize="420px">
+                <Sidebar appRef={appRef} />
+              </ResizablePanel>
+              <ResizableHandle withHandle />
+              <ResizablePanel defaultSize="100%">
+                <div className="h-screen"></div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </>
+        )}
+      </main>
+    </ThemeProvider>
   );
 }
diff --git a/src/main.css b/src/main.css
index c59fed6..6b40caa 100644
--- a/src/main.css
+++ b/src/main.css
@@ -49,42 +49,6 @@
 }
 
 :root {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
-
-    --radius: 0.625rem;
-}
-
-.dark {
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
     --card: oklch(1 0 0);
@@ -116,6 +80,41 @@
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
+    --radius: 0.625rem;
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {
@@ -126,7 +125,7 @@
         @apply bg-background text-foreground;
     }
     html {
-        @apply font-sans;
+        @apply bg-background font-sans;
     }
 }