diff --git a/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx b/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx
index a2d3f6303b058..ff3a19dcf4677 100644
--- a/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx
+++ b/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx
@@ -42,6 +42,7 @@ import { pluralize } from 'shared/utils/text';
 import shieldCheck from 'teleport/assets/shield-check.png';
 import cfg from 'teleport/config';
 import { TrashButton } from 'teleport/LocksV2/common';
+import { zIndexMap } from 'teleport/Navigation/zIndexMap';
 import { lockService } from 'teleport/services/locks';
 
 import {
@@ -200,6 +201,7 @@ export const LockCheckout = forwardRef<HTMLDivElement, Props>(
           top: 0;
           left: 0;
           overflow: hidden;
+          z-index: ${zIndexMap.checkoutSidePanel};
         `}
       >
         <Dimmer className={transitionState} />
diff --git a/web/packages/teleport/src/Navigation/zIndexMap.ts b/web/packages/teleport/src/Navigation/zIndexMap.ts
index aa682cc2133bc..f163c738e21ec 100644
--- a/web/packages/teleport/src/Navigation/zIndexMap.ts
+++ b/web/packages/teleport/src/Navigation/zIndexMap.ts
@@ -17,6 +17,11 @@
  */
 
 export const zIndexMap = {
+  // "checkoutSidePanel" z-index must be a higher value than "topBar" z-index.
+  // checkoutSidePanel encompasses entire height of the browser and
+  // the high z-index prevents navigational bits from rendering over
+  // the panel.
+  checkoutSidePanel: 100,
   topBar: 19,
   sideNavButtons: 18,
   sideNavContainer: 17,