diff --git a/landing/header.css b/landing/header.css
--- a/landing/header.css
+++ b/landing/header.css
@@ -72,7 +72,7 @@
 
 div.twitterIcon,
 div.githubIcon,
-div.webappIcon {
+div.commAppIcon {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -90,7 +90,7 @@
 
 div.twitterIcon svg,
 div.githubIcon svg,
-div.webappIcon svg {
+div.commAppIcon svg {
   transition: 300ms;
 }
 
@@ -105,7 +105,7 @@
     transition: 300ms;
   }
 
-  div.webappIcon:hover {
+  div.commAppIcon:hover {
     background-color: var(--btn-bg);
     transition: 300ms;
   }
@@ -124,7 +124,7 @@
 
   div.twitterIcon,
   div.githubIcon,
-  div.webappIcon {
+  div.commAppIcon {
     display: none;
   }
 
@@ -146,7 +146,7 @@
 }
 
 /* max-width should be kept in sync with HEADER_BREAKPOINT in header.react */
-@media screen and (max-width: 848px) and (hover: hover) {
+@media screen and (max-width: 904px) and (hover: hover) {
   div.menuIcon:hover {
     cursor: pointer;
     background-color: var(--btn-bg);
diff --git a/landing/header.react.js b/landing/header.react.js
--- a/landing/header.react.js
+++ b/landing/header.react.js
@@ -5,6 +5,7 @@
   faExternalLinkAlt,
   faBars,
   faTimes,
+  faDownload,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
@@ -18,7 +19,7 @@
 
 // This value comes from the breakpoint value in header.css. Please make sure
 // that this value is in sync with header.css if ever changed
-export const HEADER_BREAKPOINT = 848; // px
+export const HEADER_BREAKPOINT = 904; // px
 
 type Props = {
   +showMobileNav: boolean,
@@ -83,8 +84,22 @@
           </NavLink>
         </div>
         <div className={css.socialIconsContainer}>
+          <NavLink
+            to="/download"
+            exact
+            className={navLinkClassName}
+            activeClassName={css.activeTab}
+          >
+            <div className={css.commAppIcon}>
+              <FontAwesomeIcon
+                icon={faDownload}
+                className={css.icon}
+                size="sm"
+              />
+            </div>
+          </NavLink>
           <a href="https://web.comm.app" target="_blank" rel="noreferrer">
-            <div className={css.webappIcon}>
+            <div className={css.commAppIcon}>
               <FontAwesomeIcon
                 icon={faExternalLinkAlt}
                 className={css.icon}
diff --git a/landing/landing.react.js b/landing/landing.react.js
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -11,6 +11,7 @@
 
 import AppLanding from './app-landing.react.js';
 import ConnectFarcaster from './connect-farcaster.react.js';
+import Download from './download.react.js';
 import Footer from './footer.react.js';
 import Header, { HEADER_BREAKPOINT } from './header.react.js';
 import Investors from './investors.react.js';
@@ -100,6 +101,7 @@
   const onQR = useRouteMatch({ path: '/qr' });
   const onTeam = useRouteMatch({ path: '/team' });
   const onInvestors = useRouteMatch({ path: '/investors' });
+  const onDownload = useRouteMatch({ path: '/download' });
 
   const activePage = React.useMemo(() => {
     if (onPrivacy) {
@@ -116,10 +118,21 @@
       return <Team />;
     } else if (onInvestors) {
       return <Investors />;
+    } else if (onDownload) {
+      return <Download />;
     } else {
       return <AppLanding />;
     }
-  }, [onKeyservers, onPrivacy, onSupport, onTerms, onTeam, onInvestors, onQR]);
+  }, [
+    onPrivacy,
+    onTerms,
+    onSupport,
+    onKeyservers,
+    onQR,
+    onTeam,
+    onInvestors,
+    onDownload,
+  ]);
 
   let header;
   if (!onQR) {