diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
index 1af6538f3..00f132c21 100644
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -1,28 +1,36 @@
 // @flow
 
 import * as React from 'react';
 
 import { imageAssetMetaData, assetMetaData } from './asset-meta-data.js';
 import CompetitorComparison from './competitor-comparison.react.js';
+import DifferentiationInfo from './differentiation-info.react.js';
 import Hero from './hero.react.js';
 import InfoBlock from './info-block.react.js';
 import RequestAccess from './request-access.react.js';
 import usePreloadImageAssets from './use-pre-load-image-assets.react.js';
 
+const DISABLE_DIFFERENTIATION_INFO = true;
+
+const differentiationInfo = DISABLE_DIFFERENTIATION_INFO ? null : (
+  <DifferentiationInfo />
+);
+
 function AppLanding(): React.Node {
   usePreloadImageAssets(imageAssetMetaData);
   const [hero] = imageAssetMetaData;
   const [keyserver, team] = assetMetaData;
 
   return (
     <main>
       <Hero {...hero} />
       <CompetitorComparison />
+      {differentiationInfo}
       <InfoBlock {...keyserver} />
       <InfoBlock {...team} />
       <RequestAccess />
     </main>
   );
 }
 
 export default AppLanding;
diff --git a/landing/competitor-comparison.css b/landing/competitor-comparison.css
index 1f587b980..2fa2c640d 100644
--- a/landing/competitor-comparison.css
+++ b/landing/competitor-comparison.css
@@ -1,77 +1,77 @@
 .competitorComparisonSection {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 48px 16px;
 }
 
 .headerText {
   color: var(--white-80);
   text-align: center;
   margin-bottom: 72px;
 }
 
 .competitorsContainer {
   overflow: hidden;
   display: flex;
   justify-content: space-between;
   column-gap: 16px;
   padding: 16px 32px;
   background-color: var(--comparison-cards);
   border-radius: 16px;
   width: 560px;
   max-width: 90vw;
+  margin-bottom: 48px;
 }
 
 .logoContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
 }
 
 .competitorLogo {
   opacity: 0.35;
   transition: opacity 150ms;
 }
 
 .competitorLogo:hover {
   opacity: 1;
   cursor: pointer;
 }
 
 .activeCompetitorLogo {
   opacity: 1;
   transform: translateY(-2px);
 }
 
 .bump {
   width: 80%;
   height: 4px;
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
   background-color: var(--violet-dark-100);
   position: absolute;
   bottom: -16px;
 }
 
 .featureCardsContainer {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
-  margin-top: 48px;
 }
 
 /* 2*16(padding) + 3*432(cards) + 2*40(gap) */
 @media screen and (max-width: 1408px) {
   .featureCardsContainer {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
 /* 2*16(padding) + 2*432(cards) + 40(gap) */
 @media screen and (max-width: 936px) {
   .featureCardsContainer {
     grid-template-columns: repeat(1, 1fr);
   }
 }
diff --git a/landing/differentiation-info.react.js b/landing/differentiation-info.react.js
new file mode 100644
index 000000000..a749a1b0b
--- /dev/null
+++ b/landing/differentiation-info.react.js
@@ -0,0 +1,62 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './competitor-comparison.css';
+import {
+  competitors,
+  competitorData,
+  type FeatureComparison,
+} from './competitor-data.js';
+import CompetitorFeatureCard from './competitor-feature-card.react.js';
+import FeatureModal from './feature-modal.react.js';
+import typography from './typography.css';
+
+function DifferentiationInfo(): React.Node {
+  const { pushModal } = useModalContext();
+
+  const generalCompetitorData = competitorData[competitors.GENERAL];
+
+  const onFeatureCardClick = React.useCallback(
+    (feature: FeatureComparison) => {
+      pushModal(
+        <FeatureModal competitor={generalCompetitorData} feature={feature} />,
+      );
+    },
+    [pushModal, generalCompetitorData],
+  );
+
+  const featureCards = React.useMemo(
+    () =>
+      generalCompetitorData.featureComparison.map(feature => (
+        <CompetitorFeatureCard
+          key={`${generalCompetitorData.id}_${feature.title}`}
+          competitorID={generalCompetitorData.id}
+          title={feature.title}
+          comingSoon={feature.comingSoon}
+          competitorDescription={feature.competitorDescriptionShort}
+          commDescription={feature.commDescriptionShort}
+          onClick={() => onFeatureCardClick(feature)}
+        />
+      )),
+    [
+      generalCompetitorData.featureComparison,
+      generalCompetitorData.id,
+      onFeatureCardClick,
+    ],
+  );
+
+  const headerClassName = classNames([typography.heading1, css.headerText]);
+
+  return (
+    <section className={css.competitorComparisonSection}>
+      <h1 className={headerClassName}>What makes Comm unique</h1>
+      <div className={css.featureCardsContainer}>{featureCards}</div>
+    </section>
+  );
+}
+
+export default DifferentiationInfo;