diff --git a/landing/competitor-feature-card.css b/landing/competitor-feature-card.css
new file mode 100644
index 000000000..3f3105c2d
--- /dev/null
+++ b/landing/competitor-feature-card.css
@@ -0,0 +1,56 @@
+.container {
+  max-width: 432px;
+  background-color: var(--comparison-cards);
+  padding: 32px;
+  border-radius: 16px;
+}
+
+.container:hover {
+  cursor: pointer;
+  background-color: var(--comparison-cards-hovered);
+}
+
+.headingContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.headingText {
+  color: var(--white-100);
+}
+
+.comingSoonBadge {
+  background-color: var(--badge);
+  padding: 5px 10px;
+  border-radius: 16px;
+}
+
+.comingSoonText {
+  color: var(--white-100);
+  margin-left: 8px;
+}
+
+.comingSoonIcon {
+  color: var(--coming-soon-icon);
+}
+
+hr {
+  margin: 24px 0;
+  border-radius: 8px;
+  height: 1.5px;
+  background-color: var(--black-80);
+  border: none;
+}
+
+.descriptionText {
+  color: var(--white-80);
+  height: 80px;
+  margin-top: 8px;
+}
+
+.readMoreText {
+  color: var(--violet-dark-100);
+  margin-top: 16px;
+}
diff --git a/landing/competitor-feature-card.react.js b/landing/competitor-feature-card.react.js
new file mode 100644
index 000000000..5b07650ce
--- /dev/null
+++ b/landing/competitor-feature-card.react.js
@@ -0,0 +1,77 @@
+// @flow
+
+import { faWrench } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import CommLogo from './assets/comm-logo.react.js';
+import type { Competitors } from './competitor-data.js';
+import css from './competitor-feature-card.css';
+import CompetitorLogo from './competitor-logo.react.js';
+import typography from './typography.css';
+
+type Props = {
+  +competitorID: Competitors,
+  +title: string,
+  +comingSoon: boolean,
+  +competitorDescription: string,
+  +commDescription: string,
+  +onClick: () => mixed,
+};
+
+function CompetitorFeatureCard(props: Props): React.Node {
+  const {
+    competitorID,
+    title,
+    comingSoon,
+    competitorDescription,
+    commDescription,
+    onClick,
+  } = props;
+
+  const headingClassName = classNames([typography.heading3, css.headingText]);
+  const comingSoonClassName = classNames([
+    typography.paragraph3,
+    css.comingSoonText,
+  ]);
+  const descriptionClassName = classNames([
+    typography.paragraph1,
+    css.descriptionText,
+  ]);
+  const readMoreClassName = classNames([
+    typography.paragraph2,
+    css.readMoreText,
+  ]);
+
+  let comingSoonBadge;
+  if (comingSoon) {
+    comingSoonBadge = (
+      <div className={css.comingSoonBadge}>
+        <FontAwesomeIcon
+          size="sm"
+          className={css.comingSoonIcon}
+          icon={faWrench}
+        />
+        <span className={comingSoonClassName}>Coming Soon</span>
+      </div>
+    );
+  }
+
+  return (
+    <a className={css.container} onClick={onClick}>
+      <div className={css.headingContainer}>
+        <p className={headingClassName}>{title}</p>
+        {comingSoonBadge}
+      </div>
+      <CompetitorLogo name={competitorID} size={30} />
+      <p className={descriptionClassName}>{competitorDescription}</p>
+      <hr />
+      <CommLogo size={30} />
+      <p className={descriptionClassName}>{commDescription}</p>
+      <p className={readMoreClassName}>Read more</p>
+    </a>
+  );
+}
+
+export default CompetitorFeatureCard;
diff --git a/landing/global.css b/landing/global.css
index acdbc1652..1aac812ee 100644
--- a/landing/global.css
+++ b/landing/global.css
@@ -1,74 +1,77 @@
 :root {
   --landing-page-z-index: 0;
   --mobile-nav-z-index: 1;
   --header-z-index: 2;
   --purple: #7e57c2;
   --white: #fff;
   --white1: #ebedee;
   --grey: #808080;
   --btn-bg: var(--purple);
   --unselected: var(--grey);
   --btn-color: var(--white1);
   --logo-color: var(--white);
   --sub-heading-color: var(--purple);
   --sans-serif: 'IBM Plex Sans', sans-serif;
   --white-100: #ffffff;
   --white-90: #f5f5f5;
   --white-80: #ebebeb;
   --white-70: #e0e0e0;
   --white-60: #cccccc;
   --black-100: #0a0a0a;
   --black-90: #1f1f1f;
   --black-80: #404040;
   --black-70: #666666;
   --black-60: #808080;
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-40: #331f5c;
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
   --page-background: #111111;
   --light-dark-page-background: #1a1a1a;
   --comparison-cards: #18181a;
+  --comparison-cards-hovered: #1c1c1f;
+  --coming-soon-icon: #dca008;
+  --badge: #ebebeb14;
 }
 
 /* ===== GENERAL PAGE STYLES ===== */
 
 html,
 body,
 :global(div#react-root) {
   height: 100%;
 }
 
 p {
   font-size: clamp(0.75rem, 0.5408rem + 1.0458vw, 1.75rem);
 }
 
 a {
   transition: 0.2s;
   text-decoration: none;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
   img {
     image-rendering: -webkit-optimize-contrast !important;
   }
 }
 
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) and (stroke-color: transparent) {
     img {
       image-rendering: unset !important;
     }
   }
 }