diff --git a/components/readers/Reader.vue b/components/readers/Reader.vue
index 5168113a..0fcb295f 100644
--- a/components/readers/Reader.vue
+++ b/components/readers/Reader.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=black]:bg-black data-[theme=black]:text-white data-[theme=dark]:bg-[#232323] data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
     <!-- toolbar -->
-    <div class="h-32 pt-10 w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-fg" :class="showingToolbar ? 'translate-y-0' : '-translate-y-32'" :style="{ boxShadow: showingToolbar ? '0px 8px 8px #11111155' : '' }" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
+    <div class="w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-fg" :class="`${showingToolbar ? 'translate-y-0' : '-translate-y-36'} ${isIos ? 'pt-14 h-36' : 'pt-10 h-32'}`" :style="{ boxShadow: showingToolbar ? '0px 8px 8px #11111155' : '' }" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
       <div class="flex items-center mb-2">
         <button type="button" class="inline-flex mx-2" @click.stop="show = false">
           <span class="material-symbols text-3xl text-fg">chevron_left</span>
@@ -187,6 +187,9 @@ export default {
         this.$store.commit('setShowReader', val)
       }
     },
+    isIos() {
+      return this.$platform === 'ios'
+    },
     title() {
       return this.mediaMetadata.title || 'No Title'
     },