diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx
index afcdbdba..79cd547a 100644
--- a/components/AboutModal/index.tsx
+++ b/components/AboutModal/index.tsx
@@ -8,7 +8,9 @@ const AboutModal = () => {
     return (
         <Dialog.Root>
             <Dialog.Trigger asChild>
-                <li className="MenuItem">About</li>
+                <li className="MenuItem">
+                    <span>About</span>
+                </li>
             </Dialog.Trigger>
             <Dialog.Portal>
                 <Dialog.Content className="About Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss
index 285f646c..3be054cd 100644
--- a/components/HeaderMenu/index.scss
+++ b/components/HeaderMenu/index.scss
@@ -11,7 +11,6 @@
 .MenuItem {
     color: $grey-10;
     font-weight: $normal;
-    padding: 12px;
 
     &:hover {
         background: $grey-100;
@@ -26,6 +25,11 @@
     a {
         color: $grey-10;
     }
+
+    a, span {
+        display: block;
+        padding: 12px;
+    }
 }
 
 .MenuGroup {
diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index f43516d1..c121d83f 100644
--- a/components/HeaderMenu/index.tsx
+++ b/components/HeaderMenu/index.tsx
@@ -47,8 +47,12 @@ const HeaderMenu = (props: Props) => {
                     </div>
                     <div className="MenuGroup">
                         <AboutModal />
-                        <li className="MenuItem">Settings</li>
-                        <li className="MenuItem" onClick={props.logout}>Logout</li>
+                        <li className="MenuItem">
+                            <span>Settings</span>
+                        </li>
+                        <li className="MenuItem" onClick={props.logout}>
+                            <span>Logout</span>
+                        </li>
                     </div>
                 </ul>
             </nav>
@@ -71,13 +75,18 @@ const HeaderMenu = (props: Props) => {
                         </li>
                     </div>
                 <div className="MenuGroup">
-                    <li className="MenuItem" onClick={openLoginModal}>Log in</li>
+                    <li className="MenuItem" onClick={openLoginModal}>
+                        <span>Log in</span>
+                    </li>
                     {loginOpen ? (
                         <LoginModal 
                             close={closeLoginModal}
                         />
                     ) : null}
-                    <li className="MenuItem" onClick={openSignupModal}>Sign up</li>
+
+                    <li className="MenuItem" onClick={openSignupModal}>
+                        <span>Sign up</span>
+                    </li>
                     {signupOpen ? (
                         <SignupModal 
                             close={closeSignupModal}