diff --git a/src/App.svelte b/src/App.svelte
index 72067f54..c37d28aa 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -9,7 +9,7 @@
   import "$utils/checkURLParameters";
 
   import { Router, Route } from "svelte-routing";
-  import { currentPageStore } from "$utils/stores";
+  import { __currentPage } from "$utils/stores";
   import { checkOldBookmarks } from "$utils/checkOldBookmarks";
 
   // views
@@ -37,7 +37,7 @@
 </script>
 
 <Router>
-  <div class="max-w-screen-lg mx-auto pt-16 pb-24 select-none {$currentPageStore === 'page' ? 'px-0 md:px-4' : 'px-4'}">
+  <div class="max-w-screen-lg mx-auto pt-16 pb-24 select-none {$__currentPage === 'page' ? 'px-0 md:px-4' : 'px-4'}">
     <!-- include the UI elements -->
     <Navbar />
     <Drawer />
diff --git a/src/components/morphology/MorphologyTable.svelte b/src/components/morphology/MorphologyTable.svelte
index a01cec74..c066a04a 100644
--- a/src/components/morphology/MorphologyTable.svelte
+++ b/src/components/morphology/MorphologyTable.svelte
@@ -2,7 +2,7 @@
   export let wordData, tableType;
 
   import { Link } from "svelte-routing";
-  import { wordTypeStore } from "$utils/stores";
+  import { __wordType } from "$utils/stores";
   import { buttonElement } from "$utils/commonStyles";
 
   const tableTitles = {
@@ -43,7 +43,7 @@
             {#each Array.from(Array(lastWordToLoad + 1).keys()).slice(1) as word}
               <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                 <td class="px-6 py-4"> {word} </td>
-                <td class="px-6 py-4 arabic-font-{$wordTypeStore} text-xl md:text-2xl"> {wordData[word - 1].arabic} </td>
+                <td class="px-6 py-4 arabic-font-{$__wordType} text-xl md:text-2xl"> {wordData[word - 1].arabic} </td>
                 <td class="px-6 py-4"> {wordData[word - 1].translation} </td>
                 <td class="px-6 py-4"> {wordData[word - 1].transliteration} </td>
                 <td class="px-6 py-4"> <Link to="/{wordData[word - 1].key.split(':')[0]}/{wordData[word - 1].key.split(':')[1]}">{wordData[word - 1].key.split(":")[0]}:{wordData[word - 1].key.split(":")[1]}</Link> </td>
diff --git a/src/components/ui/BottomNavbar.svelte b/src/components/ui/BottomNavbar.svelte
index 898e684e..17bf812f 100644
--- a/src/components/ui/BottomNavbar.svelte
+++ b/src/components/ui/BottomNavbar.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Link } from "svelte-routing";
-  import { audioSettingsStore } from "$utils/stores";
-  import { chapterNumberStore, displayTypeStore, currentPageStore, bottomNavbarVisibleStore } from "$utils/stores";
+  import { __audioSettings } from "$utils/stores";
+  import { __chapterNumber, __displayType, __currentPage, __bottomNavbarVisible } from "$utils/stores";
   import { resetAudioSettings, showAudioModal, playAudio } from "$utils/audioController";
   import { quranMetaData } from "$data/quranMeta";
   import { disabledElement } from "$utils/commonStyles";
@@ -16,15 +16,15 @@
   import Eye from "$svgs/Eye.svelte";
 
   function audioController() {
-    if ($audioSettingsStore.isPlaying === true) {
+    if ($__audioSettings.isPlaying === true) {
       resetAudioSettings();
     } else {
       playAudio({
         type: "verse",
-        chapter: $chapterNumberStore,
+        chapter: $__chapterNumber,
         verse: 1,
         firstToPlay: +document.querySelector("#verses-block :nth-child(1)").id.split(":")[1], // first verse of page
-        lastToPlay: quranMetaData[$chapterNumberStore].verses,
+        lastToPlay: quranMetaData[$__chapterNumber].verses,
         timesToRepeat: 1,
         delay: 0,
       });
@@ -32,17 +32,17 @@
   }
 </script>
 
-<div class={$currentPageStore === "chapter" ? "block" : "hidden"}>
-  <div class="{$bottomNavbarVisibleStore === true ? 'block' : 'hidden'} fixed z-20 w-full h-16 max-w-xs md:max-w-lg shadow-md -translate-x-1/2 bg-white backdrop-filter backdrop-blur-lg bg-opacity-50 border border-gray-200 rounded-full bottom-4 left-1/2 grayscale">
+<div class={$__currentPage === "chapter" ? "block" : "hidden"}>
+  <div class="{$__bottomNavbarVisible === true ? 'block' : 'hidden'} fixed z-20 w-full h-16 max-w-xs md:max-w-lg shadow-md -translate-x-1/2 bg-white backdrop-filter backdrop-blur-lg bg-opacity-50 border border-gray-200 rounded-full bottom-4 left-1/2 grayscale">
     <div class="grid h-full max-w-lg grid-cols-5 mx-auto">
       <!-- Previous Chapter -->
-      <Link to="/{$chapterNumberStore - 1}" class="{$chapterNumberStore === 1 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
+      <Link to="/{$__chapterNumber - 1}" class="{$__chapterNumber === 1 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <ChevronLeft />
         <span class="sr-only">Previous Chapter</span>
       </Link>
 
       <!-- 2nd icon -->
-      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $displayTypeStore === 5 ? 1 : $displayTypeStore + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 relative inline-flex items-center hover:bg-gray-200 dark:hover:bg-gray-800 group">
+      <button type="button" on:click={() => updateSettings({ type: "displayType", value: $__displayType === 5 ? 1 : $__displayType + 1 })} class="opacity-70 inline-flex flex-col items-center justify-center px-5 relative inline-flex items-center hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <Eye />
         <span class="sr-only">Display Type</span>
       </button>
@@ -51,13 +51,13 @@
       <!-- play/pause button -->
       <div class="flex items-center justify-center">
         <button type="button" on:click={() => audioController()} class="inline-flex flex-col items-center justify-center w-10 h-10 font-medium bg-[#ebebeb] hover:bg-gray-200 rounded-full group focus:ring-2 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
-          <svelte:component this={$audioSettingsStore.isPlaying === true ? Pause : PlaySolid} />
+          <svelte:component this={$__audioSettings.isPlaying === true ? Pause : PlaySolid} />
 
           <span class="sr-only">Play/Pause</span>
 
           <!-- show badge when a verse is playing -->
-          {#if $audioSettingsStore.isPlaying === true && $audioSettingsStore.audioType === "verse"}
-            <div class="absolute inline-flex items-center justify-center z-30 text-xs px-2 text-white bg-gray-500 border-2 border-white rounded-md -top-3 dark:border-gray-900">{$audioSettingsStore.playingKey}</div>
+          {#if $__audioSettings.isPlaying === true && $__audioSettings.audioType === "verse"}
+            <div class="absolute inline-flex items-center justify-center z-30 text-xs px-2 text-white bg-gray-500 border-2 border-white rounded-md -top-3 dark:border-gray-900">{$__audioSettings.playingKey}</div>
           {/if}
         </button>
       </div>
@@ -69,7 +69,7 @@
       </button>
 
       <!-- Next Chapter -->
-      <Link to="/{$chapterNumberStore + 1}" class="{$chapterNumberStore === 114 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
+      <Link to="/{$__chapterNumber + 1}" class="{$__chapterNumber === 114 && disabledElement} inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-200 dark:hover:bg-gray-800 group">
         <ChevronRight />
         <span class="sr-only">Next Chapter</span>
       </Link>
diff --git a/src/components/ui/Drawer.svelte b/src/components/ui/Drawer.svelte
index c8fc2592..c3b60508 100644
--- a/src/components/ui/Drawer.svelte
+++ b/src/components/ui/Drawer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { currentPageStore, wordTypeStore, displayTypeStore, websiteThemeStore, wordTranslationStore, wordTranslationEnabledStore, wordTransliterationEnabledStore, verseTranslationsStore, reciterStore, playbackSpeedStore, userSettingsStore } from "$utils/stores";
+  import { __currentPage, __wordType, __displayType, __websiteTheme, __wordTranslation, __wordTranslationEnabled, __wordTransliterationEnabled, __verseTranslations, __reciter, __playbackSpeed, __userSettings } from "$utils/stores";
   import { displayOptions, selectableFontTypes, selectableThemes, selectableVerseTranslations, verseTranslationsLanguages, selectableWordTranslations, selectableReciters, selectablePlaybackSpeeds } from "$data/options";
   import { updateSettings } from "$utils/updateSettings";
   import { resetSettings } from "$utils/resetSettings";
@@ -7,11 +7,11 @@
 
   const settingsBlockClasses = "space-y-2 py-6 border-b";
 
-  $: fontSizeCodes = JSON.parse($userSettingsStore).displaySettings.fontSizes;
+  $: fontSizeCodes = JSON.parse($__userSettings).displaySettings.fontSizes;
 </script>
 
 <!-- drawer component -->
-<div id="settings-drawer" class="fixed top-0 right-0 z-40 h-screen p-4 pt-0 pb-16 overflow-y-auto transition-transform rounded-tl-xl rounded-bl-xl translate-x-full bg-white grayscale w-full md:w-1/2 lg:w-[430px] dark:bg-gray-800" tabindex="-1" aria-labelledby="settings-drawer-label">
+<div id="settings-drawer" class="fixed top-0 right-0 z-40 h-screen p-4 pt-0 pb-16 overflow-y-auto transition-transform md:rounded-tl-xl md:rounded-bl-xl translate-x-full bg-white grayscale w-full md:w-1/2 lg:w-[430px] dark:bg-gray-800" tabindex="-1" aria-labelledby="settings-drawer-label">
   <div id="settings-head" class="z-30 top-0 sticky bg-white border-b-2 py-4 mb-4">
     <h5 id="settings-drawer-label" class="inline-flex items-center mb-4 text-3xl space-x-2 font-semibold text-gray-500 dark:text-gray-400">
       <span>Settings</span>
@@ -44,7 +44,7 @@
       <div id="website-theme-setting" class={settingsBlockClasses}>
         <div class="flex flex-row justify-between items-center">
           <label for="website-theme-list" class="block text-gray-900 dark:text-slate-400">Theme</label>
-          <select id="website-theme-list" on:change={(event) => updateSettings({ type: "websiteTheme", value: +event.target.value })} bind:value={$websiteThemeStore} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          <select id="website-theme-list" on:change={(event) => updateSettings({ type: "websiteTheme", value: +event.target.value })} bind:value={$__websiteTheme} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
             {#each Object.entries(selectableThemes) as [id, theme]}
               <option value={theme.id}>{theme.name}</option>
             {/each}
@@ -57,9 +57,9 @@
       <div id="display-type-setting" class={settingsBlockClasses}>
         <div class="flex flex-row justify-between items-center">
           <label for="display-style-list" class="block text-gray-900 dark:text-slate-400">Display Type</label>
-          <select id="display-style-list" bind:value={$displayTypeStore} on:change={(event) => updateSettings({ type: "displayType", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          <select id="display-style-list" bind:value={$__displayType} on:change={(event) => updateSettings({ type: "displayType", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
             {#each Object.entries(displayOptions) as [id, displayOption]}
-              <option disabled={$currentPageStore !== "chapter" && displayOption.displayID > 2 && "true"} value={displayOption.displayID}>{displayOption.displayName}</option>
+              <option disabled={$__currentPage !== "chapter" && displayOption.displayID > 2 && "true"} value={displayOption.displayID}>{displayOption.displayName}</option>
             {/each}
           </select>
         </div>
@@ -71,8 +71,8 @@
         <div class="flex flex-row justify-between items-center">
           <span class="block text-gray-900 dark:text-slate-400">Word Translation</span>
 
-          <label class="inline-flex items-center cursor-pointer {$wordTransliterationEnabledStore === false && disabledElement}">
-            <input type="checkbox" value="" class="sr-only peer" checked={$wordTranslationEnabledStore} on:click={(event) => updateSettings({ type: "wordTranslationEnabled", value: event.target.checked })} />
+          <label class="inline-flex items-center cursor-pointer {$__wordTransliterationEnabled === false && disabledElement}">
+            <input type="checkbox" value="" class="sr-only peer" checked={$__wordTranslationEnabled} on:click={(event) => updateSettings({ type: "wordTranslationEnabled", value: event.target.checked })} />
             <div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
           </label>
         </div>
@@ -84,8 +84,8 @@
         <div class="flex flex-row justify-between items-center">
           <span class="block text-gray-900 dark:text-slate-400">Word Transliteration</span>
 
-          <label class="inline-flex items-center cursor-pointer {$wordTranslationEnabledStore === false && disabledElement}">
-            <input type="checkbox" value="" class="sr-only peer" checked={$wordTransliterationEnabledStore} on:click={(event) => updateSettings({ type: "wordTransliterationEnabled", value: event.target.checked })} />
+          <label class="inline-flex items-center cursor-pointer {$__wordTranslationEnabled === false && disabledElement}">
+            <input type="checkbox" value="" class="sr-only peer" checked={$__wordTransliterationEnabled} on:click={(event) => updateSettings({ type: "wordTransliterationEnabled", value: event.target.checked })} />
             <div class="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
           </label>
         </div>
@@ -103,7 +103,7 @@
       <div id="quran-font-setting" class={settingsBlockClasses}>
         <div class="flex flex-row justify-between items-center">
           <label for="quran-font-list" class="block text-gray-900 dark:text-slate-400">Quran Font</label>
-          <select id="quran-font-list" on:change={(event) => updateSettings({ type: "wordType", value: +event.target.value })} bind:value={$wordTypeStore} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          <select id="quran-font-list" on:change={(event) => updateSettings({ type: "wordType", value: +event.target.value })} bind:value={$__wordType} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
             {#each Object.entries(selectableFontTypes) as [id, font]}
               <option value={font.id}>{font.font}</option>
             {/each}
@@ -112,7 +112,7 @@
         <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Multiple Quranic fonts to choose from depending on your Mushaf or region preference.</p>
 
         <!-- note for Uthmanic Hafs Mushaf -->
-        {#if $wordTypeStore === 2}
+        {#if $__wordType === 2}
           <p class="mb-6 text-sm text-gray-500 dark:text-gray-400"><b>Note:</b> The Uthmanic Hafs Mushaf font type is still under development and may contain errors and we are aware of them. In case you find any issues, please use a different font type.</p>
         {/if}
       </div>
@@ -188,7 +188,7 @@
       <div id="word-translation-setting" class={settingsBlockClasses}>
         <div class="flex flex-row justify-between items-center">
           <label for="word-translations-list" class="block text-gray-900 dark:text-slate-400">Word</label>
-          <select id="word-translations-list" bind:value={$wordTranslationStore} on:change={(event) => updateSettings({ type: "wordTranslation", value: +event.target.value })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          <select id="word-translations-list" bind:value={$__wordTranslation} on:change={(event) => updateSettings({ type: "wordTranslation", value: +event.target.value })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
             {#each Object.entries(selectableWordTranslations) as [id, translation]}
               <option value={translation.id}>{translation.language}</option>
             {/each}
@@ -201,12 +201,12 @@
       <div id="verse-translation-setting" class="{settingsBlockClasses} border-b-0">
         <div class="flex flex-row justify-between items-center">
           <label for="verse-translations-list" class="block text-gray-900 dark:text-slate-400">Verse</label>
-          <button id="dropdownCheckboxButton" data-dropdown-toggle="verse-translation-checkbox" class="w-32 border text-left border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" type="button"> {$verseTranslationsStore.toString()} </button>
+          <button id="dropdownCheckboxButton" data-dropdown-toggle="verse-translation-checkbox" class="w-32 border text-left border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" type="button"> {$__verseTranslations.toString()} </button>
         </div>
         <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Verse translations from multiple authors and languages.</p>
 
         <!-- verse-translation dropdown menu -->
-        <div id="verse-translation-checkbox" class="z-10 hidden w-56 bg-white divide-y divide-gray-100 rounded-lg border border-gray-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700">
+        <div id="verse-translation-checkbox" class="z-10 hidden w-fit bg-white shadow-md rounded-lg border border-gray-200">
           <ul id="verse-translations-list" class="max-h-56 overflow-y-scroll p-3 space-y-4 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownCheckboxButton">
             {#each Object.entries(verseTranslationsLanguages) as [id, language]}
               <div class="space-y-2">
@@ -217,7 +217,7 @@
                       <li>
                         <div class="flex items-center">
                           <!-- using else-if block to add the "checked" attribute because for some reason the inline check is not working in Svelte as compared to regular javascript -->
-                          {#if $verseTranslationsStore.includes(translation.id)}
+                          {#if $__verseTranslations.includes(translation.id)}
                             <input id="verseTranslationCheckbox-{translation.id}" on:click={() => updateSettings({ type: "verseTranslation", value: translation.id })} checked type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-slate-700" />
                           {:else}
                             <input id="verseTranslationCheckbox-{translation.id}" on:click={() => updateSettings({ type: "verseTranslation", value: translation.id })} type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-slate-700" />
@@ -245,7 +245,7 @@
       <div id="verse-reciter-setting" class={settingsBlockClasses}>
         <div class="flex flex-row justify-between items-center">
           <label for="reciter-list" class="block text-gray-900 dark:text-slate-400">Verse Reciter</label>
-          <select id="reciter-list" bind:value={$reciterStore} on:change={(event) => updateSettings({ type: "reciter", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          <select id="reciter-list" bind:value={$__reciter} on:change={(event) => updateSettings({ type: "reciter", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
             {#each Object.entries(selectableReciters) as [id, reciter]}
               <option value={reciter.id}>{reciter.reciter}</option>
             {/each}
@@ -258,7 +258,7 @@
       <div id="playback-speed-setting" class="{settingsBlockClasses} border-b-0">
         <div class="flex flex-row justify-between items-center">
           <label for="speed-list" class="block text-gray-900 dark:text-slate-400">Playback Speed</label>
-          <select id="speed-list" bind:value={$playbackSpeedStore} on:change={(event) => updateSettings({ type: "playbackSpeed", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          <select id="speed-list" bind:value={$__playbackSpeed} on:change={(event) => updateSettings({ type: "playbackSpeed", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
             {#each Object.entries(selectablePlaybackSpeeds) as [id, speed]}
               <option value={speed.id}>x{speed.speed}</option>
             {/each}
diff --git a/src/components/ui/HomepageTabs.svelte b/src/components/ui/HomepageTabs.svelte
index 30306c2a..902930f9 100644
--- a/src/components/ui/HomepageTabs.svelte
+++ b/src/components/ui/HomepageTabs.svelte
@@ -2,7 +2,7 @@
   import { Link } from "svelte-routing";
   import { quranMetaData, mostRead } from "$data/quranMeta";
   import { fetchChapterData } from "$utils/fetchChapterData";
-  import { lastReadStore } from "$utils/stores";
+  import { __lastRead, __favouriteChapters } from "$utils/stores";
 
   import { inview } from "svelte-inview";
 
@@ -33,7 +33,7 @@
         <button on:click={() => (activeTab = 2)} class="{homepageTabsStyles.tabStyle} {activeTab === 2 ? `${homepageTabsStyles.activeTab}` : ''}" id="most-read-tab" data-tabs-target="#most-read-tab-panel" type="button" role="tab" aria-controls="most-read-tab-panel" aria-selected="false">Most Read</button>
       </li>
       <li>
-        <Link to="/{$lastReadStore.split(':')[0]}/{$lastReadStore.split(':')[1]}" class={homepageTabsStyles.tabStyle} id="last-read-tab" data-tabs-target="#most-read-tab-panel" type="button" role="tab" aria-controls="most-read-tab-panel" aria-selected="false">Last Read ({$lastReadStore})</Link>
+        <Link to="/{$__lastRead.split(':')[0]}/{$__lastRead.split(':')[1]}" class={homepageTabsStyles.tabStyle} id="last-read-tab" data-tabs-target="#most-read-tab-panel" type="button" role="tab" aria-controls="most-read-tab-panel" aria-selected="false">Last Read ({$__lastRead})</Link>
       </li>
     </ul>
   </div>
@@ -58,16 +58,31 @@
     </div>
 
     <!-- most read tab -->
-    <div class="homepage-tab-panels {activeTab === 2 ? 'block' : 'hidden'}" id="most-read-tab-panel" role="tabpanel" aria-labelledby="most-read-tab">
-      <div class={homepageTabsStyles.cardGridStyle}>
-        {#each Object.entries(mostRead) as [id, item]}
-          <Link to={item.url} class={homepageTabsStyles.cardInnerStyle}>
-            <div class="">
-              <span class="text-sm">{quranMetaData[item.chapter].transliteration} ({item.verses})</span>
-              <div class="block text-xs text-gray-400">{item.title}</div>
-            </div>
-          </Link>
-        {/each}
+    <div class="homepage-tab-panels space-y-12 {activeTab === 2 ? 'block' : 'hidden'}" id="most-read-tab-panel" role="tabpanel" aria-labelledby="most-read-tab">
+      <!-- <div id="favourite-chapters" class="flex flex-col space-y-4">
+        <div class="text-sm text-center font-medium">Your Favourites</div>
+        <div class={homepageTabsStyles.cardGridStyle}>
+          {#each $__favouriteChapters as chapter, index}
+            <Link to="/{chapter}" class={homepageTabsStyles.cardInnerStyle}>
+              <div class="">
+                <span class="text-sm">{quranMetaData[chapter].transliteration}</span>
+              </div>
+            </Link>
+          {/each}
+        </div>
+      </div> -->
+      <div id="most-read-chapters" class="flex flex-col space-y-4">
+        <!-- <div class="text-sm text-center font-medium">Recommended by QuranWBW</div> -->
+        <div class={homepageTabsStyles.cardGridStyle}>
+          {#each Object.entries(mostRead) as [id, item]}
+            <Link to={item.url} class={homepageTabsStyles.cardInnerStyle}>
+              <div class="">
+                <span class="text-sm">{quranMetaData[item.chapter].transliteration} ({item.verses})</span>
+                <div class="block text-xs text-gray-400">{item.title}</div>
+              </div>
+            </Link>
+          {/each}
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/ui/Navbar.svelte b/src/components/ui/Navbar.svelte
index 2d24f46f..feb0a65a 100644
--- a/src/components/ui/Navbar.svelte
+++ b/src/components/ui/Navbar.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Link } from "svelte-routing";
   import { quranMetaData, pageNumberKeys } from "$data/quranMeta";
-  import { chapterNumberStore, currentPageStore, lastReadStore, pageURLStore, topNavbarVisibleStore } from "$utils/stores";
+  import { __chapterNumber, __currentPage, __lastRead, __pageURL, __topNavbarVisible } from "$utils/stores";
   import { toggleModal } from "$utils/toggleModal";
   import { disabledElement, buttonElement } from "$utils/commonStyles";
 
@@ -28,31 +28,31 @@
     // window.HSStaticMethods.autoInit();
 
     try {
-      lastReadPage = document.getElementById($lastReadStore).getAttribute("data-page");
-      lastReadJuz = document.getElementById($lastReadStore).getAttribute("data-juz");
+      lastReadPage = document.getElementById($__lastRead).getAttribute("data-page");
+      lastReadJuz = document.getElementById($__lastRead).getAttribute("data-juz");
     } catch (error) {}
   }
 
   // revelation
-  $: chapterRevelation = quranMetaData[$chapterNumberStore].revelation;
+  $: chapterRevelation = quranMetaData[$__chapterNumber].revelation;
 
   // scroll percentage
-  $: chapterProgress = ($lastReadStore.split(":")[1] / quranMetaData[$chapterNumberStore].verses) * 100;
+  $: chapterProgress = ($__lastRead.split(":")[1] / quranMetaData[$__chapterNumber].verses) * 100;
 
   let navbarChapterName;
 
   $: {
-    navbarChapterName = quranMetaData[$chapterNumberStore].transliteration;
+    navbarChapterName = quranMetaData[$__chapterNumber].transliteration;
 
     // chapters for which the Arabic and English names are same, the navbar should only show one
-    if (quranMetaData[$chapterNumberStore].transliteration !== quranMetaData[$chapterNumberStore].translation) {
-      navbarChapterName += ` (${quranMetaData[$chapterNumberStore].translation})`;
+    if (quranMetaData[$__chapterNumber].transliteration !== quranMetaData[$__chapterNumber].translation) {
+      navbarChapterName += ` (${quranMetaData[$__chapterNumber].translation})`;
     }
   }
 </script>
 
-<nav id="navbar" class="{$currentPageStore === 'home' ? 'hidden' : 'block'} bg-white fixed w-full z-20 top-0 left-0 border-b border-gray-200 text-black backdrop-filter backdrop-blur-lg bg-opacity-50 print:hidden dark:bg-slate-900 dark:text-slate-400 dark:border-slate-700 grayscale">
-  <div id="top-nav" class="{$topNavbarVisibleStore === true ? 'block' : 'hidden'} flex flex-row items-center justify-between max-w-screen-lg mx-auto px-4 py-2">
+<nav id="navbar" class="{$__currentPage === 'home' ? 'hidden' : 'block'} bg-white fixed w-full z-20 top-0 left-0 border-b border-gray-200 text-black backdrop-filter backdrop-blur-lg bg-opacity-50 print:hidden dark:bg-slate-900 dark:text-slate-400 dark:border-slate-700 grayscale">
+  <div id="top-nav" class="{$__topNavbarVisible === true ? 'block' : 'hidden'} flex flex-row items-center justify-between max-w-screen-lg mx-auto px-4 py-2">
     <Link to="/" class="flex flex-row items-center p-2 cursor-pointer hover:bg-[#ebebeb] rounded-lg dark:hover:bg-slate-700">
       <Home />
       <span class="text-xs pl-2 hidden sm:block">Home</span>
@@ -60,11 +60,11 @@
 
     <button id="navigationDropdownButton" data-dropdown-toggle="navigationDropdown" class="flex items-center py-2 px-3 text-sm border-gray-200 w-auto p-2 hover:bg-[#ebebeb] rounded-lg dark:hover:bg-slate-700">
       <span id="navbar-top-title">
-        {#if $currentPageStore === "chapter"}
+        {#if $__currentPage === "chapter"}
           {navbarChapterName}
         {:else}
           <!-- capitalize the first letter of the current page and display it -->
-          {$currentPageStore[0].toUpperCase() + $currentPageStore.slice(1)}
+          {$__currentPage[0].toUpperCase() + $__currentPage.slice(1)}
         {/if}
       </span>
       <svg class="w-2.5 h-2.5 ml-2.5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" /></svg>
@@ -76,16 +76,16 @@
     </div>
   </div>
 
-  {#if $currentPageStore === "chapter"}
+  {#if $__currentPage === "chapter"}
     <div id="bottom-nav" class="flex flex-row items-center justify-between border-t text-xs max-w-screen-lg mx-auto px-6 dark:border-slate-700">
       <div id="navbar-bottom-chapter-revalation" class="flex flex-row items-center py-2">
-        {#if $topNavbarVisibleStore === false}
+        {#if $__topNavbarVisible === false}
           <span>{navbarChapterName}</span>
         {:else}
           <span>{chapterRevelation === 1 ? "Meccan" : "Medinan"}</span>
         {/if}
       </div>
-      <!-- <div id="navbar-bottom-chapter-title" class="flex flex-row items-center py-2">{quranMetaData[$chapterNumberStore].transliteration}</div> -->
+      <!-- <div id="navbar-bottom-chapter-title" class="flex flex-row items-center py-2">{quranMetaData[$__chapterNumber].transliteration}</div> -->
       <div class="flex flex-row items-center py-2">
         <span>{lastReadPage !== undefined ? `Page ${lastReadPage}` : "..."}</span>
         <span class="px-1 opacity-60">/</span>
@@ -106,7 +106,7 @@
           {#each { length: 114 } as _, chapter}
             <li>
               <button on:click={() => toggleModal("navigationDropdown", "hide")} class="w-full text-left">
-                <Link to="/{chapter + 1}" class="block p-3 rounded-lg hover:bg-[#ebebeb] dark:hover:bg-slate-700 {$chapterNumberStore === chapter + 1 && 'bg-[#ebebeb] dark:bg-slate-700'}">
+                <Link to="/{chapter + 1}" class="block p-3 rounded-lg hover:bg-[#ebebeb] dark:hover:bg-slate-700 {$__chapterNumber === chapter + 1 && 'bg-[#ebebeb] dark:bg-slate-700'}">
                   <span class="text-sm text-gray-500 dark:text-slate-400">
                     {chapter + 1}. {quranMetaData[chapter + 1].transliteration}
                     <span class="hidden md:inline-block">({quranMetaData[chapter + 1].translation})</span>
@@ -119,15 +119,15 @@
       </div>
 
       <!-- verses selector -->
-      {#if $currentPageStore === "chapter"}
+      {#if $__currentPage === "chapter"}
         <div class="flex flex-col space-y-6">
           <!-- goto verse -->
           <div class="flex flex-col space-y-2">
             <div class="text-xs pb-2 border-b dark:border-slate-700">Go to Verse</div>
             <div class="flex flex-row space-x-2">
-              <input type="number" min="1" max={quranMetaData[$chapterNumberStore].verses} id="gotoVerse" on:change={(event) => (gotoVerse = event.target.valueAsNumber)} aria-describedby="helper-text-explanation" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-24 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. {Math.floor(Math.random() * (quranMetaData[$chapterNumberStore].verses - 1 + 1)) + 1}" />
+              <input type="number" min="1" max={quranMetaData[$__chapterNumber].verses} id="gotoVerse" on:change={(event) => (gotoVerse = event.target.valueAsNumber)} aria-describedby="helper-text-explanation" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-24 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. {Math.floor(Math.random() * (quranMetaData[$__chapterNumber].verses - 1 + 1)) + 1}" />
               <button on:click={() => toggleModal("navigationDropdown", "hide")}>
-                <Link to="/{$chapterNumberStore}/{gotoVerse}" on:click={() => pageURLStore.set(Math.random())} class={buttonElement}>Go</Link>
+                <Link to="/{$__chapterNumber}/{gotoVerse}" on:click={() => __pageURL.set(Math.random())} class={buttonElement}>Go</Link>
               </button>
             </div>
           </div>
@@ -137,7 +137,7 @@
             <div class="flex flex-row space-x-2">
               <input type="number" min="1" max="604" id="gotoPage" on:change={(event) => pageSelector(event)} aria-describedby="helper-text-explanation" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-24 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. {Math.floor(Math.random() * 604) + 1}" />
               <button on:click={() => toggleModal("navigationDropdown", "hide")}>
-                <Link to="/{gotoPageChapter}/{gotoPageVerse}" on:click={() => pageURLStore.set(Math.random())} class={buttonElement}>Go</Link>
+                <Link to="/{gotoPageChapter}/{gotoPageVerse}" on:click={() => __pageURL.set(Math.random())} class={buttonElement}>Go</Link>
               </button>
             </div>
             <div class="flex flex-col text-xs opacity-50">{quranMetaData[gotoPageChapter].transliteration}, {gotoPageChapter}:{gotoPageVerse}</div>
@@ -150,7 +150,7 @@
   <!-- Dropdown menu -->
   <div id="rightMenuDropdown" class="navbar-dropdown z-30 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-slate-800 dark:border-slate-700">
     <ul class="py-2 text-sm text-gray-700 dark:text-slate-400" aria-labelledby="rightMenuDropdownButton">
-      <li class={$currentPageStore === "changelogs" || $currentPageStore === "issues" || $currentPageStore === "about" || $currentPageStore === "search" ? disabledElement : ""}>
+      <li class={$__currentPage === "changelogs" || $__currentPage === "issues" || $__currentPage === "about" || $__currentPage === "search" ? disabledElement : ""}>
         <button data-drawer-target="settings-drawer" data-drawer-show="settings-drawer" data-drawer-placement="right" aria-controls="settings-drawer" class={rightMenuDropdownClasses}>Settings</button>
       </li>
       <li>
@@ -174,7 +174,7 @@
       <li>
         <button on:click={() => toggleModal("TajweedRulingModal", "show")} class={rightMenuDropdownClasses}>Tajweed Rulings</button>
       </li>
-      <li class={$currentPageStore === "changelogs" || $currentPageStore === "issues" || $currentPageStore === "about" || $currentPageStore === "search" ? disabledElement : ""}>
+      <li class={$__currentPage === "changelogs" || $__currentPage === "issues" || $__currentPage === "about" || $__currentPage === "search" ? disabledElement : ""}>
         <button on:click={() => toggleModal("InitialSetupModal", "show")} class={rightMenuDropdownClasses}>Initial Setup</button>
       </li>
     </ul>
diff --git a/src/components/ui/modals/AudioModal.svelte b/src/components/ui/modals/AudioModal.svelte
index 282a3e07..0aadfdbc 100644
--- a/src/components/ui/modals/AudioModal.svelte
+++ b/src/components/ui/modals/AudioModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { quranMetaData } from "$data/quranMeta";
-  import { currentPageStore, chapterNumberStore, audioSettingsStore } from "$utils/stores";
+  import { __currentPage, __chapterNumber, __audioSettings } from "$utils/stores";
   import { initializeAudio, updateAudioSettings } from "$utils/audioController";
   import { toggleModal } from "$utils/toggleModal";
   import { disabledElement, buttonElement } from "$utils/commonStyles";
@@ -9,7 +9,7 @@
   import Info from "$svgs/Info.svelte";
   import Play from "$svgs/Play.svelte";
 
-  $: audioSettingsJSON = JSON.stringify($audioSettingsStore, undefined, 2);
+  $: audioSettingsJSON = JSON.stringify($__audioSettings, undefined, 2);
 </script>
 
 <!-- Audio modal -->
@@ -24,7 +24,7 @@
         <span class="sr-only">Close modal</span>
       </button>
       <div class="px-6 py-6 lg:px-8">
-        <h3 id="audioModal-title" class="mb-4 text-xl font-medium text-gray-900 dark:text-slate-400">{quranMetaData[$audioSettingsStore.playingChapter || 1].transliteration}, {$audioSettingsStore.playingKey}</h3>
+        <h3 id="audioModal-title" class="mb-4 text-xl font-medium text-gray-900 dark:text-slate-400">{quranMetaData[$__audioSettings.playingChapter || 1].transliteration}, {$__audioSettings.playingKey}</h3>
         <div class="flex flex-col">
           <!-- verse or words -->
           <div class="flex flex-col space-y-4 py-4">
@@ -32,17 +32,17 @@
             <div class="flex flex-row space-x-4">
               <!-- play verse -->
               <div class="flex items-center">
-                <input checked={$audioSettingsStore.audioType === "verse" ? true : false} id="playVerse" type="radio" value="" on:click={updateAudioSettings} name="radio-audio-type" class="radio-play-type w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
+                <input checked={$__audioSettings.audioType === "verse" ? true : false} id="playVerse" type="radio" value="" on:click={updateAudioSettings} name="radio-audio-type" class="radio-play-type w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
                 <label for="playVerse" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Play Verse</label>
               </div>
               <!-- play word -->
               <div class="flex items-center">
-                <input checked={$audioSettingsStore.audioType === "word" ? true : false} id="playWord" type="radio" value="" on:click={updateAudioSettings} name="radio-audio-type" class="radio-play-type w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
+                <input checked={$__audioSettings.audioType === "word" ? true : false} id="playWord" type="radio" value="" on:click={updateAudioSettings} name="radio-audio-type" class="radio-play-type w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
                 <label for="playWord" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Play Word</label>
               </div>
             </div>
 
-            {#if $audioSettingsStore.audioType === "word"}
+            {#if $__audioSettings.audioType === "word"}
               <span class="inline-flex items-center text-xs space-x-1 pt-2 text-gray-500 dark:text-gray-400 opacity-80">
                 <!-- <Info /> -->
                 <span>This option would play all the words in the verse one by one with your selected repeat options. If you would like to listen to individual words, click on them.</span>
@@ -51,41 +51,41 @@
           </div>
 
           <!-- single or range -->
-          <div id="single-or-range-block" class="flex flex-col space-y-4 py-4 border-t dark:border-slate-700 {$audioSettingsStore.audioType === 'word' ? 'hidden' : ''}">
+          <div id="single-or-range-block" class="flex flex-col space-y-4 py-4 border-t dark:border-slate-700 {$__audioSettings.audioType === 'word' ? 'hidden' : ''}">
             <span class="text-xs text-gray-500 dark:text-gray-400">Select whether you would like to play single verse or word or multiple.</span>
             <div class="flex flex-row space-x-4">
               <!-- play this verse -->
               <div class="flex items-center">
-                <input checked={$audioSettingsStore.audioRange === "playThisVerse" ? true : false} id="playThisVerse" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
+                <input checked={$__audioSettings.audioRange === "playThisVerse" ? true : false} id="playThisVerse" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
                 <label for="playThisVerse" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">This Verse</label>
               </div>
               <!-- play from here -->
-              <div class="flex items-center {$currentPageStore !== 'chapter' && disabledElement}">
-                <input checked={$audioSettingsStore.audioRange === "playFromHere" ? true : false} id="playFromHere" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
+              <div class="flex items-center {$__currentPage !== 'chapter' && disabledElement}">
+                <input checked={$__audioSettings.audioRange === "playFromHere" ? true : false} id="playFromHere" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
                 <label for="playFromHere" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">From Here</label>
               </div>
               <!-- play range -->
-              <div class="flex items-center {$currentPageStore !== 'chapter' && disabledElement}">
-                <input checked={$audioSettingsStore.audioRange === "playRange" ? true : false} id="playRange" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
+              <div class="flex items-center {$__currentPage !== 'chapter' && disabledElement}">
+                <input checked={$__audioSettings.audioRange === "playRange" ? true : false} id="playRange" type="radio" value="" on:click={updateAudioSettings} name="audioRange-radios" class=" w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 focus:ring-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-slate-700" />
                 <label for="playRange" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Verses Range</label>
               </div>
             </div>
           </div>
 
           <!-- audio range options -->
-          {#if $currentPageStore === "chapter" && $audioSettingsStore.audioType === "verse"}
-            <div id="audio-range-options" class={$audioSettingsStore.audioRange === "playRange" ? "block" : "hidden"}>
+          {#if $__currentPage === "chapter" && $__audioSettings.audioType === "verse"}
+            <div id="audio-range-options" class={$__audioSettings.audioRange === "playRange" ? "block" : "hidden"}>
               <!-- from / till -->
               <div class="flex flex-col space-y-4 py-4 border-t dark:border-slate-700">
                 <span class="text-xs text-gray-500 dark:text-gray-400">Select the range of verses or words to be played.</span>
                 <div class="flex flex-row space-x-4">
                   <div class="flex flex-row space-x-2">
                     <span class="m-auto text-sm font-medium text-gray-900 dark:text-gray-300">Start Verse</span>
-                    <input type="number" min="1" max={quranMetaData[$chapterNumberStore].verses} value={$audioSettingsStore.startVerse} id="startVerse" on:change={updateAudioSettings} aria-describedby="helper-text-explanation" class="w-16 text-xs border border-gray-300 text-gray-900 rounded-lg focus:ring-gray-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-gray-500 dark:focus:border-blue-500" placeholder="start" />
+                    <input type="number" min="1" max={quranMetaData[$__chapterNumber].verses} value={$__audioSettings.startVerse} id="startVerse" on:change={updateAudioSettings} aria-describedby="helper-text-explanation" class="w-16 text-xs border border-gray-300 text-gray-900 rounded-lg focus:ring-gray-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-gray-500 dark:focus:border-blue-500" placeholder="start" />
                   </div>
                   <div class="flex flex-row space-x-2">
                     <span class="m-auto text-sm font-medium text-gray-900 dark:text-gray-300">End Verse</span>
-                    <input type="number" min={$audioSettingsStore.startVerse} max={quranMetaData[$chapterNumberStore].verses} value={$audioSettingsStore.endVerse} id="endVerse" on:change={updateAudioSettings} aria-describedby="helper-text-explanation" class="w-16 text-xs border border-gray-300 text-gray-900 rounded-lg focus:ring-gray-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-gray-500 dark:focus:border-blue-500" placeholder="end" />
+                    <input type="number" min={$__audioSettings.startVerse} max={quranMetaData[$__chapterNumber].verses} value={$__audioSettings.endVerse} id="endVerse" on:change={updateAudioSettings} aria-describedby="helper-text-explanation" class="w-16 text-xs border border-gray-300 text-gray-900 rounded-lg focus:ring-gray-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-gray-500 dark:focus:border-blue-500" placeholder="end" />
                   </div>
                 </div>
               </div>
@@ -98,9 +98,9 @@
           <span class="text-xs text-gray-500 dark:text-gray-400">Select the number of times a verse or word has to be repeated.</span>
           <div class="flex flex-row space-x-4">
             <div class="flex flex-row space-x-2">
-              <span class="m-auto text-sm font-medium text-gray-900 dark:text-gray-300">Repeat each {$audioSettingsStore.audioType} </span>
+              <span class="m-auto text-sm font-medium text-gray-900 dark:text-gray-300">Repeat each {$__audioSettings.audioType} </span>
               <input id="timesToRepeat" type="number" value="1" min="1" max="20" on:change={updateAudioSettings} class="w-16 text-xs border border-gray-300 text-gray-900 rounded-lg focus:ring-gray-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-gray-500 dark:focus:border-blue-500" />
-              <span class="m-auto text-sm font-medium text-gray-900 dark:text-gray-300">{$audioSettingsStore.timesToRepeat < 2 ? "time" : "times"} </span>
+              <span class="m-auto text-sm font-medium text-gray-900 dark:text-gray-300">{$__audioSettings.timesToRepeat < 2 ? "time" : "times"} </span>
             </div>
           </div>
         </div>
@@ -113,13 +113,13 @@
           <button on:click={initializeAudio} class="w-full inline-flex items-center justify-center mr-2 mt-6 space-x-2 {buttonElement}">
             <Play />
 
-            <span class="capitalize">Play {$audioSettingsStore.audioType}</span>
+            <span class="capitalize">Play {$__audioSettings.audioType}</span>
             <div class="hidden">
-              {#if $audioSettingsStore.startVerse !== null}
-                {$audioSettingsStore.startVerse}
+              {#if $__audioSettings.startVerse !== null}
+                {$__audioSettings.startVerse}
               {/if}
-              {#if $audioSettingsStore.endVerse !== undefined}
-                to {$audioSettingsStore.endVerse}
+              {#if $__audioSettings.endVerse !== undefined}
+                to {$__audioSettings.endVerse}
               {/if}
             </div>
           </button>
diff --git a/src/components/ui/modals/InitialSetupModal.svelte b/src/components/ui/modals/InitialSetupModal.svelte
index c6d8e070..feda5986 100644
--- a/src/components/ui/modals/InitialSetupModal.svelte
+++ b/src/components/ui/modals/InitialSetupModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import ChapterVerses from "$verses/ChapterVerses.svelte";
-  import { currentPageStore, chapterDataStore, wordTypeStore, displayTypeStore } from "$utils/stores";
+  import { __currentPage, __chapterData, __wordType, __displayType } from "$utils/stores";
   import { displayOptions, selectableFontTypes } from "$data/options";
   import { updateSettings } from "$utils/updateSettings";
   import { toggleModal } from "$utils/toggleModal";
@@ -8,7 +8,7 @@
 
   // show the setup modal on first visit except on the home page
   $: {
-    if ($currentPageStore === "chapter") {
+    if ($__currentPage === "chapter") {
       const userSettings = JSON.parse(localStorage.getItem("userSettings"));
 
       // // if the setup was not already done
@@ -45,7 +45,7 @@
         <div class="flex flex-row space-x-6">
           <div class="flex flex-col">
             <label for="quran-font-list" class="block mb-2 text-sm font-medium text-gray-900">Quran Font</label>
-            <select id="quran-font-list" on:change={(event) => updateSettings({ type: "wordType", value: +event.target.value })} bind:value={$wordTypeStore} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+            <select id="quran-font-list" on:change={(event) => updateSettings({ type: "wordType", value: +event.target.value })} bind:value={$__wordType} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
               {#each Object.entries(selectableFontTypes) as [id, font]}
                 <option value={font.id}>{font.font}</option>
               {/each}
@@ -54,7 +54,7 @@
 
           <div class="flex flex-col">
             <label for="display-style-list" class="block mb-2 text-sm font-medium text-gray-900">Display Style</label>
-            <select id="display-style-list" bind:value={$displayTypeStore} on:change={(event) => updateSettings({ type: "displayType", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
+            <select id="display-style-list" bind:value={$__displayType} on:change={(event) => updateSettings({ type: "displayType", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
               {#each Object.entries(displayOptions) as [id, displayOption]}
                 <option value={displayOption.displayID}>{displayOption.displayName}</option>
               {/each}
@@ -63,11 +63,11 @@
         </div>
 
         <!-- example verse -->
-        {#key $chapterDataStore}
-          {#if $chapterDataStore !== null}
+        {#key $__chapterData}
+          {#if $__chapterData !== null}
             <div class="flex flex-col pt-8 space-y-4">
               <span class="text-center text-xs">Example Verse:</span>
-              <div id="exampleVerse" style="zoom: 60%; {displayOptions[`${$displayTypeStore}`].continuous === true ? 'text-align: center; direction: rtl;' : ''}">
+              <div id="exampleVerse" style="zoom: 60%; {displayOptions[`${$__displayType}`].continuous === true ? 'text-align: center; direction: rtl;' : ''}">
                 <ChapterVerses startVerse={1} endVerse={1} isExampleVerse={true} />
               </div>
             </div>
diff --git a/src/components/ui/modals/TajweedRulingModal.svelte b/src/components/ui/modals/TajweedRulingModal.svelte
index 88024a84..c472f70a 100644
--- a/src/components/ui/modals/TajweedRulingModal.svelte
+++ b/src/components/ui/modals/TajweedRulingModal.svelte
@@ -3,7 +3,7 @@
   import { buttonElement, linkElement } from "$utils/commonStyles";
   import { tajweedRulings } from "$data/quranMeta";
   import { selectableThemes } from "$data/options";
-  import { websiteThemeStore } from "$utils/stores";
+  import { __websiteTheme } from "$utils/stores";
 </script>
 
 <!-- Main modal -->
@@ -36,7 +36,7 @@
             <tbody>
               {#each Object.entries(tajweedRulings) as [id, ruling]}
                 <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                  <td class="px-6 py-4 tajweed-ruling text-2xl {selectableThemes[$websiteThemeStore].palette === 1 && 'v4dark'} font-filter"> {ruling.code} </td>
+                  <td class="px-6 py-4 tajweed-ruling text-2xl {selectableThemes[$__websiteTheme].palette === 1 && 'v4dark'} font-filter"> {ruling.code} </td>
                   <td class="px-6 py-4"> {ruling.description} </td>
                 </tr>
               {/each}
diff --git a/src/components/verses/ChapterVerses.svelte b/src/components/verses/ChapterVerses.svelte
index cfe4c55d..34d7cf25 100644
--- a/src/components/verses/ChapterVerses.svelte
+++ b/src/components/verses/ChapterVerses.svelte
@@ -10,7 +10,7 @@
   import ContinuousNormalDisplay from "$displays/ContinuousNormalDisplay.svelte";
   import SideBySideDisplay from "$displays/SideBySideDisplay.svelte";
   import { quranMetaData } from "$data/quranMeta";
-  import { displayTypeStore, chapterNumberStore, chapterDataStore } from "$utils/stores";
+  import { __displayType, __chapterNumber, __chapterData } from "$utils/stores";
   import { buttonElement } from "$utils/commonStyles";
 
   // load button click options
@@ -27,7 +27,7 @@
     5: { displayID: 5, displayComponent: SideBySideDisplay },
   };
 
-  const chapterTotalVerses = quranMetaData[$chapterNumberStore].verses;
+  const chapterTotalVerses = quranMetaData[$__chapterNumber].verses;
 
   let ChapterVerses; // for the "ChapterVerses" component
 
@@ -112,7 +112,7 @@
 {/if} -->
 
 {#each Array.from(Array(endVerse + 1).keys()).slice(startVerse) as verse}
-  <svelte:component this={displayComponents[`${$displayTypeStore}`].displayComponent} key={`${$chapterNumberStore}:${verse}`} value={$chapterDataStore[`${$chapterNumberStore}:${verse}`]} />
+  <svelte:component this={displayComponents[`${$__displayType}`].displayComponent} key={`${$__chapterNumber}:${verse}`} value={$__chapterData[`${$__chapterNumber}:${verse}`]} />
 {/each}
 
 <!-- if the verses are being shown to the user in a modal/drawer, then do not show the loadNextVersesButton -->
diff --git a/src/components/verses/IndividualVerses.svelte b/src/components/verses/IndividualVerses.svelte
index 372702d0..bb749cf7 100644
--- a/src/components/verses/IndividualVerses.svelte
+++ b/src/components/verses/IndividualVerses.svelte
@@ -6,12 +6,12 @@
   import NormalDisplay from "$displays/NormalDisplay.svelte";
 
   import { updateSettings } from "$utils/updateSettings";
-  import { displayTypeStore } from "$utils/stores";
+  import { __displayType } from "$utils/stores";
 
   // set the display back to type 1, in case it was 3, 4 or 5
-  if ($displayTypeStore > 2) {
+  if ($__displayType > 2) {
     updateSettings({ type: "displayType", value: 1 });
   }
 </script>
 
-<svelte:component this={$displayTypeStore === 1 ? WBWDisplay : NormalDisplay} {key} {value} />
+<svelte:component this={$__displayType === 1 ? WBWDisplay : NormalDisplay} {key} {value} />
diff --git a/src/components/verses/VersesButtons.svelte b/src/components/verses/VersesButtons.svelte
index 2cb0cfa3..949dce18 100644
--- a/src/components/verses/VersesButtons.svelte
+++ b/src/components/verses/VersesButtons.svelte
@@ -6,7 +6,7 @@
 
   import { Link } from "svelte-routing";
   import { showAudioModal } from "$utils/audioController";
-  import { currentPageStore, userSettingsStore, audioSettingsStore } from "$utils/stores";
+  import { __currentPage, __userSettings, __audioSettings } from "$utils/stores";
   import { updateSettings } from "$utils/updateSettings";
   import { downloadVerseImage } from "$utils/downloadVerseImage";
 
@@ -17,8 +17,8 @@
   import Pause from "$svgs/Pause.svelte";
   import DotsVertical from "$svgs/DotsVertical.svelte";
 
-  // update userBookmarks whenever the userSettingsStore changes
-  $: userBookmarks = JSON.parse($userSettingsStore).userBookmarks;
+  // update userBookmarks whenever the __userSettings changes
+  $: userBookmarks = JSON.parse($__userSettings).userBookmarks;
 
   const buttonClasses = "inline-flex items-center justify-center w-10 h-10 text-gray-400 transition-colors duration-150 rounded-lg focus:shadow-outline bg-[#ebebeb] hover:bg-gray-200 print:hidden dark:bg-slate-800 dark:hover:bg-slate-700";
 
@@ -36,13 +36,13 @@
 </script>
 
 <div class="verseButtons flex flex-row space-x-4 text-gray-400 text-xs grayscale">
-  <Link to={$currentPageStore === "chapter" ? "./#" : `/${chapter}/${verse}`} class={buttonClasses}>{key}</Link>
+  <Link to={$__currentPage === "chapter" ? "./#" : `/${chapter}/${verse}`} class={buttonClasses}>{key}</Link>
 
   <button on:click={() => updateSettings({ type: "userBookmarks", key })} class={buttonClasses}>
     <svelte:component this={userBookmarks.includes(key) ? Bookmarked : Bookmark} />
   </button>
   <button on:click={() => showAudioModal(key)} class={buttonClasses}>
-    <svelte:component this={$audioSettingsStore.isPlaying === true && $audioSettingsStore.playingKey === key ? Pause : Play} />
+    <svelte:component this={$__audioSettings.isPlaying === true && $__audioSettings.playingKey === key ? Pause : Play} />
   </button>
 
   <!-- verses option dropdown -->
diff --git a/src/components/verses/VersesTranslations.svelte b/src/components/verses/VersesTranslations.svelte
index abef3ce7..fdf82d10 100644
--- a/src/components/verses/VersesTranslations.svelte
+++ b/src/components/verses/VersesTranslations.svelte
@@ -1,15 +1,15 @@
 <script>
   export let value;
-  import { userSettingsStore } from "$utils/stores";
+  import { __userSettings } from "$utils/stores";
   import { selectableVerseTranslations } from "$data/options";
-  const fontSizes = JSON.parse($userSettingsStore).displaySettings.fontSizes;
+  const fontSizes = JSON.parse($__userSettings).displaySettings.fontSizes;
 </script>
 
 {#if value.translations != undefined}
   <div class="verseTranslationText flex flex-col space-y-4 leading-normal grayscale {fontSizes.verseTranslationText}" data-fontSize={fontSizes.verseTranslationText}>
     {#each Object.entries(value.translations) as [verseTranslationID, verseTranslation]}
       <div class="flex flex-col">
-        <span>{verseTranslation}</span>
+        <span>{@html verseTranslation}</span>
         <span class="text-gray-500">&mdash; {selectableVerseTranslations[verseTranslationID].author}</span>
       </div>
     {/each}
diff --git a/src/components/verses/VersesWords.svelte b/src/components/verses/VersesWords.svelte
index 3c5bbcd5..fa4090b9 100644
--- a/src/components/verses/VersesWords.svelte
+++ b/src/components/verses/VersesWords.svelte
@@ -5,13 +5,13 @@
 
   import { displayOptions, selectableThemes } from "$data/options";
   import { supplicationsFromQuran } from "$data/quranMeta";
-  import { currentPageStore, wordTypeStore, displayTypeStore, websiteThemeStore, userSettingsStore, audioSettingsStore, wordTranslationEnabledStore, wordTransliterationEnabledStore, morphologyKey } from "$utils/stores";
+  import { __currentPage, __wordType, __displayType, __websiteTheme, __userSettings, __audioSettings, __wordTranslationEnabled, __wordTransliterationEnabled, __morphologyKey } from "$utils/stores";
   import { wordAudioController } from "$utils/audioController";
 
   const chapter = key.split(":")[0];
   const verse = key.split(":")[1];
 
-  const fontSizes = JSON.parse($userSettingsStore).displaySettings.fontSizes;
+  const fontSizes = JSON.parse($__userSettings).displaySettings.fontSizes;
 
   const arabicSplit = value.words.arabic.split("|");
   const transliterationSplit = value.words.transliteration.split("|");
@@ -20,40 +20,40 @@
 
   // handle what happens when a word is clicked depending on page type
   function wordClickController(chapter, verse, word) {
-    if ($currentPageStore === "morphology") {
+    if ($__currentPage === "morphology") {
       const wordKey = `${chapter}:${verse}:${word + 1}`;
-      morphologyKey.set(wordKey);
+      __morphologyKey.set(wordKey);
       navigate(`/morphology/${wordKey}`, { replace: true });
     } else {
       wordAudioController({ chapter, verse, word });
     }
   }
 
-  $: wordClasses = `rounded-lg hover:cursor-pointer hover:bg-[#ebebeb] dark:hover:bg-slate-800 ${displayOptions[`${$displayTypeStore}`].layout === "wbw" ? "p-3" : "p-1"}`;
+  $: wordClasses = `rounded-lg hover:cursor-pointer hover:bg-[#ebebeb] dark:hover:bg-slate-800 ${displayOptions[`${$__displayType}`].layout === "wbw" ? "p-3" : "p-1"}`;
 
-  $: displayIsContinuous = displayOptions[`${$displayTypeStore}`].continuous;
+  $: displayIsContinuous = displayOptions[`${$__displayType}`].continuous;
 </script>
 
 <!-- words -->
 {#each { length: value.meta.words } as _, word}
-  {#if $currentPageStore != "page" || ($currentPageStore === "page" && +value.words.line.split("|")[word] === line)}
+  {#if $__currentPage != "page" || ($__currentPage === "page" && +value.words.line.split("|")[word] === line)}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div id={`${chapter}:${verse}:${word + 1}`} on:click={() => wordClickController(chapter, verse, word)} class="word {$displayTypeStore === 1 ? 'text-center flex flex-col' : 'inline-flex flex-col'} {wordClasses} {$audioSettingsStore.playingWordKey === `${chapter}:${verse}:${word + 1}` || $morphologyKey === `${chapter}:${verse}:${word + 1}` ? 'bg-[#ebebeb] dark:bg-slate-800' : ''}" style={$currentPageStore === "supplications" && word + 1 < supplicationsFromQuran[key] && "opacity: 30%;"} data-timestamp={timestampSplit[word]}>
-      <span class="{`arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText}`} {displayIsContinuous === true && 'inline-block group-hover:text-gray-500 dark:group-hover:text-slate-300'}" data-fontSize={fontSizes.arabicText}>
+    <div id={`${chapter}:${verse}:${word + 1}`} on:click={() => wordClickController(chapter, verse, word)} class="word {$__displayType === 1 ? 'text-center flex flex-col' : 'inline-flex flex-col'} {wordClasses} {$__audioSettings.playingWordKey === `${chapter}:${verse}:${word + 1}` || $__morphologyKey === `${chapter}:${verse}:${word + 1}` ? 'bg-[#ebebeb] dark:bg-slate-800' : ''}" style={$__currentPage === "supplications" && word + 1 < supplicationsFromQuran[key] && "opacity: 30%;"} data-timestamp={timestampSplit[word]}>
+      <span class="{`arabicText leading-normal arabic-font-${$__wordType} ${fontSizes.arabicText}`} {displayIsContinuous === true && 'inline-block group-hover:text-gray-500 dark:group-hover:text-slate-300'}" data-fontSize={fontSizes.arabicText}>
         <!-- 1: Uthmanic Hafs Digital, 3: Indopak Madinah -->
-        {#if $wordTypeStore === 1 || $wordTypeStore === 3}
+        {#if $__wordType === 1 || $__wordType === 3}
           {arabicSplit[word]}
           <!-- 2: Uthmanic Hafs Mushaf -->
-        {:else if $wordTypeStore === 2}
-          <span class="p{value.meta.page} {selectableThemes[$websiteThemeStore].palette === 1 && 'v4dark'} font-filter">{arabicSplit[word]}</span>
+        {:else if $__wordType === 2}
+          <span class="p{value.meta.page} {selectableThemes[$__websiteTheme].palette === 1 && 'v4dark'} font-filter">{arabicSplit[word]}</span>
         {/if}
       </span>
 
       <!-- word translation and transliteration -->
-      {#if $displayTypeStore === 1 || $displayTypeStore === 3}
+      {#if $__displayType === 1 || $__displayType === 3}
         <div class="wordTranslationText flex flex-col {fontSizes.wordTranslationText}" data-fontSize={fontSizes.wordTranslationText}>
-          <span class="leading-normal {$wordTransliterationEnabledStore === true ? 'block' : 'hidden'}">{transliterationSplit[word]}</span>
-          <span class="leading-normal {$wordTranslationEnabledStore === true ? 'block' : 'hidden'}">{translationSplit[word]}</span>
+          <span class="leading-normal {$__wordTransliterationEnabled === true ? 'block' : 'hidden'}">{transliterationSplit[word]}</span>
+          <span class="leading-normal {$__wordTranslationEnabled === true ? 'block' : 'hidden'}">{translationSplit[word]}</span>
         </div>
       {/if}
     </div>
@@ -61,13 +61,13 @@
 {/each}
 
 <!-- end icon -->
-{#if $currentPageStore != "page" || ($currentPageStore === "page" && value.words.end_line === line)}
-  <div class="{$displayTypeStore === 1 ? 'text-center flex flex-col' : 'inline-flex flex-col'} {wordClasses}">
-    <span class="{`arabicText leading-normal arabic-font-${$wordTypeStore} ${fontSizes.arabicText}`} {displayIsContinuous === true && 'inline-block group-hover:text-gray-500 dark:group-hover:text-slate-300'}" data-fontSize={fontSizes.arabicText}>
-      {#if $wordTypeStore === 1 || $wordTypeStore === 3}
+{#if $__currentPage != "page" || ($__currentPage === "page" && value.words.end_line === line)}
+  <div class="{$__displayType === 1 ? 'text-center flex flex-col' : 'inline-flex flex-col'} {wordClasses}">
+    <span class="{`arabicText leading-normal arabic-font-${$__wordType} ${fontSizes.arabicText}`} {displayIsContinuous === true && 'inline-block group-hover:text-gray-500 dark:group-hover:text-slate-300'}" data-fontSize={fontSizes.arabicText}>
+      {#if $__wordType === 1 || $__wordType === 3}
         {value.words.end}
-      {:else if $wordTypeStore === 2}
-        <span class="p{value.meta.page} {$websiteThemeStore === 2 && 'v4dark'}">{value.words.end}</span>
+      {:else if $__wordType === 2}
+        <span class="p{value.meta.page} {$__websiteTheme === 2 && 'v4dark'}">{value.words.end}</span>
       {/if}
     </span>
   </div>
diff --git a/src/data/options.js b/src/data/options.js
index 3e98fea9..9db35e5f 100644
--- a/src/data/options.js
+++ b/src/data/options.js
@@ -21,14 +21,14 @@ export const selectableThemes = {
 };
 
 export const verseTranslationsLanguages = {
-  1: { id: 1, language: "Arabic" },
-  2: { id: 2, language: "Bangla" },
-  3: { id: 3, language: "English" },
-  4: { id: 4, language: "Hindi" },
-  5: { id: 5, language: "Hindi Literal" },
-  6: { id: 6, language: "Indonesian" },
-  7: { id: 7, language: "Turkish" },
-  8: { id: 8, language: "Tamil" },
+  1: { id: 1, language: "Bangla" },
+  2: { id: 2, language: "English" },
+  3: { id: 3, language: "Hindi" },
+  4: { id: 4, language: "Hindi Literal" },
+  5: { id: 5, language: "Indonesian" },
+  6: { id: 6, language: "Tamil" },
+  7: { id: 7, language: "Transliteration" },
+  8: { id: 8, language: "Turkish" },
   9: { id: 9, language: "Urdu" },
   10: { id: 10, language: "Urdu Literal" },
 };
@@ -36,10 +36,16 @@ export const verseTranslationsLanguages = {
 export const selectableVerseTranslations = {
   1: {
     id: 1,
-    language: "Arabic",
-    author: "Transliteration (Tajweed)",
+    language: "Transliteration",
+    author: "Tajweed Transliteration",
     slug: "arb_transliteration_tajweed",
   },
+  2: {
+    id: 2,
+    language: "Transliteration",
+    author: "Transliteration",
+    slug: "transliteration_normal",
+  },
   10: {
     id: 10,
     language: "English",
diff --git a/src/utils/audioController.js b/src/utils/audioController.js
index 75a8fdc0..4b0a19e2 100644
--- a/src/utils/audioController.js
+++ b/src/utils/audioController.js
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import { quranMetaData } from "$data/quranMeta";
-import { displayTypeStore, reciterStore, playbackSpeedStore, audioSettingsStore } from "$utils/stores";
+import { __displayType, __reciter, __playbackSpeed, __audioSettings } from "$utils/stores";
 import { toggleModal } from "$utils/toggleModal";
 import { wordsAudioURL } from "$data/websiteSettings";
 import { displayOptions, selectableReciters, selectablePlaybackSpeeds } from "$data/options";
@@ -10,7 +10,7 @@ import { scrollSmoothly } from "$utils/scrollSmoothly";
 window.audio = document.querySelector("#player");
 
 // set global audio settings
-const audioSettings = get(audioSettingsStore);
+const audioSettings = get(__audioSettings);
 
 let verseTranslationPlayed = false;
 
@@ -40,7 +40,7 @@ export function playAudio(props) {
   // making the file name and getting the repeat times from localStorage
   else if (props.type === "verse") {
     // get the reciter URL from selectableReciters
-    let reciterAudioUrl = selectableReciters[get(reciterStore)].url;
+    let reciterAudioUrl = selectableReciters[get(__reciter)].url;
 
     // or if the user has opted to play the translation after arabic audio, the URL would have to be updated
     if (props.playTranslation === true) reciterAudioUrl = "https://everyayah.com/data/English/Sahih_Intnl_Ibrahim_Walk_192kbps/";
@@ -58,7 +58,7 @@ export function playAudio(props) {
   // load and play the audio
   audio.currentTime = 0;
   audio.load();
-  audio.playbackRate = selectablePlaybackSpeeds[get(playbackSpeedStore)].speed;
+  audio.playbackRate = selectablePlaybackSpeeds[get(__playbackSpeed)].speed;
   audio.play();
 
   // update the audio settings
@@ -137,7 +137,7 @@ export function playAudio(props) {
   };
 
   // update the audio settings
-  audioSettingsStore.set(audioSettings);
+  __audioSettings.set(audioSettings);
 }
 
 export function initializeAudio() {
@@ -157,7 +157,7 @@ export function initializeAudio() {
     audioSettings.endVerse = quranMetaData[audioSettings.playingChapter].verses;
   }
 
-  audioSettingsStore.set(audioSettings);
+  __audioSettings.set(audioSettings);
 
   playAudio({
     type: audioSettings.audioType === undefined ? "verse" : audioSettings.audioType,
@@ -224,7 +224,7 @@ export function updateAudioSettings(event) {
   }
 
   // 3. update the global audio settings
-  audioSettingsStore.set(audioSettings);
+  __audioSettings.set(audioSettings);
 
   // console.table(audioSettings);
 }
@@ -234,7 +234,7 @@ export function initializeAudioSettings(key) {
   audioSettings.playingKey = key;
   audioSettings.playingChapter = +audioSettings.playingKey.split(":")[0];
   audioSettings.playingVerse = +audioSettings.playingKey.split(":")[1];
-  audioSettingsStore.set(audioSettings);
+  __audioSettings.set(audioSettings);
 
   const chapterTotalVerses = quranMetaData[audioSettings.playingChapter].verses;
 
@@ -268,7 +268,7 @@ export function resetAudioSettings() {
   audio.pause();
   audio.currentTime = 0;
   audioSettings.isPlaying = false;
-  audioSettingsStore.set(audioSettings);
+  __audioSettings.set(audioSettings);
 
   // verseTranslationPlayed = false;
 
@@ -300,7 +300,7 @@ export function wordAudioController(props) {
   }
 
   // show audio modal for continuous display types
-  if (displayOptions[`${get(displayTypeStore)}`].continuous === true) {
+  if (displayOptions[`${get(__displayType)}`].continuous === true) {
     showAudioModal(`${props.chapter}:${props.verse}`);
   }
 
@@ -334,7 +334,7 @@ function wordHighlighter() {
   }
 
   // update the audio settings
-  audioSettingsStore.set(audioSettings);
+  __audioSettings.set(audioSettings);
 }
 
 function convertTime(time) {
diff --git a/src/utils/fetchChapterData.js b/src/utils/fetchChapterData.js
index d0d11ff3..275cecb5 100644
--- a/src/utils/fetchChapterData.js
+++ b/src/utils/fetchChapterData.js
@@ -1,5 +1,5 @@
 import { get } from "svelte/store";
-import { currentPageStore, wordTypeStore, chapterDataStore, wordTranslationStore, verseTranslationsStore } from "$utils/stores";
+import { __currentPage, __wordType, __chapterData, __wordTranslation, __verseTranslations } from "$utils/stores";
 import { apiEndpoint } from "$data/websiteSettings";
 import { quranMetaData } from "$data/quranMeta";
 
@@ -13,14 +13,14 @@ export async function fetchChapterData(chapter) {
     apiEndpoint +
     new URLSearchParams({
       verses: `${chapter}:1,${chapter}:${quranMetaData[chapter].verses}`,
-      word_type: get(wordTypeStore),
-      word_translation: get(wordTranslationStore),
-      verse_translation: get(verseTranslationsStore).toString(),
+      word_type: get(__wordType),
+      word_translation: get(__wordTranslation),
+      verse_translation: get(__verseTranslations).toString(),
       between: true,
     });
 
   // if the user is on homepage, just fetch the chapter data
-  if (get(currentPageStore) === "home") {
+  if (get(__currentPage) === "home") {
     fetch(apiURL);
   }
 
@@ -28,6 +28,6 @@ export async function fetchChapterData(chapter) {
   else {
     const response = await fetch(apiURL);
     const data = await response.json();
-    chapterDataStore.set(data.data.verses);
+    __chapterData.set(data.data.verses);
   }
 }
diff --git a/src/utils/parseURL.js b/src/utils/parseURL.js
index 96bbcc6c..3235fffb 100644
--- a/src/utils/parseURL.js
+++ b/src/utils/parseURL.js
@@ -1,12 +1,12 @@
 import { get } from "svelte/store";
 
-import { chapterNumberStore } from "$utils/stores";
+import { __chapterNumber } from "$utils/stores";
 import { quranMetaData } from "$data/quranMeta";
 
 // using SvelteKit would be better for routing, but this gets the job done for now
 // function to parse the URL to get the starting and ending verses
 export function parseURL() {
-  const chapterTotalVerses = quranMetaData[get(chapterNumberStore)].verses;
+  const chapterTotalVerses = quranMetaData[get(__chapterNumber)].verses;
 
   const url = window.location.pathname;
 
diff --git a/src/utils/stores.js b/src/utils/stores.js
index 82aedee5..152cd4ce 100644
--- a/src/utils/stores.js
+++ b/src/utils/stores.js
@@ -3,58 +3,61 @@ import { writable } from "svelte/store";
 const localSettings = JSON.parse(localStorage.getItem("userSettings"));
 
 // to store the current page
-export const currentPageStore = writable("home");
+export const __currentPage = writable("home");
 
 // to store the chapter number
-export const chapterNumberStore = writable(1);
+export const __chapterNumber = writable(1);
 
 // to store the chapter data fetched from the API
-export const chapterDataStore = writable(null);
+export const __chapterData = writable(null);
 
 // to store the local user settings from LocalStorage
-export const userSettingsStore = writable(JSON.stringify(localSettings));
+export const __userSettings = writable(JSON.stringify(localSettings));
 
 // to store the word type - Uthmani, IndoPak, etc...
-export const wordTypeStore = writable(localSettings.displaySettings.wordType);
+export const __wordType = writable(localSettings.displaySettings.wordType);
 
 // to store the word translation
-export const wordTranslationStore = writable(localSettings.translations.word);
+export const __wordTranslation = writable(localSettings.translations.word);
 
 // to store the verse translations
-export const verseTranslationsStore = writable(localSettings.translations.verse);
+export const __verseTranslations = writable(localSettings.translations.verse);
 
 // to store the word translation toggle
-export const wordTranslationEnabledStore = writable(localSettings.displaySettings.wordTranslationEnabled);
+export const __wordTranslationEnabled = writable(localSettings.displaySettings.wordTranslationEnabled);
 
 // to store the word transliteration toggle
-export const wordTransliterationEnabledStore = writable(localSettings.displaySettings.wordTransliterationEnabled);
+export const __wordTransliterationEnabled = writable(localSettings.displaySettings.wordTransliterationEnabled);
 
 // to store reciter
-export const reciterStore = writable(localSettings.audioSettings.reciter);
+export const __reciter = writable(localSettings.audioSettings.reciter);
 
 // to store playback speed
-export const playbackSpeedStore = writable(localSettings.audioSettings.playbackSpeed);
+export const __playbackSpeed = writable(localSettings.audioSettings.playbackSpeed);
 
 // to store the display type - WBW, Normal, Continuous, etc...
-export const displayTypeStore = writable(localSettings.displaySettings.displayType);
+export const __displayType = writable(localSettings.displaySettings.displayType);
 
 // to store the website theme
-export const websiteThemeStore = writable(localSettings.displaySettings.websiteTheme);
+export const __websiteTheme = writable(localSettings.displaySettings.websiteTheme);
 
 // to store the last read key
-export const lastReadStore = writable(localSettings.lastRead);
+export const __lastRead = writable(localSettings.lastRead);
+
+// to store the user's favourite chapters
+export const __favouriteChapters = writable(localSettings.favouriteChapters);
 
 // to store a random number (for now) when changing verses due to some issues while re-rendering the component (probably because I'm still learning Svelte)
-export const pageURLStore = writable(null);
+export const __pageURL = writable(null);
 
 // to store the toggle boolean for top navbar,
-export const topNavbarVisibleStore = writable(true);
+export const __topNavbarVisible = writable(true);
 
 // to store the toggle boolean for bottom navbar
-export const bottomNavbarVisibleStore = writable(true);
+export const __bottomNavbarVisible = writable(true);
 
 // to store all the audio settings
-export const audioSettingsStore = writable({
+export const __audioSettings = writable({
   isPlaying: false,
   timesToRepeat: 1,
   timesRepeated: 0,
@@ -62,4 +65,4 @@ export const audioSettingsStore = writable({
 });
 
 // to store the morphology verse/word key
-export const morphologyKey = writable(null);
+export const __morphologyKey = writable(null);
diff --git a/src/utils/toggleNavbar.js b/src/utils/toggleNavbar.js
index 9736615f..4961464b 100644
--- a/src/utils/toggleNavbar.js
+++ b/src/utils/toggleNavbar.js
@@ -1,27 +1,37 @@
 import { get } from "svelte/store";
-import { currentPageStore, topNavbarVisibleStore, bottomNavbarVisibleStore } from "$utils/stores";
+import { __currentPage, __topNavbarVisible, __bottomNavbarVisible } from "$utils/stores";
 
-let lastScrollTop = 0;
+let prevScrollpos = getCurrentScroll();
+let ticking = false;
 
 // function to toggle bottom navbar on scroll
 export function toggleNavbar() {
-  // only toggle the bottom navbar for chapter page
-  if (get(currentPageStore) === "chapter") {
-    // or window.addEventListener("scroll"....
-    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  if (get(__currentPage) === "chapter") {
+    let currentScrollPos = getCurrentScroll();
 
-    // scrolling down
-    if (scrollTop > lastScrollTop) {
-      topNavbarVisibleStore.set(false);
-      // bottomNavbarVisibleStore.set(false);
-    }
+    if (!ticking) {
+      window.requestAnimationFrame(function () {
+        // scrolling up
+        if (prevScrollpos > currentScrollPos) {
+          __topNavbarVisible.set(true);
+          __bottomNavbarVisible.set(true);
+        }
 
-    // scrolling up
-    else if (scrollTop < lastScrollTop) {
-      topNavbarVisibleStore.set(true);
-      // bottomNavbarVisibleStore.set(true);
-    }
+        // scrolling down
+        else {
+          __topNavbarVisible.set(false);
+          __bottomNavbarVisible.set(false);
+        }
+
+        prevScrollpos = currentScrollPos;
+        ticking = false;
+      });
 
-    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
+      ticking = true;
+    }
   }
 }
+
+function getCurrentScroll() {
+  return window.pageYOffset || document.documentElement.scrollTop;
+}
diff --git a/src/utils/updateSettings.js b/src/utils/updateSettings.js
index 88f6a72f..80178a67 100644
--- a/src/utils/updateSettings.js
+++ b/src/utils/updateSettings.js
@@ -1,4 +1,4 @@
-import { userSettingsStore, wordTypeStore, displayTypeStore, websiteThemeStore, wordTranslationStore, verseTranslationsStore, wordTranslationEnabledStore, wordTransliterationEnabledStore, reciterStore, playbackSpeedStore, lastReadStore } from "$utils/stores";
+import { __userSettings, __wordType, __displayType, __websiteTheme, __wordTranslation, __verseTranslations, __wordTranslationEnabled, __wordTransliterationEnabled, __reciter, __playbackSpeed, __lastRead } from "$utils/stores";
 import { selectableVerseTranslations } from "$data/options";
 
 // function to update website settings
@@ -9,19 +9,19 @@ export function updateSettings(props) {
   switch (props.type) {
     // for word types
     case "wordType":
-      wordTypeStore.set(props.value);
+      __wordType.set(props.value);
       userSettings.displaySettings.wordType = props.value;
       break;
 
     // for display types
     case "displayType":
-      displayTypeStore.set(props.value);
+      __displayType.set(props.value);
       userSettings.displaySettings.displayType = props.value;
       break;
 
     // for website theme
     case "websiteTheme":
-      websiteThemeStore.set(props.value);
+      __websiteTheme.set(props.value);
       userSettings.displaySettings.websiteTheme = props.value;
       document.documentElement.classList = "";
       document.documentElement.classList = `theme-${props.value}`;
@@ -29,19 +29,19 @@ export function updateSettings(props) {
 
     // for word translation view
     case "wordTranslationEnabled":
-      wordTranslationEnabledStore.set(props.value);
+      __wordTranslationEnabled.set(props.value);
       userSettings.displaySettings.wordTranslationEnabled = props.value;
       break;
 
     // for word transliteration view
     case "wordTransliterationEnabled":
-      wordTransliterationEnabledStore.set(props.value);
+      __wordTransliterationEnabled.set(props.value);
       userSettings.displaySettings.wordTransliterationEnabled = props.value;
       break;
 
     // for word translation
     case "wordTranslation":
-      wordTranslationStore.set(props.value);
+      __wordTranslation.set(props.value);
       userSettings.translations.word = props.value;
       break;
 
@@ -65,19 +65,19 @@ export function updateSettings(props) {
       // if the value is an array
       if (props.value instanceof Array) verseTranslationsArray = props.value;
 
-      verseTranslationsStore.set(verseTranslationsArray);
+      __verseTranslations.set(verseTranslationsArray);
       userSettings.translations.verse = verseTranslationsArray;
       break;
 
     // for verse reciter
     case "reciter":
-      reciterStore.set(props.value);
+      __reciter.set(props.value);
       userSettings.audioSettings.reciter = props.value;
       break;
 
     // for playback speed
     case "playbackSpeed":
-      playbackSpeedStore.set(props.value);
+      __playbackSpeed.set(props.value);
       userSettings.audioSettings.playbackSpeed = props.value;
       break;
 
@@ -105,7 +105,7 @@ export function updateSettings(props) {
 
     // for last read
     case "lastRead":
-      lastReadStore.set(props.value);
+      __lastRead.set(props.value);
       userSettings.lastRead = props.value;
       break;
 
@@ -147,6 +147,6 @@ export function updateSettings(props) {
   }
 
   // update the settings back into localStorage and global store
-  userSettingsStore.set(JSON.stringify(userSettings));
+  __userSettings.set(JSON.stringify(userSettings));
   localStorage.setItem("userSettings", JSON.stringify(userSettings));
 }
diff --git a/src/utils/userSettings.js b/src/utils/userSettings.js
index a399b4c1..56faf858 100644
--- a/src/utils/userSettings.js
+++ b/src/utils/userSettings.js
@@ -35,6 +35,9 @@
   // user bookmarks
   if (userSettings.userBookmarks === undefined) userSettings.userBookmarks = [];
 
+  // favourite chapters
+  if (userSettings.favouriteChapters === undefined) userSettings.favouriteChapters = [1, 5, 18];
+
   // Initial Setup
   if (userSettings.initialSetupCompleted === undefined) userSettings.initialSetupCompleted = false;
 
diff --git a/src/views/About.svelte b/src/views/About.svelte
index cb8a0692..f1d14a5d 100644
--- a/src/views/About.svelte
+++ b/src/views/About.svelte
@@ -1,10 +1,10 @@
 <script>
   import PageMeta from "$components/PageMeta.svelte";
   import { websiteURL } from "$data/websiteSettings";
-  import { currentPageStore } from "$utils/stores";
+  import { __currentPage } from "$utils/stores";
   import { linkElement } from "$utils/commonStyles";
 
-  currentPageStore.set("about");
+  __currentPage.set("about");
 </script>
 
 <PageMeta title={"About"} />
diff --git a/src/views/Bookmarks.svelte b/src/views/Bookmarks.svelte
index d1b2094f..826023ec 100644
--- a/src/views/Bookmarks.svelte
+++ b/src/views/Bookmarks.svelte
@@ -3,7 +3,7 @@
   import IndividualVerses from "$verses/IndividualVerses.svelte";
   import Spinner from "$svgs/Spinner.svelte";
   import { websiteURL, apiEndpoint } from "$data/websiteSettings";
-  import { currentPageStore, wordTypeStore, displayTypeStore, wordTranslationStore, verseTranslationsStore } from "$utils/stores";
+  import { __currentPage, __wordType, __displayType, __wordTranslation, __verseTranslations } from "$utils/stores";
 
   const userSettings = JSON.parse(localStorage.getItem("userSettings"));
   const userBookmarks = userSettings["userBookmarks"];
@@ -18,9 +18,9 @@
           apiEndpoint +
           new URLSearchParams({
             verses: userBookmarks.toString(),
-            word_type: $wordTypeStore,
-            word_translation: $wordTranslationStore,
-            verse_translation: $verseTranslationsStore.toString(),
+            word_type: $__wordType,
+            word_translation: $__wordTranslation,
+            verse_translation: $__verseTranslations.toString(),
           });
 
         const response = await fetch(apiURL);
@@ -30,10 +30,10 @@
     }
 
     // logging these for now to re-run the block on URL change
-    console.log($displayTypeStore, $wordTranslationStore, $verseTranslationsStore);
+    console.log($__displayType, $__wordTranslation, $__verseTranslations);
   }
 
-  currentPageStore.set("bookmarks");
+  __currentPage.set("bookmarks");
 </script>
 
 <PageMeta title={"Bookmarks"} />
diff --git a/src/views/Changelogs.svelte b/src/views/Changelogs.svelte
index e82eacbf..0703ef3a 100644
--- a/src/views/Changelogs.svelte
+++ b/src/views/Changelogs.svelte
@@ -2,7 +2,7 @@
   import PageMeta from "$components/PageMeta.svelte";
   import Spinner from "$svgs/Spinner.svelte";
   import { websiteURL } from "$data/websiteSettings";
-  import { currentPageStore } from "$utils/stores";
+  import { __currentPage } from "$utils/stores";
   import { timeAgo } from "$utils/timeAgo";
   import { linkElement } from "$utils/commonStyles";
 
@@ -17,7 +17,7 @@
     })();
   }
 
-  currentPageStore.set("changelogs");
+  __currentPage.set("changelogs");
 </script>
 
 <PageMeta title={"Changelogs"} />
diff --git a/src/views/Chapter.svelte b/src/views/Chapter.svelte
index 3fa3f77a..e7ba9520 100644
--- a/src/views/Chapter.svelte
+++ b/src/views/Chapter.svelte
@@ -9,7 +9,7 @@
   import { parseURL } from "$utils/parseURL";
   import { fetchChapterData } from "$utils/fetchChapterData";
   import { quranMetaData } from "$data/quranMeta";
-  import { currentPageStore, chapterNumberStore, displayTypeStore, wordTypeStore, wordTranslationStore, verseTranslationsStore, pageURLStore } from "$utils/stores";
+  import { __currentPage, __chapterNumber, __displayType, __wordType, __wordTranslation, __verseTranslations, __pageURL } from "$utils/stores";
   import { debounce } from "$utils/debounce";
   import { toggleNavbar } from "$utils/toggleNavbar";
 
@@ -21,11 +21,11 @@
   // fetch verses whenever there's a change
   $: {
     // updating the reactive chapter number
-    chapterNumberStore.set(+chapter);
+    __chapterNumber.set(+chapter);
 
-    const chapterTotalVerses = quranMetaData[$chapterNumberStore].verses;
+    const chapterTotalVerses = quranMetaData[$__chapterNumber].verses;
 
-    chapterData = fetchChapterData($chapterNumberStore);
+    chapterData = fetchChapterData($__chapterNumber);
 
     // getting start and end range incase we need to load specific verses
     (startVerse = parseURL()[0]), (endVerse = parseURL()[1]);
@@ -38,7 +38,7 @@
     }
 
     // logging these for now to re-run the block on URL change
-    console.log($pageURLStore, $displayTypeStore, $wordTypeStore, $wordTranslationStore, $verseTranslationsStore);
+    console.log($__pageURL, $__displayType, $__wordType, $__wordTranslation, $__verseTranslations);
   }
 
   // toggle bottom nav on scroll
@@ -46,7 +46,7 @@
     "scroll",
     () => {
       // toggle the navbars based on the scroll direction
-      debounce(toggleNavbar, 100);
+      debounce(toggleNavbar, 0);
     },
     {
       capture: true,
@@ -54,22 +54,22 @@
     }
   );
 
-  currentPageStore.set("chapter");
+  __currentPage.set("chapter");
 </script>
 
-<PageMeta title={`${quranMetaData[$chapterNumberStore].transliteration} (${$chapterNumberStore})`} />
+<PageMeta title={`${quranMetaData[$__chapterNumber].transliteration} (${$__chapterNumber})`} />
 
 <div>
   {#await chapterData}
     <Spinner height="screen" margin="-mt-20" />
   {:then}
     <!-- show Bismillah if chapter is not 1st or 9th -->
-    {#if ![1, 9].includes($chapterNumberStore)}
+    {#if ![1, 9].includes($__chapterNumber)}
       <Bismillah />
     {/if}
 
     <!-- need custom stylings if display type is 3 or 4 - continuous -->
-    <div id="verses-block" style={[3, 4].includes($displayTypeStore) && "text-align: center; direction: rtl;"}>
+    <div id="verses-block" style={[3, 4].includes($__displayType) && "text-align: center; direction: rtl;"}>
       <ChapterVerses {startVerse} {endVerse} />
     </div>
   {:catch error}
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
index 8bbed58f..2263e5ef 100644
--- a/src/views/Home.svelte
+++ b/src/views/Home.svelte
@@ -2,14 +2,14 @@
   import PageMeta from "$components/PageMeta.svelte";
   import { Link } from "svelte-routing";
   import { websiteTagline, websiteTitle } from "$data/websiteSettings";
-  import { currentPageStore, lastReadStore } from "$utils/stores";
+  import { __currentPage, __lastRead } from "$utils/stores";
   import Logo from "$svgs/Logo.svelte";
 
   import HomepageTabs from "$ui/HomepageTabs.svelte";
 
   const linkStyles = "py-2 px-2 text-xs cursor-pointer focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg hover:bg-[#ebebeb] dark:hover:bg-slate-700";
 
-  currentPageStore.set("home");
+  __currentPage.set("home");
 </script>
 
 <PageMeta title={`Quran ${websiteTagline}`} />
@@ -25,7 +25,7 @@
   <div class="flex flex-wrap flex-col md:flex-col mt-12 justify-center text-xs font-bold text-gray-400 space-y-4">
     <!-- last read link -->
     <!-- <div id="last-read-block" class="flex justify-center items-center block">
-      <Link to="/{$lastReadStore.split(':')[0]}/{$lastReadStore.split(':')[1]}" id="last-read-link" class={linkStyles}>Last Read ({$lastReadStore})</Link>
+      <Link to="/{$__lastRead.split(':')[0]}/{$__lastRead.split(':')[1]}" id="last-read-link" class={linkStyles}>Last Read ({$__lastRead})</Link>
     </div> -->
 
     <div class="flex flex-row flex-wrap space-x-1 md:space-x-2 justify-center">
diff --git a/src/views/Issues.svelte b/src/views/Issues.svelte
index 257d9ddb..634c7cb9 100644
--- a/src/views/Issues.svelte
+++ b/src/views/Issues.svelte
@@ -2,7 +2,7 @@
   import PageMeta from "$components/PageMeta.svelte";
   import Spinner from "$svgs/Spinner.svelte";
   import { websiteURL } from "$data/websiteSettings";
-  import { currentPageStore } from "$utils/stores";
+  import { __currentPage } from "$utils/stores";
   import { timeAgo } from "$utils/timeAgo";
   import { linkElement, labelPillElement } from "$utils/commonStyles";
 
@@ -17,7 +17,7 @@
     })();
   }
 
-  currentPageStore.set("issues");
+  __currentPage.set("issues");
 </script>
 
 <PageMeta title={"Issues"} />
diff --git a/src/views/Morphology.svelte b/src/views/Morphology.svelte
index a49428b8..f20b9762 100644
--- a/src/views/Morphology.svelte
+++ b/src/views/Morphology.svelte
@@ -8,7 +8,7 @@
   import MorphologyTable from "$morphology/MorphologyTable.svelte";
   import { quranMetaData } from "$data/quranMeta";
   import { websiteTitle, apiEndpoint } from "$data/websiteSettings";
-  import { currentPageStore, wordTypeStore, wordTranslationStore, verseTranslationsStore, morphologyKey } from "$utils/stores";
+  import { __currentPage, __wordType, __wordTranslation, __verseTranslations, __morphologyKey } from "$utils/stores";
   import { tabPillElement } from "$utils/commonStyles";
 
   let fetchData, fetchWordsData, fetchWordSummary;
@@ -22,7 +22,7 @@
 
     if (isNaN(word)) word = 1;
 
-    morphologyKey.set(`${chapter}:${verse}:${word}`);
+    __morphologyKey.set(`${chapter}:${verse}:${word}`);
   }
 
   // fetch verses whenever there's a change
@@ -32,9 +32,9 @@
         apiEndpoint +
         new URLSearchParams({
           verses: `${chapter}:${verse}`,
-          word_type: $wordTypeStore,
-          word_translation: $wordTranslationStore,
-          verse_translation: $verseTranslationsStore.toString(),
+          word_type: $__wordType,
+          word_translation: $__wordTranslation,
+          verse_translation: $__verseTranslations.toString(),
         });
 
       const response = await fetch(apiURL);
@@ -46,7 +46,7 @@
   // fetch words
   $: {
     fetchWordsData = (async () => {
-      const response = await fetch(`https://api.quranwbw.com/v1/morphology?words=${$morphologyKey}`);
+      const response = await fetch(`https://api.quranwbw.com/v1/morphology?words=${$__morphologyKey}`);
       const data = await response.json();
       return data.data;
     })();
@@ -55,16 +55,16 @@
   // fetch word summary
   $: {
     fetchWordSummary = (async () => {
-      const response = await fetch(`https://api.quranwbw.com/v1/morphology/summary?word=${$morphologyKey}`);
+      const response = await fetch(`https://api.quranwbw.com/v1/morphology/summary?word=${$__morphologyKey}`);
       const data = await response.json();
       return data.data;
     })();
   }
 
-  currentPageStore.set("morphology");
+  __currentPage.set("morphology");
 </script>
 
-<PageMeta title={`Morphology (${$morphologyKey})`} />
+<PageMeta title={`Morphology (${$__morphologyKey})`} />
 
 <div class="space-y-12 my-8">
   <div id="verse-navigator" class="flex flex-row justify-center space-x-8">
@@ -119,7 +119,7 @@
                   {#if value !== null}
                     <div class="flex flex-col py-5 duration-300 transform bg-white border rounded-lg shadow-sm text-center hover:-translate-y-2">
                       <div class="flex items-center justify-center mb-2">
-                        <p id="verb-1" class="text-xl md:text-2xl pb-4 leading-5 arabic-font-{$wordTypeStore}">{value}</p>
+                        <p id="verb-1" class="text-xl md:text-2xl pb-4 leading-5 arabic-font-{$__wordType}">{value}</p>
                       </div>
                       <p class="text-xs text-gray-900">{key}</p>
                     </div>
diff --git a/src/views/Page.svelte b/src/views/Page.svelte
index a456fc0b..0a48a80f 100644
--- a/src/views/Page.svelte
+++ b/src/views/Page.svelte
@@ -5,7 +5,7 @@
   import { Link } from "svelte-routing";
   import VersesWords from "$verses/VersesWords.svelte";
   import Spinner from "$svgs/Spinner.svelte";
-  import { currentPageStore, wordTypeStore } from "$utils/stores";
+  import { __currentPage, __wordType } from "$utils/stores";
   import { updateSettings } from "$utils/updateSettings";
   import { quranMetaData } from "$data/quranMeta";
   import { tabPillElement, disabledElement } from "$utils/commonStyles";
@@ -33,7 +33,7 @@
     fetchData = (async () => {
       // const apiHost = "http://localhost:7500";
       const apiHost = "https://api.quranwbw.com";
-      const apiURL = `${apiHost}/v1/page?page=${page}&word_type=${$wordTypeStore}&word_translation=1`;
+      const apiURL = `${apiHost}/v1/page?page=${page}&word_type=${$__wordType}&word_translation=1`;
       const response = await fetch(apiURL);
       const data = await response.json();
       const apiData = data.data.verses;
@@ -80,7 +80,7 @@
     console.log(centeredPageLines[+page]);
   }
 
-  currentPageStore.set("page");
+  __currentPage.set("page");
 </script>
 
 <PageMeta title={`Page ${page}`} />
@@ -107,7 +107,7 @@
           </div>
         {/if}
 
-        <div class="line {line} px-2 arabic-font-{$wordTypeStore} {+page > 2 && centeredPageLines[+page] === undefined ? 'flex justify-between' : ''} {centeredPageLines[+page] !== undefined && centeredPageLines[+page].includes(line) ? 'flex justify-center' : ''}">
+        <div class="line {line} px-2 arabic-font-{$__wordType} {+page > 2 && centeredPageLines[+page] === undefined ? 'flex justify-between' : ''} {centeredPageLines[+page] !== undefined && centeredPageLines[+page].includes(line) ? 'flex justify-center' : ''}">
           {#each Object.entries(JSON.parse(localStorage.getItem("pageData"))) as [key, value]}
             <VersesWords {key} {value} {line} />
           {/each}
diff --git a/src/views/Search.svelte b/src/views/Search.svelte
index 04188f7f..0069fe3f 100644
--- a/src/views/Search.svelte
+++ b/src/views/Search.svelte
@@ -5,7 +5,7 @@
   import { websiteURL } from "$data/websiteSettings";
   import { searchableTranslations } from "$data/searchableTranslations";
   import { quranMetaData } from "$data/quranMeta";
-  import { currentPageStore } from "$utils/stores";
+  import { __currentPage } from "$utils/stores";
   import { linkElement } from "$utils/commonStyles";
 
   let fetchData;
@@ -38,7 +38,7 @@
     return verseText.replace(pattern, "<b>$1</b>");
   }
 
-  currentPageStore.set("search");
+  __currentPage.set("search");
 </script>
 
 <PageMeta title={"Search"} />
diff --git a/src/views/Supplications.svelte b/src/views/Supplications.svelte
index 876ecff3..5f84cfb2 100644
--- a/src/views/Supplications.svelte
+++ b/src/views/Supplications.svelte
@@ -3,7 +3,7 @@
   import IndividualVerses from "$verses/IndividualVerses.svelte";
   import Spinner from "$svgs/Spinner.svelte";
   import { websiteURL, apiEndpoint } from "$data/websiteSettings";
-  import { currentPageStore, wordTypeStore, displayTypeStore, wordTranslationStore, verseTranslationsStore } from "$utils/stores";
+  import { __currentPage, __wordType, __displayType, __wordTranslation, __verseTranslations } from "$utils/stores";
   import { getSupplicationKeys } from "$utils/getSupplicationKeys";
 
   let fetchData;
@@ -15,9 +15,9 @@
         apiEndpoint +
         new URLSearchParams({
           verses: getSupplicationKeys(),
-          word_type: $wordTypeStore,
-          word_translation: $wordTranslationStore,
-          verse_translation: $verseTranslationsStore.toString(),
+          word_type: $__wordType,
+          word_translation: $__wordTranslation,
+          verse_translation: $__verseTranslations.toString(),
         });
 
       const response = await fetch(apiURL);
@@ -26,10 +26,10 @@
     })();
 
     // logging these for now to re-run the block on URL change
-    console.log($displayTypeStore, $wordTranslationStore, $verseTranslationsStore);
+    console.log($__displayType, $__wordTranslation, $__verseTranslations);
   }
 
-  currentPageStore.set("supplications");
+  __currentPage.set("supplications");
 </script>
 
 <PageMeta title={"Supplications From Quran"} />