diff --git a/frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte b/frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte
index a2f9306..ab7ac44 100644
--- a/frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte
+++ b/frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte
@@ -28,7 +28,7 @@
 			variant={$page.url.pathname == item.href
 				? 'secondary'
 				: 'ghost'}
-			class="justify-start hover:bg-secondary/50">
+			class="hover:bg-secondary/50 justify-start">
 			{item.title}
 		</Button>
 	{/each}
diff --git a/frontend/src/routes/(app)/settings/+layout.svelte b/frontend/src/routes/(app)/settings/+layout.svelte
index cdbafc4..7351dda 100644
--- a/frontend/src/routes/(app)/settings/+layout.svelte
+++ b/frontend/src/routes/(app)/settings/+layout.svelte
@@ -4,20 +4,20 @@
 	import SidebarNav from './(components)/sidebar-nav.svelte'
 </script>
 
-<div class="flex overflow-hidden flex-col p-10 h-auto">
+<div class="flex h-auto flex-col overflow-hidden p-10">
 	<div class="space-y-0.5">
 		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
 		<p class="text-muted-foreground">Manage your account settings.</p>
 	</div>
 	<Separator class="my-4 lg:my-6" />
-	<div class="flex overflow-hidden flex-col h-auto lg:flex-row">
-		<aside class="pb-4 border-b lg:w-1/5 lg:border-none">
+	<div class="flex h-auto flex-col overflow-hidden lg:flex-row">
+		<aside
+			class="flex-grow border-b pb-4 lg:max-w-[200px] lg:border-none">
 			<SidebarNav />
 		</aside>
-		<div
-			class="flex overflow-hidden p-0 m-0 w-full h-auto lg:max-w-2xl">
+		<div class="m-0 flex h-auto flex-grow overflow-hidden p-0">
 			<ScrollArea class="mt-0 w-full">
-				<div class="py-6 lg:py-0 lg:px-8">
+				<div class="w-full max-w-xl py-6 lg:px-8 lg:py-0">
 					<slot />
 				</div>
 			</ScrollArea>