diff --git a/src/components/ConnectionPanel.tsx b/src/components/ConnectionPanel.tsx
index 631d949..1898814 100644
--- a/src/components/ConnectionPanel.tsx
+++ b/src/components/ConnectionPanel.tsx
@@ -17,6 +17,7 @@ import {
 } from "lucide-react";
 import { type FormEvent, useCallback, useEffect, useState } from "react";
 import { SettingsProviders } from "@/components/SettingsProviders";
+import { ThemeToggle } from "@/components/ThemeToggle";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -463,6 +464,12 @@ function AddProjectForm({ onDone }: { onDone: () => void }) {
 function GeneralSettings() {
 	return (
 		<div className="flex flex-col gap-4">
+			<div className="flex items-center justify-between gap-3">
+				<div className="flex items-center gap-2">
+					<Label className="text-sm font-normal">Dark mode</Label>
+				</div>
+				<ThemeToggle />
+			</div>
 			<SttEndpointSetting />
 			<NotificationsToggle />
 			<div className="flex items-center justify-between gap-3 pt-3 border-t">
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index ba13aab..ce6fca2 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -1,7 +1,6 @@
 import { Minimize, Minus, Plus, Square, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { SidebarTrigger } from "@/components/ui/sidebar";
-import { ThemeToggle } from "./ThemeToggle";
 
 type WindowButtonKind = "default" | "mac";
 type MacButtonTone = "close" | "minimize" | "maximize";
@@ -106,7 +105,6 @@ export function TitleBar() {
 				className={`absolute right-0 top-0 h-full flex items-center gap-2 ${isMac ? "px-2" : "pl-2"}`}
 				style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
 			>
-				<ThemeToggle className="mr-1 text-muted-foreground hover:text-foreground" />
 				{isMac ? (
 					<div className="flex items-center gap-2">
 						<WindowButton