diff --git a/booklore-ui/src/app/book/components/epub-viewer/component/epub-viewer.component.html b/booklore-ui/src/app/book/components/epub-viewer/component/epub-viewer.component.html
index 6789e5676..f1beda23e 100644
--- a/booklore-ui/src/app/book/components/epub-viewer/component/epub-viewer.component.html
+++ b/booklore-ui/src/app/book/components/epub-viewer/component/epub-viewer.component.html
@@ -29,14 +29,14 @@
             }
             <div>
               <p-button size="small" class="settings-toggle-button" (click)="toggleSettingsDrawer()" icon="pi pi-cog" severity="secondary"></p-button>
-              <p-drawer [(visible)]="isSettingsDrawerVisible" [modal]="true" [position]="'right'"  header="Settings">
+              <p-drawer [(visible)]="isSettingsDrawerVisible" [modal]="true" [position]="'right'" header="Settings">
                 <div class="flex flex-col gap-4 max-w-md mx-auto">
 
                   <div class="flex items-center gap-4">
-                    <span class="font-semibold text-gray-700 dark:text-gray-200">Font Size:</span>
+                    <span class="font-semibold text-gray-200">Font Size:</span>
                     <div class="flex items-center gap-2">
                       <p-button size="small" icon="pi pi-minus" (click)="decreaseFontSize()" severity="info"></p-button>
-                      <span class="text-gray-800 dark:text-gray-100">{{ fontSize }}%</span>
+                      <span class="text-gray-100">{{ fontSize }}%</span>
                       <p-button size="small" icon="pi pi-plus" (click)="increaseFontSize()" severity="info"></p-button>
                     </div>
                   </div>
@@ -44,7 +44,7 @@
                   <p-divider></p-divider>
 
                   <div class="flex items-center gap-2">
-                    <label for="font-type" class="block font-semibold text-gray-700 dark:text-gray-200">Font:</label>
+                    <label for="font-type" class="block font-semibold text-gray-200">Font:</label>
                     <p-select
                       id="font-type"
                       [options]="fontTypes"
@@ -58,7 +58,7 @@
                   <p-divider></p-divider>
 
                   <div class="flex gap-2 items-center">
-                    <label class="block font-semibold text-gray-700 dark:text-gray-200">Theme:</label>
+                    <label class="block font-semibold text-gray-200">Theme:</label>
                     <div class="flex gap-3 mt-1" role="radiogroup" aria-label="Theme selection">
                       @for (theme of themes; track theme) {
                         <button
@@ -77,7 +77,7 @@
                   <p-divider></p-divider>
 
                   <div class="flex items-center gap-2">
-                    <label id="flow-label" class="block font-semibold text-gray-700 dark:text-gray-200">Flow:</label>
+                    <label id="flow-label" class="block font-semibold text-gray-200">Flow:</label>
                     <div class="flex gap-4" role="radiogroup" aria-labelledby="flow-label">
                       <div class="flex items-center gap-1.5">
                         <p-radioButton
@@ -87,7 +87,7 @@
                           (onClick)="changeScrollMode()"
                           inputId="flow-paginated">
                         </p-radioButton>
-                        <label for="flow-paginated" class="cursor-pointer select-none text-gray-700 dark:text-gray-200">Paginated</label>
+                        <label for="flow-paginated" class="cursor-pointer select-none text-gray-200">Paginated</label>
                       </div>
                       <div class="flex items-center gap-1.5">
                         <p-radioButton
@@ -97,7 +97,7 @@
                           (onClick)="changeScrollMode()"
                           inputId="flow-scrolled">
                         </p-radioButton>
-                        <label for="flow-scrolled" class="cursor-pointer select-none text-gray-700 dark:text-gray-200">Scrolled</label>
+                        <label for="flow-scrolled" class="cursor-pointer select-none text-gray-200">Scrolled</label>
                       </div>
                     </div>
                   </div>
@@ -105,7 +105,7 @@
                   <p-divider></p-divider>
 
                   <div>
-                    <label class="block mb-1 font-semibold text-gray-700 dark:text-gray-200 pb-2">Line Height: {{ lineHeight }}</label>
+                    <label class="block mb-1 font-semibold text-gray-200 pb-2">Line Height: {{ lineHeight }}</label>
                     <p-slider
                       [(ngModel)]="lineHeight"
                       [min]="1"
@@ -118,7 +118,7 @@
                   </div>
 
                   <div>
-                    <label class="block mb-1 font-semibold text-gray-700 dark:text-gray-200 pb-2 pt-2">Letter Spacing: {{ letterSpacing }}em</label>
+                    <label class="block mb-1 font-semibold text-gray-200 pb-2 pt-2">Letter Spacing: {{ letterSpacing }}em</label>
                     <p-slider
                       [(ngModel)]="letterSpacing"
                       [min]="0"