diff --git a/packages/invoice-dashboard/src/lib/dashboard/drawer.svelte b/packages/invoice-dashboard/src/lib/dashboard/drawer.svelte
index 4d570a11..194c6343 100644
--- a/packages/invoice-dashboard/src/lib/dashboard/drawer.svelte
+++ b/packages/invoice-dashboard/src/lib/dashboard/drawer.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div
-  class={`drawer-overlay ${active ? "active" : "hidden"}`}
+  class={`drawer-overlay ${active ? "active-overlay" : "hidden"}`}
   on:click|stopPropagation={onClose}
 ></div>
 <div bind:this={drawerElement} class={`drawer ${active ? "active" : "hidden"}`}>
@@ -28,7 +28,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: transparent;
     z-index: 200;
   }
 
@@ -45,18 +45,19 @@
   }
   .drawer {
     z-index: 1000;
-    display: flex;
-    position: absolute;
-    top: 10px;
-    right: 10px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
     height: fit-content;
-    display: flex;
     width: 800px;
-    transition: all 300ms;
+
+    transform: translateX(0);
   }
 
   @media only screen and (max-width: 880px) {
     .drawer {
+      position: absolute;
+      left: 50%;
       right: unset;
       width: 600px;
     }
@@ -100,7 +101,17 @@
   }
 
   .active {
-    transform: translateX(0);
+    transform: translate(-50%, -50%);
+  }
+
+  @media only screen and (max-width: 880px) {
+    .active {
+      transform: translate(-20%, -50%);
+    }
+  }
+
+  .active-overlay {
+    background-color: rgba(0, 0, 0, 0.5);
   }
 
   .hidden {