diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fb4844e..da9e20b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,8 +4,10 @@
 
   // Global styles:
   import '../app.css';
+  import { cn } from '@/utils/cn';
   import { ModeWatcher, mode } from 'mode-watcher';
   import { sidebarCategoryCountStyles } from '@/ui/styles';
+  import { sidebarItemStyles } from '@/ui/styles';
 
   // Get categories:
   import { svgs } from '@/data/svgs';
@@ -14,7 +16,7 @@
     .filter((category, index, array) => array.indexOf(category) === index);
 
   // Get category counts:
-  let categoryCounts:any = {};
+  let categoryCounts: Record<string, number> = {};
   categories.forEach((category) => {
     categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
   });
@@ -28,8 +30,6 @@
 
   // Layout:
   import Navbar from '@/components/navbar.svelte';
-  import { cn } from '@/utils/cn';
-  import { sidebarItemStyles } from '@/ui/styles';
 </script>
 
 <ModeWatcher />
@@ -46,7 +46,7 @@
   >
     <div class="md:px-3 md:py-6">
       <nav
-        class="flex items-center space-x-1 overflow-y-auto md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
+        class="flex items-center space-x-1 overflow-y-auto md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-6 md:px-0 pb-2 pt-2 md:pt-0"
       >
         <a
           href="/"
@@ -62,6 +62,7 @@
         {#each categories.sort() as category}
           <a
             href={`/directory/${category.toLowerCase()}`}
+            data-sveltekit-preload-data
             class={cn(
               sidebarItemStyles,
               data.pathname === `/directory/${category.toLowerCase()}`
@@ -70,7 +71,15 @@
             )}
           >
             <span>{category}</span>
-            <span class={`hidden md:block ${sidebarCategoryCountStyles}`}>{categoryCounts[category]}</span>
+            <span
+              class={cn(
+                sidebarCategoryCountStyles,
+                data.pathname === `/directory/${category.toLowerCase()}`
+                  ? 'border-neutral-300 dark:border-neutral-700'
+                  : '',
+                'text-xs font-mono hidden md:inline'
+              )}>{categoryCounts[category]}</span
+            >
           </a>
         {/each}
       </nav>
diff --git a/src/ui/styles.ts b/src/ui/styles.ts
index e793c17..ecbda48 100644
--- a/src/ui/styles.ts
+++ b/src/ui/styles.ts
@@ -8,7 +8,7 @@ export const badgeStyles =
   'inline-flex items-center px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400 text-xs font-mono hover:underline hover:bg-neutral-200 dark:hover:bg-neutral-700/50 transition-colors duration-100';
 
 export const sidebarItemStyles =
-  'flex w-full items-center space-x-3 justify-between rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40';
+  'flex w-full items-center space-x-3 justify-between rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 text-sm';
 
 export const sidebarCategoryCountStyles =
-'px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400 text-xs font-mono';
+  'px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400 text-xs font-mono';