diff --git a/components/admin/layout-container/LayoutContainer.module.scss b/components/admin/layout-container/LayoutContainer.module.scss
deleted file mode 100644
index cca9d1c9..00000000
--- a/components/admin/layout-container/LayoutContainer.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.root {
-  p {
-    line-height: 1.6;
-  }
-}
diff --git a/components/admin/layout-container/LayoutContainer.tsx b/components/admin/layout-container/LayoutContainer.tsx
index 596b87c7..db9dae6f 100644
--- a/components/admin/layout-container/LayoutContainer.tsx
+++ b/components/admin/layout-container/LayoutContainer.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex, SlideFade, useBreakpointValue } from '@chakra-ui/react'
-import styles from './LayoutContainer.module.scss'
 import Nav from '../nav'
 
 const LayoutContainer = ({ children }) => {
@@ -9,7 +8,6 @@ const LayoutContainer = ({ children }) => {
       <SlideFade in>
         <Flex justifyContent="center">
           <Box
-            className={styles.root}
             minHeight={useBreakpointValue({
               base: 'calc(100vh - 186px)',
               lg: 'calc(100vh - 140px)',
diff --git a/components/drawer/Drawer.module.scss b/components/drawer/Drawer.module.scss
deleted file mode 100644
index 80c27977..00000000
--- a/components/drawer/Drawer.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.drawer {
-  position: fixed;
-  width: 300px;
-  height: 100vh;
-  overflow-y: scroll;
-  border-right: 1px solid rgb(226, 232, 240);
-  background-color: white;
-  z-index: 3;
-}
diff --git a/components/drawer/Drawer.tsx b/components/drawer/Drawer.tsx
index 4feef548..c8c5a94e 100644
--- a/components/drawer/Drawer.tsx
+++ b/components/drawer/Drawer.tsx
@@ -14,6 +14,7 @@ import {
   Heading,
   Button,
   Text,
+  chakra,
   useBreakpointValue,
 } from '@chakra-ui/react'
 import { HiOutlineSearch, HiOutlineX } from 'react-icons/hi'
@@ -21,7 +22,6 @@ import { HiOutlineSearch, HiOutlineX } from 'react-icons/hi'
 import VolunteerSwitch from '@components/volunteer-switch'
 import customMultiSelectStyles from '@styles/select-styles'
 import { REMOTE_URL } from '@helpers/config'
-import styles from './Drawer.module.scss'
 import LogoImage from '../../public/logo.png'
 
 const Drawer = ({
@@ -39,7 +39,15 @@ const Drawer = ({
   const maxInputWidth = useBreakpointValue({ base: 'initial', md: '280px' })
 
   return (
-    <div className={styles.drawer}>
+    <chakra.div
+      position="fixed"
+      width="300px"
+      height="100vh"
+      overflowY="scroll"
+      borderRight="1px solid rgb(226, 232, 240)"
+      backgroundColor="white"
+      zIndex="3"
+    >
       <Flex height="100%" direction="column" justifyContent="space-between">
         <Box>
           <Link as={NextLink} href={REMOTE_URL}>
@@ -125,10 +133,7 @@ const Drawer = ({
           </Flex>
         </Box>
         <Box p="1rem">
-          <Link
-            href={`${window.location.href}new-listing`}
-            target="_blank"
-          >
+          <Link href={`${window.location.href}new-listing`} target="_blank">
             <Button my="2rem">Propose new listing</Button>
           </Link>
           <Heading as="h2" fontSize="1.25rem">
@@ -148,7 +153,7 @@ const Drawer = ({
           </Link>
         </Box>
       </Flex>
-    </div>
+    </chakra.div>
   )
 }