diff --git a/components/Backdrop/Backdrop.tsx b/components/Backdrop/Backdrop.tsx
index a6ae96641..60ce3af84 100644
--- a/components/Backdrop/Backdrop.tsx
+++ b/components/Backdrop/Backdrop.tsx
@@ -1,15 +1,28 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import { createPortal } from 'react-dom'
+import { useTransition } from 'react-transition-state'
 
 export const Backdrop: FC<{
   onClick: (() => void) | undefined
   className?: string | undefined
 }> = (props) => {
   const { onClick, className } = props
+  const [{ status }, toggle] = useTransition({
+    timeout: 500,
+    preEnter: true,
+  })
+
+  useEffect(() => {
+    toggle(true)
+  }, [toggle])
 
   return createPortal(
     <div
-      className={`fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80 ${className}`}
+      className={`fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80
+         ${className}
+         ${status === 'preEnter' || status === 'entering' ? '' : 'opacity-0'}
+         ${status === 'entered' ? 'opacity-100' : ''}
+         `}
       onClick={onClick}
     ></div>,
     document.getElementById('backdrop-root')!
diff --git a/components/SideNavbar/SideNavbar.tsx b/components/SideNavbar/SideNavbar.tsx
index 1441cc1be..6b1114c7f 100644
--- a/components/SideNavbar/SideNavbar.tsx
+++ b/components/SideNavbar/SideNavbar.tsx
@@ -18,7 +18,10 @@ export const SideNavbar: FC<{}> = () => {
 
   return (
     <>
-      <Backdrop onClick={closeNav} className="lg:hidden" />
+      <Backdrop
+        onClick={closeNav}
+        className="lg:hidden transition duration-300 delay-200"
+      />
       {createPortal(
         <div
           className={`fixed top-0 left-0 z-[100] h-full w-[75%] transition-all lg:hidden