diff --git a/app/backend/views/nav.html b/app/backend/views/nav.html
index 17e82c9..606a7cc 100644
--- a/app/backend/views/nav.html
+++ b/app/backend/views/nav.html
@@ -1,5 +1,6 @@
 {{define "nav"}}
-<nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0">
+<nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0"
+     x-data="{ page: '{{.View}}' }" @after-settle.window="page = location.pathname.slice(1) || 'hosts'">
   <div class="p-3 border-b border-outline-variant/20">
     <div class="flex items-center gap-2">
       <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-bold">K</div>
@@ -10,9 +11,8 @@
     {{range .NavItems}}
     <a href="/{{.ID}}"
        hx-get="/{{.ID}}" hx-target="#main-content" hx-push-url="true"
-       class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm
-              {{if eq $.View .ID}}bg-primary/10 text-primary font-medium
-              {{else}}text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface{{end}}">
+       :class="page === '{{.ID}}' ? 'bg-primary/10 text-primary font-medium' : 'text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface'"
+       class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm">
       <span class="w-5 h-5 flex items-center justify-center">{{svg .Icon}}</span>
       <span>{{.Label}}</span>
     </a>