diff --git a/.gitignore b/.gitignore
index 90b61fd40..50e8c00ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,6 @@ node_modules/
 test/
 /client/.nuxt/
 /client/dist/
-/dist/
\ No newline at end of file
+/dist/
+
+sw.*
\ No newline at end of file
diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue
index 5ea6252ce..0e4ea9632 100644
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -2,7 +2,7 @@
   <div class="w-full h-16 bg-primary relative">
     <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
       <div class="flex h-full items-center">
-        <img v-if="!showBack" src="/Logo48.png" class="w-10 h-10 md:w-12 md:h-12 mr-4" />
+        <img v-if="!showBack" src="/icon48.png" class="w-10 h-10 md:w-12 md:h-12 mr-4" />
         <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">
           <span class="material-icons text-4xl text-white">arrow_back</span>
         </a>
diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
index 278d21e9d..46a52d9ed 100644
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -11,7 +11,7 @@
         <p>Series</p>
       </nuxt-link>
     </div>
-    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center px-2 md:px-8">
+    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
       <template v-if="page !== 'search' && !isHome">
         <p v-if="!selectedSeries" class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
         <div v-else class="items-center hidden md:flex">
@@ -25,11 +25,11 @@
             <span class="font-mono">{{ numShowing }}</span>
           </div>
         </div>
-        <div class="flex-grow hidden md:inline-block" />
+        <div class="flex-grow hidden sm:inline-block" />
 
-        <ui-checkbox v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
-        <controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-48 h-7.5 ml-4" @change="updateFilter" />
-        <controls-order-select v-show="showSortFilters" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-48 h-7.5 ml-4" @change="updateOrder" />
+        <ui-checkbox v-show="showSortFilters" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
+        <controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
+        <controls-order-select v-show="showSortFilters" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
         <!-- <div v-show="showSortFilters" class="h-7 ml-4 flex border border-white border-opacity-25 rounded-md">
           <div class="h-full px-2 text-white flex items-center rounded-l-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'grid')">
             <span class="material-icons" style="font-size: 1.4rem">view_module</span>
diff --git a/client/components/app/ConfigSideNav.vue b/client/components/app/ConfigSideNav.vue
index cb676f714..ae0aa3804 100644
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@@ -9,7 +9,7 @@
       <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <div class="w-full h-10 px-4 border-t border-black border-opacity-20 absolute left-0 flex flex-col justify-center" :style="{ bottom: streamAudiobook && windowHeight > 700 && !isMobile ? '300px' : '65px' }">
+    <div class="w-full h-10 px-4 border-t border-black border-opacity-20 absolute left-0 flex flex-col justify-center" :style="{ bottom: streamAudiobook && isMobileLandscape ? '300px' : '65px' }">
       <p class="font-mono text-sm">v{{ $config.version }}</p>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-sm">Update available: {{ latestVersion }}</a>
     </div>
@@ -22,10 +22,7 @@ export default {
     isOpen: Boolean
   },
   data() {
-    return {
-      windowWidth: 0,
-      windowHeight: 0
-    }
+    return {}
   },
   computed: {
     userIsRoot() {
@@ -93,7 +90,10 @@ export default {
       return classes.join(' ')
     },
     isMobile() {
-      return this.windowWidth < 758
+      return this.$store.state.globals.isMobile
+    },
+    isMobileLandscape() {
+      return this.$store.state.globals.isMobileLandscape
     },
     drawerOpen() {
       if (this.isMobile) return this.isOpen
@@ -125,19 +125,7 @@ export default {
     },
     closeDrawer() {
       this.$emit('update:isOpen', false)
-    },
-    resize() {
-      this.windowWidth = window.innerWidth
-      this.windowHeight = window.innerHeight
     }
-  },
-  mounted() {
-    window.addEventListener('resize', this.resize)
-    this.windowWidth = window.innerWidth
-    this.windowHeight = window.innerHeight
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.resize)
   }
 }
 </script>
\ No newline at end of file
diff --git a/client/components/cards/GroupCard.vue b/client/components/cards/GroupCard.vue
index 89ed54313..98cd2e961 100644
--- a/client/components/cards/GroupCard.vue
+++ b/client/components/cards/GroupCard.vue
@@ -3,7 +3,7 @@
     <div class="rounded-sm h-full relative" :style="{ padding: `0px ${paddingX}px` }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
       <nuxt-link :to="groupTo" class="cursor-pointer">
         <div class="w-full h-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'" :style="{ height: coverHeight + 'px', width: coverWidth + 'px' }">
-          <covers-group-cover ref="groupcover" :id="seriesId" :name="groupName" :is-categorized="isCategorized" :group-to="groupTo" :type="groupType" :book-items="bookItems" :width="coverWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+          <covers-group-cover ref="groupcover" :id="seriesId" :name="groupName" :group-to="groupTo" :type="groupType" :book-items="bookItems" :width="coverWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
           <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
             <p class="font-book" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ groupName }}</p>
diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index 726b7a33c..19e3640e7 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -36,7 +36,7 @@
     <div v-if="!booksInSeries" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
 
     <!-- Overlay is not shown if collapsing series in library -->
-    <div v-show="!booksInSeries && audiobook && (isHovering || isSelectionMode || isMoreMenuOpen)" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded" :class="overlayWrapperClasslist">
+    <div v-show="!booksInSeries && audiobook && (isHovering || isSelectionMode || isMoreMenuOpen)" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
       <div v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
         <div class="hover:text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
diff --git a/client/components/controls/FilterSelect.vue b/client/components/controls/FilterSelect.vue
index e466788f0..ffca82014 100644
--- a/client/components/controls/FilterSelect.vue
+++ b/client/components/controls/FilterSelect.vue
@@ -19,7 +19,7 @@
         <template v-for="item in items">
           <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
             <div class="flex items-center justify-between">
-              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
             </div>
             <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
               <span class="material-icons">arrow_right</span>
diff --git a/client/components/covers/GroupCover.vue b/client/components/covers/GroupCover.vue
index a4c43eabc..36a0842c7 100644
--- a/client/components/covers/GroupCover.vue
+++ b/client/components/covers/GroupCover.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative" @mouseover="mouseoverCover" @mouseleave="mouseleaveCover">
+  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative">
     <div v-if="noValidCovers" class="absolute top-0 left-0 w-full h-full flex items-center justify-center box-shadow-book" :style="{ padding: `${sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier + 'rem' }">{{ name }}</p>
     </div>
@@ -18,7 +18,6 @@ export default {
     width: Number,
     height: Number,
     groupTo: String,
-    isCategorized: Boolean,
     bookCoverAspectRatio: Number
   },
   data() {
@@ -33,7 +32,6 @@ export default {
       isFannedOut: false,
       isDetached: false,
       isAttaching: false,
-      windowWidth: 0,
       isInit: false
     }
   },
@@ -56,10 +54,6 @@ export default {
     showExperimentalFeatures() {
       return this.store.state.showExperimentalFeatures
     },
-    showCoverFan() {
-      // return this.showExperimentalFeatures && this.windowWidth > 1024 && !this.isCategorized
-      return false
-    },
     store() {
       return this.$store || this.$nuxt.$store
     },
@@ -68,140 +62,6 @@ export default {
     }
   },
   methods: {
-    mouseoverCover() {
-      if (this.showCoverFan) this.setHover(true)
-    },
-    mouseleaveCover() {
-      if (this.showCoverFan) this.setHover(false)
-    },
-    detchCoverWrapper() {
-      if (!this.coverWrapperEl || !this.$refs.wrapper || this.isDetached) return
-
-      this.coverWrapperEl.remove()
-
-      this.isDetached = true
-      document.body.appendChild(this.coverWrapperEl)
-      this.coverWrapperEl.addEventListener('mouseleave', this.mouseleaveCover)
-
-      this.coverWrapperEl.style.position = 'absolute'
-      this.coverWrapperEl.style.zIndex = 40
-
-      this.updatePosition()
-    },
-    attachCoverWrapper() {
-      if (!this.coverWrapperEl || !this.$refs.wrapper || !this.isDetached) return
-
-      this.coverWrapperEl.remove()
-      this.coverWrapperEl.style.position = 'relative'
-      this.coverWrapperEl.style.left = 'unset'
-      this.coverWrapperEl.style.top = 'unset'
-      this.coverWrapperEl.style.width = this.$refs.wrapper.clientWidth + 'px'
-
-      this.$refs.wrapper.appendChild(this.coverWrapperEl)
-
-      this.isDetached = false
-    },
-    updatePosition() {
-      var rect = this.$refs.wrapper.getBoundingClientRect()
-      this.coverWrapperEl.style.top = rect.top + window.scrollY + 'px'
-
-      this.coverWrapperEl.style.left = rect.left + window.scrollX + 4 + 'px'
-
-      this.coverWrapperEl.style.height = rect.height + 'px'
-      this.coverWrapperEl.style.width = rect.width + 'px'
-    },
-    setHover(val) {
-      if (this.isAttaching) return
-      if (val && !this.isHovering) {
-        this.detchCoverWrapper()
-        this.fanOutCovers()
-      } else if (!val && this.isHovering) {
-        this.isAttaching = true
-        // this.reverseFan()
-        // setTimeout(() => {
-        //   this.attachCoverWrapper()
-        //   this.isAttaching = false
-        // }, 100)
-      }
-      this.isHovering = val
-    },
-    fanOutCovers() {
-      if (this.coverImageEls.length < 2 || this.isFannedOut) return
-      this.isFannedOut = true
-      var fanCoverWidth = this.coverWidth * 0.75
-      var maximumWidth = window.innerWidth - 80
-
-      var totalFanWidth = (this.coverImageEls.length + 1) * fanCoverWidth
-
-      // If Fan width is too large, set new fan cover width
-      if (totalFanWidth > maximumWidth) {
-        fanCoverWidth = maximumWidth / (this.coverImageEls.length + 1)
-      }
-
-      var fanWidth = (this.coverImageEls.length - 1) * fanCoverWidth
-      var offsetLeft = (-1 * fanWidth) / 2
-
-      var rect = this.$refs.wrapper.getBoundingClientRect()
-
-      // If fan is going off page left or right, make adjustment
-      var leftEdge = rect.left + offsetLeft
-      var rightEdge = rect.left + rect.width - offsetLeft
-      if (leftEdge < 0) {
-        offsetLeft += leftEdge * -1
-      }
-      if (rightEdge + 80 > window.innerWidth) {
-        var difference = rightEdge + 80 - window.innerWidth
-        offsetLeft -= difference / 2
-      }
-
-      for (let i = 0; i < this.coverImageEls.length; i++) {
-        var coverEl = this.coverImageEls[i]
-
-        // Series name card pop out further
-        if (i === this.coverImageEls.length - 1) {
-          offsetLeft += fanCoverWidth * 0.25
-        }
-
-        coverEl.style.transform = `translateX(${offsetLeft}px)`
-        offsetLeft += fanCoverWidth
-
-        var coverOverlay = document.createElement('div')
-        coverOverlay.className = 'absolute top-0 left-0 w-full h-full hover:bg-black hover:bg-opacity-40 text-white text-opacity-0 hover:text-opacity-100 flex items-center justify-center cursor-pointer'
-
-        if (coverEl.dataset.volumeNumber) {
-          var pEl = document.createElement('p')
-          pEl.className = 'text-2xl'
-          pEl.textContent = `#${coverEl.dataset.volumeNumber}`
-          coverOverlay.appendChild(pEl)
-        }
-        if (coverEl.dataset.audiobookId) {
-          let audiobookId = coverEl.dataset.audiobookId
-          coverOverlay.addEventListener('click', (e) => {
-            this.router.push(`/audiobook/${audiobookId}`)
-            e.stopPropagation()
-            e.preventDefault()
-          })
-        } else {
-          // Is Series
-          coverOverlay.addEventListener('click', (e) => {
-            this.router.push(this.groupTo)
-            e.stopPropagation()
-            e.preventDefault()
-          })
-        }
-
-        coverEl.appendChild(coverOverlay)
-      }
-    },
-    reverseFan() {
-      if (this.coverImageEls.length < 2 || !this.isFannedOut) return
-      this.isFannedOut = false
-      for (let i = 0; i < this.coverImageEls.length; i++) {
-        var coverEl = this.coverImageEls[i]
-        coverEl.style.transform = 'translateX(0px)'
-        if (coverEl.lastChild) coverEl.lastChild.remove() // Remove cover overlay
-      }
-    },
     getCoverUrl(book) {
       return this.store.getters['audiobooks/getBookCoverSrc'](book, '')
     },
@@ -302,7 +162,7 @@ export default {
       }
       this.noValidCovers = false
 
-      validCovers = validCovers.slice(0, 10);
+      validCovers = validCovers.slice(0, 10)
 
       var coverWidth = this.width
       var widthPer = this.width
@@ -328,12 +188,6 @@ export default {
         coverImageEls.push(img)
       }
 
-      if (this.showCoverFan) {
-        var seriesNameCover = this.createSeriesNameCover(offsetLeft)
-        outerdiv.appendChild(seriesNameCover)
-        coverImageEls.push(seriesNameCover)
-      }
-
       this.coverImageEls = coverImageEls
 
       if (this.$refs.wrapper) {
@@ -342,9 +196,7 @@ export default {
       }
     }
   },
-  mounted() {
-    this.windowWidth = window.innerWidth
-  },
+  mounted() {},
   beforeDestroy() {
     if (this.coverWrapperEl) this.coverWrapperEl.remove()
     if (this.coverImageEls && this.coverImageEls.length) {
diff --git a/client/components/tables/BackupsTable.vue b/client/components/tables/BackupsTable.vue
index 9ed04e884..8d5cf11eb 100644
--- a/client/components/tables/BackupsTable.vue
+++ b/client/components/tables/BackupsTable.vue
@@ -9,22 +9,21 @@
       <table id="backups">
         <tr>
           <th>File</th>
-          <th class="w-56">Datetime</th>
-          <th class="w-28">Size</th>
+          <th class="hidden sm:block w-32 md:w-56">Datetime</th>
+          <th class="hidden sm:block w-20 md:w-28">Size</th>
           <th class="w-36"></th>
         </tr>
         <tr v-for="backup in backups" :key="backup.id">
           <td>
-            <p class="truncate">/{{ backup.path.replace(/\\/g, '/') }}</p>
+            <p class="truncate text-xs sm:text-sm md:text-base">/{{ backup.path.replace(/\\/g, '/') }}</p>
           </td>
-          <td class="font-sans">{{ backup.datePretty }}</td>
-          <td class="font-mono">{{ $bytesPretty(backup.fileSize) }}</td>
+          <td class="hidden sm:block font-sans text-base">{{ backup.datePretty }}</td>
+          <td class="hidden sm:block font-mono md:text-base text-xs">{{ $bytesPretty(backup.fileSize) }}</td>
           <td>
-            <div class="w-full flex items-center justify-center">
+            <div class="w-full flex flex-row items-center justify-center">
               <ui-btn small color="primary" @click="applyBackup(backup)">Apply</ui-btn>
 
               <a :href="`/metadata/${backup.path.replace(/%/g, '%25').replace(/#/g, '%23')}?token=${userToken}`" class="mx-1 pt-0.5 hover:text-opacity-100 text-opacity-70 text-white" download><span class="material-icons text-xl">download</span></a>
-              <!-- <span class="material-icons text-xl hover:text-opacity-100 text-opacity-70 text-white cursor-pointer mx-1" @click="downloadBackup">download</span> -->
 
               <span class="material-icons text-xl hover:text-error hover:text-opacity-100 text-opacity-70 text-white cursor-pointer mx-1" @click="deleteBackupClick(backup)">delete</span>
             </div>
diff --git a/client/components/ui/Checkbox.vue b/client/components/ui/Checkbox.vue
index b384d018e..710fe3309 100644
--- a/client/components/ui/Checkbox.vue
+++ b/client/components/ui/Checkbox.vue
@@ -43,7 +43,7 @@ export default {
       return classes.join(' ')
     },
     labelClass() {
-      if (this.small) return 'text-sm'
+      if (this.small) return 'text-xs md:text-sm'
       return ''
     },
     svgClass() {
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 0c4d545a5..46708139b 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -502,12 +502,17 @@ export default {
         this.$eventBus.$emit('player-hotkey', name)
         e.preventDefault()
       }
+    },
+    resize() {
+      this.$store.commit('globals/updateWindowSize', { width: window.innerWidth, height: window.innerHeight })
     }
   },
   beforeMount() {
     this.initializeSocket()
   },
   mounted() {
+    this.resize()
+    window.addEventListener('resize', this.resize)
     window.addEventListener('keydown', this.keyDown)
     this.$store.dispatch('libraries/load')
 
@@ -530,6 +535,7 @@ export default {
     }
   },
   beforeDestroy() {
+    window.removeEventListener('resize', this.resize)
     window.removeEventListener('keydown', this.keyDown)
   }
 }
diff --git a/client/nuxt.config.js b/client/nuxt.config.js
index 312c29328..7f7ba77f1 100644
--- a/client/nuxt.config.js
+++ b/client/nuxt.config.js
@@ -64,6 +64,7 @@ module.exports = {
   buildModules: [
     // https://go.nuxtjs.dev/tailwindcss
     '@nuxtjs/tailwindcss',
+    '@nuxtjs/pwa'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
@@ -98,6 +99,38 @@ module.exports = {
     baseURL: process.env.serverUrl || ''
   },
 
+  // nuxt/pwa https://pwa.nuxtjs.org
+  pwa: {
+    icon: false,
+    meta: {
+      appleStatusBarStyle: 'black',
+      name: 'Audiobookshelf',
+      theme_color: '#373838',
+      mobileAppIOS: true,
+      nativeUI: true
+    },
+    manifest: {
+      name: 'Audiobookshelf',
+      short_name: 'Audiobookshelf',
+      display: 'standalone',
+      background_color: '#373838',
+      icons: [
+        {
+          src: '/icon64.png',
+          sizes: "64x64"
+        },
+        {
+          src: '/icon192.png',
+          sizes: "192x192"
+        },
+        {
+          src: '/Logo.png',
+          sizes: "512x512"
+        }
+      ]
+    }
+  },
+
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {},
   watchers: {
diff --git a/client/package-lock.json b/client/package-lock.json
index 12aaf4460..82bfa5096 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,7 +1,7 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.6.64",
-  "lockfileVersion": 2,
+  "version": "1.6.65",
+  "lockfileVersion": 1,
   "requires": true,
   "packages": {
     "": {
@@ -21270,6 +21270,31 @@
         "http-proxy-middleware": "^1.0.6"
       }
     },
+    "@nuxtjs/pwa": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/pwa/-/pwa-3.3.5.tgz",
+      "integrity": "sha512-8tTmW8DBspWxlJwTimOHTkwfkwPpL9wIcGmy75Gcmin+c9YtX2Ehxmhgt/TLFOC9XsLAqojqynw3/Agr/9OE1w==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "defu": "^3.2.2",
+        "execa": "^5.0.0",
+        "fs-extra": "^9.1.0",
+        "hasha": "^5.2.2",
+        "jimp-compact": "^0.16.1",
+        "lodash.template": "^4.5.0",
+        "serve-static": "^1.14.1",
+        "workbox-cdn": "^5.1.4"
+      },
+      "dependencies": {
+        "defu": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/defu/-/defu-3.2.2.tgz",
+          "integrity": "sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==",
+          "dev": true
+        }
+      }
+    },
     "@nuxtjs/tailwindcss": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-4.2.1.tgz",
@@ -23313,6 +23338,17 @@
         }
       }
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -25558,6 +25594,24 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "hasha": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
+      "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
+      "dev": true,
+      "requires": {
+        "is-stream": "^2.0.0",
+        "type-fest": "^0.8.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "dev": true
+        }
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -26313,6 +26367,12 @@
         }
       }
     },
+    "jimp-compact": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/jimp-compact/-/jimp-compact-0.16.1.tgz",
+      "integrity": "sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww==",
+      "dev": true
+    },
     "jiti": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.11.0.tgz",
@@ -31111,6 +31171,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -33413,6 +33482,12 @@
         }
       }
     },
+    "workbox-cdn": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/workbox-cdn/-/workbox-cdn-5.1.4.tgz",
+      "integrity": "sha512-04gM3mi8QGutokkSaA9xunVfjURnLbo9TTWyi8+pSDCEW5cD8u5GbJiliLK1vB9CShk/9OY1UDfW+XcmD+d6KQ==",
+      "dev": true
+    },
     "worker-farm": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
diff --git a/client/package.json b/client/package.json
index f7582737b..eed861fc9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.6.65",
+  "version": "1.6.66",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {
@@ -28,6 +28,7 @@
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
+    "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/tailwindcss": "^4.2.1",
     "postcss": "^8.3.6"
   }
diff --git a/client/pages/audiobook/_id/index.vue b/client/pages/audiobook/_id/index.vue
index 9ca3dc782..0fc3c8bbd 100644
--- a/client/pages/audiobook/_id/index.vue
+++ b/client/pages/audiobook/_id/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div id="page-wrapper" class="bg-bg page overflow-hidden" :class="streamAudiobook ? 'streaming' : ''">
     <div class="w-full h-full overflow-y-auto px-2 py-6 md:p-8">
-      <div class="flex flex-col sm:flex-row max-w-6xl mx-auto">
-        <div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 208px">
+      <div class="flex flex-col md:flex-row max-w-6xl mx-auto">
+        <div class="w-full flex justify-center md:block md:w-52" style="min-width: 208px">
           <div class="relative" style="height: fit-content">
             <covers-book-cover :audiobook="audiobook" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
             <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm z-10" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 208 * progressPercent + 'px' }"></div>
           </div>
         </div>
         <div class="flex-grow px-2 py-6 md:py-0 md:px-10">
-          <div class="flex">
+          <div class="flex justify-center">
             <div class="mb-4">
               <div class="flex sm:items-end flex-col sm:flex-row">
                 <h1 class="text-2xl md:text-3xl font-sans">
@@ -73,7 +73,7 @@
                 </div>
               </div>
             </div>
-            <div class="flex-grow" />
+            <div class="hidden md:block flex-grow" />
           </div>
 
           <!-- Alerts -->
@@ -82,7 +82,7 @@
             <p class="ml-4">Book has no audio tracks but has valid ebook files. The e-reader is experimental and can be turned on in config.</p>
           </div>
 
-          <div v-if="progressPercent > 0 && progressPercent < 1" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-200 relative max-w-max" :class="resettingProgress ? 'opacity-25' : ''">
+          <div v-if="progressPercent > 0 && progressPercent < 1" class="px-4 py-2 mt-4 bg-primary text-sm font-semibold rounded-md text-gray-200 relative max-w-max mx-auto md:mx-0" :class="resettingProgress ? 'opacity-25' : ''">
             <p class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
             <p class="text-gray-400 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</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">
@@ -90,7 +90,7 @@
             </div>
           </div>
 
-          <div class="flex items-center pt-4">
+          <div class="flex items-center justify-center md:justify-start pt-4">
             <ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="startStream">
               <span v-show="!streaming" class="material-icons -ml-2 pr-1 text-white">play_arrow</span>
               {{ streaming ? 'Streaming' : 'Play' }}
@@ -177,8 +177,7 @@ export default {
     return {
       isRead: false,
       resettingProgress: false,
-      isProcessingReadUpdate: false,
-      windowWidth: 0
+      isProcessingReadUpdate: false
     }
   },
   watch: {
@@ -197,7 +196,7 @@ export default {
       return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
     },
     bookCoverWidth() {
-      return this.windowWidth < 800 ? 176 : 208
+      return 208
     },
     isDeveloperMode() {
       return this.$store.state.developerMode
@@ -453,14 +452,9 @@ export default {
     collectionsClick() {
       this.$store.commit('setSelectedAudiobook', this.audiobook)
       this.$store.commit('globals/setShowUserCollectionsModal', true)
-    },
-    resize() {
-      this.windowWidth = window.innerWidth
     }
   },
   mounted() {
-    this.windowWidth = window.innerWidth
-    window.addEventListener('resize', this.resize)
     this.$store.commit('audiobooks/addListener', { id: 'audiobook', audiobookId: this.audiobookId, meth: this.audiobookUpdated })
 
     // use this audiobooks library id as the current
@@ -469,7 +463,6 @@ export default {
     }
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.resize)
     this.$store.commit('audiobooks/removeListener', 'audiobook')
   }
 }
diff --git a/client/pages/config/log.vue b/client/pages/config/log.vue
index b5b75a865..57b05f9b4 100644
--- a/client/pages/config/log.vue
+++ b/client/pages/config/log.vue
@@ -1,14 +1,14 @@
 <template>
-  <div id="page-wrapper" class="page p-6 overflow-y-auto" :class="streamAudiobook ? 'streaming' : ''">
+  <div id="page-wrapper" class="page overflow-y-auto" :class="streamAudiobook ? 'streaming' : ''">
     <div class="w-full max-w-4xl mx-auto">
-      <div class="mb-4 flex items-end">
-        <p class="text-2xl mr-4">Logger</p>
+      <div class="mb-4 flex flex-col sm:flex-row items-start sm:items-end">
+        <p class="text-2xl mr-4 mb-2 sm:mb-0">Logger</p>
 
-        <ui-text-input ref="input" v-model="search" placeholder="Search filter.." @input="inputUpdate" clearable class="w-40 h-8 text-sm" />
+        <ui-text-input ref="input" v-model="search" placeholder="Search filter.." @input="inputUpdate" clearable class="w-full sm:w-40 h-8 text-sm mb-2 sm:mb-0" />
 
         <div class="flex-grow" />
 
-        <div class="w-44">
+        <div class="w-full sm:w-44">
           <ui-dropdown v-model="newServerSettings.logLevel" label="Server Log Level" :items="logLevelItems" @input="logLevelUpdated" />
         </div>
       </div>
diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index 230a4fc19..758827fd5 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -30,7 +30,7 @@
         </div>
       </div>
     </div>
-    <div class="flex">
+    <div class="flex flex-col md:flex-row">
       <stats-daily-listening-chart :listening-stats="listeningStats" />
       <div class="w-80 my-6 mx-auto">
         <h1 class="text-2xl mb-4 font-book">Recent Listening Sessions</h1>
diff --git a/client/plugins/init.client.js b/client/plugins/init.client.js
index 71e9f87ab..33b9bdc89 100644
--- a/client/plugins/init.client.js
+++ b/client/plugins/init.client.js
@@ -143,6 +143,5 @@ export {
 export default ({ app }, inject) => {
   app.$decode = decode
   app.$encode = encode
-  // app.$isDev = process.env.NODE_ENV !== 'production'
   inject('isDev', process.env.NODE_ENV !== 'production')
 }
\ No newline at end of file
diff --git a/client/static/Logo.png b/client/static/Logo.png
index c9397c020..24e03a64a 100644
Binary files a/client/static/Logo.png and b/client/static/Logo.png differ
diff --git a/client/static/Logo48.png b/client/static/Logo48.png
deleted file mode 100644
index 8fb2a168c..000000000
Binary files a/client/static/Logo48.png and /dev/null differ
diff --git a/client/static/icon192.png b/client/static/icon192.png
new file mode 100644
index 000000000..5cbf1d4db
Binary files /dev/null and b/client/static/icon192.png differ
diff --git a/client/static/icon48.png b/client/static/icon48.png
new file mode 100644
index 000000000..8f94f77c1
Binary files /dev/null and b/client/static/icon48.png differ
diff --git a/client/static/icon64.png b/client/static/icon64.png
new file mode 100644
index 000000000..e420b7ca9
Binary files /dev/null and b/client/static/icon64.png differ
diff --git a/client/store/globals.js b/client/store/globals.js
index d42fa52d8..786e6e014 100644
--- a/client/store/globals.js
+++ b/client/store/globals.js
@@ -1,5 +1,7 @@
 
 export const state = () => ({
+  isMobile: false,
+  isMobileLandscape: false,
   showBatchUserCollectionModal: false,
   showUserCollectionsModal: false,
   showEditCollectionModal: false,
@@ -7,15 +9,13 @@ export const state = () => ({
   showBookshelfTextureModal: false
 })
 
-export const getters = {
-
-}
-
-export const actions = {
-
-}
+export const getters = {}
 
 export const mutations = {
+  updateWindowSize(state, { width, height }) {
+    state.isMobile = width < 768 || height < 768
+    state.isMobileLandscape = state.isMobile && height > width
+  },
   setShowUserCollectionsModal(state, val) {
     state.showBatchUserCollectionModal = false
     state.showUserCollectionsModal = val
diff --git a/package.json b/package.json
index 15bd07d5b..1e97a7b78 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.6.65",
+  "version": "1.6.66",
   "description": "Self-hosted audiobook server for managing and playing audiobooks",
   "main": "index.js",
   "scripts": {