diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 45e9f4a..47f0b4f 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -55,14 +55,9 @@ export default function Header() {
         </NavLink>
 
         {loggedIn ? (
-          <button
-            aria-label="Logout"
-            onClick={handleLogout}
-            className={styles.navLinkBtn}
-          >
+          <button onClick={handleLogout} className={`${styles.navLink} ${styles.logoutBtn}`}>
             Logout
           </button>
-
         ) : (
           <NavLink
             to="/login"
@@ -100,7 +95,7 @@ export default function Header() {
             </NavLink>
 
             {loggedIn ? (
-              <button onClick={handleLogout} className={styles.mobileMenuItem}>
+              <button onClick={handleLogout} className={`${styles.mobileMenuItem} ${styles.logoutBtn}`}>
                 <i className="fa-solid fa-sign-out-alt"></i>
                 Logout
               </button>
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
index e8893d5..ca233bb 100644
--- a/src/components/Header.module.css
+++ b/src/components/Header.module.css
@@ -77,8 +77,7 @@
 
 /* Remove underline globally */
 header a,
-header a span,
-header a i {
+header a * {
   text-decoration: none !important;
   border-bottom: none !important;
 }
@@ -228,3 +227,15 @@ header a i {
     text-align: center;
   }
 }
+
+.logoutBtn {
+  background: none;
+  border: none;
+  font-size: inherit;      
+  font-weight: inherit;    
+  line-height: inherit;    
+  padding: 0;              
+  color: #d32f2f;          
+  cursor: pointer;
+}
+