diff --git a/landing/header.css b/landing/header.css
index 3fc677b58..9711341aa 100644
--- a/landing/header.css
+++ b/landing/header.css
@@ -1,155 +1,163 @@
 nav.headerContainer {
   display: flex;
   justify-content: center;
 }
 
 div.headerNavContentContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 32px;
   width: 1850px;
   z-index: var(--header-z-index);
   background-color: transparent;
   transition: 650ms;
   transition-property: background-color;
 }
 
 div.headerContainerMobileNavActive {
   background-color: var(--comparison-cards);
   transition: 250ms;
 }
 
 .logo {
   display: flex;
   align-items: center;
   min-width: 180px;
 }
 
 .logoText {
   color: var(--white-100);
   margin-right: 8px;
 }
 
 .betaBadge {
   padding: 4px 16px;
   background-color: #ebebeb26;
   border-radius: 16px;
   color: var(--white-100);
 }
 
 .tab {
   color: var(--black-60);
   transition: 150ms;
   transition-property: color;
 }
 .tab:hover {
   color: var(--white-100);
 }
 
 .activeTab {
   color: var(--white-100);
 }
 
 .pageNav {
   display: flex;
   column-gap: 72px;
 }
 
 .socialIconsContainer {
   display: flex;
   justify-self: flex-end;
   align-items: center;
 }
 
 .icon {
   color: var(--white-100);
 }
 
 div.socialIconsContainer a {
   -webkit-tap-highlight-color: transparent;
 }
 
 div.twitterIcon,
+div.farcasterIcon,
 div.githubIcon,
 div.commAppIcon {
   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.farcasterIcon svg,
 div.githubIcon svg,
 div.commAppIcon svg {
   transition: 300ms;
 }
 
 @media screen and (hover: hover) {
   div.githubIcon:hover svg {
     color: #151013;
     transition: 300ms;
   }
 
   div.githubIcon:hover {
     background-color: #ffffff;
     transition: 300ms;
   }
 
   div.commAppIcon:hover {
     background-color: var(--btn-bg);
     transition: 300ms;
   }
 
   div.twitterIcon:hover {
     background-color: #1d9bf0;
     transition: 300ms;
   }
+
+  div.farcasterIcon:hover {
+    background-color: #855dcd;
+    transition: 300ms;
+  }
 }
 
 /* max-width should be kept in sync with HEADER_BREAKPOINT in header.react */
 @media screen and (max-width: 848px) {
   .pageNav {
     display: none;
   }
 
   div.twitterIcon,
+  div.farcasterIcon,
   div.githubIcon,
   div.commAppIcon {
     display: none;
   }
 
   div.menuIcon {
     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 svg {
     transition: 300ms;
   }
 }
 
 /* max-width should be kept in sync with HEADER_BREAKPOINT in header.react */
 @media screen and (max-width: 904px) and (hover: hover) {
   div.menuIcon:hover {
     cursor: pointer;
     background-color: var(--btn-bg);
     transition: 300ms;
   }
 }
diff --git a/landing/header.react.js b/landing/header.react.js
index 05599d6c8..b56925b3c 100644
--- a/landing/header.react.js
+++ b/landing/header.react.js
@@ -1,145 +1,155 @@
 // @flow
 
 import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
 import {
   faExternalLinkAlt,
   faBars,
   faTimes,
   faDownload,
 } 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 type { SetState } from 'lib/types/hook-types.js';
 
+import FarcasterLogo from './assets/farcaster-logo.react.js';
 import css from './header.css';
 import typography from './typography.css';
 
 // 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 = 904; // px
 
 type Props = {
   +showMobileNav: boolean,
   +setShowMobileNav: SetState<boolean>,
 };
 
 function Header(props: Props): React.Node {
   const { showMobileNav, setShowMobileNav } = props;
 
   const headerContentContainerClassName = classNames({
     [css.headerNavContentContainer]: true,
     [css.headerContainerMobileNavActive]: showMobileNav,
   });
 
   const logoTextClassName = classNames([typography.heading2, css.logoText]);
   const badgeClassName = classNames([typography.paragraph2, css.betaBadge]);
   const navLinkClassName = classNames([typography.subheading2, css.tab]);
 
   const onClickLogo = React.useCallback(() => {
     setShowMobileNav(false);
   }, [setShowMobileNav]);
 
   const onClickMobileNavIcon = React.useCallback(() => {
     setShowMobileNav(!showMobileNav);
   }, [setShowMobileNav, showMobileNav]);
 
   return (
     <nav className={css.headerContainer}>
       <div className={headerContentContainerClassName}>
         <div className={css.logo}>
           <NavLink to="/">
             <h1 onClick={onClickLogo} className={logoTextClassName}>
               Comm
             </h1>
           </NavLink>
           <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}>
           <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.commAppIcon}>
               <FontAwesomeIcon
                 icon={faExternalLinkAlt}
                 className={css.icon}
                 size="sm"
               />
             </div>
           </a>
+          <a
+            href="https://warpcast.com/comm.eth"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <div className={css.farcasterIcon}>
+              <FarcasterLogo size={30} className={css.icon} />
+            </div>
+          </a>
           <a
             href="https://twitter.com/commdotapp"
             target="_blank"
             rel="noreferrer"
           >
             <div className={css.twitterIcon}>
               <FontAwesomeIcon
                 icon={faTwitter}
                 className={css.icon}
                 size="sm"
               />
             </div>
           </a>
           <a
             href="https://github.com/CommE2E/comm"
             target="_blank"
             rel="noreferrer"
           >
             <div className={css.githubIcon}>
               <FontAwesomeIcon icon={faGithub} className={css.icon} size="sm" />
             </div>
           </a>
           <div className={css.menuIcon} onClick={onClickMobileNavIcon}>
             <FontAwesomeIcon
               icon={showMobileNav ? faTimes : faBars}
               className={css.icon}
               size="sm"
             />
           </div>
         </div>
       </div>
     </nav>
   );
 }
 
 export default Header;
diff --git a/landing/mobile-nav.react.js b/landing/mobile-nav.react.js
index 46f8e7a85..1a62ef386 100644
--- a/landing/mobile-nav.react.js
+++ b/landing/mobile-nav.react.js
@@ -1,100 +1,108 @@
 // @flow
 
 import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faDownload } 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 type { SetState } from 'lib/types/hook-types.js';
 
+import FarcasterLogo from './assets/farcaster-logo.react.js';
 import css from './mobile-nav.css';
 import typography from './typography.css';
 
 type Props = {
   +showMobileNav: boolean,
   +setShowMobileNav: SetState<boolean>,
 };
 
 function MobileNav(props: Props): React.Node {
   const { showMobileNav, setShowMobileNav } = props;
 
   const navLinkClassName = classNames([typography.paragraph2, css.tab]);
 
   const mobileNavClassName = classNames({
     [css.mobileNav]: true,
     [css.activeMobileNav]: showMobileNav,
   });
 
   const dismissMobileNav = React.useCallback(() => {
     setShowMobileNav(false);
   }, [setShowMobileNav]);
 
   return (
     <nav className={mobileNavClassName}>
       <div className={css.tabContainer}>
         <NavLink
           to="/keyservers"
           exact
           className={navLinkClassName}
           activeClassName={css.activeTab}
         >
           <div onClick={dismissMobileNav} className={css.tabContent}>
             Keyserver
           </div>
         </NavLink>
       </div>
       <div className={css.tabContainer}>
         <NavLink
           to="/team"
           exact
           className={navLinkClassName}
           activeClassName={css.activeTab}
         >
           <div onClick={dismissMobileNav} className={css.tabContent}>
             Team
           </div>
         </NavLink>
       </div>
       <div className={css.tabContainer}>
         <NavLink
           to="/investors"
           exact
           className={navLinkClassName}
           activeClassName={css.activeTab}
         >
           <div onClick={dismissMobileNav} className={css.tabContent}>
             Investors
           </div>
         </NavLink>
       </div>
       <div className={css.socialIconsContainer}>
         <NavLink to="/download" exact className={navLinkClassName}>
           <FontAwesomeIcon
             onClick={dismissMobileNav}
             icon={faDownload}
             className={css.icon}
             size="1x"
           />
         </NavLink>
+        <a
+          href="https://warpcast.com/comm.eth"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <FarcasterLogo size={20} className={css.icon} />
+        </a>
         <a
           href="https://twitter.com/commdotapp"
           target="_blank"
           rel="noreferrer"
         >
           <FontAwesomeIcon icon={faTwitter} className={css.icon} size="1x" />
         </a>
         <a
           href="https://github.com/CommE2E/comm"
           target="_blank"
           rel="noreferrer"
         >
           <FontAwesomeIcon icon={faGithub} className={css.icon} size="1x" />
         </a>
       </div>
     </nav>
   );
 }
 
 export default MobileNav;