diff --git a/src/apps/dashboard/AppLayout.tsx b/src/apps/dashboard/AppLayout.tsx
index 15aae6512..ca3827f96 100644
--- a/src/apps/dashboard/AppLayout.tsx
+++ b/src/apps/dashboard/AppLayout.tsx
@@ -26,7 +26,7 @@ const AppLayout: FC<AppLayoutProps> = ({
     const location = useLocation();
     const { user } = useApi();
 
-    const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm'));
+    const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
     const isDrawerAvailable = Boolean(user)
         && !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
     const isDrawerOpen = isDrawerActive && isDrawerAvailable;
@@ -43,16 +43,16 @@ const AppLayout: FC<AppLayoutProps> = ({
                     sx={{
                         width: {
                             xs: '100%',
-                            sm: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
+                            md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
                         },
                         ml: {
                             xs: 0,
-                            sm: isDrawerAvailable ? DRAWER_WIDTH : 0
+                            md: isDrawerAvailable ? DRAWER_WIDTH : 0
                         }
                     }}
                 >
                     <AppToolbar
-                        isDrawerAvailable={!isSmallScreen && isDrawerAvailable}
+                        isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
                         isDrawerOpen={isDrawerOpen}
                         onDrawerButtonClick={onToggleDrawer}
                     />
diff --git a/src/apps/experimental/AppLayout.tsx b/src/apps/experimental/AppLayout.tsx
index 1aa5b5877..fd02220a7 100644
--- a/src/apps/experimental/AppLayout.tsx
+++ b/src/apps/experimental/AppLayout.tsx
@@ -20,7 +20,7 @@ const AppLayout = () => {
     const { user } = useApi();
     const location = useLocation();
 
-    const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm'));
+    const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
     const isDrawerAvailable = isDrawerPath(location.pathname) && Boolean(user);
     const isDrawerOpen = isDrawerActive && isDrawerAvailable;
 
@@ -36,16 +36,16 @@ const AppLayout = () => {
                     sx={{
                         width: {
                             xs: '100%',
-                            sm: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
+                            md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
                         },
                         ml: {
                             xs: 0,
-                            sm: isDrawerAvailable ? DRAWER_WIDTH : 0
+                            md: isDrawerAvailable ? DRAWER_WIDTH : 0
                         }
                     }}
                 >
                     <AppToolbar
-                        isDrawerAvailable={!isSmallScreen && isDrawerAvailable}
+                        isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
                         isDrawerOpen={isDrawerOpen}
                         onDrawerButtonClick={onToggleDrawer}
                     />
diff --git a/src/components/Backdrop.tsx b/src/components/Backdrop.tsx
index 4b8dda6c5..180fab194 100644
--- a/src/components/Backdrop.tsx
+++ b/src/components/Backdrop.tsx
@@ -14,7 +14,7 @@ const Backdrop = () => {
                 className='backdropContainer'
                 sx={{
                     left: {
-                        sm: DRAWER_WIDTH
+                        md: DRAWER_WIDTH
                     }
                 }}
             />
diff --git a/src/components/ResponsiveDrawer.tsx b/src/components/ResponsiveDrawer.tsx
index acc5079c8..22d6f73c3 100644
--- a/src/components/ResponsiveDrawer.tsx
+++ b/src/components/ResponsiveDrawer.tsx
@@ -21,9 +21,9 @@ const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
     onClose,
     onOpen
 }) => {
-    const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm'));
+    const isMediumScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
 
-    return ( isSmallScreen ? (
+    return ( isMediumScreen ? (
         /* DESKTOP DRAWER */
         <Drawer
             sx={{