diff --git a/.dockerignore b/.dockerignore
index 47deeba..7cac851 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -23,3 +23,4 @@
 !LICENSE
 !NOTICES.md
 !LICENSES/**
+
diff --git a/apps/client/app/app.css b/apps/client/app/app.css
index b7b1465..c12eee5 100644
--- a/apps/client/app/app.css
+++ b/apps/client/app/app.css
@@ -5,6 +5,7 @@
 @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";
@@ -12,16 +13,16 @@
 
 html,
 body {
-	@apply bg-white dark:bg-[#131313];
 	overflow-x: hidden;
 	width: 100%;
 	position: relative;
 	overscroll-behavior: none;
 	scrollbar-width: thin;
+}
 
-	@media (prefers-color-scheme: dark) {
-		color-scheme: dark;
-	}
+body {
+	@apply bg-[#131313];
+	min-height: 100dvh;
 }
 
 .main-content {
@@ -70,8 +71,6 @@ body {
 }
 
 :root {
-	color-scheme: dark;
-
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.145 0 0);
@@ -109,6 +108,8 @@ body {
 }
 
 .dark {
+	color-scheme: dark;
+
 	--background: #131313;
 	--foreground: oklch(0.985 0 0);
 	--card: #131313;
diff --git a/apps/client/app/components/auth-layout.tsx b/apps/client/app/components/auth-layout.tsx
index 63653bb..2435a41 100644
--- a/apps/client/app/components/auth-layout.tsx
+++ b/apps/client/app/components/auth-layout.tsx
@@ -9,7 +9,7 @@ type AuthLayoutProps = {
 
 export function AuthLayout({ title, description, children }: AuthLayoutProps) {
 	return (
-		<div className="flex min-h-screen">
+		<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">
@@ -26,7 +26,7 @@ export function AuthLayout({ title, description, children }: AuthLayoutProps) {
 				</div>
 			</div>
 			<div
-				className="hidden lg:block lg:flex-1 dither-xl bg-cover bg-center"
+				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 fae5a9f..70caebb 100644
--- a/apps/client/app/components/layout.tsx
+++ b/apps/client/app/components/layout.tsx
@@ -76,7 +76,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 				</header>
 				<div className="main-content flex-1 overflow-y-auto">
 					<GridBackground>
-						<main className="flex flex-col p-2 pt-2 sm:p-8 sm:pt-6 mx-auto">
+						<main className="flex flex-col p-2 pb-6 pt-2 sm:p-8 sm:pt-6 mx-auto">
 							<Outlet />
 						</main>
 					</GridBackground>
diff --git a/apps/client/app/components/onoff.tsx b/apps/client/app/components/onoff.tsx
index 1ee4a6f..a5b690d 100644
--- a/apps/client/app/components/onoff.tsx
+++ b/apps/client/app/components/onoff.tsx
@@ -20,7 +20,12 @@ export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel, disabled }: P
 			)}
 		>
 			<span>{isOn ? enabledLabel : disabledLabel}</span>
-			<Switch disabled={disabled} checked={isOn} onCheckedChange={toggle} />
+			<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 721c29d..9206a33 100644
--- a/apps/client/app/components/status-dot.tsx
+++ b/apps/client/app/components/status-dot.tsx
@@ -38,7 +38,10 @@ export const StatusDot = ({ status }: { status: VolumeStatus }) => {
 							)}
 						/>
 					)}
-					<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
+					<span
+						aria-label={status}
+						className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)}
+					/>
 				</span>
 			</TooltipTrigger>
 			<TooltipContent>
diff --git a/apps/client/app/modules/backups/components/create-schedule-form.tsx b/apps/client/app/modules/backups/components/create-schedule-form.tsx
index 498e10d..e72262f 100644
--- a/apps/client/app/modules/backups/components/create-schedule-form.tsx
+++ b/apps/client/app/modules/backups/components/create-schedule-form.tsx
@@ -232,7 +232,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 								onSelectionChange={handleSelectionChange}
 								withCheckboxes={true}
 								foldersOnly={true}
-								className="overflow-auto flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px]"
+								className="max-w-2xs xs:max-w-screen flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px]"
 							/>
 							{selectedPaths.size > 0 && (
 								<div className="mt-4">
diff --git a/apps/client/app/modules/repositories/routes/repository-details.tsx b/apps/client/app/modules/repositories/routes/repository-details.tsx
index 1b30b66..c2cf51a 100644
--- a/apps/client/app/modules/repositories/routes/repository-details.tsx
+++ b/apps/client/app/modules/repositories/routes/repository-details.tsx
@@ -124,21 +124,16 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 	return (
 		<>
 			<div className="flex items-center justify-between mb-4">
-				<div>
-					<div className="text-sm font-semibold mb-2 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="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
diff --git a/apps/client/app/modules/repositories/routes/snapshot-details.tsx b/apps/client/app/modules/repositories/routes/snapshot-details.tsx
index 3624b9f..a86d982 100644
--- a/apps/client/app/modules/repositories/routes/snapshot-details.tsx
+++ b/apps/client/app/modules/repositories/routes/snapshot-details.tsx
@@ -18,14 +18,19 @@ export function meta({ params }: Route.MetaArgs) {
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-	const snapshot = await getSnapshotDetails({ path: { name: params.name, snapshotId: params.snapshotId } });
+	const snapshot = await getSnapshotDetails({
+		path: { name: params.name, snapshotId: params.snapshotId },
+	});
 	if (snapshot.data) return snapshot.data;
 
 	return redirect("/repositories");
 };
 
 export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
-	const { name, snapshotId } = useParams<{ name: string; snapshotId: string }>();
+	const { name, snapshotId } = useParams<{
+		name: string;
+		snapshotId: string;
+	}>();
 
 	const { data } = useQuery({
 		...listSnapshotFilesOptions({
@@ -64,11 +69,11 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
 						<div className="grid grid-cols-2 gap-4">
 							<div>
 								<span className="text-muted-foreground">Snapshot ID:</span>
-								<p className="font-mono">{data.snapshot.id}</p>
+								<p className="font-mono break-all">{data.snapshot.id}</p>
 							</div>
 							<div>
 								<span className="text-muted-foreground">Short ID:</span>
-								<p className="font-mono">{data.snapshot.short_id}</p>
+								<p className="font-mono break-all">{data.snapshot.short_id}</p>
 							</div>
 							<div>
 								<span className="text-muted-foreground">Hostname:</span>
@@ -82,7 +87,7 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
 								<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">
+										<p key={path} className="font-mono text-xs bg-muted px-2 py-1 rounded break-all">
 											{path}
 										</p>
 									))}
diff --git a/apps/client/app/modules/volumes/routes/volume-details.tsx b/apps/client/app/modules/volumes/routes/volume-details.tsx
index edf3169..7ac12a7 100644
--- a/apps/client/app/modules/volumes/routes/volume-details.tsx
+++ b/apps/client/app/modules/volumes/routes/volume-details.tsx
@@ -118,14 +118,12 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 
 	return (
 		<>
-			<div className="flex items-center justify-between">
-				<div>
-					<div className="text-sm font-semibold mb-2 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 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
diff --git a/apps/client/app/root.tsx b/apps/client/app/root.tsx
index 7b238c4..93c8133 100644
--- a/apps/client/app/root.tsx
+++ b/apps/client/app/root.tsx
@@ -38,7 +38,7 @@ const queryClient = new QueryClient({
 
 export function Layout({ children }: { children: React.ReactNode }) {
 	return (
-		<html lang="en" style={{ colorScheme: "dark" }} className="dark">
+		<html lang="en">
 			<head>
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
@@ -52,7 +52,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 				<Links />
 			</head>
 			<QueryClientProvider client={queryClient}>
-				<body>
+				<body className="dark">
 					{children}
 					<Toaster />
 					<ScrollRestoration />
diff --git a/apps/client/vite.config.ts b/apps/client/vite.config.ts
index 988d817..9235c1f 100644
--- a/apps/client/vite.config.ts
+++ b/apps/client/vite.config.ts
@@ -29,5 +29,6 @@ export default defineConfig({
 				changeOrigin: true,
 			},
 		},
+		allowedHosts: true,
 	},
 });