diff --git a/apps/client/app/components/create-volume-dialog.tsx b/apps/client/app/components/create-volume-dialog.tsx
index 70ecf6e..42fb052 100644
--- a/apps/client/app/components/create-volume-dialog.tsx
+++ b/apps/client/app/components/create-volume-dialog.tsx
@@ -50,9 +50,9 @@ export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
 				<ScrollArea className="h-[500px]">
 					<DialogHeader>
 						<DialogTitle>Create volume</DialogTitle>
-						<DialogDescription>Enter a name for the new volume</DialogDescription>
 					</DialogHeader>
 					<CreateVolumeForm
+						className="mt-4"
 						mode="create"
 						formId={formId}
 						onSubmit={(values) => {
diff --git a/apps/client/app/components/create-volume-form.tsx b/apps/client/app/components/create-volume-form.tsx
index aaa9d04..dc8da1a 100644
--- a/apps/client/app/components/create-volume-form.tsx
+++ b/apps/client/app/components/create-volume-form.tsx
@@ -6,7 +6,7 @@ import { CheckCircle, Loader2, XCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
-import { slugify } from "~/lib/utils";
+import { cn, slugify } from "~/lib/utils";
 import { Button } from "./ui/button";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
 import { Input } from "./ui/input";
@@ -24,6 +24,7 @@ type Props = {
 	initialValues?: Partial<FormValues>;
 	formId?: string;
 	loading?: boolean;
+	className?: string;
 };
 
 const defaultValuesForType = {
@@ -33,7 +34,7 @@ const defaultValuesForType = {
 	webdav: { backend: "webdav" as const, port: 80, ssl: false },
 };
 
-export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading }: Props) => {
+export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading, className }: Props) => {
 	const form = useForm<FormValues>({
 		resolver: arktypeResolver(formSchema),
 		defaultValues: initialValues,
@@ -83,7 +84,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 
 	return (
 		<Form {...form}>
-			<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+			<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-4", className)}>
 				<FormField
 					control={form.control}
 					name="name"
diff --git a/apps/client/app/components/layout.tsx b/apps/client/app/components/layout.tsx
index bf58bfd..5342d18 100644
--- a/apps/client/app/components/layout.tsx
+++ b/apps/client/app/components/layout.tsx
@@ -13,7 +13,7 @@ export default function Layout() {
 			)}
 		>
 			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
-			<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto max-w-full">
+			<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto">
 				<AppBreadcrumb />
 				<Outlet />
 			</main>
diff --git a/apps/client/app/routes/home.tsx b/apps/client/app/routes/home.tsx
index 84f990a..6a169c1 100644
--- a/apps/client/app/routes/home.tsx
+++ b/apps/client/app/routes/home.tsx
@@ -125,7 +125,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 								</TableCell>
 								<TableCell className="hidden sm:table-cell">
 									<span className="flex items-center gap-2">
-										<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1 max-w-[200px]">
+										<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
 											{volume.path}
 										</span>
 										<Copy size={10} />