diff --git a/android/app/src/main/java/com/audiobookshelf/app/MediaPlayerWidget.kt b/android/app/src/main/java/com/audiobookshelf/app/MediaPlayerWidget.kt
index e779d5f5..6a458907 100644
--- a/android/app/src/main/java/com/audiobookshelf/app/MediaPlayerWidget.kt
+++ b/android/app/src/main/java/com/audiobookshelf/app/MediaPlayerWidget.kt
@@ -76,7 +76,7 @@ class MediaPlayerWidget : AppWidgetProvider() {
 internal fun updateAppWidget(context: Context, appWidgetManager: AppWidgetManager, appWidgetId: Int, playbackSession: PlaybackSession?, isPlaying:Boolean, isAppClosed:Boolean) {
   val tag = "MediaPlayerWidget"
   val views = RemoteViews(context.packageName, R.layout.media_player_widget)
-
+Log.d(tag, "updateAppWidget ${playbackSession?.displayTitle ?: "No Title"} isPlaying=$isPlaying isAppClosed=$isAppClosed")
   val wholeWidgetClickI = Intent(context, MainActivity::class.java)
   wholeWidgetClickI.flags = Intent.FLAG_ACTIVITY_CLEAR_TOP or Intent.FLAG_ACTIVITY_NEW_TASK
   val wholeWidgetClickPI = PendingIntent.getActivity(
diff --git a/components/readers/EpubReader.vue b/components/readers/EpubReader.vue
index 72190eb9..211b4059 100644
--- a/components/readers/EpubReader.vue
+++ b/components/readers/EpubReader.vue
@@ -2,7 +2,7 @@
   <div id="epub-frame" class="w-full">
     <div id="viewer" class="h-full w-full"></div>
 
-    <div class="fixed left-0 h-8 w-full bg-bg px-2 flex items-center" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full bg-primary px-2 flex items-center" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
       <p class="text-xs">epub</p>
       <div class="flex-grow" />
 
@@ -251,7 +251,7 @@ export default {
       reader.rendition.display(this.userItemProgress?.ebookLocation || reader.book.locations.start)
 
       // load style
-      reader.rendition.themes.default({ '*': { color: '#fff!important' } })
+      reader.rendition.themes.default({ '*': { color: '#fff!important', 'background-color': 'rgb(35 35 35)!important' } })
 
       reader.book.ready.then(() => {
         // set up event listeners
diff --git a/components/readers/MobiReader.vue b/components/readers/MobiReader.vue
index df3d8e4e..45ac0bbd 100644
--- a/components/readers/MobiReader.vue
+++ b/components/readers/MobiReader.vue
@@ -3,7 +3,7 @@
     <div class="absolute overflow-hidden left-0 right-0 w-full max-w-full m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
       <iframe title="html-viewer" class="w-full overflow-hidden"> Loading </iframe>
     </div>
-    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center z-20" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
+    <div class="fixed bottom-0 left-0 h-8 w-full bg-primary px-2 flex items-center z-20" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
       <p class="text-xs">mobi</p>
       <div class="flex-grow" />
     </div>
@@ -119,14 +119,14 @@ export default {
 
 <style>
 .mobi-ebook-viewer {
-  height: calc(100% - 52px);
-  max-height: calc(100% - 52px);
+  height: calc(100% - 32px);
+  max-height: calc(100% - 32px);
   overflow-x: hidden;
   overflow-y: auto;
 }
 .reader-player-open .mobi-ebook-viewer {
-  height: calc(100% - 152px);
-  max-height: calc(100% - 152px);
+  height: calc(100% - 132px);
+  max-height: calc(100% - 132px);
   overflow-x: hidden;
   overflow-y: auto;
 }
diff --git a/components/readers/Reader.vue b/components/readers/Reader.vue
index ef4f34ad..a7814d19 100644
--- a/components/readers/Reader.vue
+++ b/components/readers/Reader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div v-if="show" class="absolute top-0 left-0 w-full h-full bg-bg z-40 pt-16" :class="{ 'reader-player-open': !!playerLibraryItemId }">
-    <div class="h-16 pt-8 w-full bg-primary flex items-center px-2 fixed top-0 left-0 z-30 box-shadow-sm">
+  <div v-if="show" class="absolute top-0 left-0 w-full h-full bg-primary z-40 pt-18" :class="{ 'reader-player-open': !!playerLibraryItemId }">
+    <div class="h-18 pt-10 w-full flex bg-bg items-center px-2 fixed top-0 left-0 z-30">
       <p class="w-5/6 truncate">{{ title }}</p>
       <div class="flex-grow" />
       <span class="material-icons text-xl text-white" @click.stop="show = false">close</span>
diff --git a/tailwind.config.js b/tailwind.config.js
index 714690d0..b374913a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,7 +20,7 @@ module.exports = {
         bg: '#373838',
         secondary: '#2F3030',
         yellowgreen: 'yellowgreen',
-        primary: '#262626',
+        primary: '#232323',
         accent: '#1ad691',
         error: '#FF5252',
         info: '#2196F3',
@@ -38,6 +38,12 @@ module.exports = {
       fontSize: {
         xxs: '0.625rem'
       },
+      spacing: {
+        '18': '4.5rem'
+      },
+      height: {
+        '18': '4.5rem'
+      },
       maxWidth: {
         '24': '6rem'
       },