diff --git a/src/lang/en.js b/src/lang/en.js
index fa4d3209..272dc4b0 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -350,56 +350,8 @@ export default {
     followRelay: 'Follow new relay',
     instanceUrl: 'Instance URL',
     success: 'Settings changed successfully!',
-    emojiPacks: 'Emoji packs',
-    reloadEmoji: 'Reload emoji',
-    importPacks: 'Import packs from the server filesystem',
-    importEmojiTooltip: 'Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither',
-    localPacks: 'Local packs',
-    refreshLocalPacks: 'Refresh local packs',
-    createLocalPack: 'Create a new local pack',
-    packs: 'Packs',
-    remotePacks: 'Remote packs',
-    remoteInstanceAddress: 'Remote instance address',
-    refreshRemote: 'Refresh remote packs',
-    sharePack: 'Share pack',
-    homepage: 'Homepage',
     description: 'Description',
-    license: 'License',
-    fallbackSrc: 'Fallback source',
-    fallbackSrcSha: 'Fallback source SHA',
-    savePackMetadata: 'Save pack metadata',
-    addNewEmoji: 'Add new emoji to the pack',
-    shortcode: 'Shortcode',
-    uploadFile: 'Upload a file',
-    customFilename: 'Custom filename',
-    optional: 'optional',
-    customFilenameDesc: 'Custom file name (optional)',
-    url: 'URL',
-    required: 'required',
-    clickToUpload: 'Click to upload',
-    showPackContents: 'Show pack contents',
-    manageEmoji: 'Manage existing emoji',
-    file: 'File',
-    update: 'Update',
-    remove: 'Remove',
     removeFromDB: 'Remove setting from the DB',
-    selectLocalPack: 'Select the local pack to copy to',
-    localPack: 'Local pack',
-    specifyShortcode: 'Specify a custom shortcode',
-    specifyFilename: 'Specify a custom filename',
-    leaveEmptyShortcode: 'leave empty to use the same shortcode',
-    leaveEmptyFilename: 'leave empty to use the same filename',
-    copy: 'Copy',
-    copyToLocalPack: 'Copy to local pack',
-    thisWillDownload: 'This will download the',
-    downloadToCurrentInstance: 'pack to the current instance under the name',
-    canBeChanged: 'can be changed below',
-    willBeUsable: 'It will then be usable and shareable from the current instance',
-    downloadPack: 'Download pack',
-    deletePack: 'Delete pack',
-    downloadSharedPack: 'Download shared pack to current instance',
-    downloadAsOptional: 'Download as (optional)',
-    downloadPackArchive: 'Download pack archive',
     successfullyDownloaded: 'Successfully downloaded',
     successfullyImported: 'Successfully imported',
     nowNewPacksToImport: 'No new packs to import',
@@ -433,5 +385,58 @@ export default {
     emailSent: 'Invite was sent',
     submitFormError: 'There are invalid values in the form. Please fix them before continuing.',
     inviteViaEmailAlert: 'To send invite via email make sure to enable `invites_enabled` and disable `registrations_open`'
+  },
+  emoji: {
+    emojiPacks: 'Emoji packs',
+    reloaded: 'Emoji reloaded successfully!',
+    refreshed: 'Emoji refreshed successfully!',
+    importEmojiTooltip: 'Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither',
+    reloadEmoji: 'Reload emoji',
+    importPacks: 'Import packs from the server filesystem',
+    localPacks: 'Local packs',
+    refreshLocalPacks: 'Refresh local packs',
+    createLocalPack: 'Create a new local pack',
+    remotePacks: 'Remote packs',
+    remoteInstanceAddress: 'Remote instance address',
+    refreshRemote: 'Refresh remote packs',
+    sharePack: 'Share pack',
+    required: 'required',
+    homepage: 'Homepage',
+    description: 'Description',
+    packs: 'Packs',
+    license: 'License',
+    shortcode: 'Shortcode',
+    fallbackSrc: 'Fallback source',
+    fallbackSrcSha: 'Fallback source SHA',
+    savePackMetadata: 'Save pack metadata',
+    deletePack: 'Delete pack',
+    downloadPack: 'Download pack',
+    downloadPackArchive: 'Download pack archive',
+    addNewEmoji: 'Add new emoji to the pack',
+    manageEmoji: 'Manage existing emoji',
+    thisWillDownload: 'This will download the',
+    downloadToCurrentInstance: 'pack to the current instance under the name',
+    canBeChanged: 'can be changed below',
+    willBeUsable: 'It will then be usable and shareable from the current instance',
+    downloadAsOptional: 'Download as (optional)',
+    downloadSharedPack: 'Download shared pack to current instance',
+    optional: 'optional',
+    uploadFile: 'Upload a file',
+    url: 'URL',
+    clickToUpload: 'Click to upload',
+    upload: 'Upload',
+    customFilename: 'Custom filename',
+    customFilenameDesc: 'Custom file name (optional)',
+    file: 'File',
+    localPack: 'Local pack',
+    leaveEmptyShortcode: 'leave empty to use the same shortcode',
+    leaveEmptyFilename: 'leave empty to use the same filename',
+    update: 'Update',
+    remove: 'Remove',
+    selectLocalPack: 'Select the local pack to copy to',
+    specifyShortcode: 'Specify a custom shortcode',
+    specifyFilename: 'Specify a custom filename',
+    copy: 'Copy',
+    copyToLocalPack: 'Copy to local pack'
   }
 }
diff --git a/src/router/index.js b/src/router/index.js
index 8a7f9e36..e8510bb8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,20 @@ const invites = {
   ]
 }
 
+const emojiPacksDisabled = disabledFeatures.includes('emoji-packs')
+const emojiPacks = {
+  path: '/emoji_packs',
+  component: Layout,
+  children: [
+    {
+      path: 'index',
+      component: () => import('@/views/emojiPacks/index'),
+      name: 'Emoji Packs',
+      meta: { title: 'Emoji Packs', icon: 'eye-open', noCache: true }
+    }
+  ]
+}
+
 const moderationLogDisabled = disabledFeatures.includes('moderation-log')
 const moderationLog = {
   path: '/moderation_log',
@@ -143,6 +157,7 @@ export const asyncRouterMap = [
   ...(statusesDisabled ? [] : [statuses]),
   ...(reportsDisabled ? [] : [reports]),
   ...(invitesDisabled ? [] : [invites]),
+  ...(emojiPacksDisabled ? [] : [emojiPacks]),
   ...(moderationLogDisabled ? [] : [moderationLog]),
   ...(settingsDisabled ? [] : [settings]),
   {
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 81e2da99..3a8bf97a 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,29 +1,29 @@
 <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-item :label="$t('settings.sharePack')">
+      <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" />
       </el-form-item>
-      <el-form-item :label="$t('settings.homepage')">
+      <el-form-item :label=" $t('emoji.homepage')">
         <el-input v-model="homepage" />
       </el-form-item>
-      <el-form-item :label="$t('settings.description')">
+      <el-form-item :label=" $t('emoji.description')">
         <el-input v-model="description" type="textarea" />
       </el-form-item>
-      <el-form-item :label="$t('settings.license')">
+      <el-form-item :label=" $t('emoji.license')">
         <el-input v-model="license" />
       </el-form-item>
-      <el-form-item :label="$t('settings.fallbackSrc')">
+      <el-form-item :label=" $t('emoji.fallbackSrc')">
         <el-input v-model="fallbackSrc" />
       </el-form-item>
       <el-form-item
         v-if="fallbackSrc && fallbackSrc.trim() !== ''"
-        :label="$t('settings.fallbackSrcSha')">
+        :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('settings.savePackMetadata') }}</el-button>
-        <el-button @click="deletePack">{{ $t('settings.deletePack') }}</el-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-link
@@ -32,29 +32,29 @@
           :underline="false"
           type="primary"
           target="_blank">
-          <el-button class="download-archive">{{ $t('settings.downloadPackArchive') }}</el-button>
+          <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">
-      <el-form-item :label="$t('settings.sharePack')">
+      <el-form-item :label=" $t('emoji.sharePack')">
         <el-switch v-model="share" disabled />
       </el-form-item>
-      <el-form-item v-if="homepage" :label="$t('settings.homepage')">
+      <el-form-item v-if="homepage" :label=" $t('emoji.homepage')">
         <span>{{ homepage }}</span>
       </el-form-item>
-      <el-form-item v-if="description" :label="$t('settings.description')">
+      <el-form-item v-if="description" :label=" $t('emoji.description')">
         <span>{{ description }}</span>
       </el-form-item>
-      <el-form-item v-if="license" :label="$t('settings.license')">
+      <el-form-item v-if="license" :label=" $t('emoji.license')">
         <span>{{ license }}</span>
       </el-form-item>
-      <el-form-item v-if="fallbackSrc" :label="$t('settings.fallbackSrc')">
+      <el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')">
         <span>{{ fallbackSrc }}</span>
       </el-form-item>
       <el-form-item
         v-if="fallbackSrc && fallbackSrc.trim() !== ''"
-        :label="$t('settings.fallbackSrcSha')">
+        :label=" $t('emoji.fallbackSrcSha')">
         {{ pack.pack["fallback-src-sha256"] }}
       </el-form-item>
       <el-form-item>
@@ -64,15 +64,15 @@
           :underline="false"
           type="primary"
           target="_blank">
-          <el-button class="download-archive">{{ $t('settings.downloadPackArchive') }}</el-button>
+          <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
         </el-link>
       </el-form-item>
     </el-form>
     <el-collapse v-model="showPackContent" class="contents-collapse">
-      <el-collapse-item v-if="isLocal" :title="$t('settings.addNewEmoji')" name="addEmoji" class="no-background">
+      <el-collapse-item v-if="isLocal" :title=" $t('emoji.addNewEmoji')" name="addEmoji" class="no-background">
         <new-emoji-uploader :pack-name="name"/>
       </el-collapse-item>
-      <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title="$t('settings.manageEmoji')" name="manageEmoji" class="no-background">
+      <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
         <single-emoji-editor
           v-for="(file, ename) in pack.files"
           :key="ename"
@@ -82,16 +82,16 @@
           :file="file"
           :is-local="isLocal" />
       </el-collapse-item>
-      <el-collapse-item v-if="!isLocal" :title="$t('settings.downloadPack')" name="downloadPack" class="no-background">
+      <el-collapse-item v-if="!isLocal" :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
         <p>
-          {{ $t('settings.thisWillDownload') }} "{{ name }}" {{ $t('settings.downloadToCurrentInstance') }}
-          "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('settings.canBeChanged') }}).
-          {{ $t('settings.willBeUsable') }}.
+          {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
+          "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
+          {{ $t('emoji.willBeUsable') }}.
         </p>
         <div class="download-shared-pack">
-          <el-input v-model="downloadSharedAs" :placeholder="$t('settings.downloadAsOptional')"/>
+          <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
           <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance">
-            {{ $t('settings.downloadSharedPack') }}
+            {{ $t('emoji.downloadSharedPack') }}
           </el-button>
         </div>
       </el-collapse-item>
diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
index 0715cde8..11e6785e 100644
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/src/views/emojiPacks/components/NewEmojiUploader.vue
@@ -1,15 +1,15 @@
 <template>
   <el-form label-width="130px" label-position="left" size="small">
-    <el-form-item :label="$t('settings.shortcode')">
-      <el-input v-model="shortcode" :placeholder="$t('settings.required')"/>
+    <el-form-item :label="$t('emoji.shortcode')">
+      <el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
     </el-form-item>
-    <el-form-item :label="$t('settings.customFilename')">
-      <el-input v-model="customFileName" :placeholder="$t('settings.optional')"/>
+    <el-form-item :label="$t('emoji.customFilename')">
+      <el-input v-model="customFileName" :placeholder="$t('emoji.optional')"/>
     </el-form-item>
-    <el-form-item :label="$t('settings.uploadFile')">
+    <el-form-item :label="$t('emoji.uploadFile')">
       <div class="upload-file-url">
-        <el-input v-model="imageUploadURL" :placeholder="$t('settings.url')"/>
-        <el-button :disabled="shortcodePresent" type="primary" class="upload-button" @click="uploadEmoji">{{ $t('settings.upload') }}</el-button>
+        <el-input v-model="imageUploadURL" :placeholder="$t('emoji.url')"/>
+        <el-button :disabled="shortcodePresent" type="primary" class="upload-button" @click="uploadEmoji">{{ $t('emoji.upload') }}</el-button>
       </div>
       <div class="upload-container">
         <p class="text">or</p>
@@ -18,7 +18,7 @@
           :multiple="false"
           :show-file-list="false"
           action="add">
-          <el-button :disabled="shortcodePresent" type="primary">{{ $t('settings.clickToUpload') }}</el-button>
+          <el-button :disabled="shortcodePresent" type="primary">{{ $t('emoji.clickToUpload') }}</el-button>
         </el-upload>
       </div>
     </el-form-item>
diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 39df6bf8..3c28e8c0 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -4,11 +4,11 @@
       <img
         :src="addressOfEmojiInPack(host, packName, file)"
         class="emoji-preview-img">
-      <el-input v-model="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
-      <el-input v-model="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
+      <el-input v-model="emojiName" :placeholder="$t('emoji.shortcode')" class="emoji-info"/>
+      <el-input v-model="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
       <div class="emoji-buttons">
-        <el-button type="primary" class="emoji-button" @click="update">{{ $t('settings.update') }}</el-button>
-        <el-button class="emoji-button" @click="remove">{{ $t('settings.remove') }}</el-button>
+        <el-button type="primary" @click="update">{{ $t('emoji.update') }}</el-button>
+        <el-button @click="remove">{{ $t('emoji.remove') }}</el-button>
       </div>
     </div>
 
@@ -16,27 +16,27 @@
       <img
         :src="addressOfEmojiInPack(host, packName, file)"
         class="emoji-preview-img">
-      <el-input :value="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
-      <el-input :value="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
+      <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">
-        <p>{{ $t('settings.selectLocalPack') }}</p>
-        <el-select v-model="copyToLocalPackName" :placeholder="$t('settings.localPack')">
+        <p>{{ $t('emoji.selectLocalPack') }}</p>
+        <el-select v-model="copyToLocalPackName" :placeholder="$t('emoji.localPack')">
           <el-option
             v-for="(_pack, name) in localPacks"
             :key="name"
             :label="name"
             :value="name" />
         </el-select>
-        <p>{{ $t('settings.specifyShortcode') }}</p>
-        <el-input v-model="copyToShortcode" :placeholder="$t('settings.leaveEmptyShortcode')"/>
-        <p>{{ $t('settings.specifyFilename') }}</p>
-        <el-input v-model="copyToFilename" :placeholder="$t('settings.leaveEmptyFilename')"/>
+        <p>{{ $t('emoji.specifyShortcode') }}</p>
+        <el-input v-model="copyToShortcode" :placeholder="$t('emoji.leaveEmptyShortcode')"/>
+        <p>{{ $t('emoji.specifyFilename') }}</p>
+        <el-input v-model="copyToFilename" :placeholder="$t('emoji.leaveEmptyFilename')"/>
         <el-button
           :disabled="!copyToLocalPackName"
           type="primary"
           class="copy-to-local-button"
-          @click="copyToLocal">{{ $t('settings.copy') }}</el-button>
-        <el-button slot="reference" type="primary" class="emoji-button">{{ $t('settings.copyToLocalPack') }}</el-button>
+          @click="copyToLocal">{{ $t('emoji.copy') }}</el-button>
+        <el-button slot="reference" type="primary" class="emoji-button">{{ $t('emoji.copyToLocalPack') }}</el-button>
       </el-popover>
     </div>
   </div>
@@ -155,23 +155,22 @@ export default {
 .copy-popover {
   width: 330px
 }
-.emoji-button {
-  margin-left: 10px
-}
 .emoji-buttons {
-  min-width: 210px
+  place-self: center;
+  min-width: 200px
 }
 .emoji-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 75px auto auto 195px;
+  grid-column-gap: 15px;
   margin-bottom: 10px;
 }
 .emoji-preview-img {
-  max-width: 5em;
+  max-width: 100%;
+  place-self: center;
 }
 .emoji-info {
-  margin-left: 10px
+  place-self: center;
 }
 .copy-to-local-button {
   margin-top: 12px;
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 4be41add..40c40d3e 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -1,19 +1,20 @@
 <template>
-  <div>
+  <div class="emoji-packs">
+    <h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
     <div class="button-container">
-      <el-button type="primary" @click="reloadEmoji">{{ $t('settings.reloadEmoji') }}</el-button>
-      <el-tooltip :content="$t('settings.importEmojiTooltip')" effects="dark" placement="bottom">
+      <el-button type="primary" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
+      <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom">
         <el-button type="primary" @click="importFromFS">
-          {{ $t('settings.importPacks') }}
+          {{ $t('emoji.importPacks') }}
         </el-button>
       </el-tooltip>
     </div>
     <div class="line"/>
-    <el-form :label-width="labelWidth">
-      <el-form-item :label="$t('settings.localPacks')">
-        <el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button>
+    <el-form label-width="180px" class="emoji-packs-form">
+      <el-form-item :label="$t('emoji.localPacks')">
+        <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
       </el-form-item>
-      <el-form-item :label="$t('settings.createLocalPack')">
+      <el-form-item :label="$t('emoji.createLocalPack')">
         <div class="create-pack">
           <el-input v-model="newPackName" :placeholder="$t('users.name')" />
           <el-button
@@ -24,26 +25,26 @@
           </el-button>
         </div>
       </el-form-item>
-      <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('settings.packs')">
+      <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.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-collapse>
       </el-form-item>
       <div class="line"/>
-      <el-form-item :label="$t('settings.remotePacks')">
+      <el-form-item :label="$t('emoji.remotePacks')">
         <div class="create-pack">
           <el-input
             v-model="remoteInstanceAddress"
-            :placeholder="$t('settings.remoteInstanceAddress')" />
+            :placeholder="$t('emoji.remoteInstanceAddress')" />
           <el-button
             :disabled="remoteInstanceAddress.trim() === ''"
             class="create-pack-button"
             @click="refreshRemotePacks">
-            {{ $t('settings.refreshRemote') }}
+            {{ $t('emoji.refreshRemote') }}
           </el-button>
         </div>
       </el-form-item>
-      <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('settings.packs')">
+      <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.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="false" />
         </el-collapse>
@@ -54,6 +55,7 @@
 
 <script>
 import EmojiPack from './components/EmojiPack'
+import i18n from '@/lang'
 
 export default {
   components: { EmojiPack },
@@ -93,13 +95,29 @@ export default {
         })
     },
     refreshLocalPacks() {
-      this.$store.dispatch('SetLocalEmojiPacks')
+      try {
+        this.$store.dispatch('SetLocalEmojiPacks')
+      } catch (e) {
+        return
+      }
+      this.$message({
+        type: 'success',
+        message: i18n.t('emoji.refreshed')
+      })
     },
     refreshRemotePacks() {
       this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
     },
-    reloadEmoji() {
-      this.$store.dispatch('ReloadEmoji')
+    async reloadEmoji() {
+      try {
+        this.$store.dispatch('ReloadEmoji')
+      } catch (e) {
+        return
+      }
+      this.$message({
+        type: 'success',
+        message: i18n.t('emoji.reloaded')
+      })
     },
     importFromFS() {
       this.$store.dispatch('ImportFromFS')
@@ -114,7 +132,7 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss'>
 .button-container {
-  margin: 0 0 22px 20px;
+  margin: 0 0 22px 15px;
 }
 .create-pack {
   display: flex;
@@ -123,10 +141,23 @@ export default {
 .create-pack-button {
   margin-left: 10px;
 }
+.emoji-packs-form {
+  margin: 0 30px;
+}
+.emoji-packs-header {
+  margin: 22px 0 20px 15px;
+}
 .line {
     width: 100%;
     height: 0;
     border: 1px solid #eee;
     margin-bottom: 22px;
   }
+
+@media only screen and (min-width: 1824px) {
+  .emoji-packs {
+    max-width: 1824px;
+    margin: auto;
+  }
+}
 </style>
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 9ad815cb..5edb0a19 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -2,64 +2,64 @@
   <div class="settings-container">
     <h1>{{ $t('settings.settings') }}</h1>
     <el-tabs v-model="activeTab" :tab-position="tabPosition">
-      <el-tab-pane :label="$t('settings.activityPub')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" lazy>
         <activity-pub/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.auth')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" lazy>
         <authentication/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.autoLinker')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" lazy>
         <auto-linker/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.esshd')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" lazy>
         <esshd/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.captcha')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" lazy>
         <captcha/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.frontend')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" lazy>
         <frontend/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.gopher')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" lazy>
         <gopher/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.http')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" lazy>
         <http/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.instance')" :disabled="confidDisabled" name="instance">
+      <el-tab-pane :label="$t('settings.instance')" :disabled="configDisabled" name="instance">
         <instance/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.jobQueue')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" lazy>
         <job-queue/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.logger')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" lazy>
         <logger/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mailer')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" lazy>
         <mailer/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" lazy>
         <media-proxy/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.metadata')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" lazy>
         <metadata/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.mrf')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" lazy>
         <mrf/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" lazy>
         <rate-limiters/>
       </el-tab-pane>
       <el-tab-pane :label="$t('settings.relays')" lazy name="relays">
         <relays/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.webPush')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" lazy>
         <web-push/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.upload')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" lazy>
         <upload/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.other')" :disabled="confidDisabled" lazy>
+      <el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" lazy>
         <other/>
       </el-tab-pane>
     </el-tabs>
@@ -67,7 +67,28 @@
 </template>
 
 <script>
-import { ActivityPub, Authentication, AutoLinker, Captcha, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Relays, Upload, WebPush } from './components'
+import {
+  ActivityPub,
+  Authentication,
+  AutoLinker,
+  Captcha,
+  Esshd,
+  Frontend,
+  Gopher,
+  Http,
+  Instance,
+  JobQueue,
+  Logger,
+  Mailer,
+  MediaProxy,
+  Metadata,
+  Mrf,
+  Other,
+  RateLimiters,
+  Relays,
+  Upload,
+  WebPush
+} from './components'
 
 export default {
   components: {
@@ -101,7 +122,7 @@ export default {
         this.$store.dispatch('SetActiveTab', tab)
       }
     },
-    confidDisabled() {
+    configDisabled() {
       return this.$store.state.settings.configDisabled
     },
     isMobile() {
@@ -126,4 +147,10 @@ export default {
       margin: 22px 0 0 15px;
     }
   }
+  @media only screen and (min-width: 1824px) {
+    .settings-container {
+      max-width: 1824px;
+      margin: auto;
+    }
+  }
 </style>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index d0594549..023bfcca 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -191,6 +191,15 @@
     margin-right: 10px
   }
 
+  @media only screen and (min-width: 1824px) {
+    .submit-button-container {
+      max-width: 1637px;
+      margin-left: auto;
+      margin-right: auto;
+      right: auto;
+    }
+  }
+
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
     .el-form-item {
@@ -212,8 +221,8 @@
       overflow: hidden;
     }
     .name-input {
-    width: 40%;
-    margin-right: 5px
+      width: 40%;
+      margin-right: 5px
     }
     p.expl {
       line-height: 20px;