diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index b0eeff188..98efa3824 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -28,11 +28,9 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
         <main className={s.main}>{children}</main>
       </Container>
       <Footer />
-      {displaySidebar && (
-        <Sidebar>
-          <CartSidebarView />
-        </Sidebar>
-      )}
+      <Sidebar show={displaySidebar}>
+        <CartSidebarView />
+      </Sidebar>
     </div>
   )
 }
diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css
index 1d8cbdb32..b9ba054e2 100644
--- a/components/ui/Sidebar/Sidebar.module.css
+++ b/components/ui/Sidebar/Sidebar.module.css
@@ -1,3 +1,3 @@
 .root {
-  @apply transition-all duration-75 ease-in-out;
+  @apply fixed inset-0 overflow-hidden h-full z-50;
 }
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 35b1e3700..7459240c4 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -1,28 +1,48 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Sidebar.module.css'
-
+import { Transition } from '@headlessui/react'
 interface Props {
   className?: string
   children?: any
+  show?: boolean
 }
 
-const Sidebar: FC<Props> = ({ className, children }) => {
+const Sidebar: FC<Props> = ({ className, children, show = true }) => {
   const rootClassName = cn(s.root, className)
   return (
-    <div className={rootClassName}>
-      <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25 z-50">
+    <Transition show={show}>
+      <div className={rootClassName}>
         <div className="absolute inset-0 overflow-hidden">
-          <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
-            <div className="w-screen max-w-2xl">
-              <div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
-                {children}
+          <Transition.Child
+            enter="transition-opacity ease-linear duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity ease-linear duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="absolute inset-0 bg-black bg-opacity-25 transition-opacity" />
+          </Transition.Child>
+          <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
+            <Transition.Child
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <div className="h-full w-screen max-w-2xl">
+                <div className="h-full flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
+                  {children}
+                </div>
               </div>
-            </div>
+            </Transition.Child>
           </section>
         </div>
       </div>
-    </div>
+    </Transition>
   )
 }
 
diff --git a/package.json b/package.json
index bdbf01731..df732c6fe 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "singleQuote": true
   },
   "dependencies": {
+    "@headlessui/react": "^0.2.0",
     "@tailwindcss/ui": "^0.6.2",
     "@types/classnames": "^2.2.10",
     "classnames": "^2.2.6",
diff --git a/yarn.lock b/yarn.lock
index 7a29b837d..ea992a362 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1390,6 +1390,11 @@
     is-promise "4.0.0"
     tslib "~2.0.1"
 
+"@headlessui/react@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-0.2.0.tgz#a31f90892d736243ba91c1474f534b3256d0c538"
+  integrity sha512-YV+vF+QhTRcspydPdHF3ZXe+FkOiJpRdqMjjFIIX9bSdT2O2T7GurgKQdGgamNUM+B99MZBOTRqxS8Dlh485eg==
+
 "@next/env@9.5.4-canary.23":
   version "9.5.4-canary.23"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.4-canary.23.tgz#2078ce80a1d9424bab7ec169dcf98b8d684bc845"