diff --git a/src/lang/en.js b/src/lang/en.js
index c7903c68..a84a4ec3 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -323,7 +323,14 @@ export default {
     packs: 'Packs',
     remotePacks: 'Remote packs',
     remoteInstanceAddress: 'Remote instance address',
-    refreshRemote: 'Refresh remote packs'
+    refreshRemote: 'Refresh remote packs',
+    sharePack: 'Share pack',
+    homepage: 'Homepage',
+    description: 'Description',
+    license: 'License',
+    fallbackSrc: 'Fallback source',
+    fallbackSrcSha: 'Fallback source SHA',
+    savePackMetadata: 'Save pack metadata'
   },
   invites: {
     inviteTokens: 'Invite tokens',
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index d29ea9b2..71708ee3 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,111 +1,56 @@
 <template>
-  <div>
-    <h2>{{ name }}</h2>
-
-    <prop-editing-row name="Share pack">
-      <el-switch v-model="share" :disabled="!isLocal" />
-    </prop-editing-row>
-    <prop-editing-row name="Homepage">
-      <el-input v-if="isLocal" v-model="homepage" />
-      <el-input v-else :value="homepage" />
-    </prop-editing-row>
-    <prop-editing-row name="Description">
-      <el-input v-if="isLocal" :rows="2" v-model="description" type="textarea" />
-      <el-input v-else :rows="2" :value="description" type="textarea" />
-    </prop-editing-row>
-    <prop-editing-row name="License">
-      <el-input v-if="isLocal" v-model="license" />
-      <el-input v-else :value="license" />
-    </prop-editing-row>
-    <prop-editing-row name="Fallback source">
-      <el-input v-if="isLocal" v-model="fallbackSrc" />
-      <el-input v-else :value="fallbackSrc" />
-    </prop-editing-row>
-
-    <prop-editing-row v-if="fallbackSrc && fallbackSrc.trim() !== ''" name="Fallback source SHA">
-      {{ pack.pack["fallback-src-sha256"] }}
-    </prop-editing-row>
-
-    <el-button v-if="isLocal" type="success" @click="savePackMetadata">Save pack metadata</el-button>
-
-    <el-collapse v-model="shownPackEmoji" class="contents-collapse">
-      <el-collapse-item :name="name" title="Show pack contents">
-        <new-emoji-uploader v-if="isLocal" :pack-name="name" class="new-emoji-uploader" />
-
-        <h4>Manage existing emoji</h4>
-
-        <single-emoji-editor
-          v-for="(file, ename) in pack.files"
-          :key="ename"
-          :host="host"
-          :pack-name="name"
-          :name="ename"
-          :file="file"
-          :is-local="isLocal" />
-      </el-collapse-item>
-    </el-collapse>
-
-    <div v-if="!isLocal" class="shared-pack-dl-box">
-      <div>
-        This will download the "{{ name }}" pack to the current instance under the name
-        "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" (can be changed below).
-        It will then be usable and shareable from the current instance.
-      </div>
-
-      <el-button type="primary" @click="downloadFromInstance">
-        Download shared pack to current instance
-      </el-button>
-
-      <el-input v-model="downloadSharedAs" class="dl-as-input" placeholder="Download as (optional)" />
-    </div>
-
-    <el-link
-      v-if="pack.pack['can-download']"
-      :href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`"
-      type="primary"
-      target="_blank">
-      Download pack archive
-    </el-link>
-
-    <div v-if="isLocal" class="pack-actions">
-      <el-button type="danger" @click="deletePack">
-        Delete the local pack
-      </el-button>
-    </div>
-  </div>
+  <el-collapse-item :title="name" :name="name">
+    <el-form label-width="120px" size="small">
+      <el-form-item :label="$t('settings.sharePack')">
+        <el-switch v-model="share" :disabled="!isLocal" />
+      </el-form-item>
+      <el-form-item :label="$t('settings.homepage')">
+        <el-input v-if="isLocal" v-model="homepage" />
+        <el-input v-else :value="homepage" />
+      </el-form-item>
+      <el-form-item :label="$t('settings.description')">
+        <el-input v-if="isLocal" v-model="description" type="textarea" />
+        <el-input v-else :value="description" type="textarea" />
+      </el-form-item>
+      <el-form-item :label="$t('settings.license')">
+        <el-input v-if="isLocal" v-model="license" />
+        <el-input v-else :value="license" />
+      </el-form-item>
+      <el-form-item :label="$t('settings.fallbackSrc')">
+        <el-input v-if="isLocal" v-model="fallbackSrc" />
+        <el-input v-else :value="fallbackSrc" />
+      </el-form-item>
+      <el-form-item
+        v-if="fallbackSrc && fallbackSrc.trim() !== ''"
+        :label="$t('settings.fallbackSrcSha')">
+        {{ pack.pack["fallback-src-sha256"] }}
+      </el-form-item>
+      <el-form-item class="save-pack-button">
+        <el-button v-if="isLocal" type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </el-collapse-item>
 </template>
 
 <style>
-  .shared-pack-dl-box {
-    margin: 1em;
-  }
-
-  .dl-as-input {
-    margin: 1em;
-    max-width: 30%;
-  }
-
-  .contents-collapse {
-    margin: 1em;
-  }
-
-  .pack-actions {
-    margin-top: 1em;
-  }
-
-  .new-emoji-uploader {
-    margin-bottom: 3em;
-  }
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+.el-collapse-item__header {
+  height: 36px;
+}
+.emoji-pack-card {
+  margin-top: 5px;
+}
 </style>
 
 <script>
-import PropEditingRow from './PropertyEditingRow.vue'
 import SingleEmojiEditor from './SingleEmojiEditor.vue'
 import NewEmojiUploader from './NewEmojiUploader.vue'
 
 export default {
 
-  components: { PropEditingRow, SingleEmojiEditor, NewEmojiUploader },
+  components: { SingleEmojiEditor, NewEmojiUploader },
   props: {
     name: {
       type: String,
diff --git a/src/views/emojiPacks/components/PropertyEditingRow.vue b/src/views/emojiPacks/components/PropertyEditingRow.vue
deleted file mode 100644
index 8696e06a..00000000
--- a/src/views/emojiPacks/components/PropertyEditingRow.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <el-row :gutter="20" class="prop-row">
-    <el-col :span="4">
-      <b>{{ name }}</b>
-    </el-col>
-    <el-col :span="10">
-      <slot/>
-    </el-col>
-  </el-row>
-</template>
-
-<style>
-  .prop-row {
-    margin-bottom: 1em;
-  }
-</style>
-
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index c798f8b5..41854e70 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -24,11 +24,10 @@
           </el-button>
         </div>
       </el-form-item>
-      <el-form-item v-if="localPacks.length > 0" :label="$t('settings.packs')">
-        <div v-for="(pack, name) in localPacks" :key="name">
+      <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('settings.packs')">
+        <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack">
           <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
-          <el-divider />
-        </div>
+        </el-collapse>
       </el-form-item>
       <div class="line"/>
       <el-form-item :label="$t('settings.remotePacks')">
@@ -44,11 +43,10 @@
           </el-button>
         </div>
       </el-form-item>
-      <el-form-item v-if="remotePacks.length > 0" :label="$t('settings.packs')">
-        <div v-for="(pack, name) in remotePacks" :key="name">
+      <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('settings.packs')">
+        <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack">
           <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
-          <el-divider />
-        </div>
+        </el-collapse>
       </el-form-item>
     </el-form>
   </div>
@@ -62,7 +60,9 @@ export default {
   data() {
     return {
       remoteInstanceAddress: '',
-      newPackName: ''
+      newPackName: '',
+      activeLocalPack: '',
+      activeRemotePack: ''
     }
   },
   computed: {