diff --git a/app/components/emoji.tsx b/app/components/emoji.tsx
index b2434930755..3b1f5e7516b 100644
--- a/app/components/emoji.tsx
+++ b/app/components/emoji.tsx
@@ -21,6 +21,7 @@ export function AvatarPicker(props: {
 }) {
   return (
     <EmojiPicker
+      width={"100%"}
       lazyLoadEmojis
       theme={EmojiTheme.AUTO}
       getEmojiUrl={getEmojiUrl}
diff --git a/app/components/settings.module.scss b/app/components/settings.module.scss
index 1eac17c16d5..c6aec4203cf 100644
--- a/app/components/settings.module.scss
+++ b/app/components/settings.module.scss
@@ -5,6 +5,8 @@
 
 .avatar {
   cursor: pointer;
+  position: relative;
+  z-index: 1;
 }
 
 .edit-prompt-modal {
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 84ae7edf651..ba6d9345e24 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -693,7 +693,9 @@ export function Settings() {
             >
               <div
                 className={styles.avatar}
-                onClick={() => setShowEmojiPicker(true)}
+                onClick={() => {
+                  setShowEmojiPicker(!showEmojiPicker);
+                }}
               >
                 <Avatar avatar={config.avatar} />
               </div>
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index c67d352bee1..83c02f92a23 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -14,17 +14,24 @@
 
 .popover-content {
   position: absolute;
+  width: 350px;
   animation: slide-in 0.3s ease;
   right: 0;
   top: calc(100% + 10px);
 }
-
+@media screen and (max-width: 600px) {
+  .popover-content {
+    width: auto;
+  }
+}
 .popover-mask {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
+  background-color: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(5px);
 }
 
 .list-item {
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index f7e326fd318..da700c0fb7c 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -26,10 +26,10 @@ export function Popover(props: {
     <div className={styles.popover}>
       {props.children}
       {props.open && (
-        <div className={styles["popover-content"]}>
-          <div className={styles["popover-mask"]} onClick={props.onClose}></div>
-          {props.content}
-        </div>
+        <div className={styles["popover-mask"]} onClick={props.onClose}></div>
+      )}
+      {props.open && (
+        <div className={styles["popover-content"]}>{props.content}</div>
       )}
     </div>
   );