diff --git a/src/components/NavHeader.vue b/src/components/NavHeader.vue
index 8949b284..23ec2990 100755
--- a/src/components/NavHeader.vue
+++ b/src/components/NavHeader.vue
@@ -10,26 +10,16 @@
             {{ title }}
         </router-link>
 
-        <modal large title="Settings">
-            <button
-                :class="['small', { filled: darkModeEnabled, 'info filled': !darkModeEnabled }]"
-            >
-                <i class="fas fa-cog" />
-            </button>
-
-            <settings slot="content" />
-        </modal>
+        <settings />
     </nav>
 </template>
 
 <script>
 import Settings from '@/pages/Settings';
-import Modal from '@/components/Modal';
 import { mapState, mapGetters } from 'vuex';
 
 export default {
     components: {
-        Modal,
         Settings,
     },
 
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 47dc6e4a..c7510ad5 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -1,11 +1,19 @@
 <template lang="html">
-    <div class="settings" :class="{ dark: darkModeEnabled }">
-        <general-settings v-model="localSettings" :reloading="reloading" />
-        <platforms-settings v-model="localSettings" :reloading="reloading" />
-        <game-board-settings v-model="localSettings" :reloading="reloading" />
-        <tags-settings v-model="localSettings" :reloading="reloading" />
-        <account-settings v-model="localSettings" :reloading="reloading" />
-    </div>
+    <modal title="Settings">
+        <button
+            :class="['small', { filled: darkModeEnabled, 'info filled': !darkModeEnabled }]"
+        >
+            <i class="fas fa-cog" />
+        </button>
+
+        <div class="settings" slot="content" :class="{ dark: darkModeEnabled }">
+            <general-settings v-model="localSettings" :reloading="reloading" />
+            <platforms-settings v-model="localSettings" :reloading="reloading" />
+            <game-board-settings v-model="localSettings" :reloading="reloading" />
+            <tags-settings v-model="localSettings" :reloading="reloading" />
+            <account-settings v-model="localSettings" :reloading="reloading" />
+        </div>
+    </modal>
 </template>
 
 <script>