diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
index 61bfd98d..784f1187 100644
--- a/src/components/BottomSheet/BottomSheet.tsx
+++ b/src/components/BottomSheet/BottomSheet.tsx
@@ -22,7 +22,7 @@ function BottomSheet({ children, isDraggable = false, onClickOutside, isShowing,
   return (
     <SpringBottomSheet
       open={isShowing}
-      className={css(bottomSheetCss, isDraggable ? {} : nonDraggableCss)}
+      className={css(bottomSheetCss, isDraggable ? {} : nonDraggableCss, zIndexCss)}
       onDismiss={onClickOutside}
     >
       <div className={headerWrapperCss}>{headerElement}</div>
@@ -40,6 +40,16 @@ const nonDraggableCss = {
     display: 'none',
   },
 };
+
+const zIndexCss = {
+  '& [data-rsbs-overlay]': {
+    zIndex: '100 !important',
+  },
+  '& [data-rsbs-backdrop]': {
+    zIndex: '100 !important',
+  },
+};
+
 const contentCss = css({
   padding: '0 16px',
 });
diff --git a/src/components/Header/HeaderBase.tsx b/src/components/Header/HeaderBase.tsx
index 2c0225d1..be399267 100644
--- a/src/components/Header/HeaderBase.tsx
+++ b/src/components/Header/HeaderBase.tsx
@@ -57,7 +57,7 @@ const wrapperCss = flex({
   left: 0,
   right: 0,
   top: 0,
-  zIndex: 3,
+  zIndex: 'appBar',
   position: 'fixed',
   display: 'flex',
   alignItems: 'center',