diff --git a/package.json b/package.json
index 1e50086..66e5ea7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.59",
+	"version": "6.4.60",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.15.5",
diff --git a/src/lib/components/SettingsNav.svelte b/src/lib/components/SettingsNav.svelte
index b40a48e..539e459 100644
--- a/src/lib/components/SettingsNav.svelte
+++ b/src/lib/components/SettingsNav.svelte
@@ -19,10 +19,10 @@
   const key = 'active-settings-tab'
 </script>
 
-<nav class={cn('flex flex-col md:flex-row lg:flex-col gap-y-1 gap-x-2', className)}>
+<nav class={cn('md:flex grid grid-cols-2 md:flex-row lg:flex-col gap-y-1 gap-x-2', className)}>
   {#each items as { href, title }, i (i)}
     {@const isActive = $page.url.pathname === href}
-    <Button {href} variant='ghost' data-sveltekit-noscroll class='relative font-semibold justify-start'>
+    <Button {href} variant='ghost' data-sveltekit-noscroll class='relative font-semibold justify-start last:odd:col-span-2'>
       {#if isActive}
         <div class='bg-white absolute inset-0 rounded-md' in:send={{ key }} out:receive={{ key }} />
       {/if}
diff --git a/src/routes/app/client/+layout.svelte b/src/routes/app/client/+layout.svelte
index f6d1db7..be78ac8 100644
--- a/src/routes/app/client/+layout.svelte
+++ b/src/routes/app/client/+layout.svelte
@@ -47,18 +47,18 @@
   }
 </script>
 
-<div class='space-y-6 p-3 md:p-10 md:pb-0 pb-0 w-full h-full flex flex-col min-w-0'>
+<div class='p-3 md:p-10 md:pb-0 pb-0 w-full h-full flex flex-col min-w-0'>
   <div class='space-y-0.5'>
     <h2 class='text-2xl font-bold'>{overview.title}</h2>
     <p class='text-muted-foreground'>
       {overview.desc}
     </p>
   </div>
-  <Separator class='my-6' />
+  <Separator class='my-3 md:my-6' />
   <div class='flex flex-col lg:flex-row gap-x-12 grow min-h-0'>
     <aside class='lg:grow lg:max-w-60 flex flex-col'>
       <SettingsNav {items} />
-      <div class='mt-auto text-xs text-muted-foreground px-4 sm:px-2 py-5 flex flex-row lg:flex-col font-light gap-0.5 gap-x-4 flex-wrap'>
+      <div class='mt-auto text-xs text-muted-foreground px-4 sm:px-2 py-3 md:py-5 flex-row lg:flex-col font-light gap-0.5 gap-x-4 flex-wrap hidden sm:flex'>
         <div>WebTorrent v2.6.8</div>
       </div>
     </aside>
diff --git a/src/routes/app/settings/+layout.svelte b/src/routes/app/settings/+layout.svelte
index 1fe301d..c422b4e 100644
--- a/src/routes/app/settings/+layout.svelte
+++ b/src/routes/app/settings/+layout.svelte
@@ -38,18 +38,18 @@
   ]
 </script>
 
-<div class='space-y-6 p-3 md:p-10 md:pb-0 pb-0 w-full h-full flex flex-col'>
+<div class='p-3 md:p-10 md:pb-0 pb-0 w-full h-full flex flex-col'>
   <div class='space-y-0.5'>
     <h2 class='text-2xl font-bold'>Settings</h2>
     <p class='text-muted-foreground'>
       Manage your app settings, preferences and accounts.
     </p>
   </div>
-  <Separator class='my-6' />
+  <Separator class='my-3 md:my-6' />
   <div class='flex flex-col lg:flex-row gap-x-12 grow min-h-0'>
     <aside class='lg:grow lg:max-w-60 flex flex-col'>
       <SettingsNav {items} />
-      <div class='mt-auto text-xs text-muted-foreground px-4 sm:px-2 py-5 flex flex-row lg:flex-col font-light gap-0.5 gap-x-4 flex-wrap'>
+      <div class='mt-auto text-xs text-muted-foreground px-4 sm:px-2 py-3 md:py-5 flex flex-row lg:flex-col font-light gap-0.5 gap-x-4 flex-wrap'>
         <div>Interface v{version}</div>
         <div>Native {#await native.version() then version}{version}{/await}</div>
         {#if highEntropyValues}