diff --git a/astro.config.ts b/astro.config.ts
index 7aa41a3..e5d2549 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -43,7 +43,7 @@ export default defineConfig({
         globIgnores: ["**/_worker.js/**"]
       },
       devOptions: {
-        enabled: false,
+        enabled: true,
         type: "module"
         /* other options */
       }
diff --git a/src/components/ReaderMenu/ReaderMenu.tsx b/src/components/ReaderMenu/ReaderMenu.tsx
index 5c91ceb..05a53cb 100644
--- a/src/components/ReaderMenu/ReaderMenu.tsx
+++ b/src/components/ReaderMenu/ReaderMenu.tsx
@@ -3,7 +3,8 @@ import {
   Show,
   batch,
   type Setter,
-  createResource
+  createResource,
+  Suspense
 } from "solid-js";
 import { SvgSettings, SvgBook, SvgArrow } from "@components/Icons/Icons";
 import { BookList } from "./BookList";
@@ -16,8 +17,8 @@ import {
 } from "@lib/utils-ui";
 import { Dialog } from "@kobalte/core";
 // https://github.com/solidjs/solid/discussions/845
-clickOutside //retain module to keep typescript from stripping out; 
-escapeOut //retain module; 
+clickOutside; //retain module to keep typescript from stripping out;
+escapeOut; //retain module;
 
 import { translator, resolveTemplate } from "@solid-primitives/i18n";
 import type { Component } from "solid-js";
@@ -280,7 +281,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
   }
 
   return (
-    <div class="mx-auto  bg-white">
+    <div class="mx-auto bg-white">
       <div
         class="mx-auto w-full"
         on:changelanguage={(
@@ -296,10 +297,10 @@ const ReaderMenu: Component<MenuProps> = (props) => {
           use:escapeOut={() => setMenuIsOpen(false)}
           class="mx-auto flex w-full flex-wrap items-center bg-[--clrBackground]"
         >
-          <div class="relative mx-auto flex w-full max-w-[75ch] items-center  justify-between gap-3  bg-white p-3 text-varBase sm:px-8 print:hidden ">
-            <div class="flex w-full justify-between overflow-hidden  rounded-lg bg-white outline outline-1 outline-gray-300 focus-within:outline-2 focus-within:outline-accent">
+          <div class="relative mx-auto flex w-full max-w-[75ch] items-center justify-between gap-3 bg-white p-3 text-varBase sm:px-8 print:hidden">
+            <div class="flex w-full justify-between overflow-hidden rounded-lg bg-white outline outline-1 outline-gray-300 focus-within:outline-2 focus-within:outline-accent">
               <button
-                class="flex h-12 w-full flex-grow items-center justify-between rounded-md  hover:bg-gray-100 ltr:pl-4 rtl:pr-4"
+                class="flex h-12 w-full flex-grow items-center justify-between rounded-md hover:bg-gray-100 ltr:pl-4 rtl:pr-4"
                 onClick={() => togglePanel()}
               >
                 <span class="flex items-center">
@@ -310,7 +311,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
                 </span>
 
                 <span
-                  class="menuNumberInput w-[5ch] border-l border-gray-200  py-2 text-center "
+                  class="menuNumberInput w-[5ch] border-l border-gray-200 py-2 text-center"
                   data-testid="chapterNavigation"
                 >
                   {props.storeInterface.getStoreVal("currentChapter")}
@@ -335,12 +336,12 @@ const ReaderMenu: Component<MenuProps> = (props) => {
                   style={{
                     top: topAmount()
                   }}
-                  class="fixed left-1/2  z-50 w-full max-w-[calc(75ch+2rem)] -translate-x-1/2 transform text-varBase"
+                  class="fixed left-1/2 z-50 w-full max-w-[calc(75ch+2rem)] -translate-x-1/2 transform text-varBase"
                   data-title="dialog__positioner"
                 >
                   <Dialog.Content class="" data-title="dialog__content">
                     {/* ===============  shared   =============   */}
-                    <div class="bg-white ">
+                    <div class="bg-white">
                       <div class="border-netural-200 flex content-center border-b p-4">
                         <Dialog.CloseButton
                           class=""
@@ -370,7 +371,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
                           {/* Books */}
                           <div class="border-netural-200 w-2/5 border-r">
                             <div class="w-full">
-                              <div class="mt-2  pt-2">
+                              <div class="mt-2 pt-2">
                                 <div class="">
                                   <label for="" class="relative block p-4">
                                     <input
@@ -385,7 +386,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
                                       placeholder={t("searchBooks")}
                                       value={searchQuery()}
                                     />
-                                    <span class="absolute top-1/2 inline-block w-6 transform ltr:left-8 ltr:-translate-y-1/2 rtl:right-8  rtl:translate-y-1/2">
+                                    <span class="absolute top-1/2 inline-block w-6 transform ltr:left-8 ltr:-translate-y-1/2 rtl:right-8 rtl:translate-y-1/2">
                                       <IconMagnifyingGlass />
                                     </span>
                                   </label>
@@ -416,16 +417,16 @@ const ReaderMenu: Component<MenuProps> = (props) => {
                       {/* ===============  mobile menu   =============   */}
                       <div
                         id="mobileMenu"
-                        class=" z-10 h-full   w-full  overflow-y-scroll bg-white sm:hidden "
+                        class="z-10 h-full w-full overflow-y-scroll bg-white sm:hidden"
                       >
-                        <ul class="flex justify-between ">
+                        <ul class="flex justify-between">
                           <li class="w-full text-center">
                             <button
                               class={`${
                                 mobileTabOpen() == "book"
                                   ? "w-full border-b-2 border-b-accent font-bold text-accent"
                                   : "underline"
-                              }  py-3 text-xl capitalize`}
+                              } py-3 text-xl capitalize`}
                               onClick={() => {
                                 setMobileTabOpen("book");
                               }}
@@ -463,7 +464,7 @@ const ReaderMenu: Component<MenuProps> = (props) => {
                                 placeholder={t("searchBooks")}
                                 value={searchQuery()}
                               />
-                              <span class="absolute top-1/2 inline-block w-6 transform ltr:left-8 ltr:-translate-y-1/2 rtl:right-8  rtl:translate-y-1/2">
+                              <span class="absolute top-1/2 inline-block w-6 transform ltr:left-8 ltr:-translate-y-1/2 rtl:right-8 rtl:translate-y-1/2">
                                 <IconMagnifyingGlass />
                               </span>
                             </label>
@@ -500,32 +501,34 @@ const ReaderMenu: Component<MenuProps> = (props) => {
 
             {/* //!END table and up menu */}
             <div class="w-1/5 print:hidden">
-              <div class=" relative w-max rounded-md ltr:ml-auto rtl:mr-auto ">
+              <div class="relative w-max rounded-md ltr:ml-auto rtl:mr-auto">
                 <button
-                  class="rounded   px-5  py-2 text-slate-700  hover:bg-gray-100 focus:outline-2 focus:outline-accent"
+                  class="rounded px-5 py-2 text-slate-700 hover:bg-gray-100 focus:outline-2 focus:outline-accent"
                   aria-label={t("openSettings")}
                   onClick={manageOpenSettings}
                 >
                   <SvgSettings classNames="" />
                 </button>
-                <Show when={savedInServiceWorker() && settingsAreOpen()}>
-                  <Settings
-                    settingsAreOpen={settingsAreOpen}
-                    setSettingsOpen={setSettingsAreOpen}
-                    topAmount={topAmount}
-                    repoIndex={props.repoIndex}
-                    storeInterface={props.storeInterface}
-                    savedInServiceWorker={savedInServiceWorker}
-                    user={props.user}
-                    repo={props.repositoryName}
-                    refetchSwResponses={refetch}
-                    setPrintWholeBook={props.setPrintWholeBook}
-                    downloadSourceUsfmArr={props.storeInterface.getStoreVal(
-                      "downloadLinks"
-                    )}
-                    t={t}
-                  />
-                </Show>
+                <Suspense>
+                  <Show when={savedInServiceWorker() && settingsAreOpen()}>
+                    <Settings
+                      settingsAreOpen={settingsAreOpen}
+                      setSettingsOpen={setSettingsAreOpen}
+                      topAmount={topAmount}
+                      repoIndex={props.repoIndex}
+                      storeInterface={props.storeInterface}
+                      savedInServiceWorker={savedInServiceWorker}
+                      user={props.user}
+                      repo={props.repositoryName}
+                      refetchSwResponses={refetch}
+                      setPrintWholeBook={props.setPrintWholeBook}
+                      downloadSourceUsfmArr={props.storeInterface.getStoreVal(
+                        "downloadLinks"
+                      )}
+                      t={t}
+                    />
+                  </Show>
+                </Suspense>
               </div>
             </div>
           </div>
diff --git a/src/components/Settings/OfflineSection.tsx b/src/components/Settings/OfflineSection.tsx
index f8a691a..c033b47 100644
--- a/src/components/Settings/OfflineSection.tsx
+++ b/src/components/Settings/OfflineSection.tsx
@@ -192,7 +192,7 @@ export function OfflineSection(props: IOfflineSection) {
       <Show when={saveProgress().isSaving}>
         <Progress.Root
           value={saveProgress().amountNum}
-          class="flex w-full flex-col gap-2 "
+          class="flex w-full flex-col gap-2"
           data-title="progress"
         >
           <div
@@ -209,7 +209,7 @@ export function OfflineSection(props: IOfflineSection) {
             </Progress.Label>
           </div>
           <Progress.Track
-            class="block  h-2 rounded-full bg-accent/10"
+            class="block h-2 rounded-full bg-accent/10"
             data-title="progress__track"
           >
             <Progress.Fill
@@ -444,7 +444,7 @@ async function saveSingleBookToSwCache({
       // add to api
       const { apiReq, apiRes } = getApiUrlAndResponse({
         bookSlug,
-        chapter: currentChapter,
+        chapter: chapter.number,
         content,
         lastRendered: repoIndex.lastRendered,
         repo,
diff --git a/src/lib/routes.ts b/src/lib/routes.ts
index f2a2310..6f88b2a 100644
--- a/src/lib/routes.ts
+++ b/src/lib/routes.ts
@@ -1,4 +1,3 @@
-const devUrl = import.meta.env.PUBLIC_FUNCTIONS_API_BASE;
 let base: string | undefined;
 
 interface getRepoHtmlType {