diff --git a/resources/views/account/partials/sidebar.blade.php b/resources/views/account/partials/sidebar.blade.php
index affeaf4f..061f08a6 100644
--- a/resources/views/account/partials/sidebar.blade.php
+++ b/resources/views/account/partials/sidebar.blade.php
@@ -1,93 +1,112 @@
 <nav class="bg-white dark:bg-gray-800/50 rounded-[0.70rem] shadow-none border border-gray-200 dark:border-gray-800/30 p-2 w-full">
-    <ul class="flex lg:flex-col space-x-1 lg:space-x-0 lg:space-y-1 justify-around lg:justify-start">
-        <li class="flex-1 lg:flex-initial">
+    <ul class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-1 gap-1">
+        <!-- Account Management -->
+        <li class="col-span-2 sm:col-span-3 lg:col-span-1 pt-2 pb-1">
+            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-2">Account</h3>
+        </li>
+        <li>
             <x-sidebar-nav-link :href="route('profile')" :active="request()->routeIs('profile')" wire:navigate>
-                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                    @svg('heroicon-o-user', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Profile') }}</span>
+                <span class="flex items-center">
+                    @svg('heroicon-o-user', 'h-5 w-5 mr-2')
+                    <span>{{ __('My Profile') }}</span>
                 </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-initial">
-            <x-sidebar-nav-link :href="route('tags.index')" :active="request()->routeIs('tags.*')" wire:navigate>
-                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                    @svg('heroicon-o-tag', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Tags') }}</span>
+        <li>
+            <x-sidebar-nav-link :href="route('profile.api')" :active="request()->routeIs('profile.api*')" wire:navigate>
+                <span class="flex items-center">
+                    @svg('heroicon-o-code-bracket', 'h-5 w-5 mr-2')
+                    <span>{{ __('API Tokens') }}</span>
                 </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-initial">
-            <x-sidebar-nav-link :href="route('notification-streams.index')" :active="request()->routeIs('notification-streams.*')" wire:navigate>
-                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                    @svg('heroicon-o-bell', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Notifications') }}</span>
+        <li>
+            <x-sidebar-nav-link :href="route('profile.connections')" :active="request()->routeIs('profile.connections*')" wire:navigate>
+                <span class="flex items-center">
+                    @svg('heroicon-o-puzzle-piece', 'h-5 w-5 mr-2')
+                    <span>{{ __('Connections') }}</span>
                 </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-initial">
-            <x-sidebar-nav-link :href="route('profile.api')" :active="request()->routeIs('profile.api*')" wire:navigate>
-                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                    @svg('heroicon-o-code-bracket', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Manage API Tokens') }}</span>
-                </span>
-            </x-sidebar-nav-link>
+
+        <!-- Security -->
+        <li class="col-span-2 sm:col-span-3 lg:col-span-1 pt-4 pb-1">
+            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-2">Security</h3>
         </li>
-        <li class="flex-1 lg:flex-initial">
+        <li>
             <x-sidebar-nav-link :href="route('profile.mfa')" :active="request()->routeIs('profile.mfa*')" wire:navigate>
-        <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-            @svg('heroicon-o-lock-closed', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-            <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Manage 2FA') }}</span>
-        </span>
+                <span class="flex items-center">
+                    @svg('heroicon-o-lock-closed', 'h-5 w-5 mr-2')
+                    <span>{{ __('Two-Factor Auth') }}</span>
+                </span>
             </x-sidebar-nav-link>
         </li>
         @if (Config::get('session.driver') === 'database')
-            <li class="flex-1 lg:flex-initial">
+            <li>
                 <x-sidebar-nav-link :href="route('profile.sessions')" :active="request()->routeIs('profile.sessions*')" wire:navigate>
-            <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                @svg('heroicon-o-globe-alt', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Manage Sessions') }}</span>
-            </span>
+                    <span class="flex items-center">
+                        @svg('heroicon-o-globe-alt', 'h-5 w-5 mr-2')
+                        <span>{{ __('Active Sessions') }}</span>
+                    </span>
                 </x-sidebar-nav-link>
             </li>
         @endif
-        <li class="flex-1 lg:flex-initial">
-            <x-sidebar-nav-link :href="route('profile.experiments')" :active="request()->routeIs('profile.experiments*')" wire:navigate>
-            <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                @svg('heroicon-o-beaker', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Manage Experiments') }}</span>
-            </span>
+
+        <!-- Preferences -->
+        <li class="col-span-2 sm:col-span-3 lg:col-span-1 pt-4 pb-1">
+            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-2">Preferences</h3>
+        </li>
+        <li>
+            <x-sidebar-nav-link :href="route('tags.index')" :active="request()->routeIs('tags.*')" wire:navigate>
+                <span class="flex items-center">
+                    @svg('heroicon-o-tag', 'h-5 w-5 mr-2')
+                    <span>{{ __('Manage Tags') }}</span>
+                </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-initial">
-            <x-sidebar-nav-link :href="route('profile.quiet-mode')" :active="request()->routeIs('profile.quiet-mode*')" wire:navigate>
-            <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                @svg('heroicon-o-bell-snooze', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Manage Quiet Mode') }}</span>
-            </span>
+        <li>
+            <x-sidebar-nav-link :href="route('notification-streams.index')" :active="request()->routeIs('notification-streams.*')" wire:navigate>
+                <span class="flex items-center">
+                    @svg('heroicon-o-bell', 'h-5 w-5 mr-2')
+                    <span>{{ __('Notifications') }}</span>
+                </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-initial">
-            <x-sidebar-nav-link :href="route('profile.connections')" :active="request()->routeIs('profile.connections*')" wire:navigate>
-            <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                @svg('heroicon-o-puzzle-piece', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Manage Connections') }}</span>
-            </span>
+        <li>
+            <x-sidebar-nav-link :href="route('profile.quiet-mode')" :active="request()->routeIs('profile.quiet-mode*')" wire:navigate>
+                <span class="flex items-center">
+                    @svg('heroicon-o-bell-snooze', 'h-5 w-5 mr-2')
+                    <span>{{ __('Quiet Mode') }}</span>
+                </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-initial">
-            <x-sidebar-nav-link :href="route('account.remove-account')" :active="request()->routeIs('account.remove-account')" wire:navigate>
-                <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                    @svg('heroicon-o-trash', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                    <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Remove Account') }}</span>
+        <li>
+            <x-sidebar-nav-link :href="route('profile.experiments')" :active="request()->routeIs('profile.experiments*')" wire:navigate>
+                <span class="flex items-center">
+                    @svg('heroicon-o-beaker', 'h-5 w-5 mr-2')
+                    <span>{{ __('Experiments') }}</span>
                 </span>
             </x-sidebar-nav-link>
         </li>
-        <li class="flex-1 lg:flex-initial">
+
+        <!-- Support -->
+        <li class="col-span-2 sm:col-span-3 lg:col-span-1 pt-4 pb-1">
+            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-2">Support</h3>
+        </li>
+        <li>
             <x-sidebar-nav-link :href="route('profile.help')" :active="request()->routeIs('profile.help*')" wire:navigate>
-            <span class="flex flex-col lg:flex-row items-center justify-center lg:justify-start py-2 lg:py-1.5">
-                @svg('heroicon-o-lifebuoy', 'h-6 w-6 lg:h-5 lg:w-5 lg:mr-2')
-                <span class="text-xs mt-1 lg:mt-0 lg:text-sm">{{ __('Need Help?') }}</span>
-            </span>
+                <span class="flex items-center">
+                    @svg('heroicon-o-lifebuoy', 'h-5 w-5 mr-2')
+                    <span>{{ __('Get Help') }}</span>
+                </span>
+            </x-sidebar-nav-link>
+        </li>
+        <li>
+            <x-sidebar-nav-link :href="route('account.remove-account')" :active="request()->routeIs('account.remove-account')" wire:navigate>
+                <span class="flex items-center">
+                    @svg('heroicon-o-trash', 'h-5 w-5 mr-2')
+                    <span>{{ __('Delete Account') }}</span>
+                </span>
             </x-sidebar-nav-link>
         </li>
     </ul>
diff --git a/resources/views/components/sidebar-nav-link.blade.php b/resources/views/components/sidebar-nav-link.blade.php
index e5e5697b..3d863ad0 100644
--- a/resources/views/components/sidebar-nav-link.blade.php
+++ b/resources/views/components/sidebar-nav-link.blade.php
@@ -1,11 +1,11 @@
 @props(['active'])
 
 @php
-    $classes = 'block rounded text-xs lg:text-sm font-medium transition-all duration-200 ease-in-out w-full ';
+    $classes = 'block rounded text-sm font-medium transition-all duration-200 ease-in-out w-full ';
     $classes .= ($active ?? false)
         ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-100 shadow-sm'
         : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100';
-    $classes .= ' px-1 py-1 lg:px-2 lg:py-1.5';
+    $classes .= ' px-2 py-2';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>