diff --git a/frontend/src/lib/components/sidebar/nav-main.svelte b/frontend/src/lib/components/sidebar/nav-main.svelte
index 241ac726..d8bdf508 100644
--- a/frontend/src/lib/components/sidebar/nav-main.svelte
+++ b/frontend/src/lib/components/sidebar/nav-main.svelte
@@ -5,6 +5,7 @@
 	import { useSidebar } from '$lib/components/ui/sidebar/context.svelte.js';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import { authStore, userHasPermission } from '$lib/auth';
+	import { page } from '$app/state';
 
 	let {
 		items
@@ -23,6 +24,11 @@
 		}[];
 	} = $props();
 
+	function isUrlActive(url: string): boolean {
+		const pathname = page.url.pathname;
+		return pathname === url || pathname.startsWith(url + '/');
+	}
+
 	// Filtrar items según permisos (si el item tiene la propiedad 'permission')
 	const filteredItems = $derived(
 		items
@@ -195,7 +201,10 @@
 					</Sidebar.MenuItem>
 				{:else}
 					<!-- Sidebar Expandido: Collapsible original -->
-					<Collapsible.Root open={item.isActive} class="group/collapsible">
+					<Collapsible.Root
+						open={item.isActive || item.items?.some((sub) => isUrlActive(sub.url))}
+						class="group/collapsible"
+					>
 						{#snippet child({ props })}
 							<Sidebar.MenuItem {...props}>
 								<Collapsible.Trigger>
@@ -215,7 +224,7 @@
 									<Sidebar.MenuSub>
 										{#each item.items as subItem (subItem.title)}
 											<Sidebar.MenuSubItem>
-												<Sidebar.MenuSubButton>
+												<Sidebar.MenuSubButton isActive={isUrlActive(subItem.url)}>
 													{#snippet child({ props })}
 														<a href={subItem.url} {...props}>
 															<span>{subItem.title}</span>