diff --git a/src/layouts/config-layout.ts b/src/layouts/config-layout.ts
index 02ee09715..fe17664c1 100644
--- a/src/layouts/config-layout.ts
+++ b/src/layouts/config-layout.ts
@@ -9,4 +9,5 @@ export const HEADER = {
 export const NAV = {
   W_VERTICAL: 260,
   W_MINI: 72,
+  W_VERTICAL_MINI: 72 + 25,
 };
diff --git a/src/layouts/dashboard/header.tsx b/src/layouts/dashboard/header.tsx
index 7c7189a9f..92650262c 100644
--- a/src/layouts/dashboard/header.tsx
+++ b/src/layouts/dashboard/header.tsx
@@ -90,7 +90,7 @@ export default function Header({ onOpenNav }: Props) {
             height: HEADER.H_DESKTOP_OFFSET,
           }),
           ...(isNavMini && {
-            width: `calc(100% - ${NAV.W_MINI * 2 + 1}px)`,
+            width: `calc(100% - ${NAV.W_MINI + NAV.W_VERTICAL_MINI}px)`,
           }),
         }),
 
diff --git a/src/layouts/dashboard/nav-vertical-mini.tsx b/src/layouts/dashboard/nav-vertical-mini.tsx
index 99230dd05..c28c2042c 100644
--- a/src/layouts/dashboard/nav-vertical-mini.tsx
+++ b/src/layouts/dashboard/nav-vertical-mini.tsx
@@ -24,7 +24,7 @@ export default function NavVerticalMini() {
       component="nav"
       sx={{
         flexShrink: { lg: 0 },
-        width: { lg: NAV.W_MINI + 25 },
+        width: { lg: NAV.W_VERTICAL_MINI },
       }}
     >
       <NavToggleButton
@@ -39,7 +39,7 @@ export default function NavVerticalMini() {
           pb: 2,
           height: 1,
           position: 'fixed',
-          width: NAV.W_MINI + 25 ,
+          width: NAV.W_VERTICAL_MINI ,
           borderRight: (theme) => `dashed 1px ${theme.palette.divider}`,
           ...hideScroll.x,
         }}