diff --git a/dapp/src/components/DocsDrawer/index.tsx b/dapp/src/components/DocsDrawer/index.tsx
index 1b6ff3b7d..2aeb2a0b2 100644
--- a/dapp/src/components/DocsDrawer/index.tsx
+++ b/dapp/src/components/DocsDrawer/index.tsx
@@ -16,10 +16,7 @@ export default function DocsDrawer() {
     <Drawer size="lg" placement="right" isOpen={isOpen} onClose={onClose}>
       <DrawerOverlay />
       {/* TODO: Set the correct background color */}
-      <DrawerContent
-        zIndex="drawer"
-        bg={useColorModeValue("grey.100", "grey.100")}
-      >
+      <DrawerContent bg={useColorModeValue("grey.100", "grey.100")}>
         <DrawerBody>
           {/* TODO: Add a documentation */}
           <Text>Documentation</Text>
diff --git a/dapp/src/components/Sidebar/index.tsx b/dapp/src/components/Sidebar/index.tsx
index 6160327e5..a932cef5e 100644
--- a/dapp/src/components/Sidebar/index.tsx
+++ b/dapp/src/components/Sidebar/index.tsx
@@ -5,7 +5,7 @@ import DocsDrawer from "../DocsDrawer"
 
 export default function Sidebar({ marginTop }: { marginTop?: string }) {
   const { modalType } = useStakingFlowContext()
-  const { isOpen, onOpen } = useDocsDrawerContext()
+  const { onOpen } = useDocsDrawerContext()
 
   return (
     <>
@@ -17,11 +17,7 @@ export default function Sidebar({ marginTop }: { marginTop?: string }) {
         width={modalType ? "312px" : "0"}
         height="100vh"
         transition="width 0.3s"
-        // TODO: Components should be positioned correctly to avoid changing the z-index.
-        // zIndex="sidebar"
-        // Currently, the z-index property doesn't set correctly.
-        // To avoid the component Sidebar covering the DocsDrawer, change the z-index manually.
-        zIndex={isOpen ? "modal" : "sidebar"}
+        zIndex="sidebar"
         // TODO: Set the correct background color
         bg={useColorModeValue("white", "white")}
         mt={marginTop}
diff --git a/dapp/src/theme/Drawer.ts b/dapp/src/theme/Drawer.ts
new file mode 100644
index 000000000..3a8efdbfd
--- /dev/null
+++ b/dapp/src/theme/Drawer.ts
@@ -0,0 +1,9 @@
+const Drawer = {
+  baseStyle: {
+    dialogContainer: {
+      zIndex: "drawer",
+    },
+  },
+}
+
+export default Drawer
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index e410e0b12..fa7ac4f75 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -5,6 +5,7 @@ import Switch from "./Switch"
 import { colors, zIndices } from "./utils"
 import Stepper from "./Stepper"
 import Tabs from "./Tabs"
+import Drawer from "./Drawer"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
@@ -27,6 +28,7 @@ const defaultTheme = {
     Switch,
     Stepper,
     Tabs,
+    Drawer,
   },
 }