diff --git a/apps/console/src/components/AppSidebar.tsx b/apps/console/src/components/AppSidebar.tsx
index 501a02c45..cdb927ced 100644
--- a/apps/console/src/components/AppSidebar.tsx
+++ b/apps/console/src/components/AppSidebar.tsx
@@ -31,6 +31,7 @@ import {
 } from "@/components/ui/sidebar";
 import type { AppSidebarQuery as AppSidebarQueryType } from "./__generated__/AppSidebarQuery.graphql";
 import { TeamSwitcher } from "@/components/TeamSwitcher";
+import { url } from "inspector";
 const staticData = {
   user: {
     name: "shadcn",
@@ -46,7 +47,7 @@ const staticData = {
     {
       title: "Organizations",
       icon: Building,
-      isActive: true,
+      url: "/peoples",
       items: [
         {
           title: "Peoples",
diff --git a/apps/console/src/components/NavMain.tsx b/apps/console/src/components/NavMain.tsx
index 4f0d32f30..b57d024a1 100644
--- a/apps/console/src/components/NavMain.tsx
+++ b/apps/console/src/components/NavMain.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ChevronRight, type LucideIcon } from "lucide-react";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 
 import {
   Collapsible,
@@ -34,45 +34,87 @@ export function NavMain({
     }[];
   }[];
 }) {
+  const location = useLocation();
+
+  // Determine if an item is active based on the current route
+  const isItemActive = (item: { url?: string; items?: { url: string }[] }) => {
+    // If the item has a URL and it matches the current path
+    if (item.url && location.pathname.startsWith(item.url)) {
+      return true;
+    }
+
+    // If the item has sub-items, check if any of them match the current path
+    if (item.items?.length) {
+      return item.items.some((subItem) =>
+        location.pathname.startsWith(subItem.url)
+      );
+    }
+
+    return false;
+  };
+
   return (
     <SidebarGroup>
       <SidebarGroupLabel>Compliance</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild tooltip={item.title}>
-                <Link to={item.url ?? "#"}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </Link>
-              </SidebarMenuButton>
-              {item.items?.length ? (
-                <>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuAction className="data-[state=open]:rotate-90">
-                      <ChevronRight />
-                      <span className="sr-only">Toggle</span>
-                    </SidebarMenuAction>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton asChild>
-                            <Link to={subItem.url}>
-                              <span>{subItem.title}</span>
-                            </Link>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </>
-              ) : null}
-            </SidebarMenuItem>
-          </Collapsible>
-        ))}
+        {items.map((item) => {
+          const active = isItemActive(item) || item.isActive;
+
+          return (
+            <Collapsible key={item.title} asChild defaultOpen={active}>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  asChild
+                  tooltip={item.title}
+                  data-active={active ? "true" : undefined}
+                  className={active ? "text-primary font-medium" : ""}
+                >
+                  <Link to={item.url ?? "#"}>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </Link>
+                </SidebarMenuButton>
+                {item.items?.length ? (
+                  <>
+                    <CollapsibleTrigger asChild>
+                      <SidebarMenuAction className="data-[state=open]:rotate-90">
+                        <ChevronRight />
+                        <span className="sr-only">Toggle</span>
+                      </SidebarMenuAction>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {item.items?.map((subItem) => {
+                          const subItemActive = location.pathname.startsWith(
+                            subItem.url
+                          );
+
+                          return (
+                            <SidebarMenuSubItem key={subItem.title}>
+                              <SidebarMenuSubButton
+                                asChild
+                                data-active={subItemActive ? "true" : undefined}
+                                className={
+                                  subItemActive
+                                    ? "text-primary font-medium"
+                                    : ""
+                                }
+                              >
+                                <Link to={subItem.url}>
+                                  <span>{subItem.title}</span>
+                                </Link>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          );
+                        })}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  </>
+                ) : null}
+              </SidebarMenuItem>
+            </Collapsible>
+          );
+        })}
       </SidebarMenu>
     </SidebarGroup>
   );