diff --git a/landing/competitor-data.js b/landing/competitor-data.js
--- a/landing/competitor-data.js
+++ b/landing/competitor-data.js
@@ -10,7 +10,7 @@
 });
 export type Competitors = $Values<typeof competitors>;
 
-type FeatureComparison = {
+export type FeatureComparison = {
   +title: string,
   +comingSoon: boolean,
   +competitorDescriptionShort: string,
@@ -20,7 +20,7 @@
   +furtherReadingLinks?: $ReadOnlyArray<string>,
 };
 
-type Competitor = {
+export type Competitor = {
   +id: Competitors,
   +name: string,
   +featureComparison: $ReadOnlyArray<FeatureComparison>,
diff --git a/landing/competitor-feature.css b/landing/competitor-feature.css
--- a/landing/competitor-feature.css
+++ b/landing/competitor-feature.css
@@ -9,6 +9,8 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
+  flex-wrap: wrap;
+  row-gap: 8px;
 }
 
 .headingText {
@@ -40,7 +42,7 @@
 
 .descriptionText {
   color: var(--white-80);
-  height: 80px;
+  min-height: 80px;
   margin-top: 8px;
 }
 
diff --git a/landing/feature-modal.css b/landing/feature-modal.css
new file mode 100644
--- /dev/null
+++ b/landing/feature-modal.css
@@ -0,0 +1,44 @@
+.modalContainer {
+  background-color: var(--comparison-cards);
+  border-radius: 8px;
+  padding: 24px 32px;
+  width: 624px;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.featureContainer {
+  display: flex;
+}
+
+.closeIconContainer {
+  margin-left: 22px;
+  cursor: pointer;
+}
+
+.closeIcon {
+  color: var(--white-80);
+}
+
+.furtherReadingContainer {
+  border-top: 1px solid var(--black-80);
+  padding-top: 24px;
+  margin-top: 24px;
+}
+
+.furtherReadingsText {
+  color: var(--white-100);
+  margin-bottom: 16px;
+}
+
+.linksContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+}
+
+.linkText {
+  color: var(--violet-dark-100);
+  text-decoration: underline;
+}
diff --git a/landing/feature-modal.react.js b/landing/feature-modal.react.js
new file mode 100644
--- /dev/null
+++ b/landing/feature-modal.react.js
@@ -0,0 +1,76 @@
+// @flow
+
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import ModalOverlay from 'lib/components/modal-overlay.react.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import type { FeatureComparison, Competitor } from './competitor-data.js';
+import CompetitorFeature from './competitor-feature.react.js';
+import css from './feature-modal.css';
+import typography from './typography.css';
+
+type Props = {
+  +competitor: Competitor,
+  +feature: FeatureComparison,
+};
+
+function FeatureModal(props: Props): React.Node {
+  const { competitor, feature } = props;
+
+  const { popModal } = useModalContext();
+
+  const furtherReadingClassName = classNames(
+    typography.paragraph1,
+    css.furtherReadingsText,
+  );
+  const linkClassName = classNames([typography.paragraph2, css.linkText]);
+
+  const furtherReadingLinks = React.useMemo(() => {
+    if (!feature.furtherReadingLinks) {
+      return null;
+    }
+
+    const links = feature.furtherReadingLinks.map((link, index) => (
+      <a key={index} href={link} target="blank" className={linkClassName}>
+        {link}
+      </a>
+    ));
+
+    return (
+      <div className={css.furtherReadingContainer}>
+        <p className={furtherReadingClassName}>Further reading</p>
+        <div className={css.linksContainer}>{links}</div>
+      </div>
+    );
+  }, [feature.furtherReadingLinks, furtherReadingClassName, linkClassName]);
+
+  return (
+    <ModalOverlay onClose={popModal} backgroundColor="var(--modal-overlay)">
+      <div className={css.modalContainer}>
+        <div className={css.featureContainer}>
+          <CompetitorFeature
+            competitorID={competitor.id}
+            title={feature.title}
+            comingSoon={feature.comingSoon}
+            competitorDescription={feature.competitorDescriptionLong}
+            commDescription={feature.commDescriptionLong}
+          />
+          <div className={css.closeIconContainer} onClick={popModal}>
+            <FontAwesomeIcon
+              icon={faTimes}
+              className={css.closeIcon}
+              size="lg"
+            />
+          </div>
+        </div>
+        {furtherReadingLinks}
+      </div>
+    </ModalOverlay>
+  );
+}
+
+export default FeatureModal;
diff --git a/landing/global.css b/landing/global.css
--- a/landing/global.css
+++ b/landing/global.css
@@ -43,6 +43,7 @@
   --comparison-cards-hovered: #1c1c1f;
   --coming-soon-icon: #dca008;
   --badge: #ebebeb14;
+  --modal-overlay: rgba(0, 0, 0, 0.8);
 }
 
 /* ===== GENERAL PAGE STYLES ===== */