diff --git a/packages/ui/src/components/core-app-shell/core-app-shell.tsx b/packages/ui/src/components/core-app-shell/core-app-shell.tsx
index a4806cc..b144f44 100644
--- a/packages/ui/src/components/core-app-shell/core-app-shell.tsx
+++ b/packages/ui/src/components/core-app-shell/core-app-shell.tsx
@@ -26,6 +26,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
   const isDoubleSidebar = features?.withDoubleSidebar;
   const isTopNav = variant === 'top-nav';
   const isFooterOffset = variant === 'header-first';
+  const isSidebarFirst = variant === 'sidebar-first';
   
   // Calculate Navbar Width based on states
   const navbarWidth = useMemo(() => {
@@ -142,14 +143,18 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
         </Box>
         <Box hiddenFrom="sm" h="100%">
           <Flex direction="column" h="100%">
+            {
+              isSidebarFirst && (
+                <Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
+                  <Button fullWidth variant="default" onClick={toggleMobile}>
+                    Close
+                  </Button>
+                </Box>
+              )
+            }
             <Box flex={1} style={{ overflowY: 'auto' }}>
               {slots.sidebarMobile || slots.sidebar}
             </Box>
-            <Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
-              <Button fullWidth variant="default" onClick={toggleMobile}>
-                Close
-              </Button>
-            </Box>
           </Flex>
         </Box>
       </AppShell.Navbar>