diff --git a/src/lang/en.js b/src/lang/en.js
index 3f9643ca..d0728e07 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -416,7 +416,7 @@ export default {
     shortcode: 'Shortcode',
     fallbackSrc: 'Fallback source',
     fallbackSrcSha: 'Fallback source SHA',
-    savePackMetadata: 'Save pack metadata',
+    saveMetadata: 'Save metadata',
     deletePack: 'Delete pack',
     downloadPack: 'Download pack',
     downloadPackArchive: 'Download pack archive',
@@ -428,6 +428,7 @@ export default {
     willBeUsable: 'It will then be usable and shareable from the current instance',
     downloadAsOptional: 'Download as (optional)',
     downloadSharedPack: 'Download shared pack to current instance',
+    downloadSharedPackMobile: 'Download pack to instance',
     optional: 'optional',
     uploadFile: 'Upload a file',
     url: 'URL',
diff --git a/src/store/modules/emojiPacks.js b/src/store/modules/emojiPacks.js
index c118b71f..282a069e 100644
--- a/src/store/modules/emojiPacks.js
+++ b/src/store/modules/emojiPacks.js
@@ -16,24 +16,25 @@ import Vue from 'vue'
 const packs = {
   state: {
     localPacks: {},
+    remoteInstance: '',
     remotePacks: {}
   },
   mutations: {
     SET_LOCAL_PACKS: (state, packs) => {
       state.localPacks = packs
     },
+    SET_REMOTE_INSTANCE: (state, name) => {
+      state.remoteInstance = name
+    },
     SET_REMOTE_PACKS: (state, packs) => {
       state.remotePacks = packs
     },
-
     UPDATE_LOCAL_PACK_VAL: (state, { name, key, value }) => {
       Vue.set(state.localPacks[name]['pack'], key, value)
     },
-
     UPDATE_LOCAL_PACK_PACK: (state, { name, pack }) => {
       state.localPacks[name]['pack'] = pack
     },
-
     UPDATE_LOCAL_PACK_FILES: (state, { name, files }) => {
       // Use vue.set in case "files" was null
       Vue.set(
@@ -105,6 +106,7 @@ const packs = {
     async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
       const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
 
+      commit('SET_REMOTE_INSTANCE', remoteInstance)
       commit('SET_REMOTE_PACKS', data)
     },
     async UpdateAndSavePackFile({ commit, getters }, args) {
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 3a8bf97a..e20dc216 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-collapse-item :title="name" :name="name" class="has-background">
-    <el-form v-if="isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
+    <el-form v-if="isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" />
       </el-form-item>
@@ -21,11 +21,13 @@
         :label=" $t('emoji.fallbackSrcSha')">
         {{ pack.pack["fallback-src-sha256"] }}
       </el-form-item>
-      <el-form-item class="save-pack-button">
-        <el-button type="primary" @click="savePackMetadata">{{ $t('emoji.savePackMetadata') }}</el-button>
-        <el-button @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
-      </el-form-item>
-      <el-form-item>
+    </el-form>
+    <div v-if="isLocal" class="pack-button-container">
+      <div class="save-pack-button-container">
+        <el-button type="primary" class="save-pack-button" @click="savePackMetadata">{{ $t('emoji.saveMetadata') }}</el-button>
+        <el-button class="delete-pack-button" @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
+      </div>
+      <div class="download-pack-button-container">
         <el-link
           v-if="pack.pack['can-download']"
           :href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`"
@@ -34,9 +36,9 @@
           target="_blank">
           <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
         </el-link>
-      </el-form-item>
-    </el-form>
-    <el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
+      </div>
+    </div>
+    <el-form v-if="!isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
       <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" disabled />
       </el-form-item>
@@ -91,7 +93,7 @@
         <div class="download-shared-pack">
           <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
           <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance">
-            {{ $t('emoji.downloadSharedPack') }}
+            {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
           </el-button>
         </div>
       </el-collapse-item>
@@ -104,7 +106,6 @@ import SingleEmojiEditor from './SingleEmojiEditor.vue'
 import NewEmojiUploader from './NewEmojiUploader.vue'
 
 export default {
-
   components: { SingleEmojiEditor, NewEmojiUploader },
   props: {
     name: {
@@ -132,6 +133,24 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
+    labelWidth() {
+      if (this.isMobile) {
+        return '90px'
+      } else if (this.isTablet) {
+        return '120px'
+      } else {
+        return '120px'
+      }
+    },
     share: {
       get() { return this.pack.pack['share-files'] },
       set(value) {
@@ -221,6 +240,18 @@ export default {
 .download-archive {
   width: 250px
 }
+.download-pack-button-container {
+  width: 265px;
+  .el-link {
+    width: inherit;
+    span {
+      width: inherit;
+      .download-archive {
+        width: inherit;
+      }
+    }
+  }
+}
 .download-shared-pack {
   display: flex;
   margin-bottom: 10px;
@@ -251,7 +282,54 @@ export default {
 .no-background .el-collapse-item__header {
   background: white;
 }
-.save-pack-button {
-  margin-bottom: 5px
+.pack-button-container {
+  margin: 0 0 18px 120px;
+}
+.save-pack-button-container {
+  margin-bottom: 8px;
+  width: 265px;
+  display: flex;
+  justify-content: space-between;
+}
+@media only screen and (max-width:480px) {
+  .delete-pack-button {
+    width: 45%;
+  }
+  .download-pack-button-container {
+    width: 100%;
+  }
+  .download-shared-pack {
+    flex-direction: column;
+  }
+  .download-shared-pack-button {
+    margin-left: 0;
+    margin-top: 10px;
+    padding: 10px;
+  }
+  .pack-button-container {
+    width: 100%;
+    margin: 0 0 22px 0;
+  }
+  .remote-pack-metadata {
+    .el-form-item__content {
+      line-height: 24px;
+      margin-top: 4px;
+    }
+  }
+  .save-pack-button {
+    width: 54%;
+  }
+  .save-pack-button-container {
+    margin-bottom: 8px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    button {
+      padding: 10px 5px;
+    }
+    .el-button+.el-button {
+      margin-left: 3px;
+    }
+  }
 }
 </style>
diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
index 11e6785e..8bb431a2 100644
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/src/views/emojiPacks/components/NewEmojiUploader.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form label-width="130px" label-position="left" size="small">
+  <el-form :label-position="isMobile ? 'top' : 'left'" label-width="130px" size="small" class="new-emoji-uploader-form">
     <el-form-item :label="$t('emoji.shortcode')">
       <el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
     </el-form-item>
@@ -25,30 +25,6 @@
   </el-form>
 </template>
 
-<style>
-.add-new-emoji {
-  height: 36px;
-  font-size: 14px;
-  font-weight: 700;
-  color: #606266;
-}
-.text {
-  line-height: 20px;
-  margin-right: 15px
-}
-.upload-container {
-  display: flex;
-  align-items: baseline;
-}
-.upload-button {
-  margin-left: 10px;
-}
-.upload-file-url {
-  display: flex;
-  justify-content: space-between
-}
-</style>
-
 <script>
 export default {
   props: {
@@ -65,6 +41,9 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     shortcodePresent() {
       return this.shortcode.trim() === ''
     }
@@ -88,3 +67,34 @@ export default {
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss'>
+.add-new-emoji {
+  height: 36px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #606266;
+}
+.text {
+  line-height: 20px;
+  margin-right: 15px;
+}
+.upload-container {
+  display: flex;
+  align-items: baseline;
+}
+.upload-button {
+  margin-left: 10px;
+}
+.upload-file-url {
+  display: flex;
+  justify-content: space-between;
+}
+@media only screen and (max-width:480px) {
+  .new-emoji-uploader-form {
+    label.el-form-item__label {
+      padding: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 3c28e8c0..d66bd48d 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="isLocal" class="emoji-container">
+    <div v-if="isLocal" :class="isMobile ? 'emoji-container-flex' : 'emoji-container-grid'">
       <img
         :src="addressOfEmojiInPack(host, packName, file)"
         class="emoji-preview-img">
@@ -8,19 +8,19 @@
       <el-input v-model="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
       <div class="emoji-buttons">
         <el-button type="primary" @click="update">{{ $t('emoji.update') }}</el-button>
-        <el-button @click="remove">{{ $t('emoji.remove') }}</el-button>
+        <el-button class="remove-emoji-button" @click="remove">{{ $t('emoji.remove') }}</el-button>
       </div>
     </div>
 
-    <div v-if="!isLocal" class="emoji-container">
+    <div v-if="!isLocal" :class="isMobile ? 'emoji-container-flex' : 'remote-emoji-container-grid'">
       <img
-        :src="addressOfEmojiInPack(host, packName, file)"
+        :src="addressOfEmojiInPack(remoteInstance, packName, file)"
         class="emoji-preview-img">
       <el-input :value="emojiName" :placeholder="$t('emoji.shortcode')" class="emoji-info"/>
       <el-input :value="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
-      <el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover">
+      <el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover" class="copy-pack-container">
         <p>{{ $t('emoji.selectLocalPack') }}</p>
-        <el-select v-model="copyToLocalPackName" :placeholder="$t('emoji.localPack')">
+        <el-select v-model="copyToLocalPackName" :placeholder="$t('emoji.localPack')" class="copy-pack-select">
           <el-option
             v-for="(_pack, name) in localPacks"
             :key="name"
@@ -34,7 +34,6 @@
         <el-button
           :disabled="!copyToLocalPackName"
           type="primary"
-          class="copy-to-local-button"
           @click="copyToLocal">{{ $t('emoji.copy') }}</el-button>
         <el-button slot="reference" type="primary" class="emoji-button">{{ $t('emoji.copyToLocalPack') }}</el-button>
       </el-popover>
@@ -93,8 +92,14 @@ export default {
       },
       set(val) { this.newFile = val }
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     localPacks() {
       return this.$store.state.emojiPacks.localPacks
+    },
+    remoteInstance() {
+      return this.$store.state.emojiPacks.remoteInstance
     }
   },
   methods: {
@@ -151,7 +156,7 @@ export default {
 }
 </script>
 
-<style>
+<style rel='stylesheet/scss' lang='scss'>
 .copy-popover {
   width: 330px
 }
@@ -159,9 +164,9 @@ export default {
   place-self: center;
   min-width: 200px
 }
-.emoji-container {
+.emoji-container-grid {
   display: grid;
-  grid-template-columns: 75px auto auto 195px;
+  grid-template-columns: 75px auto auto 200px;
   grid-column-gap: 15px;
   margin-bottom: 10px;
 }
@@ -172,8 +177,56 @@ export default {
 .emoji-info {
   place-self: center;
 }
-.copy-to-local-button {
-  margin-top: 12px;
-  float: right;
+.copy-pack-container {
+  place-self: center stretch;
+}
+.copy-pack-select {
+  width: 100%;
+}
+.remote-emoji-container-grid {
+  display: grid;
+  grid-template-columns: 75px auto auto 160px;
+  grid-column-gap: 15px;
+  margin-bottom: 10px;
+}
+@media only screen and (max-width:480px) {
+  .emoji-container-flex {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #dcdfe6;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    border-radius: 4px;
+    padding: 15px;
+    margin: 0 15px 15px 0;
+  }
+  .emoji-preview-img {
+    margin-bottom: 10px;
+  }
+  .emoji-info {
+    margin-bottom: 10px;
+  }
+  .emoji-buttons {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    button {
+      padding: 10px 5px;
+      width: 47%;
+    }
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .emoji-container-grid {
+    grid-column-gap: 10px;
+  }
+  .emoji-buttons {
+    .el-button+.el-button {
+      margin-left: 5px;
+    }
+  }
+  .remote-emoji-container-grid {
+    grid-column-gap: 10px;
+  }
 }
 </style>
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 19e0702d..e13df39a 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="emoji-packs">
     <h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
-    <div class="button-container">
-      <el-button type="primary" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
-      <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom">
+    <div class="emoji-packs-header-button-container">
+      <el-button type="primary" class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
+      <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" class="import-pack-button">
         <el-button type="primary" @click="importFromFS">
           {{ $t('emoji.importPacks') }}
         </el-button>
@@ -76,9 +76,9 @@ export default {
     },
     labelWidth() {
       if (this.isMobile) {
-        return '120px'
+        return '105px'
       } else if (this.isTablet) {
-        return '200px'
+        return '180px'
       } else {
         return '240px'
       }
@@ -140,7 +140,8 @@ export default {
 </script>
 
 <style rel='stylesheet/scss' lang='scss'>
-.button-container {
+.emoji-packs-header-button-container {
+  display: flex;
   margin: 0 0 22px 15px;
 }
 .create-pack {
@@ -156,6 +157,9 @@ export default {
 .emoji-packs-header {
   margin: 22px 0 20px 15px;
 }
+.import-pack-button {
+  margin-left: 10px;
+}
 .line {
     width: 100%;
     height: 0;
@@ -169,4 +173,46 @@ export default {
     margin: auto;
   }
 }
+
+@media only screen and (max-width:480px) {
+  .create-pack {
+    height: 82px;
+    flex-direction: column;
+  }
+  .create-pack-button {
+    margin-left: 0;
+  }
+  .divider {
+    margin: 15px 0;
+  }
+  .el-message {
+    min-width: 80%;
+  }
+  .el-message-box {
+    width: 80%;
+  }
+  .emoji-packs-form {
+    margin: 0 7px;
+    label {
+      padding-right: 8px;
+    }
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+  }
+  .emoji-packs-header {
+    margin: 15px;
+  }
+  .emoji-packs-header-button-container {
+    height: 82px;
+    flex-direction: column;
+    .el-button+.el-button {
+      margin: 7px 0 0 0;
+      width: fit-content;
+    }
+  }
+  .reload-emoji-button {
+    width: fit-content;
+  }
+}
 </style>