diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -15,6 +15,7 @@
 
 import AddUsersListItem from './add-users-list-item.react.js';
 import css from './add-users-list.css';
+import Button from '../../components/button.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 
 type Props = {
@@ -121,6 +122,17 @@
     [sortedUsersWithENSNames, toggleUser, pendingUsersToAdd],
   );
 
+  const onClickClearAll = React.useCallback(() => {
+    setPendingUsersToAdd(new Set());
+  }, [setPendingUsersToAdd]);
+
+  const clearAllButtonColor = React.useMemo(() => {
+    if (pendingUsersToAdd.size === 0) {
+      return { color: 'var(--link-background-secondary-disabled)' };
+    }
+    return { color: 'var(--link-background-secondary-default)' };
+  }, [pendingUsersToAdd.size]);
+
   const listHeader = React.useMemo(() => {
     let selectionText = 'Select users';
     if (pendingUsersToAdd.size > 0) {
@@ -130,10 +142,17 @@
     return (
       <div className={css.listHeaderContainer}>
         <div className={css.selectionText}>{selectionText}</div>
-        {/* {TODO: Add clear all button here} */}
+        <Button
+          variant="text"
+          buttonColor={clearAllButtonColor}
+          onClick={onClickClearAll}
+          disabled={pendingUsersToAdd.size === 0}
+        >
+          Clear all
+        </Button>
       </div>
     );
-  }, [pendingUsersToAdd.size]);
+  }, [clearAllButtonColor, onClickClearAll, pendingUsersToAdd.size]);
 
   let errors;
   if (errorMessage) {
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -293,6 +293,8 @@
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);
   --link-background-primary-disabled: var(--shades-black-50);
+  --link-background-secondary-default: var(--violet-light-100);
+  --link-background-secondary-disabled: var(--shades-black-75);
 
   /* Separator */
   --separator-background-primary-default: var(--shades-black-75);
@@ -398,6 +400,9 @@
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);
   --link-background-primary-disabled: var(--shades-black-50);
+  /* @GINSU: TODO double check the secondary values after redesign is finished */
+  --link-background-secondary-default: var(--violet-dark-100);
+  --link-background-secondary-disabled: var(--shades-white-60);
 
   /* Separator */
   --separator-background-primary-default: var(--shades-white-60);