diff --git a/components/core/I18nWidget/I18nWidget.module.css b/components/core/I18nWidget/I18nWidget.module.css
index e9986cd32..afb5026f4 100644
--- a/components/core/I18nWidget/I18nWidget.module.css
+++ b/components/core/I18nWidget/I18nWidget.module.css
@@ -3,7 +3,7 @@
 }
 
 .button {
-  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
+  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center outline-none focus:outline-none;
 }
 
 .dropdownMenu {
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index a22a1868c..f96b44935 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -2,9 +2,6 @@
   @apply relative;
 }
 
-.mainContainer {
-}
-
 .list {
   @apply flex flex-row items-center justify-items-end h-full;
 }
@@ -25,3 +22,11 @@
     @apply outline-none;
   }
 }
+
+.bagCount {
+  @apply border border-accents-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
+}
+
+.avatarButton {
+  @apply inline-flex justify-center rounded-full outline-none focus:outline-none;
+}
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index bdf867095..20b59e24a 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -20,7 +20,6 @@ const countItems = (count: number, items: any[]) =>
 const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
-
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
   return (
@@ -32,11 +31,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
           >
             <Bag />
-            {itemsCount > 0 && (
-              <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
-                {itemsCount}
-              </span>
-            )}
+            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
           </li>
           <Link href="/wishlist">
             <li className={s.item}>
@@ -45,16 +40,14 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
           </Link>
           <li className={s.item}>
             <Menu>
-              {({ open }) => {
-                return (
-                  <>
-                    <Menu.Button className="inline-flex justify-center rounded-full">
-                      <Avatar />
-                    </Menu.Button>
-                    <DropdownMenu open={open} />
-                  </>
-                )
-              }}
+              {({ open }) => (
+                <>
+                  <Menu.Button className={s.avatarButton}>
+                    <Avatar />
+                  </Menu.Button>
+                  <DropdownMenu open={open} />
+                </>
+              )}
             </Menu>
           </li>
         </ul>