diff --git a/packages/payload/src/admin/components/elements/Nav/index.scss b/packages/payload/src/admin/components/elements/Nav/index.scss
index 19b50547e8..56eee07267 100644
--- a/packages/payload/src/admin/components/elements/Nav/index.scss
+++ b/packages/payload/src/admin/components/elements/Nav/index.scss
@@ -8,11 +8,11 @@
   height: 100vh;
   width: var(--nav-width);
   border-right: 1px solid var(--theme-elevation-100);
-  transform: translate3d(calc(var(--nav-width) * -1), 0, 0);
+  opacity: 0;
+  transition: opacity var(--nav-trans-time) ease-in-out;
 
   &--nav-open {
-    transform: translate3d(0, 0, 0);
-    transition: transform var(--nav-trans-time) linear;
+    opacity: 1;
   }
 
   &__header {
@@ -141,10 +141,6 @@
       line-height: base(1.5);
     }
 
-    &--nav-open {
-      transition: none;
-    }
-
     &__mobile-close {
       display: flex;
       height: 100%;
diff --git a/packages/payload/src/admin/components/templates/Default/index.scss b/packages/payload/src/admin/components/templates/Default/index.scss
index 92c2100f9c..fd59bc638d 100644
--- a/packages/payload/src/admin/components/templates/Default/index.scss
+++ b/packages/payload/src/admin/components/templates/Default/index.scss
@@ -2,17 +2,18 @@
 
 .template-default {
   min-height: 100vh;
-  display: flex;
+  display: grid;
   position: relative;
-  width: calc(100% + var(--nav-width));
-  transform: translate3d(calc(var(--nav-width) * -1), 0, 0);
+  grid-template-columns: 0 auto;
+  transition: grid-template-columns var(--nav-trans-time) linear;
+  isolation: isolate;
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
 
   &--nav-open {
     width: 100%;
-    transition:
-      width var(--nav-trans-time) linear,
-      transform var(--nav-trans-time) linear;
-    transform: translate3d(0, 0, 0);
+    grid-template-columns: var(--nav-width) auto;
 
     .template-default {
       &__nav-overlay {
@@ -38,6 +39,18 @@
     width: 100%;
     flex-grow: 1;
     position: relative;
+    background-color: var(--theme-bg);
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      background-color: inherit;
+      opacity: 0;
+      z-index: var(--z-status);
+      visibility: hidden;
+      transition: all var(--nav-trans-time) linear;
+    }
   }
 
   @include mid-break {
@@ -50,7 +63,12 @@
 
   @include small-break {
     &--nav-open {
-      transition: none;
+      .template-default__wrap {
+        &:before {
+          opacity: 0.7;
+          visibility: visible;
+        }
+      }
     }
 
     &__nav-toggler-wrapper {
@@ -64,7 +82,7 @@
 
     .template-default {
       &__wrap {
-        transition: none;
+        min-width: 100vw;
       }
     }
   }