diff --git a/landing/header.css b/landing/header.css
index c1c6a293a..7e61cfd90 100644
--- a/landing/header.css
+++ b/landing/header.css
@@ -1,117 +1,127 @@
 nav.headerContainer {
   display: flex;
   justify-content: center;
 }
 
 div.headerNavContentContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 32px;
   width: 1850px;
 }
 
 .logo {
   display: flex;
   align-items: center;
-  min-width: 85px;
+  min-width: 180px;
 }
 
-.logo h1 {
-  font-size: 28px;
-  font-weight: 500;
-  color: var(--logo-color);
+.logoText {
+  color: var(--white-100);
+  margin-right: 8px;
+}
+
+.betaBadge {
+  padding: 4px 16px;
+  background-color: #ebebeb26;
+  border-radius: 16px;
+  color: var(--white-100);
 }
 
 .tab {
-  font-size: 24px;
-  font-weight: 500;
-  color: #808080;
-  font-family: var(--sans-serif);
+  color: var(--black-60);
   transition: 150ms;
   transition-property: color;
 }
 .tab:hover {
-  color: #ffffff;
+  color: var(--white-100);
+}
+
+.activeTab {
+  color: var(--white-100);
 }
 
 .pageNav {
   display: flex;
-  justify-content: space-evenly;
-  min-width: 225px;
+  column-gap: 72px;
 }
 
 .socialIconsContainer {
   display: flex;
   justify-self: flex-end;
   align-items: center;
 }
 
+.icon {
+  color: var(--white-100);
+}
+
 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.menuIcon {
   display: none;
 }
 
 div.twitterIcon svg,
 div.githubIcon svg,
 div.webappIcon svg {
   transition: 300ms;
 }
 
 div.githubIcon:hover svg {
   color: #151013;
   transition: 300ms;
 }
 div.githubIcon:hover {
   background-color: #ffffff;
   transition: 300ms;
 }
 
 div.webappIcon:hover {
   background-color: var(--btn-bg);
   transition: 300ms;
 }
 
 div.twitterIcon:hover {
   background-color: #1d9bf0;
   transition: 300ms;
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 848px) {
   .pageNav {
     display: none;
   }
 
   div.twitterIcon,
   div.githubIcon,
   div.webappIcon {
     display: none;
   }
 
   div.menuIcon {
     display: flex;
     justify-content: center;
     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 3f6adc35e..5542dca19 100644
--- a/landing/header.react.js
+++ b/landing/header.react.js
@@ -1,63 +1,86 @@
 // @flow
 
 import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faExternalLinkAlt, faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
 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',
-  },
-};
+import typography from './typography.css';
 
 function Header(): React.Node {
+  const logoTextClassName = classNames([typography.heading2, css.logoText]);
+  const badgeClassName = classNames([typography.paragraph2, css.betaBadge]);
+  const navLinkClassName = classNames([typography.subheading2, css.tab]);
+
   return (
     <nav className={css.headerContainer}>
       <div className={css.headerNavContentContainer}>
-        <NavLink to="/" className={css.logo}>
-          <h1>Comm</h1>
-        </NavLink>
-        <div className={css.pageNav}>
-          <NavLink to="/" exact {...navLinkProps}>
-            App
+        <div className={css.logo}>
+          <NavLink to="/">
+            <h1 className={logoTextClassName}>Comm</h1>
           </NavLink>
-          <NavLink to="/keyservers" exact {...navLinkProps}>
+          <div className={badgeClassName}>Beta</div>
+        </div>
+        <div className={css.pageNav}>
+          <NavLink
+            to="/keyservers"
+            exact
+            className={navLinkClassName}
+            activeClassName={css.activeTab}
+          >
             Keyserver
           </NavLink>
+          <NavLink
+            to="/team"
+            exact
+            className={navLinkClassName}
+            activeClassName={css.activeTab}
+          >
+            Team
+          </NavLink>
+          <NavLink
+            to="/investors"
+            exact
+            className={navLinkClassName}
+            activeClassName={css.activeTab}
+          >
+            Investors
+          </NavLink>
         </div>
         <div className={css.socialIconsContainer}>
           <a href="https://web.comm.app">
             <div className={css.webappIcon}>
-              <FontAwesomeIcon icon={faExternalLinkAlt} {...iconProps} />
+              <FontAwesomeIcon
+                icon={faExternalLinkAlt}
+                className={css.icon}
+                size="sm"
+              />
             </div>
           </a>
           <a href="https://twitter.com/commdotapp">
             <div className={css.twitterIcon}>
-              <FontAwesomeIcon icon={faTwitter} {...iconProps} />
+              <FontAwesomeIcon
+                icon={faTwitter}
+                className={css.icon}
+                size="sm"
+              />
             </div>
           </a>
           <a href="https://github.com/CommE2E/comm">
             <div className={css.githubIcon}>
-              <FontAwesomeIcon icon={faGithub} {...iconProps} />
+              <FontAwesomeIcon icon={faGithub} className={css.icon} size="sm" />
             </div>
           </a>
           <div className={css.menuIcon}>
-            <FontAwesomeIcon icon={faBars} {...iconProps} />
+            <FontAwesomeIcon icon={faBars} className={css.icon} size="sm" />
           </div>
         </div>
       </div>
     </nav>
   );
 }
 
 export default Header;