diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js
--- a/web/avatars/edit-user-avatar-menu.react.js
+++ b/web/avatars/edit-user-avatar-menu.react.js
@@ -1,7 +1,9 @@
 // @flow
 
+import invariant from 'invariant';
 import * as React from 'react';
 
+import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 
 import MenuItem from '../components/menu-item.react.js';
@@ -10,6 +12,15 @@
 const editIcon = <SWMansionIcon icon="edit-2" size={20} />;
 
 function EditUserAvatarMenu(): React.Node {
+  const editUserAvatarContext = React.useContext(EditUserAvatarContext);
+  invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
+
+  const { setUserAvatar } = editUserAvatarContext;
+
+  const removeUserAvatar = React.useCallback(() => {
+    setUserAvatar({ type: 'remove' });
+  }, [setUserAvatar]);
+
   const emojiMenuItem = React.useMemo(
     () => <MenuItem key="emoji" text="Select emoji" icon="emote-smile" />,
     [],
@@ -19,8 +30,15 @@
     [],
   );
   const removeMenuItem = React.useMemo(
-    () => <MenuItem key="remove" text="Reset to default" icon="trash-2" />,
-    [],
+    () => (
+      <MenuItem
+        key="remove"
+        text="Reset to default"
+        icon="trash-2"
+        onClick={removeUserAvatar}
+      />
+    ),
+    [removeUserAvatar],
   );
 
   const menuItems = React.useMemo(