diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.hbs
index dbada9b0c9..b70f544aef 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.hbs
@@ -23,7 +23,7 @@
 
         <div class="kg-card kg-card-callout kg-card-callout-{{@payload.backgroundColor}}">
             {{#if @payload.calloutEmoji}}
-            <div class="kg-callout-emoji" {{on "click" this.changeEmoji}}>{{@payload.calloutEmoji}}</div>
+            <div class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}" {{on "click" this.changeEmoji}}>{{@payload.calloutEmoji}}</div>
             {{/if}}
             <KoenigBasicHtmlTextarea
                 @html={{@payload.calloutText}}
@@ -74,7 +74,7 @@
 
         <div class="kg-card kg-card-callout kg-card-callout-{{@payload.backgroundColor}}">
             {{#if @payload.calloutEmoji}}
-            <div class="kg-callout-emoji">{{@payload.calloutEmoji}}</div>
+            <div class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}">{{@payload.calloutEmoji}}</div>
             {{/if}}
             <div>{{{@payload.calloutText}}}</div>
         </div>
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.js
index 131dd1c1ca..ca376e0906 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.js
@@ -7,6 +7,7 @@ import {isBlank} from '@ember/utils';
 import {run} from '@ember/runloop';
 import {inject as service} from '@ember/service';
 import {set} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
 
 const storageKey = 'gh-kg-callout-emoji';
 
@@ -33,6 +34,9 @@ export default class KoenigCardCalloutComponent extends Component {
         {name: 'Brand color', color: 'accent'}
     ];
 
+    @tracked
+    isPickerVisible = false;
+
     get selectedBackgroundColor() {
         return this.backgroundColors.find(option => option.color === this.args.payload.backgroundColor);
     }
@@ -80,6 +84,10 @@ export default class KoenigCardCalloutComponent extends Component {
         this.picker.on('emoji', (selection) => {
             this.setCalloutEmoji(selection.emoji);
         });
+
+        this.picker.on('hidden', () => {
+            this.isPickerVisible = false;
+        });
     }
 
     // required for snippet rects to be calculated - editor reaches in to component,
@@ -143,7 +151,8 @@ export default class KoenigCardCalloutComponent extends Component {
 
     @action
     changeEmoji(event) {
-        this.picker.togglePicker(event.target);
+        this.picker.showPicker(event.target);
+        this.isPickerVisible = true;
     }
 
     @action