diff --git a/src/components/BottomSheetModal.tsx b/src/components/BottomSheetModal.tsx
index 4ba8a384f..9009f3a46 100644
--- a/src/components/BottomSheetModal.tsx
+++ b/src/components/BottomSheetModal.tsx
@@ -35,6 +35,7 @@ const BottomSheetModalBackdrop = styled.div<{ className?: string }>`
   top: 0;
   transition: visibility 0s linear 0s, opacity ${AnimationSpeed.Medium};
   visibility: visible;
+  z-index: ${({ theme }) => theme.zIndex.modal - 1};
 `
 
 const Wrapper = styled.div<{ open: boolean }>`
@@ -43,7 +44,9 @@ const Wrapper = styled.div<{ open: boolean }>`
   left: 0;
   margin: 0;
   overflow: hidden;
+  position: absolute;
   right: 0;
+  z-index: ${({ theme }) => theme.zIndex.modal};
 
   @supports (overflow: clip) {
     overflow: clip;
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
index 8d62a53eb..a47348bda 100644
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -5,6 +5,7 @@ import { mix, rgba, transparentize } from 'polished'
 import { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
 import { DefaultTheme, ThemeProvider as StyledProvider } from 'styled-components/macro'
 
+import { Layer } from './layer'
 import type { Colors, Theme, ThemeBorderRadius } from './theme'
 
 export * from './animations'
@@ -98,6 +99,9 @@ const defaultBorderRadius = {
 
 export const defaultTheme = {
   borderRadius: defaultBorderRadius,
+  zIndex: {
+    modal: Layer.DIALOG,
+  },
   fontFamily: {
     font: '"Inter", sans-serif',
     variable: '"InterVariable", sans-serif',
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 97f777d5f..3c65f42ff 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -40,8 +40,13 @@ export type ThemeBorderRadius = {
   small: number
 }
 
+export type ZIndex = {
+  modal: number
+}
+
 export interface Attributes {
   borderRadius: ThemeBorderRadius
+  zIndex: ZIndex
   fontFamily:
     | string
     | {