diff --git a/src/webapp/components/navigation/NavbarToggle.tsx b/src/webapp/components/navigation/NavbarToggle.tsx
index 443d3d11..7047f4e2 100644
--- a/src/webapp/components/navigation/NavbarToggle.tsx
+++ b/src/webapp/components/navigation/NavbarToggle.tsx
@@ -2,14 +2,32 @@
 
 import { useNavbarContext } from '@/providers/navbar';
 import { ActionIcon } from '@mantine/core';
+import { Fragment } from 'react';
 import { FiSidebar } from 'react-icons/fi';
 
 export default function NavbarToggle() {
-  const { toggle } = useNavbarContext();
+  const { toggleMobile, toggleDesktop } = useNavbarContext();
 
   return (
-    <ActionIcon variant="light" color="gray" size={'lg'} onClick={toggle}>
-      <FiSidebar />
-    </ActionIcon>
+    <Fragment>
+      <ActionIcon
+        variant="light"
+        color="gray"
+        size={'lg'}
+        onClick={toggleMobile}
+        hiddenFrom="sm"
+      >
+        <FiSidebar />
+      </ActionIcon>
+      <ActionIcon
+        variant="light"
+        color="gray"
+        size={'lg'}
+        onClick={toggleDesktop}
+        visibleFrom="sm"
+      >
+        <FiSidebar />
+      </ActionIcon>
+    </Fragment>
   );
 }
diff --git a/src/webapp/components/navigation/appLayout/AppLayout.tsx b/src/webapp/components/navigation/appLayout/AppLayout.tsx
index e48e442d..c5b8d33e 100644
--- a/src/webapp/components/navigation/appLayout/AppLayout.tsx
+++ b/src/webapp/components/navigation/appLayout/AppLayout.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 export default function AppLayout(props: Props) {
-  const { opened } = useNavbarContext();
+  const { mobileOpened, desktopOpened } = useNavbarContext();
 
   return (
     <AppShell
@@ -16,7 +16,7 @@ export default function AppLayout(props: Props) {
       navbar={{
         width: 300,
         breakpoint: 'xs',
-        collapsed: { mobile: !opened, desktop: !opened },
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
     >
       {/*<Header />*/}
diff --git a/src/webapp/providers/navbar.tsx b/src/webapp/providers/navbar.tsx
index d5431194..c4d432ea 100644
--- a/src/webapp/providers/navbar.tsx
+++ b/src/webapp/providers/navbar.tsx
@@ -4,25 +4,32 @@ import React, { createContext, useContext } from 'react';
 import { useDisclosure } from '@mantine/hooks';
 
 interface NavbarContext {
-  opened: boolean;
-  toggle: () => void;
+  mobileOpened: boolean;
+  desktopOpened: boolean;
+  toggleMobile: () => void;
+  toggleDesktop: () => void;
 }
 
 const NavbarContext = createContext<NavbarContext>({
-  opened: true,
-  toggle: () => {},
+  mobileOpened: false,
+  desktopOpened: true,
+  toggleMobile: () => {},
+  toggleDesktop: () => {},
 });
 
 interface ProviderProps {
   children: React.ReactNode;
 }
 
-export function NavbarProvider(props: ProviderProps) {
-  const [opened, { toggle }] = useDisclosure();
+export function NavbarProvider({ children }: ProviderProps) {
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(false);
+  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
 
   return (
-    <NavbarContext.Provider value={{ opened, toggle }}>
-      {props.children}
+    <NavbarContext.Provider
+      value={{ mobileOpened, desktopOpened, toggleMobile, toggleDesktop }}
+    >
+      {children}
     </NavbarContext.Provider>
   );
 }