diff --git a/app/client/modules/repositories/components/compression-stats-chart.tsx b/app/client/modules/repositories/components/compression-stats-chart.tsx
index 0921b939..c1ef7431 100644
--- a/app/client/modules/repositories/components/compression-stats-chart.tsx
+++ b/app/client/modules/repositories/components/compression-stats-chart.tsx
@@ -64,7 +64,7 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
 
 	const hasStats = !!stats && (storedSize > 0 || uncompressedSize > 0 || snapshotsCount > 0);
 
-	const storedPercent = uncompressedSize > 0 ? (storedSize / uncompressedSize) * 100 : 0;
+	const storedPercent = Math.min(100, Math.max(0, uncompressedSize > 0 ? (storedSize / uncompressedSize) * 100 : 0));
 
 	return (
 		<Card className="flex flex-col px-6 py-6">
diff --git a/app/client/modules/repositories/routes/repository-details.tsx b/app/client/modules/repositories/routes/repository-details.tsx
index 4e79a73f..07c7cf5c 100644
--- a/app/client/modules/repositories/routes/repository-details.tsx
+++ b/app/client/modules/repositories/routes/repository-details.tsx
@@ -1,5 +1,5 @@
 import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
-import { Suspense, useState } from "react";
+import { useState } from "react";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import { toast } from "sonner";
 import { ChevronDown, Database, Pencil, Square, Stethoscope, Trash2, Unlock } from "lucide-react";
@@ -134,7 +134,7 @@ export default function RepositoryDetailsPage({
 									{repository.provisioningId && <Badge variant="secondary">Managed</Badge>}
 								</div>
 								<p className="text-sm text-muted-foreground mt-0.5">
-									Created {formatDateTime(repository.createdAt)} &middot; Last checked{" "}
+									Created {formatDateTime(repository.createdAt)} &middot; Last checked&nbsp;
 									{formatTimeAgo(repository.lastChecked)}
 								</p>
 							</div>
@@ -222,13 +222,11 @@ export default function RepositoryDetailsPage({
 						<RepositoryInfoTabContent repository={repository} initialStats={initialStats} />
 					</TabsContent>
 					<TabsContent value="snapshots">
-						<Suspense>
-							<RepositorySnapshotsTabContent
-								repository={repository}
-								initialSnapshots={initialSnapshots}
-								initialBackupSchedules={initialBackupSchedules}
-							/>
-						</Suspense>
+						<RepositorySnapshotsTabContent
+							repository={repository}
+							initialSnapshots={initialSnapshots}
+							initialBackupSchedules={initialBackupSchedules}
+						/>
 					</TabsContent>
 				</Tabs>
 			</div>
diff --git a/app/client/modules/volumes/routes/volume-details.tsx b/app/client/modules/volumes/routes/volume-details.tsx
index 2a35bec4..6e3d6392 100644
--- a/app/client/modules/volumes/routes/volume-details.tsx
+++ b/app/client/modules/volumes/routes/volume-details.tsx
@@ -140,36 +140,35 @@ export function VolumeDetails({ volumeId }: { volumeId: string }) {
 							</div>
 						</div>
 						<div className="flex items-center gap-2">
-							{isMounted ? (
-								<Button
-									variant="secondary"
-									onClick={() =>
-										toast.promise(unmountVol.mutateAsync({ path: { shortId: volume.shortId } }), {
-											loading: "Unmounting volume...",
-											success: "Volume unmounted successfully",
-											error: (error) => parseError(error)?.message || "Failed to unmount volume",
-										})
-									}
-									loading={unmountVol.isPending}
-								>
-									<Unplug className="h-4 w-4 mr-2" />
-									Unmount
-								</Button>
-							) : (
-								<Button
-									onClick={() =>
-										toast.promise(mountVol.mutateAsync({ path: { shortId: volume.shortId } }), {
-											loading: "Mounting volume...",
-											success: "Volume mounted successfully",
-											error: (error) => parseError(error)?.message || "Failed to mount volume",
-										})
-									}
-									loading={mountVol.isPending}
-								>
-									<Plug className="h-4 w-4 mr-2" />
-									Mount
-								</Button>
-							)}
+							<Button
+								className={cn({ hidden: !isMounted })}
+								variant="secondary"
+								onClick={() =>
+									toast.promise(unmountVol.mutateAsync({ path: { shortId: volume.shortId } }), {
+										loading: "Unmounting volume...",
+										success: "Volume unmounted successfully",
+										error: (error) => parseError(error)?.message || "Failed to unmount volume",
+									})
+								}
+								loading={unmountVol.isPending}
+							>
+								<Unplug className="h-4 w-4 mr-2" />
+								Unmount
+							</Button>
+							<Button
+								className={cn({ hidden: isMounted })}
+								onClick={() =>
+									toast.promise(mountVol.mutateAsync({ path: { shortId: volume.shortId } }), {
+										loading: "Mounting volume...",
+										success: "Volume mounted successfully",
+										error: (error) => parseError(error)?.message || "Failed to mount volume",
+									})
+								}
+								loading={mountVol.isPending}
+							>
+								<Plug className="h-4 w-4 mr-2" />
+								Mount
+							</Button>
 							<DropdownMenu>
 								<DropdownMenuTrigger asChild>
 									<Button variant="outline">
@@ -203,19 +202,18 @@ export function VolumeDetails({ volumeId }: { volumeId: string }) {
 							<div className="flex items-center gap-2">
 								<HeartIcon className="h-4 w-4 text-muted-foreground" />
 								<span className="text-sm font-medium">Health</span>
-								{isError ? (
-									<Badge variant="destructive" className="ml-1">
-										Error
-									</Badge>
-								) : isMounted ? (
-									<Badge variant="outline" className="text-success border-success/30 bg-success/10 ml-1">
-										Healthy
-									</Badge>
-								) : (
-									<Badge variant="secondary" className="ml-1">
-										Unmounted
-									</Badge>
-								)}
+								<Badge variant="destructive" className={cn("ml-1", { hidden: !isError })}>
+									Error
+								</Badge>
+								<Badge
+									variant="outline"
+									className={cn("text-success border-success/30 bg-success/10 ml-1", { hidden: !isMounted })}
+								>
+									Healthy
+								</Badge>
+								<Badge variant="secondary" className={cn("ml-1", { hidden: isMounted || isError })}>
+									Unmounted
+								</Badge>
 							</div>
 							<Separator orientation="vertical" className="h-4 hidden @lg:block" />
 							<span className="text-sm text-muted-foreground">Checked {formatTimeAgo(volume.lastHealthCheck)}</span>
@@ -248,14 +246,12 @@ export function VolumeDetails({ volumeId }: { volumeId: string }) {
 					</div>
 				</Card>
 
-				{volume.lastError && (
-					<Card className="px-6 py-6">
-						<div className="space-y-2">
-							<p className="text-sm font-medium text-destructive">Last Error</p>
-							<p className="text-sm text-muted-foreground wrap-break-word">{volume.lastError}</p>
-						</div>
-					</Card>
-				)}
+				<Card className={cn("px-6 py-6", { hidden: !volume.lastError })}>
+					<div className="space-y-2">
+						<p className="text-sm font-medium text-destructive">Last Error</p>
+						<p className="text-sm text-muted-foreground wrap-break-word">{volume.lastError}</p>
+					</div>
+				</Card>
 
 				<Tabs value={activeTab} onValueChange={(value) => navigate({ to: ".", search: () => ({ tab: value }) })}>
 					<TabsList className="mb-2">
diff --git a/app/client/modules/volumes/tabs/info.tsx b/app/client/modules/volumes/tabs/info.tsx
index 7ce10814..7529c7ec 100644
--- a/app/client/modules/volumes/tabs/info.tsx
+++ b/app/client/modules/volumes/tabs/info.tsx
@@ -3,7 +3,7 @@ import { FolderOpen, HardDrive, Settings, Unplug } from "lucide-react";
 import { Label, Pie, PieChart } from "recharts";
 import { ByteSize } from "~/client/components/bytes-size";
 import { Card, CardTitle } from "~/client/components/ui/card";
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "~/client/components/ui/chart";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "~/client/components/ui/chart";
 import type { StatFs, Volume } from "~/client/lib/types";
 import { cn } from "~/client/lib/utils";
 
@@ -21,17 +21,14 @@ const backendLabels: Record<Volume["type"], string> = {
 	sftp: "SFTP",
 };
 
-function ConfigRow({
-	icon,
-	label,
-	value,
-	mono,
-}: {
+type ConfigRowProps = {
 	icon: React.ReactNode;
 	label: string;
 	value: string;
 	mono?: boolean;
-}) {
+};
+
+function ConfigRow({ icon, label, value, mono }: ConfigRowProps) {
 	return (
 		<div className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
 			<span className="text-muted-foreground shrink-0">{icon}</span>
@@ -95,14 +92,12 @@ function DonutChart({ statfs }: { statfs: StatFs }) {
 		[statfs],
 	);
 
-	const chartConfig = {} satisfies ChartConfig;
-
 	const usagePercentage = useMemo(() => {
 		return Math.round((statfs.used / statfs.total) * 100);
 	}, [statfs]);
 
 	return (
-		<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[200px]">
+		<ChartContainer config={{}} className="mx-auto aspect-square max-h-[200px]">
 			<PieChart>
 				<ChartTooltip
 					cursor={false}