diff --git a/src/components/generic/Drawer.tsx b/src/components/generic/Drawer.tsx
index 66f7118d..50ef5776 100644
--- a/src/components/generic/Drawer.tsx
+++ b/src/components/generic/Drawer.tsx
@@ -14,17 +14,21 @@ export const Drawer = ({
   open,
   permenant,
   onClose,
+  className,
   children,
+
   ...props
 }: DrawerProps): JSX.Element => {
   return (
     <>
-      {open && <Blur disableOnMd={true} onClick={onClose} />}
+      {open && (
+        <Blur className={className} disableOnMd={true} onClick={onClose} />
+      )}
 
       <aside
         className={`transform top-0 left-0 bg-white dark:bg-secondaryDark shadow-md max-w-xs w-full border-r dark:border-gray-600 h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
           permenant ? '' : 'absolute'
-        } ${open ? 'translate-x-0' : '-translate-x-full'}`}
+        } ${open ? 'translate-x-0' : '-translate-x-full'} ${className}`}
         {...props}
       >
         {children}
diff --git a/src/components/menu/MobileNav.tsx b/src/components/menu/MobileNav.tsx
index 4c6ffd75..e4ebbc1a 100644
--- a/src/components/menu/MobileNav.tsx
+++ b/src/components/menu/MobileNav.tsx
@@ -18,6 +18,7 @@ export const MobileNav = (): JSX.Element => {
       onClose={(): void => {
         dispatch(closeMobileNav());
       }}
+      className="z-50"
     >
       <div className="flex flex-col">
         <div className="m-auto my-6">