diff --git a/web/avatars/edit-user-avatar.css b/web/avatars/edit-user-avatar-menu.css
copy from web/avatars/edit-user-avatar.css
copy to web/avatars/edit-user-avatar-menu.css
--- a/web/avatars/edit-user-avatar.css
+++ b/web/avatars/edit-user-avatar-menu.css
@@ -1,12 +1,3 @@
-.editUserAvatarContainer {
-  position: relative;
-  height: 112px;
-  width: 112px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .editAvatarBadge {
   display: flex;
   justify-content: center;
@@ -27,7 +18,3 @@
 .editAvatarBadge:hover {
   filter: brightness(0.8);
 }
-
-.editAvatarLoadingSpinner {
-  position: absolute;
-}
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
@@ -6,10 +6,15 @@
 import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 
+import css from './edit-user-avatar-menu.css';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
 
-const editIcon = <SWMansionIcon icon="edit-2" size={20} />;
+const editIcon = (
+  <div className={css.editAvatarBadge}>
+    <SWMansionIcon icon="edit-2" size={20} />
+  </div>
+);
 
 function EditUserAvatarMenu(): React.Node {
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
diff --git a/web/avatars/edit-user-avatar.css b/web/avatars/edit-user-avatar.css
--- a/web/avatars/edit-user-avatar.css
+++ b/web/avatars/edit-user-avatar.css
@@ -7,27 +7,6 @@
   align-items: center;
 }
 
-.editAvatarBadge {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 34px;
-  height: 34px;
-  color: var(--fg);
-  background-color: var(--edit-avatar-button);
-  border: 2px solid var(--bg);
-  border-radius: 50%;
-  cursor: pointer;
-  transition-duration: 200ms;
-}
-
-.editAvatarBadge:hover {
-  filter: brightness(0.8);
-}
-
 .editAvatarLoadingSpinner {
   position: absolute;
 }
diff --git a/web/avatars/edit-user-avatar.react.js b/web/avatars/edit-user-avatar.react.js
--- a/web/avatars/edit-user-avatar.react.js
+++ b/web/avatars/edit-user-avatar.react.js
@@ -30,9 +30,7 @@
         {userAvatarSaveInProgress ? loadingSpinner : null}
       </div>
       <UserAvatar userID={userID} size="profile" />
-      <div className={css.editAvatarBadge}>
-        <EditUserAvatarMenu />
-      </div>
+      <EditUserAvatarMenu />
     </div>
   );
 }