diff --git a/web/src/less/dialog.less b/web/src/less/dialog.less
index a7aac121..246f0634 100644
--- a/web/src/less/dialog.less
+++ b/web/src/less/dialog.less
@@ -2,7 +2,7 @@
 
 .dialog-wrapper {
   .flex(column, flex-start, center);
-  @apply fixed top-0 left-0 w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
+  @apply fixed top-0 left-0 w-full h-full pt-16 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
   .hide-scroll-bar();
 
   &.showup {
diff --git a/web/src/less/home.less b/web/src/less/home.less
index 77e2b609..64386fc0 100644
--- a/web/src/less/home.less
+++ b/web/src/less/home.less
@@ -15,7 +15,7 @@
       @apply relative w-full max-w-2xl min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
 
       > .memos-editor-wrapper {
-        @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-1;
+        @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10;
         background-color: #f6f5f4;
       }
     }
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index 302a53ef..238d6a2a 100644
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@@ -26,7 +26,7 @@
         @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
 
         > .more-action-btns-container {
-          @apply w-28 h-auto p-1 whitespace-nowrap rounded-lg bg-white;
+          @apply w-28 h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white;
           box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
           > .btns-container {
diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less
index 4838d22c..190d86f2 100644
--- a/web/src/less/shortcut-list.less
+++ b/web/src/less/shortcut-list.less
@@ -86,7 +86,8 @@
           @apply flex-col justify-start items-start absolute top-6 right-0 w-auto h-auto px-4 pt-3 hidden z-1;
 
           > .action-btns-container {
-            @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white shadow;
+            @apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white;
+            box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
             > .btn {
               @apply w-full text-sm leading-6 py-1 px-3 rounded text-left hover:bg-gray-100;
diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less
index ffc143fd..c5e5457d 100644
--- a/web/src/less/siderbar.less
+++ b/web/src/less/siderbar.less
@@ -1,7 +1,7 @@
 @import "./mixin.less";
 
 .sidebar-wrapper {
-  @apply fixed sm:sticky top-0 left-0 hidden sm:!flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 z-10 sm:z-0 bg-white sm:bg-transparent shadow-2xl sm:shadow-none overflow-x-hidden overflow-y-auto transition-all;
+  @apply fixed sm:sticky top-0 left-0 hidden sm:!flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 z-20 bg-white sm:bg-transparent shadow-2xl sm:shadow-none overflow-x-hidden overflow-y-auto transition-all;
   .hide-scroll-bar();
 
   > .close-container {
diff --git a/web/src/less/usage-heat-map.less b/web/src/less/usage-heat-map.less
index 0fdf08d5..a4f62bdd 100644
--- a/web/src/less/usage-heat-map.less
+++ b/web/src/less/usage-heat-map.less
@@ -58,9 +58,8 @@
   }
 
   > .usage-detail-container {
-    @apply fixed left-0 top-0 ml-2 -mt-9 p-2 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap;
+    @apply fixed left-0 top-0 ml-2 -mt-9 p-2 z-100 -translate-x-1/2 select-none text-white text-xs rounded whitespace-nowrap;
     background-color: rgba(0, 0, 0, 0.8);
-    z-index: 2;
 
     > .date-text {
       @apply text-gray-300;
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index a6178ce7..53e41590 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -20,6 +20,7 @@ module.exports = {
       },
       zIndex: {
         1: "1",
+        20: "20",
         100: "100",
         1000: "1000",
       },