diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 66fba74..6e71f74 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -5,7 +5,6 @@
   import { page } from '$app/stores';
   import Settings from './Settings/Settings.svelte';
   import UploadModal from './UploadModal.svelte';
-  import { settings } from '$lib/settings';
   import Icon from '$lib/assets/icon.webp';
 
   let settingsHidden = true;
@@ -40,16 +39,6 @@
       <UploadSolid class="hover:text-primary-700" on:click={() => (uploadModalOpen = true)} />
     </div>
   </Navbar>
-  {#if isReader}
-    <button
-      on:click={openSettings}
-      class="hover:text-primary-700 fixed opacity-50 hover:opacity-100 right-10 top-5 p-10 m-[-2.5rem]"
-    >
-      <div style:background-color={$settings.backgroundColor} class="absolute">
-        <UserSettingsSolid class="mix-blend-difference" />
-      </div>
-    </button>
-  {/if}
 </div>
 
 <Settings bind:hidden={settingsHidden} />
diff --git a/src/lib/components/Reader/Reader.svelte b/src/lib/components/Reader/Reader.svelte
index 1bd9bd9..6f5c5f8 100644
--- a/src/lib/components/Reader/Reader.svelte
+++ b/src/lib/components/Reader/Reader.svelte
@@ -14,6 +14,7 @@
   import { afterUpdate, onMount } from 'svelte';
   import Cropper from './Cropper.svelte';
   import { page as pageStore } from '$app/stores';
+  import SettingsButton from './SettingsButton.svelte';
 
   $: volume = $catalog
     ?.find((item) => item.id === $pageStore.params.manga)
@@ -182,6 +183,7 @@
 <svelte:head>
   <title>{volume?.mokuroData.volume || 'Volume'}</title>
 </svelte:head>
+<SettingsButton />
 {#if volume && pages}
   <Cropper />
   <Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
diff --git a/src/lib/components/Reader/SettingsButton.svelte b/src/lib/components/Reader/SettingsButton.svelte
new file mode 100644
index 0000000..d49878a
--- /dev/null
+++ b/src/lib/components/Reader/SettingsButton.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Settings from '$lib/components/Settings/Settings.svelte';
+  import { UserSettingsSolid } from 'flowbite-svelte-icons';
+
+  let settingsHidden = true;
+
+  function openSettings() {
+    settingsHidden = false;
+  }
+</script>
+
+<button
+  on:click={openSettings}
+  class="hover:text-primary-700 hover:mix-blend-normal mix-blend-difference z-10 fixed opacity-50 hover:opacity-100 right-10 top-5 p-10 m-[-2.5rem]"
+>
+  <UserSettingsSolid />
+</button>
+
+<Settings bind:hidden={settingsHidden} />