diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue
index 063b122f8b..c77fb4c098 100644
--- a/packages/frontend/src/components/global/MkCustomEmoji.vue
+++ b/packages/frontend/src/components/global/MkCustomEmoji.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<span v-if="errored">:{{ customEmojiName }}:</span>
+<span v-if="errored || isDraft">:{{ customEmojiName }}:</span>
 <img v-else :class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async" @error="errored = true" @load="errored = false"/>
 </template>
 
@@ -25,6 +25,7 @@ const props = defineProps<{
 
 const customEmojiName = computed(() => (props.name[0] === ':' ? props.name.substring(1, props.name.length - 1) : props.name).replace('@.', ''));
 const isLocal = computed(() => !props.host && (customEmojiName.value.endsWith('@.') || !customEmojiName.value.includes('@')));
+const isDraft = computed(() => customEmojisNameMap.value.get(customEmojiName.value)?.draft ?? false);
 
 const rawUrl = computed(() => {
 	if (props.url) {
diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts
index 8ecd1bd2eb..9b4b56b7de 100644
--- a/packages/frontend/src/custom-emojis.ts
+++ b/packages/frontend/src/custom-emojis.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { shallowRef, computed, markRaw, watch } from 'vue';
+import { shallowRef, computed, markRaw, triggerRef,watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { api, apiGet } from '@/os.js';
 import { useStream } from '@/stream.js';
@@ -11,6 +11,7 @@ import { get, set } from '@/scripts/idb-proxy.js';
 
 const storageCache = await get('emojis');
 export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(Array.isArray(storageCache) ? storageCache : []);
+export const customEmojisNameMap = computed(() => new Map(customEmojis.value.map(item => [item.name, item])));
 export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 	const categories = new Set<string>();
 	for (const emoji of customEmojis.value) {
@@ -34,16 +35,19 @@ const stream = useStream();
 
 stream.on('emojiAdded', emojiData => {
 	customEmojis.value = [emojiData.emoji, ...customEmojis.value];
+	triggerRef(customEmojis);
 	set('emojis', customEmojis.value);
 });
 
 stream.on('emojiUpdated', emojiData => {
 	customEmojis.value = customEmojis.value.map(item => emojiData.emojis.find(search => search.name === item.name) as Misskey.entities.CustomEmoji ?? item);
+	triggerRef(customEmojis);
 	set('emojis', customEmojis.value);
 });
 
 stream.on('emojiDeleted', emojiData => {
 	customEmojis.value = customEmojis.value.filter(item => !emojiData.emojis.some(search => search.name === item.name));
+	triggerRef(customEmojis);
 	set('emojis', customEmojis.value);
 });
 
@@ -60,6 +64,7 @@ export async function fetchCustomEmojis(force = false) {
 	}
 
 	customEmojis.value = res.emojis;
+	triggerRef(customEmojis);
 	set('emojis', res.emojis);
 	set('lastEmojisFetchedAt', now);
 }