diff --git a/packages/ui/src/components/emoji/ActionsPopup.svelte b/packages/ui/src/components/emoji/ActionsPopup.svelte
index d277649059..dbcddb4e8c 100644
--- a/packages/ui/src/components/emoji/ActionsPopup.svelte
+++ b/packages/ui/src/components/emoji/ActionsPopup.svelte
@@ -5,8 +5,8 @@
   //
   import { createEventDispatcher } from 'svelte'
   import type { Emoji } from 'emojibase'
-  import type { EmojiWithGroup } from '.'
-  import { EmojiButton, getEmoji, getSkinTone, emojiStore } from '.'
+  import { EmojiWithGroup, getEmojiForHexcode, getSkinnedEmojiTest } from '.'
+  import { EmojiButton, getSkinTone, emojiStore } from '.'
   import { Label, IconDelete, closeTooltip, ButtonBase } from '../..'
   import plugin from '../../plugin'
   import SkinToneTooltip from './SkinToneTooltip.svelte'
@@ -28,8 +28,8 @@
     const def = $emojiStore[168]
     const temp = e.skins?.find((skin) => Array.isArray(skin.tone) && skin.tone.length > 1)?.hexcode.split('-200D-')
     if (temp === undefined || temp.length < 2) return [def, def]
-    const firstEmoji = getEmoji(temp[0].slice(0, -6))?.emoji ?? def
-    const secondEmoji = getEmoji(temp[temp.length - 1].slice(0, -6))?.emoji ?? def
+    const firstEmoji = getEmojiForHexcode(temp[0].slice(0, -6)) ?? def
+    const secondEmoji = getEmojiForHexcode(temp[temp.length - 1].slice(0, -6)) ?? def
     return [firstEmoji, secondEmoji]
   }
   const emojiParts = getEmojiParts(emoji)
diff --git a/packages/ui/src/components/emoji/SkinToneTooltip.svelte b/packages/ui/src/components/emoji/SkinToneTooltip.svelte
index 188c8863cd..b3fa283574 100644
--- a/packages/ui/src/components/emoji/SkinToneTooltip.svelte
+++ b/packages/ui/src/components/emoji/SkinToneTooltip.svelte
@@ -13,7 +13,7 @@
 
   const dispatch = createEventDispatcher()
 
-  const skins: Emoji[] = emoji.skins ?? []
+  const skins: Emoji[] = emoji.skins !== undefined ? [emoji, ...emoji.skins] : []
 </script>
 
 <div class="flex-row-center flex-gap-1">
diff --git a/packages/ui/src/components/emoji/utils.ts b/packages/ui/src/components/emoji/utils.ts
index 75b68f4fe4..02afeb2d1e 100644
--- a/packages/ui/src/components/emoji/utils.ts
+++ b/packages/ui/src/components/emoji/utils.ts
@@ -72,6 +72,10 @@ export async function updateEmojis (lang?: string): Promise<void> {
   emojiStore.set(emojis)
 }
 
+export function getEmojiForHexcode (hexcode: string): EmojiWithGroup | undefined {
+  return get(emojiStore).find((e) => e.hexcode === hexcode)
+}
+
 export function getSkinnedEmoji (shortcode: string | undefined, skinTone?: number): Emoji | undefined {
   if (shortcode === undefined) return undefined
   const shortcodeSlice = shortcode.slice(1, -1)
@@ -148,7 +152,7 @@ export const getFrequentlyEmojis = (): EmojiWithGroup[] | undefined => {
     const parsedEmojis = JSON.parse(frequentlyEmojis)
     if (!Array.isArray(parsedEmojis)) return undefined
     const emojis = get(emojiStore)
-    return emojis.filter(e => parsedEmojis.find(pe => pe.hexcode === e.hexcode) !== undefined)
+    return emojis.filter(e => parsedEmojis.find(pe => pe.hexcode === e.hexcode || e.skins?.find(s => s.hexcode === pe.hexcode) !== undefined) !== undefined)
   } catch (e) {
     console.error(e)
     return undefined