diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index ccfdc30..e565170 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -21,11 +21,15 @@ export function Drawer (props: DrawerProps) {
         return () => { document.body.removeChild(current) }
     }, [])
 
-    const cardStyle = 'absolute h-full right-0 transition-transform transform translate-x-full duration-100 pointer-events-auto'
+    const cardStyle = 'absolute h-full right-0 transition-transform transform duration-100 pointer-events-auto'
 
     const container = (
         <div className={classnames(props.className, 'z-9999 pointer-events-none absolute inset-0')}>
-            <Card className={classnames(cardStyle, props.bodyClassName, { 'translate-x-0': props.visible })} style={{ width: props.width ?? 400 }}>{props.children}</Card>
+            <Card className={classnames(
+                cardStyle,
+                props.bodyClassName,
+                { 'translate-x-0': props.visible, 'translate-x-full': !props.visible },
+            )} style={{ width: props.width ?? 400 }}>{props.children}</Card>
         </div>
     )