diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index d54ab791..c4d3e967 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -325,8 +325,13 @@ export default {
       if (this.episodeProgress) return this.episodeProgress
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
+    useEBookProgress() {
+      if (!this.userProgress || this.userProgress.progress) return false
+      return this.userProgress.ebookProgress > 0
+    },
     userProgressPercent() {
-      return this.userProgress ? this.userProgress.progress || 0 : 0
+      if (this.useEBookProgress) return Math.max(Math.min(1, this.userProgress.ebookProgress), 0)
+      return this.userProgress ? Math.max(Math.min(1, this.userProgress.progress), 0) || 0 : 0
     },
     itemIsFinished() {
       return this.userProgress ? !!this.userProgress.isFinished : false
diff --git a/client/components/readers/EpubReader.vue b/client/components/readers/EpubReader.vue
index 9c19c3ec..8e7d016c 100644
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@@ -2,17 +2,13 @@
   <div class="h-full w-full">
     <div class="h-full flex items-center">
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center overflow-x-hidden justify-center">
-        <span v-show="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
+        <span v-if="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
       </div>
-      <div id="frame" class="w-full" style="height: 650px">
-        <div id="viewer" class="border border-gray-100 bg-white shadow-md"></div>
-
-        <div class="py-4 flex justify-center" style="height: 50px">
-          <p>{{ progress }}%</p>
-        </div>
+      <div id="frame" class="w-full" style="height: 80%">
+        <div id="viewer"></div>
       </div>
       <div style="width: 100px; max-width: 100px" class="h-full flex items-center justify-center overflow-x-hidden">
-        <span v-show="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
+        <span v-if="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
       </div>
     </div>
   </div>
@@ -21,104 +17,137 @@
 <script>
 import ePub from 'epubjs'
 
+/**
+ * @typedef {object} EpubReader
+ * @property {ePub.Book} book
+ * @property {ePub.Rendition} rendition
+ */
 export default {
   props: {
-    url: String
+    url: String,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
   },
   data() {
     return {
+      /** @type {ePub.Book} */
       book: null,
-      rendition: null,
-      chapters: [],
-      title: '',
-      author: '',
-      progress: 0,
-      hasNext: true,
-      hasPrev: false
+      /** @type {ePub.Rendition} */
+      rendition: null
     }
   },
-  computed: {},
-  methods: {
-    changedChapter() {
-      if (this.rendition) {
-        this.rendition.display(this.selectedChapter)
-      }
+  computed: {
+    /** @returns {string} */
+    libraryItemId() {
+      return this.libraryItem?.id
     },
+    hasPrev() {
+      return !this.rendition?.location?.atStart
+    },
+    hasNext() {
+      return !this.rendition?.location?.atEnd
+    },
+    /** @returns {Array<ePub.NavItem>} */
+    chapters() {
+      return this.book ? this.book.navigation.toc : []
+    },
+    userMediaProgress() {
+      if (!this.libraryItemId) return
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
+    },
+    localStorageLocationsKey() {
+      return `ebookLocations-${this.libraryItemId}`
+    }
+  },
+  methods: {
     prev() {
-      if (this.rendition) {
-        this.rendition.prev()
-      }
+      return this.rendition?.prev()
     },
     next() {
-      if (this.rendition) {
-        this.rendition.next()
+      return this.rendition?.next()
+    },
+    goToChapter(href) {
+      return this.rendition?.display(href)
+    },
+    keyUp(e) {
+      const rtl = this.book.package.metadata.direction === 'rtl'
+      if ((e.keyCode || e.which) == 37) {
+        return rtl ? this.next() : this.prev()
+      } else if ((e.keyCode || e.which) == 39) {
+        return rtl ? this.prev() : this.next()
       }
     },
-    keyUp() {
-      if ((e.keyCode || e.which) == 37) {
-        this.prev()
-      } else if ((e.keyCode || e.which) == 39) {
-        this.next()
+    /**
+     * @param {object} payload
+     * @param {string} payload.ebookLocation - CFI of the current location
+     * @param {string} payload.ebookProgress - eBook Progress Percentage
+     */
+    updateProgress(payload) {
+      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
+        console.error('EpubReader.updateProgress failed:', error)
+      })
+    },
+    /** @param {string} locationString */
+    saveLocations(locationString) {
+      localStorage.setItem(this.localStorageLocationsKey, locationString)
+    },
+    hasSavedLocations() {
+      return localStorage.getItem(this.localStorageLocationsKey) !== null
+    },
+    loadLocations() {
+      return localStorage.getItem(this.localStorageLocationsKey)
+    },
+    /** @param {string} location - CFI of the new location */
+    relocated(location) {
+      if (location.end.percentage) {
+        this.updateProgress({
+          ebookLocation: location.start.cfi,
+          ebookProgress: location.end.percentage
+        })
+      } else {
+        this.updateProgress({
+          ebookLocation: location.start.cfi
+        })
       }
     },
     initEpub() {
-      // var book = ePub(this.url, {
-      //   requestHeaders: {
-      //     Authorization: `Bearer ${this.userToken}`
-      //   }
-      // })
-      var book = ePub(this.url)
-      this.book = book
+      /** @type {EpubReader} */
+      var reader = this
 
-      this.rendition = book.renderTo('viewer', {
+      /** @type {ePub.Book} */
+      reader.book = new ePub(reader.url, {
         width: window.innerWidth - 200,
-        height: 600,
-        ignoreClass: 'annotator-hl',
-        manager: 'continuous',
-        spread: 'always'
+        height: window.innerHeight - 50
       })
-      var displayed = this.rendition.display()
 
-      book.ready
-        .then(() => {
-          console.log('Book ready')
-          return book.locations.generate(1600)
-        })
-        .then((locations) => {
-          // console.log('Loaded locations', locations)
-          // Wait for book to be rendered to get current page
-          displayed.then(() => {
-            // Get the current CFI
-            var currentLocation = this.rendition.currentLocation()
-            if (!currentLocation.start) {
-              console.error('No Start', currentLocation)
-            } else {
-              var currentPage = book.locations.percentageFromCfi(currentLocation.start.cfi)
-              // console.log('current page', currentPage)
-            }
+      /** @type {ePub.Rendition} */
+      reader.rendition = reader.book.renderTo('viewer', {
+        width: window.innerWidth - 200,
+        height: window.innerHeight * 0.8
+      })
+
+      // load saved progress
+      reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)
+
+      // load style
+      reader.rendition.themes.default({ '*': { color: '#fff!important' } })
+
+      reader.book.ready.then(() => {
+        // set up event listeners
+        reader.rendition.on('relocated', reader.relocated)
+        reader.rendition.on('keydown', reader.keyUp)
+        document.addEventListener('keydown', reader.keyUp, false)
+
+        // load ebook cfi locations
+        if (this.hasSavedLocations()) {
+          reader.book.locations.load(this.loadLocations())
+        } else {
+          reader.book.locations.generate().then(() => {
+            this.saveLocations(reader.book.locations.save())
           })
-        })
-
-      book.loaded.navigation.then((toc) => {
-        var _chapters = []
-        toc.forEach((chapter) => {
-          _chapters.push(chapter)
-        })
-        this.chapters = _chapters
-      })
-      book.loaded.metadata.then((metadata) => {
-        this.author = metadata.creator
-        this.title = metadata.title
-      })
-
-      this.rendition.on('keyup', this.keyUp)
-
-      this.rendition.on('relocated', (location) => {
-        var percent = book.locations.percentageFromCfi(location.start.cfi)
-        this.progress = Math.floor(percent * 100)
-
-        this.hasNext = !location.atEnd
-        this.hasPrev = !location.atStart
+        }
       })
     }
   },
diff --git a/client/components/readers/EpubReader2.vue b/client/components/readers/EpubReader2.vue
deleted file mode 100644
index 69839d78..00000000
--- a/client/components/readers/EpubReader2.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <div class="h-full w-full">
-    <div id="viewer" class="border border-gray-100 bg-white text-black shadow-md h-screen overflow-y-auto p-4" v-html="pageHtml"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    url: String,
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      bookInfo: {},
-      page: 0,
-      numPages: 0,
-      pageHtml: '',
-      progress: 0
-    }
-  },
-  computed: {
-    libraryItemId() {
-      return this.libraryItem ? this.libraryItem.id : null
-    },
-    hasPrev() {
-      return this.page > 0
-    },
-    hasNext() {
-      return this.page < this.numPages - 1
-    }
-  },
-  methods: {
-    prev() {
-      if (!this.hasPrev) return
-      this.page--
-      this.loadPage()
-    },
-    next() {
-      if (!this.hasNext) return
-      this.page++
-      this.loadPage()
-    },
-    keyUp() {
-      if ((e.keyCode || e.which) == 37) {
-        this.prev()
-      } else if ((e.keyCode || e.which) == 39) {
-        this.next()
-      }
-    },
-    loadPage() {
-      this.$axios
-        .$get(`/api/ebooks/${this.libraryItemId}/page/${this.page}?dev=${this.$isDev ? 1 : 0}`)
-        .then((html) => {
-          this.pageHtml = html
-        })
-        .catch((error) => {
-          console.error('Failed to load page', error)
-          this.$toast.error('Failed to load page')
-        })
-    },
-    loadInfo() {
-      this.$axios
-        .$get(`/api/ebooks/${this.libraryItemId}/info?dev=${this.$isDev ? 1 : 0}`)
-        .then((bookInfo) => {
-          this.bookInfo = bookInfo
-          this.numPages = bookInfo.pages
-          this.page = 0
-          this.loadPage()
-        })
-        .catch((error) => {
-          console.error('Failed to load page', error)
-          this.$toast.error('Failed to load info')
-        })
-    },
-    initEpub() {
-      if (!this.libraryItemId) return
-      this.loadInfo()
-    }
-  },
-  mounted() {
-    this.initEpub()
-  }
-}
-</script>
diff --git a/client/components/readers/Reader.vue b/client/components/readers/Reader.vue
index 5481f250..a7383fb7 100644
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -1,24 +1,48 @@
 <template>
   <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-60 bg-primary text-white">
-    <div class="absolute top-4 right-4 z-20">
-      <span class="material-icons cursor-pointer text-4xl" @click="close">close</span>
+    <div class="absolute top-4 left-4 z-20">
+      <span v-if="hasToC && !tocOpen" ref="tocButton" class="material-icons cursor-pointer text-2xl" @click="toggleToC">menu</span>
     </div>
 
-    <div class="absolute top-4 left-4">
-      <h1 class="text-2xl mb-1">{{ abTitle }}</h1>
-      <p v-if="abAuthor">by {{ abAuthor }}</p>
+    <div class="absolute top-4 left-1/2 transform -translate-x-1/2">
+      <h1 class="text-2xl mb-1" style="line-height: 1.15; font-weight: 100">
+        <span style="font-weight: 600">{{ abTitle }}</span>
+        <span v-if="abAuthor" style="display: inline"> – </span>
+        <span v-if="abAuthor">{{ abAuthor }}</span>
+      </h1>
+    </div>
+
+    <div class="absolute top-4 right-4 z-20">
+      <span v-if="hasSettings" class="material-icons cursor-pointer text-2xl" @click="openSettings">settings</span>
+      <span class="material-icons cursor-pointer text-2xl" @click="close">close</span>
     </div>
 
     <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />
 
-    <div class="absolute bottom-2 left-2">{{ ebookType }}</div>
+    <!-- TOC side nav -->
+    <div v-if="tocOpen" class="w-full h-full fixed inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
+    <div v-if="hasToC" class="w-72 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-72'" @click.stop.prevent="toggleToC">
+      <div class="p-4 h-full overflow-hidden">
+        <p class="text-lg font-semibold mb-2">Table of Contents</p>
+        <div class="tocContent">
+          <ul>
+            <li v-for="chapter in chapters" :key="chapter.id" class="py-1">
+              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      chapters: [],
+      tocOpen: false
+    }
   },
   watch: {
     show(newVal) {
@@ -37,13 +61,18 @@ export default {
       }
     },
     componentName() {
-      if (this.ebookType === 'epub' && this.$isDev) return 'readers-epub-reader2'
-      else if (this.ebookType === 'epub') return 'readers-epub-reader'
+      if (this.ebookType === 'epub') return 'readers-epub-reader'
       else if (this.ebookType === 'mobi') return 'readers-mobi-reader'
       else if (this.ebookType === 'pdf') return 'readers-pdf-reader'
       else if (this.ebookType === 'comic') return 'readers-comic-reader'
       return null
     },
+    hasToC() {
+      return this.isEpub
+    },
+    hasSettings() {
+      return false
+    },
     abTitle() {
       return this.mediaMetadata.title
     },
@@ -111,6 +140,11 @@ export default {
     }
   },
   methods: {
+    toggleToC() {
+      this.tocOpen = !this.tocOpen
+      this.chapters = this.$refs.readerComponent.chapters
+    },
+    openSettings() {},
     hotkey(action) {
       console.log('Reader hotkey', action)
       if (!this.$refs.readerComponent) return
@@ -151,4 +185,8 @@ export default {
 .ebook-viewer {
   height: calc(100% - 96px);
 }
+.tocContent {
+  height: calc(100% - 36px);
+  overflow-y: auto;
+}
 </style>
\ No newline at end of file
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index 85763402..105682f2 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -164,7 +164,7 @@
           <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-100 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
             <p v-if="progressPercent < 1" class="leading-6">{{ $strings.LabelYourProgress }}: {{ Math.round(progressPercent * 100) }}%</p>
             <p v-else class="text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt, dateFormat) }}</p>
-            <p v-if="progressPercent < 1" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
+            <p v-if="progressPercent < 1 && !useEBookProgress" class="text-gray-200 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
             <p class="text-gray-400 text-xs pt-1">{{ $strings.LabelStarted }} {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>
 
             <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
@@ -482,7 +482,12 @@ export default {
       const duration = this.userMediaProgress.duration || this.duration
       return duration - this.userMediaProgress.currentTime
     },
+    useEBookProgress() {
+      if (!this.userMediaProgress || this.userMediaProgress.progress) return false
+      return this.userMediaProgress.ebookProgress > 0
+    },
     progressPercent() {
+      if (this.useEBookProgress) return Math.max(Math.min(1, this.userMediaProgress.ebookProgress), 0)
       return this.userMediaProgress ? Math.max(Math.min(1, this.userMediaProgress.progress), 0) : 0
     },
     userProgressStartedAt() {
diff --git a/server/controllers/MeController.js b/server/controllers/MeController.js
index 1286cc12..9ca2c7a9 100644
--- a/server/controllers/MeController.js
+++ b/server/controllers/MeController.js
@@ -261,7 +261,7 @@ class MeController {
 
     var itemsInProgress = []
     for (const mediaProgress of req.user.mediaProgress) {
-      if (!mediaProgress.isFinished && mediaProgress.progress > 0) {
+      if (!mediaProgress.isFinished && (mediaProgress.progress > 0 || libraryItem.ebookProgress > 0)) {
         const libraryItem = await this.db.getLibraryItem(mediaProgress.libraryItemId)
         if (libraryItem) {
           if (mediaProgress.episodeId && libraryItem.mediaType === 'podcast') {
diff --git a/server/objects/user/MediaProgress.js b/server/objects/user/MediaProgress.js
index 0abe7e22..6e06c0fe 100644
--- a/server/objects/user/MediaProgress.js
+++ b/server/objects/user/MediaProgress.js
@@ -10,6 +10,9 @@ class MediaProgress {
     this.isFinished = false
     this.hideFromContinueListening = false
 
+    this.ebookLocation = null // current cfi tag
+    this.ebookProgress = null // 0 to 1
+
     this.lastUpdate = null
     this.startedAt = null
     this.finishedAt = null
@@ -29,6 +32,8 @@ class MediaProgress {
       currentTime: this.currentTime,
       isFinished: this.isFinished,
       hideFromContinueListening: this.hideFromContinueListening,
+      ebookLocation: this.ebookLocation,
+      ebookProgress: this.ebookProgress,
       lastUpdate: this.lastUpdate,
       startedAt: this.startedAt,
       finishedAt: this.finishedAt
@@ -44,13 +49,15 @@ class MediaProgress {
     this.currentTime = progress.currentTime
     this.isFinished = !!progress.isFinished
     this.hideFromContinueListening = !!progress.hideFromContinueListening
+    this.ebookLocation = progress.ebookLocation || null
+    this.ebookProgress = progress.ebookProgress
     this.lastUpdate = progress.lastUpdate
     this.startedAt = progress.startedAt
     this.finishedAt = progress.finishedAt || null
   }
 
   get inProgress() {
-    return !this.isFinished && this.progress > 0
+    return !this.isFinished && (this.progress > 0 || this.ebookLocation != null)
   }
 
   setData(libraryItemId, progress, episodeId = null) {
@@ -62,6 +69,8 @@ class MediaProgress {
     this.currentTime = progress.currentTime || 0
     this.isFinished = !!progress.isFinished || this.progress == 1
     this.hideFromContinueListening = !!progress.hideFromContinueListening
+    this.ebookLocation = progress.ebookLocation
+    this.ebookProgress = Math.min(1, (progress.ebookProgress || 0))
     this.lastUpdate = Date.now()
     this.finishedAt = null
     if (this.isFinished) {