diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index a554b1119..530cea1ae 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -1,4 +1,5 @@
 .root {
+  @apply relative;
 }
 
 .list {
@@ -20,6 +21,10 @@
   @apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1 bg-primary;
   max-width: 160px;
 
+  &.dropdownMenuContainer {
+    @apply shadow-lg overflow-hidden relative grid py-2;
+  }
+
   & .link {
     @apply px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
   }
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index e005f625a..b25ffee6c 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -52,19 +52,17 @@ const UserNav: FC<Props> = ({ className }) => {
 
       {displayDropdown && (
         <div className={s.dropdownMenu}>
-          <div className="shadow-lg overflow-hidden">
-            <nav className="relative grid bg-primary py-2">
-              <Link href="#">
-                <a className={s.link}>My Purchases</a>
-              </Link>
-              <Link href="#">
-                <a className={s.link}>My Account</a>
-              </Link>
-              <Link href="#">
-                <a className={cn(s.link, 'mt-4')}>Logout</a>
-              </Link>
-            </nav>
-          </div>
+          <nav className={s.dropdownMenuContainer}>
+            <Link href="#">
+              <a className={s.link}>My Purchases</a>
+            </Link>
+            <Link href="#">
+              <a className={s.link}>My Account</a>
+            </Link>
+            <Link href="#">
+              <a className={cn(s.link, 'mt-4')}>Logout</a>
+            </Link>
+          </nav>
         </div>
       )}
     </nav>