diff --git a/web/settings/keyserver-selection-list.css b/web/settings/keyserver-selection-list.css
--- a/web/settings/keyserver-selection-list.css
+++ b/web/settings/keyserver-selection-list.css
@@ -2,11 +2,30 @@
   flex: 1;
   background-color: var(--panel-background-primary-default);
   padding: 40px;
+  max-width: 456px;
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
 }
 
 .header {
   color: var(--text-background-primary-default);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
-  margin-bottom: 16px;
+}
+
+.addButton {
+  background-color: var(--button-background-secondary-default);
+  border-radius: 4px;
+  color: var(--button-label-secondary-default);
+}
+
+.addButton:hover {
+  cursor: pointer;
+  background-color: var(--button-background-secondary-hover);
 }
diff --git a/web/settings/keyserver-selection-list.react.js b/web/settings/keyserver-selection-list.react.js
--- a/web/settings/keyserver-selection-list.react.js
+++ b/web/settings/keyserver-selection-list.react.js
@@ -2,11 +2,14 @@
 
 import * as React from 'react';
 
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { selectedKeyserversSelector } from 'lib/selectors/keyserver-selectors.js';
 import type { SelectedKeyserverInfo } from 'lib/types/keyserver-types.js';
 
 import KeyserverSelectionListItem from './keyserver-selection-list-item.react.js';
 import css from './keyserver-selection-list.css';
+import AddKeyserverModal from '../modals/keyserver-selection/add-keyserver-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 function KeyserverSelectionList(): React.Node {
@@ -27,14 +30,30 @@
     [selectedKeyserverInfos],
   );
 
+  const { pushModal } = useModalContext();
+
+  const onClickAddKeyserver = React.useCallback(
+    () => pushModal(<AddKeyserverModal />),
+    [pushModal],
+  );
+
   const keyserverSelectionList = React.useMemo(
     () => (
       <div className={css.container}>
-        <h4 className={css.header}>Keyservers</h4>
+        <div className={css.headerContainer}>
+          <h4 className={css.header}>Keyservers</h4>
+          <div onClick={onClickAddKeyserver}>
+            <SWMansionIcon
+              icon="plus-small"
+              size={26}
+              className={css.addButton}
+            />
+          </div>
+        </div>
         {selectedKeyservers}
       </div>
     ),
-    [selectedKeyservers],
+    [onClickAddKeyserver, selectedKeyservers],
   );
 
   return keyserverSelectionList;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -267,9 +267,12 @@
 
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
+  --button-background-secondary-default: var(--shades-black-75);
   --button-background-primary-hover: var(--violet-dark-80);
+  --button-background-secondary-hover: var(--shades-black-60);
   --button-background-primary-disabled: var(--shades-black-75);
   --button-label-primary-default: var(--shades-white-100);
+  --button-label-secondary-default: var(--shades-white-60);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
 
@@ -316,9 +319,12 @@
 
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
+  --button-background-secondary-default: var(--shades-black-50);
   --button-background-primary-hover: var(--violet-dark-80);
+  --button-background-secondary-hover: var(--shades-black-60);
   --button-background-primary-disabled: var(--shades-white-60);
   --button-label-primary-default: var(--shades-white-100);
+  --button-label-secondary-default: var(--shades-white-90);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);