diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index ef9c3745..4b322f7d 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -37,6 +37,8 @@ const filterByKeyword = (list, keyword = '') => {
   return orderedEmojiList.flat()
 }
 
+const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
+
 const EmojiPicker = {
   props: {
     enableStickerPicker: {
@@ -173,9 +175,12 @@ const EmojiPicker = {
       }
       return 0
     },
+    allEmojis () {
+      return this.$store.state.instance.customEmoji || []
+    },
     filteredEmoji () {
       return filterByKeyword(
-        this.$store.state.instance.customEmoji || [],
+        this.allEmojis,
         this.keyword
       )
     },
@@ -183,7 +188,6 @@ const EmojiPicker = {
       return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
     },
     groupedCustomEmojis () {
-      const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5)
       return this.customEmojiBuffer.reduce((res, emoji) => {
         const pack = packOf(emoji)
         if (!res[pack]) {
@@ -200,6 +204,26 @@ const EmojiPicker = {
         return res
       }, {})
     },
+    allEmojiGroups () {
+      return this.allEmojis
+        .reduce((res, emoji) => {
+          const packName = packOf(emoji)
+          const packId = `custom-${packName}`
+          if (res.filter(k => k.id === packId).length === 0) {
+            res.push({
+              id: packId,
+              text: packName,
+              image: emoji.imageUrl
+            })
+          }
+          return res
+        }, [])
+        .concat({
+          id: 'standard',
+          text: this.$t('emoji.unicode'),
+          icon: 'box-open'
+        })
+    },
     emojis () {
       const standardEmojis = this.$store.state.instance.emoji || []
       // const customEmojis = this.customEmojiBuffer
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 46cfa1c8..9d7a9bae 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -51,6 +51,7 @@
     display: flex;
     height: 32px;
     padding: 10px 7px 5px;
+    overflow-x: auto;
   }
 
   .content {
@@ -62,6 +63,9 @@
 
   .emoji-tabs {
     flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
   }
 
   .emoji-groups {
@@ -69,6 +73,7 @@
   }
 
   .additional-tabs {
+    display: block;
     border-left: 1px solid;
     border-left-color: $fallback--icon;
     border-left-color: var(--icon, $fallback--icon);
@@ -78,7 +83,6 @@
 
   .additional-tabs,
   .emoji-tabs {
-    display: block;
     min-width: 0;
     flex-basis: auto;
     flex-shrink: 1;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 65aa5bb6..5bcee2bc 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,12 +3,12 @@
     <div class="heading">
       <span class="emoji-tabs">
         <span
-          v-for="group in emojis"
+          v-for="group in allEmojiGroups"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
             active: activeGroupView === group.id,
-            disabled: group.emojis.length === 0
+            disabled: false
           }"
           :title="group.text"
           @click.prevent="highlight(group.id)"