diff --git a/landing/keyserver-faq.css b/landing/keyserver-faq.css
index e823e8fba..f65c9b847 100644
--- a/landing/keyserver-faq.css
+++ b/landing/keyserver-faq.css
@@ -1,15 +1,62 @@
+.faqSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--light-dark-page-background);
+  padding: 96px 0;
+}
+
+.faqHeading {
+  color: var(--white-100);
+  margin-bottom: 64px;
+}
+
+.faqContainer {
+  width: 1144px;
+  max-width: 90vw;
+}
+
+.faqItemContainer {
+  border-bottom: 1px solid var(--white-80);
+  padding: 40px 0 24px;
+  cursor: pointer;
+}
+
+.questionContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.questionText {
+  color: var(--white-100);
+}
+
+.icon {
+  margin-left: 24px;
+}
+
+.answerContainer {
+  max-height: 0;
+  overflow: hidden;
+}
+
+.activeAnswerContainer {
+  max-height: fit-content;
+}
+
 .answerText {
   color: var(--white-100);
   margin-top: 16px;
 }
 
 .link {
   color: inherit;
   text-decoration: underline;
   transition: color 150ms;
 }
 
 .link:hover {
   color: var(--violet-dark-100);
   transition: color 150ms;
 }
diff --git a/landing/keyserver-faq.react.js b/landing/keyserver-faq.react.js
new file mode 100644
index 000000000..3d16c082f
--- /dev/null
+++ b/landing/keyserver-faq.react.js
@@ -0,0 +1,66 @@
+// @flow
+
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { faqData } from './keyserver-faq-data.js';
+import css from './keyserver-faq.css';
+import typography from './typography.css';
+
+function KeyserverFAQ(): React.Node {
+  const questionClassName = classNames([
+    typography.subheading2,
+    css.questionText,
+  ]);
+
+  const [activeFAQIndex, setActiveFAQIndex] = React.useState(null);
+
+  const onClickFAQItem = React.useCallback(
+    (index: number) => {
+      if (index === activeFAQIndex) {
+        setActiveFAQIndex(null);
+      } else {
+        setActiveFAQIndex(index);
+      }
+    },
+    [activeFAQIndex],
+  );
+
+  const keyserverFAQ = React.useMemo(() => {
+    return faqData.map((faq, index) => {
+      const answerContainerClassName = classNames({
+        [css.answerContainer]: true,
+        [css.activeAnswerContainer]: activeFAQIndex === index,
+      });
+
+      return (
+        <div
+          key={index}
+          className={css.faqItemContainer}
+          onClick={() => onClickFAQItem(index)}
+        >
+          <div className={css.questionContainer}>
+            <p className={questionClassName}>{faq.question}</p>
+            <FontAwesomeIcon
+              size="sm"
+              className={css.icon}
+              icon={faChevronDown}
+            />
+          </div>
+          <div className={answerContainerClassName}>{faq.answer}</div>
+        </div>
+      );
+    });
+  }, [activeFAQIndex, onClickFAQItem, questionClassName]);
+
+  return (
+    <section className={css.faqSection}>
+      <h1 className={typography.heading1}>FAQ</h1>
+      <div className={css.faqContainer}>{keyserverFAQ}</div>
+    </section>
+  );
+}
+
+export default KeyserverFAQ;