diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css
index 85e9800f4ca..309783681b7 100644
--- a/src/components/CCIP/Drawer/Drawer.css
+++ b/src/components/CCIP/Drawer/Drawer.css
@@ -6,7 +6,16 @@
   height: 100vh;
   z-index: 9999;
   background-color: #1a2332e5;
-  backdrop-filter: blur(var(--space-8x));
+  backdrop-filter: blur(var(--space-8x)) opacity(0);
+  transition: backdrop-filter 0.5s ease-in-out;
+}
+
+.drawer__open.drawer {
+  backdrop-filter: blur(var(--space-8x)) opacity(1);
+}
+
+.drawer__close {
+  display: none;
 }
 
 .drawer__container {
@@ -15,8 +24,17 @@
   right: 0;
   width: 100%;
   height: 100vh;
-  overflow-y: auto;
   background-color: white;
+  transform: translateX(100%);
+  transition: transform 0.5s ease-in-out;
+}
+
+.drawer__content {
+  overflow-y: auto;
+}
+
+.drawer__open .drawer__container {
+  transform: translateX(0);
 }
 
 .drawer__closeMobile {
@@ -38,7 +56,7 @@
   .drawer__close {
     position: fixed;
     top: var(--space-4x);
-    right: calc(75% + var(--space-4x));
+    right: calc(100% + var(--space-4x));
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -53,6 +71,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .drawer__close:hover button {
+    background-color: var(--blue-700);
   }
 
   .drawer__close label {
diff --git a/src/components/CCIP/Drawer/Drawer.tsx b/src/components/CCIP/Drawer/Drawer.tsx
index 0bcb72eb5b0..4905d8072fd 100644
--- a/src/components/CCIP/Drawer/Drawer.tsx
+++ b/src/components/CCIP/Drawer/Drawer.tsx
@@ -1,17 +1,19 @@
 import { useStore } from "@nanostores/react"
 import "./Drawer.css"
 import { drawerContentStore } from "./drawerStore"
-import { useRef, useEffect } from "react"
+import { useRef, useEffect, useState } from "react"
+import { clsx } from "~/lib"
 
 function Drawer() {
   const drawerRef = useRef<HTMLDivElement>(null)
   const drawerContentRef = useRef<HTMLDivElement>(null)
   const $drawerContent = useStore(drawerContentStore)
+  const [isOpened, setIsOpened] = useState(false)
 
   // exit when press esc
   useEffect(() => {
     const handleKeyDown = (event) => {
-      if (event.key === "Escape") drawerContentStore.set(null)
+      if (event.key === "Escape") handleClose()
     }
 
     document.addEventListener("keydown", handleKeyDown)
@@ -20,6 +22,10 @@ function Drawer() {
     } else {
       document.body.style.overflow = "auto"
     }
+
+    if ($drawerContent) {
+      setIsOpened(true)
+    }
     return () => {
       document.removeEventListener("keydown", handleKeyDown)
       document.body.style.overflow = "auto"
@@ -30,23 +36,38 @@ function Drawer() {
 
   const handleClickOutside = (event) => {
     if (drawerRef.current && drawerContentRef.current && !drawerContentRef.current.contains(event.target as Node)) {
-      drawerContentStore.set(null)
+      handleClose()
     }
   }
 
+  const handleClose = () => {
+    setIsOpened(false)
+
+    // wait for animation to finish
+    setTimeout(() => {
+      drawerContentStore.set(null)
+    }, 500)
+  }
+
   return (
-    <div className="drawer" ref={drawerRef} onClick={handleClickOutside}>
-      <div className="drawer__close">
-        <button id="drawer-exit" onClick={() => drawerContentStore.set(null)}>
-          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M15.1667 1.33331L1.83337 14.6666M1.83337 1.33331L15.1667 14.6666" stroke="white" />
-          </svg>
-        </button>
-        <label htmlFor="drawer-exit">Esc</label>
-      </div>
+    <div
+      className={clsx("drawer", {
+        drawer__open: isOpened,
+      })}
+      ref={drawerRef}
+      onClick={handleClickOutside}
+    >
       <div className="drawer__container" ref={drawerContentRef}>
+        <div className="drawer__close">
+          <button id="drawer-exit" onClick={handleClose}>
+            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M15.1667 1.33331L1.83337 14.6666M1.83337 1.33331L15.1667 14.6666" stroke="white" />
+            </svg>
+          </button>
+          <label htmlFor="drawer-exit">Esc</label>
+        </div>
         <div className="drawer__content">
-          <button onClick={() => drawerContentStore.set(null)} className="drawer__closeMobile">
+          <button onClick={handleClose} className="drawer__closeMobile">
             <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M15.1667 1.33331L1.83337 14.6666M1.83337 1.33331L15.1667 14.6666" stroke="#000000" />
             </svg>