diff --git a/components/Drawer/Drawer.js b/components/Drawer/Drawer.js
index cd5a69a86..1791c92fd 100644
--- a/components/Drawer/Drawer.js
+++ b/components/Drawer/Drawer.js
@@ -1,6 +1,5 @@
 import { node, string, bool } from 'prop-types';
 import classNames from 'classnames';
-import styles from './Drawer.module.css';
 
 Drawer.propTypes = {
   children: node.isRequired,
@@ -16,12 +15,16 @@ Drawer.defaultProps = {
 function Drawer({ children, className, isVisible }) {
   return (
     <div
-      className={classNames(className, {
-        [styles.visible]: isVisible,
-        [styles.hidden]: !isVisible,
-      })}
+      className={classNames(
+        className,
+        'hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2]',
+        {
+          '-left-0': isVisible,
+          '-left-[100%]': !isVisible,
+        },
+      )}
     >
-      <div className={styles.content}>{children}</div>
+      <div className="h-full w-full">{children}</div>
     </div>
   );
 }
diff --git a/components/Drawer/Drawer.module.css b/components/Drawer/Drawer.module.css
deleted file mode 100644
index e4fd69325..000000000
--- a/components/Drawer/Drawer.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.body {
-  display: none;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  overflow: hidden;
-  width: 100%;
-  z-index: 2;
-  transition: left 0.25s ease-in-out;
-}
-
-.hidden {
-  composes: body;
-  left: -100%;
-}
-
-.visible {
-  composes: body;
-  left: 0;
-}
-
-.content {
-  height: 100%;
-  width: 100%;
-}
-
-@media screen and (--large-viewport) {
-  .body {
-    display: block;
-  }
-}
-
-@media screen and (orientation: landscape) {
-  .body {
-    width: 320px;
-  }
-}
diff --git a/components/Drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/Drawer/__tests__/__snapshots__/Drawer.test.js.snap
index 464e0a1f0..23bc90577 100644
--- a/components/Drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/Drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Drawer should render with many props assigned 1`] = `
 <div
-  className="test-class visible"
+  className="test-class hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2] -left-0"
 >
   <div
-    className="content"
+    className="h-full w-full"
   >
     Test
   </div>
@@ -14,10 +14,10 @@ exports[`Drawer should render with many props assigned 1`] = `
 
 exports[`Drawer should render with required props 1`] = `
 <div
-  className="hidden"
+  className="hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2] -left-[100%]"
 >
   <div
-    className="content"
+    className="h-full w-full"
   >
     Test
   </div>