diff --git a/src/client/graphics/layers/EmojiTable.ts b/src/client/graphics/layers/EmojiTable.ts
index ca87f009b..ef2745280 100644
--- a/src/client/graphics/layers/EmojiTable.ts
+++ b/src/client/graphics/layers/EmojiTable.ts
@@ -57,6 +57,15 @@ export class EmojiTable extends LitElement {
 
   private onEmojiClicked: (emoji: string) => void = () => {};
 
+  private handleBackdropClick = (e: MouseEvent) => {
+    const panelContent = this.querySelector(
+      'div[class*="bg-zinc-900"]',
+    ) as HTMLElement;
+    if (panelContent && !panelContent.contains(e.target as Node)) {
+      this.hideTable();
+    }
+  };
+
   render() {
     if (!this.isVisible) {
       return null;
@@ -64,43 +73,51 @@ export class EmojiTable extends LitElement {
 
     return html`
       <div
-        class="bg-slate-800 max-w-[95vw] max-h-[95vh] pt-[15px] pb-[15px] fixed flex flex-col -translate-x-1/2 -translate-y-1/2 
-                items-center rounded-[10px] z-[9999] top-[50%] left-[50%] justify-center"
-        @contextmenu=${(e: MouseEvent) => e.preventDefault()}
-        @wheel=${(e: WheelEvent) => e.stopPropagation()}
+        class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-center justify-center z-[9998]"
+        @click=${this.handleBackdropClick}
       >
-        <!-- Close button -->
-        <button
-          class="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center
-                  bg-red-500 hover:bg-red-900 text-white rounded-full
-                  text-sm font-bold transition-colors"
-          @click=${this.hideTable}
-        >
-          ✕
-        </button>
         <div
-          class="flex flex-col overflow-y-auto"
-          style="scrollbar-gutter: stable both-edges;"
+          class="bg-zinc-900/95 p-[6px] flex items-center justify-center rounded-[10px] z-[9999] relative shadow-2xl shadow-black/50 ring-1 ring-white/5"
+          style="
+            width: min(410px, calc(100vw - 60px), calc((100vh - 40px) * 215 / 449));
+            aspect-ratio: 215 / 449;
+            container-type: size;
+          "
+          @contextmenu=${(e: MouseEvent) => e.preventDefault()}
+          @wheel=${(e: WheelEvent) => e.stopPropagation()}
+          @click=${(e: MouseEvent) => e.stopPropagation()}
         >
-          ${emojiTable.map(
-            (row) => html`
-              <div class="w-full justify-center flex">
-                ${row.map(
-                  (emoji) => html`
-                    <button
-                      class="flex transition-transform duration-300 ease justify-center items-center cursor-pointer
-                              border border-solid border-slate-500 rounded-[12px] bg-slate-700 hover:bg-slate-600 active:bg-slate-500 
-                              md:m-[8px] md:text-[60px] md:w-[80px] md:h-[80px] hover:scale-[1.1] active:scale-[0.95]
-                              sm:w-[60px] sm:h-[60px] sm:text-[32px] sm:m-[5px] text-[28px] w-[50px] h-[50px] m-[3px]"
-                      @click=${() => this.onEmojiClicked(emoji)}
-                    >
-                      ${emoji}
-                    </button>
-                  `,
-                )}
-              </div>
-            `,
-          )}
+          <!-- Close button -->
+          <button
+            class="absolute -top-3 -right-3 w-7 h-7 flex items-center justify-center
+                    bg-zinc-700 hover:bg-red-500 text-white rounded-full shadow transition-colors z-[10000]"
+            @click=${this.hideTable}
+          >
+            ✕
+          </button>
+          <div
+            class="flex flex-col"
+            style="transform: scale(calc(100cqw / 215px)); transform-origin: center;"
+          >
+            ${emojiTable.map(
+              (row) => html`
+                <div class="flex justify-center">
+                  ${row.map(
+                    (emoji) => html`
+                      <button
+                        class="flex transition-transform duration-300 ease justify-center items-center cursor-pointer
+                                border border-solid border-zinc-600 rounded-[8px] bg-zinc-800 hover:bg-zinc-700 active:bg-zinc-600
+                                m-[2px] text-[25px] w-[35px] h-[35px] hover:scale-[1.1] active:scale-[0.95]"
+                        @click=${() => this.onEmojiClicked(emoji)}
+                      >
+                        ${emoji}
+                      </button>
+                    `,
+                  )}
+                </div>
+              `,
+            )}
+          </div>
         </div>
       </div>
     `;