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/index.vue b/src/views/emojiPacks/index.vue
index 4be41add..6d0d8292 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <h1 class="emoji-packs-header">{{ $t('settings.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">
@@ -9,7 +10,7 @@
       </el-tooltip>
     </div>
     <div class="line"/>
-    <el-form :label-width="labelWidth">
+    <el-form label-width="230px" class="emoji-packs-form">
       <el-form-item :label="$t('settings.localPacks')">
         <el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button>
       </el-form-item>
@@ -114,7 +115,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,6 +124,12 @@ 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;
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index a2edc686..1e5c25e9 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -17,9 +17,6 @@
       <el-tab-pane :label="$t('settings.captcha')" lazy>
         <captcha/>
       </el-tab-pane>
-      <el-tab-pane :label="$t('settings.emojiPacks')" lazy>
-        <emoji-packs/>
-      </el-tab-pane>
       <el-tab-pane :label="$t('settings.frontend')" lazy>
         <frontend/>
       </el-tab-pane>
@@ -70,11 +67,52 @@
 </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 EmojiPacks from '../emojiPacks/index'
+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: { ActivityPub, Authentication, AutoLinker, Captcha, EmojiPacks, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Relays, Upload, WebPush },
+  components: {
+    ActivityPub,
+    Authentication,
+    AutoLinker,
+    Captcha,
+    Esshd,
+    Frontend,
+    Gopher,
+    Http,
+    Instance,
+    JobQueue,
+    Logger,
+    Mailer,
+    MediaProxy,
+    Metadata,
+    Mrf,
+    Other,
+    RateLimiters,
+    Relays,
+    Upload,
+    WebPush
+  },
   data() {
     return {
       activeTab: 'instance'