diff --git a/web/modals/keyserver-selection/add-keyserver-modal.css b/web/modals/keyserver-selection/add-keyserver-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/keyserver-selection/add-keyserver-modal.css
@@ -0,0 +1,17 @@
+.container {
+  padding: 32px;
+}
+
+.inputTitle {
+  color: var(--text-background-primary-default);
+  margin-bottom: 8px;
+}
+
+.buttonContainer {
+  background-color: var(--modal-background-secondary-default);
+  padding: 16px 32px;
+}
+
+.button {
+  width: 100%;
+}
diff --git a/web/modals/keyserver-selection/add-keyserver-modal.react.js b/web/modals/keyserver-selection/add-keyserver-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/keyserver-selection/add-keyserver-modal.react.js
@@ -0,0 +1,57 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './add-keyserver-modal.css';
+import Button, { buttonThemes } from '../../components/button.react.js';
+import Input from '../input.react.js';
+import Modal from '../modal.react.js';
+
+function AddKeyserverModal(): React.Node {
+  const { popModal } = useModalContext();
+
+  const [keyserverURL, setKeyserverURL] = React.useState<string>('');
+
+  const onChangeKeyserverURL = React.useCallback(
+    (event: SyntheticEvent<HTMLInputElement>) =>
+      setKeyserverURL(event.currentTarget.value),
+    [],
+  );
+
+  const onClickAddKeyserver = React.useCallback(() => {
+    // TODO
+  }, []);
+
+  const addKeyserverModal = React.useMemo(
+    () => (
+      <Modal size="large" onClose={popModal} name="Add keyserver">
+        <div className={css.container}>
+          <div className={css.inputTitle}>Keyserver URL</div>
+          <Input
+            type="text"
+            value={keyserverURL}
+            onChange={onChangeKeyserverURL}
+            placeholder="Keyserver URL"
+          />
+        </div>
+        <div className={css.buttonContainer}>
+          <Button
+            variant="filled"
+            buttonColor={buttonThemes.primary}
+            className={css.button}
+            onClick={onClickAddKeyserver}
+          >
+            Add keyserver
+          </Button>
+        </div>
+      </Modal>
+    ),
+    [keyserverURL, onChangeKeyserverURL, onClickAddKeyserver, popModal],
+  );
+
+  return addKeyserverModal;
+}
+
+export default AddKeyserverModal;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -281,6 +281,7 @@
 
   /* Modal */
   --modal-background-primary-default: var(--shades-black-85);
+  --modal-background-secondary-default: var(--shades-black-90);
   --modal-header-primary-default: var(--shades-white-100);
   --modal-close-primary-default: var(--shades-black-50);
   --modal-close-primary-hover: var(--shades-white-100);
@@ -329,6 +330,7 @@
 
   /* Modal */
   --modal-background-primary-default: var(--shades-white-100);
+  --modal-background-secondary-default: var(--shades-white-80);
   --modal-header-primary-default: var(--shades-black-95);
   --modal-close-primary-default: var(--shades-black-50);
   --modal-close-primary-hover: var(--shades-black-95);