diff --git a/web/settings/keyserver-selection-list-item.css b/web/settings/keyserver-selection-list-item.css
new file mode 100644
index 000000000..1d0c2deec
--- /dev/null
+++ b/web/settings/keyserver-selection-list-item.css
@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+}
+
+.container:not(:last-child) {
+  border-bottom: 1px solid var(--separator-background-primary-default);
+}
+
+.container:hover {
+  cursor: pointer;
+}
diff --git a/web/settings/keyserver-selection-list-item.react.js b/web/settings/keyserver-selection-list-item.react.js
new file mode 100644
index 000000000..00ab74354
--- /dev/null
+++ b/web/settings/keyserver-selection-list-item.react.js
@@ -0,0 +1,35 @@
+// @flow
+
+import * as React from 'react';
+
+import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
+import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+
+import css from './keyserver-selection-list-item.css';
+import KeyserverPill from '../components/keyserver-pill.react.js';
+import StatusIndicator from '../components/status-indicator.react.js';
+
+type Props = {
+  +keyserverAdminUserInfo: GlobalAccountUserInfo,
+  +keyserverInfo: KeyserverInfo,
+};
+
+function KeyserverSelectionListItem(props: Props): React.Node {
+  const { keyserverAdminUserInfo, keyserverInfo } = props;
+
+  const keyserverSelectionListItem = React.useMemo(
+    () => (
+      <div className={css.container}>
+        <KeyserverPill
+          keyserverAdminUsername={keyserverAdminUserInfo.username}
+        />
+        <StatusIndicator connectionInfo={keyserverInfo.connection} />
+      </div>
+    ),
+    [keyserverAdminUserInfo.username, keyserverInfo.connection],
+  );
+
+  return keyserverSelectionListItem;
+}
+
+export default KeyserverSelectionListItem;