diff --git a/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte b/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte
index 438432d5..3c990ce8 100644
--- a/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte
+++ b/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte
@@ -112,7 +112,7 @@
 {#if !isOrgLoaded}
   <SidebarSkeleton />
 {:else}
-  <Sidebar.Root collapsible="icon" class="ui:z-150!">
+  <Sidebar.Root collapsible="icon" class="ui:z-150!" mobileOverlayClass="ui:z-150!">
     <Sidebar.Header>
       <CourseSidebarLogo />
     </Sidebar.Header>
diff --git a/packages/ui/src/base/sidebar/sidebar.svelte b/packages/ui/src/base/sidebar/sidebar.svelte
index 010f149d..3edd08f8 100644
--- a/packages/ui/src/base/sidebar/sidebar.svelte
+++ b/packages/ui/src/base/sidebar/sidebar.svelte
@@ -11,12 +11,14 @@
     variant = 'sidebar',
     collapsible = 'offcanvas',
     class: className,
+    mobileOverlayClass,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     side?: 'left' | 'right';
     variant?: 'sidebar' | 'floating' | 'inset';
     collapsible?: 'offcanvas' | 'icon' | 'none';
+    mobileOverlayClass?: string;
   } = $props();
 
   const sidebar = useSidebar();
@@ -39,9 +41,9 @@
       data-sidebar="sidebar"
       data-slot="sidebar"
       data-mobile="true"
-      overlayClass="ui:z-150!"
+      overlayClass={mobileOverlayClass}
       class={cn(
-        'ui:bg-sidebar ui:text-sidebar-foreground ui:w-(--sidebar-width) ui:z-150! ui:p-0 ui:[&>button]:hidden',
+        'ui:bg-sidebar ui:text-sidebar-foreground ui:w-(--sidebar-width) ui:p-0 ui:[&>button]:hidden',
         className
       )}
       style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"