diff --git a/package.json b/package.json
index c4aab68..a304898 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@marsidev/react-turnstile": "^0.7.2",
+		"@monaco-editor/react": "^4.6.0",
 		"@next/bundle-analyzer": "15.0.1",
 		"@novnc/novnc": "^1.5.0",
 		"@paralleldrive/cuid2": "^2.2.2",
@@ -44,6 +45,7 @@
 		"drizzle-zod": "^0.5.1",
 		"input-otp": "^1.2.4",
 		"lucide-react": "^0.358.0",
+		"monaco-editor": "^0.52.0",
 		"next": "15.0.3-canary.5",
 		"next-auth": "5.0.0-beta.24",
 		"next-themes": "^0.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4c8a25..0938ab0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,9 @@ importers:
       '@marsidev/react-turnstile':
         specifier: ^0.7.2
         version: 0.7.2(react-dom@19.0.0-rc-7c8e5e7a-20241101(react@19.0.0-rc-7c8e5e7a-20241101))(react@19.0.0-rc-7c8e5e7a-20241101)
+      '@monaco-editor/react':
+        specifier: ^4.6.0
+        version: 4.6.0(monaco-editor@0.52.0)(react-dom@19.0.0-rc-7c8e5e7a-20241101(react@19.0.0-rc-7c8e5e7a-20241101))(react@19.0.0-rc-7c8e5e7a-20241101)
       '@next/bundle-analyzer':
         specifier: 15.0.1
         version: 15.0.1
@@ -102,6 +105,9 @@ importers:
       lucide-react:
         specifier: ^0.358.0
         version: 0.358.0(react@19.0.0-rc-7c8e5e7a-20241101)
+      monaco-editor:
+        specifier: ^0.52.0
+        version: 0.52.0
       next:
         specifier: 15.0.3-canary.5
         version: 15.0.3-canary.5(babel-plugin-react-compiler@19.0.0-beta-6fc168f-20241025)(react-dom@19.0.0-rc-7c8e5e7a-20241101(react@19.0.0-rc-7c8e5e7a-20241101))(react@19.0.0-rc-7c8e5e7a-20241101)
@@ -866,6 +872,18 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@monaco-editor/loader@1.4.0':
+    resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==}
+    peerDependencies:
+      monaco-editor: '>= 0.21.0 < 1'
+
+  '@monaco-editor/react@4.6.0':
+    resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   '@next/bundle-analyzer@15.0.1':
     resolution: {integrity: sha512-i/nCRBGBEkESPDpXJc+6SPLFDItnvTTJSaxiOvuNqHmQjQognRl3BANkKb3nWYy0V5rgzygxu++X349Z4dhs4Q==}
 
@@ -2202,6 +2220,9 @@ packages:
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
+  monaco-editor@0.52.0:
+    resolution: {integrity: sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==}
+
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -2590,6 +2611,9 @@ packages:
     resolution: {integrity: sha512-C0PHgX4h6lBxYx7hcXwu3QWdh4tg6tZZsTfXcdvc5caW/EMxaB4H9dWsl7qk+F7LAW762hp8VbXOX7x4xUYvEw==}
     engines: {node: '>=10.16.0'}
 
+  state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+
   streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -3280,6 +3304,18 @@ snapshots:
       react: 19.0.0-rc-7c8e5e7a-20241101
       react-dom: 19.0.0-rc-7c8e5e7a-20241101(react@19.0.0-rc-7c8e5e7a-20241101)
 
+  '@monaco-editor/loader@1.4.0(monaco-editor@0.52.0)':
+    dependencies:
+      monaco-editor: 0.52.0
+      state-local: 1.0.7
+
+  '@monaco-editor/react@4.6.0(monaco-editor@0.52.0)(react-dom@19.0.0-rc-7c8e5e7a-20241101(react@19.0.0-rc-7c8e5e7a-20241101))(react@19.0.0-rc-7c8e5e7a-20241101)':
+    dependencies:
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.0)
+      monaco-editor: 0.52.0
+      react: 19.0.0-rc-7c8e5e7a-20241101
+      react-dom: 19.0.0-rc-7c8e5e7a-20241101(react@19.0.0-rc-7c8e5e7a-20241101)
+
   '@next/bundle-analyzer@15.0.1':
     dependencies:
       webpack-bundle-analyzer: 4.10.1
@@ -4568,6 +4604,8 @@ snapshots:
 
   mkdirp-classic@0.5.3: {}
 
+  monaco-editor@0.52.0: {}
+
   mrmime@2.0.0: {}
 
   ms@2.1.2: {}
@@ -4924,6 +4962,8 @@ snapshots:
       cpu-features: 0.0.10
       nan: 2.20.0
 
+  state-local@1.0.7: {}
+
   streamsearch@1.1.0: {}
 
   string-width@4.2.3:
diff --git a/src/app/(main)/admin/config/editor.tsx b/src/app/(main)/admin/config/editor.tsx
new file mode 100644
index 0000000..92e373a
--- /dev/null
+++ b/src/app/(main)/admin/config/editor.tsx
@@ -0,0 +1,13 @@
+"use client";
+import Editor from "@monaco-editor/react";
+export default function ConfigEditor({ current }: { current: string }) {
+	return (
+		<Editor
+			defaultLanguage="json"
+			className="size-[90vh]"
+			defaultValue={current}
+			theme="vs-dark"
+			defaultPath="repo://.config/config.json"
+		/>
+	);
+}
diff --git a/src/app/(main)/admin/config/page.tsx b/src/app/(main)/admin/config/page.tsx
new file mode 100644
index 0000000..e835e2c
--- /dev/null
+++ b/src/app/(main)/admin/config/page.tsx
@@ -0,0 +1,16 @@
+import { readFile } from "node:fs";
+import ConfigEditor from "./editor";
+
+export default async function Page() {
+	const configFile = await new Promise<Buffer>((res, rej) =>
+		readFile(`${process.cwd()}/.config/config.json`, (err, data) => {
+			if (err) rej(err);
+			res(data);
+		}),
+	);
+	return (
+		<div className="flex h-full flex-col">
+			<ConfigEditor current={configFile.toString()} />
+		</div>
+	);
+}
diff --git a/src/app/(main)/admin/layout.tsx b/src/app/(main)/admin/layout.tsx
index 6b3a9a8..21c3005 100644
--- a/src/app/(main)/admin/layout.tsx
+++ b/src/app/(main)/admin/layout.tsx
@@ -26,3 +26,4 @@ export default async function AdminLayout({ children }: { children: React.ReactN
 		</div>
 	);
 }
+export const dynamic = "force-dynamic";
diff --git a/src/app/view/[slug]/page.tsx b/src/app/view/[slug]/page.tsx
index 49fa6bd..f7985e4 100644
--- a/src/app/view/[slug]/page.tsx
+++ b/src/app/view/[slug]/page.tsx
@@ -19,7 +19,7 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
-import { Card } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -32,8 +32,12 @@ import {
 	AlertCircle,
 	Camera,
 	Clipboard,
+	ClipboardCopy,
 	Download,
 	File,
+	Files,
+	HardDriveDownload,
+	HardDriveUpload,
 	Info,
 	LogOut,
 	Maximize,
@@ -43,10 +47,8 @@ import {
 	RotateCw,
 	ScreenShareOff,
 	Settings,
-	Sparkles,
 	Square,
 	TrashIcon,
-	Upload,
 } from "lucide-react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
@@ -55,12 +57,25 @@ import { use, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import useSWR from "swr";
 type ScalingValues = "remote" | "local" | "none";
-const Loading = ({ text }: { text: string }) => (
-	<Card className="flex absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 flex-col items-center justify-center gap-2 size-72">
-		<Sparkles className="size-16 animate-pulse" />
-		<h1 className="text-xl font-semibold">{text}</h1>
-	</Card>
-);
+import { Loader2 } from "lucide-react";
+
+function Loading({ text }: { text: string }) {
+	return (
+		<div className="h-40 w-96 bg-accent/50 rounded-lg border border-border/50 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 backdrop-blur-md flex items-center justify-center text-muted-foreground gap-3">
+			<Loader2 className="animate-spin" />
+			<h1 className="text-2xl font-bold">{text}</h1>
+		</div>
+	);
+}
+function ConnectionAlert({ text, error }: { text: string; error?: boolean }) {
+	const Comp = error ? AlertCircle : Info;
+	return (
+		<div className="h-40 w-96 bg-accent/50 rounded-lg border border-border/50 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 backdrop-blur-md flex items-center justify-center text-muted-foreground gap-3">
+			<Comp className={`${error && "text-destructive"}`} />
+			<h1 className={`text-2xl ${error && "font-mono"} font-semibold`}>{text}</h1>
+		</div>
+	);
+}
 const VncScreen = dynamic(() => import("@/components/vnc-screen"), {
 	loading: () => <Loading text="Loading" />,
 });
@@ -136,12 +151,16 @@ export default function View(props: { params: Promise<{ slug: string }> }) {
 	useEffect(() => {
 		const interval = setInterval(() => {
 			if (workingClipboard && document.hasFocus()) {
-				navigator.clipboard.readText().then((text) => {
-					if (text !== clipboard) {
-						setClipboard(text);
-						vncRef.current?.rfb.clipboardPasteFrom(text);
-					}
-				});
+				vncRef?.current?.rfb.focus();
+				navigator.clipboard
+					.readText()
+					.then((text) => {
+						if (text !== clipboard) {
+							setClipboard(text);
+							vncRef.current?.rfb.clipboardPasteFrom(text);
+						}
+					})
+					.catch(() => setWorkingClipboard(false));
 			}
 		}, 2000);
 		return () => clearInterval(interval);
@@ -190,235 +209,228 @@ export default function View(props: { params: Promise<{ slug: string }> }) {
 					filesMutate();
 				}}
 			>
-				<SheetContent
-					side="left"
-					className="z-50 flex flex-col overflow-y-auto overflow-x-clip bg-background/90 backdrop-blur-sm"
-				>
+				<SheetContent side="left" className="w-2/5 overflow-y-auto">
 					<SheetHeader>
-						<SheetTitle className="py-2 text-2xl">Control Panel</SheetTitle>
-						<SheetDescription className="text-muted-foreground">
-							Manage your session with these controls
-						</SheetDescription>
+						<SheetTitle className="text-2xl">Control Panel</SheetTitle>
 					</SheetHeader>
-					<div className="flex flex-col gap-4">
-						<section className="grid sm:grid-cols-2 gap-2 grid-cols-1">
-							<Button
-								className="w-[98%]"
-								onClick={() => {
-									setSidebarOpen(false);
-									vncRef.current?.rfb?.disconnect();
-									router.push("/");
-								}}
-							>
-								<ScreenShareOff className="mr-2 size-5 flex-shrink-0" />
-								Disconnect
-							</Button>
-							<Button
-								className="w-[98%]"
-								onClick={() =>
-									toast.promise(
-										async () => {
-											await manageSession(params.slug, "pause");
-											router.push("/");
-										},
-										{
-											loading: "Pausing container...",
-											success: "Session paused",
-											error: "Failed to pause container",
-										},
-									)
-								}
-							>
-								<Pause className="mr-2 size-5 flex-shrink-0" />
-								Pause Session
-							</Button>
+					<section className="grid grid-cols-2 gap-3 py-2">
+						<Button
+							className="w-full"
+							onClick={() => {
+								setSidebarOpen(false);
+								vncRef?.current?.rfb?.disconnect();
+								router.push("/");
+							}}
+						>
+							<ScreenShareOff className="mr-2 size-5 flex-shrink-0" />
+							Disconnect
+						</Button>
+						<Button
+							className="w-full"
+							onClick={() =>
+								toast.promise(
+									async () => {
+										await manageSession(params.slug, "pause");
+										router.push("/");
+									},
+									{
+										loading: "Pausing container...",
+										success: "Session paused",
+										error: "Failed to pause container",
+									},
+								)
+							}
+						>
+							<Pause className="mr-2 size-5 flex-shrink-0" />
+							Pause Session
+						</Button>
 
-							<Button
-								className="w-[98%]"
-								onClick={() =>
-									toast.promise(() => manageSession(params.slug, "restart"), {
-										loading: "Restarting container...",
-										success: "Session restarted",
-										error: "Failed to restart container",
-									})
-								}
-							>
-								<RotateCw className="mr-2 size-5 flex-shrink-0" />
-								Restart Session
-							</Button>
-							<Button
-								className="w-[98%]"
-								onClick={() =>
-									toast.promise(
-										async () => {
-											await manageSession(params.slug, "stop");
-											router.push("/");
-										},
-										{
-											loading: "Stopping container...",
-											success: "Session stopped",
-											error: "Failed to stop container",
-										},
-									)
-								}
-							>
-								<Square className="mr-2 size-5 flex-shrink-0" />
-								Stop Session
-							</Button>
-							<AlertDialog>
-								<AlertDialogTrigger asChild>
-									<Button variant="destructive" className="w-[98%]">
-										<TrashIcon className="mr-2 size-5 flex-shrink-0" />
-										Delete Session
-									</Button>
-								</AlertDialogTrigger>
+						<Button
+							className="w-full"
+							onClick={() =>
+								toast.promise(() => manageSession(params.slug, "restart"), {
+									loading: "Restarting container...",
+									success: "Session restarted",
+									error: "Failed to restart container",
+								})
+							}
+						>
+							<RotateCw className="mr-2 size-5 flex-shrink-0" />
+							Restart Session
+						</Button>
+						<Button
+							className="w-full"
+							onClick={() =>
+								toast.promise(
+									async () => {
+										await manageSession(params.slug, "stop");
+										router.push("/");
+									},
+									{
+										loading: "Stopping container...",
+										success: "Session stopped",
+										error: "Failed to stop container",
+									},
+								)
+							}
+						>
+							<Square className="mr-2 size-5 flex-shrink-0" />
+							Stop Session
+						</Button>
+						<AlertDialog>
+							<AlertDialogTrigger asChild>
+								<Button variant="destructive" className="w-full">
+									<TrashIcon className="mr-2 size-5 flex-shrink-0" />
+									Delete Session
+								</Button>
+							</AlertDialogTrigger>
 
-								<AlertDialogContent>
-									<AlertDialogHeader>
-										<AlertDialogTitle>Confirm session deletion</AlertDialogTitle>
-										<AlertDialogDescription>
-											Are you sure you want to delete this session? This action is irreversible.
-										</AlertDialogDescription>
-									</AlertDialogHeader>
-									<AlertDialogFooter>
-										<AlertDialogCancel>Cancel</AlertDialogCancel>
-										<AlertDialogAction
-											asChild
-											onClick={() => {
-												vncRef.current?.rfb?.disconnect();
-												toast.promise(
-													async () => {
-														await deleteSession(params.slug);
-														router.push("/");
-													},
-													{
-														loading: "Deleting session...",
-														success: "Session deleted",
-														error: "Failed to delete session",
-													},
-												);
-											}}
-										>
-											<Button variant="destructive">Delete Session</Button>
-										</AlertDialogAction>
-									</AlertDialogFooter>
-								</AlertDialogContent>
-							</AlertDialog>
-							<Button className="w-[98%]" variant="secondary" asChild>
-								<Link href="/auth/logout">
-									<LogOut className="mr-2 size-5 flex-shrink-0" />
-									Log Out
-								</Link>
-							</Button>
-						</section>
-						<Accordion type="single" collapsible className="w-full">
-							<AccordionItem value="clipboard">
-								<AccordionTrigger>
-									<div className="p-2 rounded">
-										<Clipboard className="size-5" />
-									</div>
-									<span className="text-lg">Clipboard</span>
-								</AccordionTrigger>
-								<AccordionContent className="flex flex-col gap-4">
-									<Textarea
-										className="h-48 w-full"
-										tabIndex={-20}
-										spellCheck={false}
-										autoCorrect="off"
-										autoCapitalize="off"
-										value={clipboard}
-										placeholder="Paste here to send to remote machine"
-										onChange={(e) => {
-											if (vncRef.current?.rfb) {
-												setClipboard(e.target.value);
-												vncRef.current.clipboardPaste(e.target.value);
+							<AlertDialogContent>
+								<AlertDialogHeader>
+									<AlertDialogTitle>Confirm session deletion</AlertDialogTitle>
+									<AlertDialogDescription>
+										Are you sure you want to delete this session? This action is irreversible.
+									</AlertDialogDescription>
+								</AlertDialogHeader>
+								<AlertDialogFooter>
+									<AlertDialogCancel>Cancel</AlertDialogCancel>
+									<AlertDialogAction
+										asChild
+										onClick={() => {
+											vncRef.current?.rfb?.disconnect();
+											toast.promise(
+												async () => {
+													await deleteSession(params.slug);
+													router.push("/");
+												},
+												{
+													loading: "Deleting session...",
+													success: "Session deleted",
+													error: "Failed to delete session",
+												},
+											);
+										}}
+									>
+										<Button variant="destructive">Delete Session</Button>
+									</AlertDialogAction>
+								</AlertDialogFooter>
+							</AlertDialogContent>
+						</AlertDialog>
+						<Button className="w-[98%]" variant="secondary" asChild>
+							<Link href="/auth/logout">
+								<LogOut className="mr-2 size-5 flex-shrink-0" />
+								Log Out
+							</Link>
+						</Button>
+					</section>
+					<Accordion type="single" defaultValue="clipboard" className="w-full">
+						<AccordionItem value="clipboard">
+							<AccordionTrigger>
+								<div className="flex items-center gap-4">
+									<Clipboard className="h-9 w-9 rounded-md bg-accent p-1.5" /> Clipboard
+								</div>
+							</AccordionTrigger>
+							<AccordionContent className="space-y-4">
+								<Textarea
+									className="h-48 w-full !ring-0 resize-none"
+									tabIndex={-20}
+									spellCheck={false}
+									autoCorrect="off"
+									autoCapitalize="off"
+									value={clipboard}
+									disabled={workingClipboard}
+									placeholder="Paste here to send to remote machine"
+									onChange={(e) => {
+										if (vncRef.current?.rfb) {
+											setClipboard(e.target.value);
+											vncRef.current.clipboardPaste(e.target.value);
+										}
+									}}
+								/>
+								{!workingClipboard ? (
+									<Button
+										type="button"
+										className="w-full"
+										onClick={async () => {
+											const text = await navigator.clipboard.readText().catch(() => {
+												setWorkingClipboard(false);
+												toast.error("Failed to read clipboard, did you deny clipboard permissions?");
+											});
+											if (text) {
+												setClipboard(text);
+												vncRef.current?.clipboardPaste(text);
+												setWorkingClipboard(true);
 											}
 										}}
-									/>
-									{!workingClipboard ? (
-										<Button
-											type="button"
-											className="text-start place-self-start"
-											onClick={async () => {
-												const text = await navigator.clipboard.readText().catch(() => {
-													setWorkingClipboard(false);
-													toast.error("Failed to read clipboard, did you deny clipboard permissions?");
-												});
-												if (text) {
-													setClipboard(text);
-													vncRef.current?.clipboardPaste(text);
-													setWorkingClipboard(true);
-												}
-											}}
-										>
-											Sync clipboard
-										</Button>
-									) : null}
-								</AccordionContent>
-							</AccordionItem>
-							<AccordionItem value="filesDownload">
-								<AccordionTrigger>
-									<div className="p-2 rounded">
-										<Download className="size-5" />
-									</div>
-									<h2 className="text-lg">Download Files</h2>
-								</AccordionTrigger>
-								<AccordionContent className="flex flex-col gap-2">
-									<p className="text-muted-foreground">Files in the session's Downloads folder will appear here.</p>
-									{!filesError ? (
-										!filesLoading ? (
-											filesList && filesList?.length > 0 ? (
-												filesList.map((file) => (
-													<Card key={file} className="flex justify-between items-center p-4 h-16 w-full gap-2">
-														<File className="size-5 flex-shrink-0" />
-														<span className="text-sm truncate overflow-x-scroll">{file}</span>
-														<Button size="icon" className="flex-shrink-0" asChild>
-															<Link
-																download={file}
-																href={{
-																	pathname: `/api/session/${params.slug}/files`,
-																	query: { name: file },
-																}}
-															>
-																<Download />
-															</Link>
-														</Button>
-													</Card>
-												))
+									>
+										<ClipboardCopy className="mr-2 h-5 w-5" /> Request Clipboard
+									</Button>
+								) : null}
+							</AccordionContent>
+						</AccordionItem>
+						<AccordionItem value="files">
+							<AccordionTrigger>
+								<div className="flex items-center gap-4">
+									<Files className="h-9 w-9 rounded-md bg-accent p-1.5" /> Files
+								</div>
+							</AccordionTrigger>
+							<AccordionContent>
+								<div className="space-y-4">
+									<Card className="border-dashed border-2">
+										<CardHeader>
+											<CardTitle className="text-lg">Downloads</CardTitle>
+										</CardHeader>
+										<CardContent>
+											{!filesError ? (
+												!filesLoading ? (
+													filesList && filesList?.length > 0 ? (
+														filesList.map((file) => (
+															<Card key={file} className="flex justify-between items-center p-4 h-16 w-full gap-2">
+																<File className="size-5 flex-shrink-0" />
+																<span className="text-sm truncate overflow-x-scroll">{file}</span>
+																<Button size="icon" className="flex-shrink-0" asChild>
+																	<Link
+																		download={file}
+																		href={{
+																			pathname: `/api/session/${params.slug}/files`,
+																			query: { name: file },
+																		}}
+																	>
+																		<HardDriveDownload />
+																	</Link>
+																</Button>
+															</Card>
+														))
+													) : (
+														<p className="text-muted-foreground">
+															None detected - add files to the Downloads folder to download them here
+														</p>
+													)
+												) : (
+													<Skeleton className="h-16 w-full" />
+												)
 											) : (
-												<Alert>
-													<Info className="size-4" />
-													<AlertTitle>No files found</AlertTitle>
-													<AlertDescription>Is your Downloads folder empty?</AlertDescription>
+												<Alert variant="destructive">
+													<AlertCircle className="size-4" />
+													<AlertTitle>Error</AlertTitle>
+													<AlertDescription>
+														Failed to fetch files:
+														<br />
+														<code className="font-mono font-semibold">{filesError.message}</code>
+													</AlertDescription>
 												</Alert>
-											)
-										) : (
-											<Skeleton className="h-16 w-full" />
-										)
-									) : (
-										<Alert variant="destructive">
-											<AlertCircle className="size-4" />
-											<AlertTitle>Error</AlertTitle>
-											<AlertDescription>
-												Failed to fetch files:
-												<br />
-												<code className="font-mono font-semibold">{filesError.message}</code>
-											</AlertDescription>
-										</Alert>
-									)}
-								</AccordionContent>
-							</AccordionItem>
-							<AccordionItem value="filesUpload">
-								<AccordionTrigger>
-									<div className="p-2 rounded">
-										<Upload className="size-5" />
-									</div>
-									<h2 className="text-lg">Upload Files</h2>
-								</AccordionTrigger>
-								<AccordionContent className="flex flex-col gap-2">
-									<p className="text-muted-foreground">Files will be in the session's Uploads folder.</p>
-									<Input
+											)}
+										</CardContent>
+									</Card>
+									<Button className="w-full" asChild>
+										<Label htmlFor="file-input">
+											<HardDriveUpload className="mr-2 h-5 w-5" /> Upload File
+										</Label>
+									</Button>
+									<input
 										type="file"
+										className="hidden"
+										id="file-input"
 										onChange={async (e) => {
 											const [file] = e.target.files || [];
 											const buffer = await file.arrayBuffer();
@@ -436,63 +448,62 @@ export default function View(props: { params: Promise<{ slug: string }> }) {
 											);
 										}}
 									/>
-								</AccordionContent>
-							</AccordionItem>
-							<AccordionItem value="vncOptions">
-								<AccordionTrigger>
-									<div className="p-2 rounded">
-										<MonitorUp className="size-5" />
-									</div>
-									<h2 className="text-lg">VNC Options</h2>
-								</AccordionTrigger>
-								<AccordionContent className="flex flex-col gap-4">
-									<div className="flex flex-col items-start gap-2">
-										<Label htmlFor="viewonly">View Only</Label>
-										<Switch id="viewonly" checked={viewOnly} onCheckedChange={setViewOnly} />
-									</div>
-									<div className="flex flex-col items-start gap-2">
-										<Label htmlFor="clipToWindow">Clip to Window</Label>
-										<Switch id="clipToWindow" checked={clipViewport} onCheckedChange={setClipViewport} />
-									</div>
-									<div className="flex flex-col items-start gap-2">
-										<Label htmlFor="quality">Quality ({qualityLevel})</Label>
-										<Slider
-											id="quality"
-											value={[qualityLevel]}
-											onValueChange={([v]) => setQualityLevel(v)}
-											min={0}
-											max={9}
-											className="my-1"
-										/>
-									</div>
-									<div className="flex flex-col items-start gap-2">
-										<Label htmlFor="compression">Compression ({compressionLevel})</Label>
-										<Slider
-											id="compression"
-											value={[compressionLevel]}
-											onValueChange={([v]) => setCompressionLevel(v)}
-											min={0}
-											max={9}
-											className="my-1"
-										/>
-									</div>
-									<div className="flex flex-col items-start gap-2">
-										<Label htmlFor="scale">Scaling</Label>
-										<Select value={scaling} onValueChange={setScaling as (v: ScalingValues) => void}>
-											<SelectTrigger id="scale">
-												<SelectValue placeholder={scaling} />
-											</SelectTrigger>
-											<SelectContent>
-												<SelectItem value="remote">Remote Resizing</SelectItem>
-												<SelectItem value="local">Local Scaling</SelectItem>
-												<SelectItem value="none">None</SelectItem>
-											</SelectContent>
-										</Select>
-									</div>
-								</AccordionContent>
-							</AccordionItem>
-						</Accordion>
-					</div>
+								</div>
+							</AccordionContent>
+						</AccordionItem>
+						<AccordionItem value="vnc">
+							<AccordionTrigger>
+								<div className="flex items-center gap-4">
+									<MonitorUp className="size-9 rounded-md bg-accent p-1.5" /> VNC Options
+								</div>
+							</AccordionTrigger>
+							<AccordionContent className="flex flex-col gap-4">
+								<div className="flex flex-col items-start gap-2">
+									<Label htmlFor="viewonly">View Only</Label>
+									<Switch id="viewonly" checked={viewOnly} onCheckedChange={setViewOnly} />
+								</div>
+								<div className="flex flex-col items-start gap-2">
+									<Label htmlFor="clipToWindow">Clip to Window</Label>
+									<Switch id="clipToWindow" checked={clipViewport} onCheckedChange={setClipViewport} />
+								</div>
+								<div className="flex flex-col items-start gap-2">
+									<Label htmlFor="quality">Quality ({qualityLevel})</Label>
+									<Slider
+										id="quality"
+										value={[qualityLevel]}
+										onValueChange={([v]) => setQualityLevel(v)}
+										min={0}
+										max={9}
+										className="my-1"
+									/>
+								</div>
+								<div className="flex flex-col items-start gap-2">
+									<Label htmlFor="compression">Compression ({compressionLevel})</Label>
+									<Slider
+										id="compression"
+										value={[compressionLevel]}
+										onValueChange={([v]) => setCompressionLevel(v)}
+										min={0}
+										max={9}
+										className="my-1"
+									/>
+								</div>
+								<div className="flex flex-col items-start gap-2">
+									<Label htmlFor="scale">Scaling</Label>
+									<Select value={scaling} onValueChange={setScaling as (v: ScalingValues) => void}>
+										<SelectTrigger id="scale">
+											<SelectValue placeholder={scaling} />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectItem value="remote">Remote Resizing</SelectItem>
+											<SelectItem value="local">Local Scaling</SelectItem>
+											<SelectItem value="none">None</SelectItem>
+										</SelectContent>
+									</Select>
+								</div>
+							</AccordionContent>
+						</AccordionItem>
+					</Accordion>
 				</SheetContent>
 			</Sheet>
 			{!sessionError ? (
@@ -528,27 +539,13 @@ export default function View(props: { params: Promise<{ slug: string }> }) {
 							className="absolute z-20 h-screen w-screen overflow-clip"
 						/>
 					) : (
-						<Alert className="w-auto">
-							<Info className="size-4" />
-							<AlertTitle>Session not found, or loading</AlertTitle>
-							<AlertDescription>
-								Container might be restarting. If this screen doesn't go away, the session might not exist.
-							</AlertDescription>
-						</Alert>
+						<ConnectionAlert text="Container not running" />
 					)
 				) : (
 					<Loading text="Authenticating" />
 				)
 			) : (
-				<Alert variant="destructive" className="w-auto">
-					<AlertCircle className="size-4" />
-					<AlertTitle>Error</AlertTitle>
-					<AlertDescription>
-						Failed to get session data
-						<br />
-						<code className="font-mono font-semibold">{sessionError.message}</code>
-					</AlertDescription>
-				</Alert>
+				<ConnectionAlert error text={sessionError?.message} />
 			)}
 		</div>
 	);
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index 6cd8f58..7973f2a 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -2,7 +2,7 @@
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import { Container, Layers, LayoutDashboard, Users } from "lucide-react";
+import { Cog, Container, Layers, LayoutDashboard, Users } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import type { Route } from "next";
 import Link from "next/link";
@@ -19,6 +19,7 @@ export function AdminSidebar() {
 		{ href: "/admin/users", label: "Users", Icon: Users },
 		{ href: "/admin/images", label: "Images", Icon: Layers },
 		{ href: "/admin/sessions", label: "Sessions", Icon: Container },
+		{ href: "/admin/config", label: "Config Viewer", Icon: Cog },
 	];
 	return (
 		<nav className="grid gap-x-4 text-sm text-muted-foreground">