diff --git a/apps/client/app/app.css b/apps/client/app/app.css
index 3901f0d..c12eee5 100644
--- a/apps/client/app/app.css
+++ b/apps/client/app/app.css
@@ -5,171 +5,171 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --breakpoint-xs: 32rem;
-  --font-sans:
-    "Google Sans Code", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--breakpoint-xs: 32rem;
+	--font-sans:
+		"Google Sans Code", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+		"Noto Color Emoji";
 }
 
 html,
 body {
-  overflow-x: hidden;
-  width: 100%;
-  position: relative;
-  overscroll-behavior: none;
-  scrollbar-width: thin;
+	overflow-x: hidden;
+	width: 100%;
+	position: relative;
+	overscroll-behavior: none;
+	scrollbar-width: thin;
 }
 
 body {
-  @apply bg-[#131313];
-  min-height: 100dvh;
+	@apply bg-[#131313];
+	min-height: 100dvh;
 }
 
 .main-content {
-  scrollbar-width: thin;
-  scrollbar-gutter: stable;
+	scrollbar-width: thin;
+	scrollbar-gutter: stable;
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-card-header: var(--card-header);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-strong-accent: var(--strong-accent);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-card-header: var(--card-header);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-strong-accent: var(--strong-accent);
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --card-header: oklch(0.922 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --strong-accent: #ff543a;
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--card-header: oklch(0.922 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--strong-accent: #ff543a;
 }
 
 .dark {
-  color-scheme: dark;
+	color-scheme: dark;
 
-  --background: #131313;
-  --foreground: oklch(0.985 0 0);
-  --card: #131313;
-  --card-header: #1b1b1b;
-  /* --card: oklch(0.205 0 0); ORIGINAL */
-  --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.1448 0 0);
-  /* --secondary: oklch(0.269 0 0); ORIGINAL */
-  --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: #ff543a;
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --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);
-  --strong-accent: #ff543a;
+	--background: #131313;
+	--foreground: oklch(0.985 0 0);
+	--card: #131313;
+	--card-header: #1b1b1b;
+	/* --card: oklch(0.205 0 0); ORIGINAL */
+	--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.1448 0 0);
+	/* --secondary: oklch(0.269 0 0); ORIGINAL */
+	--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: #ff543a;
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--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);
+	--strong-accent: #ff543a;
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
 }
 
 @layer base {
-  :root {
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
-  }
+	:root {
+		--chart-1: oklch(0.646 0.222 41.116);
+		--chart-2: oklch(0.6 0.118 184.704);
+		--chart-3: oklch(0.398 0.07 227.392);
+		--chart-4: oklch(0.828 0.189 84.429);
+		--chart-5: oklch(0.769 0.188 70.08);
+	}
 
-  .dark {
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-  }
+	.dark {
+		--chart-1: oklch(0.488 0.243 264.376);
+		--chart-2: oklch(0.696 0.17 162.48);
+		--chart-3: oklch(0.769 0.188 70.08);
+		--chart-4: oklch(0.627 0.265 303.9);
+		--chart-5: oklch(0.645 0.246 16.439);
+	}
 }
diff --git a/apps/client/app/components/auth-layout.tsx b/apps/client/app/components/auth-layout.tsx
index eb8b668..2435a41 100644
--- a/apps/client/app/components/auth-layout.tsx
+++ b/apps/client/app/components/auth-layout.tsx
@@ -2,33 +2,33 @@ import { Mountain } from "lucide-react";
 import type { ReactNode } from "react";
 
 type AuthLayoutProps = {
-  title: string;
-  description: string;
-  children: ReactNode;
+	title: string;
+	description: string;
+	children: ReactNode;
 };
 
 export function AuthLayout({ title, description, children }: AuthLayoutProps) {
-  return (
-    <div className="flex mt-[25%] lg:mt-0 lg:min-h-screen">
-      <div className="flex flex-1 items-center justify-center bg-background p-8">
-        <div className="w-full max-w-md space-y-8">
-          <div className="flex items-center gap-3">
-            <Mountain className="size-5 text-strong-accent" />
-            <span className="text-lg font-semibold">Ironmount</span>
-          </div>
+	return (
+		<div className="flex mt-[25%] lg:mt-0 lg:min-h-screen">
+			<div className="flex flex-1 items-center justify-center bg-background p-8">
+				<div className="w-full max-w-md space-y-8">
+					<div className="flex items-center gap-3">
+						<Mountain className="size-5 text-strong-accent" />
+						<span className="text-lg font-semibold">Ironmount</span>
+					</div>
 
-          <div className="space-y-2">
-            <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
-            <p className="text-sm text-muted-foreground">{description}</p>
-          </div>
+					<div className="space-y-2">
+						<h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+						<p className="text-sm text-muted-foreground">{description}</p>
+					</div>
 
-          {children}
-        </div>
-      </div>
-      <div
-        className="hidden lg:block lg:flex-1 dither-lg bg-cover bg-center"
-        style={{ backgroundImage: "url(/images/background.jpg)" }}
-      />
-    </div>
-  );
+					{children}
+				</div>
+			</div>
+			<div
+				className="hidden lg:block lg:flex-1 dither-lg bg-cover bg-center"
+				style={{ backgroundImage: "url(/images/background.jpg)" }}
+			/>
+		</div>
+	);
 }
diff --git a/apps/client/app/components/layout.tsx b/apps/client/app/components/layout.tsx
index ca5cc29..70caebb 100644
--- a/apps/client/app/components/layout.tsx
+++ b/apps/client/app/components/layout.tsx
@@ -15,84 +15,73 @@ import { AppSidebar } from "./app-sidebar";
 export const clientMiddleware = [authMiddleware];
 
 export async function clientLoader({ context }: Route.LoaderArgs) {
-  const ctx = context.get(appContext);
+	const ctx = context.get(appContext);
 
-  if (ctx.user && !ctx.user.hasDownloadedResticPassword) {
-    throw redirect("/download-recovery-key");
-  }
+	if (ctx.user && !ctx.user.hasDownloadedResticPassword) {
+		throw redirect("/download-recovery-key");
+	}
 
-  return ctx;
+	return ctx;
 }
 
 export default function Layout({ loaderData }: Route.ComponentProps) {
-  const navigate = useNavigate();
+	const navigate = useNavigate();
 
-  const logout = useMutation({
-    ...logoutMutation(),
-    onSuccess: async () => {
-      navigate("/login", { replace: true });
-    },
-    onError: (error) => {
-      console.error(error);
-      toast.error("Logout failed", { description: error.message });
-    },
-  });
+	const logout = useMutation({
+		...logoutMutation(),
+		onSuccess: async () => {
+			navigate("/login", { replace: true });
+		},
+		onError: (error) => {
+			console.error(error);
+			toast.error("Logout failed", { description: error.message });
+		},
+	});
 
-  return (
-    <SidebarProvider defaultOpen={true}>
-      <AppSidebar />
-      <div className="w-full relative flex flex-col h-screen overflow-hidden">
-        <header className="z-50 bg-card-header border-b border-border/50 flex-shrink-0">
-          <div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container">
-            <div className="flex items-center gap-4">
-              <SidebarTrigger />
-              <AppBreadcrumb />
-            </div>
-            {loaderData.user && (
-              <div className="flex items-center gap-4">
-                <span className="text-sm text-muted-foreground hidden md:inline-flex">
-                  Welcome,&nbsp;
-                  <span className="text-strong-accent">
-                    {loaderData.user?.username}
-                  </span>
-                </span>
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={() => logout.mutate({})}
-                  loading={logout.isPending}
-                >
-                  Logout
-                </Button>
-                <Button
-                  variant="default"
-                  size="sm"
-                  className="relative overflow-hidden hidden lg:inline-flex"
-                >
-                  <a
-                    href="https://github.com/nicotsx/ironmount/issues/new"
-                    target="_blank"
-                    rel="noreferrer"
-                    className="flex items-center gap-2"
-                  >
-                    <span className="flex items-center gap-2">
-                      <LifeBuoy />
-                      <span>Report an issue</span>
-                    </span>
-                  </a>
-                </Button>
-              </div>
-            )}
-          </div>
-        </header>
-        <div className="main-content flex-1 overflow-y-auto">
-          <GridBackground>
-            <main className="flex flex-col p-2 pb-6 pt-2 sm:p-8 sm:pt-6 mx-auto">
-              <Outlet />
-            </main>
-          </GridBackground>
-        </div>
-      </div>
-    </SidebarProvider>
-  );
+	return (
+		<SidebarProvider defaultOpen={true}>
+			<AppSidebar />
+			<div className="w-full relative flex flex-col h-screen overflow-hidden">
+				<header className="z-50 bg-card-header border-b border-border/50 flex-shrink-0">
+					<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container">
+						<div className="flex items-center gap-4">
+							<SidebarTrigger />
+							<AppBreadcrumb />
+						</div>
+						{loaderData.user && (
+							<div className="flex items-center gap-4">
+								<span className="text-sm text-muted-foreground hidden md:inline-flex">
+									Welcome,&nbsp;
+									<span className="text-strong-accent">{loaderData.user?.username}</span>
+								</span>
+								<Button variant="default" size="sm" onClick={() => logout.mutate({})} loading={logout.isPending}>
+									Logout
+								</Button>
+								<Button variant="default" size="sm" className="relative overflow-hidden hidden lg:inline-flex">
+									<a
+										href="https://github.com/nicotsx/ironmount/issues/new"
+										target="_blank"
+										rel="noreferrer"
+										className="flex items-center gap-2"
+									>
+										<span className="flex items-center gap-2">
+											<LifeBuoy />
+											<span>Report an issue</span>
+										</span>
+									</a>
+								</Button>
+							</div>
+						)}
+					</div>
+				</header>
+				<div className="main-content flex-1 overflow-y-auto">
+					<GridBackground>
+						<main className="flex flex-col p-2 pb-6 pt-2 sm:p-8 sm:pt-6 mx-auto">
+							<Outlet />
+						</main>
+					</GridBackground>
+				</div>
+			</div>
+		</SidebarProvider>
+	);
 }
diff --git a/apps/client/app/components/onoff.tsx b/apps/client/app/components/onoff.tsx
index d4100e2..a5b690d 100644
--- a/apps/client/app/components/onoff.tsx
+++ b/apps/client/app/components/onoff.tsx
@@ -2,36 +2,30 @@ import { cn } from "~/lib/utils";
 import { Switch } from "./ui/switch";
 
 type Props = {
-  isOn: boolean;
-  toggle: (v: boolean) => void;
-  enabledLabel: string;
-  disabledLabel: string;
-  disabled?: boolean;
+	isOn: boolean;
+	toggle: (v: boolean) => void;
+	enabledLabel: string;
+	disabledLabel: string;
+	disabled?: boolean;
 };
 
-export const OnOff = ({
-  isOn,
-  toggle,
-  enabledLabel,
-  disabledLabel,
-  disabled,
-}: Props) => {
-  return (
-    <div
-      className={cn(
-        "flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors",
-        isOn
-          ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200"
-          : "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10"
-      )}
-    >
-      <span>{isOn ? enabledLabel : disabledLabel}</span>
-      <Switch
-        disabled={disabled}
-        checked={isOn}
-        onCheckedChange={toggle}
-        aria-label={isOn ? `Toggle ${enabledLabel}` : `Toggle ${disabledLabel}`}
-      />
-    </div>
-  );
+export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel, disabled }: Props) => {
+	return (
+		<div
+			className={cn(
+				"flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors",
+				isOn
+					? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200"
+					: "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10",
+			)}
+		>
+			<span>{isOn ? enabledLabel : disabledLabel}</span>
+			<Switch
+				disabled={disabled}
+				checked={isOn}
+				onCheckedChange={toggle}
+				aria-label={isOn ? `Toggle ${enabledLabel}` : `Toggle ${disabledLabel}`}
+			/>
+		</div>
+	);
 };
diff --git a/apps/client/app/components/status-dot.tsx b/apps/client/app/components/status-dot.tsx
index 37c0439..9206a33 100644
--- a/apps/client/app/components/status-dot.tsx
+++ b/apps/client/app/components/status-dot.tsx
@@ -3,53 +3,50 @@ import { cn } from "~/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 export const StatusDot = ({ status }: { status: VolumeStatus }) => {
-  const statusMapping = {
-    mounted: {
-      color: "bg-green-500",
-      colorLight: "bg-emerald-400",
-      animated: true,
-    },
-    unmounted: {
-      color: "bg-gray-500",
-      colorLight: "bg-gray-400",
-      animated: false,
-    },
-    error: {
-      color: "bg-red-500",
-      colorLight: "bg-amber-700",
-      animated: true,
-    },
-    unknown: {
-      color: "bg-yellow-500",
-      colorLight: "bg-yellow-400",
-      animated: true,
-    },
-  }[status];
+	const statusMapping = {
+		mounted: {
+			color: "bg-green-500",
+			colorLight: "bg-emerald-400",
+			animated: true,
+		},
+		unmounted: {
+			color: "bg-gray-500",
+			colorLight: "bg-gray-400",
+			animated: false,
+		},
+		error: {
+			color: "bg-red-500",
+			colorLight: "bg-amber-700",
+			animated: true,
+		},
+		unknown: {
+			color: "bg-yellow-500",
+			colorLight: "bg-yellow-400",
+			animated: true,
+		},
+	}[status];
 
-  return (
-    <Tooltip>
-      <TooltipTrigger>
-        <span className="relative flex size-3 mx-auto">
-          {statusMapping.animated && (
-            <span
-              className={cn(
-                "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
-                `${statusMapping.colorLight}`
-              )}
-            />
-          )}
-          <span
-            aria-label={status}
-            className={cn(
-              "relative inline-flex size-3 rounded-full",
-              `${statusMapping.color}`
-            )}
-          />
-        </span>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p className="capitalize">{status}</p>
-      </TooltipContent>
-    </Tooltip>
-  );
+	return (
+		<Tooltip>
+			<TooltipTrigger>
+				<span className="relative flex size-3 mx-auto">
+					{statusMapping.animated && (
+						<span
+							className={cn(
+								"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+								`${statusMapping.colorLight}`,
+							)}
+						/>
+					)}
+					<span
+						aria-label={status}
+						className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)}
+					/>
+				</span>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p className="capitalize">{status}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
 };
diff --git a/apps/client/app/modules/repositories/routes/repository-details.tsx b/apps/client/app/modules/repositories/routes/repository-details.tsx
index e00ab92..dc15d17 100644
--- a/apps/client/app/modules/repositories/routes/repository-details.tsx
+++ b/apps/client/app/modules/repositories/routes/repository-details.tsx
@@ -3,19 +3,19 @@ import { useNavigate, useParams, useSearchParams } from "react-router";
 import { toast } from "sonner";
 import { useState, useEffect } from "react";
 import {
-  deleteRepositoryMutation,
-  getRepositoryOptions,
-  listSnapshotsOptions,
+	deleteRepositoryMutation,
+	getRepositoryOptions,
+	listSnapshotsOptions,
 } from "~/api-client/@tanstack/react-query.gen";
 import { Button } from "~/components/ui/button";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogHeader,
-  AlertDialogTitle,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogHeader,
+	AlertDialogTitle,
 } from "~/components/ui/alert-dialog";
 import { parseError } from "~/lib/errors";
 import { getRepository } from "~/api-client/sdk.gen";
@@ -26,137 +26,122 @@ import { RepositoryInfoTabContent } from "../tabs/info";
 import { RepositorySnapshotsTabContent } from "../tabs/snapshots";
 
 export function meta({ params }: Route.MetaArgs) {
-  return [
-    { title: params.name },
-    {
-      name: "description",
-      content: "View repository configuration, status, and snapshots.",
-    },
-  ];
+	return [
+		{ title: params.name },
+		{
+			name: "description",
+			content: "View repository configuration, status, and snapshots.",
+		},
+	];
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-  const repository = await getRepository({ path: { name: params.name ?? "" } });
-  if (repository.data) return repository.data;
+	const repository = await getRepository({ path: { name: params.name ?? "" } });
+	if (repository.data) return repository.data;
 };
 
-export default function RepositoryDetailsPage({
-  loaderData,
-}: Route.ComponentProps) {
-  const { name } = useParams<{ name: string }>();
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+export default function RepositoryDetailsPage({ loaderData }: Route.ComponentProps) {
+	const { name } = useParams<{ name: string }>();
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const activeTab = searchParams.get("tab") || "info";
+	const [searchParams, setSearchParams] = useSearchParams();
+	const activeTab = searchParams.get("tab") || "info";
 
-  const { data } = useQuery({
-    ...getRepositoryOptions({ path: { name: name ?? "" } }),
-    initialData: loaderData,
-    refetchInterval: 10000,
-    refetchOnWindowFocus: true,
-  });
+	const { data } = useQuery({
+		...getRepositoryOptions({ path: { name: name ?? "" } }),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
 
-  useEffect(() => {
-    if (name) {
-      queryClient.prefetchQuery(listSnapshotsOptions({ path: { name } }));
-    }
-  }, [name, queryClient]);
+	useEffect(() => {
+		if (name) {
+			queryClient.prefetchQuery(listSnapshotsOptions({ path: { name } }));
+		}
+	}, [name, queryClient]);
 
-  const deleteRepo = useMutation({
-    ...deleteRepositoryMutation(),
-    onSuccess: () => {
-      toast.success("Repository deleted successfully");
-      navigate("/repositories");
-    },
-    onError: (error) => {
-      toast.error("Failed to delete repository", {
-        description: parseError(error)?.message,
-      });
-    },
-  });
+	const deleteRepo = useMutation({
+		...deleteRepositoryMutation(),
+		onSuccess: () => {
+			toast.success("Repository deleted successfully");
+			navigate("/repositories");
+		},
+		onError: (error) => {
+			toast.error("Failed to delete repository", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
 
-  const handleConfirmDelete = () => {
-    setShowDeleteConfirm(false);
-    deleteRepo.mutate({ path: { name: name ?? "" } });
-  };
+	const handleConfirmDelete = () => {
+		setShowDeleteConfirm(false);
+		deleteRepo.mutate({ path: { name: name ?? "" } });
+	};
 
-  if (!name) {
-    return <div>Repository not found</div>;
-  }
+	if (!name) {
+		return <div>Repository not found</div>;
+	}
 
-  if (!data) {
-    return <div>Loading...</div>;
-  }
+	if (!data) {
+		return <div>Loading...</div>;
+	}
 
-  return (
-    <>
-      <div className="flex items-center justify-between mb-4">
-        <div className="text-sm font-semibold text-muted-foreground flex items-center gap-2">
-          <span
-            className={cn(
-              "inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500",
-              {
-                "bg-green-500/10 text-green-500": data.status === "healthy",
-                "bg-red-500/10 text-red-500": data.status === "error",
-              }
-            )}
-          >
-            {data.status || "unknown"}
-          </span>
-          <span className="text-xs bg-primary/10 rounded-md px-2 py-1">
-            {data.type}
-          </span>
-        </div>
-        <div className="flex gap-4">
-          <Button
-            variant="destructive"
-            onClick={() => setShowDeleteConfirm(true)}
-            disabled={deleteRepo.isPending}
-          >
-            Delete
-          </Button>
-        </div>
-      </div>
+	return (
+		<>
+			<div className="flex items-center justify-between mb-4">
+				<div className="text-sm font-semibold text-muted-foreground flex items-center gap-2">
+					<span
+						className={cn("inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500", {
+							"bg-green-500/10 text-green-500": data.status === "healthy",
+							"bg-red-500/10 text-red-500": data.status === "error",
+						})}
+					>
+						{data.status || "unknown"}
+					</span>
+					<span className="text-xs bg-primary/10 rounded-md px-2 py-1">{data.type}</span>
+				</div>
+				<div className="flex gap-4">
+					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteRepo.isPending}>
+						Delete
+					</Button>
+				</div>
+			</div>
 
-      <Tabs
-        value={activeTab}
-        onValueChange={(value) => setSearchParams({ tab: value })}
-      >
-        <TabsList className="mb-2">
-          <TabsTrigger value="info">Configuration</TabsTrigger>
-          <TabsTrigger value="snapshots">Snapshots</TabsTrigger>
-        </TabsList>
-        <TabsContent value="info">
-          <RepositoryInfoTabContent repository={data} />
-        </TabsContent>
-        <TabsContent value="snapshots">
-          <RepositorySnapshotsTabContent repository={data} />
-        </TabsContent>
-      </Tabs>
+			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })}>
+				<TabsList className="mb-2">
+					<TabsTrigger value="info">Configuration</TabsTrigger>
+					<TabsTrigger value="snapshots">Snapshots</TabsTrigger>
+				</TabsList>
+				<TabsContent value="info">
+					<RepositoryInfoTabContent repository={data} />
+				</TabsContent>
+				<TabsContent value="snapshots">
+					<RepositorySnapshotsTabContent repository={data} />
+				</TabsContent>
+			</Tabs>
 
-      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete repository?</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to delete the repository{" "}
-              <strong>{name}</strong>? This action cannot be undone and will
-              remove all backup data.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <div className="flex gap-3 justify-end">
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              Delete repository
-            </AlertDialogAction>
-          </div>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
+			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete repository?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete the repository <strong>{name}</strong>? This action cannot be undone and
+							will remove all backup data.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex gap-3 justify-end">
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete repository
+						</AlertDialogAction>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
+	);
 }
diff --git a/apps/client/app/modules/repositories/routes/snapshot-details.tsx b/apps/client/app/modules/repositories/routes/snapshot-details.tsx
index 3776768..f2255ec 100644
--- a/apps/client/app/modules/repositories/routes/snapshot-details.tsx
+++ b/apps/client/app/modules/repositories/routes/snapshot-details.tsx
@@ -8,102 +8,95 @@ import { getSnapshotDetails } from "~/api-client";
 import type { Route } from "./+types/snapshot-details";
 
 export function meta({ params }: Route.MetaArgs) {
-  return [
-    { title: `Snapshot ${params.snapshotId}` },
-    {
-      name: "description",
-      content: "Browse and restore files from a backup snapshot.",
-    },
-  ];
+	return [
+		{ title: `Snapshot ${params.snapshotId}` },
+		{
+			name: "description",
+			content: "Browse and restore files from a backup snapshot.",
+		},
+	];
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-  const snapshot = await getSnapshotDetails({
-    path: { name: params.name, snapshotId: params.snapshotId },
-  });
-  if (snapshot.data) return snapshot.data;
+	const snapshot = await getSnapshotDetails({
+		path: { name: params.name, snapshotId: params.snapshotId },
+	});
+	if (snapshot.data) return snapshot.data;
 
-  return redirect("/repositories");
+	return redirect("/repositories");
 };
 
-export default function SnapshotDetailsPage({
-  loaderData,
-}: Route.ComponentProps) {
-  const { name, snapshotId } = useParams<{
-    name: string;
-    snapshotId: string;
-  }>();
+export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
+	const { name, snapshotId } = useParams<{
+		name: string;
+		snapshotId: string;
+	}>();
 
-  const { data } = useQuery({
-    ...listSnapshotFilesOptions({
-      path: { name: name ?? "", snapshotId: snapshotId ?? "" },
-      query: { path: "/" },
-    }),
-    enabled: !!name && !!snapshotId,
-  });
+	const { data } = useQuery({
+		...listSnapshotFilesOptions({
+			path: { name: name ?? "", snapshotId: snapshotId ?? "" },
+			query: { path: "/" },
+		}),
+		enabled: !!name && !!snapshotId,
+	});
 
-  if (!name || !snapshotId) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <p className="text-destructive">Invalid snapshot reference</p>
-      </div>
-    );
-  }
+	if (!name || !snapshotId) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<p className="text-destructive">Invalid snapshot reference</p>
+			</div>
+		);
+	}
 
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">{name}</h1>
-          <p className="text-sm text-muted-foreground">
-            Snapshot: {snapshotId}
-          </p>
-        </div>
-        <RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
-      </div>
+	return (
+		<div className="space-y-4">
+			<div className="flex items-center justify-between">
+				<div>
+					<h1 className="text-2xl font-bold">{name}</h1>
+					<p className="text-sm text-muted-foreground">Snapshot: {snapshotId}</p>
+				</div>
+				<RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
+			</div>
 
-      <SnapshotFileBrowser repositoryName={name} snapshot={loaderData} />
+			<SnapshotFileBrowser repositoryName={name} snapshot={loaderData} />
 
-      {data?.snapshot && (
-        <Card>
-          <CardHeader>
-            <CardTitle>Snapshot Information</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2 text-sm">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <span className="text-muted-foreground">Snapshot ID:</span>
-                <p className="font-mono break-all">{data.snapshot.id}</p>
-              </div>
-              <div>
-                <span className="text-muted-foreground">Short ID:</span>
-                <p className="font-mono break-al">{data.snapshot.short_id}</p>
-              </div>
-              <div>
-                <span className="text-muted-foreground">Hostname:</span>
-                <p>{data.snapshot.hostname}</p>
-              </div>
-              <div>
-                <span className="text-muted-foreground">Time:</span>
-                <p>{new Date(data.snapshot.time).toLocaleString()}</p>
-              </div>
-              <div className="col-span-2">
-                <span className="text-muted-foreground">Paths:</span>
-                <div className="space-y-1 mt-1">
-                  {data.snapshot.paths.map((path) => (
-                    <p
-                      key={path}
-                      className="font-mono text-xs bg-muted px-2 py-1 rounded"
-                    >
-                      {path}
-                    </p>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
+			{data?.snapshot && (
+				<Card>
+					<CardHeader>
+						<CardTitle>Snapshot Information</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-2 text-sm">
+						<div className="grid grid-cols-2 gap-4">
+							<div>
+								<span className="text-muted-foreground">Snapshot ID:</span>
+								<p className="font-mono break-all">{data.snapshot.id}</p>
+							</div>
+							<div>
+								<span className="text-muted-foreground">Short ID:</span>
+								<p className="font-mono break-al">{data.snapshot.short_id}</p>
+							</div>
+							<div>
+								<span className="text-muted-foreground">Hostname:</span>
+								<p>{data.snapshot.hostname}</p>
+							</div>
+							<div>
+								<span className="text-muted-foreground">Time:</span>
+								<p>{new Date(data.snapshot.time).toLocaleString()}</p>
+							</div>
+							<div className="col-span-2">
+								<span className="text-muted-foreground">Paths:</span>
+								<div className="space-y-1 mt-1">
+									{data.snapshot.paths.map((path) => (
+										<p key={path} className="font-mono text-xs bg-muted px-2 py-1 rounded">
+											{path}
+										</p>
+									))}
+								</div>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+		</div>
+	);
 }
diff --git a/apps/client/app/modules/volumes/routes/volume-details.tsx b/apps/client/app/modules/volumes/routes/volume-details.tsx
index cc19a3e..7ac12a7 100644
--- a/apps/client/app/modules/volumes/routes/volume-details.tsx
+++ b/apps/client/app/modules/volumes/routes/volume-details.tsx
@@ -3,23 +3,23 @@ import { useNavigate, useParams, useSearchParams } from "react-router";
 import { toast } from "sonner";
 import { useState } from "react";
 import {
-  deleteVolumeMutation,
-  getVolumeOptions,
-  getSystemInfoOptions,
-  mountVolumeMutation,
-  unmountVolumeMutation,
+	deleteVolumeMutation,
+	getVolumeOptions,
+	getSystemInfoOptions,
+	mountVolumeMutation,
+	unmountVolumeMutation,
 } from "~/api-client/@tanstack/react-query.gen";
 import { StatusDot } from "~/components/status-dot";
 import { Button } from "~/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogHeader,
-  AlertDialogTitle,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogHeader,
+	AlertDialogTitle,
 } from "~/components/ui/alert-dialog";
 import { VolumeIcon } from "~/components/volume-icon";
 import { parseError } from "~/lib/errors";
@@ -31,169 +31,159 @@ import { FilesTabContent } from "../tabs/files";
 import { DockerTabContent } from "../tabs/docker";
 
 export function meta({ params }: Route.MetaArgs) {
-  return [
-    { title: params.name },
-    {
-      name: "description",
-      content: "View and manage volume details, configuration, and files.",
-    },
-  ];
+	return [
+		{ title: params.name },
+		{
+			name: "description",
+			content: "View and manage volume details, configuration, and files.",
+		},
+	];
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-  const volume = await getVolume({ path: { name: params.name ?? "" } });
-  if (volume.data) return volume.data;
+	const volume = await getVolume({ path: { name: params.name ?? "" } });
+	if (volume.data) return volume.data;
 };
 
 export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
-  const { name } = useParams<{ name: string }>();
-  const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const activeTab = searchParams.get("tab") || "info";
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+	const { name } = useParams<{ name: string }>();
+	const navigate = useNavigate();
+	const [searchParams, setSearchParams] = useSearchParams();
+	const activeTab = searchParams.get("tab") || "info";
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
-  const { data } = useQuery({
-    ...getVolumeOptions({ path: { name: name ?? "" } }),
-    initialData: loaderData,
-    refetchInterval: 10000,
-    refetchOnWindowFocus: true,
-  });
+	const { data } = useQuery({
+		...getVolumeOptions({ path: { name: name ?? "" } }),
+		initialData: loaderData,
+		refetchInterval: 10000,
+		refetchOnWindowFocus: true,
+	});
 
-  const { data: systemInfo } = useQuery({
-    ...getSystemInfoOptions(),
-  });
+	const { data: systemInfo } = useQuery({
+		...getSystemInfoOptions(),
+	});
 
-  const deleteVol = useMutation({
-    ...deleteVolumeMutation(),
-    onSuccess: () => {
-      toast.success("Volume deleted successfully");
-      navigate("/volumes");
-    },
-    onError: (error) => {
-      toast.error("Failed to delete volume", {
-        description: parseError(error)?.message,
-      });
-    },
-  });
+	const deleteVol = useMutation({
+		...deleteVolumeMutation(),
+		onSuccess: () => {
+			toast.success("Volume deleted successfully");
+			navigate("/volumes");
+		},
+		onError: (error) => {
+			toast.error("Failed to delete volume", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
 
-  const mountVol = useMutation({
-    ...mountVolumeMutation(),
-    onSuccess: () => {
-      toast.success("Volume mounted successfully");
-    },
-    onError: (error) => {
-      toast.error("Failed to mount volume", {
-        description: parseError(error)?.message,
-      });
-    },
-  });
+	const mountVol = useMutation({
+		...mountVolumeMutation(),
+		onSuccess: () => {
+			toast.success("Volume mounted successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to mount volume", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
 
-  const unmountVol = useMutation({
-    ...unmountVolumeMutation(),
-    onSuccess: () => {
-      toast.success("Volume unmounted successfully");
-    },
-    onError: (error) => {
-      toast.error("Failed to unmount volume", {
-        description: parseError(error)?.message,
-      });
-    },
-  });
+	const unmountVol = useMutation({
+		...unmountVolumeMutation(),
+		onSuccess: () => {
+			toast.success("Volume unmounted successfully");
+		},
+		onError: (error) => {
+			toast.error("Failed to unmount volume", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
 
-  const handleConfirmDelete = () => {
-    setShowDeleteConfirm(false);
-    deleteVol.mutate({ path: { name: name ?? "" } });
-  };
+	const handleConfirmDelete = () => {
+		setShowDeleteConfirm(false);
+		deleteVol.mutate({ path: { name: name ?? "" } });
+	};
 
-  if (!name) {
-    return <div>Volume not found</div>;
-  }
+	if (!name) {
+		return <div>Volume not found</div>;
+	}
 
-  if (!data) {
-    return <div>Loading...</div>;
-  }
+	if (!data) {
+		return <div>Loading...</div>;
+	}
 
-  const { volume, statfs } = data;
-  const dockerAvailable = systemInfo?.capabilities?.docker ?? false;
+	const { volume, statfs } = data;
+	const dockerAvailable = systemInfo?.capabilities?.docker ?? false;
 
-  return (
-    <>
-      <div className="flex flex-col items-start xs:items-center xs:flex-row xs:justify-between">
-        <div className="text-sm font-semibold mb-2 xs:mb-0 text-muted-foreground flex items-center gap-2">
-          <span className="flex items-center gap-2">
-            <StatusDot status={volume.status} />{" "}
-            {volume.status[0].toUpperCase() + volume.status.slice(1)}
-          </span>
-          <VolumeIcon size={14} backend={volume?.config.backend} />
-        </div>
-        <div className="flex gap-4">
-          <Button
-            onClick={() => mountVol.mutate({ path: { name } })}
-            loading={mountVol.isPending}
-            className={cn({ hidden: volume.status === "mounted" })}
-          >
-            Mount
-          </Button>
-          <Button
-            variant="secondary"
-            onClick={() => unmountVol.mutate({ path: { name } })}
-            loading={unmountVol.isPending}
-            className={cn({ hidden: volume.status !== "mounted" })}
-          >
-            Unmount
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={() => setShowDeleteConfirm(true)}
-            disabled={deleteVol.isPending}
-          >
-            Delete
-          </Button>
-        </div>
-      </div>
-      <Tabs
-        value={activeTab}
-        onValueChange={(value) => setSearchParams({ tab: value })}
-        className="mt-4"
-      >
-        <TabsList className="mb-2">
-          <TabsTrigger value="info">Configuration</TabsTrigger>
-          <TabsTrigger value="files">Files</TabsTrigger>
-          {dockerAvailable && <TabsTrigger value="docker">Docker</TabsTrigger>}
-        </TabsList>
-        <TabsContent value="info">
-          <VolumeInfoTabContent volume={volume} statfs={statfs} />
-        </TabsContent>
-        <TabsContent value="files">
-          <FilesTabContent volume={volume} />
-        </TabsContent>
-        {dockerAvailable && (
-          <TabsContent value="docker">
-            <DockerTabContent volume={volume} />
-          </TabsContent>
-        )}
-      </Tabs>
+	return (
+		<>
+			<div className="flex flex-col items-start xs:items-center xs:flex-row xs:justify-between">
+				<div className="text-sm font-semibold mb-2 xs:mb-0 text-muted-foreground flex items-center gap-2">
+					<span className="flex items-center gap-2">
+						<StatusDot status={volume.status} /> {volume.status[0].toUpperCase() + volume.status.slice(1)}
+					</span>
+					<VolumeIcon size={14} backend={volume?.config.backend} />
+				</div>
+				<div className="flex gap-4">
+					<Button
+						onClick={() => mountVol.mutate({ path: { name } })}
+						loading={mountVol.isPending}
+						className={cn({ hidden: volume.status === "mounted" })}
+					>
+						Mount
+					</Button>
+					<Button
+						variant="secondary"
+						onClick={() => unmountVol.mutate({ path: { name } })}
+						loading={unmountVol.isPending}
+						className={cn({ hidden: volume.status !== "mounted" })}
+					>
+						Unmount
+					</Button>
+					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteVol.isPending}>
+						Delete
+					</Button>
+				</div>
+			</div>
+			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })} className="mt-4">
+				<TabsList className="mb-2">
+					<TabsTrigger value="info">Configuration</TabsTrigger>
+					<TabsTrigger value="files">Files</TabsTrigger>
+					{dockerAvailable && <TabsTrigger value="docker">Docker</TabsTrigger>}
+				</TabsList>
+				<TabsContent value="info">
+					<VolumeInfoTabContent volume={volume} statfs={statfs} />
+				</TabsContent>
+				<TabsContent value="files">
+					<FilesTabContent volume={volume} />
+				</TabsContent>
+				{dockerAvailable && (
+					<TabsContent value="docker">
+						<DockerTabContent volume={volume} />
+					</TabsContent>
+				)}
+			</Tabs>
 
-      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete volume?</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to delete the volume <strong>{name}</strong>
-              ? This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <div className="flex gap-3 justify-end">
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              Delete volume
-            </AlertDialogAction>
-          </div>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
+			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete volume?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete the volume <strong>{name}</strong>? This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex gap-3 justify-end">
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete volume
+						</AlertDialogAction>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
+	);
 }
diff --git a/apps/client/app/root.tsx b/apps/client/app/root.tsx
index 2058fc0..93c8133 100644
--- a/apps/client/app/root.tsx
+++ b/apps/client/app/root.tsx
@@ -1,16 +1,5 @@
-import {
-  MutationCache,
-  QueryClient,
-  QueryClientProvider,
-} from "@tanstack/react-query";
-import {
-  isRouteErrorResponse,
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "react-router";
+import { MutationCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import { Toaster } from "~/components/ui/sonner";
 
 import type { Route } from "./+types/root";
@@ -19,108 +8,89 @@ import { client } from "./api-client/client.gen";
 import { useServerEvents } from "./hooks/use-server-events";
 
 client.setConfig({
-  baseUrl: "/",
+	baseUrl: "/",
 });
 
 export const links: Route.LinksFunction = () => [
-  { rel: "preconnect", href: "https://fonts.googleapis.com" },
-  {
-    rel: "preconnect",
-    href: "https://fonts.gstatic.com",
-    crossOrigin: "anonymous",
-  },
-  {
-    rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap",
-  },
+	{ rel: "preconnect", href: "https://fonts.googleapis.com" },
+	{
+		rel: "preconnect",
+		href: "https://fonts.gstatic.com",
+		crossOrigin: "anonymous",
+	},
+	{
+		rel: "stylesheet",
+		href: "https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap",
+	},
 ];
 
 const queryClient = new QueryClient({
-  mutationCache: new MutationCache({
-    onSuccess: () => {
-      queryClient.invalidateQueries();
-    },
-    onError: (error) => {
-      console.error("Mutation error:", error);
-      queryClient.invalidateQueries();
-    },
-  }),
+	mutationCache: new MutationCache({
+		onSuccess: () => {
+			queryClient.invalidateQueries();
+		},
+		onError: (error) => {
+			console.error("Mutation error:", error);
+			queryClient.invalidateQueries();
+		},
+	}),
 });
 
 export function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          href="/images/favicon/favicon-96x96.png"
-          sizes="96x96"
-        />
-        <link
-          rel="icon"
-          type="image/svg+xml"
-          href="/images/favicon/favicon.svg"
-        />
-        <link rel="shortcut icon" href="/images/favicon/favicon.ico" />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/images/favicon/apple-touch-icon.png"
-        />
-        <meta name="apple-mobile-web-app-title" content="Ironmount" />
-        <link rel="manifest" href="/images/favicon/site.webmanifest" />
-        <Meta />
-        <Links />
-      </head>
-      <QueryClientProvider client={queryClient}>
-        <body className="dark">
-          {children}
-          <Toaster />
-          <ScrollRestoration />
-          <Scripts />
-        </body>
-      </QueryClientProvider>
-    </html>
-  );
+	return (
+		<html lang="en">
+			<head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+				<link rel="icon" type="image/png" href="/images/favicon/favicon-96x96.png" sizes="96x96" />
+				<link rel="icon" type="image/svg+xml" href="/images/favicon/favicon.svg" />
+				<link rel="shortcut icon" href="/images/favicon/favicon.ico" />
+				<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png" />
+				<meta name="apple-mobile-web-app-title" content="Ironmount" />
+				<link rel="manifest" href="/images/favicon/site.webmanifest" />
+				<Meta />
+				<Links />
+			</head>
+			<QueryClientProvider client={queryClient}>
+				<body className="dark">
+					{children}
+					<Toaster />
+					<ScrollRestoration />
+					<Scripts />
+				</body>
+			</QueryClientProvider>
+		</html>
+	);
 }
 
 export default function App() {
-  useServerEvents();
+	useServerEvents();
 
-  return <Outlet />;
+	return <Outlet />;
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  let message = "Oops!";
-  let details = "An unexpected error occurred.";
-  let stack: string | undefined;
+	let message = "Oops!";
+	let details = "An unexpected error occurred.";
+	let stack: string | undefined;
 
-  if (isRouteErrorResponse(error)) {
-    message = error.status === 404 ? "404" : "Error";
-    details =
-      error.status === 404
-        ? "The requested page could not be found."
-        : error.statusText || details;
-  } else if (import.meta.env.DEV && error && error instanceof Error) {
-    details = error.message;
-    stack = error.stack;
-  }
+	if (isRouteErrorResponse(error)) {
+		message = error.status === 404 ? "404" : "Error";
+		details = error.status === 404 ? "The requested page could not be found." : error.statusText || details;
+	} else if (import.meta.env.DEV && error && error instanceof Error) {
+		details = error.message;
+		stack = error.stack;
+	}
 
-  return (
-    <main className="pt-4 p-4 container mx-auto">
-      <h1>{message}</h1>
-      <p>{details}</p>
-      {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
-          <code>{stack}</code>
-        </pre>
-      )}
-    </main>
-  );
+	return (
+		<main className="pt-4 p-4 container mx-auto">
+			<h1>{message}</h1>
+			<p>{details}</p>
+			{stack && (
+				<pre className="w-full p-4 overflow-x-auto">
+					<code>{stack}</code>
+				</pre>
+			)}
+		</main>
+	);
 }
diff --git a/apps/client/vite.config.ts b/apps/client/vite.config.ts
index c4096c6..9235c1f 100644
--- a/apps/client/vite.config.ts
+++ b/apps/client/vite.config.ts
@@ -7,28 +7,28 @@ const alias = {};
 
 const { NODE_ENV } = process.env;
 if (NODE_ENV === "production") {
-  // @ts-expect-error
-  alias["react-dom/server"] = "react-dom/server.node";
+	// @ts-expect-error
+	alias["react-dom/server"] = "react-dom/server.node";
 }
 
 export default defineConfig({
-  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
-  resolve: {
-    alias,
-  },
-  build: {
-    outDir: "dist",
-    // sourcemap: true,
-  },
-  server: {
-    host: true,
-    port: 4097,
-    proxy: {
-      "/api": {
-        target: "http://localhost:4096",
-        changeOrigin: true,
-      },
-    },
-    allowedHosts: true,
-  },
+	plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+	resolve: {
+		alias,
+	},
+	build: {
+		outDir: "dist",
+		// sourcemap: true,
+	},
+	server: {
+		host: true,
+		port: 4097,
+		proxy: {
+			"/api": {
+				target: "http://localhost:4096",
+				changeOrigin: true,
+			},
+		},
+		allowedHosts: true,
+	},
 });