diff --git a/web/app/components/custom/nav-item.tsx b/web/app/components/custom/nav-item.tsx
index d6958d39..0ca11183 100644
--- a/web/app/components/custom/nav-item.tsx
+++ b/web/app/components/custom/nav-item.tsx
@@ -26,6 +26,7 @@ export function NavItem({
         "text-[var(--less-foreground)] hover:bg-[var(--item-hover)] focus-visible:outline-none focus-visible:ring-0",
         className,
       )}
+      activeOptions={{ exact: true }}
       activeProps={{
         className:
           'bg-[var(--item-active)] data-[status="active"]:hover:bg-[var(--item-active)]',
diff --git a/web/app/components/sidebar/partials/page-section.tsx b/web/app/components/sidebar/partials/page-section.tsx
index 8398dda1..fa761e9d 100644
--- a/web/app/components/sidebar/partials/page-section.tsx
+++ b/web/app/components/sidebar/partials/page-section.tsx
@@ -202,6 +202,7 @@ const PageListItem: React.FC<PageListItemProps> = ({ page }) => {
         "group/p cursor-default text-[var(--less-foreground)]",
         "relative flex h-[30px] w-full items-center gap-2 rounded-md px-1.5 text-sm font-medium hover:bg-[var(--item-hover)]",
       )}
+      activeOptions={{ exact: true }}
       activeProps={{
         className:
           "bg-[var(--item-active)] data-[status='active']:hover:bg-[var(--item-active)]",