diff --git a/apps/dispatch/.env.example b/apps/dispatch/.env.example
index 88aa9476..4f75f0b4 100644
--- a/apps/dispatch/.env.example
+++ b/apps/dispatch/.env.example
@@ -1,6 +1,7 @@
 NEXTAUTH_SECRET=
 NEXTAUTH_COOKIE_PREFIX=
-NEXTAUTH_SECRET=
-NEXT_PUBLIC_PUBLIC_URL=
-NEXT_PUBLIC_HUB_URL=
-NEXT_PUBLIC_SERVICE_ID=
\ No newline at end of file
+NEXTAUTH_URL=http://localhost:3001
+NEXT_PUBLIC_PUBLIC_URL=http://localhost:3001
+NEXT_PUBLIC_HUB_URL=http://localhost:3000
+NEXT_PUBLIC_SERVICE_ID=1
+NEXT_PUBLIC_DISPATCH_SERVER_URL=http://localhost:3002
\ No newline at end of file
diff --git a/apps/dispatch/app/(dispatch)/_components/Connection.tsx b/apps/dispatch/app/(dispatch)/_components/Connection.tsx
index b6b97e44..58dc3856 100644
--- a/apps/dispatch/app/(dispatch)/_components/Connection.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/Connection.tsx
@@ -1,6 +1,86 @@
+"use client";
 import { useSession } from "next-auth/react";
 import { connectionStore } from "../../_store/connectionStore";
 import { useEffect } from "react";
+import { CheckCircledIcon } from "@radix-ui/react-icons";
+
+export const ConnectBtn = () => {
+	return (
+		<>
+			<button
+				className="btn btn-soft btn-info"
+				onClick={() =>
+					(
+						document.getElementById("my_modal_1") as HTMLDialogElement
+					)?.showModal()
+				}
+			>
+				Verbinden
+			</button>
+			<dialog id="my_modal_1" className="modal">
+				<div className="modal-box flex flex-col items-center justify-center">
+					<h3 className="text-lg font-bold mb-5">Als Disponent anmelden</h3>
+					<fieldset className="fieldset w-full">
+						<label className="floating-label w-full text-base">
+							<span>Logoff Zeit (UTC+1)</span>
+							<input type="time" className="input w-full" />
+						</label>
+						<p className="fieldset-label">
+							Du kannst diese Zeit später noch anpassen.
+						</p>
+					</fieldset>
+					<div className="modal-action flex justify-between w-full">
+						<form method="dialog" className="w-full flex justify-between">
+							<button className="btn btn-soft">Abbrechen</button>
+							<button className="btn btn-soft btn-info">Verbinden</button>
+						</form>
+					</div>
+				</div>
+			</dialog>
+		</>
+	);
+};
+
+export const ConnectedBtn = () => {
+	return (
+		<>
+			<button
+				className="btn btn-soft btn-success"
+				onClick={() =>
+					(
+						document.getElementById("my_modal_1") as HTMLDialogElement
+					)?.showModal()
+				}
+			>
+				Verbunden
+			</button>
+			<dialog id="my_modal_1" className="modal">
+				<div className="modal-box flex flex-col items-center justify-center">
+					<h3 className="text-lg font-bold mb-5">
+						Verbunden als <span className="text-info">&lt;LST_01&gt;</span>
+					</h3>
+					<fieldset className="fieldset w-full">
+						<label className="floating-label w-full text-base join">
+							<span>Logoff Zeit (UTC+1)</span>
+							<input type="time" className="input w-full" />
+							<button className="btn btn-soft btn-info join-item">
+								<CheckCircledIcon className="w-4 h-4" /> Save
+							</button>
+						</label>
+					</fieldset>
+					<div className="modal-action flex justify-between w-full">
+						<form method="dialog" className="w-full flex justify-between">
+							<button className="btn btn-soft">Abbrechen</button>
+							<button className="btn btn-soft btn-error">
+								Verbindung Trennen
+							</button>
+						</form>
+					</div>
+				</div>
+			</dialog>
+		</>
+	);
+};
 
 export const Connection = () => {
 	const session = useSession();
@@ -13,5 +93,5 @@ export const Connection = () => {
 		}
 	}, [uid]);
 
-	return <div>{cStore.isConnected ? "Connected" : "Not Connected"}</div>;
+	return <div>{cStore.isConnected ? <ConnectedBtn /> : <ConnectBtn />}</div>;
 };
diff --git a/apps/dispatch/app/(dispatch)/_components/Navbar.tsx b/apps/dispatch/app/(dispatch)/_components/Navbar.tsx
deleted file mode 100644
index 08907984..00000000
--- a/apps/dispatch/app/(dispatch)/_components/Navbar.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-"use client";
-import { ToggleTalkButton } from "../_components/ToggleTalkButton";
-import { ChangeRufgruppe } from "../_components/ChangeRufgruppe";
-import { Notifications } from "../_components/Notifications";
-import Link from "next/link";
-import { connectionStore } from "../../_store/connectionStore";
-import { useEffect } from "react";
-import { socket } from "../socket";
-import { useSession } from "next-auth/react";
-import { Connection } from "./Connection";
-
-export default function Navbar() {
-	return (
-		<div className="navbar bg-base-100 shadow-sm">
-			<div className="flex-1">
-				<a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
-			</div>
-			<div className="flex gap-2">
-				<ul className="menu menu-horizontal bg-base-200 rounded-box">
-					<li>
-						<ToggleTalkButton />
-					</li>
-					<li>
-						<ChangeRufgruppe />
-					</li>
-				</ul>
-			</div>
-			<div className="flex gap-2">
-				<Notifications />
-			</div>
-			<div className="flex gap-2">
-				<label className="swap swap-rotate">
-					{/* this hidden checkbox controls the state */}
-					<input type="checkbox" className="theme-controller" value="dark" />
-
-					{/* sun icon */}
-					<svg
-						className="swap-off h-10 w-10 fill-current"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-					>
-						<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-					</svg>
-
-					{/* moon icon */}
-					<svg
-						className="swap-on h-10 w-10 fill-current"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-					>
-						<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-					</svg>
-				</label>
-				<div>
-					<Connection />
-				</div>
-				<div className="dropdown dropdown-end">
-					<div tabIndex={0} role="button" className="btn btn-ghost">
-						...
-					</div>
-					<ul
-						tabIndex={0}
-						className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow"
-					>
-						<li>
-							<a className="justify-between">Profil</a>
-						</li>
-						<li>
-							<a>Einstellungen</a>
-						</li>
-						<li>
-							<Link href={"/logout"}>
-								<p>Logout</p>
-							</Link>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx b/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
new file mode 100644
index 00000000..71a96ed8
--- /dev/null
+++ b/apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { ToggleTalkButton } from "../ToggleTalkButton";
+import { ChangeRufgruppe } from "../ChangeRufgruppe";
+import { Notifications } from "../Notifications";
+import Link from "next/link";
+import { Connection } from "../Connection";
+import { ThemeSwap } from "./_components/ThemeSwap";
+import { useState } from "react";
+
+export default function Navbar() {
+	const [isDark, setIsDark] = useState(false);
+
+	const toggleTheme = () => {
+		const newTheme = !isDark;
+		setIsDark(newTheme);
+		document.documentElement.setAttribute(
+			"data-theme",
+			newTheme ? "nord" : "dark",
+		);
+	};
+
+	return (
+		<div className="navbar bg-base-100 shadow-sm">
+			<div className="flex-1">
+				<a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
+			</div>
+			<div className="flex gap-2">
+				<ul className="menu menu-horizontal bg-base-200 rounded-box">
+					<li>
+						<ToggleTalkButton />
+					</li>
+					<li>
+						<ChangeRufgruppe />
+					</li>
+				</ul>
+			</div>
+			<div className="flex gap-2">
+				<Notifications />
+			</div>
+			<div className="flex gap-6">
+				<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
+				<div className="flex items-center">
+					<Connection />
+				</div>
+				<div className="dropdown dropdown-end">
+					<div tabIndex={0} role="button" className="btn btn-ghost">
+						...
+					</div>
+					<ul
+						tabIndex={0}
+						className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow"
+					>
+						<li>
+							<a className="justify-between">Profil</a>
+						</li>
+						<li>
+							<a>Einstellungen</a>
+						</li>
+						<li>
+							<Link href={"/logout"}>
+								<p>Logout</p>
+							</Link>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/dispatch/app/(dispatch)/_components/navbar/_components/ThemeSwap.tsx b/apps/dispatch/app/(dispatch)/_components/navbar/_components/ThemeSwap.tsx
new file mode 100644
index 00000000..dec2a6fd
--- /dev/null
+++ b/apps/dispatch/app/(dispatch)/_components/navbar/_components/ThemeSwap.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+
+interface ThemeSwapProps {
+	isDark: boolean;
+	toggleTheme: () => void;
+}
+
+export const ThemeSwap: React.FC<ThemeSwapProps> = ({
+	isDark,
+	toggleTheme,
+}) => {
+	return (
+		<label className="swap swap-rotate">
+			<input
+				type="checkbox"
+				className="theme-controller"
+				checked={isDark}
+				onChange={toggleTheme}
+			/>
+			<MoonIcon className="swap-off h-5 w-5 fill-current" />
+			<SunIcon className="swap-on h-5 w-5 fill-current" />
+		</label>
+	);
+};
diff --git a/apps/dispatch/app/(dispatch)/layout.tsx b/apps/dispatch/app/(dispatch)/layout.tsx
index feae307f..b5921107 100644
--- a/apps/dispatch/app/(dispatch)/layout.tsx
+++ b/apps/dispatch/app/(dispatch)/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import Navbar from "./_components/Navbar";
+import Navbar from "./_components/navbar/Navbar";
 import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
 
diff --git a/apps/dispatch/app/globals.css b/apps/dispatch/app/globals.css
index 4c1b0c2f..dca6a6c6 100644
--- a/apps/dispatch/app/globals.css
+++ b/apps/dispatch/app/globals.css
@@ -1,2 +1,4 @@
 @import "tailwindcss";
-@plugin "daisyui";
+@plugin "daisyui" {
+	themes: dark, nord;
+}
diff --git a/apps/hub/.env.example b/apps/hub/.env.example
index fa7e22ba..b413bd3f 100644
--- a/apps/hub/.env.example
+++ b/apps/hub/.env.example
@@ -1,4 +1,4 @@
-NEXTAUTH_URL=
+NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=
 NEXT_PUBLIC_MOODLE_URL=
 DATABASE_URL=