diff --git a/src/app.css b/src/app.css
index eee524c..af6e075 100644
--- a/src/app.css
+++ b/src/app.css
@@ -131,7 +131,30 @@ body, .markdown-content, .post-content {
   /* Normal emojis are text, not images, so no filter should apply */
 }
 
-/* Reaction buttons - no grayscale filter, emojis should be in full color */
+/* Emoji picker buttons - apply grayscale filter to buttons that open the picker */
+/* But NOT to emojis inside the picker drawer or rendered content */
+.toolbar-button,
+.reaction-btn.heart-btn {
+  filter: grayscale(100%) sepia(15%) hue-rotate(200deg) saturate(60%) brightness(0.95);
+}
+
+.dark .toolbar-button,
+.dark .reaction-btn.heart-btn {
+  filter: grayscale(100%) sepia(20%) hue-rotate(200deg) saturate(70%) brightness(0.9);
+}
+
+/* Override: emojis in picker drawer should be full color */
+.emoji-drawer *,
+.emoji-picker * {
+  filter: none !important;
+}
+
+/* Override: emojis in rendered content should be full color */
+.markdown-content *,
+.post-content *,
+.reaction-display * {
+  filter: none !important;
+}
 
 /* Content images should be prominent - no grayscale filters */
 .markdown-content img,