diff --git a/buffit/index.html b/buffit/index.html
index 9d1b5dd..ce1cb40 100644
--- a/buffit/index.html
+++ b/buffit/index.html
@@ -15,6 +15,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
 <script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1"></script>
 <style>
   :root {
     --bg: #0e0d0c;
@@ -467,11 +468,45 @@
 
   footer a { color: var(--text-faint); }
 
+  #emoji-picker-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #emoji-picker-modal.show {
+    display: flex;
+  }
+
+  #emoji-picker-container {
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    width: 90%;
+    max-width: 380px;
+    max-height: 500px;
+  }
+
+  emoji-picker {
+    --category-emoji-padding: 0.5rem;
+    --category-emoji-size: 1.5rem;
+    --emoji-padding: 0.25rem;
+    --emoji-size: 1.25rem;
+    --font-family: 'DM Sans', sans-serif;
+    --skin-tone-indicator-height: 3px;
+  }
+
   @media (max-width: 480px) {
     .panel, .composer-panel { border-radius: 10px; }
     .panel { padding: 30px 22px; }
     textarea { padding: 24px 22px 8px; font-size: 18px; }
     .composer-footer { padding: 12px 22px 18px; }
+    #emoji-picker-container { width: 95%; max-height: 60vh; }
   }
 </style>
 </head>
@@ -533,6 +568,12 @@
   <footer>BuffIT never sees your Buffer credentials · tokens live only in this browser tab</footer>
 </div>
 
+<div id="emoji-picker-modal">
+  <div id="emoji-picker-container">
+    <emoji-picker></emoji-picker>
+  </div>
+</div>
+
 <script>
 (function () {
   const PROXY_BASE = 'https://buffit-proxy.madebydannyuk.workers.dev';
@@ -938,44 +979,24 @@
   mediaBtn.addEventListener('click', () => mediaInput.click());
 
   // ---------- emoji picker ----------
+  const emojiModal = $('emoji-picker-modal');
+  const emojiPicker = document.querySelector('emoji-picker');
+
   emojiBtn.addEventListener('click', () => {
-    const picker = document.createElement('input');
-    picker.type = 'text';
-    picker.setAttribute('inputmode', 'emoji');
-    picker.style.position = 'fixed';
-    picker.style.opacity = '0';
-    picker.style.pointerEvents = 'none';
-    document.body.appendChild(picker);
-
-    picker.addEventListener('input', (e) => {
-      if (e.data) {
-        postText.value += e.data;
-        postText.dispatchEvent(new Event('input'));
-      }
-      document.body.removeChild(picker);
-      postText.focus();
-    }, { once: true });
+    emojiModal.classList.add('show');
+  });
 
-    picker.addEventListener('blur', () => {
-      if (document.body.contains(picker)) {
-        document.body.removeChild(picker);
-      }
-    }, { once: true });
-
-    setTimeout(() => {
-      picker.focus();
-      if (picker.showPicker) {
-        try {
-          picker.showPicker();
-        } catch (e) {
-          document.body.removeChild(picker);
-          postText.focus();
-        }
-      } else {
-        document.body.removeChild(picker);
-        postText.focus();
-      }
-    }, 0);
+  emojiModal.addEventListener('click', (e) => {
+    if (e.target === emojiModal) {
+      emojiModal.classList.remove('show');
+    }
+  });
+
+  emojiPicker.addEventListener('emoji-click', (e) => {
+    postText.value += e.detail.unicode;
+    postText.dispatchEvent(new Event('input'));
+    emojiModal.classList.remove('show');
+    postText.focus();
   });
 
   mediaInput.addEventListener('change', () => {