diff --git a/src/common/components/PageLayout.jsx b/src/common/components/PageLayout.jsx
index d25ae2eb4e..2b74a2d43f 100644
--- a/src/common/components/PageLayout.jsx
+++ b/src/common/components/PageLayout.jsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
   },
   desktopDrawer: {
-    width: (props) => (props.miniVariant ? theme.dimensions.miniDrawerWidthDesktop : theme.dimensions.drawerWidthDesktop),
+    width: (props) => (props.miniVariant ? `calc(${theme.spacing(7)} + 1px)` : theme.dimensions.drawerWidthDesktop),
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
@@ -81,9 +81,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => {
 
   const [openDrawer, setOpenDrawer] = useState(false);
 
-  const toggleDrawer = () => {
-    setMiniVariant(!miniVariant);
-  };
+  const toggleDrawer = () => setMiniVariant(!miniVariant);
 
   return desktop ? (
     <div className={classes.desktopRoot}>
diff --git a/src/common/theme/dimensions.js b/src/common/theme/dimensions.js
index 558893911e..4930803a09 100644
--- a/src/common/theme/dimensions.js
+++ b/src/common/theme/dimensions.js
@@ -2,7 +2,6 @@ export default {
   sidebarWidth: '28%',
   sidebarWidthTablet: '52px',
   drawerWidthDesktop: '360px',
-  miniDrawerWidthDesktop: '56px',
   drawerWidthTablet: '320px',
   drawerHeightPhone: '250px',
   filterFormWidth: '160px',