diff --git a/web/settings/relationship/add-users-list-item.react.js b/web/settings/relationship/add-users-list-item.react.js
--- a/web/settings/relationship/add-users-list-item.react.js
+++ b/web/settings/relationship/add-users-list-item.react.js
@@ -1,28 +1,40 @@
 // @flow
 
+import classnames from 'classnames';
 import * as React from 'react';
 
 import type { AccountUserInfo } from 'lib/types/user-types.js';
 
 import css from './add-users-list.css';
-import Button from '../../components/button.react.js';
+import UserAvatar from '../../avatars/user-avatar.react.js';
+import Checkbox from '../../components/checkbox.react.js';
 
 type Props = {
   +userInfo: AccountUserInfo,
-  +selectUser: (userID: string) => mixed,
+  +userSelected: boolean,
+  +onToggleUser: (userID: string) => mixed,
 };
 
 function AddUsersListItem(props: Props): React.Node {
-  const { userInfo, selectUser } = props;
-  const addUser = React.useCallback(
-    () => selectUser(userInfo.id),
-    [selectUser, userInfo.id],
+  const { userInfo, userSelected, onToggleUser } = props;
+
+  const toggleUser = React.useCallback(
+    () => onToggleUser(userInfo.id),
+    [onToggleUser, userInfo.id],
   );
+
+  const usernameClassname = classnames(css.username, {
+    [css.selectedUsername]: userSelected,
+  });
+
   return (
-    <Button className={css.addUserButton} onClick={addUser}>
-      <div className={css.addUserButtonUsername}>{userInfo.username}</div>
-      Add
-    </Button>
+    <div className={css.userListItemContainer} onClick={toggleUser}>
+      <Checkbox checked={userSelected} />
+      <div className={css.avatarContainer}>
+        <UserAvatar userID={userInfo.id} size="S" />
+      </div>
+      <div className={usernameClassname}>{userInfo.username}</div>
+    </div>
   );
 }
 
diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
--- a/web/settings/relationship/add-users-list.css
+++ b/web/settings/relationship/add-users-list.css
@@ -16,23 +16,37 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  margin-bottom: 8px;
 }
 
-.addUserButton {
-  justify-content: space-between;
-  padding: 16px;
+.userListItemContainer {
+  display: flex;
   color: var(--relationship-modal-color);
   font-size: var(--l-font-18);
   line-height: var(--line-height-display);
+  padding: 8px;
+}
+
+.userListItemContainer:hover {
+  cursor: pointer;
+  background-color: var(--listItem-background-primary-hover);
+  border-radius: 8px;
 }
 
-.addUserButtonUsername {
+.avatarContainer {
+  margin: 0 8px 0 16px;
+}
+
+.username {
+  color: var(--text-background-secondary-default);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.selectedUsername {
+  color: var(--text-background-primary-default);
+}
+
 .confirmButtonContainer {
   display: flex;
   flex-direction: column;
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
@@ -153,7 +153,8 @@
         <AddUsersListItem
           userInfo={userInfo}
           key={userInfo.id}
-          selectUser={selectUser}
+          onToggleUser={selectUser}
+          userSelected={true} // TODO: fix this
         />
       )),
     [filteredUsersWithENSNames, selectUser],
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -352,6 +352,9 @@
   --tab-label-secondary-default: var(--shades-black-50);
   --tab-label-secondary-active: var(--shades-white-100);
   --tab-label-secondary-hover: var(--shades-white-80);
+
+  /* List Item */
+  --listItem-background-primary-hover: var(--shades-black-90);
 }
 
 /* Light theme */
@@ -456,4 +459,8 @@
   --tab-label-secondary-default: var(--shades-black-60);
   --tab-label-secondary-active: var(--shades-black-95);
   --tab-label-secondary-hover: var(--shades-black-85);
+
+  /* List Item */
+  /* @GINSU: TODO double check these values after redesign is finished */
+  --listItem-background-primary-hover: var(--shades-white-70);
 }