diff --git a/landing/competitor-comparison.css b/landing/competitor-comparison.css
new file mode 100644
--- /dev/null
+++ b/landing/competitor-comparison.css
@@ -0,0 +1,55 @@
+.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;
+}
+
+.logoContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.competitorLogo {
+  opacity: 0.35;
+}
+
+.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;
+}
diff --git a/landing/competitor-comparison.react.js b/landing/competitor-comparison.react.js
new file mode 100644
--- /dev/null
+++ b/landing/competitor-comparison.react.js
@@ -0,0 +1,59 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import css from './competitor-comparison.css';
+import CompetitorLogo from './competitor-logo.react.js';
+import typography from './typography.css';
+
+const competitors = [
+  'signal',
+  'keybase',
+  'telegram',
+  'discord',
+  'slack',
+  'matrix',
+];
+
+function CompetitorComparison(): React.Node {
+  const [selectedCompetitorID, setSelectedCompetitorID] =
+    React.useState<string>('signal');
+
+  const competitorSelector = React.useMemo(
+    () =>
+      competitors.map(competitor => {
+        const competitorLogoClassName = classNames({
+          [css.competitorLogo]: true,
+          [css.activeCompetitorLogo]: selectedCompetitorID === competitor,
+        });
+        const bumpClassName = classNames({
+          [css.bump]: selectedCompetitorID === competitor,
+        });
+
+        return (
+          <div className={css.logoContainer} key={competitor}>
+            <div
+              className={competitorLogoClassName}
+              onClick={() => setSelectedCompetitorID(competitor)}
+            >
+              <CompetitorLogo name={competitor} />
+            </div>
+            <div className={bumpClassName} />
+          </div>
+        );
+      }),
+    [selectedCompetitorID],
+  );
+
+  const headerClassName = classNames([typography.heading1, css.headerText]);
+
+  return (
+    <section className={css.competitorComparisonSection}>
+      <h1 className={headerClassName}>See how Comm is different</h1>
+      <div className={css.competitorsContainer}>{competitorSelector}</div>
+    </section>
+  );
+}
+
+export default CompetitorComparison;