diff --git a/assets/bars.svg b/assets/bars.svg
new file mode 100644
index 00000000..91c83c48
--- /dev/null
+++ b/assets/bars.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 6.0.0-alpha1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M424 392H24C11 392 0 403 0 416V416C0 429 11 440 24 440H424C437 440 448 429 448 416V416C448 403 437 392 424 392ZM424 72H24C11 72 0 83 0 96V96C0 109 11 120 24 120H424C437 120 448 109 448 96V96C448 83 437 72 424 72ZM424 232H24C11 232 0 243 0 256V256C0 269 11 280 24 280H424C437 280 448 269 448 256V256C448 243 437 232 424 232Z"/></svg>
\ No newline at end of file
diff --git a/assets/xmark.svg b/assets/xmark.svg
new file mode 100644
index 00000000..6d72bf6d
--- /dev/null
+++ b/assets/xmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Pro 6.0.0-alpha1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M345 375C354 384 354 400 345 409S320 418 311 409L192 290L73 409C64 418 48 418 39 409S30 384 39 375L158 256L39 137C30 128 30 112 39 103S64 94 73 103L192 222L311 103C320 94 336 94 345 103S354 128 345 137L226 256L345 375Z"/></svg>
\ No newline at end of file
diff --git a/components/layout/Header.js b/components/layout/Header.js
index 3d2a4e49..a092cdac 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -8,10 +8,13 @@ import LanguageButton from 'components/settings/LanguageButton';
 import ThemeButton from 'components/settings/ThemeButton';
 import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
+import Button from 'components/common/Button';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 import useLocale from 'hooks/useLocale';
 import { rtlLocales } from 'lib/lang';
+import XMark from 'assets/xmark.svg';
+import Bars from 'assets/bars.svg';
 
 export default function Header() {
   const user = useSelector(state => state.user);
@@ -33,23 +36,11 @@ export default function Header() {
               <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
             </div>
           </div>
-          <button
-            onClick={handleClick}
-            role="button"
+          <Button
             className={styles.burger}
-            aria-label="menu"
-            aria-expanded="false"
-          >
-            {active ? (
-              <div> X </div>
-            ) : (
-              <>
-                <span></span>
-                <span></span>
-                <span></span>
-              </>
-            )}
-          </button>
+            icon={active ? <XMark /> : <Bars />}
+            onClick={handleClick}
+          />
           {user && (
             <div className={styles.items}>
               <div className={active ? classNames(styles.active) : ''}>
diff --git a/components/layout/Header.module.css b/components/layout/Header.module.css
index 032a121c..55b35c4f 100644
--- a/components/layout/Header.module.css
+++ b/components/layout/Header.module.css
@@ -86,7 +86,6 @@
   .items {
     display: flex;
     justify-content: unset;
-    align-items: left;
     font-size: var(--font-size-normal);
     font-weight: 600;
   }
@@ -106,34 +105,12 @@
 
   .burger {
     display: block;
-    /* color: #4a4a4a; */
     background: none;
     border: 1px solid var(--gray900);
     border-radius: 4px;
     cursor: pointer;
-    height: 3.25rem;
-    width: 3.25rem;
-    margin-left: auto;
     position: absolute;
-    right: 0;
     top: 0;
-  }
-
-  .burger span {
-    transform: translateX(25%);
-    padding: 1px 0px;
-    margin: 6px 0;
-    width: 65%;
-    display: block;
-    background-color: var(--gray900);
-  }
-
-  .burger div {
-    /* height: 100%; */
-    color: var(--gray900);
-    text-align: center;
-    margin: auto;
-    font-size: 1.5rem;
-    /* transform: translateX(-50%); */
+    right: 0;
   }
 }