diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte
index 3fbe88d..39348ef 100644
--- a/src/components/navbar.svelte
+++ b/src/components/navbar.svelte
@@ -1,4 +1,6 @@
-<script>
+<script lang="ts">
+  export let currentPath: string;
+
   import { cn } from '@/utils/cn';
   import Logo from './logo.svelte';
   import { ArrowUpRight, CloudyIcon, GithubIcon, TwitterIcon } from 'lucide-svelte';
@@ -37,6 +39,8 @@
       external: true
     }
   ];
+
+  console.log(currentPath);
 </script>
 
 <nav
@@ -53,7 +57,7 @@
         <div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
           <svelte:component this={Logo} />
           <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
-          <p class="text-neutral-500 hidden md:block">v4.0.0</p>
+          <p class="text-neutral-500 hidden md:block font-mono">v4</p>
         </div>
       </a>
     </div>
@@ -63,7 +67,11 @@
           <a
             href={link.url}
             target={link.external ? '_blank' : ''}
-            class="flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3 group"
+            class={cn(
+              'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3 group',
+              currentPath === link.url &&
+                'underline underline-offset-8 decoration-dotted decoration-neutral-500'
+            )}
           >
             {#if !link.external}
               <svelte:component this={link.icon} size={16} strokeWidth={1.5} class="mr-2" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5e9e5dd..3b775e4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -26,7 +26,7 @@
   import { cn } from '@/utils/cn';
 </script>
 
-<Navbar />
+<Navbar currentPath={data.pathname} />
 <main>
   <aside
     class={cn(
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a99b890..d119593 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -84,7 +84,7 @@
   <div class="flex items-center justify-end mb-4">
     <button
       class={cn(
-        'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium',
+        'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium hover:opacity-80 transition-opacity',
         filteredSvgs.length === 0 && 'hidden'
       )}
       on:click={() => sort()}
diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
index 6e1d005..5d26386 100644
--- a/src/routes/api/+page.svelte
+++ b/src/routes/api/+page.svelte
@@ -25,7 +25,7 @@
           class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#f4f4f5_0%,#f4f4f5_50%,#737373_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]"
         />
         <div
-          class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-sm font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800"
+          class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-xs font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800 font-mono"
         >
           beta
         </div>