diff --git a/landing/header.css b/landing/header.css
index c05296d4a..c1c6a293a 100644
--- a/landing/header.css
+++ b/landing/header.css
@@ -1,131 +1,117 @@
-nav.wrapper {
-  transition-property: max-width;
-  transition: 300ms;
-  max-width: 1850px;
-  margin-left: auto;
-  margin-right: auto;
-  display: grid;
-  padding: 16px 0;
+nav.headerContainer {
+  display: flex;
+  justify-content: center;
+}
+
+div.headerNavContentContainer {
+  display: flex;
   align-items: center;
-  grid-template-columns: 40px repeat(12, 1fr) 40px;
-  column-gap: 1.5%;
-  grid-template-areas: '. logo logo . . . page_nav page_nav . . sIcons sIcons sIcons .';
+  justify-content: space-between;
+  padding: 18px 32px;
+  width: 1850px;
 }
 
 .logo {
-  grid-area: logo;
+  display: flex;
+  align-items: center;
+  min-width: 85px;
 }
 
 .logo h1 {
   font-size: 28px;
   font-weight: 500;
   color: var(--logo-color);
 }
 
 .tab {
   font-size: 24px;
   font-weight: 500;
   color: #808080;
   font-family: var(--sans-serif);
   transition: 150ms;
   transition-property: color;
 }
 .tab:hover {
   color: #ffffff;
 }
 
-.page_nav {
-  grid-area: page_nav;
+.pageNav {
   display: flex;
   justify-content: space-evenly;
   min-width: 225px;
 }
 
-.social_icons_container {
-  grid-area: sIcons;
+.socialIconsContainer {
   display: flex;
   justify-self: flex-end;
   align-items: center;
 }
 
-div.twitter_icon,
-div.github_icon,
-div.webapp_icon {
+div.twitterIcon,
+div.githubIcon,
+div.webappIcon {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   margin-inline: 4px;
   border-radius: 50px;
   width: 44px;
   height: 44px;
   transition: 300ms;
 }
 
-div.twitter_icon svg,
-div.github_icon svg,
-div.webapp_icon svg {
+div.menuIcon {
+  display: none;
+}
+
+div.twitterIcon svg,
+div.githubIcon svg,
+div.webappIcon svg {
   transition: 300ms;
 }
 
-div.github_icon:hover svg {
+div.githubIcon:hover svg {
   color: #151013;
   transition: 300ms;
 }
-div.github_icon:hover {
+div.githubIcon:hover {
   background-color: #ffffff;
   transition: 300ms;
 }
 
-div.webapp_icon:hover {
+div.webappIcon:hover {
   background-color: var(--btn-bg);
   transition: 300ms;
 }
-div.twitter_icon:hover {
+
+div.twitterIcon:hover {
   background-color: #1d9bf0;
   transition: 300ms;
 }
 
-@media screen and (max-width: 1099px) {
-  nav.wrapper {
-    grid-template-columns: 16px repeat(12, 1fr) 16px;
-    grid-template-areas: '. logo logo logo page_nav page_nav page_nav page_nav page_nav page_nav sIcons sIcons sIcons .';
-  }
-
-  .logo {
-    min-width: 85px;
-  }
-
-  .page_nav {
-    justify-content: center;
-    gap: 12px;
-  }
-
-  .social_icon {
-    display: block;
-  }
-
-  div.webapp_icon {
+@media screen and (max-width: 480px) {
+  .pageNav {
     display: none;
   }
-}
 
-@media screen and (max-width: 480px) {
-  nav.wrapper {
-    grid-template-columns: 16px repeat(6, 1fr) 16px;
-    grid-template-rows: 1fr 1fr;
-    column-gap: 1.5%;
-    row-gap: 25px;
-    grid-template-areas:
-      '. logo logo . sIcons sIcons sIcons .'
-      '. page_nav page_nav page_nav page_nav page_nav page_nav .';
+  div.twitterIcon,
+  div.githubIcon,
+  div.webappIcon {
+    display: none;
   }
 
-  .page_nav {
-    grid-area: page_nav;
+  div.menuIcon {
     display: flex;
     justify-content: center;
-    gap: 40px;
-    min-width: 225px;
+    align-items: center;
+    font-size: 24px;
+    margin-inline: 4px;
+    width: 44px;
+    height: 44px;
+  }
+
+  div.menuIcon:hover {
+    cursor: pointer;
   }
 }
diff --git a/landing/header.react.js b/landing/header.react.js
index 2916246e7..3f6adc35e 100644
--- a/landing/header.react.js
+++ b/landing/header.react.js
@@ -1,58 +1,63 @@
 // @flow
 
 import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import { faExternalLinkAlt, faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
 import css from './header.css';
 
 const iconProps = {
   size: 'sm',
   color: '#ebedee',
 };
 
 const navLinkProps = {
   className: css.tab,
   activeStyle: {
     color: 'white',
   },
 };
 
 function Header(): React.Node {
   return (
-    <nav className={css.wrapper}>
-      <NavLink to="/" className={css.logo}>
-        <h1>Comm</h1>
-      </NavLink>
-      <div className={css.page_nav}>
-        <NavLink to="/" exact {...navLinkProps}>
-          App
+    <nav className={css.headerContainer}>
+      <div className={css.headerNavContentContainer}>
+        <NavLink to="/" className={css.logo}>
+          <h1>Comm</h1>
         </NavLink>
-        <NavLink to="/keyservers" exact {...navLinkProps}>
-          Keyserver
-        </NavLink>
-      </div>
-      <div className={css.social_icons_container}>
-        <a href="https://web.comm.app">
-          <div className={css.webapp_icon}>
-            <FontAwesomeIcon icon={faExternalLinkAlt} {...iconProps} />
-          </div>
-        </a>
-        <a href="https://twitter.com/commdotapp">
-          <div className={css.twitter_icon}>
-            <FontAwesomeIcon icon={faTwitter} {...iconProps} />
-          </div>
-        </a>
-        <a href="https://github.com/CommE2E/comm">
-          <div className={css.github_icon}>
-            <FontAwesomeIcon icon={faGithub} {...iconProps} />
+        <div className={css.pageNav}>
+          <NavLink to="/" exact {...navLinkProps}>
+            App
+          </NavLink>
+          <NavLink to="/keyservers" exact {...navLinkProps}>
+            Keyserver
+          </NavLink>
+        </div>
+        <div className={css.socialIconsContainer}>
+          <a href="https://web.comm.app">
+            <div className={css.webappIcon}>
+              <FontAwesomeIcon icon={faExternalLinkAlt} {...iconProps} />
+            </div>
+          </a>
+          <a href="https://twitter.com/commdotapp">
+            <div className={css.twitterIcon}>
+              <FontAwesomeIcon icon={faTwitter} {...iconProps} />
+            </div>
+          </a>
+          <a href="https://github.com/CommE2E/comm">
+            <div className={css.githubIcon}>
+              <FontAwesomeIcon icon={faGithub} {...iconProps} />
+            </div>
+          </a>
+          <div className={css.menuIcon}>
+            <FontAwesomeIcon icon={faBars} {...iconProps} />
           </div>
-        </a>
+        </div>
       </div>
     </nav>
   );
 }
 
 export default Header;