2026-08-02 22:51:45 +00:00
1003 changed files with 47787 additions and 191789 deletions
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@ -1,12 +0,0 @@
-# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
-ARG VARIANT=20
-FROM mcr.microsoft.com/devcontainers/javascript-node:0-${VARIANT} as base
-
-# Setup the node environment
-ENV NODE_ENV=development
-
-# Install additional OS packages.
-RUN apt-get update && \
-  DEBIAN_FRONTEND=noninteractive apt-get -y install --no-install-recommends \
-    curl tzdata ffmpeg && \
-  rm -rf /var/lib/apt/lists/*
--- a/.devcontainer/dev.js
+++ b/.devcontainer/dev.js
@ -1,10 +0,0 @@
-// Using port 3333 is important when running the client web app separately
-const Path = require('path')
-module.exports.config = {
-  Port: 3333,
-  ConfigPath: Path.resolve('config'),
-  MetadataPath: Path.resolve('metadata'),
-  FFmpegPath: '/usr/bin/ffmpeg',
-  FFProbePath: '/usr/bin/ffprobe',
-  SkipBinariesCheck: false
-}
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -1,40 +0,0 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
-{
-	"name": "Audiobookshelf",
-	"build": {
-		"dockerfile": "Dockerfile",
-		// Update 'VARIANT' to pick a Node version: 18, 16, 14.
-		// Append -bullseye or -buster to pin to an OS version.
-		// Use -bullseye variants on local arm64/Apple Silicon.
-		"args": {
-			"VARIANT": "20"
-		}
-	},
-	"mounts": [
-		"source=abs-server-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
-		"source=abs-client-node_modules,target=${containerWorkspaceFolder}/client/node_modules,type=volume"
-	],
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [
-		3000,
-		3333
-	],
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "sh .devcontainer/post-create.sh",
-	// Configure tool-specific properties.
-	"customizations": {
-		// Configure properties specific to VS Code.
-		"vscode": {
-			// Add the IDs of extensions you want installed when the container is created.
-			"extensions": [
-				"dbaeumer.vscode-eslint",
-				"octref.vetur"
-			]
-		}
-	}
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	// "remoteUser": "root"
-}
--- a/.devcontainer/post-create.sh
+++ b/.devcontainer/post-create.sh
@ -1,29 +0,0 @@
-#!/bin/sh
-
-# Mark the working directory as safe for use with git
-git config --global --add safe.directory $PWD
-
-# If there is no dev.js file, create it
-if [ ! -f dev.js ]; then
-  cp .devcontainer/dev.js .
-fi
-
-# Update permissions for node_modules folders
-# https://code.visualstudio.com/remote/advancedcontainers/improve-performance#_use-a-targeted-named-volume
-if [ -d node_modules ]; then
-  sudo chown $(id -u):$(id -g) node_modules
-fi
-
-if [ -d client/node_modules ]; then
-  sudo chown $(id -u):$(id -g) client/node_modules
-fi
-
-# Install packages for the server
-if [ -f package.json ]; then
-    npm ci
-fi
-
-# Install packages and build the client
-if [ -f client/package.json ]; then
-    (cd client; npm ci; npm run generate)
-fi
--- a/.dockerignore
+++ b/.dockerignore
@ -12,5 +12,4 @@ dev.js
 test/
 /client/.nuxt/
 /client/dist/
-/dist/
-/deploy/
+/dist/
--- a/.editorconfig
+++ b/.editorconfig
@ -1,8 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-charset = utf-8
-insert_final_newline = true
-trim_trailing_whitespace = true
--- a/.gitattributes
+++ b/.gitattributes
@ -1,5 +0,0 @@
-# Set the default behavior, in case people don't have core.autocrlf set.
-* text=auto
-
-# Declare files that will always have CRLF line endings on checkout.
-.devcontainer/post-create.sh text eol=lf
--- a/.github/ISSUE_TEMPLATE/bug.yaml
+++ b/.github/ISSUE_TEMPLATE/bug.yaml
@ -1,50 +1,33 @@
 name: 🐞 Bug Report
-description: File a bug/issue and help us improve Audiobookshelf
-title: '[Bug]: '
-labels: ['bug', 'triage']
+description: File a bug/issue
+title: "[Bug]: "
+labels: ["bug", "triage"]
 body:
  - type: markdown
    attributes:
-      value: 'Thank you for filing a bug report! 🐛'
+      value: "### Please first search for your issue and check the [docs](https://audiobookshelf.org/docs)."
  - type: markdown
    attributes:
-      value: 'Please first search for your issue and check the [docs](https://audiobookshelf.org/docs).'
-  - type: markdown
-    attributes:
-      value: 'Report issues with the mobile app [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose).'
-  - type: markdown
-    attributes:
-      value: 'Join the [discord server](https://discord.gg/HQgCbd6E75) for questions or if you are not sure about a bug.'
+      value: "### Mobile app issues report [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
  - type: textarea
    id: what-happened
    attributes:
-      label: What happened?
-      placeholder: Tell us what you see!
-    validations:
-      required: true
-  - type: textarea
-    id: what-was-expected
-    attributes:
-      label: What did you expect to happen?
-      placeholder: Tell us what you expected to see! Be as descriptive as you can and include screenshots if applicable.
+      label: Describe the issue
+      description: What happened & what did you expect to happen
    validations:
      required: true
  - type: textarea
    id: steps-to-reproduce
    attributes:
      label: Steps to reproduce the issue
-      value: '1. '
+      value: "1. "
    validations:
      required: true
-  - type: markdown
-    attributes:
-      value: '## Install Environment'
  - type: input
    id: version
    attributes:
      label: Audiobookshelf version
-      description: Do not put 'Latest version', please put the actual version here
-      placeholder: 'e.g. v1.6.60'
+      placeholder: "e.g. v1.6.60"
    validations:
      required: true
  - type: dropdown
@ -54,45 +37,7 @@ body:
      options:
        - Docker
        - Debian/PPA
-        - Windows Tray App
        - Built from source
-        - Other (list in "Additional Notes" box)
+        - Other
    validations:
-      required: true
-  - type: dropdown
-    id: server-os
-    attributes:
-      label: What OS is your Audiobookshelf server hosted from?
-      options:
-        - Windows
-        - macOS
-        - Linux
-        - Other (list in "Additional Notes" box)
-    validations:
-      required: true
-  - type: dropdown
-    id: desktop-browsers
-    attributes:
-      label: If the issue is being seen in the UI, what browsers are you seeing the problem on?
-      options:
-        - Chrome
-        - Firefox
-        - Safari
-        - Edge
-        - Firefox for Android
-        - Chrome for Android
-        - Safari on iOS
-        - Other (list in "Additional Notes" box)
-  - type: textarea
-    id: logs
-    attributes:
-      label: Logs
-      description: Please include any relevant logs here. This field is automatically formatted into code, so you do not need to include any backticks.
-      placeholder: Paste logs here
-      render: shell
-  - type: textarea
-    id: additional-notes
-    attributes:
-      label: Additional Notes
-      description: Anything else you want to add?
-      placeholder: 'e.g. I have tried X, Y, and Z.'
+     required: true
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -1,5 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Discord
-    url: https://discord.gg/HQgCbd6E75
-    about: Ask questions, get help troubleshooting, and join the Abs community here.
--- a/.github/ISSUE_TEMPLATE/feature.yml
+++ b/.github/ISSUE_TEMPLATE/feature.yml
@ -1,63 +1,17 @@
 name: 🚀 Feature Request
 description: Request a feature/enhancement
-title: '[Enhancement]: '
-labels: ['enhancement']
+title: "[Enhancement]: "
+labels: ["enhancement"]
 body:
  - type: markdown
    attributes:
-      value: '#### *Mobile app features should be [requested here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)*.'
+      value: "### Please first search in both issues & discussions for your enhancement."
  - type: markdown
    attributes:
-      value: '## Web/Server Feature Request Description'
-  - type: markdown
-    attributes:
-      value: 'Please first search in both issues & discussions for your enhancement.'
-  - type: dropdown
-    id: enhancment-type
-    attributes:
-      label: Type of Enhancement
-      options:
-        - Server Backend
-        - Web Interface/Frontend
-        - Documentation
+      value: "### Mobile app features should be requested [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
  - type: textarea
    id: describe
    attributes:
-      label: Describe the Feature/Enhancement
-      description: Please help us understand what you want.
-      placeholder: What is your vision?
+      label: Describe the feature/enhancement
    validations:
      required: true
-  - type: textarea
-    id: the-why
-    attributes:
-      label: Why would this be helpful?
-      description: Please help us understand why this would enhance your experience.
-      placeholder: Explain the "why" or "use case".
-    validations:
-      required: true
-  - type: textarea
-    id: image
-    attributes:
-      label: Future Implementation (Screenshot)
-      description: Please help us visualize by including a doodle or screenshot.
-      placeholder: How could this look?
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: '## Web/Server Current Implementation'
-  - type: input
-    id: version
-    attributes:
-      label: Audiobookshelf Server Version
-      description: Do not put 'Latest version', please put your current version number here
-      placeholder: 'e.g. v1.6.60'
-    validations:
-      required: true
-  - type: textarea
-    id: current-image
-    attributes:
-      label: Current Implementation (Screenshot)
-      description: What page were you looking at when you thought of this enhancement?
-      placeholder: If an image is not applicable, please explain why.
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -1,33 +0,0 @@
-<!--
-For Work In Progress Pull Requests, please use the Draft PR feature,
-see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
-
-If you do not follow this template, the PR may be closed without review.
-
-Please ensure all checks pass.
-If you are a new contributor, the workflows will need to be manually approved before they run.
-->
-
-## Brief summary
-
-<!-- Please provide a brief summary of what your PR attempts to achieve. -->
-
-## Which issue is fixed?
-
-<!-- Which issue number does this PR fix? Ex: "Fixes #1234" -->
-
-## In-depth Description
-
-<!--
-Describe your solution in more depth.
-How does it work? Why is this the best solution?
-Does it solve a problem that affects multiple users or is this an edge case for your setup?
-->
-
-## How have you tested this?
-
-<!-- Please describe in detail with reproducible steps how you tested your changes. -->
-
-## Screenshots
-
-<!-- If your PR includes any changes to the web client, please include screenshots or a short video from before and after your changes. -->
--- a/.github/workflows/apply_comments.yaml
+++ b/.github/workflows/apply_comments.yaml
@ -1,55 +0,0 @@
-name: Add issue comments by label
-on:
-  issues:
-    types:
-      - labeled
-jobs:
-  help-wanted:
-    if: github.event.label.name == 'help wanted'
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    steps:
-      - name: Help wanted comment
-        run: gh issue comment "$NUMBER" --body "$BODY"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GH_REPO: ${{ github.repository }}
-          NUMBER: ${{ github.event.issue.number }}
-          BODY: >
-            This issue is not able to be completed due to limited bandwidth or access to the required test hardware.
-            
-            This issue is available for anyone to work on.
-
-
-  config-issue:
-    if: github.event.label.name == 'config-issue'
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    steps:
-      - name: Config issue comment
-        run: gh issue close "$NUMBER" --reason "not planned" --comment "$BODY"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GH_REPO: ${{ github.repository }}
-          NUMBER: ${{ github.event.issue.number }}
-          BODY: >
-            After reviewing this issue, this appears to be a problem with your setup and not Audiobookshelf. This issue is being closed to keep the issue tracker focused on Audiobookshelf itself. Please reach out on the Audiobookshelf Discord for community support.
-            
-            Some common search terms to help you find the solution to your problem:
-              - Reverse proxy
-              - Enabling websockets
-              - SSL (https vs http)
-              - Configuring a static IP
-              - `localhost` versus IP address
-              - hairpin NAT
-              - VPN
-              - firewall ports
-              - public versus private network
-              - bridge versus host mode
-              - Docker networking
-              - DNS (such as EAI_AGAIN errors)
-            
-            After you have followed these steps, please post the solution or steps you followed to fix the problem to help others in the future, or show that it is a problem with Audiobookshelf so we can reopen the issue.
-
--- a/.github/workflows/close-issues-on-release.yml
+++ b/.github/workflows/close-issues-on-release.yml
@ -1,20 +0,0 @@
-name: Close fixed issues on release.
-on:
-  release:
-    types: [published]
-
-permissions:
-  contents: read
-  issues: write
-
-jobs:
-  comment:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Close issues marked as fixed upon a release.
-        uses: gcampbell-msft/fixed-pending-release@7fa1b75a0c04bcd4b375110522878e5f6100cff5
-        with:
-          label: 'awaiting release'
-          removeLabel: true
-          applyToAll: true
-          message: Fixed in [${releaseTag}](${releaseUrl}).
--- a/.github/workflows/close_blank_issues.yaml
+++ b/.github/workflows/close_blank_issues.yaml
@ -1,42 +0,0 @@
-name: Close Issues not using a template
-
-on:
-  issues:
-    types:
-      - opened
-
-permissions:
-  issues: write
-
-jobs:
-  close_issue:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Check issue headings
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const issueBody = context.payload.issue.body || "";
-
-            // Match Markdown headings (e.g., # Heading, ## Heading)
-            const headingRegex = /^(#{1,6})\s.+/gm;
-            const headings = [...issueBody.matchAll(headingRegex)];
-
-            if (headings.length < 3) {
-              // Post a comment
-              await github.rest.issues.createComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.issue.number,
-                body: "Thank you for opening an issue! To help us review your request efficiently, please use one of the provided issue templates. If you're seeking information or have a general question, consider opening a Discussion or joining the conversation on our Discord. Thanks!"
-              });
-
-              // Close the issue
-              await github.rest.issues.update({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.issue.number,
-                state: "closed"
-              });
-            }
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@ -1,78 +0,0 @@
-name: 'CodeQL'
-
-on:
-  push:
-    branches: ['master']
-    # Only build when files in these directories have been changed
-    paths:
-      - client/**
-      - server/**
-      - test/**
-      - index.js
-      - package.json
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: ['master']
-    # Only build when files in these directories have been changed
-    paths:
-      - client/**
-      - server/**
-      - test/**
-      - index.js
-      - package.json
-  schedule:
-    - cron: '16 5 * * 4'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: ['javascript']
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Use only 'java' to analyze code written in Java, Kotlin or both
-        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
-        with:
-          languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-
-          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-          # queries: security-extended,security-and-quality
-
-      # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
-      # If this step fails, then you should remove it and run the build manually (see below)
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-      #   If the Autobuild fails above, remove it and uncomment the following three lines.
-      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-      # - run: |
-      #     echo "Run, Build Application using script"
-      #     ./location_of_script_within_repo/buildscript.sh
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
-        with:
-          category: '/language:${{matrix.language}}'
--- a/.github/workflows/component-tests.yml
+++ b/.github/workflows/component-tests.yml
@ -1,48 +0,0 @@
-name: Run Component Tests
-
-on:
-  workflow_dispatch:
-    inputs:
-      ref:
-        description: 'Branch/Tag/SHA to test'
-        required: true
-  pull_request:
-    paths:
-      - 'client/**'
-      - '.github/workflows/component-tests.yml'
-  push:
-    paths:
-      - 'client/**'
-      - '.github/workflows/component-tests.yml'
-
-jobs:
-  run-component-tests:
-    name: Run Component Tests
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout (push/pull request)
-        uses: actions/checkout@v4
-        if: github.event_name != 'workflow_dispatch'
-
-      - name: Checkout (workflow_dispatch)
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref }}
-        if: github.event_name == 'workflow_dispatch'
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: |
-          cd client
-          npm ci
-
-      - name: Run tests
-        run: |
-          cd client
-          npm test
--- a/.github/workflows/docker-build.yml
+++ b/.github/workflows/docker-build.yml
@ -1,16 +1,10 @@
 ---
+
 name: Build and Push Docker Image

 on:
-  # Allows you to run workflow manually from Actions tab
-  workflow_dispatch:
-    inputs:
-      tags:
-        description: 'Docker Tag'
-        required: true
-        default: 'latest'
  push:
-    branches: [main, master]
+    branches: [master]
    tags:
      - 'v*.*.*'
    # Only build when files in these directories have been changed
@ -19,33 +13,34 @@ on:
      - server/**
      - index.js
      - package.json
+  # Allows you to run workflow manually from Actions tab
+  workflow_dispatch:

 jobs:
  build:
-    if: ${{ !contains(github.event.head_commit.message, 'skip ci') && github.repository == 'advplyr/audiobookshelf' }}
-    runs-on: ubuntu-24.04
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    runs-on: ubuntu-20.04

    steps:
      - name: Check out
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v3
        with:
          images: advplyr/audiobookshelf,ghcr.io/${{ github.repository_owner }}/audiobookshelf
          tags: |
            type=edge,branch=master
            type=semver,pattern={{version}}
-
      - name: Setup QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v1

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
+        uses: docker/setup-buildx-action@v1
+        
      - name: Cache Docker layers
-        uses: actions/cache@v4
+        uses: actions/cache@v2
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
@ -53,29 +48,28 @@ jobs:
            ${{ runner.os }}-buildx-

      - name: Login to Dockerhub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-
+      
      - name: Login to ghcr
-        uses: docker/login-action@v3
+        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GHCR_PASSWORD }}

      - name: Build image
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v2
        with:
-          tags: ${{ github.event.inputs.tags || steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ steps.meta.outputs.tags }}
          context: .
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
          push: true
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-
+          
      - name: Move cache
        run: |
          rm -rf /tmp/.buildx-cache
--- a/.github/workflows/i18n-integration.yml
+++ b/.github/workflows/i18n-integration.yml
@ -1,31 +0,0 @@
-name: Verify all i18n files are alphabetized
-
-on:
-  pull_request:
-    paths:
-      - client/strings/** # Should only check if any strings changed
-  push:
-    paths:
-      - client/strings/** # Should only check if any strings changed
-
-jobs:
-  update_translations:
-    runs-on: ubuntu-latest
-    steps:
-      # Check out the repository
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      # Set up node to run the javascript
-      - name: Set up node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'npm'
-
-      # The only argument is the `directory`, which is where the i18n files are
-      # stored.
-      - name: Run Update JSON Files action
-        uses: audiobookshelf/audiobookshelf-i18n-updater@v1.3.0
-        with:
-          directory: 'client/strings/' # Adjust the directory path as needed
--- a/.github/workflows/integration-test.yml
+++ b/.github/workflows/integration-test.yml
@ -1,52 +0,0 @@
-name: Integration Test
-
-on:
-  pull_request:
-  push:
-    branches-ignore:
-      - 'dependabot/**' # Don't run dependabot branches, as they are already covered by pull requests
-    # Only build when files in these directories have been changed
-    paths:
-      - client/**
-      - server/**
-      - test/**
-      - index.js
-      - package.json
-
-jobs:
-  build:
-    name: build and test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'npm'
-
-      - name: install pkg (using yao-pkg fork for targeting node20)
-        run: npm install -g @yao-pkg/pkg
-
-      - name: get client dependencies
-        working-directory: client
-        run: npm ci
-
-      - name: build client
-        working-directory: client
-        run: npm run generate
-
-      - name: get server dependencies
-        run: npm ci --only=production
-
-      - name: build binary
-        run: pkg -t node20-linux-x64 -o audiobookshelf .
-
-      - name: run audiobookshelf
-        run: |
-          ./audiobookshelf &
-          sleep 5
-
-      - name: test if server is available
-        run: curl -sf http://127.0.0.1:3333 | grep Audiobookshelf
--- a/.github/workflows/lint-openapi.yml
+++ b/.github/workflows/lint-openapi.yml
@ -1,39 +0,0 @@
-name: API linting
-
-# Run on pull requests or pushes when there is a change to any OpenAPI files in docs/
-on:
-  pull_request:
-  push:
-    paths:
-      - 'docs/**'
-
-# This action only needs read permissions
-permissions:
-  contents: read
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      # Check out the repository
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      # Set up node to run the javascript
-      - name: Set up node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'npm'
-
-      # Install Redocly CLI
-      - name: Install Redocly CLI
-        run: npm install -g @redocly/cli@latest
-
-      # Perform linting for exploded spec
-      - name: Run linting for exploded spec
-        run: redocly lint docs/root.yaml --format=github-actions
-
-      # Perform linting for bundled spec
-      - name: Run linting for bundled spec
-        run: redocly lint docs/openapi.json --format=github-actions
--- a/.github/workflows/notify-abs-windows.yml
+++ b/.github/workflows/notify-abs-windows.yml
@ -1,17 +0,0 @@
-name: Dispatch an abs-windows event
-
-on:
-  release:
-    types: [published]
-  workflow_dispatch:
-
-jobs:
-  abs-windows-dispatch:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Send a remote repository dispatch event
-        uses: peter-evans/repository-dispatch@v3
-        with:
-          token: ${{ secrets.ABS_WINDOWS_PAT }}
-          repository: mikiher/audiobookshelf-windows
-          event-type: build-windows
--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@ -1,38 +0,0 @@
-name: Run Unit Tests
-
-on:
-  workflow_dispatch:
-    inputs:
-      ref:
-        description: 'Branch/Tag/SHA to test'
-        required: true
-  pull_request:
-  push:
-
-jobs:
-  run-unit-tests:
-    name: Run Unit Tests
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout (push/pull request)
-        uses: actions/checkout@v4
-        if: github.event_name != 'workflow_dispatch'
-
-      - name: Checkout (workflow_dispatch)
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.ref }}
-        if: github.event_name == 'workflow_dispatch'
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run tests
-        run: npm test
--- a/.gitignore
+++ b/.gitignore
@ -1,26 +1,16 @@
 .env
-/dev.js
-**/node_modules/
+dev.js
+node_modules/
 /config/
 /audiobooks/
 /audiobooks2/
 /podcasts/
 /media/
 /metadata/
-/plugins/
+test/
 /client/.nuxt/
 /client/dist/
 /dist/
-/deploy/
-/coverage/
-/.nyc_output/
-/ffmpeg*
-/ffprobe*
-/unicode*
-/libnusqlite3*

 sw.*
-.DS_STORE
-.idea/*
-tailwind.compiled.css
-tailwind.config.js
+.DS_STORE
--- a/.prettierrc
+++ b/.prettierrc
@ -1,17 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 400,
-  "proseWrap": "never",
-  "trailingComma": "none",
-  "overrides": [
-    {
-      "files": ["*.html"],
-      "options": {
-        "singleQuote": false,
-        "wrapAttributes": false,
-        "sortAttributes": false
-      }
-    }
-  ]
-}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "EditorConfig.EditorConfig",
-    "esbenp.prettier-vscode",
-    "octref.vetur"
-  ]
-}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -1,44 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Debug server",
-      "runtimeExecutable": "npm",
-      "args": [
-        "run",
-        "dev"
-      ],
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Debug client (nuxt)",
-      "runtimeExecutable": "npm",
-      "args": [
-        "run",
-        "dev"
-      ],
-      "cwd": "${workspaceFolder}/client",
-      "skipFiles": [
-        "${workspaceFolder}/<node_internals>/**"
-      ]
-    }
-  ],
-  "compounds": [
-    {
-      "name": "Debug server and client (nuxt)",
-      "configurations": [
-        "Debug server",
-        "Debug client (nuxt)"
-      ]
-    }
-  ]
-}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,27 +0,0 @@
-{
-  "vetur.format.defaultFormatterOptions": {
-    "prettier": {
-      "semi": false,
-      "singleQuote": true,
-      "printWidth": 400,
-      "proseWrap": "never",
-      "trailingComma": "none"
-    },
-    "prettyhtml": {
-      "printWidth": 400,
-      "singleQuote": false,
-      "wrapAttributes": false,
-      "sortAttributes": false
-    }
-  },
-  "editor.formatOnSave": true,
-  "editor.detectIndentation": true,
-  "editor.tabSize": 2,
-  "javascript.format.semicolons": "remove",
-  "[javascript][json][jsonc]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[vue]": {
-    "editor.defaultFormatter": "octref.vetur"
-  }
-}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@ -1,40 +0,0 @@
-{
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"path": "client",
-			"type": "npm",
-			"script": "generate",
-			"detail": "nuxt generate",
-			"label": "Build client",
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			}
-		},
-		{
-			"dependsOn": [
-				"Build client"
-			],
-			"type": "npm",
-			"script": "dev",
-			"detail": "nodemon --watch server index.js",
-			"label": "Run server",
-			"group": {
-				"kind": "test",
-				"isDefault": true
-			}
-		},
-		{
-			"path": "client",
-			"type": "npm",
-			"script": "dev",
-			"detail": "nuxt",
-			"label": "Run Live-reload client",
-			"group": {
-				"kind": "test",
-				"isDefault": false
-			}
-		}
-	]
-}
--- a/76
+++ b/76
@ -1,73 +1,19 @@
-ARG NUSQLITE3_DIR="/usr/local/lib/nusqlite3"
-ARG NUSQLITE3_PATH="${NUSQLITE3_DIR}/libnusqlite3.so"
-
 ### STAGE 0: Build client ###
-FROM node:20-alpine AS build-client
-
+FROM node:16-alpine AS build
 WORKDIR /client
 COPY /client /client
-RUN npm ci && npm cache clean --force
+RUN npm install
 RUN npm run generate

 ### STAGE 1: Build server ###
-FROM node:20-alpine AS build-server
-
-ARG NUSQLITE3_DIR
-ARG TARGETPLATFORM
-
+FROM node:16-alpine
+RUN apk update && apk add --no-cache --update ffmpeg
 ENV NODE_ENV=production
-
-RUN apk add --no-cache --update \
-  curl \
-  make \
-  python3 \
-  g++ \
-  unzip
-
-WORKDIR /server
-COPY index.js package* /server
-COPY /server /server/server
-
-RUN case "$TARGETPLATFORM" in \
-  "linux/amd64") \
-  curl -L -o /tmp/library.zip "https://github.com/mikiher/nunicode-sqlite/releases/download/v1.2/libnusqlite3-linux-musl-x64.zip" ;; \
-  "linux/arm64") \
-  curl -L -o /tmp/library.zip "https://github.com/mikiher/nunicode-sqlite/releases/download/v1.2/libnusqlite3-linux-musl-arm64.zip" ;; \
-  *) echo "Unsupported platform: $TARGETPLATFORM" && exit 1 ;; \
-  esac && \
-  unzip /tmp/library.zip -d $NUSQLITE3_DIR && \
-  rm /tmp/library.zip
-
-RUN npm ci --only=production
-
-### STAGE 2: Create minimal runtime image ###
-FROM node:20-alpine
-
-ARG NUSQLITE3_DIR
-ARG NUSQLITE3_PATH
-
-# Install only runtime dependencies
-RUN apk add --no-cache --update \
-  tzdata \
-  ffmpeg \
-  tini
-
-WORKDIR /app
-
-# Copy compiled frontend and server from build stages
-COPY --from=build-client /client/dist /app/client/dist
-COPY --from=build-server /server /app
-COPY --from=build-server ${NUSQLITE3_PATH} ${NUSQLITE3_PATH}
-
+COPY --from=build /client/dist /client/dist
+COPY index.js index.js
+COPY package-lock.json package-lock.json
+COPY package.json package.json
+COPY server server
+RUN npm ci --production
 EXPOSE 80
-
-ENV PORT=80
-ENV NODE_ENV=production
-ENV CONFIG_PATH="/config"
-ENV METADATA_PATH="/metadata"
-ENV SOURCE="docker"
-ENV NUSQLITE3_DIR=${NUSQLITE3_DIR}
-ENV NUSQLITE3_PATH=${NUSQLITE3_PATH}
-
-ENTRYPOINT ["tini", "--"]
-CMD ["node", "index.js"]
+CMD ["npm", "start"]
--- a/build/debian/DEBIAN/postinst
+++ b/build/debian/DEBIAN/postinst
@ -2,11 +2,49 @@
 set -e
 set -o pipefail

-ABS_LOG_DIR="/var/log/audiobookshelf"
+FFMPEG_INSTALL_DIR="/usr/lib/audiobookshelf-ffmpeg/"

 declare -r init_type='auto'
 declare -ri no_rebuild='0'

+add_user() {
+  : "${1:?'User was not defined'}"
+  declare -r user="$1"
+  declare -r uid="$2"
+
+  if [ -z "$uid" ]; then
+    declare -r uid_flags=""
+  else
+    declare -r uid_flags="--uid $uid"
+  fi
+
+  declare -r group="${3:-$user}"
+  declare -r descr="${4:-No description}"
+  declare -r shell="${5:-/bin/false}"
+
+  if ! getent passwd | grep -q "^$user:"; then
+    echo "Creating system user: $user in $group with $descr and shell $shell"
+    useradd $uid_flags --gid $group --no-create-home --system --shell $shell -c "$descr" $user
+  fi
+}
+
+add_group() {
+  : "${1:?'Group was not defined'}"
+  declare -r group="$1"
+  declare -r gid="$2"
+
+  if [ -z "$gid" ]; then
+    declare -r gid_flags=""
+  else
+    declare -r gid_flags="--gid $gid"
+  fi
+
+  if ! getent group | grep -q "^$group:" ; then
+    echo "Creating system group: $group"
+    groupadd $gid_flags --system $group
+  fi
+}
+
 start_service () {
  : "${1:?'Service name was not defined'}"
  declare -r service_name="$1"
@ -38,10 +76,13 @@ start_service () {
  fi
 }

-# Create log directory if not there and set ownership
-if [ ! -d "$ABS_LOG_DIR" ]; then
-  mkdir -p "$ABS_LOG_DIR"
-  chown -R 'audiobookshelf:audiobookshelf' "$ABS_LOG_DIR"
-fi
+
+add_group 'audiobookshelf' ''
+add_user 'audiobookshelf' '' 'audiobookshelf' 'audiobookshelf user-daemon' '/bin/false'
+
+mkdir -p '/var/log/audiobookshelf'
+chown -R 'audiobookshelf:audiobookshelf' '/var/log/audiobookshelf'
+chown -R 'audiobookshelf:audiobookshelf' '/usr/share/audiobookshelf'
+chown -R 'audiobookshelf:audiobookshelf' "$FFMPEG_INSTALL_DIR"

 start_service 'audiobookshelf'
--- a/build/debian/DEBIAN/preinst
+++ b/build/debian/DEBIAN/preinst
@ -2,46 +2,96 @@
 set -e
 set -o pipefail

-DEFAULT_DATA_DIR="/usr/share/audiobookshelf"
-CONFIG_PATH="/etc/default/audiobookshelf"
-DEFAULT_PORT=13378
+FFMPEG_INSTALL_DIR="/usr/lib/audiobookshelf-ffmpeg/"
+DEFAULT_AUDIOBOOK_PATH="/usr/share/audiobookshelf/audiobooks"
+DEFAULT_DATA_PATH="/usr/share/audiobookshelf"
+DEFAULT_PORT=7331
 DEFAULT_HOST="0.0.0.0"

-add_user() {
-  : "${1:?'User was not defined'}"
-  declare -r user="$1"
-  declare -r uid="$2"
+CONFIG_PATH="/etc/default/audiobookshelf"

-  if [ -z "$uid" ]; then
-    declare -r uid_flags=""
-  else
-    declare -r uid_flags="--uid $uid"
+install_ffmpeg() {
+  echo "Starting FFMPEG Install"
+
+  WGET="wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-amd64-static.tar.xz"
+
+  if ! cd "$FFMPEG_INSTALL_DIR"; then
+    echo "WARNING: can't access working directory ($FFMPEG_INSTALL_DIR) creating it" >&2
+    mkdir "$FFMPEG_INSTALL_DIR"
+    cd "$FFMPEG_INSTALL_DIR"
  fi

-  declare -r group="${3:-$user}"
-  declare -r descr="${4:-No description}"
-  declare -r shell="${5:-/bin/false}"
+  $WGET
+  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1
+  rm ffmpeg-git-amd64-static.tar.xz

-  if ! getent passwd "$user" 2>&1 >/dev/null; then
-    echo "Creating system user: $user in $group with $descr and shell $shell"
-    useradd $uid_flags --gid $group --no-create-home --system --shell $shell -c "$descr" $user
+  echo "Good to go on Ffmpeg... hopefully"
+}
+
+should_build_config() {
+  if [ -f "$CONFIG_PATH" ]; then
+    echo "You already have a config file. Do you want to use it?"
+
+    options=("Yes" "No")
+    select yn in "${options[@]}"
+    do
+      case $yn in
+          "Yes") 
+            false; return
+            ;;
+          "No")
+            true; return
+            ;;
+      esac
+    done
+  else 
+    echo "No existing config found in $CONFIG_PATH"
+    true; return
  fi
 }

-add_group() {
-  : "${1:?'Group was not defined'}"
-  declare -r group="$1"
-  declare -r gid="$2"
+setup_config_interactive() {
+  if should_build_config; then
+    echo "Okay, let's setup a new config."

-  if [ -z "$gid" ]; then
-    declare -r gid_flags=""
-  else
-    declare -r gid_flags="--gid $gid"
-  fi
+    AUDIOBOOK_PATH=""
+    read -p "
+    Enter path for your audiobooks [Default: $DEFAULT_AUDIOBOOK_PATH]:" AUDIOBOOK_PATH
+
+    if [[ -z "$AUDIOBOOK_PATH" ]]; then
+      AUDIOBOOK_PATH="$DEFAULT_AUDIOBOOK_PATH"
+    fi
+
+    DATA_PATH=""
+    read -p "
+    Enter path for data files, i.e. streams, downloads, database [Default: $DEFAULT_DATA_PATH]:" DATA_PATH
+
+    if [[ -z "$DATA_PATH" ]]; then
+      DATA_PATH="$DEFAULT_DATA_PATH"
+    fi
+
+    PORT=""
+    read -p "
+    Port for the web ui [Default: $DEFAULT_PORT]:" PORT
+
+    if [[ -z "$PORT" ]]; then
+      PORT="$DEFAULT_PORT"
+    fi
+
+    config_text="AUDIOBOOK_PATH=$AUDIOBOOK_PATH
+  METADATA_PATH=$DATA_PATH/metadata
+  CONFIG_PATH=$DATA_PATH/config
+  FFMPEG_PATH=/usr/lib/audiobookshelf-ffmpeg/ffmpeg
+  FFPROBE_PATH=/usr/lib/audiobookshelf-ffmpeg/ffprobe
+  PORT=$PORT
+  HOST=$DEFAULT_HOST"
+
+    echo "$config_text"
+
+    echo "$config_text" > /etc/default/audiobookshelf;
+
+    echo "Config created"

-  if ! getent group "$group" 2>&1 >/dev/null; then
-    echo "Creating system group: $group"
-    groupadd $gid_flags --system $group
  fi
 }

@ -49,22 +99,16 @@ setup_config() {
  if [ -f "$CONFIG_PATH" ]; then
    echo "Existing config found."
    cat $CONFIG_PATH
-
  else
-
-    if [ ! -d "$DEFAULT_DATA_DIR" ]; then
-      # Create directory and set permissions
-      echo "Creating default data dir at $DEFAULT_DATA_DIR"
-      mkdir "$DEFAULT_DATA_DIR"
-      chown -R 'audiobookshelf:audiobookshelf' "$DEFAULT_DATA_DIR"
-    fi
-
    echo "Creating default config."

-    config_text="METADATA_PATH=$DEFAULT_DATA_DIR/metadata
-CONFIG_PATH=$DEFAULT_DATA_DIR/config
-PORT=$DEFAULT_PORT
-HOST=$DEFAULT_HOST"
+    config_text="AUDIOBOOK_PATH=$DEFAULT_AUDIOBOOK_PATH
+  METADATA_PATH=$DEFAULT_DATA_PATH/metadata
+  CONFIG_PATH=$DEFAULT_DATA_PATH/config
+  FFMPEG_PATH=/usr/lib/audiobookshelf-ffmpeg/ffmpeg
+  FFPROBE_PATH=/usr/lib/audiobookshelf-ffmpeg/ffprobe
+  PORT=$DEFAULT_PORT
+  HOST=$DEFAULT_HOST"

    echo "$config_text"

@ -74,8 +118,6 @@ HOST=$DEFAULT_HOST"
  fi
 }

-add_group 'audiobookshelf' ''
-
-add_user 'audiobookshelf' '' 'audiobookshelf' 'audiobookshelf user-daemon' '/bin/false'
-
 setup_config
+
+install_ffmpeg
--- a/build/debian/lib/systemd/system/audiobookshelf.service
+++ b/build/debian/lib/systemd/system/audiobookshelf.service
@ -10,7 +10,7 @@ ExecStart=/usr/share/audiobookshelf/audiobookshelf
 ExecReload=/bin/kill -HUP $MAINPID
 Restart=always
 User=audiobookshelf
-Group=audiobookshelf
+PermissionsStartOnly=true

 [Install]
 WantedBy=multi-user.target
--- a/build/debian/usr/lib/audiobookshelf-ffmpeg/.gitkeep
+++ b/build/debian/usr/lib/audiobookshelf-ffmpeg/.gitkeep
--- a/build/debian/usr/share/audiobookshelf/.gitkeep
+++ b/build/debian/usr/share/audiobookshelf/.gitkeep
--- a/build/linuxpackager
+++ b/build/linuxpackager
@ -48,10 +48,11 @@ Description: $DESCRIPTION"
 echo "$controlfile" > dist/debian/DEBIAN/control;

 # Package debian
-pkg -t node20-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
+pkg -t node16-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .

-fakeroot dpkg-deb -Zxz --build dist/debian
+fakeroot dpkg-deb --build dist/debian

 mv dist/debian.deb "dist/$OUTPUT_FILE"
+chmod +x "dist/$OUTPUT_FILE"

 echo "Finished! Filename: $OUTPUT_FILE"
--- a/client/assets/absicons.css
+++ b/client/assets/absicons.css
@ -1,106 +0,0 @@
-@font-face {
-  font-family: 'absicons';
-  src: url('~static/fonts/absicons/absicons.eot?2jfq33');
-  src: url('~static/fonts/absicons/absicons.eot?2jfq33#iefix') format('embedded-opentype'),
-    url('~static/fonts/absicons/absicons.ttf?2jfq33') format('truetype'),
-    url('~static/fonts/absicons/absicons.woff?2jfq33') format('woff'),
-    url('~static/fonts/absicons/absicons.svg?2jfq33#absicons') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-.abs-icons {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'absicons' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-books-1:before {
-  content: "\e905";
-}
-
-.icon-microphone-1:before {
-  content: "\e902";
-}
-
-.icon-radio:before {
-  content: "\e903";
-}
-
-.icon-podcast:before {
-  content: "\e904";
-}
-
-.icon-audiobookshelf:before {
-  content: "\e900";
-}
-
-.icon-database:before {
-  content: "\e906";
-}
-
-.icon-microphone-2:before {
-  content: "\e901";
-}
-
-.icon-headphones:before {
-  content: "\e910";
-}
-
-.icon-music:before {
-  content: "\e911";
-}
-
-.icon-video:before {
-  content: "\e914";
-}
-
-.icon-microphone-3:before {
-  content: "\e91e";
-}
-
-.icon-book-1:before {
-  content: "\e91f";
-}
-
-.icon-books-2:before {
-  content: "\e920";
-}
-
-.icon-file-picture:before {
-  content: "\e927";
-}
-
-.icon-database-1:before {
-  content: "\e964";
-}
-
-.icon-rocket:before {
-  content: "\e9a5";
-}
-
-.icon-power:before {
-  content: "\e9b5";
-}
-
-.icon-star:before {
-  content: "\e9d9";
-}
-
-.icon-heart:before {
-  content: "\e9da";
-}
-
-.icon-rss:before {
-  content: "\ea9b";
-}
--- a/client/assets/app.css
+++ b/client/assets/app.css
@ -1,11 +1,9 @@
@import './fonts.css';
@import './transitions.css';
@import './draggable.css';
-@import './defaultStyles.css';
-@import './absicons.css';

 :root {
-  --bookshelf-texture-img: url(~static/textures/wood_default.jpg);
+  --bookshelf-texture-img: url(/textures/wood_default.jpg);
  --bookshelf-divider-bg: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
 }

@ -14,33 +12,18 @@
  height: calc(100% - 64px);
  max-height: calc(100% - 64px);
 }
-
 .page.streaming {
  height: calc(100% - 64px - 165px);
  max-height: calc(100% - 64px - 165px);
 }
-
 #bookshelf {
  height: calc(100% - 40px);
  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
-
-  /* For Firefox */
-  scrollbar-width: thin;
-  scrollbar-color: #855620 rgba(0, 0, 0, 0);
 }
-
-.bookshelf-row {
-  width: calc(100vw - (100vw - 100%));
-}
-
@media (max-width: 768px) {
  #bookshelf {
    height: calc(100% - 80px);
  }
-
-  .bookshelf-row {
-    width: 100vw;
-  }
 }

 #page-wrapper {
@ -51,25 +34,36 @@
 ::-webkit-scrollbar {
  width: 8px;
 }
-
 ::-webkit-scrollbar:horizontal {
  height: 8px;
 }
-
+/* ::-webkit-scrollbar:horizontal { */
+  /* height: 16px; */
+  /* height: 24px;
+} */
 /* Track */
 ::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgba(0,0,0,0);
 }
-
+/* ::-webkit-scrollbar-track:horizontal { */
+  /* background: rgb(149, 119, 90); */
+  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
+  /* background: linear-gradient(180deg, rgb(117, 88, 60) 0%, rgb(65, 41, 17) 17%, rgb(71, 43, 15) 88%, rgb(3, 2, 1) 100%);
+  box-shadow: 2px 14px 8px #111111aa;
+} */
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #855620;
+  background: #855620; 
  border-radius: 4px;
 }
-
+/* ::-webkit-scrollbar-thumb:horizontal { */
+  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
+  /* box-shadow: 2px 14px 8px #111111aa; 
+  border-radius: 4px;
+} */
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #704922;
+  background: #704922; 
 }

 .no-scroll::-webkit-scrollbar {
@ -77,13 +71,6 @@
  opacity: 0;
 }

-.no-scroll {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
-
 /* Chrome, Safari, Edge, Opera */
 .no-spinner::-webkit-outer-spin-button,
 .no-spinner::-webkit-inner-spin-button {
@ -92,32 +79,28 @@
 }

 /* Firefox */
-input[type='number'] {
+input[type=number] {
  -moz-appearance: textfield;
 }

+
 .tracksTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #474747;
 }
-
 .tracksTable tr:nth-child(even) {
  background-color: #2e2e2e;
 }
-
 .tracksTable tr {
  background-color: #373838;
 }
-
-.tracksTable tr:hover:not(:has(th)) {
+.tracksTable tr:hover {
  background-color: #474747;
 }
-
 .tracksTable td {
  padding: 4px 8px;
 }
-
 .tracksTable th {
  padding: 4px 8px;
  font-size: 0.75rem;
@ -130,22 +113,13 @@ input[type='number'] {
  border-right: 6px solid transparent;
  border-top: 6px solid white;
 }
-
-.arrow-down-small {
-  width: 0;
-  height: 0;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid currentColor;
-}
-
 .triangle-right {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-bottom: 8px solid transparent;
-  border-top: 8px solid rgb(34, 127, 35);
-  border-right: 8px solid rgb(34, 127, 35);
+  border-top: 8px solid rgb(34,127,35);
+  border-right: 8px solid rgb(34,127,35);
 }

 .icon-text {
@ -175,11 +149,6 @@ input[type='number'] {
 .box-shadow-book {
  box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166;
 }
-
-.box-shadow-progressbar {
-  box-shadow: 0px -1px 4px rgb(62, 50, 2, 0.5);
-}
-
 .shadow-height {
  height: calc(100% - 4px);
 }
@ -196,9 +165,9 @@ input[type='number'] {
 Bookshelf Label
 */
 .categoryPlacard {
+  background-image: url(https://image.freepik.com/free-photo/brown-wooden-textured-flooring-background_53876-128537.jpg);
  letter-spacing: 1px;
 }
-
 .shinyBlack {
  background-color: #2d3436;
  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
@ -207,6 +176,7 @@ Bookshelf Label
  color: #fce3a6;
 }

+
 .cover-bg {
  width: calc(100% + 40px);
  height: calc(100% + 40px);
@ -218,35 +188,14 @@ Bookshelf Label
  filter: blur(20px);
 }

-/* Padding for toastification toasts in the top right to not cover appbar/toolbar */
-.app-bar-and-toolbar .Vue-Toastification__container.top-right {
-  padding-top: 104px;
-}

-.app-bar .Vue-Toastification__container.top-right {
-  padding-top: 64px;
-}
-
-.no-bars .Vue-Toastification__container.top-right {
-  padding-top: 8px;
-}
-
-.abs-btn::before {
-  content: '';
-  position: absolute;
-  border-radius: 6px;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0);
-  transition: all 0.1s ease-in-out;
-}
-
-.abs-btn:hover:not(:disabled)::before {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.abs-btn:disabled::before {
-  background-color: rgba(0, 0, 0, 0.2);
-}
+.episode-subtitle {
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-height: 16px; /* fallback */
+  max-height: 32px; /* fallback */
+  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
--- a/client/assets/defaultStyles.css
+++ b/client/assets/defaultStyles.css
@ -1,68 +0,0 @@
-/*
-
-  This is for setting regular html styles for places where embedding HTML will be
-  like podcast episode descriptions. Otherwise TailwindCSS will have stripped all default markup.
-
-*/
-
-.default-style p {
-  display: block;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-}
-
-.default-style a {
-  text-decoration: none;
-  color: #5985ff;
-}
-
-.default-style ul {
-  display: block;
-  list-style: circle;
-  list-style-type: disc;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-  padding-inline-start: 40px;
-}
-
-.default-style ol {
-  display: block;
-  list-style: decimal;
-  list-style-type: decimal;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-  padding-inline-start: 40px;
-}
-
-.default-style li {
-  display: list-item;
-  text-align: -webkit-match-parent;
-}
-
-.default-style li::marker {
-  unicode-bidi: isolate;
-  font-variant-numeric: tabular-nums;
-  text-transform: none;
-  text-indent: 0px !important;
-  text-align: start !important;
-  text-align-last: start !important;
-}
-
-.default-style.less-spacing p {
-  margin-block-start: 0;
-}
-
-.default-style.less-spacing ul {
-  margin-block-start: 0;
-}
-
-.default-style.less-spacing ol {
-  margin-block-start: 0;
-}
-
--- a/client/assets/draggable.css
+++ b/client/assets/draggable.css
@ -1,40 +1,34 @@
 .flip-list-move {
  transition: transform 0.5s;
 }
-
 .no-move {
  transition: transform 0s;
 }
-
 .ghost {
  opacity: 0.5;
  background-color: rgba(255, 255, 255, 0.25);
 }
-
 .list-group {
  min-height: 30px;
 }
-
+#librariesTable .item {
+  cursor: n-resize;
+}
 .drag-handle {
  cursor: n-resize;
 }
-
 .list-group-item:not(.exclude) {
  cursor: n-resize;
 }
-
 .list-group-item.exclude {
  cursor: not-allowed;
 }
-
 .list-group-item:not(.ghost):not(.exclude):hover {
  background-color: rgba(0, 0, 0, 0.1);
 }
-
 .list-group-item:nth-child(even):not(.ghost):not(.exclude) {
  background-color: rgba(0, 0, 0, 0.25);
 }
-
 .list-group-item:nth-child(even):not(.ghost):not(.exclude):hover {
  background-color: rgba(0, 0, 0, 0.1);
 }
@ -42,7 +36,6 @@
 .list-group-item.exclude:not(.ghost) {
  background-color: rgba(255, 0, 0, 0.25);
 }
-
 .list-group-item.exclude:not(.ghost):hover {
  background-color: rgba(223, 0, 0, 0.25);
 }
--- a/client/assets/fonts.css
+++ b/client/assets/fonts.css
@ -1,12 +1,19 @@
+
@font-face {
-  font-family: 'Material Symbols Rounded';
+  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
-  src: url(~static/fonts/MaterialSymbolsRounded.woff2) format('woff2');
+  src: url(/fonts/MaterialIcons.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/MaterialIconsOutlined.woff2) format('woff2');
 }

-.material-symbols {
-  font-family: 'Material Symbols Rounded';
+.material-icons {
+  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
@ -16,281 +23,45 @@
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
-  vertical-align: top;
 }
-
-.material-symbols.fill {
-  font-variation-settings:
-    'FILL' 1
+.material-icons:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
+  font-size: 1.5rem;
 }
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+.material-icons-outlined:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
+  font-size: 1.5rem;
 }

-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}

-/* greek-ext */
@font-face {
-  font-family: 'Source Sans Pro';
+  font-family: 'Gentium Book Basic';
  font-style: normal;
-  font-weight: 300;
+  font-weight: 400;
  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
-
 /* latin */
@font-face {
-  font-family: 'Source Sans Pro';
+  font-family: 'Gentium Book Basic';
  font-style: normal;
-  font-weight: 300;
+  font-weight: 400;
  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Ubuntu Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Ubuntu Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-family: 'Ubuntu Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-family: 'Ubuntu Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
-  unicode-range: U+0370-03FF;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Ubuntu Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Ubuntu Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+}
--- a/client/assets/tailwind.css
+++ b/client/assets/tailwind.css
@ -1,85 +0,0 @@
-@import 'tailwindcss';
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-
-  [role='button'],
-  button {
-    cursor: pointer;
-  }
-}
-
-@theme {
-  --spacing-0\.5e: 0.125em;
-  --spacing-1e: 0.25em;
-  --spacing-1\.5e: 0.375em;
-  --spacing-2e: 0.5em;
-  --spacing-2\.5e: 0.625em;
-  --spacing-3e: 0.75em;
-  --spacing-3\.5e: 0.875em;
-  --spacing-4e: 1em;
-  --spacing-5e: 1.25em;
-  --spacing-6e: 1.5em;
-  --spacing-7e: 1.75em;
-  --spacing-8e: 2em;
-  --spacing-9e: 2.25em;
-  --spacing-10e: 2.5em;
-  --spacing-11e: 2.75em;
-  --spacing-12e: 3em;
-  --spacing-14e: 3.5em;
-  --spacing-16e: 4em;
-  --spacing-20e: 5em;
-  --spacing-24e: 6em;
-  --spacing-28e: 7em;
-  --spacing-32e: 8em;
-  --spacing-36e: 9em;
-  --spacing-40e: 10em;
-  --spacing-44e: 11em;
-  --spacing-48e: 12em;
-  --spacing-52e: 13em;
-  --spacing-56e: 14em;
-  --spacing-60e: 15em;
-  --spacing-64e: 16em;
-  --spacing-72e: 18em;
-  --spacing-80e: 20em;
-  --spacing-96e: 24em;
-
-  --color-bg: #373838;
-  --color-primary: #232323;
-  --color-accent: #1ad691;
-  --color-error: #ff5252;
-  --color-info: #2196f3;
-  --color-success: #4caf50;
-  --color-warning: #fb8c00;
-  --color-darkgreen: rgb(34, 127, 35);
-  --color-black-50: #bbbbbb;
-  --color-black-100: #666666;
-  --color-black-200: #555555;
-  --color-black-300: #444444;
-  --color-black-400: #333333;
-  --color-black-500: #222222;
-  --color-black-600: #111111;
-  --color-black-700: #101010;
-
-  --font-sans: 'Source Sans Pro';
-  --font-mono: 'Ubuntu Mono';
-
-  --text-xxs: 0.625rem;
-  --text-1\.5xl: 1.375rem;
-  --text-2\.5xl: 1.6875rem;
-  --text-4\.5xl: 2.625rem;
-}
--- a/client/assets/transitions.css
+++ b/client/assets/transitions.css
@ -20,67 +20,42 @@
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 }

-.slide-enter-to,
-.slide-leave {
+.slide-enter-to, .slide-leave {
  max-height: 600px;
  overflow: hidden;
 }

-.slide-enter,
-.slide-leave-to {
+.slide-enter, .slide-leave-to {
  overflow: hidden;
  max-height: 0;
 }



-.menu-enter,
-.menu-leave-active {
+.menu-enter, .menu-leave-active {
  transform: translateY(-15px);
 }
-
 .menu-enter-active {
  transition: all 0.2s;
 }
-
 .menu-leave-active {
  transition: all 0.1s;
 }
-
 .menu-enter,
 .menu-leave-active {
  opacity: 0;
 }

-.menux-enter,
-.menux-leave-active {
+.menux-enter, .menux-leave-active {
  transform: translateX(15px);
 }
-
 .menux-enter-active {
  transition: all 0.2s;
 }
-
 .menux-leave-active {
  transition: all 0.1s;
 }
-
 .menux-enter,
 .menux-leave-active {
  opacity: 0;
-}
-
-
-.list-complete-item {
-  transition: all 0.8s ease;
-}
-
-.list-complete-enter-from,
-.list-complete-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.list-complete-leave-active {
-  position: absolute;
 }
--- a/client/assets/trix.css
+++ b/client/assets/trix.css
@ -1,570 +0,0 @@
-@charset "UTF-8";
-
-/*
-Trix 1.3.1
-Copyright © 2020 Basecamp, LLC
-http://trix-editor.org/*/
-trix-editor {
-  border: 1px solid rgb(75, 85, 99);
-  border-radius: 3px;
-  background: rgb(35, 35, 35);
-  margin: 0;
-  padding: 0.4em 0.6em;
-  min-height: 5em;
-  outline: none;
-}
-
-trix-toolbar * {
-  box-sizing: border-box;
-}
-
-trix-toolbar .trix-button-row {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  overflow-x: auto;
-}
-
-trix-toolbar .trix-button-group {
-  display: flex;
-  margin-bottom: 10px;
-  border: 1px solid rgb(75, 85, 99);
-  border-top-color: rgb(75, 85, 99);
-  border-bottom-color: rgb(75, 85, 99);
-  border-radius: 3px;
-}
-
-trix-toolbar .trix-button-group:not(:first-child) {
-  margin-left: 1.5vw;
-}
-
-@media (max-device-width: 768px) {
-  trix-toolbar .trix-button-group:not(:first-child) {
-    margin-left: 0;
-  }
-}
-
-trix-toolbar .trix-button-group-spacer {
-  flex-grow: 1;
-}
-
-@media (max-device-width: 768px) {
-  trix-toolbar .trix-button-group-spacer {
-    display: none;
-  }
-}
-
-trix-toolbar .trix-button {
-  position: relative;
-  float: left;
-  color: rgba(0, 0, 0, 0.6);
-  font-size: 0.75em;
-  font-weight: 600;
-  white-space: nowrap;
-  padding: 0 0.5em;
-  margin: 0;
-  outline: none;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-}
-
-trix-toolbar .trix-button:not(:first-child) {
-  border-left: 1px solid rgb(75, 85, 99);
-}
-
-trix-toolbar .trix-button.trix-active {
-  background: #bbb;
-  color: black;
-}
-
-trix-toolbar .trix-button:not(:disabled) {
-  cursor: pointer;
-  background: rgb(35, 35, 35);
-}
-
-trix-toolbar .trix-button:disabled {
-  color: rgba(0, 0, 0, 0.25);
-}
-
-@media (max-device-width: 768px) {
-  trix-toolbar .trix-button {
-    letter-spacing: -0.01em;
-    padding: 0 0.3em;
-  }
-}
-
-trix-toolbar .trix-button--icon {
-  font-size: inherit;
-  width: 2.6em;
-  height: 1.6em;
-  max-width: calc(0.8em + 4vw);
-  text-indent: -9999px;
-}
-
-@media (max-device-width: 768px) {
-  trix-toolbar .trix-button--icon {
-    height: 2em;
-    max-width: calc(0.8em + 3.5vw);
-  }
-}
-
-trix-toolbar .trix-button--icon::before {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  opacity: 0.6;
-  content: "";
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  filter: invert(100%);
-}
-
-@media (max-device-width: 768px) {
-  trix-toolbar .trix-button--icon::before {
-    right: 6%;
-    left: 6%;
-  }
-}
-
-trix-toolbar .trix-button--icon.trix-active::before {
-  opacity: 1;
-}
-
-trix-toolbar .trix-button--icon:disabled::before {
-  opacity: 0.125;
-}
-
-trix-toolbar .trix-button--icon-attach::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
-  top: 8%;
-  bottom: 4%;
-}
-
-trix-toolbar .trix-button--icon-bold::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-italic::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-link::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-strike::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-quote::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-heading-1::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-code::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-bullet-list::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-number-list::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-undo::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-redo::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-decrease-nesting-level::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-button--icon-increase-nesting-level::before {
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
-}
-
-trix-toolbar .trix-dialogs {
-  position: relative;
-}
-
-trix-toolbar .trix-dialog {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  font-size: 0.75em;
-  padding: 15px 10px;
-  background: rgb(48, 48, 48);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border: 1px solid rgb(112, 112, 112);
-  border-radius: 5px;
-  z-index: 5;
-}
-
-trix-toolbar .trix-input--dialog {
-  font-size: inherit;
-  font-weight: normal;
-  padding: 0.5em 0.8em;
-  margin: 0 10px 0 0;
-  border-radius: 3px;
-  border: 1px solid #bbb;
-  background-color: rgb(95, 95, 95);
-  box-shadow: none;
-  outline: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-trix-toolbar .trix-input--dialog.validate:invalid {
-  box-shadow: #F00 0px 0px 1.5px 1px;
-}
-
-trix-toolbar .trix-button--dialog {
-  font-size: inherit;
-  padding: 0.5em;
-  border-bottom: none;
-  color: #eee;
-}
-
-trix-toolbar .trix-dialog--link {
-  max-width: 600px;
-}
-
-trix-toolbar .trix-dialog__link-fields {
-  display: flex;
-  align-items: baseline;
-}
-
-trix-toolbar .trix-dialog__link-fields .trix-input {
-  flex: 1;
-}
-
-trix-toolbar .trix-dialog__link-fields .trix-button-group {
-  flex: 0 0 content;
-  margin: 0;
-}
-
-trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-trix-editor [data-trix-mutable]::-moz-selection,
-trix-editor [data-trix-cursor-target]::-moz-selection,
-trix-editor [data-trix-mutable] ::-moz-selection {
-  background: none;
-}
-
-trix-editor [data-trix-mutable]::selection,
-trix-editor [data-trix-cursor-target]::selection,
-trix-editor [data-trix-mutable] ::selection {
-  background: none;
-}
-
-trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
-  background: highlight;
-}
-
-trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
-  background: highlight;
-}
-
-trix-editor [data-trix-mutable].attachment.attachment--file {
-  box-shadow: 0 0 0 2px highlight;
-  border-color: transparent;
-}
-
-trix-editor [data-trix-mutable].attachment img {
-  box-shadow: 0 0 0 2px highlight;
-}
-
-trix-editor .attachment {
-  position: relative;
-}
-
-trix-editor .attachment:hover {
-  cursor: default;
-}
-
-trix-editor .attachment--preview .attachment__caption:hover {
-  cursor: text;
-}
-
-trix-editor .attachment__progress {
-  position: absolute;
-  z-index: 1;
-  height: 20px;
-  top: calc(50% - 10px);
-  left: 5%;
-  width: 90%;
-  opacity: 0.9;
-  transition: opacity 200ms ease-in;
-}
-
-trix-editor .attachment__progress[value="100"] {
-  opacity: 0;
-}
-
-trix-editor .attachment__caption-editor {
-  display: inline-block;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  color: inherit;
-  text-align: center;
-  vertical-align: top;
-  border: none;
-  outline: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-trix-editor .attachment__toolbar {
-  position: absolute;
-  z-index: 1;
-  top: -0.9em;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-trix-editor .trix-button-group {
-  display: inline-flex;
-}
-
-trix-editor .trix-button {
-  position: relative;
-  float: left;
-  color: #666;
-  white-space: nowrap;
-  font-size: 80%;
-  padding: 0 0.8em;
-  margin: 0;
-  outline: none;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-}
-
-trix-editor .trix-button:not(:first-child) {
-  border-left: 1px solid #ccc;
-}
-
-trix-editor .trix-button.trix-active {
-  background: #cbeefa;
-}
-
-trix-editor .trix-button:not(:disabled) {
-  cursor: pointer;
-}
-
-trix-editor .trix-button--remove {
-  text-indent: -9999px;
-  display: inline-block;
-  padding: 0;
-  outline: none;
-  width: 1.8em;
-  height: 1.8em;
-  line-height: 1.8em;
-  border-radius: 50%;
-  background-color: #fff;
-  border: 2px solid highlight;
-  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
-}
-
-trix-editor .trix-button--remove::before {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  opacity: 0.7;
-  content: "";
-  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 90%;
-}
-
-trix-editor .trix-button--remove:hover {
-  border-color: #333;
-}
-
-trix-editor .trix-button--remove:hover::before {
-  opacity: 1;
-}
-
-trix-editor .attachment__metadata-container {
-  position: relative;
-}
-
-trix-editor .attachment__metadata {
-  position: absolute;
-  left: 50%;
-  top: 2em;
-  transform: translate(-50%, 0);
-  max-width: 90%;
-  padding: 0.1em 0.6em;
-  font-size: 0.8em;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 3px;
-}
-
-trix-editor .attachment__metadata .attachment__name {
-  display: inline-block;
-  max-width: 100%;
-  vertical-align: bottom;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-trix-editor .attachment__metadata .attachment__size {
-  margin-left: 0.2em;
-  white-space: nowrap;
-}
-
-.trix-content {
-  line-height: inherit;
-}
-
-.trix-content * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-.trix-content p {
-  box-sizing: border-box;
-  margin-top: 0;
-  margin-bottom: 0.5em;
-  padding: 0;
-}
-
-.trix-content h1 {
-  font-size: 1.2em;
-  line-height: 1.2;
-}
-
-.trix-content blockquote {
-  border: 0 solid #ccc;
-  border-left-width: 0.3em;
-  margin-left: 0.3em;
-  padding-left: 0.6em;
-}
-
-.trix-content [dir=rtl] blockquote,
-.trix-content blockquote[dir=rtl] {
-  border-width: 0;
-  border-right-width: 0.3em;
-  margin-right: 0.3em;
-  padding-right: 0.6em;
-}
-
-.trix-content li {
-  margin-left: 1em;
-}
-
-.trix-content [dir=rtl] li {
-  margin-right: 1em;
-}
-
-.trix-content pre {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-  font-family: monospace;
-  font-size: 0.9em;
-  padding: 0.5em;
-  white-space: pre;
-  background-color: #eee;
-  overflow-x: auto;
-}
-
-.trix-content img {
-  max-width: 100%;
-  height: auto;
-}
-
-.trix-content .attachment {
-  display: inline-block;
-  position: relative;
-  max-width: 100%;
-}
-
-.trix-content .attachment a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.trix-content .attachment a:hover,
-.trix-content .attachment a:visited:hover {
-  color: inherit;
-}
-
-.trix-content .attachment__caption {
-  text-align: center;
-}
-
-.trix-content .attachment__caption .attachment__name+.attachment__size::before {
-  content: ' · ';
-}
-
-.trix-content .attachment--preview {
-  width: 100%;
-  text-align: center;
-}
-
-.trix-content .attachment--preview .attachment__caption {
-  color: #666;
-  font-size: 0.9em;
-  line-height: 1.2;
-}
-
-.trix-content .attachment--file {
-  color: #333;
-  line-height: 1;
-  margin: 0 2px 2px 2px;
-  padding: 0.4em 1em;
-  border: 1px solid #bbb;
-  border-radius: 5px;
-}
-
-.trix-content .attachment-gallery {
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-}
-
-.trix-content .attachment-gallery .attachment {
-  flex: 1 0 33%;
-  padding: 0 0.5em;
-  max-width: 33%;
-}
-
-.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
-.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
-  flex-basis: 50%;
-  max-width: 50%;
-}
--- a/client/components/AudioPlayer.vue
+++ b/client/components/AudioPlayer.vue
@ -0,0 +1,418 @@
+<template>
+  <div class="w-full -mt-6">
+    <div class="w-full relative mb-1">
+      <div class="absolute -top-10 md:top-0 right-0 md:right-2 flex items-center h-full">
+        <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden md:block" />
+
+        <div class="cursor-pointer text-gray-300 mx-1 md:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
+          <span v-if="!sleepTimerSet" class="material-icons" style="font-size: 1.7rem">snooze</span>
+          <div v-else class="flex items-center">
+            <span class="material-icons text-lg text-warning">snooze</span>
+            <p class="text-xl text-warning font-mono font-semibold text-center px-0.5 pb-0.5" style="min-width: 30px">{{ sleepTimerRemainingString }}</p>
+          </div>
+        </div>
+
+        <div v-if="!isPodcast" class="cursor-pointer text-gray-300 mx-1 md:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
+          <span class="material-icons" style="font-size: 1.7rem">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
+        </div>
+
+        <div v-if="chapters.length" class="cursor-pointer text-gray-300 mx-1 md:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
+          <span class="material-icons text-3xl">format_list_bulleted</span>
+        </div>
+      </div>
+
+      <div class="flex pt-4 pb-2 md:pt-0 md:pb-2">
+        <div class="flex-grow" />
+        <template v-if="!loading">
+          <div class="cursor-pointer flex items-center justify-center text-gray-300 mr-8" @mousedown.prevent @mouseup.prevent @click.stop="restart">
+            <span class="material-icons text-3xl">first_page</span>
+          </div>
+          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+            <span class="material-icons text-3xl">replay_10</span>
+          </div>
+          <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+            <span class="material-icons">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
+          </div>
+          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
+            <span class="material-icons text-3xl">forward_10</span>
+          </div>
+          <controls-playback-speed-control v-model="playbackRate" @input="playbackRateUpdated" @change="playbackRateChanged" />
+        </template>
+        <template v-else>
+          <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
+            <span class="material-icons">autorenew</span>
+          </div>
+        </template>
+
+        <div class="flex-grow" />
+      </div>
+    </div>
+    <div class="relative">
+      <!-- Track -->
+      <div ref="track" class="w-full h-2 bg-gray-700 relative cursor-pointer transform duration-100 hover:scale-y-125 overflow-hidden" @mousemove="mousemoveTrack" @mouseleave="mouseleaveTrack" @click.stop="clickTrack">
+        <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
+        <div ref="bufferTrack" class="h-full bg-gray-400 absolute top-0 left-0 pointer-events-none" />
+        <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
+        <div ref="trackCursor" class="h-full w-0.5 bg-gray-50 absolute top-0 left-0 opacity-0 pointer-events-none" />
+        <div v-if="loading" class="h-full w-1/4 absolute left-0 top-0 loadingTrack pointer-events-none bg-white bg-opacity-25" />
+      </div>
+      <div ref="track" class="w-full h-2 relative overflow-hidden">
+        <template v-for="(tick, index) in chapterTicks">
+          <div :key="index" :style="{ left: tick.left + 'px' }" class="absolute top-0 w-px bg-white bg-opacity-30 h-1 pointer-events-none" />
+        </template>
+      </div>
+
+      <!-- Hover timestamp -->
+      <div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
+        <p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5 truncate whitespace-nowrap">00:00</p>
+      </div>
+      <div ref="hoverTimestampArrow" class="absolute -top-3 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
+        <div class="absolute -bottom-1.5 left-0 right-0 w-full flex justify-center">
+          <div class="arrow-down" />
+        </div>
+      </div>
+    </div>
+    <div class="flex">
+      <p ref="currentTimestamp" class="font-mono text-sm text-gray-100 pointer-events-auto">00:00:00</p>
+      <p class="font-mono text-sm text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
+      <div class="flex-grow" />
+      <p class="text-sm text-gray-300 pt-0.5">{{ currentChapterName }}</p>
+      <div class="flex-grow" />
+      <p class="font-mono text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
+    </div>
+
+    <modals-chapters-modal v-model="showChaptersModal" :current-chapter="currentChapter" :chapters="chapters" @select="selectChapter" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: Boolean,
+    paused: Boolean,
+    chapters: {
+      type: Array,
+      default: () => []
+    },
+    bookmarks: {
+      type: Array,
+      default: () => []
+    },
+    sleepTimerSet: Boolean,
+    sleepTimerRemaining: Number,
+    isPodcast: Boolean
+  },
+  data() {
+    return {
+      volume: 1,
+      playbackRate: 1,
+      trackWidth: 0,
+      playedTrackWidth: 0,
+      bufferTrackWidth: 0,
+      readyTrackWidth: 0,
+      audioEl: null,
+      seekLoading: false,
+      showChaptersModal: false,
+      currentTime: 0,
+      trackOffsetLeft: 16, // Track is 16px from edge
+      duration: 0,
+      chapterTicks: []
+    }
+  },
+  computed: {
+    sleepTimerRemainingString() {
+      var rounded = Math.round(this.sleepTimerRemaining)
+      if (rounded < 90) {
+        return `${rounded}s`
+      }
+      var minutesRounded = Math.round(rounded / 60)
+      if (minutesRounded < 90) {
+        return `${minutesRounded}m`
+      }
+      var hoursRounded = Math.round(minutesRounded / 60)
+      return `${hoursRounded}h`
+    },
+    token() {
+      return this.$store.getters['user/getToken']
+    },
+    timeRemaining() {
+      return (this.duration - this.currentTime) / this.playbackRate
+    },
+    timeRemainingPretty() {
+      if (this.timeRemaining < 0) {
+        return this.$secondsToTimestamp(this.timeRemaining * -1)
+      }
+      return '-' + this.$secondsToTimestamp(this.timeRemaining)
+    },
+    progressPercent() {
+      if (!this.duration) return 0
+      return Math.round((100 * this.currentTime) / this.duration)
+    },
+    currentChapter() {
+      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
+    },
+    currentChapterName() {
+      return this.currentChapter ? this.currentChapter.title : ''
+    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    }
+  },
+  methods: {
+    setDuration(duration) {
+      this.duration = duration
+
+      this.chapterTicks = this.chapters.map((chap) => {
+        var perc = chap.start / this.duration
+        return {
+          title: chap.title,
+          left: perc * this.trackWidth
+        }
+      })
+    },
+    setCurrentTime(time) {
+      this.currentTime = time
+      this.updateTimestamp()
+      this.updatePlayedTrack()
+    },
+    playPause() {
+      this.$emit('playPause')
+    },
+    jumpBackward() {
+      this.$emit('jumpBackward')
+    },
+    jumpForward() {
+      this.$emit('jumpForward')
+    },
+    increaseVolume() {
+      if (this.volume >= 1) return
+      this.volume = Math.min(1, this.volume + 0.1)
+      this.setVolume(this.volume)
+    },
+    decreaseVolume() {
+      if (this.volume <= 0) return
+      this.volume = Math.max(0, this.volume - 0.1)
+      this.setVolume(this.volume)
+    },
+    setVolume(volume) {
+      this.$emit('setVolume', volume)
+    },
+    toggleMute() {
+      if (this.$refs.volumeControl && this.$refs.volumeControl.toggleMute) {
+        this.$refs.volumeControl.toggleMute()
+      }
+    },
+    increasePlaybackRate() {
+      var rates = [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
+      var currentRateIndex = rates.findIndex((r) => r === this.playbackRate)
+      if (currentRateIndex >= rates.length - 1) return
+      this.playbackRate = rates[currentRateIndex + 1] || 1
+      this.playbackRateChanged(this.playbackRate)
+    },
+    decreasePlaybackRate() {
+      var rates = [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
+      var currentRateIndex = rates.findIndex((r) => r === this.playbackRate)
+      if (currentRateIndex <= 0) return
+      this.playbackRate = rates[currentRateIndex - 1] || 1
+      this.playbackRateChanged(this.playbackRate)
+    },
+    setPlaybackRate(playbackRate) {
+      this.$emit('setPlaybackRate', playbackRate)
+    },
+    selectChapter(chapter) {
+      this.seek(chapter.start)
+      this.showChaptersModal = false
+    },
+    seek(time) {
+      this.$emit('seek', time)
+    },
+    playbackRateUpdated(playbackRate) {
+      this.setPlaybackRate(playbackRate)
+    },
+    playbackRateChanged(playbackRate) {
+      this.setPlaybackRate(playbackRate)
+      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
+        console.error('Failed to update settings', err)
+      })
+    },
+    mousemoveTrack(e) {
+      var offsetX = e.offsetX
+      var time = (offsetX / this.trackWidth) * this.duration
+      if (this.$refs.hoverTimestamp) {
+        var width = this.$refs.hoverTimestamp.clientWidth
+        this.$refs.hoverTimestamp.style.opacity = 1
+        var posLeft = offsetX - width / 2
+        if (posLeft + width + this.trackOffsetLeft > window.innerWidth) {
+          posLeft = window.innerWidth - width - this.trackOffsetLeft
+        } else if (posLeft < -this.trackOffsetLeft) {
+          posLeft = -this.trackOffsetLeft
+        }
+        this.$refs.hoverTimestamp.style.left = posLeft + 'px'
+      }
+
+      if (this.$refs.hoverTimestampArrow) {
+        var width = this.$refs.hoverTimestampArrow.clientWidth
+        var posLeft = offsetX - width / 2
+        this.$refs.hoverTimestampArrow.style.opacity = 1
+        this.$refs.hoverTimestampArrow.style.left = posLeft + 'px'
+      }
+      if (this.$refs.hoverTimestampText) {
+        var hoverText = this.$secondsToTimestamp(time)
+
+        var chapter = this.chapters.find((chapter) => chapter.start <= time && time < chapter.end)
+        if (chapter && chapter.title) {
+          hoverText += ` - ${chapter.title}`
+        }
+        this.$refs.hoverTimestampText.innerText = hoverText
+      }
+      if (this.$refs.trackCursor) {
+        this.$refs.trackCursor.style.opacity = 1
+        this.$refs.trackCursor.style.left = offsetX - 1 + 'px'
+      }
+    },
+    mouseleaveTrack() {
+      if (this.$refs.hoverTimestamp) {
+        this.$refs.hoverTimestamp.style.opacity = 0
+      }
+      if (this.$refs.hoverTimestampArrow) {
+        this.$refs.hoverTimestampArrow.style.opacity = 0
+      }
+      if (this.$refs.trackCursor) {
+        this.$refs.trackCursor.style.opacity = 0
+      }
+    },
+    restart() {
+      this.seek(0)
+    },
+    setStreamReady() {
+      this.readyTrackWidth = this.trackWidth
+      this.$refs.readyTrack.style.width = this.trackWidth + 'px'
+    },
+    setChunksReady(chunks, numSegments) {
+      var largestSeg = 0
+      for (let i = 0; i < chunks.length; i++) {
+        var chunk = chunks[i]
+        if (typeof chunk === 'string') {
+          var chunkRange = chunk.split('-').map((c) => Number(c))
+          if (chunkRange.length < 2) continue
+          if (chunkRange[1] > largestSeg) largestSeg = chunkRange[1]
+        } else if (chunk > largestSeg) {
+          largestSeg = chunk
+        }
+      }
+      var percentageReady = largestSeg / numSegments
+      var widthReady = Math.round(this.trackWidth * percentageReady)
+      if (this.readyTrackWidth === widthReady) return
+      this.readyTrackWidth = widthReady
+      this.$refs.readyTrack.style.width = widthReady + 'px'
+    },
+    updateTimestamp() {
+      var ts = this.$refs.currentTimestamp
+      if (!ts) {
+        console.error('No timestamp el')
+        return
+      }
+      var currTimeClean = this.$secondsToTimestamp(this.currentTime)
+      ts.innerText = currTimeClean
+    },
+    updatePlayedTrack() {
+      var perc = this.currentTime / this.duration
+      var ptWidth = Math.round(perc * this.trackWidth)
+      if (this.playedTrackWidth === ptWidth) {
+        return
+      }
+      this.$refs.playedTrack.style.width = ptWidth + 'px'
+      this.playedTrackWidth = ptWidth
+    },
+    clickTrack(e) {
+      if (this.loading) return
+
+      var offsetX = e.offsetX
+      var perc = offsetX / this.trackWidth
+      var time = perc * this.duration
+      if (isNaN(time) || time === null) {
+        console.error('Invalid time', perc, time)
+        return
+      }
+      this.seek(time)
+    },
+    setBufferTime(bufferTime) {
+      if (!this.audioEl) {
+        return
+      }
+      var bufferlen = (bufferTime / this.duration) * this.trackWidth
+      bufferlen = Math.round(bufferlen)
+      if (this.bufferTrackWidth === bufferlen || !this.$refs.bufferTrack) return
+      this.$refs.bufferTrack.style.width = bufferlen + 'px'
+      this.bufferTrackWidth = bufferlen
+    },
+    showChapters() {
+      if (!this.chapters.length) return
+      this.showChaptersModal = !this.showChaptersModal
+    },
+    init() {
+      this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
+      this.$emit('setPlaybackRate', this.playbackRate)
+      this.setTrackWidth()
+    },
+    setTrackWidth() {
+      if (this.$refs.track) {
+        this.trackWidth = this.$refs.track.clientWidth
+      } else {
+        console.error('Track not loaded', this.$refs)
+      }
+    },
+    settingsUpdated(settings) {
+      if (settings.playbackRate && this.playbackRate !== settings.playbackRate) {
+        this.setPlaybackRate(settings.playbackRate)
+      }
+    },
+    closePlayer() {
+      if (this.loading) return
+      this.$emit('close')
+    },
+    hotkey(action) {
+      if (action === this.$hotkeys.AudioPlayer.PLAY_PAUSE) this.playPause()
+      else if (action === this.$hotkeys.AudioPlayer.JUMP_FORWARD) this.jumpForward()
+      else if (action === this.$hotkeys.AudioPlayer.JUMP_BACKWARD) this.jumpBackward()
+      else if (action === this.$hotkeys.AudioPlayer.VOLUME_UP) this.increaseVolume()
+      else if (action === this.$hotkeys.AudioPlayer.VOLUME_DOWN) this.decreaseVolume()
+      else if (action === this.$hotkeys.AudioPlayer.MUTE_UNMUTE) this.toggleMute()
+      else if (action === this.$hotkeys.AudioPlayer.SHOW_CHAPTERS) this.showChapters()
+      else if (action === this.$hotkeys.AudioPlayer.INCREASE_PLAYBACK_RATE) this.increasePlaybackRate()
+      else if (action === this.$hotkeys.AudioPlayer.DECREASE_PLAYBACK_RATE) this.decreasePlaybackRate()
+      else if (action === this.$hotkeys.AudioPlayer.CLOSE) this.closePlayer()
+    },
+    windowResize() {
+      this.setTrackWidth()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.windowResize)
+    this.$store.commit('user/addSettingsListener', { id: 'audioplayer', meth: this.settingsUpdated })
+    this.init()
+    this.$eventBus.$on('player-hotkey', this.hotkey)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.windowResize)
+    this.$store.commit('user/removeSettingsListener', 'audioplayer')
+    this.$eventBus.$off('player-hotkey', this.hotkey)
+  }
+}
+</script>
+
+<style>
+.loadingTrack {
+  animation-name: loadingTrack;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+}
+@keyframes loadingTrack {
+  0% {
+    left: -25%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+</style>
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@ -1,82 +1,68 @@
 <template>
  <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" role="toolbar" aria-label="Appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-60">
+    <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">
-        <nuxt-link to="/">
-          <img src="~static/icon.svg" :alt="$strings.ButtonHome" class="w-8 min-w-8 h-8 mr-2 sm:w-10 sm:min-w-10 sm:h-10 sm:mr-4" />
-        </nuxt-link>
+        <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>
+        <h1 class="text-2xl font-book mr-6 hidden lg:block">audiobookshelf</h1>

-        <nuxt-link to="/">
-          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
-        </nuxt-link>
+        <ui-libraries-dropdown />

-        <ui-libraries-dropdown class="mr-2" />
+        <controls-global-search class="hidden md:block" />
+        <div class="flex-grow" />

-        <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
-        <div class="grow" />
+        <span v-if="showExperimentalFeatures" class="material-icons text-4xl text-warning pr-0 sm:pr-2 md:pr-4">logo_dev</span>

        <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
-          <span class="material-symbols text-2xl text-warning/50"> cast </span>
+          <span class="material-icons-outlined text-warning text-opacity-50"> cast </span>
        </ui-tooltip>
-        <div v-if="isChromecastInitialized" class="w-6 min-w-6 h-6 ml-2 mr-1 sm:mx-2 cursor-pointer">
+        <div v-if="isChromecastInitialized" class="w-6 h-6 mr-2 cursor-pointer">
          <google-cast-launcher></google-cast-launcher>
        </div>

-        <widgets-notification-widget class="hidden md:block" />
-
-        <nuxt-link v-if="currentLibrary" to="/config/stats" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
-          <ui-tooltip :text="$strings.HeaderYourStats" direction="bottom" class="flex items-center">
-            <span class="material-symbols text-2xl" aria-label="User Stats" role="button">&#xe01d;</span>
-          </ui-tooltip>
+        <nuxt-link to="/config/stats" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <span class="material-icons" aria-label="User Stats" role="button">equalizer</span>
        </nuxt-link>

-        <nuxt-link v-if="userCanUpload && currentLibrary" to="/upload" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
-          <ui-tooltip :text="$strings.ButtonUpload" direction="bottom" class="flex items-center">
-            <span class="material-symbols text-2xl" aria-label="Upload Media" role="button">&#xf09b;</span>
-          </ui-tooltip>
+        <nuxt-link v-if="userCanUpload" to="/upload" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <span class="material-icons" aria-label="Upload Media" role="button">upload</span>
        </nuxt-link>

-        <nuxt-link v-if="userIsAdminOrUp" to="/config" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
-          <ui-tooltip :text="$strings.HeaderSettings" direction="bottom" class="flex items-center">
-            <span class="material-symbols text-2xl" aria-label="System Settings" role="button">&#xe8b8;</span>
-          </ui-tooltip>
+        <nuxt-link v-if="userIsAdminOrUp" to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <span class="material-icons" aria-label="System Settings" role="button">settings</span>
        </nuxt-link>

-        <nuxt-link to="/account" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded-sm shadow-xs ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left sm:text-sm cursor-pointer hover:bg-bg/40" aria-haspopup="listbox" aria-expanded="true">
+        <nuxt-link to="/account" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded shadow-sm ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
          <span class="items-center hidden md:flex">
            <span class="block truncate">{{ username }}</span>
          </span>
          <span class="h-full md:ml-3 md:absolute inset-y-0 md:right-0 flex items-center justify-center md:pr-2 pointer-events-none">
-            <span class="material-symbols text-xl text-gray-100">&#xe7fd;</span>
+            <span class="material-icons text-gray-100">person</span>
          </span>
        </nuxt-link>
      </div>
-      <div v-show="numMediaItemsSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
-        <h1 class="text-lg md:text-2xl px-4">{{ $getString('MessageItemsSelected', [numMediaItemsSelected]) }}</h1>
-        <div class="grow" />
-        <ui-btn v-if="!isPodcastLibrary && selectedMediaItemsArePlayable" color="bg-success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="playSelectedItems">
-          <span class="material-symbols fill text-2xl -ml-2 pr-1 text-white">play_arrow</span>
-          {{ $strings.ButtonPlay }}
-        </ui-btn>
-        <ui-tooltip v-if="isBookLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
+
+      <div v-show="numLibraryItemsSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
+        <h1 class="text-2xl px-4">{{ numLibraryItemsSelected }} Selected</h1>
+        <div class="flex-grow" />
+        <ui-tooltip v-if="!isPodcastLibrary" :text="`Mark as ${selectedIsFinished ? 'Not Finished' : 'Finished'}`" direction="bottom">
          <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
        </ui-tooltip>
-        <ui-tooltip v-if="userCanUpdate && isBookLibrary" :text="$strings.LabelAddToCollection" direction="bottom">
+        <ui-tooltip v-if="userCanUpdate && !isPodcastLibrary" text="Add to Collection" direction="bottom">
          <ui-icon-btn :disabled="processingBatch" icon="collections_bookmark" @click="batchAddToCollectionClick" class="mx-1.5" />
        </ui-tooltip>
-        <template v-if="userCanUpdate">
-          <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
-            <ui-icon-btn :disabled="processingBatch" icon="edit" bg-color="bg-warning" class="mx-1.5" @click="batchEditClick" />
+        <template v-if="userCanUpdate && numLibraryItemsSelected < 50">
+          <ui-tooltip text="Edit" direction="bottom">
+            <ui-icon-btn v-show="!processingBatchDelete" icon="edit" bg-color="warning" class="mx-1.5" @click="batchEditClick" />
          </ui-tooltip>
        </template>
-        <ui-tooltip v-if="userCanDelete" :text="$strings.ButtonRemove" direction="bottom">
-          <ui-icon-btn :disabled="processingBatch" icon="delete" bg-color="bg-error" class="mx-1.5" @click="batchDeleteClick" />
+        <ui-tooltip v-if="userCanDelete" text="Delete" direction="bottom">
+          <ui-icon-btn :disabled="processingBatchDelete" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
        </ui-tooltip>
-
-        <ui-context-menu-dropdown v-if="contextMenuItems.length && !processingBatch" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
-
-        <ui-tooltip :text="$strings.LabelDeselectAll" direction="bottom" class="flex items-center">
-          <span class="material-symbols text-3xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+        <ui-tooltip text="Deselect All" direction="bottom">
+          <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatchDelete ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
        </ui-tooltip>
      </div>
    </div>
@ -87,7 +73,9 @@
 export default {
  data() {
    return {
-      totalEntities: 0
+      processingBatchDelete: false,
+      totalEntities: 0,
+      isAllSelected: false
    }
  },
  computed: {
@ -103,12 +91,12 @@ export default {
    isPodcastLibrary() {
      return this.libraryMediaType === 'podcast'
    },
-    isBookLibrary() {
-      return this.libraryMediaType === 'book'
-    },
    isHome() {
      return this.$route.name === 'library-library'
    },
+    showBack() {
+      return this.$route.name !== 'library-library-bookshelf-id' && !this.isHome
+    },
    user() {
      return this.$store.state.user.user
    },
@ -118,14 +106,11 @@ export default {
    username() {
      return this.user ? this.user.username : 'err'
    },
-    numMediaItemsSelected() {
-      return this.selectedMediaItems.length
+    numLibraryItemsSelected() {
+      return this.selectedLibraryItems.length
    },
-    selectedMediaItems() {
-      return this.$store.state.globals.selectedMediaItems
-    },
-    selectedMediaItemsArePlayable() {
-      return !this.selectedMediaItems.some((i) => !i.hasTracks)
+    selectedLibraryItems() {
+      return this.$store.state.selectedLibraryItems
    },
    userMediaProgress() {
      return this.$store.state.user.user.mediaProgress || []
@ -141,14 +126,17 @@ export default {
    },
    selectedIsFinished() {
      // Find an item that is not finished, if none then all items finished
-      return !this.selectedMediaItems.find((item) => {
-        const itemProgress = this.userMediaProgress.find((lip) => lip.libraryItemId === item.id)
+      return !this.selectedLibraryItems.find((libraryItemId) => {
+        var itemProgress = this.userMediaProgress.find((lip) => lip.libraryItemId === libraryItemId)
        return !itemProgress || !itemProgress.isFinished
      })
    },
    processingBatch() {
      return this.$store.state.processingBatch
    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
    isChromecastEnabled() {
      return this.$store.getters['getServerSetting']('chromecastEnabled')
    },
@ -157,161 +145,30 @@ export default {
    },
    isHttps() {
      return location.protocol === 'https:' || process.env.NODE_ENV === 'development'
-    },
-    contextMenuItems() {
-      if (!this.userIsAdminOrUp) return []
-
-      const options = [
-        {
-          text: this.$strings.ButtonQuickMatch,
-          action: 'quick-match'
-        }
-      ]
-
-      if (!this.isPodcastLibrary && this.selectedMediaItemsArePlayable) {
-        options.push({
-          text: this.$strings.ButtonQuickEmbedMetadata,
-          action: 'quick-embed'
-        })
-      }
-
-      options.push({
-        text: this.$strings.ButtonReScan,
-        action: 'rescan'
-      })
-
-      // The limit of 50 is introduced because of the URL length. Each id has 36 chars, so 36 * 40 = 1440
-      // + 40 , separators = 1480 chars + base path 280 chars = 1760 chars. This keeps the URL under 2000 chars even with longer domains
-      if (this.selectedMediaItems.length <= 40) {
-        options.push({
-          text: this.$strings.LabelDownload,
-          action: 'download'
-        })
-      }
-
-      return options
    }
  },
  methods: {
-    requestBatchQuickEmbed() {
-      const payload = {
-        message: this.$strings.MessageConfirmQuickEmbed,
-        allowHtml: true,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$axios
-              .$post(`/api/tools/batch/embed-metadata`, {
-                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
-              })
-              .then(() => {
-                console.log('Audio metadata embed started')
-                this.cancelSelectionMode()
-              })
-              .catch((error) => {
-                console.error('Audio metadata embed failed', error)
-                const errorMsg = error.response.data || 'Failed to embed metadata'
-                this.$toast.error(errorMsg)
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
+    toggleBookshelfTexture() {
+      this.$store.dispatch('setBookshelfTexture', 'wood2.png')
    },
-    contextMenuAction({ action }) {
-      if (action === 'quick-embed') {
-        this.requestBatchQuickEmbed()
-      } else if (action === 'quick-match') {
-        this.batchAutoMatchClick()
-      } else if (action === 'rescan') {
-        this.batchRescan()
-      } else if (action === 'download') {
-        this.batchDownload()
-      }
-    },
-    async batchRescan() {
-      const payload = {
-        message: this.$getString('MessageConfirmReScanLibraryItems', [this.selectedMediaItems.length]),
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.$axios
-              .$post(`/api/items/batch/scan`, {
-                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
-              })
-              .then(() => {
-                console.log('Batch Re-Scan started')
-                this.cancelSelectionMode()
-              })
-              .catch((error) => {
-                console.error('Batch Re-Scan failed', error)
-                const errorMsg = error.response.data || 'Failed to batch re-scan'
-                this.$toast.error(errorMsg)
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    async batchDownload() {
-      const libraryItemIds = this.selectedMediaItems.map((i) => i.id)
-      console.log('Downloading library items', libraryItemIds)
-      this.$downloadFile(`/api/libraries/${this.$store.state.libraries.currentLibraryId}/download?token=${this.$store.getters['user/getToken']}&ids=${libraryItemIds.join(',')}`)
-    },
-    async playSelectedItems() {
-      this.$store.commit('setProcessingBatch', true)
-
-      const libraryItemIds = this.selectedMediaItems.map((i) => i.id)
-      const libraryItems = await this.$axios
-        .$post(`/api/items/batch/get`, { libraryItemIds })
-        .then((res) => res.libraryItems)
-        .catch((error) => {
-          const errorMsg = error.response.data || 'Failed to get items'
-          console.error(errorMsg, error)
-          this.$toast.error(errorMsg)
-          return []
-        })
-
-      if (!libraryItems.length) {
-        this.$store.commit('setProcessingBatch', false)
-        return
-      }
-
-      const queueItems = []
-      libraryItems.forEach((item) => {
-        let subtitle = ''
-        if (item.mediaType === 'book') subtitle = item.media.metadata.authors.map((au) => au.name).join(', ')
-        queueItems.push({
-          libraryItemId: item.id,
-          libraryId: item.libraryId,
-          episodeId: null,
-          title: item.media.metadata.title,
-          subtitle,
-          caption: '',
-          duration: item.media.duration || null,
-          coverPath: item.media.coverPath || null
-        })
-      })
-
-      this.$eventBus.$emit('play-item', {
-        libraryItemId: queueItems[0].libraryItemId,
-        queueItems
-      })
-      this.$store.commit('setProcessingBatch', false)
-      this.$store.commit('globals/resetSelectedMediaItems', [])
-      this.$eventBus.$emit('bookshelf_clear_selection')
+    async back() {
+      var popped = await this.$store.dispatch('popRoute')
+      if (popped) this.$store.commit('setIsRoutingBack', true)
+      var backTo = popped || '/'
+      this.$router.push(backTo)
    },
    cancelSelectionMode() {
-      if (this.processingBatch) return
-      this.$store.commit('globals/resetSelectedMediaItems', [])
-      this.$eventBus.$emit('bookshelf_clear_selection')
+      if (this.processingBatchDelete) return
+      this.$store.commit('setSelectedLibraryItems', [])
+      this.$eventBus.$emit('bookshelf-clear-selection')
+      this.isAllSelected = false
    },
    toggleBatchRead() {
      this.$store.commit('setProcessingBatch', true)
-      const newIsFinished = !this.selectedIsFinished
-      const updateProgressPayloads = this.selectedMediaItems.map((item) => {
+      var newIsFinished = !this.selectedIsFinished
+      var updateProgressPayloads = this.selectedLibraryItems.map((lid) => {
        return {
-          libraryItemId: item.id,
+          id: lid,
          isFinished: newIsFinished
        }
      })
@ -319,63 +176,50 @@ export default {
      this.$axios
        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
        .then(() => {
-          this.$toast.success(this.$strings.ToastBatchUpdateSuccess)
+          this.$toast.success('Batch update success!')
          this.$store.commit('setProcessingBatch', false)
-          this.$store.commit('globals/resetSelectedMediaItems', [])
-          this.$eventBus.$emit('bookshelf_clear_selection')
+          this.$store.commit('setSelectedLibraryItems', [])
+          this.$eventBus.$emit('bookshelf-clear-selection')
        })
        .catch((error) => {
-          this.$toast.error(this.$strings.ToastBatchUpdateFailed)
+          this.$toast.error('Batch update failed')
          console.error('Failed to batch update read/not read', error)
          this.$store.commit('setProcessingBatch', false)
        })
    },
    batchDeleteClick() {
-      const payload = {
-        message: this.$getString('MessageConfirmDeleteLibraryItems', [this.numMediaItemsSelected]),
-        checkboxLabel: this.$strings.LabelDeleteFromFileSystemCheckbox,
-        yesButtonText: this.$strings.ButtonDelete,
-        yesButtonColor: 'error',
-        checkboxDefaultValue: !Number(localStorage.getItem('softDeleteDefault') || 0),
-        callback: (confirmed, hardDelete) => {
-          if (confirmed) {
-            localStorage.setItem('softDeleteDefault', hardDelete ? 0 : 1)
-
-            this.$store.commit('setProcessingBatch', true)
-
-            this.$axios
-              .$post(`/api/items/batch/delete?hard=${hardDelete ? 1 : 0}`, {
-                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
-              })
-              .then(() => {
-                this.$toast.success(this.$strings.ToastBatchDeleteSuccess)
-                this.$store.commit('globals/resetSelectedMediaItems', [])
-                this.$eventBus.$emit('bookshelf_clear_selection')
-              })
-              .catch((error) => {
-                console.error('Batch delete failed', error)
-                this.$toast.error(this.$strings.ToastBatchDeleteFailed)
-              })
-              .finally(() => {
-                this.$store.commit('setProcessingBatch', false)
-              })
-          }
-        },
-        type: 'yesNo'
+      var audiobookText = this.numLibraryItemsSelected > 1 ? `these ${this.numLibraryItemsSelected} items` : 'this item'
+      var confirmMsg = `Are you sure you want to remove ${audiobookText}?\n\n*Does not delete your files, only removes the items from Audiobookshelf`
+      if (confirm(confirmMsg)) {
+        this.processingBatchDelete = true
+        this.$store.commit('setProcessingBatch', true)
+        this.$axios
+          .$post(`/api/items/batch/delete`, {
+            libraryItemIds: this.selectedLibraryItems
+          })
+          .then(() => {
+            this.$toast.success('Batch delete success!')
+            this.processingBatchDelete = false
+            this.$store.commit('setProcessingBatch', false)
+            this.$store.commit('setSelectedLibraryItems', [])
+            this.$eventBus.$emit('bookshelf-clear-selection')
+          })
+          .catch((error) => {
+            this.$toast.error('Batch delete failed')
+            console.error('Failed to batch delete', error)
+            this.processingBatchDelete = false
+            this.$store.commit('setProcessingBatch', false)
+          })
      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
    },
    batchEditClick() {
      this.$router.push('/batch')
    },
    batchAddToCollectionClick() {
-      this.$store.commit('globals/setShowBatchCollectionsModal', true)
+      this.$store.commit('globals/setShowBatchUserCollectionsModal', true)
    },
    setBookshelfTotalEntities(totalEntities) {
      this.totalEntities = totalEntities
-    },
-    batchAutoMatchClick() {
-      this.$store.commit('globals/setShowBatchQuickMatchModal', true)
    }
  },
  mounted() {
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@ -1,30 +1,25 @@
 <template>
-  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative" :style="{ fontSize: sizeMultiplier + 'rem' }">
+  <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-scroll relative">
    <!-- Cover size widget -->
-    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-30" />
+    <!-- Experimental Bookshelf Texture -->
+    <div v-show="showExperimentalFeatures" class="fixed bottom-4 right-28 z-40">
+      <div class="rounded-full py-1 bg-primary hover:bg-bg cursor-pointer px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent @click="showBookshelfTextureModal"><p class="text-sm py-0.5">Texture</p></div>
+    </div>

    <div v-if="loaded && !shelves.length && !search" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
+      <p class="text-center text-2xl font-book mb-4 py-4">{{ libraryName }} Library is empty!</p>
      <div v-if="userIsAdminOrUp" class="flex">
-        <ui-btn to="/config" color="bg-primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
-        <ui-btn color="bg-success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+        <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
+        <ui-btn color="success" class="w-52" @click="scan">Scan Library</ui-btn>
      </div>
    </div>
    <div v-else-if="loaded && !shelves.length && search" class="w-full h-40 flex items-center justify-center">
-      <p class="text-center text-xl py-4">{{ $strings.MessageBookshelfNoResultsForQuery }}</p>
+      <p class="text-center text-xl font-book py-4">No results for query</p>
    </div>
-    <!-- Alternate plain view -->
-    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
-      <template v-for="(shelf, index) in supportedShelves">
-        <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)">
-          <h2 class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</h2>
-        </widgets-item-slider>
-      </template>
-    </div>
-    <!-- Regular bookshelf view -->
-    <div v-else class="w-full">
-      <template v-for="(shelf, index) in supportedShelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" @selectEntity="(payload) => selectEntity(payload, index)" />
+    <div v-else class="w-full flex flex-col items-center">
+      <template v-for="(shelf, index) in shelves">
+        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
      </template>
    </div>
  </div>
@ -45,116 +40,44 @@ export default {
      keywordFilterTimeout: null,
      scannerParseSubtitle: false,
      wrapperClientWidth: 0,
-      shelves: [],
-      lastItemIndexSelected: -1,
-      tempIsScanning: false
+      shelves: []
    }
  },
  computed: {
-    supportedShelves() {
-      return this.shelves.filter((shelf) => ['book', 'podcast', 'episode', 'series', 'authors', 'narrators'].includes(shelf.type))
-    },
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
    currentLibraryId() {
      return this.$store.state.libraries.currentLibraryId
    },
-    currentLibraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
-    },
    libraryName() {
      return this.$store.getters['libraries/getCurrentLibraryName']
    },
-    isAlternativeBookshelfView() {
-      return this.$store.getters['getHomeBookshelfView'] === this.$constants.BookshelfView.DETAIL
-    },
    bookCoverWidth() {
      var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
      if (this.isCoverSquareAspectRatio) return coverSize * 1.6
      return coverSize
    },
    coverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
    },
    isCoverSquareAspectRatio() {
-      return this.coverAspectRatio == 1
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
+    },
+    bookCoverAspectRatio() {
+      return this.isCoverSquareAspectRatio ? 1 : 1.6
    },
    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
-    },
-    selectedMediaItems() {
-      return this.$store.state.globals.selectedMediaItems || []
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
-    },
-    isScanningLibrary() {
-      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
+      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.bookCoverWidth / baseSize
    }
  },
  methods: {
-    selectEntity({ entity, shiftKey }, shelfIndex) {
-      const shelf = this.shelves[shelfIndex]
-      const entityShelfIndex = shelf.entities.findIndex((ent) => ent.id === entity.id)
-      const indexOf = shelf.shelfStartIndex + entityShelfIndex
-
-      const lastLastItemIndexSelected = this.lastItemIndexSelected
-      if (!this.selectedMediaItems.some((i) => i.id === entity.id)) {
-        this.lastItemIndexSelected = indexOf
-      } else {
-        this.lastItemIndexSelected = -1
-      }
-
-      if (shiftKey && lastLastItemIndexSelected >= 0) {
-        let loopStart = indexOf
-        let loopEnd = lastLastItemIndexSelected
-        if (indexOf > lastLastItemIndexSelected) {
-          loopStart = lastLastItemIndexSelected
-          loopEnd = indexOf
-        }
-
-        const flattenedEntitiesArray = []
-        this.shelves.map((s) => flattenedEntitiesArray.push(...s.entities))
-
-        let isSelecting = false
-        // If any items in this range is not selected then select all otherwise unselect all
-        for (let i = loopStart; i <= loopEnd; i++) {
-          const thisEntity = flattenedEntitiesArray[i]
-          if (thisEntity) {
-            if (!this.selectedMediaItems.some((i) => i.id === thisEntity.id)) {
-              isSelecting = true
-              break
-            }
-          }
-        }
-        if (isSelecting) this.lastItemIndexSelected = indexOf
-
-        for (let i = loopStart; i <= loopEnd; i++) {
-          const thisEntity = flattenedEntitiesArray[i]
-          if (thisEntity) {
-            const mediaItem = {
-              id: thisEntity.id,
-              mediaType: thisEntity.mediaType,
-              hasTracks: thisEntity.mediaType === 'podcast' || thisEntity.media.audioFile || thisEntity.media.numTracks || (thisEntity.media.tracks && thisEntity.media.tracks.length)
-            }
-            this.$store.commit('globals/setMediaItemSelected', { item: mediaItem, selected: isSelecting })
-          } else {
-            console.error('Invalid entity index', i)
-          }
-        }
-      } else {
-        const mediaItem = {
-          id: entity.id,
-          mediaType: entity.mediaType,
-          hasTracks: entity.mediaType === 'podcast' || entity.media.audioFile || entity.media.numTracks || (entity.media.tracks && entity.media.tracks.length)
-        }
-        this.$store.commit('globals/toggleMediaItemSelected', mediaItem)
-      }
-
-      this.$nextTick(() => {
-        this.$eventBus.$emit('item-selected', entity)
-      })
+    showBookshelfTextureModal() {
+      this.$store.commit('globals/setShowBookshelfTextureModal', true)
    },
    async init() {
      this.wrapperClientWidth = this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
@ -167,19 +90,8 @@ export default {
      this.loaded = true
    },
    async fetchCategories() {
-      // Sets the limit for the number of items to be displayed based on the viewport width.
-      const viewportWidth = window.innerWidth
-      let limit
-      if (viewportWidth >= 3240) {
-        limit = 15
-      } else if (viewportWidth >= 2880 && viewportWidth < 3240) {
-        limit = 12
-      }
-
-      const limitQuery = limit ? `&limit=${limit}` : ''
-
-      const categories = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete,share${limitQuery}`)
+      var categories = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized`)
        .then((data) => {
          return data
        })
@ -187,51 +99,32 @@ export default {
          console.error('Failed to fetch categories', error)
          return []
        })
-
-      let totalEntityCount = 0
-      for (const shelf of categories) {
-        shelf.shelfStartIndex = totalEntityCount
-        totalEntityCount += shelf.entities.length
-      }
      this.shelves = categories
    },
    async setShelvesFromSearch() {
-      const shelves = []
-      if (this.results.books?.length) {
+      var shelves = []
+      if (this.results.books && this.results.books.length) {
        shelves.push({
          id: 'books',
          label: 'Books',
-          labelStringKey: 'LabelBooks',
          type: 'book',
          entities: this.results.books.map((res) => res.libraryItem)
        })
      }

-      if (this.results.podcasts?.length) {
+      if (this.results.podcasts && this.results.podcasts.length) {
        shelves.push({
          id: 'podcasts',
          label: 'Podcasts',
-          labelStringKey: 'LabelPodcasts',
          type: 'podcast',
          entities: this.results.podcasts.map((res) => res.libraryItem)
        })
      }

-      if (this.results.episodes?.length) {
-        shelves.push({
-          id: 'episodes',
-          label: 'Episodes',
-          labelStringKey: 'LabelEpisodes',
-          type: 'episode',
-          entities: this.results.episodes.map((res) => res.libraryItem)
-        })
-      }
-
-      if (this.results.series?.length) {
+      if (this.results.series && this.results.series.length) {
        shelves.push({
          id: 'series',
          label: 'Series',
-          labelStringKey: 'LabelSeries',
          type: 'series',
          entities: this.results.series.map((seriesObj) => {
            return {
@ -242,11 +135,10 @@ export default {
          })
        })
      }
-      if (this.results.tags?.length) {
+      if (this.results.tags && this.results.tags.length) {
        shelves.push({
          id: 'tags',
          label: 'Tags',
-          labelStringKey: 'LabelTags',
          type: 'tags',
          entities: this.results.tags.map((tagObj) => {
            return {
@ -257,11 +149,10 @@ export default {
          })
        })
      }
-      if (this.results.authors?.length) {
+      if (this.results.authors && this.results.authors.length) {
        shelves.push({
          id: 'authors',
          label: 'Authors',
-          labelStringKey: 'LabelAuthors',
          type: 'authors',
          entities: this.results.authors.map((a) => {
            return {
@ -271,45 +162,11 @@ export default {
          })
        })
      }
-      if (this.results.narrators?.length) {
-        shelves.push({
-          id: 'narrators',
-          label: 'Narrators',
-          labelStringKey: 'LabelNarrators',
-          type: 'narrators',
-          entities: this.results.narrators.map((n) => {
-            return {
-              ...n,
-              type: 'narrator'
-            }
-          })
-        })
-      }
      this.shelves = shelves
    },
+    settingsUpdated(settings) {},
    scan() {
-      this.tempIsScanning = true
-      this.$store
-        .dispatch('libraries/requestLibraryScan', { libraryId: this.$store.state.libraries.currentLibraryId })
-        .catch((error) => {
-          console.error('Failed to start scan', error)
-          this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
-        })
-        .finally(() => {
-          this.tempIsScanning = false
-        })
-    },
-    userUpdated(user) {
-      if (user.id !== this.$store.state.user.user.id) return
-
-      if (user.seriesHideFromContinueListening && user.seriesHideFromContinueListening.length) {
-        this.removeAllSeriesFromContinueSeries(user.seriesHideFromContinueListening)
-      }
-      if (user.mediaProgress.length) {
-        const mediaProgressToHide = user.mediaProgress.filter((mp) => mp.hideFromContinueListening)
-        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-listening')
-        this.removeItemsFromContinueListeningReading(mediaProgressToHide, 'continue-reading')
-      }
+      this.$store.dispatch('libraries/requestLibraryScan', { libraryId: this.$store.state.libraries.currentLibraryId })
    },
    libraryItemAdded(libraryItem) {
      console.log('libraryItem added', libraryItem)
@ -358,23 +215,9 @@ export default {
    },
    libraryItemsAdded(libraryItems) {
      console.log('libraryItems added', libraryItems)
-
-      // First items added to library
-      const isThisLibrary = libraryItems.some((li) => li.libraryId === this.currentLibraryId)
-      if (!this.shelves.length && !this.search && isThisLibrary) {
+      // TODO: Check if audiobook would be on this shelf
+      if (!this.search) {
        this.fetchCategories()
-        return
-      }
-
-      const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
-      if (!recentlyAddedShelf) return
-
-      // Add new library item to the recently added shelf
-      for (const libraryItem of libraryItems) {
-        if (libraryItem.libraryId === this.currentLibraryId && !recentlyAddedShelf.entities.some((ent) => ent.id === libraryItem.id)) {
-          // Add to front of array
-          recentlyAddedShelf.entities.unshift(libraryItem)
-        }
      }
    },
    libraryItemsUpdated(items) {
@ -382,40 +225,6 @@ export default {
        this.libraryItemUpdated(li)
      })
    },
-    episodeAdded(episodeWithLibraryItem) {
-      const isThisLibrary = episodeWithLibraryItem.libraryItem?.libraryId === this.currentLibraryId
-      if (!this.search && isThisLibrary) {
-        this.fetchCategories()
-      }
-    },
-    removeAllSeriesFromContinueSeries(seriesIds) {
-      this.shelves.forEach((shelf) => {
-        if (shelf.type == 'book' && shelf.id == 'continue-series') {
-          // Filter out series books from continue series shelf
-          shelf.entities = shelf.entities.filter((ent) => {
-            if (ent.media.metadata.series && seriesIds.includes(ent.media.metadata.series.id)) return false
-            return true
-          })
-        }
-      })
-    },
-    removeItemsFromContinueListeningReading(mediaProgressItems, categoryId) {
-      const continueListeningShelf = this.shelves.find((s) => s.id === categoryId)
-      if (continueListeningShelf) {
-        if (continueListeningShelf.type === 'book') {
-          continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
-            if (mediaProgressItems.some((mp) => mp.libraryItemId === ent.id)) return false
-            return true
-          })
-        } else if (continueListeningShelf.type === 'episode') {
-          continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
-            if (!ent.recentEpisode) return true // Should always have this here
-            if (mediaProgressItems.some((mp) => mp.libraryItemId === ent.id && mp.episodeId === ent.recentEpisode.id)) return false
-            return true
-          })
-        }
-      }
-    },
    authorUpdated(author) {
      this.shelves.forEach((shelf) => {
        if (shelf.type == 'authors') {
@ -438,39 +247,10 @@ export default {
        }
      })
    },
-    shareOpen(mediaItemShare) {
-      this.shelves.forEach((shelf) => {
-        if (shelf.type == 'book') {
-          shelf.entities = shelf.entities.map((ent) => {
-            if (ent.media.id === mediaItemShare.mediaItemId) {
-              return {
-                ...ent,
-                mediaItemShare
-              }
-            }
-            return ent
-          })
-        }
-      })
-    },
-    shareClosed(mediaItemShare) {
-      this.shelves.forEach((shelf) => {
-        if (shelf.type == 'book') {
-          shelf.entities = shelf.entities.map((ent) => {
-            if (ent.media.id === mediaItemShare.mediaItemId) {
-              return {
-                ...ent,
-                mediaItemShare: null
-              }
-            }
-            return ent
-          })
-        }
-      })
-    },
    initListeners() {
+      this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
+
      if (this.$root.socket) {
-        this.$root.socket.on('user_updated', this.userUpdated)
        this.$root.socket.on('author_updated', this.authorUpdated)
        this.$root.socket.on('author_removed', this.authorRemoved)
        this.$root.socket.on('item_updated', this.libraryItemUpdated)
@ -478,16 +258,14 @@ export default {
        this.$root.socket.on('item_removed', this.libraryItemRemoved)
        this.$root.socket.on('items_updated', this.libraryItemsUpdated)
        this.$root.socket.on('items_added', this.libraryItemsAdded)
-        this.$root.socket.on('episode_added', this.episodeAdded)
-        this.$root.socket.on('share_open', this.shareOpen)
-        this.$root.socket.on('share_closed', this.shareClosed)
      } else {
        console.error('Error socket not initialized')
      }
    },
    removeListeners() {
+      this.$store.commit('user/removeSettingsListener', 'bookshelf')
+
      if (this.$root.socket) {
-        this.$root.socket.off('user_updated', this.userUpdated)
        this.$root.socket.off('author_updated', this.authorUpdated)
        this.$root.socket.off('author_removed', this.authorRemoved)
        this.$root.socket.off('item_updated', this.libraryItemUpdated)
@ -495,9 +273,6 @@ export default {
        this.$root.socket.off('item_removed', this.libraryItemRemoved)
        this.$root.socket.off('items_updated', this.libraryItemsUpdated)
        this.$root.socket.off('items_added', this.libraryItemsAdded)
-        this.$root.socket.off('episode_added', this.episodeAdded)
-        this.$root.socket.off('share_open', this.shareOpen)
-        this.$root.socket.off('share_closed', this.shareClosed)
      } else {
        console.error('Error socket not initialized')
      }
--- a/client/components/app/BookShelfRow.vue
+++ b/client/components/app/BookShelfRow.vue
@ -1,54 +1,54 @@
 <template>
  <div class="relative">
-    <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll no-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft + 'em' }" @scroll="scrolled">
-      <div class="w-full h-full pt-6e">
+    <div ref="shelf" class="w-full max-w-full categorizedBookshelfRow relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft * sizeMultiplier + 'rem', height: shelfHeight + 'px' }" @scroll="scrolled">
+      <div class="w-full h-full pt-6">
        <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
          <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
+            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
          </template>
        </div>
        <div v-if="shelf.type === 'episode'" class="flex items-center">
          <template v-for="(entity, index) in shelf.entities">
-            <cards-lazy-book-card :key="entity.recentEpisode.id" :ref="`shelf-episode-${entity.recentEpisode.id}`" :index="index" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2e" @hook:updated="updatedBookCard" @select="selectItem" @editPodcast="editItem" @edit="editEpisode" />
+            <cards-lazy-book-card :key="entity.recentEpisode.id" :ref="`shelf-episode-${entity.recentEpisode.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @editPodcast="editItem" @edit="editEpisode" />
          </template>
        </div>
        <div v-if="shelf.type === 'series'" class="flex items-center">
          <template v-for="entity in shelf.entities">
-            <cards-lazy-series-card :key="entity.name" :series-mount="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
+            <cards-lazy-series-card :key="entity.name" :series-mount="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
          </template>
        </div>
        <div v-if="shelf.type === 'tags'" class="flex items-center">
          <template v-for="entity in shelf.entities">
-            <cards-group-card :key="entity.name" :group="entity" class="relative mx-2e" @hook:updated="updatedBookCard" />
+            <nuxt-link :key="entity.name" :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(entity.name)}`">
+              <cards-group-card is-categorized :width="bookCoverWidth" :group="entity" :book-cover-aspect-ratio="bookCoverAspectRatio" @hook:updated="updatedBookCard" />
+            </nuxt-link>
          </template>
        </div>
        <div v-if="shelf.type === 'authors'" class="flex items-center">
          <template v-for="entity in shelf.entities">
-            <cards-author-card :key="entity.id" :authorMount="entity" @hook:updated="updatedBookCard" class="mx-2e" @edit="editAuthor" />
-          </template>
-        </div>
-        <div v-if="shelf.type === 'narrators'" class="flex items-center">
-          <template v-for="entity in shelf.entities">
-            <cards-narrator-card :key="entity.name" :narrator="entity" @hook:updated="updatedBookCard" class="mx-2e" />
+            <nuxt-link :key="entity.id" :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(entity.id)}`">
+              <cards-author-card :width="bookCoverWidth / 1.25" :height="bookCoverWidth" :author="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" @edit="editAuthor" />
+            </nuxt-link>
          </template>
        </div>
      </div>
    </div>
-    <div class="relative">
-      <div class="relative text-center categoryPlacard transform z-30 top-0 left-4e md:left-8e w-44e rounded-md">
-        <div class="w-full h-full shinyBlack flex items-center justify-center rounded-xs border" :style="{ padding: `0em 0.5em` }">
-          <h2 :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</h2>
-        </div>
-      </div>

-      <div class="bookshelfDividerCategorized h-6e w-full absolute top-0 left-0 right-0 z-20"></div>
+    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-4 md:left-8 w-36 rounded-md" style="height: 22px">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
+        <p class="transform text-sm">{{ shelf.label }}</p>
+      </div>
    </div>
-    <button v-show="canScrollLeft && !isScrolling" :aria-label="$strings.ButtonScrollLeft" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollLeft">
-      <span class="material-symbols text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_left</span>
-    </button>
-    <button v-show="canScrollRight && !isScrolling" :aria-label="$strings.ButtonScrollRight" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollRight">
-      <span class="material-symbols text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
-    </button>
+
+    <div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
+
+    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollLeft">
+      <span class="material-icons text-6xl text-white">chevron_left</span>
+    </div>
+    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollRight">
+      <span class="material-icons text-6xl text-white">chevron_right</span>
+    </div>
+    <modals-authors-edit-modal v-model="showAuthorModal" :author="selectedAuthor" />
  </div>
 </template>

@ -60,7 +60,9 @@ export default {
      type: Object,
      default: () => {}
    },
-    continueListeningShelf: Boolean
+    sizeMultiplier: Number,
+    bookCoverWidth: Number,
+    bookCoverAspectRatio: Number
  },
  data() {
    return {
@ -68,12 +70,17 @@ export default {
      canScrollLeft: false,
      isScrolling: false,
      scrollTimer: null,
-      updateTimer: null
+      updateTimer: null,
+      showAuthorModal: false,
+      selectedAuthor: null
    }
  },
  computed: {
-    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
+    bookCoverHeight() {
+      return this.bookCoverWidth * this.bookCoverAspectRatio
+    },
+    shelfHeight() {
+      return this.bookCoverHeight + 48
    },
    paddingLeft() {
      if (window.innerWidth < 768) return 1
@ -83,7 +90,7 @@ export default {
      return this.$store.state.libraries.currentLibraryId
    },
    isSelectionMode() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
+      return this.$store.getters['getNumLibraryItemsSelected'] > 0
    }
  },
  methods: {
@ -91,28 +98,28 @@ export default {
      this.updateSelectionMode(false)
    },
    editAuthor(author) {
-      this.$store.commit('globals/showEditAuthorModal', author)
+      this.selectedAuthor = author
+      this.showAuthorModal = true
    },
-    editItem(libraryItem, tab = 'details') {
+    editItem(libraryItem) {
      var itemIds = this.shelf.entities.map((e) => e.id)
      this.$store.commit('setBookshelfBookIds', itemIds)
-      this.$store.commit('showEditModalOnTab', { libraryItem, tab: tab || 'details' })
+      this.$store.commit('showEditModal', libraryItem)
    },
    editEpisode({ libraryItem, episode }) {
-      this.$store.commit('setEpisodeTableEpisodeIds', [episode.id])
      this.$store.commit('setSelectedLibraryItem', libraryItem)
      this.$store.commit('globals/setSelectedEpisode', episode)
      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
    },
    updateSelectionMode(val) {
-      const selectedMediaItems = this.$store.state.globals.selectedMediaItems
+      var selectedLibraryItems = this.$store.state.selectedLibraryItems
      if (this.shelf.type === 'book' || this.shelf.type === 'podcast') {
        this.shelf.entities.forEach((ent) => {
          var component = this.$refs[`shelf-book-${ent.id}`]
          if (!component || !component.length) return
          component = component[0]
          component.setSelectionMode(val)
-          component.selected = selectedMediaItems.some((i) => i.id === ent.id)
+          component.selected = selectedLibraryItems.includes(ent.id)
        })
      } else if (this.shelf.type === 'episode') {
        this.shelf.entities.forEach((ent) => {
@ -120,12 +127,15 @@ export default {
          if (!component || !component.length) return
          component = component[0]
          component.setSelectionMode(val)
-          component.selected = selectedMediaItems.some((i) => i.id === ent.id)
+          component.selected = selectedLibraryItems.includes(ent.id)
        })
      }
    },
-    selectItem(payload) {
-      this.$emit('selectEntity', payload)
+    selectItem(libraryItem) {
+      this.$store.commit('toggleLibraryItemSelected', libraryItem.id)
+      this.$nextTick(() => {
+        this.$eventBus.$emit('item-selected', libraryItem)
+      })
    },
    itemSelectedEvt() {
      this.updateSelectionMode(this.isSelectionMode)
@ -174,11 +184,11 @@ export default {
    }
  },
  mounted() {
-    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
+    this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
  },
  beforeDestroy() {
-    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
+    this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
  }
 }
@ -187,24 +197,36 @@ export default {
 <style>
 .categorizedBookshelfRow {
  scroll-behavior: smooth;
+  width: calc(100vw - 80px);
+
+  /* background-color: rgb(214, 116, 36); */
  background-image: var(--bookshelf-texture-img);
+  /* background-position: center; */
+  /* background-size: contain; */
  background-repeat: repeat-x;
 }
+@media (max-width: 768px) {
+  .categorizedBookshelfRow {
+    width: 100vw;
+  }
+}

 .bookshelfDividerCategorized {
  background: rgb(149, 119, 90);
+  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
  background: linear-gradient(180deg, rgb(122, 94, 68) 0%, rgb(92, 62, 31) 17%, rgb(82, 54, 26) 88%, rgba(71, 48, 25, 1) 100%);
+  /* background: linear-gradient(180deg, rgb(114, 85, 59) 0%, rgb(73, 48, 22) 17%, rgb(71, 43, 15) 88%, rgb(61, 41, 20) 100%); */
  box-shadow: 2px 14px 8px #111111aa;
 }

 .book-shelf-arrow-right {
-  height: calc(100% - 1.5em);
+  height: calc(100% - 24px);
  background: rgb(48, 48, 48);
  background: linear-gradient(90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
 }
 .book-shelf-arrow-left {
-  height: calc(100% - 1.5em);
+  height: calc(100% - 24px);
  background: rgb(48, 48, 48);
  background: linear-gradient(-90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
 }
-</style>
+</style>
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@ -1,102 +1,65 @@
 <template>
  <div class="w-full h-20 md:h-10 relative">
    <div class="flex md:hidden h-10 items-center">
-      <nuxt-link :to="`/library/${currentLibraryId}`" class="grow h-full flex justify-center items-center" :class="isHomePage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p v-if="isHomePage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonHome }}</p>
-        <span v-else class="material-symbols text-lg">home</span>
+      <nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p>Home</p>
      </nuxt-link>
-      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="grow h-full flex justify-center items-center" :class="isLibraryPage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p v-if="isLibraryPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonLibrary }}</p>
-        <span v-else class="material-symbols text-lg">import_contacts</span>
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p>Library</p>
      </nuxt-link>
-      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="grow h-full flex justify-center items-center" :class="isPodcastLatestPage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p class="text-sm">{{ $strings.ButtonLatest }}</p>
-      </nuxt-link>
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p v-if="isSeriesPage" class="text-sm">{{ $strings.ButtonSeries }}</p>
-        <span v-else class="material-symbols text-lg">view_column</span>
-      </nuxt-link>
-      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="grow h-full flex justify-center items-center" :class="isPlaylistsPage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p v-if="isPlaylistsPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonPlaylists }}</p>
-        <span v-else class="material-symbols text-lg">&#xe03d;</span>
-      </nuxt-link>
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
-        <span v-else class="material-symbols text-lg">&#xe431;</span>
-      </nuxt-link>
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
-        <span v-else class="material-symbols text-lg">groups</span>
-      </nuxt-link>
-      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p class="text-sm">{{ $strings.ButtonAdd }}</p>
-      </nuxt-link>
-      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="grow h-full flex justify-center items-center" :class="isPodcastDownloadQueuePage ? 'bg-primary/80' : 'bg-primary/40'">
-        <p class="text-sm">{{ $strings.ButtonDownloadQueue }}</p>
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p>Series</p>
      </nuxt-link>
    </div>
-    <div id="toolbar" role="toolbar" aria-label="Library Toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-40 flex items-center justify-end md:justify-start px-2 md:px-8">
-      <!-- Series books page -->
-      <template v-if="selectedSeries">
-        <p class="pl-2 text-base md:text-lg">
-          {{ seriesName }}
-        </p>
-        <div class="w-6 h-6 rounded-full bg-black/30 flex items-center justify-center ml-3">
-          <span class="font-mono">{{ $formatNumber(numShowing) }}</span>
+    <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' && page !== 'podcast-search' && !isHome">
+        <p v-if="!selectedSeries" class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
+        <div v-else class="items-center hidden md:flex w-full">
+          <div @click="seriesBackArrow" class="rounded-full h-9 w-9 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">
+            <span class="material-icons text-2xl text-white">west</span>
+          </div>
+          <p class="pl-4 font-book text-lg">
+            {{ seriesName }}
+          </p>
+          <div class="w-6 h-6 rounded-full bg-black bg-opacity-30 flex items-center justify-center ml-3">
+            <span class="font-mono">{{ numShowing }}</span>
+          </div>
+          <div class="flex-grow" />
+          <ui-btn color="primary" small :loading="processingSeries" class="flex items-center" @click="markSeriesFinished">
+            <div class="h-5 w-5">
+              <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
+                <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
+              </svg>
+              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
+              </svg>
+            </div>
+            <span class="pl-2"> Mark Series {{ isSeriesFinished ? 'Not Finished' : 'Finished' }}</span></ui-btn
+          >
        </div>
-        <div class="grow" />
+        <div class="flex-grow hidden sm:inline-block" />

-        <!-- RSS feed -->
-        <ui-tooltip v-if="seriesRssFeed" :text="$strings.LabelOpenRSSFeed" direction="top">
-          <ui-icon-btn icon="rss_feed" class="mx-0.5" :size="7" icon-font-size="1.2rem" bg-color="bg-success" outlined @click="showOpenSeriesRSSFeed" />
-        </ui-tooltip>
+        <ui-checkbox v-show="showSortFilters && !isPodcast" 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>
+          </div>
+          <div class="h-full px-2 text-white flex items-center rounded-r-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="!isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'list')">
+            <span class="material-icons" style="font-size: 1.4rem">view_list</span>
+          </div>
+        </div> -->

-        <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
+        <ui-btn v-if="isIssuesFilter && userCanDelete" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">Remove All {{ numShowing }} {{ entityName }}</ui-btn>
      </template>
-      <!-- library & collections page -->
-      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome && !isAuthorsPage">
-        <p class="hidden md:block">{{ $formatNumber(numShowing) }} {{ entityName }}</p>
-
-        <div class="grow hidden sm:inline-block" />
-
-        <!-- library filter select -->
-        <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
-
-        <!-- library sort select -->
-        <controls-library-sort-select v-if="isLibraryPage && !isBatchSelecting" 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" />
-
-        <!-- series filter select -->
-        <controls-library-filter-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesFilterBy" is-series class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesFilter" />
-
-        <!-- series sort select -->
-        <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesSortBy" :descending.sync="settings.seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
-
-        <!-- issues page remove all button -->
-        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="bg-error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ $formatNumber(numShowing) }} {{ entityName }}</ui-btn>
-
-        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
-      </template>
-      <!-- search page -->
      <template v-else-if="page === 'search'">
-        <div class="grow" />
-        <p>{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"</p>
-        <div class="grow" />
-        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
-      </template>
-      <!-- authors page -->
-      <template v-else-if="isAuthorsPage">
-        <p class="hidden md:block">{{ $formatNumber(numShowing) }} {{ entityName }}</p>
-
-        <div class="grow hidden sm:inline-block" />
-        <ui-btn v-if="userCanUpdate && !isBatchSelecting" :loading="processingAuthors" color="bg-primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
-
-        <!-- author sort select -->
-        <controls-sort-select v-model="settings.authorSortBy" :descending.sync="settings.authorSortDesc" :items="authorSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorSort" />
-      </template>
-      <!-- home page -->
-      <template v-else-if="isHome">
-        <div class="grow" />
-        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
+        <div @click="searchBackArrow" class="rounded-full h-10 w-10 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">
+          <span class="material-icons text-3xl text-white">west</span>
+        </div>
+        <div class="flex-grow" />
+        <p>Search results for "{{ searchQuery }}"</p>
+        <div class="flex-grow" />
      </template>
    </div>
  </div>
@ -111,172 +74,57 @@ export default {
      type: Object,
      default: () => null
    },
-    searchQuery: String
+    searchQuery: String,
+    viewMode: String
  },
  data() {
    return {
      settings: {},
      hasInit: false,
      totalEntities: 0,
+      keywordFilter: null,
+      keywordTimeout: null,
      processingSeries: false,
-      processingIssues: false,
-      processingAuthors: false
+      processingIssues: false
    }
  },
  computed: {
-    seriesContextMenuItems() {
-      if (!this.selectedSeries) return []
-
-      const items = [
-        {
-          text: this.isSeriesFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished,
-          action: 'mark-series-finished'
-        }
-      ]
-
-      if (this.userIsAdminOrUp || this.selectedSeries.rssFeed) {
-        items.push({
-          text: this.$strings.LabelOpenRSSFeed,
-          action: 'open-rss-feed'
-        })
-      }
-
-      if (this.isSeriesRemovedFromContinueListening) {
-        items.push({
-          text: this.$strings.LabelReAddSeriesToContinueListening,
-          action: 're-add-to-continue-listening'
-        })
-      }
-
-      this.addSubtitlesMenuItem(items)
-      this.addCollapseSubSeriesMenuItem(items)
-
-      return items
-    },
-    seriesSortItems() {
-      return [
-        {
-          text: this.$strings.LabelName,
-          value: 'name'
-        },
-        {
-          text: this.$strings.LabelNumberOfBooks,
-          value: 'numBooks'
-        },
-        {
-          text: this.$strings.LabelAddedAt,
-          value: 'addedAt'
-        },
-        {
-          text: this.$strings.LabelLastBookAdded,
-          value: 'lastBookAdded'
-        },
-        {
-          text: this.$strings.LabelLastBookUpdated,
-          value: 'lastBookUpdated'
-        },
-        {
-          text: this.$strings.LabelTotalDuration,
-          value: 'totalDuration'
-        },
-        {
-          text: this.$strings.LabelRandomly,
-          value: 'random'
-        }
-      ]
-    },
-    authorSortItems() {
-      return [
-        {
-          text: this.$strings.LabelAuthorFirstLast,
-          value: 'name'
-        },
-        {
-          text: this.$strings.LabelAuthorLastFirst,
-          value: 'lastFirst'
-        },
-        {
-          text: this.$strings.LabelNumberOfBooks,
-          value: 'numBooks'
-        },
-        {
-          text: this.$strings.LabelAddedAt,
-          value: 'addedAt'
-        },
-        {
-          text: this.$strings.LabelUpdatedAt,
-          value: 'updatedAt'
-        }
-      ]
-    },
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
    userCanDelete() {
      return this.$store.getters['user/getUserCanDelete']
    },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
    },
-    userCanDownload() {
-      return this.$store.getters['user/getUserCanDownload']
+    isGridMode() {
+      return this.viewMode === 'grid'
    },
-    currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
-    },
-    libraryProvider() {
-      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
-    },
-    currentLibraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
-    },
-    isBookLibrary() {
-      return this.currentLibraryMediaType === 'book'
-    },
-    isPodcastLibrary() {
-      return this.currentLibraryMediaType === 'podcast'
-    },
-    isLibraryPage() {
+    showSortFilters() {
      return this.page === ''
    },
-    isSeriesPage() {
-      return this.page === 'series'
-    },
-    isCollectionsPage() {
-      return this.page === 'collections'
-    },
-    isPlaylistsPage() {
-      return this.page === 'playlists'
-    },
-    isHomePage() {
-      return this.$route.name === 'library-library'
-    },
-    isPodcastSearchPage() {
-      return this.$route.name === 'library-library-podcast-search'
-    },
-    isPodcastLatestPage() {
-      return this.$route.name === 'library-library-podcast-latest'
-    },
-    isPodcastDownloadQueuePage() {
-      return this.$route.name === 'library-library-podcast-download-queue'
-    },
-    isAuthorsPage() {
-      return this.page === 'authors'
-    },
    numShowing() {
      return this.totalEntities
    },
    entityName() {
-      if (this.isPodcastLibrary) return this.$strings.LabelPodcasts
-      if (!this.page) return this.$strings.LabelBooks
-      if (this.isSeriesPage) return this.$strings.LabelSeries
-      if (this.isCollectionsPage) return this.$strings.LabelCollections
-      if (this.isPlaylistsPage) return this.$strings.LabelPlaylists
-      if (this.isAuthorsPage) return this.$strings.LabelAuthors
+      if (this.isPodcast) return 'Podcasts'
+      if (!this.page) return 'Books'
+      if (this.page === 'series') return 'Series'
+      if (this.page === 'collections') return 'Collections'
      return ''
    },
-    seriesId() {
-      return this.selectedSeries ? this.selectedSeries.id : null
+    paramId() {
+      return this.$route.params ? this.$route.params.id || '' : ''
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    homePage() {
+      return this.$route.name === 'library-library'
+    },
+    libraryBookshelfPage() {
+      return this.$route.name === 'library-library-bookshelf-id'
+    },
+    showLibrary() {
+      return this.libraryBookshelfPage && this.paramId === '' && !this.showingIssues
    },
    seriesName() {
      return this.selectedSeries ? this.selectedSeries.name : null
@ -284,287 +132,66 @@ export default {
    seriesProgress() {
      return this.selectedSeries ? this.selectedSeries.progress : null
    },
-    seriesRssFeed() {
-      return this.selectedSeries ? this.selectedSeries.rssFeed : null
-    },
    seriesLibraryItemIds() {
      if (!this.seriesProgress) return []
      return this.seriesProgress.libraryItemIds || []
    },
-    isBatchSelecting() {
-      return this.$store.getters['globals/getIsBatchSelectingMediaItems']
-    },
    isSeriesFinished() {
      return this.seriesProgress && !!this.seriesProgress.isFinished
    },
-    isSeriesRemovedFromContinueListening() {
-      if (!this.seriesId) return false
-      return this.$store.getters['user/getIsSeriesRemovedFromContinueListening'](this.seriesId)
-    },
    filterBy() {
      return this.$store.getters['user/getUserSetting']('filterBy')
    },
    isIssuesFilter() {
-      return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
-    },
-    contextMenuItems() {
-      const items = []
-
-      if (this.isPodcastLibrary && this.isLibraryPage && this.userCanDownload) {
-        items.push({
-          text: this.$strings.LabelExportOPML,
-          action: 'export-opml'
-        })
-      }
-
-      this.addSubtitlesMenuItem(items)
-      this.addCollapseSeriesMenuItem(items)
-
-      return items
-    },
-    showPlaylists() {
-      return this.$store.state.libraries.numUserPlaylists > 0
+      return this.filterBy === 'issues'
    }
  },
  methods: {
-    addSubtitlesMenuItem(items) {
-      if (this.isBookLibrary && (!this.page || this.page === 'search')) {
-        if (this.settings.showSubtitles) {
-          items.push({
-            text: this.$strings.LabelHideSubtitles,
-            action: 'hide-subtitles'
-          })
-        } else {
-          items.push({
-            text: this.$strings.LabelShowSubtitles,
-            action: 'show-subtitles'
-          })
-        }
-      }
-    },
-    addCollapseSeriesMenuItem(items) {
-      if (this.isLibraryPage && this.isBookLibrary && !this.isBatchSelecting) {
-        if (this.settings.collapseSeries) {
-          items.push({
-            text: this.$strings.LabelExpandSeries,
-            action: 'expand-series'
-          })
-        } else {
-          items.push({
-            text: this.$strings.LabelCollapseSeries,
-            action: 'collapse-series'
-          })
-        }
-      }
-    },
-    addCollapseSubSeriesMenuItem(items) {
-      if (this.selectedSeries && this.isBookLibrary && !this.isBatchSelecting) {
-        if (this.settings.collapseBookSeries) {
-          items.push({
-            text: this.$strings.LabelExpandSubSeries,
-            action: 'expand-sub-series'
-          })
-        } else {
-          items.push({
-            text: this.$strings.LabelCollapseSubSeries,
-            action: 'collapse-sub-series'
-          })
-        }
-      }
-    },
-    handleSubtitlesAction(action) {
-      if (action === 'show-subtitles') {
-        this.settings.showSubtitles = true
-        this.updateShowSubtitles()
-        return true
-      }
-      if (action === 'hide-subtitles') {
-        this.settings.showSubtitles = false
-        this.updateShowSubtitles()
-        return true
-      }
-      return false
-    },
-    handleCollapseSeriesAction(action) {
-      if (action === 'collapse-series') {
-        this.settings.collapseSeries = true
-        this.updateCollapseSeries()
-        return true
-      }
-      if (action === 'expand-series') {
-        this.settings.collapseSeries = false
-        this.updateCollapseSeries()
-        return true
-      }
-      return false
-    },
-    handleCollapseSubSeriesAction(action) {
-      if (action === 'collapse-sub-series') {
-        this.settings.collapseBookSeries = true
-        this.updateCollapseSubSeries()
-        return true
-      }
-      if (action === 'expand-sub-series') {
-        this.settings.collapseBookSeries = false
-        this.updateCollapseSubSeries()
-        return true
-      }
-      return false
-    },
-    contextMenuAction({ action }) {
-      if (action === 'export-opml') {
-        this.exportOPML()
-        return
-      } else if (this.handleSubtitlesAction(action)) {
-        return
-      } else if (this.handleCollapseSeriesAction(action)) {
-        return
-      }
-    },
-    exportOPML() {
-      this.$downloadFile(`/api/libraries/${this.currentLibraryId}/opml?token=${this.$store.getters['user/getToken']}`, null, true)
-    },
-    seriesContextMenuAction({ action }) {
-      if (action === 'open-rss-feed') {
-        this.showOpenSeriesRSSFeed()
-      } else if (action === 're-add-to-continue-listening') {
-        if (this.processingSeries) {
-          console.warn('Already processing series')
-          return
-        }
-        this.reAddSeriesToContinueListening()
-      } else if (action === 'mark-series-finished') {
-        if (this.processingSeries) {
-          console.warn('Already processing series')
-          return
-        }
-        this.markSeriesFinished()
-      } else if (this.handleSubtitlesAction(action)) {
-        return
-      } else if (this.handleCollapseSubSeriesAction(action)) {
-        return
-      }
-    },
-    showOpenSeriesRSSFeed() {
-      this.$store.commit('globals/setRSSFeedOpenCloseModal', {
-        id: this.selectedSeries.id,
-        name: this.selectedSeries.name,
-        type: 'series',
-        feed: this.selectedSeries.rssFeed
-      })
-    },
-    reAddSeriesToContinueListening() {
-      this.processingSeries = true
-      this.$axios
-        .$get(`/api/me/series/${this.seriesId}/readd-to-continue-listening`)
-        .then(() => {
-          this.$toast.success(this.$strings.ToastItemUpdateSuccess)
-        })
-        .catch((error) => {
-          console.error('Failed to re-add series to continue listening', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
-        })
-        .finally(() => {
-          this.processingSeries = false
-        })
-    },
-    async fetchAllAuthors() {
-      // fetch all authors from the server, in the order that they are currently displayed
-      const response = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/authors?sort=${this.settings.authorSortBy}&desc=${this.settings.authorSortDesc}`)
-      return response.authors
-    },
-    async matchAllAuthors() {
-      this.processingAuthors = true
-
-      try {
-        const authors = await this.fetchAllAuthors()
-
-        for (const author of authors) {
-          const payload = {}
-          if (author.asin) payload.asin = author.asin
-          else payload.q = author.name
-
-          payload.region = 'us'
-          if (this.libraryProvider.startsWith('audible.')) {
-            payload.region = this.libraryProvider.split('.').pop() || 'us'
-          }
-
-          this.$eventBus.$emit(`searching-author-${author.id}`, true)
-
-          var response = await this.$axios.$post(`/api/authors/${author.id}/match`, payload).catch((error) => {
-            console.error('Failed', error)
-            return null
-          })
-          if (!response) {
-            console.error(`Author ${author.name} not found`)
-            this.$toast.error(this.$getString('ToastAuthorNotFound', [author.name]))
-          } else if (response.updated) {
-            if (response.author.imagePath) console.log(`Author ${response.author.name} was updated`)
-            else console.log(`Author ${response.author.name} was updated (no image found)`)
-          } else {
-            console.log(`No updates were made for Author ${response.author.name}`)
-          }
-
-          this.$eventBus.$emit(`searching-author-${author.id}`, false)
-        }
-      } catch (error) {
-        console.error('Failed to match all authors', error)
-        this.$toast.error(this.$strings.ToastMatchAllAuthorsFailed)
-      }
-      this.processingAuthors = false
-    },
    removeAllIssues() {
      if (confirm(`Are you sure you want to remove all library items with issues?\n\nNote: This will not delete any files`)) {
        this.processingIssues = true
        this.$axios
          .$delete(`/api/libraries/${this.currentLibraryId}/issues`)
          .then(() => {
-            this.$toast.success(this.$strings.ToastRemoveItemsWithIssuesSuccess)
+            this.$toast.success('Removed library items with issues')
            this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
-            this.$store.dispatch('libraries/fetch', this.currentLibraryId)
+            this.processingIssues = false
          })
          .catch((error) => {
            console.error('Failed to remove library items with issues', error)
-            this.$toast.error(this.$strings.ToastRemoveItemsWithIssuesFailed)
-          })
-          .finally(() => {
+            this.$toast.error('Failed to remove library items with issues')
            this.processingIssues = false
          })
      }
    },
    markSeriesFinished() {
-      const newIsFinished = !this.isSeriesFinished
-
-      const payload = {
-        message: newIsFinished ? this.$strings.MessageConfirmMarkSeriesFinished : this.$strings.MessageConfirmMarkSeriesNotFinished,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.processingSeries = true
-            const updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
-              return {
-                libraryItemId: lid,
-                isFinished: newIsFinished
-              }
-            })
-            console.log('Progress payloads', updateProgressPayloads)
-            this.$axios
-              .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
-              .then(() => {
-                this.$toast.success(this.$strings.ToastSeriesUpdateSuccess)
-                this.selectedSeries.progress.isFinished = newIsFinished
-              })
-              .catch((error) => {
-                this.$toast.error(this.$strings.ToastSeriesUpdateFailed)
-                console.error('Failed to batch update read/not read', error)
-              })
-              .finally(() => {
-                this.processingSeries = false
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
+      var newIsFinished = !this.isSeriesFinished
+      this.processingSeries = true
+      var updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
+        return {
+          id: lid,
+          isFinished: newIsFinished
+        }
+      })
+      console.log('Progress payloads', updateProgressPayloads)
+      this.$axios
+        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+        .then(() => {
+          this.$toast.success('Series update success')
+          this.selectedSeries.progress.isFinished = newIsFinished
+          this.processingSeries = false
+        })
+        .catch((error) => {
+          this.$toast.error('Series update failed')
+          console.error('Failed to batch update read/not read', error)
+          this.processingSeries = false
+        })
+    },
+    searchBackArrow() {
+      this.$router.replace(`/library/${this.currentLibraryId}/bookshelf`)
+    },
+    seriesBackArrow() {
+      this.$router.replace(`/library/${this.currentLibraryId}/bookshelf/series`)
    },
    updateOrder() {
      this.saveSettings()
@ -572,24 +199,9 @@ export default {
    updateFilter() {
      this.saveSettings()
    },
-    updateSeriesSort() {
-      this.saveSettings()
-    },
-    updateSeriesFilter() {
-      this.saveSettings()
-    },
    updateCollapseSeries() {
      this.saveSettings()
    },
-    updateCollapseSubSeries() {
-      this.saveSettings()
-    },
-    updateShowSubtitles() {
-      this.saveSettings()
-    },
-    updateAuthorSort() {
-      this.saveSettings()
-    },
    saveSettings() {
      this.$store.dispatch('user/updateUserSettings', this.settings)
    },
@ -604,31 +216,24 @@ export default {
    setBookshelfTotalEntities(totalEntities) {
      this.totalEntities = totalEntities
    },
-    rssFeedOpen(data) {
-      if (data.entityId === this.seriesId) {
-        console.log('RSS Feed Opened', data)
-        this.selectedSeries.rssFeed = data
-      }
+    keywordFilterInput() {
+      clearTimeout(this.keywordTimeout)
+      this.keywordTimeout = setTimeout(() => {
+        this.keywordUpdated(this.keywordFilter)
+      }, 1000)
    },
-    rssFeedClosed(data) {
-      if (data.entityId === this.seriesId) {
-        console.log('RSS Feed Closed', data)
-        this.selectedSeries.rssFeed = null
-      }
+    keywordUpdated() {
+      this.$eventBus.$emit('bookshelf-keyword-filter', this.keywordFilter)
    }
  },
  mounted() {
    this.init()
-    this.$eventBus.$on('user-settings', this.settingsUpdated)
+    this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
    this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)
-    this.$root.socket.on('rss_feed_open', this.rssFeedOpen)
-    this.$root.socket.on('rss_feed_closed', this.rssFeedClosed)
  },
  beforeDestroy() {
-    this.$eventBus.$off('user-settings', this.settingsUpdated)
+    this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
    this.$eventBus.$off('bookshelf-total-entities', this.setBookshelfTotalEntities)
-    this.$root.socket.off('rss_feed_open', this.rssFeedOpen)
-    this.$root.socket.off('rss_feed_closed', this.rssFeedClosed)
  }
 }
 </script>
@ -638,4 +243,4 @@ export default {
 #toolbar {
  box-shadow: 0px 8px 6px #111111aa;
 }
-</style>
+</style>
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@ -1,25 +1,17 @@
 <template>
-  <div role="toolbar" aria-orientation="vertical" aria-label="Config Sidebar">
-    <div role="navigation" aria-label="Config Navigation" class="w-44 fixed left-0 top-16 bg-bg/100 md:bg-bg/70 shadow-lg border-r border-white/5 py-3 transform transition-transform mb-12 overflow-y-auto" :class="wrapperClass + ' ' + (streamLibraryItem ? 'h-[calc(100%-270px)]' : 'h-[calc(100%-110px)]')" v-click-outside="clickOutside">
-      <div v-show="isMobilePortrait" class="flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
-        <span class="material-symbols text-2xl">arrow_back</span>
-      </div>
-
-      <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-3 h-12 border-b border-primary/30 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary/70' : 'hover:bg-primary/30'">
-        <p class="leading-4">{{ route.title }}</p>
-        <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
-      <modals-changelog-view-modal v-model="showChangelogModal" :versionData="versionData" />
+  <div class="w-44 fixed left-0 top-16 h-full bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform" :class="wrapperClass" v-click-outside="clickOutside">
+    <div class="md:hidden flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
+      <span class="material-icons text-2xl">arrow_back</span>
    </div>

-    <div class="w-44 h-12 px-4 border-t bg-bg border-black/20 fixed left-0 flex flex-col justify-center" :class="wrapperClass" :style="{ bottom: streamLibraryItem ? '160px' : '0px' }">
-      <div class="flex items-center justify-between">
-        <button type="button" class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</button>
+    <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-4 h-12 border-b border-opacity-0 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
+      <p>{{ route.title }}</p>
+      <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-        <p class="text-xs text-gray-300 italic">{{ Source }}</p>
-      </div>
-      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ versionData.latestVersion }}</a>
+    <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: streamLibraryItem && 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>
  </div>
 </template>
@ -30,17 +22,9 @@ export default {
    isOpen: Boolean
  },
  data() {
-    return {
-      showChangelogModal: false
-    }
+    return {}
  },
  computed: {
-    Source() {
-      return this.$store.state.Source
-    },
-    currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
-    },
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
@ -49,94 +33,54 @@ export default {
        return [
          {
            id: 'config-stats',
-            title: this.$strings.HeaderYourStats,
+            title: 'Your Stats',
            path: '/config/stats'
          }
        ]
      }
-      const configRoutes = [
+      return [
        {
          id: 'config',
-          title: this.$strings.HeaderSettings,
+          title: 'Settings',
          path: '/config'
        },
        {
          id: 'config-libraries',
-          title: this.$strings.HeaderLibraries,
+          title: 'Libraries',
          path: '/config/libraries'
        },
        {
          id: 'config-users',
-          title: this.$strings.HeaderUsers,
+          title: 'Users',
          path: '/config/users'
        },
-        {
-          id: 'config-api-keys',
-          title: this.$strings.HeaderApiKeys,
-          path: '/config/api-keys'
-        },
-        {
-          id: 'config-sessions',
-          title: this.$strings.HeaderListeningSessions,
-          path: '/config/sessions'
-        },
        {
          id: 'config-backups',
-          title: this.$strings.HeaderBackups,
+          title: 'Backups',
          path: '/config/backups'
        },
        {
          id: 'config-log',
-          title: this.$strings.HeaderLogs,
+          title: 'Log',
          path: '/config/log'
        },
        {
-          id: 'config-notifications',
-          title: this.$strings.HeaderNotifications,
-          path: '/config/notifications'
+          id: 'config-library-stats',
+          title: 'Library Stats',
+          path: '/config/library-stats'
        },
        {
-          id: 'config-email',
-          title: this.$strings.HeaderEmail,
-          path: '/config/email'
-        },
-        {
-          id: 'config-item-metadata-utils',
-          title: this.$strings.HeaderItemMetadataUtils,
-          path: '/config/item-metadata-utils'
-        },
-        {
-          id: 'config-rss-feeds',
-          title: this.$strings.HeaderRSSFeeds,
-          path: '/config/rss-feeds'
-        },
-        {
-          id: 'config-authentication',
-          title: this.$strings.HeaderAuthentication,
-          path: '/config/authentication'
+          id: 'config-stats',
+          title: 'Your Stats',
+          path: '/config/stats'
        }
      ]
-
-      if (this.currentLibraryId) {
-        configRoutes.push({
-          id: 'library-stats',
-          title: this.$strings.HeaderLibraryStats,
-          path: `/library/${this.currentLibraryId}/stats`
-        })
-        configRoutes.push({
-          id: 'config-stats',
-          title: this.$strings.HeaderYourStats,
-          path: '/config/stats'
-        })
-      }
-
-      return configRoutes
    },
    wrapperClass() {
      var classes = []
      if (this.drawerOpen) classes.push('translate-x-0')
      else classes.push('-translate-x-44')
-      if (this.isMobilePortrait) classes.push('z-50')
+      if (this.isMobile) classes.push('z-50')
      else classes.push('z-40')
      return classes.join(' ')
    },
@ -146,11 +90,9 @@ export default {
    isMobileLandscape() {
      return this.$store.state.globals.isMobileLandscape
    },
-    isMobilePortrait() {
-      return this.$store.state.globals.isMobilePortrait
-    },
    drawerOpen() {
-      return !this.isMobilePortrait || this.isOpen
+      if (this.isMobile) return this.isOpen
+      return true
    },
    routeName() {
      return this.$route.name
@ -161,6 +103,9 @@ export default {
    hasUpdate() {
      return !!this.versionData.hasUpdate
    },
+    latestVersion() {
+      return this.versionData.latestVersion
+    },
    githubTagUrl() {
      return this.versionData.githubTagUrl
    },
@ -169,9 +114,6 @@ export default {
    }
  },
  methods: {
-    clickChangelog() {
-      this.showChangelogModal = true
-    },
    clickOutside() {
      if (!this.isOpen) return
      this.closeDrawer()
@ -181,4 +123,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@ -1,39 +1,33 @@
 <template>
-  <div id="bookshelf" ref="bookshelf" class="w-full overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
+  <div id="bookshelf" class="w-full overflow-y-auto">
    <template v-for="shelf in totalShelves">
-      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4e sm:px-8e relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
-        <!-- Card skeletons -->
-        <template v-for="entityIndex in entitiesInShelf(shelf)">
-          <div :key="entityIndex" class="w-full h-full absolute rounded-sm z-5 top-0 left-0 bg-primary box-shadow-book" :style="{ transform: entityTransform(entityIndex), width: cardWidth + 'px', height: coverHeight + 'px' }" />
-        </template>
-        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20 h-6e" />
+      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
      </div>
    </template>

-    <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'items'" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
+    <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'books'" class="w-full flex flex-col items-center justify-center py-12">
+      <p class="text-center text-2xl font-book mb-4 py-4">{{ libraryName }} Library is empty!</p>
      <div v-if="userIsAdminOrUp" class="flex">
-        <ui-btn to="/config" color="bg-primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
-        <ui-btn color="bg-success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+        <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
+        <ui-btn color="success" class="w-52" @click="scan">Scan Library</ui-btn>
      </div>
    </div>
    <div v-else-if="!totalShelves && initialized" class="w-full py-16">
      <p class="text-xl text-center">{{ emptyMessage }}</p>
-      <div v-if="entityName === 'collections' || entityName === 'playlists'" class="flex justify-center mt-4">
-        {{ emptyMessageHelp }}
-        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
-          <a href="https://audiobookshelf.org/docs/documentation/libraries/common-content/playlists" target="_blank" class="inline-flex">
-            <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
-          </a>
-        </ui-tooltip>
-      </div>
      <!-- Clear filter only available on Library bookshelf -->
-      <div v-if="entityName === 'items'" class="flex justify-center mt-2">
-        <ui-btn v-if="hasFilter" color="bg-primary" @click="clearFilter">{{ $strings.ButtonClearFilter }}</ui-btn>
+      <div v-if="entityName === 'books'" class="flex justify-center mt-2">
+        <ui-btn v-if="hasFilter" color="primary" @click="clearFilter">Clear Filter</ui-btn>
      </div>
    </div>

-    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-30" />
+    <!-- Experimental Bookshelf Texture -->
+    <div v-show="showExperimentalFeatures" class="fixed bottom-4 right-28 z-40">
+      <div class="rounded-full py-1 bg-primary hover:bg-bg cursor-pointer px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent @click="showBookshelfTextureModal">
+        <p class="text-sm py-0.5">Texture</p>
+      </div>
+    </div>
  </div>
 </template>

@ -48,7 +42,6 @@ export default {
  mixins: [bookshelfCardsHelpers],
  data() {
    return {
-      routeFullPath: null,
      initialized: false,
      bookshelfHeight: 0,
      bookshelfWidth: 0,
@ -61,9 +54,10 @@ export default {
      entityIndexesMounted: [],
      entityComponentRefs: {},
      currentBookWidth: 0,
+      pageLoadQueue: [],
      isFetchingEntities: false,
      scrollTimeout: null,
-      booksPerFetch: 0,
+      booksPerFetch: 100,
      totalShelves: 0,
      bookshelfMarginLeft: 0,
      isSelectionMode: false,
@ -72,18 +66,7 @@ export default {
      keywordFilter: null,
      currScrollTop: 0,
      resizeTimeout: null,
-      mountWindowWidth: 0,
-      lastItemIndexSelected: -1,
-      tempIsScanning: false,
-      cardWidth: 0,
-      cardHeight: 0,
-      coverHeight: 0,
-      resizeObserver: null,
-      lastScrollTop: 0,
-      lastTimestamp: 0,
-      postScrollTimeout: null,
-      currFirstEntityIndex: -1,
-      currLastEntityIndex: -1
+      mountWindowWidth: 0
    }
  },
  watch: {
@ -99,48 +82,25 @@ export default {
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
-    libraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
    },
    isPodcast() {
-      return this.libraryMediaType === 'podcast'
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
    },
    emptyMessage() {
-      if (this.page === 'series') return this.$strings.MessageBookshelfNoSeries
-      if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollections
-      if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylists
-      if (this.page === 'authors') return this.$strings.MessageNoAuthors
+      if (this.page === 'series') return 'You have no series'
+      if (this.page === 'collections') return "You haven't made any collections yet"
      if (this.hasFilter) {
-        if (this.filterName === 'Issues') return this.$strings.MessageNoIssues
-        else if (this.filterName === 'Feed-open') return this.$strings.MessageBookshelfNoRSSFeeds
-        return this.$getString('MessageBookshelfNoResultsForFilter', [this.filterName, this.filterValue])
+        if (this.filterName === 'Issues') return 'No Issues'
+        return `No Results for filter "${this.filterName}: ${this.filterValue}"`
      }
-      return this.$strings.MessageNoResults
-    },
-    emptyMessageHelp() {
-      if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollectionsHelp
-      if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylistsHelp
-      return ''
+      return 'No results'
    },
    entityName() {
-      if (!this.page) return 'items'
+      if (!this.page) return 'books'
      return this.page
    },
-    seriesSortBy() {
-      return this.$store.getters['user/getUserSetting']('seriesSortBy')
-    },
-    seriesSortDesc() {
-      return this.$store.getters['user/getUserSetting']('seriesSortDesc')
-    },
-    seriesFilterBy() {
-      return this.$store.getters['user/getUserSetting']('seriesFilterBy')
-    },
-    authorSortBy() {
-      return this.$store.getters['user/getUserSetting']('authorSortBy')
-    },
-    authorSortDesc() {
-      return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
-    },
    orderBy() {
      return this.$store.getters['user/getUserSetting']('orderBy')
    },
@ -153,23 +113,24 @@ export default {
    collapseSeries() {
      return this.$store.getters['user/getUserSetting']('collapseSeries')
    },
-    collapseBookSeries() {
-      return this.$store.getters['user/getUserSetting']('collapseBookSeries')
-    },
    coverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    },
+    bookshelfView() {
+      return this.$store.getters['getServerSetting']('bookshelfView')
    },
    sortingIgnorePrefix() {
      return this.$store.getters['getServerSetting']('sortingIgnorePrefix')
    },
    isCoverSquareAspectRatio() {
-      return this.coverAspectRatio == 1
-    },
-    bookshelfView() {
-      return this.$store.getters['getBookshelfView']
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
    },
    isAlternativeBookshelfView() {
-      return this.bookshelfView === this.$constants.BookshelfView.DETAIL
+      if (!this.isEntityBook) return false // Only used for bookshelf showing books
+      return this.bookshelfView === this.$constants.BookshelfView.TITLES
+    },
+    bookCoverAspectRatio() {
+      return this.isCoverSquareAspectRatio ? 1 : 1.6
    },
    hasFilter() {
      return this.filterBy && this.filterBy !== 'all'
@ -191,126 +152,79 @@ export default {
    libraryName() {
      return this.$store.getters['libraries/getCurrentLibraryName']
    },
+    isEntityBook() {
+      return this.entityName === 'series-books' || this.entityName === 'books'
+    },
    bookWidth() {
-      return this.cardWidth
+      var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
+      if (this.isCoverSquareAspectRatio) return coverSize * 1.6
+      return coverSize
+    },
+    bookHeight() {
+      if (this.isCoverSquareAspectRatio) return this.bookWidth
+      return this.bookWidth * 1.6
    },
    shelfPadding() {
-      if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier
-      return 64 * this.sizeMultiplier
+      if (this.bookshelfWidth < 640) return 32
+      return 64
    },
    totalPadding() {
      return this.shelfPadding * 2
    },
    entityWidth() {
-      return this.cardWidth
+      if (this.entityName === 'series' || this.entityName === 'collections') {
+        if (this.bookWidth * 2 > this.bookshelfWidth - this.shelfPadding) return this.bookWidth * 1.6
+        return this.bookWidth * 2
+      }
+      return this.bookWidth
    },
-    shelfPaddingHeight() {
-      return 16
+    entityHeight() {
+      return this.bookHeight
+    },
+    shelfDividerHeightIndex() {
+      return 6
    },
    shelfHeight() {
-      const dividerHeight = this.isAlternativeBookshelfView ? 0 : 24 // h-6
-      return this.cardHeight + (this.shelfPaddingHeight + dividerHeight) * this.sizeMultiplier
+      if (this.isAlternativeBookshelfView) return this.entityHeight + 80 * this.sizeMultiplier
+      return this.entityHeight + 40
    },
    totalEntityCardWidth() {
      // Includes margin
-      return this.entityWidth + 24 * this.sizeMultiplier
+      return this.entityWidth + 24
    },
-    selectedMediaItems() {
-      return this.$store.state.globals.selectedMediaItems || []
+    selectedLibraryItems() {
+      return this.$store.state.selectedLibraryItems || []
    },
    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
-    },
-    isScanningLibrary() {
-      return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
+      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.entityWidth / baseSize
    }
  },
  methods: {
+    showBookshelfTextureModal() {
+      this.$store.commit('globals/setShowBookshelfTextureModal', true)
+    },
    clearFilter() {
      this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
    },
-    editEntity(entity, tab = 'details') {
-      if (this.entityName === 'items' || this.entityName === 'series-books') {
-        const bookIds = this.entities.map((e) => e.id)
+    editEntity(entity) {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        var bookIds = this.entities.map((e) => e.id)
        this.$store.commit('setBookshelfBookIds', bookIds)
-        this.$store.commit('showEditModalOnTab', { libraryItem: entity, tab: tab || 'details' })
+        this.$store.commit('showEditModal', entity)
      } else if (this.entityName === 'collections') {
        this.$store.commit('globals/setEditCollection', entity)
-      } else if (this.entityName === 'playlists') {
-        this.$store.commit('globals/setEditPlaylist', entity)
-      } else if (this.entityName === 'authors') {
-        this.$store.commit('globals/showEditAuthorModal', entity)
      }
    },
    clearSelectedEntities() {
      this.updateBookSelectionMode(false)
      this.isSelectionMode = false
    },
-    selectEntity(entity, shiftKey) {
-      if (this.entityName === 'items' || this.entityName === 'series-books') {
-        const indexOf = this.entities.findIndex((ent) => ent && ent.id === entity.id)
-        const lastLastItemIndexSelected = this.lastItemIndexSelected
-        if (!this.selectedMediaItems.some((i) => i.id === entity.id)) {
-          this.lastItemIndexSelected = indexOf
-        } else {
-          this.lastItemIndexSelected = -1
-        }
+    selectEntity(entity) {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        this.$store.commit('toggleLibraryItemSelected', entity.id)

-        if (shiftKey && lastLastItemIndexSelected >= 0) {
-          let loopStart = indexOf
-          let loopEnd = lastLastItemIndexSelected
-          if (indexOf > lastLastItemIndexSelected) {
-            loopStart = lastLastItemIndexSelected
-            loopEnd = indexOf
-          }
-
-          let isSelecting = false
-          // If any items in this range is not selected then select all otherwise unselect all
-          for (let i = loopStart; i <= loopEnd; i++) {
-            const thisEntity = this.entities[i]
-            if (thisEntity && !thisEntity.collapsedSeries) {
-              if (!this.selectedMediaItems.some((i) => i.id === thisEntity.id)) {
-                isSelecting = true
-                break
-              }
-            }
-          }
-          if (isSelecting) this.lastItemIndexSelected = indexOf
-
-          for (let i = loopStart; i <= loopEnd; i++) {
-            const thisEntity = this.entities[i]
-            if (thisEntity.collapsedSeries) {
-              console.warn('Ignoring collapsed series')
-              continue
-            }
-
-            const entityComponentRef = this.entityComponentRefs[i]
-            if (thisEntity && entityComponentRef) {
-              entityComponentRef.selected = isSelecting
-
-              const mediaItem = {
-                id: thisEntity.id,
-                mediaType: thisEntity.mediaType,
-                hasTracks: thisEntity.mediaType === 'podcast' || thisEntity.media.audioFile || thisEntity.media.numTracks || (thisEntity.media.tracks && thisEntity.media.tracks.length)
-              }
-              this.$store.commit('globals/setMediaItemSelected', { item: mediaItem, selected: isSelecting })
-            } else {
-              console.error('Invalid entity index', i)
-            }
-          }
-        } else {
-          const mediaItem = {
-            id: entity.id,
-            mediaType: entity.mediaType,
-            hasTracks: entity.mediaType === 'podcast' || entity.media.audioFile || entity.media.numTracks || (entity.media.tracks && entity.media.tracks.length)
-          }
-          this.$store.commit('globals/toggleMediaItemSelected', mediaItem)
-        }
-
-        const newIsSelectionMode = !!this.selectedMediaItems.length
+        var newIsSelectionMode = !!this.selectedLibraryItems.length
        if (this.isSelectionMode !== newIsSelectionMode) {
          this.isSelectionMode = newIsSelectionMode
          this.updateBookSelectionMode(newIsSelectionMode)
@ -323,12 +237,9 @@ export default {
          this.entityComponentRefs[key].setSelectionMode(isSelectionMode)
        }
      }
-      if (!isSelectionMode) {
-        this.lastItemIndexSelected = -1
-      }
    },
    async fetchEntites(page = 0) {
-      const startIndex = page * this.booksPerFetch
+      var startIndex = page * this.booksPerFetch

      this.isFetchingEntities = true

@ -336,12 +247,12 @@ export default {
        this.currentSFQueryString = this.buildSearchParams()
      }

-      let entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
-      const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
-      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed,numEpisodesIncomplete,share`
+      var entityPath = this.entityName === 'books' || this.entityName === 'series-books' ? `items` : this.entityName
+      var sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
+      var fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1`

-      const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
-        console.error('failed to fetch items', error)
+      var payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
+        console.error('failed to fetch books', error)
        return null
      })

@ -357,74 +268,72 @@ export default {
          this.totalEntities = payload.total
          this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
          this.entities = new Array(this.totalEntities)
+          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
        }

        for (let i = 0; i < payload.results.length; i++) {
-          const index = i + startIndex
+          var index = i + startIndex
          this.entities[index] = payload.results[i]
          if (this.entityComponentRefs[index]) {
            this.entityComponentRefs[index].setEntity(this.entities[index])
          }
        }
-
-        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
      }
    },
    loadPage(page) {
-      if (!this.pagesLoaded[page]) this.pagesLoaded[page] = this.fetchEntites(page)
-      return this.pagesLoaded[page]
+      this.pagesLoaded[page] = true
+      this.fetchEntites(page)
    },
    showHideBookPlaceholder(index, show) {
      var el = document.getElementById(`book-${index}-placeholder`)
      if (el) el.style.display = show ? 'flex' : 'none'
    },
-    mountEntities(fromIndex, toIndex) {
+    mountEntites(fromIndex, toIndex) {
      for (let i = fromIndex; i < toIndex; i++) {
        if (!this.entityIndexesMounted.includes(i)) {
          this.cardsHelpers.mountEntityCard(i)
        }
      }
    },
-    getVisibleIndices(scrollTop) {
-      const firstShelfIndex = Math.floor(scrollTop / this.shelfHeight)
-      const lastShelfIndex = Math.min(Math.ceil((scrollTop + this.bookshelfHeight) / this.shelfHeight), this.totalShelves - 1)
-      const firstEntityIndex = firstShelfIndex * this.entitiesPerShelf
-      const lastEntityIndex = Math.min(lastShelfIndex * this.entitiesPerShelf + this.entitiesPerShelf, this.totalEntities)
-      return { firstEntityIndex, lastEntityIndex }
-    },
-    postScroll() {
-      const { firstEntityIndex, lastEntityIndex } = this.getVisibleIndices(this.currScrollTop)
+    handleScroll(scrollTop) {
+      this.currScrollTop = scrollTop
+      var firstShelfIndex = Math.floor(scrollTop / this.shelfHeight)
+      var lastShelfIndex = Math.ceil((scrollTop + this.bookshelfHeight) / this.shelfHeight)
+      lastShelfIndex = Math.min(this.totalShelves - 1, lastShelfIndex)
+
+      var firstBookIndex = firstShelfIndex * this.entitiesPerShelf
+      var lastBookIndex = lastShelfIndex * this.entitiesPerShelf + this.entitiesPerShelf
+      lastBookIndex = Math.min(this.totalEntities, lastBookIndex)
+
+      var firstBookPage = Math.floor(firstBookIndex / this.booksPerFetch)
+      var lastBookPage = Math.floor(lastBookIndex / this.booksPerFetch)
+      if (!this.pagesLoaded[firstBookPage]) {
+        // console.log('Must load next batch', firstBookPage, 'book index', firstBookIndex)
+        this.loadPage(firstBookPage)
+      }
+      if (!this.pagesLoaded[lastBookPage]) {
+        // console.log('Must load last next batch', lastBookPage, 'book index', lastBookIndex)
+        this.loadPage(lastBookPage)
+      }
+
      this.entityIndexesMounted = this.entityIndexesMounted.filter((_index) => {
-        if (_index < firstEntityIndex || _index >= lastEntityIndex) {
-          var el = this.entityComponentRefs[_index]
-          if (el && el.$el) el.$el.remove()
+        if (_index < firstBookIndex || _index >= lastBookIndex) {
+          var el = document.getElementById(`book-card-${_index}`)
+          if (el) el.remove()
          return false
        }
        return true
      })
+      this.mountEntites(firstBookIndex, lastBookIndex)
    },
-    handleScroll(scrollTop) {
-      this.currScrollTop = scrollTop
-      const { firstEntityIndex, lastEntityIndex } = this.getVisibleIndices(scrollTop)
-      if (firstEntityIndex === this.currFirstEntityIndex && lastEntityIndex === this.currLastEntityIndex) return
-      this.currFirstEntityIndex = firstEntityIndex
-      this.currLastEntityIndex = lastEntityIndex
-
-      clearTimeout(this.postScrollTimeout)
-      const firstPage = Math.floor(firstEntityIndex / this.booksPerFetch)
-      const lastPage = Math.floor(lastEntityIndex / this.booksPerFetch)
-      Promise.all([this.loadPage(firstPage), this.loadPage(lastPage)])
-        .then(() => this.mountEntities(firstEntityIndex, lastEntityIndex))
-        .catch((error) => console.error('Failed to load page', error))
-
-      this.postScrollTimeout = setTimeout(this.postScroll, 500)
-    },
-    async resetEntities(scrollPositionToRestore) {
+    async resetEntities() {
      if (this.isFetchingEntities) {
        this.pendingReset = true
        return
      }
      this.destroyEntityComponents()
+      this.entityIndexesMounted = []
+      this.entityComponentRefs = {}
      this.pagesLoaded = {}
      this.entities = []
      this.totalShelves = 0
@ -434,45 +343,45 @@ export default {
      this.initialized = false

      this.initSizeData()
-      await this.loadPage(0)
+      this.pagesLoaded[0] = true
+      await this.fetchEntites(0)
      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
-      this.mountEntities(0, lastBookIndex)
-
-      if (scrollPositionToRestore) {
-        if (window.bookshelf) {
-          window.bookshelf.scrollTop = scrollPositionToRestore
+      this.mountEntites(0, lastBookIndex)
+    },
+    remountEntities() {
+      for (const key in this.entityComponentRefs) {
+        if (this.entityComponentRefs[key]) {
+          this.entityComponentRefs[key].destroy()
        }
      }
+      this.entityComponentRefs = {}
+      this.entityIndexesMounted.forEach((i) => {
+        this.cardsHelpers.mountEntityCard(i)
+      })
    },
-    async rebuild() {
+    rebuild() {
      this.initSizeData()

-      var lastBookIndex = Math.min(this.totalEntities, this.booksPerFetch)
-      this.destroyEntityComponents()
-      await this.loadPage(0)
-      if (window.bookshelf) {
-        window.bookshelf.scrollTop = 0
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      this.entityIndexesMounted = []
+      for (let i = 0; i < lastBookIndex; i++) {
+        this.entityIndexesMounted.push(i)
      }
-      this.mountEntities(0, lastBookIndex)
+      var bookshelfEl = document.getElementById('bookshelf')
+      if (bookshelfEl) {
+        bookshelfEl.scrollTop = 0
+      }
+
+      this.$nextTick(this.remountEntities)
    },
    buildSearchParams() {
-      if (this.page === 'search' || this.page === 'collections') {
+      if (this.page === 'search' || this.page === 'series' || this.page === 'collections') {
        return ''
      }

      let searchParams = new URLSearchParams()
-      if (this.page === 'series') {
-        searchParams.set('sort', this.seriesSortBy)
-        searchParams.set('desc', this.seriesSortDesc ? 1 : 0)
-        searchParams.set('filter', this.seriesFilterBy)
-      } else if (this.page === 'series-books') {
+      if (this.page === 'series-books') {
        searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
-        if (this.collapseBookSeries) {
-          searchParams.set('collapseseries', 1)
-        }
-      } else if (this.page === 'authors') {
-        searchParams.set('sort', this.authorSortBy)
-        searchParams.set('desc', this.authorSortDesc ? 1 : 0)
      } else {
        if (this.filterBy && this.filterBy !== 'all') {
          searchParams.set('filter', this.filterBy)
@ -488,6 +397,8 @@ export default {
      return searchParams.toString()
    },
    checkUpdateSearchParams() {
+      if (this.page === 'series-books') return false
+
      var newSearchParams = this.buildSearchParams()
      var currentQueryString = window.location.search
      if (currentQueryString && currentQueryString.startsWith('?')) currentQueryString = currentQueryString.slice(1)
@ -498,49 +409,26 @@ export default {
      if (newSearchParams !== this.currentSFQueryString || newSearchParams !== currentQueryString) {
        let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + newSearchParams
        window.history.replaceState({ path: newurl }, '', newurl)
-
-        this.routeFullPath = window.location.pathname + (window.location.search || '') // Update for saving scroll position
        return true
      }

      return false
    },
-    seriesSortUpdated() {
+    settingsUpdated(settings) {
      var wasUpdated = this.checkUpdateSearchParams()
-      if (wasUpdated) {
-        this.resetEntities()
-      }
-    },
-    async settingsUpdated(settings) {
-      await this.cardsHelpers.setCardSize()
-      const wasUpdated = this.checkUpdateSearchParams()
      if (wasUpdated) {
        this.resetEntities()
      } else if (settings.bookshelfCoverSize !== this.currentBookWidth) {
-        this.rebuild()
+        this.executeRebuild()
      }
    },
-    getScrollRate() {
-      const currentTimestamp = Date.now()
-      const timeDelta = currentTimestamp - this.lastTimestamp
-      const scrollDelta = this.currScrollTop - this.lastScrollTop
-      const scrollRate = Math.abs(scrollDelta) / (timeDelta || 1)
-      this.lastScrollTop = this.currScrollTop
-      this.lastTimestamp = currentTimestamp
-      return scrollRate
-    },
    scroll(e) {
      if (!e || !e.target) return
-      clearTimeout(this.scrollTimeout)
-      const { scrollTop } = e.target
-      const scrollRate = this.getScrollRate()
-      if (scrollRate > 5) {
-        this.scrollTimeout = setTimeout(() => {
-          this.handleScroll(scrollTop)
-        }, 25)
-        return
-      }
+      var { scrollTop } = e.target
+      // clearTimeout(this.scrollTimeout)
+      // this.scrollTimeout = setTimeout(() => {
      this.handleScroll(scrollTop)
+      // }, 250)
    },
    libraryItemAdded(libraryItem) {
      console.log('libraryItem added', libraryItem)
@ -549,18 +437,9 @@ export default {
    },
    libraryItemUpdated(libraryItem) {
      console.log('Item updated', libraryItem)
-      if (this.entityName === 'items' || this.entityName === 'series-books') {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
        var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
        if (indexOf >= 0) {
-          if (this.entityName === 'items' && this.orderBy === 'media.metadata.title') {
-            const curTitle = this.entities[indexOf].media.metadata?.title
-            const newTitle = libraryItem.media.metadata?.title
-            if (curTitle != newTitle) {
-              console.log('Title changed. Re-sorting...')
-              this.resetEntities(this.currScrollTop)
-              return
-            }
-          }
          this.entities[indexOf] = libraryItem
          if (this.entityComponentRefs[indexOf]) {
            this.entityComponentRefs[indexOf].setEntity(libraryItem)
@ -568,29 +447,16 @@ export default {
        }
      }
    },
-    routeToBookshelfIfLastIssueRemoved() {
-      if (this.totalEntities === 0) {
-        const currentRouteQuery = this.$route.query
-        if (currentRouteQuery?.filter && currentRouteQuery.filter === 'issues') {
-          this.$nextTick(() => {
-            console.log('Last issue removed. Redirecting to library bookshelf')
-            this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
-            this.$store.dispatch('libraries/fetch', this.currentLibraryId)
-          })
-        }
-      }
-    },
    libraryItemRemoved(libraryItem) {
-      if (this.entityName === 'items' || this.entityName === 'series-books') {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
        var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
        if (indexOf >= 0) {
          this.entities = this.entities.filter((ent) => ent.id !== libraryItem.id)
-          this.totalEntities--
+          this.totalEntities = this.entities.length
          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
          this.executeRebuild()
        }
      }
-      this.routeToBookshelfIfLastIssueRemoved()
    },
    libraryItemsAdded(libraryItems) {
      console.log('items added', libraryItems)
@ -624,105 +490,11 @@ export default {
      var indexOf = this.entities.findIndex((ent) => ent && ent.id === collection.id)
      if (indexOf >= 0) {
        this.entities = this.entities.filter((ent) => ent.id !== collection.id)
-        this.totalEntities--
+        this.totalEntities = this.entities.length
        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
        this.executeRebuild()
      }
    },
-    playlistAdded(playlist) {
-      if (this.entityName !== 'playlists') return
-      console.log(`[LazyBookshelf] playlistAdded ${playlist.id}`, playlist)
-      this.resetEntities()
-    },
-    playlistUpdated(playlist) {
-      if (this.entityName !== 'playlists') return
-      console.log(`[LazyBookshelf] playlistUpdated ${playlist.id}`, playlist)
-      var indexOf = this.entities.findIndex((ent) => ent && ent.id === playlist.id)
-      if (indexOf >= 0) {
-        this.entities[indexOf] = playlist
-        if (this.entityComponentRefs[indexOf]) {
-          this.entityComponentRefs[indexOf].setEntity(playlist)
-        }
-      }
-    },
-    playlistRemoved(playlist) {
-      if (this.entityName !== 'playlists') return
-      console.log(`[LazyBookshelf] playlistRemoved ${playlist.id}`, playlist)
-      var indexOf = this.entities.findIndex((ent) => ent && ent.id === playlist.id)
-      if (indexOf >= 0) {
-        this.entities = this.entities.filter((ent) => ent.id !== playlist.id)
-        this.totalEntities--
-        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
-        this.executeRebuild()
-      }
-    },
-    authorAdded(author) {
-      if (this.entityName !== 'authors') return
-      console.log(`[LazyBookshelf] authorAdded ${author.id}`, author)
-      this.resetEntities()
-    },
-    authorUpdated(author) {
-      if (this.entityName !== 'authors') return
-      console.log(`[LazyBookshelf] authorUpdated ${author.id}`, author)
-      const indexOf = this.entities.findIndex((ent) => ent && ent.id === author.id)
-      if (indexOf >= 0) {
-        this.entities[indexOf] = author
-        if (this.entityComponentRefs[indexOf]) {
-          this.entityComponentRefs[indexOf].setEntity(author)
-        }
-      }
-    },
-    authorRemoved(author) {
-      if (this.entityName !== 'authors') return
-      console.log(`[LazyBookshelf] authorRemoved ${author.id}`, author)
-      const indexOf = this.entities.findIndex((ent) => ent && ent.id === author.id)
-      if (indexOf >= 0) {
-        this.entities = this.entities.filter((ent) => ent.id !== author.id)
-        this.totalEntities--
-        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
-        this.executeRebuild()
-      }
-    },
-
-    shareOpen(mediaItemShare) {
-      if (this.entityName === 'items' || this.entityName === 'series-books') {
-        var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
-        if (indexOf >= 0) {
-          if (this.entityComponentRefs[indexOf]) {
-            const libraryItem = { ...this.entityComponentRefs[indexOf].libraryItem }
-            libraryItem.mediaItemShare = mediaItemShare
-            this.entityComponentRefs[indexOf].setEntity?.(libraryItem)
-          }
-        }
-      }
-    },
-    shareClosed(mediaItemShare) {
-      if (this.entityName === 'items' || this.entityName === 'series-books') {
-        var indexOf = this.entities.findIndex((ent) => ent?.media?.id === mediaItemShare.mediaItemId)
-        if (indexOf >= 0) {
-          if (this.entityComponentRefs[indexOf]) {
-            const libraryItem = { ...this.entityComponentRefs[indexOf].libraryItem }
-            libraryItem.mediaItemShare = null
-            this.entityComponentRefs[indexOf].setEntity?.(libraryItem)
-          }
-        }
-      }
-    },
-    updatePagesLoaded() {
-      let numPages = Math.ceil(this.totalEntities / this.booksPerFetch)
-      this.pagesLoaded = {}
-      for (let page = 0; page < numPages; page++) {
-        let numEntities = Math.min(this.totalEntities - page * this.booksPerFetch, this.booksPerFetch)
-        this.pagesLoaded[page] = Promise.resolve()
-        for (let i = 0; i < numEntities; i++) {
-          const index = page * this.booksPerFetch + i
-          if (!this.entities[index]) {
-            if (this.pagesLoaded[page]) delete this.pagesLoaded[page]
-            break
-          }
-        }
-      }
-    },
    initSizeData(_bookshelf) {
      var bookshelf = _bookshelf || document.getElementById('bookshelf')
      if (!bookshelf) {
@ -732,19 +504,13 @@ export default {
      var entitiesPerShelfBefore = this.entitiesPerShelf

      var { clientHeight, clientWidth } = bookshelf
+      // console.log('Init bookshelf width', clientWidth, 'window width', window.innerWidth)
      this.mountWindowWidth = window.innerWidth
      this.bookshelfHeight = clientHeight
      this.bookshelfWidth = clientWidth
      this.entitiesPerShelf = Math.max(1, Math.floor((this.bookshelfWidth - this.shelfPadding) / this.totalEntityCardWidth))
      this.shelvesPerPage = Math.ceil(this.bookshelfHeight / this.shelfHeight) + 2
      this.bookshelfMarginLeft = (this.bookshelfWidth - this.entitiesPerShelf * this.totalEntityCardWidth) / 2
-      const booksPerFetch = this.entitiesPerShelf * this.shelvesPerPage
-      if (booksPerFetch !== this.booksPerFetch) {
-        this.booksPerFetch = booksPerFetch
-        if (this.totalEntities) {
-          this.updatePagesLoaded()
-        }
-      }

      this.currentBookWidth = this.bookWidth
      if (this.totalEntities) {
@ -753,21 +519,13 @@ export default {
      return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
    },
    async init(bookshelf) {
-      this.initSizeData(bookshelf)
      this.checkUpdateSearchParams()
+      this.initSizeData(bookshelf)

-      await this.loadPage(0)
+      this.pagesLoaded[0] = true
+      await this.fetchEntites(0)
      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
-      this.mountEntities(0, lastBookIndex)
-
-      // Set last scroll position for this bookshelf page
-      if (this.$store.state.lastBookshelfScrollData[this.page] && window.bookshelf) {
-        const { path, scrollTop } = this.$store.state.lastBookshelfScrollData[this.page]
-        if (path === this.routeFullPath) {
-          // Exact path match with query so use scroll position
-          window.bookshelf.scrollTop = scrollTop
-        }
-      }
+      this.mountEntites(0, lastBookIndex)
    },
    executeRebuild() {
      clearTimeout(this.resizeTimeout)
@ -778,6 +536,10 @@ export default {
    windowResize() {
      this.executeRebuild()
    },
+    socketInit() {
+      // Server settings are set on socket init
+      this.executeRebuild()
+    },
    initListeners() {
      window.addEventListener('resize', this.windowResize)

@ -785,12 +547,14 @@ export default {
        var bookshelf = document.getElementById('bookshelf')
        if (bookshelf) {
          this.init(bookshelf)
-          bookshelf.addEventListener('scroll', this.scroll, { passive: true })
+          bookshelf.addEventListener('scroll', this.scroll)
        }
      })

-      this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
-      this.$eventBus.$on('user-settings', this.settingsUpdated)
+      this.$eventBus.$on('bookshelf-clear-selection', this.clearSelectedEntities)
+      this.$eventBus.$on('socket_init', this.socketInit)
+
+      this.$store.commit('user/addSettingsListener', { id: 'lazy-bookshelf', meth: this.settingsUpdated })

      if (this.$root.socket) {
        this.$root.socket.on('item_updated', this.libraryItemUpdated)
@ -801,14 +565,6 @@ export default {
        this.$root.socket.on('collection_added', this.collectionAdded)
        this.$root.socket.on('collection_updated', this.collectionUpdated)
        this.$root.socket.on('collection_removed', this.collectionRemoved)
-        this.$root.socket.on('playlist_added', this.playlistAdded)
-        this.$root.socket.on('playlist_updated', this.playlistUpdated)
-        this.$root.socket.on('playlist_removed', this.playlistRemoved)
-        this.$root.socket.on('author_added', this.authorAdded)
-        this.$root.socket.on('author_updated', this.authorUpdated)
-        this.$root.socket.on('author_removed', this.authorRemoved)
-        this.$root.socket.on('share_open', this.shareOpen)
-        this.$root.socket.on('share_closed', this.shareClosed)
      } else {
        console.error('Bookshelf - Socket not initialized')
      }
@ -819,9 +575,10 @@ export default {
      if (bookshelf) {
        bookshelf.removeEventListener('scroll', this.scroll)
      }
+      this.$eventBus.$off('bookshelf-clear-selection', this.clearSelectedEntities)
+      this.$eventBus.$off('socket_init', this.socketInit)

-      this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
-      this.$eventBus.$off('user-settings', this.settingsUpdated)
+      this.$store.commit('user/removeSettingsListener', 'lazy-bookshelf')

      if (this.$root.socket) {
        this.$root.socket.off('item_updated', this.libraryItemUpdated)
@ -832,59 +589,25 @@ export default {
        this.$root.socket.off('collection_added', this.collectionAdded)
        this.$root.socket.off('collection_updated', this.collectionUpdated)
        this.$root.socket.off('collection_removed', this.collectionRemoved)
-        this.$root.socket.off('playlist_added', this.playlistAdded)
-        this.$root.socket.off('playlist_updated', this.playlistUpdated)
-        this.$root.socket.off('playlist_removed', this.playlistRemoved)
-        this.$root.socket.off('author_added', this.authorAdded)
-        this.$root.socket.off('author_updated', this.authorUpdated)
-        this.$root.socket.off('author_removed', this.authorRemoved)
-        this.$root.socket.off('share_open', this.shareOpen)
-        this.$root.socket.off('share_closed', this.shareClosed)
      } else {
        console.error('Bookshelf - Socket not initialized')
      }
    },
    destroyEntityComponents() {
      for (const key in this.entityComponentRefs) {
-        const ref = this.entityComponentRefs[key]
-        if (ref && ref.destroy) {
-          if (ref.$el) ref.$el.remove()
-          ref.destroy()
+        if (this.entityComponentRefs[key] && this.entityComponentRefs[key].destroy) {
+          this.entityComponentRefs[key].destroy()
        }
      }
-      this.entityComponentRefs = {}
-      this.entityIndexesMounted = []
    },
    scan() {
-      this.tempIsScanning = true
-      this.$store
-        .dispatch('libraries/requestLibraryScan', { libraryId: this.currentLibraryId })
-        .catch((error) => {
-          console.error('Failed to start scan', error)
-          this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
-        })
-        .finally(() => {
-          this.tempIsScanning = false
-        })
-    },
-    entitiesInShelf(shelf) {
-      return shelf == this.totalShelves ? this.totalEntities % this.entitiesPerShelf || this.entitiesPerShelf : this.entitiesPerShelf
-    },
-    entityTransform(entityIndex) {
-      const shelfOffsetY = this.shelfPaddingHeight * this.sizeMultiplier
-      const shelfOffsetX = (entityIndex - 1) * this.totalEntityCardWidth + this.bookshelfMarginLeft
-      return `translate3d(${shelfOffsetX}px, ${shelfOffsetY}px, 0px)`
+      this.$store.dispatch('libraries/requestLibraryScan', { libraryId: this.currentLibraryId })
    }
  },
-  async mounted() {
-    await this.cardsHelpers.setCardSize()
+  mounted() {
    this.initListeners()
-
-    this.routeFullPath = window.location.pathname + (window.location.search || '')
  },
  updated() {
-    this.routeFullPath = window.location.pathname + (window.location.search || '')
-
    setTimeout(() => {
      if (window.innerWidth > 0 && window.innerWidth !== this.mountWindowWidth) {
        console.log('Updated window width', window.innerWidth, 'from', this.mountWindowWidth)
@ -895,11 +618,6 @@ export default {
  beforeDestroy() {
    this.destroyEntityComponents()
    this.removeListeners()
-
-    // Set bookshelf scroll position for specific bookshelf page and query
-    if (window.bookshelf) {
-      this.$store.commit('setLastBookshelfScrollData', { scrollTop: window.bookshelf.scrollTop || 0, path: this.routeFullPath, name: this.page })
-    }
  }
 }
 </script>
@ -908,10 +626,9 @@ export default {
 .bookshelfRow {
  background-image: var(--bookshelf-texture-img);
 }
-
 .bookshelfDivider {
  background: rgb(149, 119, 90);
  background: var(--bookshelf-divider-bg);
-  box-shadow: 0.125em 0.875em 0.5em #111111aa;
+  box-shadow: 2px 14px 8px #111111aa;
 }
-</style>
+</style>
--- a/client/components/app/MediaPlayerContainer.vue
+++ b/client/components/app/MediaPlayerContainer.vue
@ -1,571 +0,0 @@
-<template>
-  <div v-if="streamLibraryItem" id="mediaPlayerContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 lg:h-40 z-50 bg-primary px-2 lg:px-4 pb-1 lg:pb-4 pt-2">
-    <div class="absolute left-2 top-2 lg:left-4 cursor-pointer">
-      <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
-    </div>
-    <div class="flex items-start mb-6 lg:mb-0" :class="isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
-      <div class="min-w-0 w-full">
-        <div class="flex items-center">
-          <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
-            {{ title }}
-          </nuxt-link>
-          <widgets-explicit-indicator v-if="isExplicit" />
-        </div>
-        <div class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
-          <span class="material-symbols text-sm">person</span>
-          <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">{{ podcastAuthor }}</div>
-          <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">
-            <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
-          </div>
-          <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
-        </div>
-
-        <div class="text-gray-400 flex items-center">
-          <span class="material-symbols text-xs">schedule</span>
-          <p class="font-mono text-xs sm:text-sm pl-1 sm:pl-1.5 pb-px">{{ totalDurationPretty }}</p>
-        </div>
-      </div>
-      <div class="grow" />
-      <ui-tooltip direction="top" :text="$strings.LabelClosePlayer">
-        <button :aria-label="$strings.LabelClosePlayer" class="material-symbols sm:px-2 py-1 lg:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</button>
-      </ui-tooltip>
-    </div>
-    <player-ui
-      ref="audioPlayer"
-      :chapters="chapters"
-      :current-chapter="currentChapter"
-      :paused="!isPlaying"
-      :loading="playerLoading"
-      :bookmarks="bookmarks"
-      :sleep-timer-set="sleepTimerSet"
-      :sleep-timer-remaining="sleepTimerRemaining"
-      :sleep-timer-type="sleepTimerType"
-      :is-podcast="isPodcast"
-      :hasNextItemInQueue="hasNextItemInQueue"
-      @playPause="playPause"
-      @jumpForward="jumpForward"
-      @jumpBackward="jumpBackward"
-      @setVolume="setVolume"
-      @setPlaybackRate="setPlaybackRate"
-      @seek="seek"
-      @nextItemInQueue="playNextItemInQueue"
-      @close="closePlayer"
-      @showBookmarks="showBookmarks"
-      @showSleepTimer="showSleepTimerModal = true"
-      @showPlayerQueueItems="showPlayerQueueItemsModal = true"
-    />
-
-    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :playback-rate="currentPlaybackRate" :library-item-id="libraryItemId" @select="selectBookmark" />
-
-    <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-type="sleepTimerType" :remaining="sleepTimerRemaining" :has-chapters="!!chapters.length" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
-
-    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" />
-  </div>
-</template>
-
-<script>
-import PlayerHandler from '@/players/PlayerHandler'
-
-export default {
-  data() {
-    return {
-      playerHandler: new PlayerHandler(this),
-      totalDuration: 0,
-      showBookmarksModal: false,
-      bookmarkCurrentTime: 0,
-      playerLoading: false,
-      isPlaying: false,
-      currentTime: 0,
-      showSleepTimerModal: false,
-      showPlayerQueueItemsModal: false,
-      sleepTimerSet: false,
-      sleepTimerRemaining: 0,
-      sleepTimerType: null,
-      sleepTimer: null,
-      displayTitle: null,
-      currentPlaybackRate: 1,
-      syncFailedToast: null,
-      coverAspectRatio: 1,
-      lastChapterId: null
-    }
-  },
-  computed: {
-    isSquareCover() {
-      return this.coverAspectRatio === 1
-    },
-    isMobile() {
-      return this.$store.state.globals.isMobile
-    },
-    bookCoverWidth() {
-      if (this.isMobile) return 64 / this.coverAspectRatio
-      return 77 / this.coverAspectRatio
-    },
-    cover() {
-      if (this.media.coverPath) return this.media.coverPath
-      return 'Logo.png'
-    },
-    user() {
-      return this.$store.state.user.user
-    },
-    userMediaProgress() {
-      if (!this.libraryItemId) return
-      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
-    },
-    userItemCurrentTime() {
-      return this.userMediaProgress ? this.userMediaProgress.currentTime || 0 : 0
-    },
-    bookmarks() {
-      if (!this.libraryItemId) return []
-      return this.$store.getters['user/getUserBookmarksForItem'](this.libraryItemId)
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
-    },
-    streamEpisode() {
-      if (!this.$store.state.streamEpisodeId) return null
-      const episodes = this.streamLibraryItem.media.episodes || []
-      return episodes.find((ep) => ep.id === this.$store.state.streamEpisodeId)
-    },
-    libraryItemId() {
-      return this.streamLibraryItem?.id || null
-    },
-    media() {
-      return this.streamLibraryItem?.media || {}
-    },
-    isPodcast() {
-      return this.streamLibraryItem?.mediaType === 'podcast'
-    },
-    isExplicit() {
-      return !!this.mediaMetadata.explicit
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    chapters() {
-      if (this.streamEpisode) return this.streamEpisode.chapters || []
-      return this.media.chapters || []
-    },
-    currentChapter() {
-      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
-    },
-    title() {
-      if (this.playerHandler.displayTitle) return this.playerHandler.displayTitle
-      return this.mediaMetadata.title || 'No Title'
-    },
-    authors() {
-      return this.mediaMetadata.authors || []
-    },
-    libraryId() {
-      return this.streamLibraryItem?.libraryId || null
-    },
-    totalDurationPretty() {
-      // Adjusted by playback rate
-      return this.$secondsToTimestamp(this.totalDuration / this.currentPlaybackRate)
-    },
-    podcastAuthor() {
-      if (!this.isPodcast) return null
-      return this.mediaMetadata.author || this.$strings.LabelUnknown
-    },
-    hasNextItemInQueue() {
-      return this.currentPlayerQueueIndex < this.playerQueueItems.length - 1
-    },
-    currentPlayerQueueIndex() {
-      if (!this.libraryItemId) return -1
-      return this.playerQueueItems.findIndex((i) => {
-        if (this.streamEpisode?.id) return i.episodeId === this.streamEpisode.id
-        return i.libraryItemId === this.libraryItemId
-      })
-    },
-    playerQueueItems() {
-      return this.$store.state.playerQueueItems || []
-    }
-  },
-  methods: {
-    mediaFinished(libraryItemId, episodeId) {
-      // Play next item in queue
-      if (!this.playerQueueItems.length || !this.$store.state.playerQueueAutoPlay) {
-        // TODO: Set media finished flag so play button will play next queue item
-        return
-      }
-      var currentQueueIndex = this.playerQueueItems.findIndex((i) => {
-        if (episodeId) return i.libraryItemId === libraryItemId && i.episodeId === episodeId
-        return i.libraryItemId === libraryItemId
-      })
-      if (currentQueueIndex < 0) {
-        console.error('Media finished not found in queue - using first in queue', this.playerQueueItems)
-        currentQueueIndex = -1
-      }
-      if (currentQueueIndex === this.playerQueueItems.length - 1) {
-        console.log('Finished last item in queue')
-        return
-      }
-      const nextItemInQueue = this.playerQueueItems[currentQueueIndex + 1]
-      if (nextItemInQueue) {
-        this.playLibraryItem({
-          libraryItemId: nextItemInQueue.libraryItemId,
-          episodeId: nextItemInQueue.episodeId || null,
-          queueItems: this.playerQueueItems
-        })
-      }
-    },
-    setPlaying(isPlaying) {
-      this.isPlaying = isPlaying
-      this.$store.commit('setIsPlaying', isPlaying)
-      this.updateMediaSessionPlaybackState()
-    },
-    setSleepTimer(time) {
-      this.sleepTimerSet = true
-      this.showSleepTimerModal = false
-
-      this.sleepTimerType = time.timerType
-      if (this.sleepTimerType === this.$constants.SleepTimerTypes.COUNTDOWN) {
-        this.runSleepTimer(time)
-      }
-    },
-    runSleepTimer(time) {
-      this.sleepTimerRemaining = time.seconds
-
-      var lastTick = Date.now()
-      clearInterval(this.sleepTimer)
-      this.sleepTimer = setInterval(() => {
-        var elapsed = Date.now() - lastTick
-        lastTick = Date.now()
-        this.sleepTimerRemaining -= elapsed / 1000
-
-        if (this.sleepTimerRemaining <= 0) {
-          this.sleepTimerEnd()
-        }
-      }, 1000)
-    },
-    checkChapterEnd() {
-      if (!this.currentChapter) return
-
-      // Track chapter transitions by comparing current chapter with last chapter
-      if (this.lastChapterId !== this.currentChapter.id) {
-        // Chapter changed - if we had a previous chapter, this means we crossed a boundary
-        if (this.lastChapterId) {
-          this.sleepTimerEnd()
-        }
-        this.lastChapterId = this.currentChapter.id
-      }
-    },
-    sleepTimerEnd() {
-      this.clearSleepTimer()
-      this.playerHandler.pause()
-      this.$toast.info(this.$strings.ToastSleepTimerDone)
-    },
-    cancelSleepTimer() {
-      this.showSleepTimerModal = false
-      this.clearSleepTimer()
-    },
-    clearSleepTimer() {
-      clearInterval(this.sleepTimer)
-      this.sleepTimerRemaining = 0
-      this.sleepTimer = null
-      this.sleepTimerSet = false
-      this.sleepTimerType = null
-    },
-    incrementSleepTimer(amount) {
-      if (!this.sleepTimerSet) return
-      this.sleepTimerRemaining += amount
-    },
-    decrementSleepTimer(amount) {
-      if (this.sleepTimerRemaining < amount) {
-        this.sleepTimerRemaining = 3
-        return
-      }
-      this.sleepTimerRemaining = Math.max(0, this.sleepTimerRemaining - amount)
-    },
-    playPause() {
-      this.playerHandler.playPause()
-    },
-    jumpForward() {
-      this.playerHandler.jumpForward()
-    },
-    jumpBackward() {
-      this.playerHandler.jumpBackward()
-    },
-    setVolume(volume) {
-      this.playerHandler.setVolume(volume)
-    },
-    setPlaybackRate(playbackRate) {
-      this.currentPlaybackRate = playbackRate
-      this.playerHandler.setPlaybackRate(playbackRate)
-    },
-    seek(time) {
-      this.playerHandler.seek(time)
-    },
-    playbackTimeUpdate(time) {
-      // When updating progress from another session
-      this.playerHandler.seek(time, false)
-    },
-    setCurrentTime(time) {
-      this.currentTime = time
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.setCurrentTime(time)
-      }
-
-      if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER && this.sleepTimerSet) {
-        this.checkChapterEnd()
-      }
-    },
-    setDuration(duration) {
-      this.totalDuration = duration
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.setDuration(duration)
-      }
-    },
-    setBufferTime(buffertime) {
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.setBufferTime(buffertime)
-      }
-    },
-    showBookmarks() {
-      this.bookmarkCurrentTime = this.currentTime
-      this.showBookmarksModal = true
-    },
-    selectBookmark(bookmark) {
-      this.seek(bookmark.time)
-      this.showBookmarksModal = false
-    },
-    closePlayer() {
-      this.playerHandler.closePlayer()
-      this.$store.commit('setMediaPlaying', null)
-    },
-    mediaSessionPlay() {
-      console.log('Media session play')
-      this.playerHandler.play()
-    },
-    mediaSessionPause() {
-      console.log('Media session pause')
-      this.playerHandler.pause()
-    },
-    mediaSessionStop() {
-      console.log('Media session stop')
-      this.playerHandler.pause()
-    },
-    mediaSessionSeekBackward() {
-      console.log('Media session seek backward')
-      this.playerHandler.jumpBackward()
-    },
-    mediaSessionSeekForward() {
-      console.log('Media session seek forward')
-      this.playerHandler.jumpForward()
-    },
-    mediaSessionSeekTo(e) {
-      console.log('Media session seek to', e)
-      if (e.seekTime !== null && !isNaN(e.seekTime)) {
-        this.playerHandler.seek(e.seekTime)
-      }
-    },
-    mediaSessionPreviousTrack() {
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.prevChapter()
-      }
-    },
-    mediaSessionNextTrack() {
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.nextChapter()
-      }
-    },
-    updateMediaSessionPlaybackState() {
-      if ('mediaSession' in navigator) {
-        navigator.mediaSession.playbackState = this.isPlaying ? 'playing' : 'paused'
-      }
-    },
-    setMediaSession() {
-      if (!this.streamLibraryItem) {
-        console.error('setMediaSession: No library item set')
-        return
-      }
-
-      // https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API
-      if ('mediaSession' in navigator) {
-        const chapterInfo = []
-        if (this.chapters.length) {
-          this.chapters.forEach((chapter) => {
-            chapterInfo.push({
-              title: chapter.title,
-              startTime: chapter.start
-            })
-          })
-        }
-
-        navigator.mediaSession.metadata = new MediaMetadata({
-          title: this.title,
-          artist: this.playerHandler.displayAuthor || this.mediaMetadata.authorName || 'Unknown',
-          album: this.mediaMetadata.seriesName || '',
-          artwork: [
-            {
-              src: this.$store.getters['globals/getLibraryItemCoverSrc'](this.streamLibraryItem, '/Logo.png', true)
-            }
-          ],
-          chapterInfo
-        })
-        console.log('Set media session metadata', navigator.mediaSession.metadata)
-
-        navigator.mediaSession.setActionHandler('play', this.mediaSessionPlay)
-        navigator.mediaSession.setActionHandler('pause', this.mediaSessionPause)
-        navigator.mediaSession.setActionHandler('stop', this.mediaSessionStop)
-        navigator.mediaSession.setActionHandler('seekbackward', this.mediaSessionSeekBackward)
-        navigator.mediaSession.setActionHandler('seekforward', this.mediaSessionSeekForward)
-        navigator.mediaSession.setActionHandler('seekto', this.mediaSessionSeekTo)
-        navigator.mediaSession.setActionHandler('previoustrack', this.mediaSessionSeekBackward)
-        navigator.mediaSession.setActionHandler('nexttrack', this.mediaSessionSeekForward)
-      } else {
-        console.warn('Media session not available')
-      }
-    },
-    streamProgress(data) {
-      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === data.stream) {
-        if (!data.numSegments) return
-        var chunks = data.chunks
-        console.log(`[MediaPlayerContainer] Stream Progress ${data.percent}`)
-        if (this.$refs.audioPlayer) {
-          this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
-        } else {
-          console.error('No Audio Ref')
-        }
-      }
-    },
-    sessionOpen(session) {
-      // For opening session on init (temporarily unused)
-      this.$store.commit('setMediaPlaying', {
-        libraryItem: session.libraryItem,
-        episodeId: session.episodeId
-      })
-      this.playerHandler.prepareOpenSession(session, this.currentPlaybackRate)
-    },
-    streamOpen(session) {
-      console.log(`[MediaPlayerContainer] Stream session open`, session)
-    },
-    streamClosed(streamId) {
-      // Stream was closed from the server
-      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
-        console.warn('[MediaPlayerContainer] Closing stream due to request from server')
-        this.playerHandler.closePlayer()
-      }
-    },
-    streamReady() {
-      console.log(`[MediaPlayerContainer] Stream Ready`)
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.setStreamReady()
-      } else {
-        console.error('No Audio Ref')
-      }
-    },
-    streamError(streamId) {
-      // Stream had critical error from the server
-      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
-        console.warn('[MediaPlayerContainer] Closing stream due to stream error from server')
-        this.playerHandler.closePlayer()
-      }
-    },
-    streamReset({ startTime, streamId }) {
-      this.playerHandler.resetStream(startTime, streamId)
-    },
-    castSessionActive(isActive) {
-      if (isActive && this.playerHandler.isPlayingLocalItem) {
-        // Cast session started switch to cast player
-        this.playerHandler.switchPlayer()
-      } else if (!isActive && this.playerHandler.isPlayingCastedItem) {
-        // Cast session ended switch to local player
-        this.playerHandler.switchPlayer()
-      }
-    },
-    playNextItemInQueue() {
-      if (this.hasNextItemInQueue) {
-        this.playQueueItem({ index: this.currentPlayerQueueIndex + 1 })
-      }
-    },
-    /**
-     * @param {{ index: number }} payload
-     */
-    playQueueItem(payload) {
-      if (payload?.index === undefined) {
-        console.error('playQueueItem: No index provided')
-        return
-      }
-      if (!this.playerQueueItems[payload.index]) {
-        console.error('playQueueItem: No item found at index', payload.index)
-        return
-      }
-      const item = this.playerQueueItems[payload.index]
-      this.playLibraryItem({
-        libraryItemId: item.libraryItemId,
-        episodeId: item.episodeId || null,
-        queueItems: this.playerQueueItems
-      })
-    },
-    async playLibraryItem(payload) {
-      const libraryItemId = payload.libraryItemId
-      const episodeId = payload.episodeId || null
-
-      if (this.playerHandler.libraryItemId == libraryItemId && this.playerHandler.episodeId == episodeId) {
-        if (payload.startTime !== null && !isNaN(payload.startTime)) {
-          this.seek(payload.startTime)
-        } else {
-          this.playerHandler.play()
-        }
-        return
-      }
-
-      const libraryItem = await this.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
-        console.error('Failed to fetch full item', error)
-        return null
-      })
-      if (!libraryItem) return
-
-      this.$store.commit('setMediaPlaying', {
-        libraryItem,
-        episodeId,
-        queueItems: payload.queueItems || []
-      })
-      // Set cover aspect ratio for this item's library since the library may change
-      this.coverAspectRatio = this.$store.getters['libraries/getBookCoverAspectRatio']
-
-      this.$nextTick(() => {
-        if (this.$refs.audioPlayer) this.$refs.audioPlayer.checkUpdateChapterTrack()
-      })
-
-      this.playerHandler.load(libraryItem, episodeId, true, this.currentPlaybackRate, payload.startTime)
-    },
-    pauseItem() {
-      this.playerHandler.pause()
-    },
-    showFailedProgressSyncs() {
-      if (!isNaN(this.syncFailedToast)) this.$toast.dismiss(this.syncFailedToast)
-      this.syncFailedToast = this.$toast(this.$strings.ToastProgressIsNotBeingSynced, { timeout: false, type: 'error' })
-    },
-    sessionClosedEvent(sessionId) {
-      if (this.playerHandler.currentSessionId === sessionId) {
-        console.log('sessionClosedEvent closing current session', sessionId)
-        this.playerHandler.resetPlayer() // Closes player without reporting to server
-        this.$store.commit('setMediaPlaying', null)
-      }
-    }
-  },
-  mounted() {
-    this.$eventBus.$on('cast-session-active', this.castSessionActive)
-    this.$eventBus.$on('playback-seek', this.seek)
-    this.$eventBus.$on('playback-time-update', this.playbackTimeUpdate)
-    this.$eventBus.$on('play-queue-item', this.playQueueItem)
-    this.$eventBus.$on('play-item', this.playLibraryItem)
-    this.$eventBus.$on('pause-item', this.pauseItem)
-  },
-  beforeDestroy() {
-    this.$eventBus.$off('cast-session-active', this.castSessionActive)
-    this.$eventBus.$off('playback-seek', this.seek)
-    this.$eventBus.$off('playback-time-update', this.playbackTimeUpdate)
-    this.$eventBus.$off('play-queue-item', this.playQueueItem)
-    this.$eventBus.$off('play-item', this.playLibraryItem)
-    this.$eventBus.$off('pause-item', this.pauseItem)
-  }
-}
-</script>
-
-<style>
-#mediaPlayerContainer {
-  box-shadow: 0px -6px 8px #1111113f;
-}
-</style>
--- a/client/components/app/SettingsContent.vue
+++ b/client/components/app/SettingsContent.vue
@ -1,42 +0,0 @@
-<template>
-  <div class="bg-bg rounded-md shadow-lg border border-white/5 p-2 sm:p-4 mb-8">
-    <div class="flex items-center mb-2">
-      <slot name="header-prefix"></slot>
-      <h1 class="text-xl">{{ headerText }}</h1>
-
-      <slot name="header-items"></slot>
-    </div>
-
-    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
-
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    headerText: String,
-    description: String,
-    note: String
-  },
-  methods: {}
-}
-</script>
-
-<style>
-#settings-description a {
-  color: rgb(96 165 250);
-}
-#settings-description a:hover {
-  color: rgb(147 197 253);
-  text-decoration-line: underline;
-}
-#settings-description code {
-  font-size: 0.875rem;
-  border-radius: 6px;
-  background-color: rgb(82, 82, 82);
-  color: white;
-  padding: 2px 4px;
-}
-</style>
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@ -1,139 +1,86 @@
 <template>
-  <div role="toolbar" aria-orientation="vertical" aria-label="Library Sidebar" class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-50" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
-    <!-- ugly little workaround to cover up the shadow overlapping the bookshelf toolbar -->
-    <div v-if="isShowingBookshelfToolbar" class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
+  <div class="w-20 bg-bg h-full relative box-shadow-side z-40" style="min-width: 80px">
+    <div class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
+    <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>

-    <div id="siderail-buttons-container" role="navigation" aria-label="Library Navigation" :class="{ 'player-open': streamLibraryItem }" class="w-full overflow-y-auto overflow-x-hidden">
-      <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">home</span>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Home</p>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
+      <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-        <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+      </svg>

-      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">&#xe241;</span>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Library</p>

-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
+      <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-        <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+    <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+      </svg>

-      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">import_contacts</span>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Series</p>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
+      <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-        <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+    <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons-outlined">collections_bookmark</span>

-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">view_column</span>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Collections</p>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
+      <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-        <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+    <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg class="w-6 h-6" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+        />
+      </svg>

-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">&#xe431;</span>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Authors</p>

-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
+      <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-        <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <icons-podcast-svg class="w-6 h-6" />

-      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2.5xl">&#xe03d;</span>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Search</p>

-        <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
+      <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>

-        <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
+    <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
+      <span class="material-icons text-2xl">warning</span>

-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">groups</span>
+      <p class="font-book pt-1.5" style="font-size: 1rem">Issues</p>

-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
-
-        <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
-      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">&#xe91f;</span>
-
-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
-
-        <div v-show="isNarratorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
-      <nuxt-link v-if="isBookLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/stats`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isStatsPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">&#xf190;</span>
-
-        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonStats }}</p>
-
-        <div v-show="isStatsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
-      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="abs-icons icon-podcast text-xl"></span>
-
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAdd }}</p>
-
-        <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
-      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary/80' : 'bg-bg/60'">
-        <span class="material-symbols text-2xl">&#xf090;</span>
-
-        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
-
-        <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-      </nuxt-link>
-
-      <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white/80 border-b border-primary/70 hover:bg-error/40 cursor-pointer relative" :class="showingIssues ? 'bg-error/40' : 'bg-error/20'">
-        <span class="material-symbols text-2xl">warning</span>
-
-        <p class="pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
-
-        <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-        <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white/30 flex items-center justify-center">
-          <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
-        </div>
-      </nuxt-link>
-    </div>
-
-    <div class="w-full h-12 px-1 py-2 border-t border-black/20 bg-bg absolute left-0" :style="{ bottom: streamLibraryItem ? '224px' : '65px' }">
-      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1 cursor-pointer" @click="clickChangelog">v{{ $config.version }}</p>
-      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
-      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
-    </div>
-
-    <modals-changelog-view-modal v-model="showChangelogModal" :versionData="versionData" />
+      <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
+        <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
+      </div>
+    </nuxt-link>
  </div>
 </template>

 <script>
 export default {
  data() {
-    return {
-      showChangelogModal: false
-    }
+    return {}
  },
  computed: {
-    Source() {
-      return this.$store.state.Source
-    },
-    isMobileLandscape() {
-      return this.$store.state.globals.isMobileLandscape
-    },
-    isShowingBookshelfToolbar() {
-      if (!this.$route.name) return false
-      return this.$route.name.startsWith('library')
-    },
-    offsetTop() {
-      return 64
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
    },
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
@ -147,21 +94,12 @@ export default {
    currentLibraryMediaType() {
      return this.$store.getters['libraries/getCurrentLibraryMediaType']
    },
-    isBookLibrary() {
-      return this.currentLibraryMediaType === 'book'
-    },
    isPodcastLibrary() {
      return this.currentLibraryMediaType === 'podcast'
    },
-    isPodcastDownloadQueuePage() {
-      return this.$route.name === 'library-library-podcast-download-queue'
-    },
    isPodcastSearchPage() {
      return this.$route.name === 'library-library-podcast-search'
    },
-    isPodcastLatestPage() {
-      return this.$route.name === 'library-library-podcast-latest'
-    },
    homePage() {
      return this.$route.name === 'library-library'
    },
@ -169,16 +107,7 @@ export default {
      return this.$route.name === 'library-library-series-id' || this.paramId === 'series'
    },
    isAuthorsPage() {
-      return this.libraryBookshelfPage && this.paramId === 'authors'
-    },
-    isNarratorsPage() {
-      return this.$route.name === 'library-library-narrators'
-    },
-    isPlaylistsPage() {
-      return this.paramId === 'playlists'
-    },
-    isStatsPage() {
-      return this.$route.name === 'library-library-stats'
+      return this.$route.name === 'library-library-authors'
    },
    libraryBookshelfPage() {
      return this.$route.name === 'library-library-bookshelf-id'
@ -195,37 +124,9 @@ export default {
    },
    numIssues() {
      return this.$store.state.libraries.issues || 0
-    },
-    versionData() {
-      return this.$store.state.versionData || {}
-    },
-    hasUpdate() {
-      return !!this.versionData.hasUpdate
-    },
-    githubTagUrl() {
-      return this.versionData.githubTagUrl
-    },
-    streamLibraryItem() {
-      return this.$store.state.streamLibraryItem
-    },
-    showPlaylists() {
-      return this.$store.state.libraries.numUserPlaylists > 0
-    }
-  },
-  methods: {
-    clickChangelog() {
-      this.showChangelogModal = true
    }
  },
+  methods: {},
  mounted() {}
 }
-</script>
-
-<style>
-#siderail-buttons-container {
-  max-height: calc(100vh - 64px - 48px);
-}
-#siderail-buttons-container.player-open {
-  max-height: calc(100vh - 64px - 48px - 160px);
-}
-</style>
+</script>
--- a/client/components/app/StreamContainer.vue
+++ b/client/components/app/StreamContainer.vue
@ -0,0 +1,339 @@
+<template>
+  <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 sm:h-44 md:h-40 z-40 bg-primary px-4 pb-1 md:pb-4 pt-2">
+    <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="absolute left-4 cursor-pointer" :style="{ top: bookCoverPosTop + 'px' }">
+      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </nuxt-link>
+    <div class="flex items-start pl-24 mb-6 md:mb-0">
+      <div>
+        <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-base sm:text-lg">
+          {{ title }}
+        </nuxt-link>
+        <div class="text-gray-400 flex items-center">
+          <span class="material-icons text-sm">person</span>
+          <p v-if="podcastAuthor">{{ podcastAuthor }}</p>
+          <p v-else-if="authors.length" class="pl-1.5 text-sm sm:text-base">
+            <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/library/${libraryId}/bookshelf?filter=authors.${$encode(author.id)}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
+          </p>
+          <p v-else class="text-sm sm:text-base cursor-pointer pl-2">Unknown</p>
+        </div>
+
+        <div class="text-gray-400 flex items-center">
+          <span class="material-icons text-xs">schedule</span>
+          <p class="font-mono text-sm pl-2 pb-px">{{ totalDurationPretty }}</p>
+        </div>
+      </div>
+      <div class="flex-grow" />
+      <span class="material-icons px-2 py-1 md:p-4 cursor-pointer" @click="closePlayer">close</span>
+    </div>
+    <audio-player
+      ref="audioPlayer"
+      :chapters="chapters"
+      :paused="!isPlaying"
+      :loading="playerLoading"
+      :bookmarks="bookmarks"
+      :sleep-timer-set="sleepTimerSet"
+      :sleep-timer-remaining="sleepTimerRemaining"
+      :is-podcast="isPodcast"
+      @playPause="playPause"
+      @jumpForward="jumpForward"
+      @jumpBackward="jumpBackward"
+      @setVolume="setVolume"
+      @setPlaybackRate="setPlaybackRate"
+      @seek="seek"
+      @close="closePlayer"
+      @showBookmarks="showBookmarks"
+      @showSleepTimer="showSleepTimerModal = true"
+    />
+
+    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />
+
+    <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-time="sleepTimerTime" :remaining="sleepTimerRemaining" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
+  </div>
+</template>
+
+<script>
+import PlayerHandler from '@/players/PlayerHandler'
+
+export default {
+  data() {
+    return {
+      playerHandler: new PlayerHandler(this),
+      totalDuration: 0,
+      showBookmarksModal: false,
+      bookmarkCurrentTime: 0,
+      playerLoading: false,
+      isPlaying: false,
+      currentTime: 0,
+      showSleepTimerModal: false,
+      sleepTimerSet: false,
+      sleepTimerTime: 0,
+      sleepTimerRemaining: 0,
+      sleepTimer: null,
+      displayTitle: null,
+      initialPlaybackRate: 1
+    }
+  },
+  computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
+    coverAspectRatio() {
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    },
+    bookCoverAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+    },
+    bookCoverWidth() {
+      return 88
+    },
+    bookCoverPosTop() {
+      if (this.bookCoverAspectRatio === 1) return -10
+      return -64
+    },
+    cover() {
+      if (this.media.coverPath) return this.media.coverPath
+      return 'Logo.png'
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    userMediaProgress() {
+      if (!this.libraryItemId) return
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
+    },
+    userItemCurrentTime() {
+      return this.userMediaProgress ? this.userMediaProgress.currentTime || 0 : 0
+    },
+    bookmarks() {
+      if (!this.libraryItemId) return []
+      return this.$store.getters['user/getUserBookmarksForItem'](this.libraryItemId)
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    libraryItemId() {
+      return this.streamLibraryItem ? this.streamLibraryItem.id : null
+    },
+    media() {
+      return this.streamLibraryItem ? this.streamLibraryItem.media || {} : {}
+    },
+    isPodcast() {
+      return this.streamLibraryItem ? this.streamLibraryItem.mediaType === 'podcast' : false
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    chapters() {
+      return this.media.chapters || []
+    },
+    title() {
+      if (this.playerHandler.displayTitle) return this.playerHandler.displayTitle
+      return this.mediaMetadata.title || 'No Title'
+    },
+    authors() {
+      return this.mediaMetadata.authors || []
+    },
+    libraryId() {
+      return this.streamLibraryItem ? this.streamLibraryItem.libraryId : null
+    },
+    totalDurationPretty() {
+      return this.$secondsToTimestamp(this.totalDuration)
+    },
+    podcastAuthor() {
+      if (!this.isPodcast) return null
+      return this.mediaMetadata.author || 'Unknown'
+    }
+  },
+  methods: {
+    setPlaying(isPlaying) {
+      this.isPlaying = isPlaying
+      this.$store.commit('setIsPlaying', isPlaying)
+    },
+    setSleepTimer(seconds) {
+      this.sleepTimerSet = true
+      this.sleepTimerTime = seconds
+      this.sleepTimerRemaining = seconds
+      this.runSleepTimer()
+      this.showSleepTimerModal = false
+    },
+    runSleepTimer() {
+      var lastTick = Date.now()
+      clearInterval(this.sleepTimer)
+      this.sleepTimer = setInterval(() => {
+        var elapsed = Date.now() - lastTick
+        lastTick = Date.now()
+        this.sleepTimerRemaining -= elapsed / 1000
+
+        if (this.sleepTimerRemaining <= 0) {
+          this.clearSleepTimer()
+          this.playerHandler.pause()
+          this.$toast.info('Sleep Timer Done.. zZzzZz')
+        }
+      }, 1000)
+    },
+    cancelSleepTimer() {
+      this.showSleepTimerModal = false
+      this.clearSleepTimer()
+    },
+    clearSleepTimer() {
+      clearInterval(this.sleepTimer)
+      this.sleepTimerRemaining = 0
+      this.sleepTimer = null
+      this.sleepTimerSet = false
+    },
+    incrementSleepTimer(amount) {
+      if (!this.sleepTimerSet) return
+      this.sleepTimerRemaining += amount
+    },
+    decrementSleepTimer(amount) {
+      if (this.sleepTimerRemaining < amount) {
+        this.sleepTimerRemaining = 3
+        return
+      }
+      this.sleepTimerRemaining = Math.max(0, this.sleepTimerRemaining - amount)
+    },
+    playPause() {
+      this.playerHandler.playPause()
+    },
+    jumpForward() {
+      this.playerHandler.jumpForward()
+    },
+    jumpBackward() {
+      this.playerHandler.jumpBackward()
+    },
+    setVolume(volume) {
+      this.playerHandler.setVolume(volume)
+    },
+    setPlaybackRate(playbackRate) {
+      this.initialPlaybackRate = playbackRate
+      this.playerHandler.setPlaybackRate(playbackRate)
+    },
+    seek(time) {
+      this.playerHandler.seek(time)
+    },
+    setCurrentTime(time) {
+      this.currentTime = time
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setCurrentTime(time)
+      }
+    },
+    setDuration(duration) {
+      this.totalDuration = duration
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setDuration(duration)
+      }
+    },
+    setBufferTime(buffertime) {
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setBufferTime(buffertime)
+      }
+    },
+    showBookmarks() {
+      this.bookmarkCurrentTime = this.currentTime
+      this.showBookmarksModal = true
+    },
+    selectBookmark(bookmark) {
+      this.seek(bookmark.time)
+      this.showBookmarksModal = false
+    },
+    closePlayer() {
+      this.playerHandler.closePlayer()
+      this.$store.commit('setMediaPlaying', null)
+    },
+    streamProgress(data) {
+      if (!data.numSegments) return
+      var chunks = data.chunks
+      console.log(`[StreamContainer] Stream Progress ${data.percent}`)
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
+      } else {
+        console.error('No Audio Ref')
+      }
+    },
+    sessionOpen(session) {
+      this.$store.commit('setMediaPlaying', {
+        libraryItem: session.libraryItem,
+        episodeId: session.episodeId
+      })
+      this.playerHandler.prepareOpenSession(session, this.initialPlaybackRate)
+    },
+    streamOpen(session) {
+      console.log(`[StreamContainer] Stream session open`, session)
+    },
+    streamClosed(streamId) {
+      // Stream was closed from the server
+      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
+        console.warn('[StreamContainer] Closing stream due to request from server')
+        this.playerHandler.closePlayer()
+      }
+    },
+    streamReady() {
+      console.log(`[STREAM-CONTAINER] Stream Ready`)
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setStreamReady()
+      } else {
+        console.error('No Audio Ref')
+      }
+    },
+    streamError(streamId) {
+      // Stream had critical error from the server
+      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
+        console.warn('[StreamContainer] Closing stream due to stream error from server')
+        this.playerHandler.closePlayer()
+      }
+    },
+    streamReset({ startTime, streamId }) {
+      this.playerHandler.resetStream(startTime, streamId)
+    },
+    castSessionActive(isActive) {
+      if (isActive && this.playerHandler.isPlayingLocalItem) {
+        // Cast session started switch to cast player
+        this.playerHandler.switchPlayer()
+      } else if (!isActive && this.playerHandler.isPlayingCastedItem) {
+        // Cast session ended switch to local player
+        this.playerHandler.switchPlayer()
+      }
+    },
+    async playLibraryItem(payload) {
+      var libraryItemId = payload.libraryItemId
+      var episodeId = payload.episodeId || null
+
+      if (this.playerHandler.libraryItemId == libraryItemId && this.playerHandler.episodeId == episodeId) {
+        this.playerHandler.play()
+        return
+      }
+
+      var libraryItem = await this.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
+        console.error('Failed to fetch full item', error)
+        return null
+      })
+      if (!libraryItem) return
+      this.$store.commit('setMediaPlaying', {
+        libraryItem,
+        episodeId
+      })
+
+      this.playerHandler.load(libraryItem, episodeId, true, this.initialPlaybackRate)
+    },
+    pauseItem() {
+      this.playerHandler.pause()
+    }
+  },
+  mounted() {
+    this.$eventBus.$on('cast-session-active', this.castSessionActive)
+    this.$eventBus.$on('play-item', this.playLibraryItem)
+    this.$eventBus.$on('pause-item', this.pauseItem)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('cast-session-active', this.castSessionActive)
+    this.$eventBus.$off('play-item', this.playLibraryItem)
+    this.$eventBus.$off('pause-item', this.pauseItem)
+  }
+}
+</script>
+
+<style>
+#streamContainer {
+  box-shadow: 0px -6px 8px #1111113f;
+}
+</style>
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@ -1,178 +1,99 @@
 <template>
-  <div class="pb-3e" :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
-    <nuxt-link :to="`/author/${author?.id}`">
-      <div cy-id="card" @mouseover="mouseover" @mouseleave="mouseleave">
-        <div cy-id="imageArea" :style="{ height: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
-          <!-- Image or placeholder -->
-          <covers-author-image :author="author" />
+  <div @mouseover="mouseover" @mouseout="mouseout">
+    <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+      <!-- Image or placeholder -->
+      <covers-author-image :author="author" />

-          <!-- Author name & num books overlay -->
-          <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1e bg-black/60 px-2e">
-            <p class="text-center font-semibold truncate" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
-            <p class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
-          </div>
-
-          <!-- Search icon btn -->
-          <div cy-id="match" v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
-            <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
-              <span class="material-symbols" :style="{ fontSize: 1.125 + 'em' }">search</span>
-            </ui-tooltip>
-          </div>
-          <div cy-id="edit" v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2e cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
-            <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
-              <span class="material-symbols" :style="{ fontSize: 1.125 + 'em' }">edit</span>
-            </ui-tooltip>
-          </div>
-
-          <!-- Loading spinner -->
-          <div cy-id="spinner" v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black/50 flex items-center justify-center">
-            <widgets-loading-spinner size="" />
-          </div>
-        </div>
-        <div cy-id="nameBelow" v-show="nameBelow" class="w-full py-1e px-2e">
-          <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
-        </div>
+      <!-- Author name & num books overlay -->
+      <div v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
+        <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+        <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
      </div>
-    </nuxt-link>
+
+      <!-- Search icon btn -->
+      <div v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform transition-transform hover:scale-125" @click.prevent.stop="searchAuthor">
+        <span class="material-icons text-lg">search</span>
+      </div>
+      <div v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform transition-transform hover:scale-125" @click.prevent.stop="$emit('edit', author)">
+        <span class="material-icons text-lg">edit</span>
+      </div>
+
+      <!-- Loading spinner -->
+      <div v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+        <widgets-loading-spinner size="" />
+      </div>
+    </div>
+    <div v-show="nameBelow" class="w-full py-1 px-2">
+      <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+    </div>
  </div>
 </template>

 <script>
 export default {
  props: {
-    authorMount: {
+    author: {
      type: Object,
      default: () => {}
    },
    width: Number,
-    height: {
+    height: Number,
+    sizeMultiplier: {
      type: Number,
-      default: 192
+      default: 1
    },
-    nameBelow: {
-      type: Boolean,
-      default: false
-    }
+    nameBelow: Boolean
  },
  data() {
    return {
      searching: false,
-      isHovering: false,
-      author: null
+      isHovering: false
    }
  },
  computed: {
-    cardWidth() {
-      return this.width || this.cardHeight * 0.8
-    },
-    cardHeight() {
-      return this.height * this.sizeMultiplier
-    },
-    coverHeight() {
-      return this.cardHeight
+    userToken() {
+      return this.$store.getters['user/getToken']
    },
    _author() {
      return this.author || {}
    },
    authorId() {
-      return this._author?.id || ''
+      return this._author.id
    },
    name() {
-      return this._author?.name || ''
-    },
-    asin() {
-      return this._author?.asin || ''
+      return this._author.name || ''
    },
    numBooks() {
-      return this._author?.numBooks || 0
-    },
-    store() {
-      return this.$store || this.$nuxt.$store
+      return this._author.numBooks || 0
    },
    userCanUpdate() {
-      return this.store.getters['user/getUserCanUpdate']
-    },
-    currentLibraryId() {
-      return this.store.state.libraries.currentLibraryId
-    },
-    libraryProvider() {
-      return this.store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
-    },
-    sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
+      return this.$store.getters['user/getUserCanUpdate']
    }
  },
  methods: {
    mouseover() {
      this.isHovering = true
    },
-    mouseleave() {
+    mouseout() {
      this.isHovering = false
    },
    async searchAuthor() {
      this.searching = true
-      const payload = {}
-      if (this.asin) payload.asin = this.asin
-      else payload.q = this.name
-
-      payload.region = 'us'
-      if (this.libraryProvider.startsWith('audible.')) {
-        payload.region = this.libraryProvider.split('.').pop() || 'us'
-      }
-
-      var response = await this.$axios.$post(`/api/authors/${this.authorId}/match`, payload).catch((error) => {
+      var response = await this.$axios.$post(`/api/authors/${this.authorId}/match`, { q: this.name }).catch((error) => {
        console.error('Failed', error)
        return null
      })
      if (!response) {
-        this.$toast.error(this.$getString('ToastAuthorNotFound', [this.name]))
+        this.$toast.error('Author not found')
      } else if (response.updated) {
-        if (response.author.imagePath) {
-          this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
-        } else {
-          this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
-        }
+        if (response.author.imagePath) this.$toast.success('Author was updated')
+        else this.$toast.success('Author was updated (no image found)')
      } else {
-        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+        this.$toast.info('No updates were made for Author')
      }
      this.searching = false
-    },
-    setSearching(isSearching) {
-      this.searching = isSearching
-    },
-    setEntity(author) {
-      this.removeListeners()
-      this.author = author
-      this.addListeners()
-    },
-    addListeners() {
-      if (this.author) {
-        this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
-      }
-    },
-    removeListeners() {
-      if (this.author) {
-        this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
-      }
-    },
-    destroy() {
-      // destroy the vue listeners, etc
-      this.$destroy()
-
-      // remove the element from the DOM
-      if (this.$el && this.$el.parentNode) {
-        this.$el.parentNode.removeChild(this.$el)
-      } else if (this.$el && this.$el.remove) {
-        this.$el.remove()
-      }
-    },
-    setSelectionMode(val) {}
+    }
  },
-  mounted() {
-    if (this.authorMount) this.setEntity(this.authorMount)
-  },
-  beforeDestroy() {
-    this.removeListeners()
-  }
+  mounted() {}
 }
-</script>
+</script>
--- a/client/components/cards/AuthorSearchCard.vue
+++ b/client/components/cards/AuthorSearchCard.vue
@ -1,11 +1,10 @@
 <template>
  <div class="flex h-full px-1 overflow-hidden">
-    <div class="overflow-hidden bg-primary rounded-sm" style="height: 50px; width: 40px">
+    <div class="overflow-hidden bg-primary rounded" style="height: 50px; width: 40px">
      <covers-author-image :author="author" />
    </div>
-    <div class="grow px-2 authorSearchCardContent h-full">
+    <div class="flex-grow px-2 authorSearchCardContent h-full">
      <p class="truncate text-sm">{{ name }}</p>
-      <p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
    </div>
  </div>
 </template>
@ -24,9 +23,6 @@ export default {
  computed: {
    name() {
      return this.author.name
-    },
-    numBooks() {
-      return this.author.numBooks
    }
  },
  methods: {},
@ -37,9 +33,9 @@ export default {
 <style>
 .authorSearchCardContent {
  width: calc(100% - 80px);
-  height: 44px;
+  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
-</style>
+</style>
--- a/client/components/cards/Book3d.vue
+++ b/client/components/cards/Book3d.vue
@ -0,0 +1,254 @@
+<template>
+  <div ref="wrapper" class="relative pointer-events-none" :style="{ width: standardWidth * 0.8 * 1.1 * scale + 'px', height: standardHeight * 1.1 * scale + 'px', marginBottom: 20 + 'px', marginTop: 15 + 'px' }">
+    <div ref="card" class="wrap absolute origin-center transform duration-200" :style="{ transform: `scale(${scale * scaleMultiplier}) translateY(${hover2 ? '-40%' : '-50%'})` }">
+      <div class="perspective">
+        <div class="book-wrap transform duration-100 pointer-events-auto" :class="hover2 ? 'z-80' : 'rotate'" @mouseover="hover = true" @mouseout="hover = false">
+          <div class="book book-1 box-shadow-book3d" ref="front"></div>
+          <div class="title book-1 pointer-events-none" ref="left"></div>
+          <div class="bottom book-1 pointer-events-none" ref="bottom"></div>
+          <div class="book-back book-1 pointer-events-none">
+            <div class="text pointer-events-none">
+              <h3 class="mb-4">Book Back</h3>
+              <p>
+                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt earum doloremque aliquam culpa dolor nostrum consequatur quas dicta? Molestias repellendus minima pariatur libero vel, reiciendis optio magnam rerum, labore corporis.</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    src: String,
+    width: {
+      type: Number,
+      default: 200
+    }
+  },
+  data() {
+    return {
+      hover: false,
+      hover2: false,
+      standardWidth: 200,
+      standardHeight: 320,
+      isAttached: true,
+      pageX: 0,
+      pageY: 0
+    }
+  },
+  watch: {
+    src(newVal) {
+      this.setCover()
+    },
+    width(newVal) {
+      this.init()
+    },
+    hover(newVal) {
+      if (newVal) {
+        this.unattach()
+      } else {
+        this.attach()
+      }
+      setTimeout(() => {
+        this.hover2 = newVal
+      }, 100)
+    }
+  },
+  computed: {
+    scaleMultiplier() {
+      return this.hover2 ? 1.25 : 1
+    },
+    scale() {
+      var scale = this.width / this.standardWidth
+      return scale
+    }
+  },
+  methods: {
+    unattach() {
+      if (this.$refs.card && this.isAttached) {
+        var bookshelf = document.getElementById('bookshelf')
+        if (bookshelf) {
+          var pos = this.$refs.wrapper.getBoundingClientRect()
+
+          this.pageX = pos.x
+          this.pageY = pos.y
+          document.body.appendChild(this.$refs.card)
+          this.$refs.card.style.left = this.pageX + 'px'
+          this.$refs.card.style.top = this.pageY + 'px'
+          this.$refs.card.style.zIndex = 50
+          this.isAttached = false
+        } else if (bookshelf) {
+          console.log(this.pageX, this.pageY)
+          this.isAttached = false
+        }
+      }
+    },
+    attach() {
+      if (this.$refs.card && !this.isAttached) {
+        if (this.$refs.wrapper) {
+          this.isAttached = true
+
+          this.$refs.wrapper.appendChild(this.$refs.card)
+          this.$refs.card.style.left = '0px'
+          this.$refs.card.style.top = '0px'
+        }
+      } else {
+        console.log('Is attached already', this.isAttached)
+      }
+    },
+    init() {
+      var standardWidth = this.standardWidth
+      document.documentElement.style.setProperty('--book-w', standardWidth + 'px')
+      document.documentElement.style.setProperty('--book-wx', standardWidth + 1 + 'px')
+      document.documentElement.style.setProperty('--book-h', standardWidth * 1.6 + 'px')
+      document.documentElement.style.setProperty('--book-d', 40 + 'px')
+    },
+    setElBg(el) {
+      el.style.backgroundImage = `url("${this.src}")`
+      el.style.backgroundSize = 'cover'
+      el.style.backgroundPosition = 'center center'
+      el.style.backgroundRepeat = 'no-repeat'
+    },
+    setCover() {
+      if (this.$refs.front) {
+        this.setElBg(this.$refs.front)
+      }
+      if (this.$refs.bottom) {
+        this.setElBg(this.$refs.bottom)
+        this.$refs.bottom.style.backgroundSize = '2000%'
+        this.$refs.bottom.style.filter = 'blur(1px)'
+      }
+      if (this.$refs.left) {
+        this.setElBg(this.$refs.left)
+        this.$refs.left.style.backgroundSize = '2000%'
+        this.$refs.left.style.filter = 'blur(1px)'
+      }
+    }
+  },
+  mounted() {
+    this.setCover()
+    this.init()
+  }
+}
+</script>
+
+<style>
+/* :root {
+  --book-w: 200px;
+  --book-h: 320px;
+  --book-d: 30px;
+  --book-wx: 201px;
+} */
+/* 
+.wrap {
+  width: calc(1.1 * var(--book-w));
+  height: calc(1.1 * var(--book-h));
+  margin: 0 auto;
+}
+.perspective {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  perspective: 600px;
+  transform-style: preserve-3d;
+  overflow: hidden;
+}
+
+.book-wrap {
+  height: 100%;
+  width: 100%;
+  transform-style: preserve-3d;
+  transition: 'all ease-out 0.6s';
+}
+
+.book {
+  width: var(--book-w);
+  height: var(--book-h);
+  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
+  background-size: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  cursor: pointer;
+}
+.title {
+  content: '';
+  height: var(--book-h);
+  width: var(--book-d);
+  position: absolute;
+  right: 0;
+  left: calc(var(--book-wx) * -1);
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background: #444;
+  transform: rotateY(-80deg) translateX(-14px);
+
+  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
+  background-size: 5000%;
+  filter: blur(1px);
+}
+
+.bottom {
+  content: '';
+  height: var(--book-d);
+  width: var(--book-w);
+  position: absolute;
+  right: 0;
+  bottom: var(--book-h);
+  top: 0;
+  left: 0;
+  margin: auto;
+  background: #444;
+  transform: rotateY(0deg) rotateX(90deg) translateY(-15px) translateX(-2.5px) skewX(10deg);
+
+  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
+  background-size: 5000%;
+  filter: blur(1px);
+}
+
+.book-back {
+  width: var(--book-w);
+  height: var(--book-h);
+  background-color: #444;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  cursor: pointer;
+  transform: rotate(180deg) translateZ(-30px) translateX(5px);
+}
+.book-back .text {
+  transform: rotateX(180deg);
+  position: absolute;
+  bottom: 0px;
+  padding: 20px;
+  text-align: left;
+  font-size: 12px;
+}
+.book-back .text h3 {
+  color: #fff;
+}
+.book-back .text span {
+  display: block;
+  margin-bottom: 20px;
+  color: #fff;
+}
+
+.book-wrap.rotate {
+  transform: rotateY(30deg) rotateX(0deg);
+}
+.book-wrap.flip {
+  transform: rotateY(180deg);
+} */
+</style>
--- a/client/components/cards/BookMatchCard.vue
+++ b/client/components/cards/BookMatchCard.vue
@ -1,46 +1,24 @@
 <template>
-  <div v-if="book" class="w-full border-b border-gray-700 pb-2">
-    <div class="flex py-1 hover:bg-gray-300/10 cursor-pointer" @click="selectMatch">
-      <div class="min-w-12 max-w-12 md:min-w-20 md:max-w-20">
-        <div class="w-full bg-primary">
-          <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
-          <div v-else class="w-12 h-12 md:w-20 md:h-20 bg-primary" />
-        </div>
+  <div class="w-full border-b border-gray-700 pb-2">
+    <div class="flex py-1 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch">
+      <div class="h-24 bg-primary" :style="{ minWidth: 96 / bookCoverAspectRatio + 'px' }">
+        <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
      </div>
-      <div v-if="!isPodcast" class="px-2 md:px-4 grow">
+      <div v-if="!isPodcast" class="px-4 flex-grow">
        <div class="flex items-center">
-          <h1 class="text-sm md:text-base">{{ book.title }}</h1>
-          <div class="grow" />
-          <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
-        </div>
-
-        <div class="flex items-center">
-          <div>
-            <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">{{ $getString('LabelByAuthor', [book.author]) }}</p>
-            <p v-if="book.narrator" class="text-gray-400 text-xs">{{ $strings.LabelNarrators }}: {{ book.narrator }}</p>
-            <p v-if="book.duration" class="text-gray-400 text-xs">{{ $strings.LabelDuration }}: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
-          </div>
-          <div class="grow" />
-          <div v-if="book.matchConfidence" class="rounded-full px-2 py-1 text-xs whitespace-nowrap text-white" :class="book.matchConfidence > 0.95 ? 'bg-success/80' : 'bg-info/80'">{{ $strings.LabelMatchConfidence }}: {{ (book.matchConfidence * 100).toFixed(0) }}%</div>
-        </div>
-
-        <div v-if="book.series?.length" class="flex py-1 -mx-1">
-          <div v-for="(series, index) in book.series" :key="index" class="bg-white/10 rounded-full px-1 py-0.5 mx-1">
-            <p class="leading-3 text-xs text-gray-400">
-              {{ series.series }}<span v-if="series.sequence">&nbsp;#{{ series.sequence }}</span>
-            </p>
-          </div>
+          <h1>{{ book.title }}</h1>
+          <div class="flex-grow" />
+          <p>{{ book.publishedYear }}</p>
        </div>
+        <p class="text-gray-400">{{ book.author }}</p>
        <div class="w-full max-h-12 overflow-hidden">
-          <p class="text-gray-500 text-xs">{{ book.descriptionPlain }}</p>
+          <p class="text-gray-500 text-xs">{{ book.description }}</p>
        </div>
      </div>
-      <div v-else class="px-4 grow">
-        <h1>
-          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator v-if="book.explicit" /></div>
-        </h1>
-        <p class="text-base text-gray-300 whitespace-nowrap truncate">{{ $getString('LabelByAuthor', [book.author]) }}</p>
-        <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
+      <div v-else class="px-4 flex-grow">
+        <h1>{{ book.title }}</h1>
+        <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
+        <p class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
        <p class="text-xs text-gray-400 leading-5">{{ book.trackCount }} Episodes</p>
      </div>
    </div>
@ -62,8 +40,7 @@ export default {
      default: () => {}
    },
    isPodcast: Boolean,
-    bookCoverAspectRatio: Number,
-    currentBookDuration: Number
+    bookCoverAspectRatio: Number
  },
  data() {
    return {
@ -72,29 +49,14 @@ export default {
  },
  computed: {
    bookCovers() {
-      return this.book.covers || []
-    },
-    bookDuration() {
-      return (this.book.duration || 0) * 60
-    },
-    bookDurationComparison() {
-      if (!this.book.duration || !this.currentBookDuration) return ''
-      const currentBookDurationMinutes = Math.floor(this.currentBookDuration / 60)
-      let differenceInMinutes = currentBookDurationMinutes - this.book.duration
-      if (differenceInMinutes < 0) {
-        differenceInMinutes = Math.abs(differenceInMinutes)
-        return this.$getString('LabelDurationComparisonLonger', [this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)])
-      } else if (differenceInMinutes > 0) {
-        return this.$getString('LabelDurationComparisonShorter', [this.$elapsedPrettyExtended(differenceInMinutes * 60, false, false)])
-      }
-      return this.$strings.LabelDurationComparisonExactMatch
+      return this.book.covers ? this.book.covers || [] : []
    }
  },
  methods: {
    selectMatch() {
-      const book = { ...this.book }
+      var book = { ...this.book }
      book.cover = this.selectedCover
-      this.$emit('select', book)
+      this.$emit('select', this.book)
    },
    clickCover(cover) {
      this.selectedCover = cover
@ -104,4 +66,4 @@ export default {
    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : this.book.cover || null
  }
 }
-</script>
+</script>
--- a/client/components/cards/EpisodeSearchCard.vue
+++ b/client/components/cards/EpisodeSearchCard.vue
@ -1,60 +0,0 @@
-<template>
-  <div class="flex items-center h-full px-1 overflow-hidden">
-    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    <div class="grow px-2 episodeSearchCardContent">
-      <p class="truncate text-sm">{{ episodeTitle }}</p>
-      <p class="text-xs text-gray-200 truncate">{{ podcastTitle }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    },
-    episode: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
-    },
-    coverWidth() {
-      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
-      return 50
-    },
-    media() {
-      return this.libraryItem?.media || {}
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    episodeTitle() {
-      return this.episode.title || 'No Title'
-    },
-    podcastTitle() {
-      return this.mediaMetadata.title || 'No Title'
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style>
-.episodeSearchCardContent {
-  width: calc(100% - 80px);
-  height: 75px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-</style>
--- a/client/components/cards/GenreSearchCard.vue
+++ b/client/components/cards/GenreSearchCard.vue
@ -1,36 +0,0 @@
-<template>
-  <div class="flex h-full px-1 overflow-hidden">
-    <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-symbols text-2xl text-gray-200">category</span>
-    </div>
-    <div class="grow px-2 tagSearchCardContent h-full">
-      <p class="truncate text-sm">{{ genre }}</p>
-      <p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    genre: String,
-    numItems: Number
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style>
-.tagSearchCardContent {
-  width: calc(100% - 40px);
-  height: 44px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-</style>
--- a/client/components/cards/GroupCard.vue
+++ b/client/components/cards/GroupCard.vue
@ -1,18 +1,26 @@
 <template>
  <div class="relative">
-    <div class="rounded-xs h-full relative" :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
+    <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'">
-          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="cardWidth" :height="cardHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <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" :group-to="groupTo" :type="groupType" :book-items="bookItems" :width="coverWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />

-          <div v-if="hasValidCovers" class="bg-black/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 :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
+          <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>
          </div>

-          <div class="absolute z-10 top-1.5e right-1.5e rounded-md leading-3e p-1e font-semibold text-white flex items-center justify-center" :style="{ fontSize: 0.8 + 'em' }" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
+          <div class="absolute top-2 right-2 w-7 h-7 rounded-lg bg-black bg-opacity-90 text-gray-300 box-shadow-book flex items-center justify-center border border-white border-opacity-25 pointer-events-none z-40">
+            <p class="font-book text-xl">{{ bookItems.length }}</p>
+          </div>
        </div>
      </nuxt-link>
    </div>
+
+    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto bottom-0 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, coverWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${1 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ groupName }}</p>
+      </div>
+    </div>
  </div>
 </template>

@ -23,26 +31,34 @@ export default {
      type: Object,
      default: () => null
    },
-    width: Number,
-    height: {
+    width: {
      type: Number,
-      default: 192
-    }
+      default: 120
+    },
+    isCategorized: Boolean,
+    bookCoverAspectRatio: Number
  },
  data() {
    return {
      isHovering: false
    }
  },
+  watch: {
+    width(newVal) {
+      this.$nextTick(() => {
+        if (this.$refs.groupcover) {
+          this.$refs.groupcover.init()
+        }
+      })
+    }
+  },
  computed: {
-    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    seriesId() {
+      return this.groupEncode
    },
-    cardWidth() {
-      return this.width || this.cardHeight * 2
-    },
-    cardHeight() {
-      return this.height * this.sizeMultiplier
+    labelFontSize() {
+      if (this.coverWidth < 160) return 0.75
+      return 0.875
    },
    currentLibraryId() {
      return this.$store.state.libraries.currentLibraryId
@ -54,10 +70,29 @@ export default {
      return this._group.type
    },
    groupTo() {
-      return `/library/${this.currentLibraryId}/bookshelf?filter=${this.filter}`
+      if (this.groupType === 'series') {
+        return `/library/${this.currentLibraryId}/series/${this._group.id}`
+      } else if (this.groupType === 'collection') {
+        return `/collection/${this._group.id}`
+      } else {
+        return `/library/${this.currentLibraryId}/bookshelf?filter=tags.${this.groupEncode}`
+      }
+    },
+    squareAspectRatio() {
+      return this.bookCoverAspectRatio === 1
+    },
+    coverWidth() {
+      return this.width * 2
+    },
+    coverHeight() {
+      return this.width * this.bookCoverAspectRatio
    },
    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
+      var baseSize = this.squareAspectRatio ? 192 : 120
+      return this.width / baseSize
+    },
+    paddingX() {
+      return 16 * this.sizeMultiplier
    },
    bookItems() {
      return this._group.books || []
@ -74,18 +109,23 @@ export default {
    hasValidCovers() {
      var validCovers = this.bookItems.map((bookItem) => bookItem.media.coverPath)
      return !!validCovers.length
+    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
    }
  },
  methods: {
    mouseoverCard() {
      this.isHovering = true
+      // if (this.$refs.groupcover) this.$refs.groupcover.setHover(true)
    },
    mouseleaveCard() {
      this.isHovering = false
+      // if (this.$refs.groupcover) this.$refs.groupcover.setHover(false)
    },
    clickCard() {
      this.$emit('click', this.group)
    }
  }
 }
-</script>
+</script>
--- a/client/components/cards/ItemSearchCard.vue
+++ b/client/components/cards/ItemSearchCard.vue
@ -1,10 +1,16 @@
 <template>
  <div class="flex items-center h-full px-1 overflow-hidden">
    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    <div class="grow px-2 audiobookSearchCardContent">
-      <p class="truncate text-sm">{{ title }}</p>
-      <p v-if="subtitle" class="truncate text-xs text-gray-300">{{ subtitle }}</p>
-      <p class="text-xs text-gray-200 truncate">{{ $getString('LabelByAuthor', [authorName]) }}</p>
+    <div class="flex-grow px-2 audiobookSearchCardContent">
+      <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
+      <p v-else class="truncate text-sm" v-html="matchHtml" />
+
+      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300">{{ matchHtml }}</p>
+
+      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ authorName }}</p>
+      <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
+
+      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
    </div>
  </div>
 </template>
@ -15,14 +21,17 @@ export default {
    libraryItem: {
      type: Object,
      default: () => {}
-    }
+    },
+    search: String,
+    matchKey: String,
+    matchText: String
  },
  data() {
    return {}
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
+      return this.$store.getters['getBookCoverAspectRatio']
    },
    coverWidth() {
      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
@ -49,6 +58,32 @@ export default {
    authorName() {
      if (this.isPodcast) return this.mediaMetadata.author || 'Unknown'
      return this.mediaMetadata.authorName || 'Unknown'
+    },
+    matchHtml() {
+      if (!this.matchText || !this.search) return ''
+      if (this.matchKey === 'subtitle') return ''
+      var matchSplit = this.matchText.toLowerCase().split(this.search.toLowerCase().trim())
+      if (matchSplit.length < 2) return ''
+
+      var html = ''
+      var totalLenSoFar = 0
+      for (let i = 0; i < matchSplit.length - 1; i++) {
+        var indexOf = matchSplit[i].length
+        var firstPart = this.matchText.substr(totalLenSoFar, indexOf)
+        var actualWasThere = this.matchText.substr(totalLenSoFar + indexOf, this.search.length)
+        totalLenSoFar += indexOf + this.search.length
+
+        html += `${firstPart}<strong class="text-warning">${actualWasThere}</strong>`
+      }
+      var lastPart = this.matchText.substr(totalLenSoFar)
+      html += lastPart
+
+      if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
+      if (this.matchKey === 'authors') return `by ${html}`
+      if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
+      if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
+      if (this.matchKey === 'series') return `<p class="truncate">Series: ${html}</p>`
+      return `${html}`
    }
  },
  methods: {},
@ -64,4 +99,4 @@ export default {
  flex-direction: column;
  justify-content: center;
 }
-</style>
+</style>
--- a/client/components/cards/ItemTaskRunningCard.vue
+++ b/client/components/cards/ItemTaskRunningCard.vue
@ -1,143 +0,0 @@
-<template>
-  <div class="flex items-center px-1 overflow-hidden">
-    <div class="w-8 flex items-center justify-center">
-      <span v-if="isFinished" :class="taskIconStatus" class="material-symbols text-base">{{ actionIcon }}</span>
-      <widgets-loading-spinner v-else />
-    </div>
-    <div class="grow px-2 taskRunningCardContent">
-      <p class="truncate text-sm">{{ title }}</p>
-
-      <p class="truncate text-xs text-gray-300">{{ description }}</p>
-      <p v-if="specialMessage" class="truncate text-xs text-gray-300">{{ specialMessage }}</p>
-
-      <p v-if="isFailed && failedMessage" class="text-xs truncate text-red-500">{{ failedMessage }}</p>
-      <p v-else-if="!isFinished && cancelingScan" class="text-xs truncate">Canceling...</p>
-    </div>
-    <ui-btn v-if="userIsAdminOrUp && !isFinished && isLibraryScan && !cancelingScan" color="bg-primary" :padding-y="1" :padding-x="1" class="text-xs w-16 max-w-16 truncate mr-1" @click.stop="cancelScan">{{ this.$strings.ButtonCancel }}</ui-btn>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    task: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      cancelingScan: false,
-      specialMessage: ''
-    }
-  },
-  watch: {
-    task: {
-      immediate: true,
-      handler() {
-        this.initTask()
-      }
-    }
-  },
-  computed: {
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
-    title() {
-      if (this.task.titleKey && this.$strings[this.task.titleKey]) {
-        return this.$getString(this.task.titleKey, this.task.titleSubs)
-      }
-      return this.task.title || 'No Title'
-    },
-    description() {
-      if (this.task.descriptionKey && this.$strings[this.task.descriptionKey]) {
-        return this.$getString(this.task.descriptionKey, this.task.descriptionSubs)
-      }
-      return this.task.description || ''
-    },
-    isFinished() {
-      return !!this.task.isFinished
-    },
-    isFailed() {
-      return !!this.task.isFailed
-    },
-    isSuccess() {
-      return this.isFinished && !this.isFailed
-    },
-    failedMessage() {
-      if (this.task.errorKey && this.$strings[this.task.errorKey]) {
-        return this.$getString(this.task.errorKey, this.task.errorSubs)
-      }
-      return this.task.error || ''
-    },
-    action() {
-      return this.task.action || ''
-    },
-    actionIcon() {
-      if (this.isFailed) {
-        return 'error'
-      } else if (this.isSuccess) {
-        return 'done'
-      }
-      switch (this.action) {
-        case 'download-podcast-episode':
-          return 'cloud_download'
-        case 'encode-m4b':
-          return 'sync'
-        default:
-          return 'settings'
-      }
-    },
-    taskIconStatus() {
-      if (this.isFinished && this.isFailed) {
-        return 'text-red-500'
-      }
-      if (this.isFinished && !this.isFailed) {
-        return 'text-green-500'
-      }
-
-      return ''
-    },
-    isLibraryScan() {
-      return this.action === 'library-scan' || this.action === 'library-match-all'
-    }
-  },
-  methods: {
-    initTask() {
-      // special message for library scan tasks
-      if (this.task?.data?.scanResults) {
-        const scanResults = this.task.data.scanResults
-        const strs = []
-        if (scanResults.added) strs.push(this.$getString('MessageTaskScanItemsAdded', [scanResults.added]))
-        if (scanResults.updated) strs.push(this.$getString('MessageTaskScanItemsUpdated', [scanResults.updated]))
-        if (scanResults.missing) strs.push(this.$getString('MessageTaskScanItemsMissing', [scanResults.missing]))
-        const changesDetected = strs.length > 0 ? strs.join(', ') : this.$strings.MessageTaskScanNoChangesNeeded
-        const timeElapsed = scanResults.elapsed ? ` (${this.$elapsedPretty(scanResults.elapsed / 1000, false, true)})` : ''
-        this.specialMessage = `${changesDetected}${timeElapsed}`
-      } else {
-        this.specialMessage = ''
-      }
-    },
-    cancelScan() {
-      const libraryId = this.task?.data?.libraryId
-      if (!libraryId) {
-        console.error('No library id in library-scan task', this.task)
-        return
-      }
-      this.cancelingScan = true
-      this.$root.socket.emit('cancel_scan', libraryId)
-    }
-  },
-  mounted() {}
-}
-</script>
-
-<style>
-.taskRunningCardContent {
-  width: calc(100% - 84px);
-  height: 60px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-</style>
--- a/client/components/cards/ItemUploadCard.vue
+++ b/client/components/cards/ItemUploadCard.vue
@ -1,11 +1,11 @@
 <template>
-  <div class="relative w-full py-4 px-6 border border-white/10 shadow-lg rounded-md my-6">
-    <div class="absolute -top-3 -left-3 w-8 h-8 bg-bg border border-white/10 flex items-center justify-center rounded-full">
-      <p class="text-base text-white/80 font-mono">#{{ item.index }}</p>
+  <div class="relative w-full py-4 px-6 border border-white border-opacity-10 shadow-lg rounded-md my-6">
+    <div class="absolute -top-3 -left-3 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full">
+      <p class="text-base text-white text-opacity-80 font-mono">#{{ item.index }}</p>
    </div>

-    <div v-if="!processing && !uploadFailed && !uploadSuccess" class="absolute -top-3 -right-3 w-8 h-8 bg-bg border border-white/10 flex items-center justify-center rounded-full hover:bg-error cursor-pointer" @click="$emit('remove')">
-      <span class="text-base text-white/80 font-mono material-symbols">close</span>
+    <div v-if="!processing && !uploadFailed && !uploadSuccess" class="absolute -top-3 -right-3 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-error cursor-pointer" @click="$emit('remove')">
+      <span class="text-base text-white text-opacity-80 font-mono material-icons">close</span>
    </div>

    <template v-if="!uploadSuccess && !uploadFailed">
@ -15,71 +15,41 @@

      <div class="flex my-2 -mx-2">
        <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model.trim="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
+          <ui-text-input-with-label v-model="itemData.title" :disabled="processing" label="Title" @input="titleUpdated" />
        </div>
        <div class="w-1/2 px-2">
-          <div v-if="!isPodcast" class="flex items-end">
-            <ui-text-input-with-label v-model.trim="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
-            <ui-tooltip direction="top" :text="$strings.LabelUploaderItemFetchMetadataHelp">
-              <button type="button" class="ml-2 mb-1 w-8 h-8 bg-bg border border-white/10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer" @click="fetchMetadata">
-                <span class="text-base text-white/80 font-mono material-symbols">sync</span>
-              </button>
-            </ui-tooltip>
-          </div>
+          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" label="Author" />
          <div v-else class="w-full">
-            <p class="px-1 text-sm font-semibold">
-              {{ $strings.LabelDirectory }}
-              <em class="font-normal text-xs pl-2">(auto)</em>
-            </p>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" />
+            <p class="px-1 text-sm font-semibold">Directory <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
          </div>
        </div>
      </div>
      <div v-if="!isPodcast" class="flex my-2 -mx-2">
        <div class="w-1/2 px-2">
-          <ui-text-input-with-label v-model.trim="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" inputClass="h-10" />
+          <ui-text-input-with-label v-model="itemData.series" :disabled="processing" label="Series" note="(optional)" />
        </div>
        <div class="w-1/2 px-2">
          <div class="w-full">
-            <label class="px-1 text-sm font-semibold">
-              {{ $strings.LabelDirectory }}
-              <em class="font-normal text-xs pl-2">(auto)</em>
-            </label>
-            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs h-10" />
+            <p class="px-1 text-sm font-semibold">Directory <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
          </div>
        </div>
      </div>

-      <tables-uploaded-files-table :files="item.itemFiles" :title="$strings.HeaderItemFiles" class="mt-8" />
-      <tables-uploaded-files-table v-if="item.otherFiles.length" :title="$strings.HeaderOtherFiles" :files="item.otherFiles" />
-      <tables-uploaded-files-table v-if="item.ignoredFiles.length" :title="$strings.HeaderIgnoredFiles" :files="item.ignoredFiles" />
+      <tables-uploaded-files-table :files="item.itemFiles" title="Item Files" class="mt-8" />
+      <tables-uploaded-files-table v-if="item.otherFiles.length" title="Other Files" :files="item.otherFiles" />
+      <tables-uploaded-files-table v-if="item.ignoredFiles.length" title="Ignored Files" :files="item.ignoredFiles" />
    </template>
    <widgets-alert v-if="uploadSuccess" type="success">
-      <p class="text-base">"{{ itemData.title }}" {{ $strings.MessageUploaderItemSuccess }}</p>
+      <p class="text-base">Successfully Uploaded!</p>
    </widgets-alert>
    <widgets-alert v-if="uploadFailed" type="error">
-      <p class="text-base">"{{ itemData.title }}" {{ $strings.MessageUploaderItemFailed }}</p>
+      <p class="text-base">Failed to upload</p>
    </widgets-alert>

-    <div v-if="isNonInteractable" class="absolute top-0 left-0 w-full h-full bg-black/50 flex items-center justify-center z-20">
-      <ui-loading-indicator>
-        <div class="mb-4">
-          <span class="text-lg font-medium text-white">
-            {{ nonInteractionLabel }}
-          </span>
-        </div>
-
-        <div v-if="isUploading" class="w-64 mx-auto mb-2">
-          <div class="flex items-center justify-center mb-2">
-            <span class="text-sm font-medium text-white/60 text-center w-full">
-              {{ uploadProgressText }}
-            </span>
-          </div>
-          <div class="w-full bg-primary/20 rounded-full h-2.5">
-            <div class="bg-green-500 h-2.5 rounded-full transition-all duration-300 ease-out" :style="{ width: uploadProgressPercent + '%' }"></div>
-          </div>
-        </div>
-      </ui-loading-indicator>
+    <div v-if="isUploading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
+      <ui-loading-indicator text="Uploading..." />
    </div>
  </div>
 </template>
@ -94,8 +64,7 @@ export default {
      default: () => {}
    },
    mediaType: String,
-    processing: Boolean,
-    provider: String
+    processing: Boolean
  },
  data() {
    return {
@ -107,12 +76,7 @@ export default {
      error: '',
      isUploading: false,
      uploadFailed: false,
-      uploadSuccess: false,
-      isFetchingMetadata: false,
-      uploadProgress: {
-        loaded: 0,
-        total: 0
-      }
+      uploadSuccess: false
    }
  },
  computed: {
@ -123,29 +87,13 @@ export default {
      if (!this.itemData.title) return ''
      if (this.isPodcast) return this.itemData.title

-      const outputPathParts = [this.itemData.author, this.itemData.series, this.itemData.title]
-      const cleanedOutputPathParts = outputPathParts.filter(Boolean).map((part) => this.$sanitizeFilename(part))
-
-      return Path.join(...cleanedOutputPathParts)
-    },
-    isNonInteractable() {
-      return this.isUploading || this.isFetchingMetadata
-    },
-    nonInteractionLabel() {
-      if (this.isUploading) {
-        return this.$strings.MessageUploading
-      } else if (this.isFetchingMetadata) {
-        return this.$strings.LabelFetchingMetadata
+      if (this.itemData.series && this.itemData.author) {
+        return Path.join(this.itemData.author, this.itemData.series, this.itemData.title)
+      } else if (this.itemData.author) {
+        return Path.join(this.itemData.author, this.itemData.title)
+      } else {
+        return this.itemData.title
      }
-    },
-    uploadProgressPercent() {
-      if (this.uploadProgress.total === 0) return 0
-      return Math.min(100, Math.round((this.uploadProgress.loaded / this.uploadProgress.total) * 100))
-    },
-    uploadProgressText() {
-      const loaded = this.$bytesPretty(this.uploadProgress.loaded)
-      const total = this.$bytesPretty(this.uploadProgress.total)
-      return `${this.uploadProgressPercent}% (${loaded} / ${total})`
    }
  },
  methods: {
@ -153,68 +101,19 @@ export default {
      this.isUploading = status === 'uploading'
      this.uploadFailed = status === 'failed'
      this.uploadSuccess = status === 'success'
-
-      if (status !== 'uploading') {
-        this.uploadProgress = {
-          loaded: 0,
-          total: 0
-        }
-      }
-    },
-    setUploadProgress(progress) {
-      if (this.isUploading && progress) {
-        this.uploadProgress = {
-          loaded: progress.loaded || 0,
-          total: progress.total || 0
-        }
-      }
    },
    titleUpdated() {
      this.error = ''
    },
-    async fetchMetadata() {
-      if (!this.itemData.title.trim().length) {
-        return
-      }
-
-      this.isFetchingMetadata = true
-      this.error = ''
-
-      try {
-        const searchQueryString = new URLSearchParams({
-          title: this.itemData.title,
-          author: this.itemData.author,
-          provider: this.provider
-        })
-        const [bestCandidate, ..._rest] = await this.$axios.$get(`/api/search/books?${searchQueryString}`)
-
-        if (bestCandidate) {
-          this.itemData = {
-            ...this.itemData,
-            title: bestCandidate.title,
-            author: bestCandidate.author,
-            series: (bestCandidate.series || [])[0]?.series
-          }
-        } else {
-          this.error = this.$strings.ErrorUploadFetchMetadataNoResults
-        }
-      } catch (e) {
-        console.error('Failed', e)
-        this.error = this.$strings.ErrorUploadFetchMetadataAPI
-      } finally {
-        this.isFetchingMetadata = false
-      }
-    },
    getData() {
      if (!this.itemData.title) {
-        this.error = this.$strings.ErrorUploadLacksTitle
+        this.error = 'Must have a title'
        return null
      }
      this.error = ''
      var files = this.item.itemFiles.concat(this.item.otherFiles)
      return {
        index: this.item.index,
-        directory: this.directory,
        ...this.itemData,
        files
      }
@ -228,4 +127,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
--- a/client/components/cards/LazyCollectionCard.vue
+++ b/client/components/cards/LazyCollectionCard.vue
@ -1,26 +1,23 @@
 <template>
-  <div ref="card" :id="`collection-card-${index}`" role="button" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-xs z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="relative" :style="{ height: coverHeight + 'px' }">
-      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-      <div class="w-full h-full bg-primary relative rounded-sm overflow-hidden">
-        <covers-collection-cover ref="cover" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-      </div>
-      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black/40 pointer-events-none">
-        <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
-          <span class="material-symbols text-white/75 hover:text-white/100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
-        </div>
-      </div>
-
-      <span v-if="!isHovering && rssFeed" class="absolute z-10 material-symbols text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
+  <div ref="card" :id="`collection-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
    </div>
-
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-xs border" :style="{ padding: `0em ${0.5}em` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+    <div v-show="isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+      <!-- <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="toggleSelected">
+              <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">radio_button_unchecked</span>
+            </div> -->
+      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
+        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
      </div>
    </div>
-    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
+    <!-- <div v-if="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-40">
+    </div> -->
+    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      </div>
    </div>
  </div>
 </template>
@ -30,19 +27,8 @@ export default {
  props: {
    index: Number,
    width: Number,
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 0
-    },
-    collectionMount: {
-      type: Object,
-      default: () => null
-    },
-    isTag: Boolean
+    height: Number,
+    bookCoverAspectRatio: Number
  },
  data() {
    return {
@ -53,21 +39,13 @@ export default {
    }
  },
  computed: {
-    bookCoverAspectRatio() {
-      return this.store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardWidth() {
-      return this.width || (this.coverHeight / this.bookCoverAspectRatio) * 2
-    },
-    coverHeight() {
-      return this.height * this.sizeMultiplier
-    },
    labelFontSize() {
      if (this.width < 160) return 0.75
-      return 0.9
+      return 0.875
    },
    sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
    },
    title() {
      return this.collection ? this.collection.name : ''
@ -80,16 +58,6 @@ export default {
    },
    currentLibraryId() {
      return this.store.state.libraries.currentLibraryId
-    },
-    isAlternativeBookshelfView() {
-      const constants = this.$constants || this.$nuxt.$constants
-      return this.bookshelfView == constants.BookshelfView.DETAIL
-    },
-    userCanUpdate() {
-      return this.store.getters['user/getUserCanUpdate']
-    },
-    rssFeed() {
-      return this.collection ? this.collection.rssFeed : null
    }
  },
  methods: {
@ -125,10 +93,6 @@ export default {
      }
    }
  },
-  mounted() {
-    if (this.collectionMount) {
-      this.setEntity(this.collectionMount)
-    }
-  }
+  mounted() {}
 }
-</script>
+</script>
--- a/client/components/cards/LazyPlaylistCard.vue
+++ b/client/components/cards/LazyPlaylistCard.vue
@ -1,128 +0,0 @@
-<template>
-  <div ref="card" :id="`playlist-card-${index}`" role="button" :style="{ width: cardWidth + 'px', fontSize: sizeMultiplier + 'rem' }" class="absolute top-0 left-0 rounded-xs z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div class="relative" :style="{ height: coverHeight + 'px' }">
-      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-      <div class="w-full h-full bg-primary relative rounded-sm overflow-hidden">
-        <covers-playlist-cover ref="cover" :items="items" :width="cardWidth" :height="coverHeight" />
-      </div>
-      <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black/40 pointer-events-none">
-        <div class="absolute pointer-events-auto" :style="{ top: 0.5 + 'em', right: 0.5 + 'em' }" @click.stop.prevent="clickEdit">
-          <span class="material-symbols text-white/75 hover:text-white/100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 -bottom-6e left-0 right-0 mx-auto h-6e rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-xs border" :style="{ padding: `0em ${0.5}em` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
-      </div>
-    </div>
-    <div v-else class="relative z-30 left-0 right-0 mx-auto h-8e py-1e rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    index: Number,
-    width: Number,
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 0
-    },
-    playlistMount: {
-      type: Object,
-      default: () => null
-    }
-  },
-  data() {
-    return {
-      playlist: null,
-      isSelectionMode: false,
-      selected: false,
-      isHovering: false
-    }
-  },
-  computed: {
-    bookCoverAspectRatio() {
-      return this.store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardWidth() {
-      return this.width || this.coverHeight
-    },
-    coverHeight() {
-      return this.height * this.sizeMultiplier
-    },
-    labelFontSize() {
-      if (this.width < 160) return 0.75
-      return 0.9
-    },
-    sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
-    },
-    title() {
-      return this.playlist ? this.playlist.name : ''
-    },
-    items() {
-      return this.playlist ? this.playlist.items || [] : []
-    },
-    store() {
-      return this.$store || this.$nuxt.$store
-    },
-    currentLibraryId() {
-      return this.store.state.libraries.currentLibraryId
-    },
-    isAlternativeBookshelfView() {
-      const constants = this.$constants || this.$nuxt.$constants
-      return this.bookshelfView == constants.BookshelfView.DETAIL
-    },
-    userCanUpdate() {
-      return this.store.getters['user/getUserCanUpdate']
-    }
-  },
-  methods: {
-    setEntity(playlist) {
-      this.playlist = playlist
-    },
-    setSelectionMode(val) {
-      this.isSelectionMode = val
-    },
-    mouseover() {
-      this.isHovering = true
-    },
-    mouseleave() {
-      this.isHovering = false
-    },
-    clickCard() {
-      if (!this.playlist) return
-      var router = this.$router || this.$nuxt.$router
-      router.push(`/playlist/${this.playlist.id}`)
-    },
-    clickEdit() {
-      this.$emit('edit', this.playlist)
-    },
-    destroy() {
-      // destroy the vue listeners, etc
-      this.$destroy()
-
-      // remove the element from the DOM
-      if (this.$el && this.$el.parentNode) {
-        this.$el.parentNode.removeChild(this.$el)
-      } else if (this.$el && this.$el.remove) {
-        this.$el.remove()
-      }
-    }
-  },
-  mounted() {
-    if (this.playlistMount) {
-      this.setEntity(this.playlistMount)
-    }
-  }
-}
-</script>
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@ -1,32 +1,22 @@
 <template>
-  <div cy-id="card" ref="card" :id="`series-card-${index}`" tabindex="0" :style="{ width: cardWidth + 'px' }" class="absolute rounded-xs z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div cy-id="covers-area" class="relative" :style="{ height: coverHeight + 'px' }">
-      <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
-      <div class="w-full h-full bg-primary relative rounded-sm overflow-hidden z-0">
-        <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="cardWidth" :height="coverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-      </div>
-
-      <div cy-id="seriesLengthMarker" class="absolute rounded-lg bg-black/90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
-        <p :style="{ fontSize: 0.8 + 'em' }" role="status" :aria-label="$strings.LabelNumberOfBooks">{{ books.length }}</p>
-      </div>
-
-      <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e shadow-xs max-w-full z-10 rounded-b w-full box-shadow-progressbar" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
-
-      <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" aria-hidden="true" class="bg-black/60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: '1em' }">
-        <p :style="{ fontSize: 1.2 + 'em' }">{{ displayTitle }}</p>
-      </div>
-
-      <span cy-id="rssFeedMarker" v-if="!isHovering && rssFeed" class="absolute z-10 material-symbols text-success" :style="{ top: 0.5 + 'em', left: 0.5 + 'em', fontSize: 1.5 + 'em' }">rss_feed</span>
+  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
+      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="title" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" :group-to="seriesBooksRoute" />
    </div>

-    <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
-      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-xs border" :style="{ padding: `0em 0.5em` }">
-        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
-      </div>
+    <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
+
+    <div v-if="isSeriesFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success w-full" />
+
+    <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" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
+      <p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ title }}</p>
    </div>
-    <div cy-id="detailBottomText" v-else class="relative z-30 left-0 right-0 mx-auto py-1e rounded-md text-center">
-      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
-      <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
+
+    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      </div>
    </div>
  </div>
 </template>
@ -36,20 +26,13 @@ export default {
  props: {
    index: Number,
    width: Number,
-    height: {
-      type: Number,
-      default: 192
-    },
-    bookshelfView: {
-      type: Number,
-      default: 0
-    },
+    height: Number,
+    bookCoverAspectRatio: Number,
+    isCategorized: Boolean,
    seriesMount: {
      type: Object,
      default: () => null
-    },
-    sortingIgnorePrefix: Boolean,
-    orderBy: String
+    }
  },
  data() {
    return {
@ -61,62 +44,25 @@ export default {
    }
  },
  computed: {
-    bookCoverAspectRatio() {
-      return this.store.getters['libraries/getBookCoverAspectRatio']
-    },
-    cardWidth() {
-      return this.width || (this.coverHeight / this.bookCoverAspectRatio) * 2
-    },
-    coverHeight() {
-      return this.height * this.sizeMultiplier
-    },
-    dateFormat() {
-      return this.store.getters['getServerSetting']('dateFormat')
-    },
    labelFontSize() {
      if (this.width < 160) return 0.75
-      return 0.9
+      return 0.875
    },
    sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
    },
    seriesId() {
-      return this.series?.id || ''
+      return this.series ? this.series.id : ''
    },
    title() {
-      return this.series?.name || ''
-    },
-    nameIgnorePrefix() {
-      return this.series?.nameIgnorePrefix || ''
-    },
-    displayTitle() {
-      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title || '\u00A0'
-      return this.title || '\u00A0'
-    },
-    displaySortLine() {
-      switch (this.orderBy) {
-        case 'addedAt':
-          return this.$getString('LabelAddedDate', [this.$formatDate(this.addedAt, this.dateFormat)])
-        case 'totalDuration':
-          return `${this.$strings.LabelDuration} ${this.$elapsedPrettyExtended(this.totalDuration, false)}`
-        case 'lastBookUpdated':
-          const lastUpdated = Math.max(...this.books.map((x) => x.updatedAt), 0)
-          return `${this.$strings.LabelLastBookUpdated} ${this.$formatDate(lastUpdated, this.dateFormat)}`
-        case 'lastBookAdded':
-          const lastBookAdded = Math.max(...this.books.map((x) => x.addedAt), 0)
-          return `${this.$strings.LabelLastBookAdded} ${this.$formatDate(lastBookAdded, this.dateFormat)}`
-        default:
-          return null
-      }
+      return this.series ? this.series.name : ''
    },
    books() {
-      return this.series?.books || []
+      return this.series ? this.series.books || [] : []
    },
    addedAt() {
-      return this.series?.addedAt || 0
-    },
-    totalDuration() {
-      return this.series?.totalDuration || 0
+      return this.series ? this.series.addedAt : 0
    },
    seriesBookProgress() {
      return this.books
@ -128,18 +74,6 @@ export default {
    seriesBooksFinished() {
      return this.seriesBookProgress.filter((p) => p.isFinished)
    },
-    hasSeriesBookInProgress() {
-      return this.seriesBookProgress.some((p) => !p.isFinished && p.progress > 0)
-    },
-    seriesPercentInProgress() {
-      if (!this.books.length) return 0
-      let progressPercent = 0
-      this.seriesBookProgress.forEach((progress) => {
-        progressPercent += progress.isFinished ? 1 : progress.progress || 0
-      })
-      progressPercent /= this.books.length
-      return Math.min(1, Math.max(0, progressPercent))
-    },
    isSeriesFinished() {
      return this.books.length === this.seriesBooksFinished.length
    },
@ -155,13 +89,6 @@ export default {
    hasValidCovers() {
      var validCovers = this.books.map((bookItem) => bookItem.media.coverPath)
      return !!validCovers.length
-    },
-    isAlternativeBookshelfView() {
-      const constants = this.$constants || this.$nuxt.$constants
-      return this.bookshelfView == constants.BookshelfView.DETAIL
-    },
-    rssFeed() {
-      return this.series?.rssFeed
    }
  },
  methods: {
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@ -1,60 +0,0 @@
-<template>
-  <div>
-    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
-      <div cy-id="card" :style="{ width: cardWidth + 'px', height: cardHeight + 'px', fontSize: sizeMultiplier + 'rem' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
-        <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
-          <span class="material-symbols text-[10em]">&#xe91f;</span>
-        </div>
-
-        <!-- Narrator name & num books overlay -->
-        <div class="absolute bottom-0 left-0 w-full py-1e bg-black/60 px-2e">
-          <p cy-id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: 0.75 + 'em' }">{{ name }}</p>
-          <p cy-id="numBooks" class="text-center text-gray-200" :style="{ fontSize: 0.65 + 'em' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
-        </div>
-      </div>
-    </nuxt-link>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    narrator: {
-      type: Object,
-      default: () => {}
-    },
-    width: Number,
-    height: {
-      type: Number,
-      default: 100
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    cardWidth() {
-      return this.cardHeight * 1.5
-    },
-    cardHeight() {
-      return this.height * this.sizeMultiplier
-    },
-    name() {
-      return this.narrator?.name || ''
-    },
-    numBooks() {
-      return this.narrator?.numBooks || this.narrator?.books?.length || 0
-    },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
-    },
-    currentLibraryId() {
-      return this.$store.state.libraries.currentLibraryId
-    },
-    sizeMultiplier() {
-      return this.$store.getters['user/getSizeMultiplier']
-    }
-  },
-  methods: {}
-}
-</script>
--- a/client/components/cards/NarratorSearchCard.vue
+++ b/client/components/cards/NarratorSearchCard.vue
@ -1,36 +0,0 @@
-<template>
-  <div class="flex h-full px-1 overflow-hidden">
-    <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-symbols text-2xl text-gray-200">&#xe91f;</span>
-    </div>
-    <div class="grow px-2 narratorSearchCardContent h-full">
-      <p class="truncate text-sm">{{ narrator }}</p>
-      <p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    narrator: String,
-    numBooks: Number
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style scoped>
-.narratorSearchCardContent {
-  width: calc(100% - 40px);
-  height: 44px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-</style>
--- a/client/components/cards/NotificationCard.vue
+++ b/client/components/cards/NotificationCard.vue
@ -1,172 +0,0 @@
-<template>
-  <div class="w-full border border-white/10 rounded-xl p-4 my-2" :class="notification.enabled ? 'bg-primary/25' : 'bg-error/5'">
-    <div class="flex flex-wrap items-center">
-      <p class="text-base md:text-lg font-semibold pr-4">{{ eventName }}</p>
-      <div class="grow" />
-
-      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="fireTestEventAndSucceed">{{ this.$strings.ButtonFireOnTest }}</ui-btn>
-      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" color="bg-red-600" @click.stop="fireTestEventAndFail">{{ this.$strings.ButtonFireAndFail }}</ui-btn>
-      <!-- <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="rapidFireTestEvents">Rapid Fire</ui-btn> -->
-      <ui-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">{{ this.$strings.ButtonTest }}</ui-btn>
-      <ui-btn v-else :loading="enabling" small color="bg-success" class="mr-2" @click="enableNotification">{{ this.$strings.ButtonEnable }}</ui-btn>
-
-      <ui-icon-btn :size="7" icon-font-size="1.1rem" icon="edit" class="mr-2" @click="editNotification" />
-      <ui-icon-btn bg-color="bg-error" :size="7" icon-font-size="1.2rem" icon="delete" @click="deleteNotificationClick" />
-    </div>
-    <div class="pt-4">
-      <p class="text-gray-300 text-xs md:text-sm mb-2">{{ notification.urls.join(', ') }}</p>
-
-      <p v-if="lastFiredAt && lastAttemptFailed" class="text-red-300 text-xs">Last attempt failed {{ $dateDistanceFromNow(lastFiredAt) }} ({{ numConsecutiveFailedAttempts }} attempt{{ numConsecutiveFailedAttempts === 1 ? '' : 's' }})</p>
-      <p v-else-if="lastFiredAt" class="text-gray-400 text-xs">Last fired {{ $dateDistanceFromNow(lastFiredAt) }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    notification: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      sendingTest: false,
-      enabling: false,
-      deleting: false,
-      testing: false
-    }
-  },
-  computed: {
-    eventName() {
-      return this.notification ? this.notification.eventName : null
-    },
-    lastFiredAt() {
-      return this.notification ? this.notification.lastFiredAt : null
-    },
-    lastAttemptFailed() {
-      return this.notification ? this.notification.lastAttemptFailed : null
-    },
-    numConsecutiveFailedAttempts() {
-      return this.notification ? this.notification.numConsecutiveFailedAttempts : null
-    }
-  },
-  methods: {
-    // For testing using the onTest event
-    fireTestEventAndFail() {
-      this.fireTestEvent(true)
-    },
-    fireTestEventAndSucceed() {
-      this.fireTestEvent(false)
-    },
-    fireTestEvent(intentionallyFail = false) {
-      this.testing = true
-      this.$axios
-        .$get(`/api/notifications/test?fail=${intentionallyFail ? 1 : 0}`)
-        .then(() => {
-          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          const errorMsg = error.response ? error.response.data : null
-          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
-        })
-        .finally(() => {
-          this.testing = false
-        })
-    },
-    rapidFireTestEvents() {
-      this.testing = true
-      var numFired = 0
-      var interval = setInterval(() => {
-        this.fireTestEvent()
-        numFired++
-        if (numFired > 25) {
-          this.testing = false
-          clearInterval(interval)
-        }
-      }, 100)
-    },
-    // End testing functions
-    sendTestClick() {
-      const payload = {
-        message: this.$strings.MessageConfirmNotificationTestTrigger,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.sendTest()
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    sendTest() {
-      this.sendingTest = true
-      this.$axios
-        .$get(`/api/notifications/${this.notification.id}/test`)
-        .then(() => {
-          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          const errorMsg = error.response ? error.response.data : null
-          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
-        })
-        .finally(() => {
-          this.sendingTest = false
-        })
-    },
-    enableNotification() {
-      this.enabling = true
-      const payload = {
-        id: this.notification.id,
-        enabled: true
-      }
-      this.$axios
-        .$patch(`/api/notifications/${this.notification.id}`, payload)
-        .then((updatedSettings) => {
-          this.$emit('update', updatedSettings)
-        })
-        .catch((error) => {
-          console.error('Failed to update notification', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
-        })
-        .finally(() => {
-          this.enabling = false
-        })
-    },
-    deleteNotificationClick() {
-      const payload = {
-        message: this.$strings.MessageConfirmDeleteNotification,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.deleteNotification()
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    deleteNotification() {
-      this.deleting = true
-      this.$axios
-        .$delete(`/api/notifications/${this.notification.id}`)
-        .then((updatedSettings) => {
-          this.$emit('update', updatedSettings)
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          this.$toast.error(this.$strings.ToastNotificationDeleteFailed)
-        })
-        .finally(() => {
-          this.deleting = false
-        })
-    },
-    editNotification() {
-      this.$emit('edit', this.notification)
-    }
-  },
-  mounted() {}
-}
-</script>
--- a/client/components/cards/PodcastFeedSummaryCard.vue
+++ b/client/components/cards/PodcastFeedSummaryCard.vue
@ -1,71 +0,0 @@
-<template>
-  <div ref="wrapper" class="w-full p-2 border border-white/10 rounded-sm">
-    <div class="flex">
-      <div class="w-16 min-w-16">
-        <div class="w-full h-16 bg-primary">
-          <img v-if="image" :src="image" class="w-full h-full object-cover" />
-        </div>
-        <p class="text-gray-400 text-xxs pt-1 text-center">{{ numEpisodes }} {{ $strings.HeaderEpisodes }}</p>
-      </div>
-      <div class="grow pl-2" :style="{ maxWidth: detailsWidth + 'px' }">
-        <p class="mb-1">{{ title }}</p>
-        <p class="text-xs mb-1 text-gray-300">{{ author }}</p>
-        <p class="text-xs mb-2 text-gray-200">{{ description }}</p>
-        <p class="text-xs truncate text-blue-200">
-          {{ $strings.LabelFolder }}: <span class="font-mono">{{ folderPath }}</span>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    feed: {
-      type: Object,
-      default: () => {}
-    },
-    libraryFolderPath: String
-  },
-  data() {
-    return {
-      width: 900
-    }
-  },
-  computed: {
-    title() {
-      return this.metadata.title || 'No Title'
-    },
-    image() {
-      return this.metadata.imageUrl
-    },
-    description() {
-      return this.metadata.description || ''
-    },
-    author() {
-      return this.metadata.author || ''
-    },
-    metadata() {
-      return this.feed || {}
-    },
-    numEpisodes() {
-      return this.feed.numEpisodes || 0
-    },
-    folderPath() {
-      if (!this.libraryFolderPath) return ''
-      return `${this.libraryFolderPath}/${this.$sanitizeFilename(this.title)}`
-    },
-    detailsWidth() {
-      return this.width - 85
-    }
-  },
-  methods: {},
-  updated() {
-    this.width = this.$refs.wrapper.clientWidth
-  },
-  mounted() {
-    this.width = this.$refs.wrapper.clientWidth
-  }
-}
-</script>
--- a/client/components/cards/SearchAuthorCard.vue
+++ b/client/components/cards/SearchAuthorCard.vue
@ -0,0 +1,73 @@
+<template>
+  <div>
+    <form @submit.prevent="submitSearch">
+      <div class="flex items-center justify-start -mx-1 h-20">
+        <!-- <div class="w-40 px-1">
+          <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
+        </div> -->
+        <div class="flex-grow px-1">
+          <ui-text-input-with-label v-model="searchAuthor" label="Author" />
+        </div>
+        <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    authorName: String
+  },
+  data() {
+    return {
+      searchAuthor: null,
+      lastSearch: null,
+      isProcessing: false,
+      provider: 'audnexus',
+      providers: [
+        {
+          text: 'Audnexus',
+          value: 'audnexus'
+        }
+      ]
+    }
+  },
+  watch: {
+    authorName: {
+      immediate: true,
+      handler(newVal) {
+        this.searchAuthor = newVal
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    getSearchQuery() {
+      return `q=${this.searchAuthor}`
+    },
+    submitSearch() {
+      if (!this.searchAuthor) {
+        this.$toast.warning('Author name is required')
+        return
+      }
+      this.runSearch()
+    },
+    async runSearch() {
+      var searchQuery = this.getSearchQuery()
+      if (this.lastSearch === searchQuery) return
+      this.isProcessing = true
+      this.lastSearch = searchQuery
+      var result = await this.$axios.$get(`/api/authors/search?${searchQuery}`).catch((error) => {
+        console.error('Failed', error)
+        return []
+      })
+      this.isProcessing = false
+      if (result) {
+        this.$emit('match', result)
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/cards/SeriesSearchCard.vue
+++ b/client/components/cards/SeriesSearchCard.vue
@ -1,7 +1,7 @@
 <template>
  <div class="flex h-full px-1 overflow-hidden">
    <covers-group-cover :name="name" :book-items="bookItems" :width="60" :height="60" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-    <div class="grow px-2 seriesSearchCardContent h-full">
+    <div class="flex-grow px-2 seriesSearchCardContent h-full">
      <p class="truncate text-sm">{{ name }}</p>
    </div>
  </div>
@ -24,7 +24,7 @@ export default {
  },
  computed: {
    bookCoverAspectRatio() {
-      return this.$store.getters['libraries/getBookCoverAspectRatio']
+      return this.$store.getters['getBookCoverAspectRatio']
    },
    name() {
      return this.series.name
--- a/client/components/cards/TagSearchCard.vue
+++ b/client/components/cards/TagSearchCard.vue
@ -1,11 +1,10 @@
 <template>
  <div class="flex h-full px-1 overflow-hidden">
    <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-symbols text-2xl text-gray-200">local_offer</span>
+      <span class="material-icons text-2xl text-gray-200">local_offer</span>
    </div>
-    <div class="grow px-2 tagSearchCardContent h-full">
+    <div class="flex-grow px-2 tagSearchCardContent h-full">
      <p class="truncate text-sm">{{ tag }}</p>
-      <p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
    </div>
  </div>
 </template>
@ -13,8 +12,7 @@
 <script>
 export default {
  props: {
-    tag: String,
-    numItems: Number
+    tag: String
  },
  data() {
    return {}
@ -28,9 +26,9 @@ export default {
 <style>
 .tagSearchCardContent {
  width: calc(100% - 40px);
-  height: 44px;
+  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
-</style>
+</style>
--- a/client/components/content/LibraryItemDetails.vue
+++ b/client/components/content/LibraryItemDetails.vue
@ -1,168 +0,0 @@
-<template>
-  <div>
-    <div v-if="narrators?.length" class="flex py-0.5 mt-4">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelNarrators }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-ellipsis">
-        <template v-for="(narrator, index) in narrators">
-          <nuxt-link :key="narrator" :to="`/library/${libraryId}/bookshelf?filter=narrators.${$encode(narrator)}`" class="hover:underline">{{ narrator }}</nuxt-link
-          ><span :key="index" v-if="index < narrators.length - 1">,&nbsp;</span>
-        </template>
-      </div>
-    </div>
-    <div v-if="publishedYear" role="paragraph" class="flex py-0.5">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelPublishYear }}</span>
-      </div>
-      <div>
-        {{ publishedYear }}
-      </div>
-    </div>
-    <div v-if="publisher" role="paragraph" class="flex py-0.5">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelPublisher }}</span>
-      </div>
-      <div>
-        <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=publishers.${$encode(publisher)}`" class="hover:underline">{{ publisher }}</nuxt-link>
-      </div>
-    </div>
-    <div v-if="podcastType" role="paragraph" class="flex py-0.5">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelPodcastType }}</span>
-      </div>
-      <div class="capitalize">
-        {{ podcastType }}
-      </div>
-    </div>
-    <div class="flex py-0.5" v-if="genres.length">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelGenres }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-ellipsis">
-        <template v-for="(genre, index) in genres">
-          <nuxt-link :key="genre" :to="`/library/${libraryId}/bookshelf?filter=genres.${$encode(genre)}`" class="hover:underline">{{ genre }}</nuxt-link
-          ><span :key="index" v-if="index < genres.length - 1">,&nbsp;</span>
-        </template>
-      </div>
-    </div>
-    <div class="flex py-0.5" v-if="tags.length">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelTags }}</span>
-      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-ellipsis">
-        <template v-for="(tag, index) in tags">
-          <nuxt-link :key="tag" :to="`/library/${libraryId}/bookshelf?filter=tags.${$encode(tag)}`" class="hover:underline">{{ tag }}</nuxt-link
-          ><span :key="index" v-if="index < tags.length - 1">,&nbsp;</span>
-        </template>
-      </div>
-    </div>
-    <div v-if="language" class="flex py-0.5">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelLanguage }}</span>
-      </div>
-      <div>
-        <nuxt-link :to="`/library/${libraryId}/bookshelf?filter=languages.${$encode(language)}`" class="hover:underline">{{ language }}</nuxt-link>
-      </div>
-    </div>
-    <div v-if="tracks.length || (isPodcast && totalPodcastDuration)" role="paragraph" class="flex py-0.5">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelDuration }}</span>
-      </div>
-      <div>
-        {{ durationPretty }}
-      </div>
-    </div>
-    <div role="paragraph" class="flex py-0.5">
-      <div class="w-34 min-w-34 sm:w-34 sm:min-w-34 break-words">
-        <span class="text-white/60 uppercase text-sm">{{ $strings.LabelSize }}</span>
-      </div>
-      <div>
-        {{ sizePretty }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    libraryItem: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    libraryId() {
-      return this.libraryItem.libraryId
-    },
-    isPodcast() {
-      return this.libraryItem.mediaType === 'podcast'
-    },
-    media() {
-      return this.libraryItem.media || {}
-    },
-    tracks() {
-      return this.media.tracks || []
-    },
-    podcastEpisodes() {
-      return this.media.episodes || []
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
-    },
-    publishedYear() {
-      return this.mediaMetadata.publishedYear
-    },
-    genres() {
-      return this.mediaMetadata.genres || []
-    },
-    tags() {
-      return this.media.tags || []
-    },
-    podcastAuthor() {
-      return this.mediaMetadata.author || ''
-    },
-    authors() {
-      return this.mediaMetadata.authors || []
-    },
-    publisher() {
-      return this.mediaMetadata.publisher || ''
-    },
-    narrators() {
-      return this.mediaMetadata.narrators || []
-    },
-    language() {
-      return this.mediaMetadata.language || null
-    },
-    durationPretty() {
-      if (this.isPodcast) return this.$elapsedPrettyExtended(this.totalPodcastDuration)
-
-      if (!this.tracks.length && !this.audioFile) return 'N/A'
-      if (this.audioFile) return this.$elapsedPrettyExtended(this.duration)
-      return this.$elapsedPretty(this.duration)
-    },
-    duration() {
-      if (!this.tracks.length && !this.audioFile) return 0
-      return this.media.duration
-    },
-    totalPodcastDuration() {
-      if (!this.podcastEpisodes.length) return 0
-      let totalDuration = 0
-      this.podcastEpisodes.forEach((ep) => (totalDuration += ep.duration || 0))
-      return totalDuration
-    },
-    sizePretty() {
-      return this.$bytesPretty(this.media.size)
-    },
-    podcastType() {
-      return this.mediaMetadata.type
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/controls/EpisodeSortSelect.vue
+++ b/client/components/controls/EpisodeSortSelect.vue
@ -1,20 +1,20 @@
 <template>
  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded-sm shadow-xs pl-3 pr-3 py-0 text-left focus:outline-hidden cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
      <span class="flex items-center justify-between">
        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-        <span class="material-symbols text-lg text-yellow-400" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
      </span>
    </button>

-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm" role="menu">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
      <template v-for="item in items">
-        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedOption(item.value)">
+        <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.value)">
          <div class="flex items-center">
-            <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
          </div>
          <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-            <span class="material-symbols text-xl" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+            <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
          </span>
        </li>
      </template>
@ -26,15 +26,29 @@
 export default {
  props: {
    value: String,
-    descending: Boolean,
-    items: {
-      type: Array,
-      default: () => []
-    }
+    descending: Boolean
  },
  data() {
    return {
-      showMenu: false
+      showMenu: false,
+      items: [
+        {
+          text: 'Current',
+          value: 'index'
+        },
+        {
+          text: 'Title',
+          value: 'title'
+        },
+        {
+          text: 'Episode',
+          value: 'episode'
+        },
+        {
+          text: 'Pub Date',
+          value: 'publishedAt'
+        }
+      ]
    }
  },
  computed: {
@ -77,4 +91,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/controls/FilterSelect.vue
+++ b/client/components/controls/FilterSelect.vue
@ -1,32 +1,55 @@
 <template>
  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <div class="relative h-9">
-      <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded-sm shadow-xs pl-3 pr-3 py-0 text-left focus:outline-hidden cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @click.prevent="showMenu = !showMenu">
-        <span class="flex items-center justify-between">
-          <span class="block truncate text-xs">{{ selectedText }}</span>
-        </span>
-      </button>
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+      <span class="flex items-center justify-between">
+        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+      </span>
      <span v-if="selected === 'all'" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </span>
-      <button v-else type="button" :aria-label="$strings.ButtonClearFilter" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-300" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
-        <span class="material-symbols" style="font-size: 1.1rem">close</span>
-      </button>
-    </div>
+      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-300" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
+        <span class="material-icons" style="font-size: 1.1rem">close</span>
+      </div>
+    </button>

-    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-sm ring-1 ring-black/5 overflow-auto focus:outline-hidden">
-      <ul class="h-full w-full" role="menu">
-        <template v-for="item in items">
-          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedOption(item)">
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <template v-for="item in selectItems">
+          <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>
-
-            <!-- selected checkmark icon -->
-            <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-symbols text-base text-yellow-400">check</span>
+            <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>
+            </div>
+          </li>
+        </template>
+      </ul>
+      <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
+          <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
+            <span class="material-icons">arrow_left</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="font-normal ml-3 block truncate">Back</span>
+          </div>
+        </li>
+        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
+          <div class="flex items-center justify-center">
+            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
+          </div>
+        </li>
+        <li v-else-if="sublist === 'series'" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedSublistOption($encode('No Series'))">
+          <div class="flex items-center">
+            <span class="font-normal block truncate py-2 text-xs text-white text-opacity-80">No Series</span>
+          </div>
+        </li>
+        <template v-for="item in sublistItems">
+          <li :key="item.value" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
+            <div class="flex items-center">
+              <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
            </div>
          </li>
        </template>
@ -38,15 +61,92 @@
 <script>
 export default {
  props: {
-    value: String,
-    items: {
-      type: Array,
-      default: () => []
-    }
+    value: String
  },
  data() {
    return {
-      showMenu: false
+      showMenu: false,
+      sublist: null,
+      bookItems: [
+        {
+          text: 'All',
+          value: 'all'
+        },
+        {
+          text: 'Genre',
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: 'Tag',
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: 'Series',
+          value: 'series',
+          sublist: true
+        },
+        {
+          text: 'Authors',
+          value: 'authors',
+          sublist: true
+        },
+        {
+          text: 'Narrator',
+          value: 'narrators',
+          sublist: true
+        },
+        {
+          text: 'Language',
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: 'Progress',
+          value: 'progress',
+          sublist: true
+        },
+        {
+          text: 'Missing',
+          value: 'missing',
+          sublist: true
+        },
+        {
+          text: 'Issues',
+          value: 'issues',
+          sublist: false
+        }
+      ],
+      podcastItems: [
+        {
+          text: 'All',
+          value: 'all'
+        },
+        {
+          text: 'Genre',
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: 'Tag',
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: 'Issues',
+          value: 'issues',
+          sublist: false
+        }
+      ]
+    }
+  },
+  watch: {
+    showMenu(newVal) {
+      if (!newVal) {
+        if (this.sublist && !this.selectedItemSublist) this.sublist = null
+        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
+      }
    }
  },
  computed: {
@ -58,10 +158,81 @@ export default {
        this.$emit('input', val)
      }
    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    selectItems() {
+      if (this.isPodcast) return this.podcastItems
+      return this.bookItems
+    },
+    selectedItemSublist() {
+      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
+    },
    selectedText() {
      if (!this.selected) return ''
-      const filter = this.items.find((i) => i.value === this.selected)
-      return filter ? filter.text : ''
+      var parts = this.selected.split('.')
+      var filterName = this.selectItems.find((i) => i.value === parts[0])
+      var filterValue = null
+      if (parts.length > 1) {
+        var decoded = this.$decode(parts[1])
+        if (decoded.startsWith('aut_')) {
+          var author = this.authors.find((au) => au.id == decoded)
+          if (author) filterValue = author.name
+        } else if (decoded.startsWith('ser_')) {
+          var series = this.series.find((se) => se.id == decoded)
+          if (series) filterValue = series.name
+        } else {
+          filterValue = decoded
+        }
+      }
+      if (filterName && filterValue) {
+        return `${filterName.text}: ${filterValue}`
+      } else if (filterName) {
+        return filterName.text
+      } else if (filterValue) {
+        return filterValue
+      } else {
+        return ''
+      }
+    },
+    genres() {
+      return this.filterData.genres || []
+    },
+    tags() {
+      return this.filterData.tags || []
+    },
+    series() {
+      return this.filterData.series || []
+    },
+    authors() {
+      return this.filterData.authors || []
+    },
+    narrators() {
+      return this.filterData.narrators || []
+    },
+    languages() {
+      return this.filterData.languages || []
+    },
+    progress() {
+      return ['Finished', 'In Progress', 'Not Started']
+    },
+    missing() {
+      return ['ASIN', 'ISBN', 'Subtitle', 'Author', 'Publish Year', 'Series', 'Description', 'Genres', 'Tags', 'Narrator', 'Publisher', 'Language']
+    },
+    sublistItems() {
+      return (this[this.sublist] || []).map((item) => {
+        if (typeof item === 'string') {
+          return {
+            text: item,
+            value: this.$encode(item)
+          }
+        } else {
+          return {
+            text: item.name,
+            value: this.$encode(item.id)
+          }
+        }
+      })
    },
    filterData() {
      return this.$store.state.libraries.filterData || {}
@ -74,9 +245,18 @@ export default {
      this.$nextTick(() => this.$emit('change', 'all'))
    },
    clickOutside() {
+      if (!this.selectedItemSublist) this.sublist = null
      this.showMenu = false
    },
+    clickedSublistOption(item) {
+      this.clickedOption({ value: `${this.sublist}.${item}` })
+    },
    clickedOption(option) {
+      if (option.sublist) {
+        this.sublist = option.value
+        return
+      }
+
      var val = option.value
      if (this.selected === val) {
        this.showMenu = false
@ -88,4 +268,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@ -1,94 +1,65 @@
 <template>
-  <div class="">
-    <div class="w-full relative sm:w-80">
-      <form role="search" @submit.prevent="submitSearch">
-        <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
-      </form>
-      <button :aria-hidden="!search" class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
-        <span v-if="!search" class="material-symbols" style="font-size: 1.2rem">&#xe8b6;</span>
-        <span v-else class="material-symbols" style="font-size: 1.2rem">close</span>
-      </button>
+  <div class="w-80 ml-6 relative">
+    <form @submit.prevent="submitSearch">
+      <ui-text-input ref="input" v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
+    </form>
+    <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
+      <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
+      <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
    </div>
-    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full max-w-64 sm:max-w-80 sm:w-80 bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black/5 overflow-auto focus:outline-hidden sm:text-sm globalSearchMenu" @mousedown.stop.prevent>
+    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
      <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
        <li v-if="isTyping" class="py-2 px-2">
-          <p>{{ $strings.MessageThinking }}</p>
+          <p>Thinking...</p>
        </li>
        <li v-else-if="isFetching" class="py-2 px-2">
-          <p>{{ $strings.MessageFetching }}</p>
+          <p>Fetching...</p>
        </li>
        <li v-else-if="!totalResults" class="py-2 px-2">
-          <p>{{ $strings.MessageNoResults }}</p>
+          <p>No Results</p>
        </li>
        <template v-else>
-          <p v-if="bookResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelBooks }}</p>
+          <p v-if="bookResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">Books</p>
          <template v-for="item in bookResults">
-            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
              <nuxt-link :to="`/item/${item.libraryItem.id}`">
-                <cards-item-search-card :library-item="item.libraryItem" />
+                <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
              </nuxt-link>
            </li>
          </template>

-          <p v-if="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelPodcasts }}</p>
+          <p v-if="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">Podcasts</p>
          <template v-for="item in podcastResults">
-            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
              <nuxt-link :to="`/item/${item.libraryItem.id}`">
-                <cards-item-search-card :library-item="item.libraryItem" />
+                <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
              </nuxt-link>
            </li>
          </template>

-          <p v-if="episodeResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelEpisodes }}</p>
-          <template v-for="item in episodeResults">
-            <li :key="item.libraryItem.recentEpisode.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
-              <nuxt-link :to="`/item/${item.libraryItem.id}`">
-                <cards-episode-search-card :episode="item.libraryItem.recentEpisode" :library-item="item.libraryItem" />
-              </nuxt-link>
-            </li>
-          </template>
-
-          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelAuthors }}</p>
+          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Authors</p>
          <template v-for="item in authorResults">
-            <li :key="item.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
-              <nuxt-link :to="`/author/${item.id}`">
+            <li :key="item.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
+              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(item.id)}`">
                <cards-author-search-card :author="item" />
              </nuxt-link>
            </li>
          </template>

-          <p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelSeries }}</p>
+          <p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Series</p>
          <template v-for="item in seriesResults">
-            <li :key="item.series.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+            <li :key="item.series.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
              <nuxt-link :to="`/library/${currentLibraryId}/series/${item.series.id}`">
                <cards-series-search-card :series="item.series" :book-items="item.books" />
              </nuxt-link>
            </li>
          </template>

-          <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelTags }}</p>
+          <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Tags</p>
          <template v-for="item in tagResults">
-            <li :key="`tag.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+            <li :key="item.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.name)}`">
-                <cards-tag-search-card :tag="item.name" :num-items="item.numItems" />
-              </nuxt-link>
-            </li>
-          </template>
-
-          <p v-if="genreResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelGenres }}</p>
-          <template v-for="item in genreResults">
-            <li :key="`genre.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
-              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(item.name)}`">
-                <cards-genre-search-card :genre="item.name" :num-items="item.numItems" />
-              </nuxt-link>
-            </li>
-          </template>
-
-          <p v-if="narratorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelNarrators }}</p>
-          <template v-for="narrator in narratorResults">
-            <li :key="narrator.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
-              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
-                <cards-narrator-search-card :narrator="narrator.name" :num-books="narrator.numBooks" />
+                <cards-tag-search-card :tag="item.name" />
              </nuxt-link>
            </li>
          </template>
@ -109,13 +80,10 @@ export default {
      isFetching: false,
      search: null,
      podcastResults: [],
-      episodeResults: [],
      bookResults: [],
      authorResults: [],
      seriesResults: [],
      tagResults: [],
-      genreResults: [],
-      narratorResults: [],
      searchTimeout: null,
      lastSearch: null
    }
@ -125,30 +93,24 @@ export default {
      return this.$store.state.libraries.currentLibraryId
    },
    totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.genreResults.length + this.podcastResults.length + this.narratorResults.length + this.episodeResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length
    }
  },
  methods: {
-    clickOption() {
-      this.clearResults()
-    },
    submitSearch() {
      if (!this.search) return
      var search = this.search
      this.clearResults()
-      this.$router.push(`/library/${this.currentLibraryId}/search?q=${encodeURIComponent(search)}`)
+      this.$router.push(`/library/${this.currentLibraryId}/search?q=${search}`)
    },
    clearResults() {
      this.search = null
      this.lastSearch = null
      this.podcastResults = []
-      this.episodeResults = []
      this.bookResults = []
      this.authorResults = []
      this.seriesResults = []
      this.tagResults = []
-      this.genreResults = []
-      this.narratorResults = []
      this.showMenu = false
      this.isFetching = false
      this.isTyping = false
@ -168,7 +130,7 @@ export default {
      clearTimeout(this.focusTimeout)
      this.focusTimeout = setTimeout(() => {
        this.showMenu = false
-      }, 100)
+      }, 200)
    },
    async runSearch(value) {
      this.lastSearch = value
@ -177,7 +139,7 @@ export default {
      }
      this.isFetching = true

-      const searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${encodeURIComponent(value)}&limit=3`).catch((error) => {
+      var searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${value}&limit=3`).catch((error) => {
        console.error('Search error', error)
        return []
      })
@ -186,13 +148,10 @@ export default {
      if (!this.isFetching) return

      this.podcastResults = searchResults.podcast || []
-      this.episodeResults = searchResults.episodes || []
      this.bookResults = searchResults.book || []
      this.authorResults = searchResults.authors || []
      this.seriesResults = searchResults.series || []
      this.tagResults = searchResults.tags || []
-      this.genreResults = searchResults.genres || []
-      this.narratorResults = searchResults.narrators || []

      this.isFetching = false
      if (!this.showMenu) {
@ -223,8 +182,8 @@ export default {
 }
 </script>

-<style scoped>
+<style>
 .globalSearchMenu {
-  max-height: calc(100vh - 75px);
+  max-height: 80vh;
 }
-</style>
+</style>
--- a/client/components/controls/LibraryFilterSelect.vue
+++ b/client/components/controls/LibraryFilterSelect.vue
@ -1,569 +0,0 @@
-<template>
-  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <div class="relative h-7">
-      <button type="button" class="relative w-full h-full bg-bg border border-gray-500 hover:border-gray-400 rounded-sm shadow-xs pl-3 pr-3 py-0 text-left focus:outline-hidden sm:text-sm cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @click.prevent="showMenu = !showMenu">
-        <span class="flex items-center justify-between">
-          <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-        </span>
-      </button>
-      <span v-if="selected === 'all'" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-        </svg>
-      </span>
-      <button v-else :aria-label="$strings.ButtonClearFilter" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-200" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
-        <span class="material-symbols" style="font-size: 1.1rem">close</span>
-      </button>
-    </div>
-
-    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm libraryFilterMenu">
-      <ul v-show="!sublist" class="h-full w-full" role="menu">
-        <template v-for="item in selectItems">
-          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" :aria-haspopup="item.sublist ? '' : 'menu'" @click="clickedOption(item)">
-            <div class="flex items-center justify-between">
-              <span class="font-normal ml-3 block truncate text-sm">{{ 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-symbols text-2xl" :aria-label="$strings.LabelMore">arrow_right</span>
-            </div>
-            <!-- selected checkmark icon -->
-            <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-symbols text-base text-yellow-400">check</span>
-            </div>
-          </li>
-        </template>
-      </ul>
-      <ul v-show="sublist" class="h-full w-full" role="menu">
-        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-white/5" role="menuitem" @click="sublist = null">
-          <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
-            <span class="material-symbols text-2xl">arrow_left</span>
-          </div>
-          <div class="flex items-center justify-between">
-            <span class="font-normal block truncate">{{ $strings.ButtonBack }}</span>
-          </div>
-        </li>
-        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="menuitem">
-          <div class="flex items-center justify-center">
-            <span class="font-normal block truncate py-2">{{ $getString('LabelLibraryFilterSublistEmpty', [selectedSublistText]) }}</span>
-          </div>
-        </li>
-        <template v-for="item in sublistItems">
-          <li :key="item.value" class="select-none relative px-2 cursor-pointer hover:bg-white/5" :class="`${sublist}.${item.value}` === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedSublistOption(item.value)">
-            <div class="flex items-center">
-              <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
-            </div>
-            <!-- selected checkmark icon -->
-            <div v-if="`${sublist}.${item.value}` === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
-              <span class="material-symbols text-base text-yellow-400">check</span>
-            </div>
-          </li>
-        </template>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: String,
-    isSeries: Boolean
-  },
-  data() {
-    return {
-      showMenu: false,
-      sublist: null
-    }
-  },
-  watch: {
-    showMenu(newVal) {
-      if (newVal) {
-        this.sublist = this.selectedItemSublist
-      }
-    }
-  },
-  computed: {
-    selected: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    userIsAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
-    userCanAccessExplicitContent() {
-      return this.$store.getters['user/getUserCanAccessExplicitContent']
-    },
-    libraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
-    },
-    isPodcast() {
-      return this.libraryMediaType === 'podcast'
-    },
-    seriesItems() {
-      return [
-        {
-          text: this.$strings.LabelAll,
-          value: 'all'
-        },
-        {
-          text: this.$strings.LabelGenre,
-          textPlural: this.$strings.LabelGenres,
-          value: 'genres',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelTag,
-          textPlural: this.$strings.LabelTags,
-          value: 'tags',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelAuthor,
-          textPlural: this.$strings.LabelAuthors,
-          value: 'authors',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelNarrator,
-          textPlural: this.$strings.LabelNarrators,
-          value: 'narrators',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelPublisher,
-          textPlural: this.$strings.LabelPublishers,
-          value: 'publishers',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelLanguage,
-          textPlural: this.$strings.LabelLanguages,
-          value: 'languages',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelSeriesProgress,
-          value: 'progress',
-          sublist: true
-        }
-      ]
-    },
-    bookItems() {
-      const items = [
-        {
-          text: this.$strings.LabelAll,
-          value: 'all'
-        },
-        {
-          text: this.$strings.LabelGenre,
-          textPlural: this.$strings.LabelGenres,
-          value: 'genres',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelTag,
-          textPlural: this.$strings.LabelTags,
-          value: 'tags',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelSeries,
-          textPlural: this.$strings.LabelSeries,
-          value: 'series',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelAuthor,
-          textPlural: this.$strings.LabelAuthors,
-          value: 'authors',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelNarrator,
-          textPlural: this.$strings.LabelNarrators,
-          value: 'narrators',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelPublisher,
-          textPlural: this.$strings.LabelPublishers,
-          value: 'publishers',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelPublishedDecade,
-          textPlural: this.$strings.LabelPublishedDecades,
-          value: 'publishedDecades',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelLanguage,
-          textPlural: this.$strings.LabelLanguages,
-          value: 'languages',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelProgress,
-          value: 'progress',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelMissing,
-          value: 'missing',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelTracks,
-          value: 'tracks',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelEbooks,
-          value: 'ebooks',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelAbridged,
-          value: 'abridged',
-          sublist: false
-        },
-        {
-          text: this.$strings.ButtonIssues,
-          value: 'issues',
-          sublist: false
-        },
-        {
-          text: this.$strings.LabelRSSFeedOpen,
-          value: 'feed-open',
-          sublist: false
-        }
-      ]
-
-      if (this.userCanAccessExplicitContent) {
-        items.push({
-          text: this.$strings.LabelExplicit,
-          value: 'explicit',
-          sublist: false
-        })
-      }
-
-      if (this.userIsAdminOrUp) {
-        items.push({
-          text: this.$strings.LabelShareOpen,
-          value: 'share-open',
-          sublist: false
-        })
-      }
-      return items
-    },
-    podcastItems() {
-      const items = [
-        {
-          text: this.$strings.LabelAll,
-          value: 'all'
-        },
-        {
-          text: this.$strings.LabelGenre,
-          textPlural: this.$strings.LabelGenres,
-          value: 'genres',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelTag,
-          textPlural: this.$strings.LabelTags,
-          value: 'tags',
-          sublist: true
-        },
-        {
-          text: this.$strings.LabelLanguage,
-          textPlural: this.$strings.LabelLanguages,
-          value: 'languages',
-          sublist: true
-        },
-        {
-          text: this.$strings.ButtonIssues,
-          value: 'issues',
-          sublist: false
-        },
-        {
-          text: this.$strings.LabelRSSFeedOpen,
-          value: 'feed-open',
-          sublist: false
-        }
-      ]
-
-      if (this.userCanAccessExplicitContent) {
-        items.push({
-          text: this.$strings.LabelExplicit,
-          value: 'explicit',
-          sublist: false
-        })
-      }
-
-      return items
-    },
-    selectItems() {
-      if (this.isSeries) return this.seriesItems
-      if (this.isPodcast) return this.podcastItems
-      return this.bookItems
-    },
-    selectedItemSublist() {
-      return this.selected?.includes('.') ? this.selected.split('.')[0] : null
-    },
-    selectedSublistText() {
-      if (!this.sublist) {
-        return ''
-      }
-      const sublistItem = this.selectItems.find((i) => i.value === this.sublist)
-      return sublistItem?.textPlural || sublistItem?.text || ''
-    },
-    selectedText() {
-      if (!this.selected) return ''
-      const parts = this.selected.split('.')
-      const filterName = this.selectItems.find((i) => i.value === parts[0])
-      let filterValue = null
-      if (parts.length > 1) {
-        const decoded = this.$decode(parts[1])
-        if (parts[0] === 'authors') {
-          const author = this.authors.find((au) => au.id == decoded)
-          if (author) filterValue = author.name
-        } else if (parts[0] === 'series') {
-          if (decoded === 'no-series') {
-            filterValue = this.$strings.MessageNoSeries
-          } else {
-            const series = this.series.find((se) => se.id == decoded)
-            if (series) filterValue = series.name
-          }
-        } else if (parts[0] === 'progress') {
-          const item = this.progress.find((p) => p.id == decoded)
-          if (item) filterValue = item.name
-        } else if (parts[0] === 'tracks') {
-          const item = this.tracks.find((t) => t.id == decoded)
-          if (item) filterValue = item.name
-        } else if (parts[0] === 'ebooks') {
-          const item = this.ebooks.find((e) => e.id == decoded)
-          if (item) filterValue = item.name
-        } else if (parts[0] === 'missing') {
-          const item = this.missing.find((m) => m.id == decoded)
-          if (item) filterValue = item.name
-        } else {
-          filterValue = decoded
-        }
-      }
-      if (filterName && filterValue) {
-        return `${filterName.text}: ${filterValue}`
-      } else if (filterName) {
-        return filterName.text
-      } else if (filterValue) {
-        return filterValue
-      } else {
-        return ''
-      }
-    },
-    genres() {
-      return this.filterData.genres || []
-    },
-    tags() {
-      return this.filterData.tags || []
-    },
-    series() {
-      return this.filterData.series || []
-    },
-    authors() {
-      return this.filterData.authors || []
-    },
-    narrators() {
-      return this.filterData.narrators || []
-    },
-    languages() {
-      return this.filterData.languages || []
-    },
-    publishers() {
-      return this.filterData.publishers || []
-    },
-    publishedDecades() {
-      return this.filterData.publishedDecades || []
-    },
-    progress() {
-      return [
-        {
-          id: 'finished',
-          name: this.$strings.LabelFinished
-        },
-        {
-          id: 'in-progress',
-          name: this.$strings.LabelInProgress
-        },
-        {
-          id: 'not-started',
-          name: this.$strings.LabelNotStarted
-        },
-        {
-          id: 'not-finished',
-          name: this.$strings.LabelNotFinished
-        }
-      ]
-    },
-    tracks() {
-      return [
-        {
-          id: 'none',
-          name: this.$strings.LabelTracksNone
-        },
-        {
-          id: 'single',
-          name: this.$strings.LabelTracksSingleTrack
-        },
-        {
-          id: 'multi',
-          name: this.$strings.LabelTracksMultiTrack
-        }
-      ]
-    },
-    ebooks() {
-      return [
-        {
-          id: 'ebook',
-          name: this.$strings.LabelHasEbook
-        },
-        {
-          id: 'no-ebook',
-          name: this.$strings.LabelMissingEbook
-        },
-        {
-          id: 'supplementary',
-          name: this.$strings.LabelHasSupplementaryEbook
-        },
-        {
-          id: 'no-supplementary',
-          name: this.$strings.LabelMissingSupplementaryEbook
-        }
-      ]
-    },
-    missing() {
-      return [
-        {
-          id: 'asin',
-          name: 'ASIN'
-        },
-        {
-          id: 'isbn',
-          name: 'ISBN'
-        },
-        {
-          id: 'authors',
-          name: this.$strings.LabelAuthor
-        },
-        {
-          id: 'chapters',
-          name: this.$strings.LabelChapters
-        },
-        {
-          id: 'cover',
-          name: this.$strings.LabelCover
-        },
-        {
-          id: 'description',
-          name: this.$strings.LabelDescription
-        },
-        {
-          id: 'genres',
-          name: this.$strings.LabelGenres
-        },
-        {
-          id: 'language',
-          name: this.$strings.LabelLanguage
-        },
-        {
-          id: 'narrators',
-          name: this.$strings.LabelNarrator
-        },
-        {
-          id: 'publishedYear',
-          name: this.$strings.LabelPublishYear
-        },
-        {
-          id: 'publisher',
-          name: this.$strings.LabelPublisher
-        },
-        {
-          id: 'series',
-          name: this.$strings.LabelSeries
-        },
-        {
-          id: 'subtitle',
-          name: this.$strings.LabelSubtitle
-        },
-        {
-          id: 'tags',
-          name: this.$strings.LabelTags
-        }
-      ]
-    },
-    sublistItems() {
-      const sublistItems = (this[this.sublist] || []).map((item) => {
-        if (typeof item === 'string') {
-          return {
-            text: item,
-            value: this.$encode(item)
-          }
-        } else {
-          return {
-            text: item.name,
-            value: this.$encode(item.id)
-          }
-        }
-      })
-      if (this.sublist === 'series') {
-        sublistItems.unshift({
-          text: this.$strings.MessageNoSeries,
-          value: this.$encode('no-series')
-        })
-      }
-      return sublistItems
-    },
-    filterData() {
-      return this.$store.state.libraries.filterData || {}
-    }
-  },
-  methods: {
-    clearSelected() {
-      this.selected = 'all'
-      this.showMenu = false
-      this.$nextTick(() => this.$emit('change', 'all'))
-    },
-    clickOutside() {
-      if (!this.selectedItemSublist) this.sublist = null
-      this.showMenu = false
-    },
-    clickedSublistOption(item) {
-      this.clickedOption({ value: `${this.sublist}.${item}` })
-    },
-    clickedOption(option) {
-      if (option.sublist) {
-        this.sublist = option.value
-        return
-      }
-
-      const val = option.value
-      if (this.selected === val) {
-        this.showMenu = false
-        return
-      }
-      this.selected = val
-      this.showMenu = false
-      this.$nextTick(() => this.$emit('change', val))
-    }
-  }
-}
-</script>
-
-<style scoped>
-.libraryFilterMenu {
-  max-height: calc(100vh - 125px);
-}
-</style>
--- a/client/components/controls/LibrarySortSelect.vue
+++ b/client/components/controls/LibrarySortSelect.vue
@ -1,211 +0,0 @@
-<template>
-  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded-sm shadow-xs pl-3 pr-3 py-0 text-left focus:outline-hidden sm:text-sm cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @click.prevent="showMenu = !showMenu">
-      <span class="flex items-center justify-between">
-        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-        <span class="material-symbols text-lg text-yellow-400" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
-      </span>
-    </button>
-
-    <ul v-show="showMenu" class="librarySortMenu absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm" role="menu">
-      <template v-for="item in selectItems">
-        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedOption(item.value)">
-          <div class="flex items-center">
-            <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
-          </div>
-          <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-            <span class="material-symbols text-xl" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
-          </span>
-        </li>
-      </template>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: String,
-    descending: Boolean
-  },
-  data() {
-    return {
-      showMenu: false
-    }
-  },
-  computed: {
-    selected: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    selectedDesc: {
-      get() {
-        return this.descending
-      },
-      set(val) {
-        this.$emit('update:descending', val)
-      }
-    },
-    libraryMediaType() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType']
-    },
-    isPodcast() {
-      return this.libraryMediaType === 'podcast'
-    },
-    podcastItems() {
-      return [
-        {
-          text: this.$strings.LabelTitle,
-          value: 'media.metadata.title'
-        },
-        {
-          text: this.$strings.LabelAuthor,
-          value: 'media.metadata.author'
-        },
-        {
-          text: this.$strings.LabelAddedAt,
-          value: 'addedAt'
-        },
-        {
-          text: this.$strings.LabelSize,
-          value: 'size'
-        },
-        {
-          text: this.$strings.LabelNumberOfEpisodes,
-          value: 'media.numTracks'
-        },
-        {
-          text: this.$strings.LabelFileBirthtime,
-          value: 'birthtimeMs'
-        },
-        {
-          text: this.$strings.LabelFileModified,
-          value: 'mtimeMs'
-        },
-        {
-          text: this.$strings.LabelRandomly,
-          value: 'random'
-        }
-      ]
-    },
-    bookItems() {
-      return [
-        {
-          text: this.$strings.LabelTitle,
-          value: 'media.metadata.title'
-        },
-        {
-          text: this.$strings.LabelAuthorFirstLast,
-          value: 'media.metadata.authorName'
-        },
-        {
-          text: this.$strings.LabelAuthorLastFirst,
-          value: 'media.metadata.authorNameLF'
-        },
-        {
-          text: this.$strings.LabelPublishYear,
-          value: 'media.metadata.publishedYear'
-        },
-        {
-          text: this.$strings.LabelAddedAt,
-          value: 'addedAt'
-        },
-        {
-          text: this.$strings.LabelSize,
-          value: 'size'
-        },
-        {
-          text: this.$strings.LabelDuration,
-          value: 'media.duration'
-        },
-        {
-          text: this.$strings.LabelFileBirthtime,
-          value: 'birthtimeMs'
-        },
-        {
-          text: this.$strings.LabelFileModified,
-          value: 'mtimeMs'
-        },
-        {
-          text: this.$strings.LabelLibrarySortByProgress,
-          value: 'progress'
-        },
-        {
-          text: this.$strings.LabelLibrarySortByProgressStarted,
-          value: 'progress.createdAt'
-        },
-        {
-          text: this.$strings.LabelLibrarySortByProgressFinished,
-          value: 'progress.finishedAt'
-        },
-        {
-          text: this.$strings.LabelRandomly,
-          value: 'random'
-        }
-      ]
-    },
-    seriesItems() {
-      return [
-        ...this.bookItems,
-        {
-          text: this.$strings.LabelSequence,
-          value: 'sequence'
-        }
-      ]
-    },
-    selectItems() {
-      let items = null
-      if (this.isPodcast) {
-        items = this.podcastItems
-      } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
-        items = this.seriesItems
-      } else {
-        items = this.bookItems
-      }
-
-      if (!items.some((i) => i.value === this.selected)) {
-        this.selected = items[0].value
-        this.selectedDesc = !this.defaultsToAsc(items[0].value)
-      }
-
-      return items
-    },
-    selectedText() {
-      var _selected = this.selected
-      if (!_selected) return ''
-      if (this.selected.startsWith('book.')) _selected = _selected.replace('book.', 'media.metadata.')
-      var _sel = this.selectItems.find((i) => i.value === _selected)
-      if (!_sel) return ''
-      return _sel.text
-    }
-  },
-  methods: {
-    clickOutside() {
-      this.showMenu = false
-    },
-    clickedOption(val) {
-      if (this.selected === val) {
-        this.selectedDesc = !this.selectedDesc
-      } else {
-        this.selected = val
-        if (this.defaultsToAsc(val)) this.selectedDesc = false
-      }
-      this.showMenu = false
-      this.$nextTick(() => this.$emit('change', val))
-    },
-    defaultsToAsc(val) {
-      return val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF' || val == 'sequence'
-    }
-  }
-}
-</script>
-
-<style scoped>
-.librarySortMenu {
-  max-height: calc(100vh - 125px);
-}
-</style>
--- a/client/components/controls/OrderSelect.vue
+++ b/client/components/controls/OrderSelect.vue
@ -0,0 +1,151 @@
+<template>
+  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+      <span class="flex items-center justify-between">
+        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+      </span>
+    </button>
+
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+      <template v-for="item in selectItems">
+        <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.value)">
+          <div class="flex items-center">
+            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
+          </div>
+          <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
+            <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+          </span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    descending: Boolean
+  },
+  data() {
+    return {
+      showMenu: false,
+      bookItems: [
+        {
+          text: 'Title',
+          value: 'media.metadata.title'
+        },
+        {
+          text: 'Author (First Last)',
+          value: 'media.metadata.authorName'
+        },
+        {
+          text: 'Author (Last, First)',
+          value: 'media.metadata.authorNameLF'
+        },
+        {
+          text: 'Added At',
+          value: 'addedAt'
+        },
+        {
+          text: 'Size',
+          value: 'size'
+        },
+        {
+          text: 'Duration',
+          value: 'media.duration'
+        },
+        {
+          text: 'File Birthtime',
+          value: 'birthtimeMs'
+        },
+        {
+          text: 'File Modified',
+          value: 'mtimeMs'
+        }
+      ],
+      podcastItems: [
+        {
+          text: 'Title',
+          value: 'media.metadata.title'
+        },
+        {
+          text: 'Author',
+          value: 'media.metadata.author'
+        },
+        {
+          text: 'Added At',
+          value: 'addedAt'
+        },
+        {
+          text: 'Size',
+          value: 'size'
+        },
+        {
+          text: '# of Episodes',
+          value: 'media.numTracks'
+        },
+        {
+          text: 'File Birthtime',
+          value: 'birthtimeMs'
+        },
+        {
+          text: 'File Modified',
+          value: 'mtimeMs'
+        }
+      ]
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedDesc: {
+      get() {
+        return this.descending
+      },
+      set(val) {
+        this.$emit('update:descending', val)
+      }
+    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    selectItems() {
+      if (this.isPodcast) return this.podcastItems
+      return this.bookItems
+    },
+    selectedText() {
+      var _selected = this.selected
+      if (!_selected) return ''
+      if (this.selected.startsWith('book.')) _selected = _selected.replace('book.', 'media.metadata.')
+      var _sel = this.selectItems.find((i) => i.value === _selected)
+      if (!_sel) return ''
+      return _sel.text
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(val) {
+      if (this.selected === val) {
+        this.selectedDesc = !this.selectedDesc
+      } else {
+        this.selected = val
+        if (val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF') {
+          this.selectedDesc = false
+        }
+      }
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  }
+}
+</script>
--- a/client/components/controls/PlaybackSpeedControl.vue
+++ b/client/components/controls/PlaybackSpeedControl.vue
@ -1,25 +1,25 @@
 <template>
-  <div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
+  <div class="relative ml-8" v-click-outside="clickOutside">
    <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
-      <span class="text-gray-200 text-sm sm:text-base">{{ playbackRateDisplay }}<span class="text-base">x</span></span>
+      <span class="font-mono uppercase text-gray-200">{{ playbackRate.toFixed(1) }}<span class="text-lg">⨯</span></span>
    </div>
-    <div v-show="showMenu" class="absolute -top-[5.5rem] z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
-      <div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
+    <div v-show="showMenu" class="absolute -top-20 left-0 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" style="left: -92px">
+      <div class="absolute -bottom-2 left-0 right-0 w-full flex justify-center">
        <div class="arrow-down" />
      </div>
      <div class="flex items-center h-9 relative overflow-hidden rounded-lg" style="width: 220px">
        <template v-for="rate in rates">
-          <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-xs" :class="value === rate ? 'bg-black-100' : 'hover:bg-black/10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
+          <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-sm" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
            <div class="w-full h-full flex justify-center items-center">
-              <p class="text-xs text-center">{{ rate }}<span class="text-sm">x</span></p>
+              <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">⨯</span></p>
            </div>
          </div>
        </template>
      </div>
-      <div class="w-full py-1 px-1">
+      <div class="w-full py-1 px-4">
        <div class="flex items-center justify-between">
          <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
-          <p class="px-2 text-2xl sm:text-3xl">{{ playbackRateDisplay }}<span class="text-2xl">x</span></p>
+          <p class="px-2 text-3xl">{{ playbackRate }}<span class="text-2xl">⨯</span></p>
          <ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
        </div>
      </div>
@ -33,10 +33,6 @@ export default {
    value: {
      type: [String, Number],
      default: 1
-    },
-    playbackRateIncrementDecrement: {
-      type: Number,
-      default: 0.1
    }
  },
  data() {
@ -44,9 +40,7 @@ export default {
      showMenu: false,
      currentPlaybackRate: 0,
      MIN_SPEED: 0.5,
-      MAX_SPEED: 10,
-      menuLeft: -96,
-      arrowLeft: 0
+      MAX_SPEED: 3
    }
  },
  computed: {
@ -62,17 +56,10 @@ export default {
      return [0.5, 1, 1.2, 1.5, 2]
    },
    canIncrement() {
-      return this.playbackRate + this.playbackRateIncrementDecrement <= this.MAX_SPEED
+      return this.playbackRate + 0.1 <= this.MAX_SPEED
    },
    canDecrement() {
-      return this.playbackRate - this.playbackRateIncrementDecrement >= this.MIN_SPEED
-    },
-    playbackRateDisplay() {
-      if (this.playbackRateIncrementDecrement == 0.05) return this.playbackRate.toFixed(2)
-      // For 0.1 increment: Only show 2 decimal places if the playback rate is 2 decimals
-      const numDecimals = String(this.playbackRate).split('.')[1]?.length || 0
-      if (numDecimals <= 1) return this.playbackRate.toFixed(1)
-      return this.playbackRate.toFixed(2)
+      return this.playbackRate - 0.1 >= this.MIN_SPEED
    }
  },
  methods: {
@ -84,31 +71,17 @@ export default {
      this.$nextTick(() => this.setShowMenu(false))
    },
    increment() {
-      if (this.playbackRate + this.playbackRateIncrementDecrement > this.MAX_SPEED) return
-      var newPlaybackRate = this.playbackRate + this.playbackRateIncrementDecrement
-      this.playbackRate = Number(newPlaybackRate.toFixed(2))
+      if (this.playbackRate + 0.1 > this.MAX_SPEED) return
+      var newPlaybackRate = this.playbackRate + 0.1
+      this.playbackRate = Number(newPlaybackRate.toFixed(1))
    },
    decrement() {
-      if (this.playbackRate - this.playbackRateIncrementDecrement < this.MIN_SPEED) return
-      var newPlaybackRate = this.playbackRate - this.playbackRateIncrementDecrement
-      this.playbackRate = Number(newPlaybackRate.toFixed(2))
-    },
-    updateMenuPositions() {
-      if (!this.$refs.wrapper) return
-      const boundingBox = this.$refs.wrapper.getBoundingClientRect()
-
-      if (boundingBox.left + 110 > window.innerWidth - 10) {
-        this.menuLeft = window.innerWidth - 230 - boundingBox.left
-
-        this.arrowLeft = Math.abs(this.menuLeft) - 96
-      } else {
-        this.menuLeft = -96
-        this.arrowLeft = 0
-      }
+      if (this.playbackRate - 0.1 < this.MIN_SPEED) return
+      var newPlaybackRate = this.playbackRate - 0.1
+      this.playbackRate = Number(newPlaybackRate.toFixed(1))
    },
    setShowMenu(val) {
      if (val) {
-        this.updateMenuPositions()
        this.currentPlaybackRate = this.playbackRate
      } else if (this.currentPlaybackRate !== this.playbackRate) {
        this.$emit('change', this.playbackRate)
@ -120,4 +93,4 @@ export default {
    this.currentPlaybackRate = this.playbackRate
  }
 }
-</script>
+</script>
--- a/client/components/controls/VolumeControl.vue
+++ b/client/components/controls/VolumeControl.vue
@ -1,13 +1,13 @@
 <template>
  <div class="relative" v-click-outside="clickOutside" @mouseover="mouseover" @mouseleave="mouseleave">
-    <button :aria-label="$strings.LabelVolume" class="text-gray-300 hover:text-white" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
-      <span class="material-symbols text-2xl sm:text-3xl">{{ volumeIcon }}</span>
-    </button>
+    <div class="cursor-pointer" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
+      <span class="material-icons text-3xl">{{ volumeIcon }}</span>
+    </div>
    <transition name="menux">
-      <div v-show="isOpen" class="volumeMenu h-28 absolute bottom-2 w-6 py-2 bg-bg shadow-xs rounded-lg" style="top: -116px">
-        <div ref="volumeTrack" class="w-1 h-full bg-gray-500 mx-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
-          <div class="bg-gray-100 w-full absolute left-0 bottom-0 pointer-events-none rounded-full" :style="{ height: volume * trackHeight + 'px' }" />
-          <div class="w-2.5 h-2.5 bg-white shadow-xs rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ bottom: cursorBottom + 'px', left: '-3px' }" />
+      <div v-show="isOpen" class="volumeMenu h-6 absolute bottom-2 w-28 px-2 bg-bg shadow-sm rounded-lg" style="left: -116px">
+        <div ref="volumeTrack" class="h-1 w-full bg-gray-500 my-2.5 relative cursor-pointer rounded-full" @mousedown="mousedownTrack" @click="clickVolumeTrack">
+          <div class="bg-gray-100 h-full absolute left-0 top-0 pointer-events-none rounded-full" :style="{ width: volume * trackWidth + 'px' }" />
+          <div class="w-2.5 h-2.5 bg-white shadow-sm rounded-full absolute pointer-events-none" :class="isDragging ? 'transform scale-125 origin-center' : ''" :style="{ left: cursorLeft + 'px', top: '-3px' }" />
        </div>
      </div>
    </transition>
@ -24,10 +24,10 @@ export default {
      isOpen: false,
      isDragging: false,
      isHovering: false,
-      posY: 0,
+      posX: 0,
      lastValue: 0.5,
      isMute: false,
-      trackHeight: 112 - 20,
+      trackWidth: 112 - 20,
      openTimeout: null
    }
  },
@ -37,17 +37,12 @@ export default {
        return this.value
      },
      set(val) {
-        try {
-          localStorage.setItem('volume', val)
-        } catch (error) {
-          console.error('Failed to store volume', err)
-        }
        this.$emit('input', val)
      }
    },
-    cursorBottom() {
-      var bottom = this.trackHeight * this.volume
-      return bottom - 3
+    cursorLeft() {
+      var left = this.trackWidth * this.volume
+      return left - 3
    },
    volumeIcon() {
      if (this.volume <= 0) return 'volume_mute'
@ -89,10 +84,17 @@ export default {
      }, 600)
    },
    mousemove(e) {
-      var diff = this.posY - e.y
-      this.posY = e.y
-      var volShift = diff / this.trackHeight
-      var newVol = this.volume + volShift
+      var diff = this.posX - e.x
+      this.posX = e.x
+      var volShift = 0
+      if (diff < 0) {
+        // Volume up
+        volShift = diff / this.trackWidth
+      } else {
+        // volume down
+        volShift = diff / this.trackWidth
+      }
+      var newVol = this.volume - volShift
      newVol = Math.min(Math.max(0, newVol), 1)
      this.volume = newVol
      e.preventDefault()
@ -106,8 +108,8 @@ export default {
    },
    mousedownTrack(e) {
      this.isDragging = true
-      this.posY = e.y
-      var vol = 1 - e.offsetY / this.trackHeight
+      this.posX = e.x
+      var vol = e.offsetX / this.trackWidth
      vol = Math.min(Math.max(vol, 0), 1)
      this.volume = vol
      document.body.addEventListener('mousemove', this.mousemove)
@ -130,7 +132,7 @@ export default {
      this.clickVolumeIcon()
    },
    clickVolumeTrack(e) {
-      var vol = 1 - e.offsetY / this.trackHeight
+      var vol = e.offsetX / this.trackWidth
      vol = Math.min(Math.max(vol, 0), 1)
      this.volume = vol
    }
@ -139,10 +141,6 @@ export default {
    if (this.value === 0) {
      this.isMute = true
    }
-    const storageVolume = localStorage.getItem('volume')
-    if (storageVolume && !isNaN(storageVolume)) {
-      this.volume = parseFloat(storageVolume)
-    }
  },
  beforeDestroy() {
    window.removeEventListener('mousewheel', this.scroll)
@ -150,4 +148,4 @@ export default {
    document.body.removeEventListener('mouseup', this.mouseup)
  }
 }
-</script>
+</script>
--- a/client/components/covers/AuthorImage.vue
+++ b/client/components/covers/AuthorImage.vue
@ -39,6 +39,9 @@ export default {
    }
  },
  computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
    _author() {
      return this.author || {}
    },
@ -53,15 +56,24 @@ export default {
    },
    imgSrc() {
      if (!this.imagePath) return null
-      return `${this.$config.routerBasePath}/api/authors/${this.authorId}/image?ts=${this.updatedAt}`
+      if (process.env.NODE_ENV !== 'production') {
+        // Testing
+        return `http://localhost:3333/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
+      }
+      return `/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
    }
  },
  methods: {
    imageLoaded() {
+      var aspectRatio = 1.25
+      if (this.$refs.wrapper) {
+        aspectRatio = this.$refs.wrapper.clientHeight / this.$refs.wrapper.clientWidth
+      }
      if (this.$refs.img) {
        var { naturalWidth, naturalHeight } = this.$refs.img
        var imgAr = naturalHeight / naturalWidth
-        if (imgAr < 0.5 || imgAr > 2) {
+        var arDiff = Math.abs(imgAr - aspectRatio)
+        if (arDiff > 0.15) {
          this.showCoverBg = true
        } else {
          this.showCoverBg = false
@ -72,4 +84,4 @@ export default {
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/covers/BookCover.vue
+++ b/client/components/covers/BookCover.vue
@ -1,14 +1,13 @@
 <template>
-  <div class="relative rounded-xs overflow-hidden" :style="{ height: height + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
+  <div class="relative rounded-sm overflow-hidden" :style="{ height: height + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
    <div class="w-full h-full relative bg-bg">
-      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xs bg-primary">
+      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
        <div class="absolute cover-bg" ref="coverBg" />
      </div>

-      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" draggable="false" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" @click="clickCover" />
-
+      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
      <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
-        <p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
+        <p class="font-book text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
        <div class="absolute top-2 right-2">
          <widgets-loading-spinner />
        </div>
@ -18,17 +17,17 @@
    <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
      <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
        <img src="/Logo.png" loading="lazy" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
-        <p class="text-center text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
+        <p class="text-center font-book text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
      </div>
    </div>

    <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem' }">
      <div>
-        <p class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
+        <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
      </div>
    </div>
    <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-      <p class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+      <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
    </div>
  </div>
 </template>
@ -44,7 +43,6 @@ export default {
      type: Number,
      default: 120
    },
-    expandOnClick: Boolean,
    bookCoverAspectRatio: Number
  },
  data() {
@ -96,19 +94,13 @@ export default {
      return this.author
    },
    placeholderUrl() {
-      const store = this.$store || this.$nuxt.$store
-      return store.getters['globals/getPlaceholderCoverSrc']
+      return '/book_placeholder.jpg'
    },
    fullCoverUrl() {
      if (!this.libraryItem) return null
-      const store = this.$store || this.$nuxt.$store
+      var store = this.$store || this.$nuxt.$store
      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
    },
-    rawCoverUrl() {
-      if (!this.libraryItem) return null
-      const store = this.$store || this.$nuxt.$store
-      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl, true)
-    },
    cover() {
      return this.media.coverPath || this.placeholderUrl
    },
@ -131,16 +123,11 @@ export default {
    authorBottom() {
      return 0.75 * this.sizeMultiplier
    },
-    resolution() {
-      return `${this.naturalWidth}x${this.naturalHeight}px`
+    userToken() {
+      return this.$store.getters['user/getToken']
    }
  },
  methods: {
-    clickCover() {
-      if (this.expandOnClick && this.libraryItem) {
-        this.$store.commit('globals/setRawCoverPreviewModal', this.rawCoverUrl)
-      }
-    },
    setCoverBg() {
      if (this.$refs.coverBg) {
        this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`
--- a/client/components/covers/CollectionCover.vue
+++ b/client/components/covers/CollectionCover.vue
@ -1,25 +1,25 @@
 <template>
-  <div class="relative rounded-xs overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
-    <!-- <div class="absolute top-0 left-0 w-full h-full rounded-xs overflow-hidden z-10">
-      <div class="w-full h-full border border-white/10" />
+  <div class="relative rounded-sm overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
+    <!-- <div class="absolute top-0 left-0 w-full h-full rounded-sm overflow-hidden z-10">
+      <div class="w-full h-full border border-white border-opacity-10" />
    </div> -->

-    <div v-if="hasOwnCover" class="w-full h-full relative rounded-xs">
+    <div v-if="hasOwnCover" class="w-full h-full relative rounded-sm">
      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
        <div class="w-full h-full z-0" ref="coverBg" />
      </div>
      <img ref="cover" :src="fullCoverUrl" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
    </div>
-    <div v-else-if="books.length" class="flex justify-center h-full relative bg-primary/95 rounded-xs">
-      <div class="absolute top-0 left-0 w-full h-full bg-gray-400/5" />
+    <div v-else-if="books.length" class="flex justify-center h-full relative bg-primary bg-opacity-95 rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />

      <covers-book-cover :library-item="books[0]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
      <covers-book-cover v-if="books.length > 1" :library-item="books[1]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
    </div>
-    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-xs">
-      <div class="absolute top-0 left-0 w-full h-full bg-gray-400/5" />
+    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />

-      <p class="text-white/60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
+      <p class="font-book text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
    </div>
  </div>
 </template>
@ -62,4 +62,4 @@ export default {
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/covers/GroupCover.vue
+++ b/client/components/covers/GroupCover.vue
@ -17,6 +17,7 @@ export default {
    },
    width: Number,
    height: Number,
+    groupTo: String,
    bookCoverAspectRatio: Number
  },
  data() {
@ -58,6 +59,9 @@ export default {
      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
      return this.width / 240
    },
+    showExperimentalFeatures() {
+      return this.store.state.showExperimentalFeatures
+    },
    store() {
      return this.$store || this.$nuxt.$store
    },
@ -109,7 +113,7 @@ export default {

      if (showCoverBg) {
        var coverbgwrapper = document.createElement('div')
-        coverbgwrapper.className = 'absolute top-0 left-0 w-full h-full overflow-hidden rounded-xs bg-primary'
+        coverbgwrapper.className = 'absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary'

        var coverbg = document.createElement('div')
        coverbg.className = 'absolute cover-bg'
@ -121,8 +125,6 @@ export default {

      var img = document.createElement('img')
      img.src = src
-      img.alt = `${this.name}, ${this.$strings.LabelCover}`
-      img.ariaHidden = true
      img.className = 'absolute top-0 left-0 w-full h-full'
      img.style.objectFit = showCoverBg ? 'contain' : 'cover'

@ -140,7 +142,7 @@ export default {

      var innerP = document.createElement('p')
      innerP.textContent = this.name
-      innerP.className = 'text-sm text-white'
+      innerP.className = 'text-sm font-book text-white'
      imgdiv.appendChild(innerP)

      return imgdiv
--- a/client/components/covers/HoverBookCover.vue
+++ b/client/components/covers/HoverBookCover.vue
@ -0,0 +1,41 @@
+<template>
+  <div ref="container" @mouseover="mouseover" @mouseleave="mouseleave" class="relative">
+    <covers-book-cover :width="24" :audiobook="audiobook" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    placeholderUrl() {
+      return '/book_placeholder.jpg'
+    },
+    fullCoverUrl() {
+      return this.$store.getters['globals/getLibraryItemCoverSrc'](this.audiobook, this.placeholderUrl)
+    },
+    hasCover() {
+      return !!this.audiobook.book.cover
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/covers/PlaylistCover.vue
+++ b/client/components/covers/PlaylistCover.vue
@ -1,51 +0,0 @@
-<template>
-  <div class="relative rounded-xs overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
-    <div v-if="items.length" class="flex flex-wrap justify-center h-full relative bg-primary/95 rounded-xs">
-      <div class="absolute top-0 left-0 w-full h-full bg-gray-400/5" />
-      <covers-book-cover v-for="(li, index) in libraryItemCovers" :key="index" :library-item="li" :width="itemCoverWidth" :book-cover-aspect-ratio="1" />
-    </div>
-    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-xs">
-      <div class="absolute top-0 left-0 w-full h-full bg-gray-400/5" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    width: Number,
-    height: Number
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    sizeMultiplier() {
-      return this.width / (120 * 1.6 * 2)
-    },
-    itemCoverWidth() {
-      if (this.libraryItemCovers.length === 1) return this.width
-      return this.width / 2
-    },
-    libraryItemCovers() {
-      if (!this.items.length) return []
-      if (this.items.length === 1) return [this.items[0].libraryItem]
-
-      const covers = []
-      for (let i = 0; i < 4; i++) {
-        let index = i % this.items.length
-        if (this.items.length === 2 && i >= 2) index = (i + 1) % 2 // for playlists with 2 items show covers in checker pattern
-
-        covers.push(this.items[index].libraryItem)
-      }
-      return covers
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/covers/PreviewCover.vue
+++ b/client/components/covers/PreviewCover.vue
@ -1,24 +1,22 @@
 <template>
-  <div class="relative rounded-xs" :style="{ height: width * bookCoverAspectRatio + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
-    <div class="w-full h-full relative overflow-hidden">
-      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xs bg-primary">
+  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * bookCoverAspectRatio + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
+    <div class="w-full h-full relative">
+      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
        <div class="absolute cover-bg" ref="coverBg" />
      </div>
-      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
+      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />

-      <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-xs rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">
-        <span class="material-symbols" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
+      <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-sm rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">
+        <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
      </a>
    </div>

    <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
      <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
-        <img v-if="width > 100" src="/Logo.png" class="mb-2" :style="{ height: 40 * sizeMultiplier + 'px' }" />
-        <p class="text-center text-error" :style="{ fontSize: invalidCoverFontSize + 'rem' }">Invalid Cover</p>
+        <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
+        <p class="text-center font-book text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
      </div>
    </div>
-
-    <p v-if="!imageFailed && showResolution && resolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
  </div>
 </template>

@ -31,11 +29,7 @@ export default {
      default: 120
    },
    showOpenNewTab: Boolean,
-    bookCoverAspectRatio: Number,
-    showResolution: {
-      type: Boolean,
-      default: true
-    }
+    bookCoverAspectRatio: Number
  },
  data() {
    return {
@ -58,19 +52,8 @@ export default {
    sizeMultiplier() {
      return this.width / 120
    },
-    invalidCoverFontSize() {
-      return Math.max(this.sizeMultiplier * 0.8, 0.5)
-    },
    placeholderCoverPadding() {
      return 0.8 * this.sizeMultiplier
-    },
-    resolution() {
-      if (!this.naturalWidth || !this.naturalHeight) return null
-      return `${this.naturalWidth}×${this.naturalHeight}px`
-    },
-    placeholderUrl() {
-      const store = this.$store || this.$nuxt.$store
-      return store.getters['globals/getPlaceholderCoverSrc']
    }
  },
  methods: {
@ -80,7 +63,7 @@ export default {
      }
    },
    imageLoaded() {
-      if (this.$refs.cover && this.src !== this.placeholderUrl) {
+      if (this.$refs.cover) {
        var { naturalWidth, naturalHeight } = this.$refs.cover
        this.naturalHeight = naturalHeight
        this.naturalWidth = naturalWidth
--- a/client/components/icons/audiobook-svg.vue
+++ b/client/components/icons/audiobook-svg.vue
@ -0,0 +1,23 @@
+<template>
+  <svg fill="currentColor" class="h-full w-full p-px" viewBox="0 0 1978.03 2349.44">
+    <path
+      d="M2519.5,1438.39c-12.13-10.1-31-25-56.57-42.62V1197.31c0-505.94-410.15-916.09-916.1-916.09h0c-505.94,0-916.09,410.15-916.09,916.09v198.46c-25.57,17.66-44.44,32.52-56.57,42.62a45.45,45.45,0,0,0-16.35,34.95v237.74a45.45,45.45,0,0,0,16.35,35c28.28,23.54,93.18,72.92,194.22,123.55v23.11c0,62.32,40.21,112.85,89.8,112.85h0c49.59,0,89.8-50.53,89.8-112.85V1322.51c0-62.33-40.21-112.86-89.8-112.86h0c-47.51,0-86.4,46.38-89.58,105.07l-.22.11V1197.31c0-429.92,348.52-778.43,778.44-778.43h0c429.92,0,778.44,348.51,778.44,778.43v117.52l-.22-.11c-3.18-58.69-42.06-105.07-89.58-105.07h0c-49.59,0-89.79,50.53-89.79,112.86v570.18c0,62.32,40.2,112.85,89.79,112.85h0c49.6,0,89.8-50.53,89.8-112.85v-23.11c101.05-50.63,165.95-100,194.23-123.55a45.48,45.48,0,0,0,16.35-35V1473.34A45.48,45.48,0,0,0,2519.5,1438.39Z"
+      transform="translate(-557.82 -281.22)"
+    />
+    <path d="M1227.4,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56A108.47,108.47,0,0,0,1227.4,998.08H1115.33a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1047.75,1289.38H1295v25.83H1047.75Z" transform="translate(-557.82 -281.22)" />
+    <path d="M1602.87,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56a108.47,108.47,0,0,0-108.47-108.48H1490.8a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1423.22,1289.38h247.22v25.83H1423.22Z" transform="translate(-557.82 -281.22)" />
+    <path d="M1978.34,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56a108.47,108.47,0,0,0-108.47-108.48H1866.27a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1798.69,1289.38h247.22v25.83H1798.69Z" transform="translate(-557.82 -281.22)" />
+    <rect x="180.05" y="2185.95" width="1617.93" height="163.49" rx="81.74" />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/icons/book-svg.vue
+++ b/client/components/icons/book-svg.vue
@ -0,0 +1,16 @@
+<template>
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/icons/comic-svg.vue
+++ b/client/components/icons/comic-svg.vue
@ -0,0 +1,16 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M6,19L9,15.14L11.14,17.72L14.14,13.86L18,19H6M6,4H11V12L8.5,10.5L6,12M18,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V4A2,2 0 0,0 18,2Z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/icons/database-svg.vue
+++ b/client/components/icons/database-svg.vue
@ -0,0 +1,16 @@
+<template>
+  <svg class="p-px" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/icons/podcast-svg.vue
+++ b/client/components/icons/podcast-svg.vue
@ -0,0 +1,19 @@
+<template>
+  <svg class="p-px" viewBox="0 0 122.877 120.596">
+    <path
+      fill="currentColor"
+      d="M68.925,69.906v50.689H53.953V69.906c-4.918-2.662-8.259-7.867-8.259-13.854 c0-8.694,7.05-15.744,15.745-15.744c8.694,0,15.745,7.05,15.745,15.744C77.184,62.039,73.843,67.244,68.925,69.906L68.925,69.906z M39.32,11.165c2.916-1.438,4.111-4.969,2.673-7.882c-1.438-2.914-4.966-4.111-7.88-2.674C22.213,6.479,12.958,16.19,7.11,27.625 c-4.32,8.445-6.783,17.842-7.08,27.325c-0.299,9.563,1.587,19.223,5.973,28.114c5.401,10.953,14.558,20.695,28.039,27.592 c2.889,1.477,6.429,0.33,7.905-2.559c1.477-2.889,0.331-6.428-2.558-7.904c-11.037-5.645-18.486-13.525-22.833-22.334 c-3.506-7.111-5.014-14.857-4.774-22.539c0.243-7.757,2.256-15.442,5.79-22.348C22.304,23.721,29.76,15.879,39.32,11.165 L39.32,11.165z M88.765,0.608c-2.914-1.438-6.443-0.24-7.881,2.674c-1.438,2.914-0.242,6.445,2.674,7.882 c9.561,4.715,17.017,12.556,21.747,21.808c3.533,6.905,5.547,14.59,5.789,22.348c0.24,7.682-1.268,15.428-4.773,22.539 c-4.347,8.809-11.796,16.689-22.833,22.334c-2.889,1.477-4.034,5.016-2.558,7.904c1.476,2.889,5.016,4.035,7.905,2.559 c13.48-6.896,22.638-16.639,28.039-27.592c4.386-8.891,6.272-18.551,5.973-28.114c-0.297-9.483-2.76-18.88-7.079-27.325 C109.919,16.19,100.665,6.479,88.765,0.608L88.765,0.608z M82.791,26.505c-2.195-1.581-5.256-1.082-6.837,1.113 c-1.58,2.195-1.082,5.256,1.113,6.837c0.885,0.637,1.753,1.352,2.604,2.134c4.971,4.583,7.919,10.694,8.538,17.16 c0.626,6.524-1.111,13.437-5.518,19.552c-0.748,1.039-1.61,2.092-2.585,3.15c-1.835,1.992-1.708,5.098,0.287,6.932 c1.994,1.834,5.099,1.705,6.933-0.287c1.18-1.279,2.286-2.641,3.315-4.072c5.862-8.139,8.166-17.4,7.322-26.197 c-0.848-8.853-4.871-17.208-11.648-23.457C85.249,28.387,84.074,27.431,82.791,26.505L82.791,26.505z M45.81,34.458 c2.195-1.581,2.694-4.642,1.113-6.837c-1.581-2.195-4.642-2.694-6.837-1.114c-1.284,0.926-2.458,1.882-3.524,2.864 c-6.778,6.25-10.801,14.604-11.649,23.457c-0.844,8.796,1.46,18.06,7.323,26.199c1.031,1.43,2.136,2.791,3.315,4.07 c1.834,1.992,4.939,2.121,6.932,0.287c1.996-1.834,2.123-4.939,0.288-6.932c-0.975-1.059-1.837-2.111-2.585-3.15 c-4.406-6.115-6.144-13.027-5.518-19.551c0.619-6.465,3.567-12.577,8.538-17.16C44.058,35.81,44.926,35.095,45.81,34.458 L45.81,34.458z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/modals/AccountModal.vue
+++ b/client/components/modals/AccountModal.vue
@ -2,128 +2,99 @@
  <modals-modal ref="modal" v-model="show" name="account" :width="800" :height="'unset'" :processing="processing">
    <template #outer>
      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ title }}</p>
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
      </div>
    </template>
    <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
+      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
        <div class="w-full p-8">
          <div class="flex py-2">
            <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model.trim="newUser.username" :label="$strings.LabelUsername" />
+              <ui-text-input-with-label v-model="newUser.username" label="Username" />
            </div>
            <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? $strings.LabelPassword : $strings.LabelChangePassword" type="password" />
-              <ui-text-input-with-label v-else v-model.trim="newUser.email" :label="$strings.LabelEmail" />
+              <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? 'Password' : 'Change Password'" type="password" />
            </div>
          </div>
          <div v-show="!isEditingRoot" class="flex py-2">
-            <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model.trim="newUser.email" :label="$strings.LabelEmail" />
-            </div>
            <div class="px-2 w-52">
-              <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" small @input="userTypeUpdated" />
+              <ui-dropdown v-model="newUser.type" label="Account Type" :disabled="isEditingRoot" :items="accountTypes" @input="userTypeUpdated" />
            </div>
-
+            <div class="flex-grow" />
            <div class="flex items-center pt-4 px-2">
-              <p class="px-3 font-semibold" id="user-enabled-toggle" :class="isEditingRoot ? 'text-gray-300' : ''">{{ $strings.LabelEnable }}</p>
-              <ui-toggle-switch labeledBy="user-enabled-toggle" v-model="newUser.isActive" :disabled="isEditingRoot" />
+              <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">Is Active</p>
+              <ui-toggle-switch v-model="newUser.isActive" :disabled="isEditingRoot" />
            </div>
          </div>

          <div v-if="!isEditingRoot && newUser.permissions" class="w-full border-t border-b border-black-200 py-2 px-3 mt-4">
-            <p class="text-lg mb-2 font-semibold">{{ $strings.HeaderPermissions }}</p>
+            <p class="text-lg mb-2 font-semibold">Permissions</p>
            <div class="flex items-center my-2 max-w-md">
              <div class="w-1/2">
-                <p id="download-permissions-toggle">{{ $strings.LabelPermissionsDownload }}</p>
+                <p>Can Download</p>
              </div>
              <div class="w-1/2">
-                <ui-toggle-switch labeledBy="download-permissions-toggle" v-model="newUser.permissions.download" />
+                <ui-toggle-switch v-model="newUser.permissions.download" />
              </div>
            </div>

            <div class="flex items-center my-2 max-w-md">
              <div class="w-1/2">
-                <p id="update-permissions-toggle">{{ $strings.LabelPermissionsUpdate }}</p>
+                <p>Can Update</p>
              </div>
              <div class="w-1/2">
-                <ui-toggle-switch labeledBy="update-permissions-toggle" v-model="newUser.permissions.update" />
+                <ui-toggle-switch v-model="newUser.permissions.update" />
              </div>
            </div>

            <div class="flex items-center my-2 max-w-md">
              <div class="w-1/2">
-                <p id="delete-permissions-toggle">{{ $strings.LabelPermissionsDelete }}</p>
+                <p>Can Delete</p>
              </div>
              <div class="w-1/2">
-                <ui-toggle-switch labeledBy="delete-permissions-toggle" v-model="newUser.permissions.delete" />
+                <ui-toggle-switch v-model="newUser.permissions.delete" />
              </div>
            </div>

            <div class="flex items-center my-2 max-w-md">
              <div class="w-1/2">
-                <p id="upload-permissions-toggle">{{ $strings.LabelPermissionsUpload }}</p>
+                <p>Can Upload</p>
              </div>
              <div class="w-1/2">
-                <ui-toggle-switch labeledBy="upload-permissions-toggle" v-model="newUser.permissions.upload" />
+                <ui-toggle-switch v-model="newUser.permissions.upload" />
              </div>
            </div>

            <div class="flex items-center my-2 max-w-md">
              <div class="w-1/2">
-                <p id="ereader-permissions-toggle">{{ $strings.LabelPermissionsCreateEreader }}</p>
+                <p>Can Access All Libraries</p>
              </div>
              <div class="w-1/2">
-                <ui-toggle-switch labeledBy="ereader-permissions-toggle" v-model="newUser.permissions.createEreader" />
-              </div>
-            </div>
-
-            <div class="flex items-center my-2 max-w-md">
-              <div class="w-1/2">
-                <p id="explicit-content-permissions-toggle">{{ $strings.LabelPermissionsAccessExplicitContent }}</p>
-              </div>
-              <div class="w-1/2">
-                <ui-toggle-switch labeledBy="explicit-content-permissions-toggle" v-model="newUser.permissions.accessExplicitContent" />
-              </div>
-            </div>
-
-            <div class="flex items-center my-2 max-w-md">
-              <div class="w-1/2">
-                <p id="access-all-libs--permissions-toggle">{{ $strings.LabelPermissionsAccessAllLibraries }}</p>
-              </div>
-              <div class="w-1/2">
-                <ui-toggle-switch labeledBy="access-all-libs--permissions-toggle" v-model="newUser.permissions.accessAllLibraries" @input="accessAllLibrariesToggled" />
+                <ui-toggle-switch v-model="newUser.permissions.accessAllLibraries" @input="accessAllLibrariesToggled" />
              </div>
            </div>

            <div v-if="!newUser.permissions.accessAllLibraries" class="my-4">
-              <ui-multi-select-dropdown v-model="newUser.librariesAccessible" :items="libraryItems" :label="$strings.LabelLibrariesAccessibleToUser" />
+              <ui-multi-select-dropdown v-model="newUser.librariesAccessible" :items="libraryItems" label="Libraries Accessible to User" />
            </div>

            <div class="flex items-cen~ter my-2 max-w-md">
              <div class="w-1/2">
-                <p>{{ $strings.LabelPermissionsAccessAllTags }}</p>
+                <p>Can Access All Tags</p>
              </div>
              <div class="w-1/2">
                <ui-toggle-switch v-model="newUser.permissions.accessAllTags" @input="accessAllTagsToggled" />
              </div>
            </div>
            <div v-if="!newUser.permissions.accessAllTags" class="my-4">
-              <div class="flex items-center">
-                <ui-multi-select-dropdown v-model="newUser.itemTagsSelected" :items="itemTags" :label="tagsSelectionText" />
-                <div class="flex items-center pt-4 px-2">
-                  <p class="px-3 font-semibold" id="selected-tags-not-accessible--permissions-toggle">{{ $strings.LabelInvert }}</p>
-                  <ui-toggle-switch labeledBy="selected-tags-not-accessible--permissions-toggle" v-model="newUser.permissions.selectedTagsNotAccessible" />
-                </div>
-              </div>
+              <ui-multi-select-dropdown v-model="newUser.itemTagsAccessible" :items="itemTags" label="Tags Accessible to User" />
            </div>
          </div>

          <div class="flex pt-4 px-2">
-            <ui-btn v-if="hasOpenIDLink" small :loading="unlinkingFromOpenID" color="bg-primary" type="button" class="mr-2" @click.stop="unlinkOpenID">{{ $strings.ButtonUnlinkOpenId }}</ui-btn>
-            <ui-btn v-if="isEditingRoot" small class="flex items-center" to="/account">{{ $strings.ButtonChangeRootPassword }}</ui-btn>
-            <div class="grow" />
-            <ui-btn color="bg-success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+            <ui-btn v-if="isEditingRoot" to="/account">Change Root Password</ui-btn>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">Submit</ui-btn>
          </div>
        </div>
      </div>
@ -145,14 +116,28 @@ export default {
      processing: false,
      newUser: {},
      isNew: true,
+      accountTypes: [
+        {
+          text: 'Guest',
+          value: 'guest'
+        },
+        {
+          text: 'User',
+          value: 'user'
+        },
+        {
+          text: 'Admin',
+          value: 'admin'
+        }
+      ],
      tags: [],
-      loadingTags: false,
-      unlinkingFromOpenID: false
+      loadingTags: false
    }
  },
  watch: {
    show: {
      handler(newVal) {
+        console.log('accoutn modal show change', newVal)
        if (newVal) {
          this.init()
        }
@ -168,30 +153,11 @@ export default {
        this.$emit('input', val)
      }
    },
-    accountTypes() {
-      return [
-        {
-          text: this.$strings.LabelAccountTypeGuest,
-          value: 'guest'
-        },
-        {
-          text: this.$strings.LabelAccountTypeUser,
-          value: 'user'
-        },
-        {
-          text: this.$strings.LabelAccountTypeAdmin,
-          value: 'admin'
-        }
-      ]
-    },
-    user() {
-      return this.$store.state.user.user
-    },
    title() {
-      return this.isNew ? this.$strings.HeaderNewAccount : this.$strings.HeaderUpdateAccount
+      return this.isNew ? 'Add New Account' : `Update ${(this.account || {}).username}`
    },
    isEditingRoot() {
-      return this.account?.type === 'root'
+      return this.account && this.account.type === 'root'
    },
    libraries() {
      return this.$store.state.libraries.libraries
@ -206,12 +172,6 @@ export default {
          value: t
        }
      })
-    },
-    tagsSelectionText() {
-      return this.newUser.permissions.selectedTagsNotAccessible ? this.$strings.LabelTagsNotAccessibleToUser : this.$strings.LabelTagsAccessibleToUser
-    },
-    hasOpenIDLink() {
-      return !!this.account?.hasOpenIDLink
    }
  },
  methods: {
@ -219,45 +179,17 @@ export default {
      // Force close when navigating - used in UsersTable
      if (this.$refs.modal) this.$refs.modal.setHide()
    },
-    unlinkOpenID() {
-      const payload = {
-        message: this.$strings.MessageConfirmUnlinkOpenId,
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.unlinkingFromOpenID = true
-            this.$axios
-              .$patch(`/api/users/${this.account.id}/openid-unlink`)
-              .then(() => {
-                this.$toast.success(this.$strings.ToastUnlinkOpenIdSuccess)
-                this.show = false
-              })
-              .catch((error) => {
-                console.error('Failed to unlink user from OpenID', error)
-                this.$toast.error(this.$strings.ToastUnlinkOpenIdFailed)
-              })
-              .finally(() => {
-                this.unlinkingFromOpenID = false
-              })
-          }
-        },
-        type: 'yesNo'
-      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
    accessAllTagsToggled(val) {
-      if (val) {
-        if (this.newUser.itemTagsSelected?.length) {
-          this.newUser.itemTagsSelected = []
-        }
-        this.newUser.permissions.selectedTagsNotAccessible = false
+      if (val && this.newUser.itemTagsAccessible.length) {
+        this.newUser.itemTagsAccessible = []
      }
    },
    fetchAllTags() {
      this.loadingTags = true
      this.$axios
        .$get(`/api/tags`)
-        .then((res) => {
-          this.tags = res.tags
+        .then((tags) => {
+          this.tags = tags
          this.loadingTags = false
        })
        .catch((error) => {
@ -274,15 +206,15 @@ export default {
    },
    submitForm() {
      if (!this.newUser.username) {
-        this.$toast.error(this.$strings.ToastNewUserUsernameError)
+        this.$toast.error('Enter a username')
        return
      }
      if (!this.newUser.permissions.accessAllLibraries && !this.newUser.librariesAccessible.length) {
-        this.$toast.error(this.$strings.ToastNewUserLibraryError)
+        this.$toast.error('Must select at least one library')
        return
      }
-      if (!this.newUser.permissions.accessAllTags && !this.newUser.itemTagsSelected.length) {
-        this.$toast.error(this.$strings.ToastNewUserTagError)
+      if (!this.newUser.permissions.accessAllTags && !this.newUser.itemTagsAccessible.length) {
+        this.$toast.error('Must select at least one tag')
        return
      }

@ -300,21 +232,16 @@ export default {
      if (account.type === 'root' && !account.isActive) return

      this.processing = true
+      console.log('Calling update', account)
      this.$axios
        .$patch(`/api/users/${this.account.id}`, account)
        .then((data) => {
          this.processing = false
          if (data.error) {
-            this.$toast.error(`${this.$strings.ToastFailedToUpdate}: ${data.error}`)
+            this.$toast.error(`Failed to update account: ${data.error}`)
          } else {
            console.log('Account updated', data.user)
-
-            if (data.user.id === this.user.id && data.user.accessToken !== this.user.accessToken) {
-              console.log('Current user access token was updated')
-              this.$store.commit('user/setAccessToken', data.user.accessToken)
-            }
-
-            this.$toast.success(this.$strings.ToastAccountUpdateSuccess)
+            this.$toast.success('Account updated')
            this.show = false
          }
        })
@ -322,12 +249,12 @@ export default {
          this.processing = false
          console.error('Failed to update account', error)
          var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(errMsg || this.$strings.ToastFailedToUpdate)
+          this.$toast.error(errMsg || 'Failed to update account')
        })
    },
    submitCreateAccount() {
      if (!this.newUser.password) {
-        this.$toast.error(this.$strings.ToastNewUserPasswordError)
+        this.$toast.error('Must have a password, only root user can have an empty password')
        return
      }

@ -338,9 +265,9 @@ export default {
        .then((data) => {
          this.processing = false
          if (data.error) {
-            this.$toast.error(this.$strings.ToastNewUserCreatedFailed + ': ' + data.error)
+            this.$toast.error(`Failed to create account: ${data.error}`)
          } else {
-            this.$toast.success(this.$strings.ToastNewUserCreatedSuccess)
+            this.$toast.success('New account created')
            this.show = false
          }
        })
@ -351,38 +278,37 @@ export default {
          this.$toast.error(errMsg || 'Failed to create account')
        })
    },
+    toggleActive() {
+      this.newUser.isActive = !this.newUser.isActive
+    },
    userTypeUpdated(type) {
      this.newUser.permissions = {
        download: type !== 'guest',
        update: type === 'admin',
        delete: type === 'admin',
        upload: type === 'admin',
-        accessExplicitContent: type === 'admin',
        accessAllLibraries: true,
-        accessAllTags: true,
-        selectedTagsNotAccessible: false,
-        createEreader: type === 'admin'
+        accessAllTags: true
      }
    },
    init() {
      this.fetchAllTags()
-      this.isNew = !this.account

+      this.isNew = !this.account
      if (this.account) {
+        console.log(this.account)
        this.newUser = {
          username: this.account.username,
-          email: this.account.email,
          password: this.account.password,
          type: this.account.type,
          isActive: this.account.isActive,
          permissions: { ...this.account.permissions },
          librariesAccessible: [...(this.account.librariesAccessible || [])],
-          itemTagsSelected: [...(this.account.itemTagsSelected || [])]
+          itemTagsAccessible: [...(this.account.itemTagsAccessible || [])]
        }
      } else {
        this.newUser = {
          username: null,
-          email: null,
          password: null,
          type: 'user',
          isActive: true,
@ -392,13 +318,9 @@ export default {
            delete: false,
            upload: false,
            accessAllLibraries: true,
-            accessAllTags: true,
-            accessExplicitContent: false,
-            selectedTagsNotAccessible: false,
-            createEreader: false
+            accessAllTags: true
          },
-          librariesAccessible: [],
-          itemTagsSelected: []
+          librariesAccessible: []
        }
      }
    }
--- a/client/components/modals/AddCustomMetadataProviderModal.vue
+++ b/client/components/modals/AddCustomMetadataProviderModal.vue
@ -1,109 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="custom-metadata-provider" :width="600" :height="'unset'" :processing="processing">
-    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ $strings.HeaderAddCustomMetadataProvider }}</p>
-      </div>
-    </template>
-    <form @submit.prevent="submitForm">
-      <div class="px-4 w-full flex items-center text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
-        <div class="w-full p-8">
-          <div class="flex mb-2">
-            <div class="w-3/4 p-1">
-              <ui-text-input-with-label v-model="newName" :label="$strings.LabelName" trim-whitespace />
-            </div>
-            <div class="w-1/4 p-1">
-              <ui-text-input-with-label value="Book" readonly :label="$strings.LabelMediaType" />
-            </div>
-          </div>
-          <div class="w-full mb-2 p-1">
-            <ui-text-input-with-label v-model="newUrl" label="URL" trim-whitespace />
-          </div>
-          <div class="w-full mb-2 p-1">
-            <ui-text-input-with-label v-model="newAuthHeaderValue" :label="$strings.LabelProviderAuthorizationValue" type="password" />
-          </div>
-          <div class="flex px-1 pt-4">
-            <div class="grow" />
-            <ui-btn color="bg-success" type="submit">{{ $strings.ButtonAdd }}</ui-btn>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean
-  },
-  data() {
-    return {
-      processing: false,
-      newName: '',
-      newUrl: '',
-      newAuthHeaderValue: ''
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  },
-  methods: {
-    async submitForm() {
-      // Remove focus from active input
-      document.activeElement?.blur?.()
-      await this.$nextTick()
-
-      if (!this.newName || !this.newUrl) {
-        this.$toast.error(this.$strings.ToastProviderNameAndUrlRequired)
-        return
-      }
-
-      this.processing = true
-      this.$axios
-        .$post('/api/custom-metadata-providers', {
-          name: this.newName,
-          url: this.newUrl,
-          mediaType: 'book', // Currently only supporting book mediaType
-          authHeaderValue: this.newAuthHeaderValue
-        })
-        .then((data) => {
-          this.$emit('added', data.provider)
-          this.$toast.success(this.$strings.ToastProviderCreatedSuccess)
-          this.show = false
-        })
-        .catch((error) => {
-          const errorMsg = error.response?.data || 'Unknown error'
-          console.error('Failed to add provider', error)
-          this.$toast.error(this.$strings.ToastProviderCreatedFailed + ': ' + errorMsg)
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    init() {
-      this.processing = false
-      this.newName = ''
-      this.newUrl = ''
-      this.newAuthHeaderValue = ''
-    }
-  },
-  mounted() {}
-}
-</script>
--- a/client/components/modals/ApiKeyCreatedModal.vue
+++ b/client/components/modals/ApiKeyCreatedModal.vue
@ -1,60 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="api-key-created" :width="800" :height="'unset'" persistent>
-    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ title }}</p>
-      </div>
-    </template>
-    <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 200px; max-height: 80vh">
-        <div class="w-full p-8">
-          <p class="text-lg text-white mb-4">{{ $getString('LabelApiKeyCreated', [apiKeyName]) }}</p>
-
-          <p class="text-lg text-white mb-4">{{ $strings.LabelApiKeyCreatedDescription }}</p>
-
-          <ui-text-input label="API Key" :value="apiKeyKey" readonly show-copy />
-
-          <div class="flex justify-end mt-4">
-            <ui-btn color="bg-primary" @click="show = false">{{ $strings.ButtonClose }}</ui-btn>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    apiKey: {
-      type: Object,
-      default: () => null
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    title() {
-      return this.$strings.HeaderNewApiKey
-    },
-    apiKeyName() {
-      return this.apiKey?.name || ''
-    },
-    apiKeyKey() {
-      return this.apiKey?.apiKey || ''
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
--- a/client/components/modals/ApiKeyModal.vue
+++ b/client/components/modals/ApiKeyModal.vue
@ -1,198 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="api-key" :width="800" :height="'unset'" :processing="processing">
-    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">{{ title }}</p>
-      </div>
-    </template>
-    <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
-        <div class="w-full p-8">
-          <div class="flex py-2">
-            <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model.trim="newApiKey.name" :readonly="!isNew" :label="$strings.LabelName" />
-            </div>
-            <div v-if="isNew" class="w-1/2 px-2">
-              <ui-text-input-with-label v-model.trim="newApiKey.expiresIn" :label="$strings.LabelExpiresInSeconds" type="number" :min="0" />
-            </div>
-          </div>
-          <div class="flex items-center pt-4 pb-2 gap-2">
-            <div class="flex items-center px-2">
-              <p class="px-3 font-semibold" id="user-enabled-toggle">{{ $strings.LabelEnable }}</p>
-              <ui-toggle-switch :disabled="isExpired && !apiKey.isActive" labeledBy="user-enabled-toggle" v-model="newApiKey.isActive" />
-            </div>
-            <div v-if="isExpired" class="px-2">
-              <p class="text-sm text-error">{{ $strings.LabelExpired }}</p>
-            </div>
-          </div>
-
-          <div class="w-full border-t border-b border-black-200 py-4 px-3 mt-4">
-            <p class="text-lg mb-2 font-semibold">{{ $strings.LabelApiKeyUser }}</p>
-            <p class="text-sm mb-2 text-gray-400">{{ $strings.LabelApiKeyUserDescription }}</p>
-            <ui-select-input v-model="newApiKey.userId" :disabled="isExpired && !apiKey.isActive" :items="userItems" :placeholder="$strings.LabelSelectUser" :label="$strings.LabelApiKeyUser" label-hidden />
-          </div>
-
-          <div class="flex pt-4 px-2">
-            <div class="grow" />
-            <ui-btn color="bg-success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    apiKey: {
-      type: Object,
-      default: () => null
-    },
-    users: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      processing: false,
-      newApiKey: {},
-      isNew: true
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    title() {
-      return this.isNew ? this.$strings.HeaderNewApiKey : this.$strings.HeaderUpdateApiKey
-    },
-    userItems() {
-      return this.users
-        .filter((u) => {
-          // Only show root user if the current user is root
-          return u.type !== 'root' || this.$store.getters['user/getIsRoot']
-        })
-        .map((u) => ({ text: u.username, value: u.id, subtext: u.type }))
-    },
-    isExpired() {
-      if (!this.apiKey || !this.apiKey.expiresAt) return false
-
-      return new Date(this.apiKey.expiresAt).getTime() < Date.now()
-    }
-  },
-  methods: {
-    submitForm() {
-      if (!this.newApiKey.name) {
-        this.$toast.error(this.$strings.ToastNameRequired)
-        return
-      }
-
-      if (!this.newApiKey.userId) {
-        this.$toast.error(this.$strings.ToastNewApiKeyUserError)
-        return
-      }
-
-      if (this.isNew) {
-        this.submitCreateApiKey()
-      } else {
-        this.submitUpdateApiKey()
-      }
-    },
-    submitUpdateApiKey() {
-      if (this.newApiKey.isActive === this.apiKey.isActive && this.newApiKey.userId === this.apiKey.userId) {
-        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
-        this.show = false
-        return
-      }
-
-      const apiKey = {
-        isActive: this.newApiKey.isActive,
-        userId: this.newApiKey.userId
-      }
-
-      this.processing = true
-      this.$axios
-        .$patch(`/api/api-keys/${this.apiKey.id}`, apiKey)
-        .then((data) => {
-          this.processing = false
-          if (data.error) {
-            this.$toast.error(`${this.$strings.ToastFailedToUpdate}: ${data.error}`)
-          } else {
-            this.show = false
-            this.$emit('updated', data.apiKey)
-          }
-        })
-        .catch((error) => {
-          this.processing = false
-          console.error('Failed to update apiKey', error)
-          var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(errMsg || this.$strings.ToastFailedToUpdate)
-        })
-    },
-    submitCreateApiKey() {
-      const apiKey = { ...this.newApiKey }
-
-      if (this.newApiKey.expiresIn) {
-        apiKey.expiresIn = parseInt(this.newApiKey.expiresIn)
-      } else {
-        delete apiKey.expiresIn
-      }
-
-      this.processing = true
-      this.$axios
-        .$post('/api/api-keys', apiKey)
-        .then((data) => {
-          this.processing = false
-          if (data.error) {
-            this.$toast.error(this.$strings.ToastFailedToCreate + ': ' + data.error)
-          } else {
-            this.show = false
-            this.$emit('created', data.apiKey)
-          }
-        })
-        .catch((error) => {
-          this.processing = false
-          console.error('Failed to create apiKey', error)
-          var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(errMsg || this.$strings.ToastFailedToCreate)
-        })
-    },
-    init() {
-      this.isNew = !this.apiKey
-
-      if (this.apiKey) {
-        this.newApiKey = {
-          name: this.apiKey.name,
-          isActive: this.apiKey.isActive,
-          userId: this.apiKey.userId
-        }
-      } else {
-        this.newApiKey = {
-          name: null,
-          expiresIn: null,
-          isActive: true,
-          userId: null
-        }
-      }
-    }
-  },
-  mounted() {}
-}
-</script>
--- a/Show more
+++ b/Show more