diff --git a/.changeset/fuzzy-boxes-draw.md b/.changeset/fuzzy-boxes-draw.md
new file mode 100644
index 000000000..fc04e1380
--- /dev/null
+++ b/.changeset/fuzzy-boxes-draw.md
@@ -0,0 +1,5 @@
+---
+"@accelint/design-toolkit": minor
+---
+
+Fixed layout issue with drawer
diff --git a/packages/design-toolkit/src/components/drawer/styles.module.css b/packages/design-toolkit/src/components/drawer/styles.module.css
index 6d8be2f7b..068008796 100644
--- a/packages/design-toolkit/src/components/drawer/styles.module.css
+++ b/packages/design-toolkit/src/components/drawer/styles.module.css
@@ -29,7 +29,7 @@
     --drawer-main-rows: var(--drawer-main-row-start) /
       var(--drawer-main-row-end);
 
-    @apply relative grid h-full w-full;
+    @apply relative grid h-full w-full overflow-hidden;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto 1fr auto;
 
@@ -75,11 +75,15 @@
       }
 
       @variant group-extend-right/layout {
-        @apply col-end-3;
+        @variant group-has-[[data-placement=right][data-open]]/layout {
+          @apply col-end-3;
+        }
       }
 
       @variant group-extend-left/layout {
-        @apply col-start-2;
+        @variant group-has-[[data-placement=left][data-open]]/layout {
+          @apply col-start-2;
+        }
       }
 
       @variant group-data-[extend=bottom]/layout {
@@ -96,11 +100,15 @@
       }
 
       @variant group-extend-top/layout {
-        @apply row-start-2;
+        @variant group-has-[[data-placement=top][data-open]]/layout {
+          @apply row-start-2;
+        }
       }
 
       @variant group-extend-bottom/layout {
-        @apply row-end-3;
+        @variant group-has-[[data-placement=bottom][data-open]]/layout {
+          @apply row-end-3;
+        }
       }
 
       @variant group-data-[extend=left]/layout {
@@ -117,11 +125,15 @@
       }
 
       @variant group-extend-right/layout {
-        @apply col-end-3;
+        @variant group-has-[[data-placement=right][data-open]]/layout {
+          @apply col-end-3;
+        }
       }
 
       @variant group-extend-left/layout {
-        @apply col-start-2;
+        @variant group-has-[[data-placement=left][data-open]]/layout {
+          @apply col-start-2;
+        }
       }
 
       @variant group-data-[extend=top]/layout {
@@ -138,11 +150,15 @@
       }
 
       @variant group-extend-top/layout {
-        @apply row-start-2;
+        @variant group-has-[[data-placement=top][data-open]]/layout {
+          @apply row-start-2;
+        }
       }
 
       @variant group-extend-bottom/layout {
-        @apply row-end-3;
+        @variant group-has-[[data-placement=bottom][data-open]]/layout {
+          @apply row-end-3;
+        }
       }
 
       @variant group-data-[extend=right]/layout {
@@ -233,12 +249,14 @@
     @apply gap-s p-l flex h-full min-h-0 flex-col;
     opacity: 0;
     pointer-events: none;
+    visibility: hidden;
 
     @variant motion-safe {
       transition:
         transform var(--animation-duration-fast)
           var(--animation-easing-standard),
-        opacity var(--animation-duration-fast) var(--animation-easing-standard);
+        opacity var(--animation-duration-fast) var(--animation-easing-standard),
+        visibility 0s var(--animation-duration-fast);
     }
 
     @variant group-placement-left/drawer {
@@ -260,7 +278,9 @@
     @variant group-open/drawer {
       opacity: 1;
       pointer-events: auto;
+      visibility: visible;
       transform: translate(0, 0);
+      transition-delay: 0s;
     }
 
     @variant group-placement-left/drawer {