diff --git a/landing/header.css b/landing/header.css
--- a/landing/header.css
+++ b/landing/header.css
@@ -14,31 +14,37 @@
 .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 {
@@ -47,6 +53,10 @@
   align-items: center;
 }
 
+.icon {
+  color: var(--white-100);
+}
+
 div.twitterIcon,
 div.githubIcon,
 div.webappIcon {
@@ -90,7 +100,7 @@
   transition: 300ms;
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 848px) {
   .pageNav {
     display: none;
   }
diff --git a/landing/header.react.js b/landing/header.react.js
--- a/landing/header.react.js
+++ b/landing/header.react.js
@@ -3,56 +3,79 @@
 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>