2025-04-21 13:10:12 -04:00
492 changed files with 22636 additions and 39791 deletions
--- 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_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,25 +1,11 @@
-name: 'CodeQL'
+name: "CodeQL"

 on:
  push:
-    branches: ['master']
-    # Only build when files in these directories have been changed
-    paths:
-      - client/**
-      - server/**
-      - test/**
-      - index.js
-      - package.json
+    branches: [ 'master' ]
  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
+    branches: [ 'master' ]
  schedule:
    - cron: '16 5 * * 4'

@ -35,44 +21,45 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        language: ['javascript']
+        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
+    - name: Checkout repository
+      uses: actions/checkout@v3

-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
-        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.
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      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
+        # 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@v2

-      # ℹ️ 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
+    # 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@v2

-      #   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.
+    # ℹ️ 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

-      # - run: |
-      #     echo "Run, Build Application using script"
-      #     ./location_of_script_within_repo/buildscript.sh
+    #   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.

-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
-        with:
-          category: '/language:${{matrix.language}}'
+    # - run: |
+    #     echo "Run, Build Application using script"
+    #     ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      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,4 +1,5 @@
 ---
+
 name: Build and Push Docker Image

 on:
@ -10,7 +11,7 @@ on:
        required: true
        default: 'latest'
  push:
-    branches: [main, master]
+    branches: [main,master]
    tags:
      - 'v*.*.*'
    # Only build when files in these directories have been changed
@ -22,16 +23,16 @@ on:

 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@v3

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v4
        with:
          images: advplyr/audiobookshelf,ghcr.io/${{ github.repository_owner }}/audiobookshelf
          tags: |
@ -39,13 +40,13 @@ jobs:
            type=semver,pattern={{version}}

      - name: Setup QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v2

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v2

      - name: Cache Docker layers
-        uses: actions/cache@v4
+        uses: actions/cache@v3
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
@ -53,23 +54,22 @@ jobs:
            ${{ runner.os }}-buildx-

      - name: Login to Dockerhub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_PASSWORD }}

      - name: Login to ghcr
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
        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@v3
        with:
          tags: ${{ github.event.inputs.tags || steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
          context: .
          platforms: linux/amd64,linux/arm64
          push: true
--- a/.github/workflows/i18n-integration.yml
+++ b/.github/workflows/i18n-integration.yml
@ -20,8 +20,7 @@ jobs:
      - name: Set up node
        uses: actions/setup-node@v4
        with:
-          node-version: 20
-          cache: 'npm'
+          node-version: '20'

      # The only argument is the `directory`, which is where the i18n files are
      # stored.
--- a/.github/workflows/integration-test.yml
+++ b/.github/workflows/integration-test.yml
@ -5,28 +5,20 @@ on:
  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
+      - uses: actions/checkout@v3

-      - name: setup node
-        uses: actions/setup-node@v4
+      - name: setup nade
+        uses: actions/setup-node@v3
        with:
          node-version: 20
-          cache: 'npm'

-      - name: install pkg (using yao-pkg fork for targeting node20)
+      - name: install pkg (using yao-pkg fork for targetting node20)
        run: npm install -g @yao-pkg/pkg

      - name: get client dependencies
--- a/.github/workflows/lint-openapi.yml
+++ b/.github/workflows/lint-openapi.yml
@ -1,15 +1,13 @@
 name: API linting

-# Run on pull requests or pushes when there is a change to any OpenAPI files in docs/
+# Run on pull requests or pushes when there is a change to the OpenAPI file
 on:
-  pull_request:
  push:
    paths:
-      - 'docs/**'
-
-# This action only needs read permissions
-permissions:
-  contents: read
+      - docs/
+  pull_request:
+    paths:
+      - docs/

 jobs:
  build:
@ -18,22 +16,15 @@ jobs:
      # 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/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@ -29,7 +29,6 @@ jobs:
        uses: actions/setup-node@v4
        with:
          node-version: 20
-          cache: 'npm'

      - name: Install dependencies
        run: npm ci
--- a/.gitignore
+++ b/.gitignore
@ -7,7 +7,6 @@
 /podcasts/
 /media/
 /metadata/
-/plugins/
 /client/.nuxt/
 /client/dist/
 /dist/
@ -17,7 +16,6 @@
 /ffmpeg*
 /ffprobe*
 /unicode*
-/libnusqlite3*

 sw.*
 .DS_STORE
--- a/38
+++ b/38
@ -11,45 +11,25 @@ FROM node:20-alpine
 ENV NODE_ENV=production

 RUN apk update && \
-  apk add --no-cache --update \
-  curl \
-  tzdata \
-  ffmpeg \
-  make \
-  python3 \
-  g++ \
-  tini \
-  unzip
+    apk add --no-cache --update \
+    curl \
+    tzdata \
+    ffmpeg \
+    make \
+    gcompat \
+    python3 \
+    g++ \
+    tini

 COPY --from=build /client/dist /client/dist
 COPY index.js package* /
 COPY server server

-ARG TARGETPLATFORM
-
-ENV NUSQLITE3_DIR="/usr/local/lib/nusqlite3"
-ENV NUSQLITE3_PATH="${NUSQLITE3_DIR}/libnusqlite3.so"
-
-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

 RUN apk del make python3 g++

 EXPOSE 80

-ENV PORT=80
-ENV CONFIG_PATH="/config"
-ENV METADATA_PATH="/metadata"
-ENV SOURCE="docker"
-
 ENTRYPOINT ["tini", "--"]
 CMD ["node", "index.js"]
--- a/client/assets/app.css
+++ b/client/assets/app.css
@ -5,7 +5,7 @@
@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%);
 }

@ -92,10 +92,11 @@
 }

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

+
 .tracksTable {
  border-collapse: collapse;
  width: 100%;
@ -176,10 +177,6 @@ input[type='number'] {
  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);
 }
@ -207,6 +204,7 @@ Bookshelf Label
  color: #fce3a6;
 }

+
 .cover-bg {
  width: calc(100% + 40px);
  height: calc(100% + 40px);
@ -249,4 +247,4 @@ Bookshelf Label

 .abs-btn:disabled::before {
  background-color: rgba(0, 0, 0, 0.2);
-}
+}
--- a/client/assets/defaultStyles.css
+++ b/client/assets/defaultStyles.css
@ -52,17 +52,4 @@
  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/fonts.css
+++ b/client/assets/fonts.css
@ -2,7 +2,14 @@
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
-  src: url(~static/fonts/MaterialSymbolsRounded.woff2) format('woff2');
+  src: url(~static/fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(~static/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2) format('woff2');
 }

 .material-symbols {
@ -25,6 +32,26 @@
    'FILL' 1
 }

+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  vertical-align: top;
+}
+
+.material-symbols-outlined.fill {
+  font-variation-settings:
+    'FILL' 1
+}
+
 /* cyrillic-ext */
@font-face {
  font-family: 'Source Sans Pro';
--- a/client/assets/tailwind.css
+++ b/client/assets/tailwind.css
@ -1,85 +1,3 @@
-@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;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/client/assets/trix.css
+++ b/client/assets/trix.css
@ -446,7 +446,7 @@ trix-editor .attachment__metadata .attachment__size {
 }

 .trix-content {
-  line-height: inherit;
+  line-height: 1.5;
 }

 .trix-content * {
@ -455,13 +455,6 @@ trix-editor .attachment__metadata .attachment__size {
  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;
@ -567,4 +560,4 @@ trix-editor .attachment__metadata .attachment__size {
 .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
-}
+}
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@ -1,6 +1,6 @@
 <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-60">
      <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" />
@ -13,10 +13,10 @@
        <ui-libraries-dropdown class="mr-2" />

        <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
-        <div class="grow" />
+        <div class="flex-grow" />

        <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-symbols-outlined text-2xl 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">
          <google-cast-launcher></google-cast-launcher>
@ -26,35 +26,35 @@

        <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>
+            <span class="material-symbols text-2xl" aria-label="User Stats" role="button">equalizer</span>
          </ui-tooltip>
        </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>
+            <span class="material-symbols text-2xl" aria-label="Upload Media" role="button">upload</span>
          </ui-tooltip>
        </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>
+            <span class="material-symbols text-2xl" aria-label="System Settings" role="button">settings</span>
          </ui-tooltip>
        </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 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-symbols text-xl 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">
+        <div class="flex-grow" />
+        <ui-btn v-if="!isPodcastLibrary && selectedMediaItemsArePlayable" color="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>
@ -66,11 +66,11 @@
        </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" />
+            <ui-icon-btn :disabled="processingBatch" 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-icon-btn :disabled="processingBatch" 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" />
@ -180,15 +180,6 @@ export default {
        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
    }
  },
@ -224,8 +215,6 @@ export default {
        this.batchAutoMatchClick()
      } else if (action === 'rescan') {
        this.batchRescan()
-      } else if (action === 'download') {
-        this.batchDownload()
      }
    },
    async batchRescan() {
@ -252,11 +241,6 @@ export default {
      }
      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)

@ -280,6 +264,7 @@ export default {
      libraryItems.forEach((item) => {
        let subtitle = ''
        if (item.mediaType === 'book') subtitle = item.media.metadata.authors.map((au) => au.name).join(', ')
+        else if (item.mediaType === 'music') subtitle = item.media.metadata.artists.join(', ')
        queueItems.push({
          libraryItemId: item.id,
          libraryId: item.libraryId,
@ -347,13 +332,13 @@ export default {
                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
              })
              .then(() => {
-                this.$toast.success(this.$strings.ToastBatchDeleteSuccess)
+                this.$toast.success('Batch delete success')
                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)
+                this.$toast.error('Batch delete failed')
              })
              .finally(() => {
                this.$store.commit('setProcessingBatch', false)
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@ -6,8 +6,8 @@
    <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>
      <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">{{ $strings.ButtonConfigureScanner }}</ui-btn>
+        <ui-btn color="success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
      </div>
    </div>
    <div v-else-if="loaded && !shelves.length && search" class="w-full h-40 flex items-center justify-center">
@ -17,7 +17,7 @@
    <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>
+          <p class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</p>
        </widgets-item-slider>
      </template>
    </div>
@ -347,13 +347,6 @@ 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) {
-        this.fetchCategories()
-        return
-      }
-
      const recentlyAddedShelf = this.shelves.find((shelf) => shelf.id === 'recently-added')
      if (!recentlyAddedShelf) return

--- a/client/components/app/BookShelfRow.vue
+++ b/client/components/app/BookShelfRow.vue
@ -24,7 +24,7 @@
        </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" />
+            <cards-author-card :key="entity.id" :author="entity" @hook:updated="updatedBookCard" class="mx-2e" @edit="editAuthor" />
          </template>
        </div>
        <div v-if="shelf.type === 'narrators'" class="flex items-center">
@ -36,19 +36,19 @@
    </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 class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
+          <p :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</p>
        </div>
      </div>

      <div class="bookshelfDividerCategorized h-6e w-full absolute top-0 left-0 right-0 z-20"></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">
+    <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-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">
+    </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-40" @click="scrollRight">
      <span class="material-symbols text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
-    </button>
+    </div>
  </div>
 </template>

@ -99,7 +99,6 @@ export default {
      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)
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@ -1,36 +1,36 @@
 <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'">
+      <nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="isHomePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p v-if="isHomePage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonHome }}</p>
        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
      </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'">
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="isLibraryPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p v-if="isLibraryPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonLibrary }}</p>
        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
-      <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'">
+      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-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'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p v-if="isSeriesPage" class="text-sm">{{ $strings.ButtonSeries }}</p>
        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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>
-      <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'">
+      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="flex-grow h-full flex justify-center items-center" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p v-if="isPlaylistsPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonPlaylists }}</p>
-        <span v-else class="material-symbols text-lg">&#xe03d;</span>
+        <span v-else class="material-symbols-outlined text-lg">queue_music</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'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
-        <span v-else class="material-symbols text-lg">&#xe431;</span>
+        <span v-else class="material-symbols-outlined text-lg">collections_bookmark</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'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="flex-grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
        <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
        <svg v-else class="w-5 h-5" viewBox="0 0 24 24">
          <path
@ -39,36 +39,33 @@
          />
        </svg>
      </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'">
+      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-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>
    </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">
+    <div id="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 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="grow" />
+        <div class="flex-grow" />

        <!-- 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-icon-btn icon="rss_feed" class="mx-0.5" :size="7" icon-font-size="1.2rem" bg-color="success" outlined @click="showOpenSeriesRSSFeed" />
        </ui-tooltip>

        <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
      </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>
+      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome">
+        <p class="hidden md:block">{{ numShowing }} {{ entityName }}</p>

-        <div class="grow hidden sm:inline-block" />
+        <div class="flex-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" />
@ -83,30 +80,28 @@
        <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-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ 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" />
+        <div class="flex-grow" />
        <p>{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"</p>
-        <div class="grow" />
+        <div class="flex-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>
+      <template v-else-if="page === 'authors'">
+        <div class="flex-grow" />
+        <ui-btn v-if="userCanUpdate && authors?.length && !isBatchSelecting" :loading="processingAuthors" color="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" />
+        <controls-sort-select v-if="authors?.length" 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" />
+        <div class="flex-grow" />
        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
      </template>
    </div>
@ -122,7 +117,11 @@ export default {
      type: Object,
      default: () => null
    },
-    searchQuery: String
+    searchQuery: String,
+    authors: {
+      type: Array,
+      default: () => []
+    }
  },
  data() {
    return {
@ -160,7 +159,6 @@ export default {
      }

      this.addSubtitlesMenuItem(items)
-      this.addCollapseSubSeriesMenuItem(items)

      return items
    },
@ -247,6 +245,9 @@ export default {
    isPodcastLibrary() {
      return this.currentLibraryMediaType === 'podcast'
    },
+    isMusicLibrary() {
+      return this.currentLibraryMediaType === 'music'
+    },
    isLibraryPage() {
      return this.page === ''
    },
@ -268,11 +269,8 @@ export default {
    isPodcastLatestPage() {
      return this.$route.name === 'library-library-podcast-latest'
    },
-    isPodcastDownloadQueuePage() {
-      return this.$route.name === 'library-library-podcast-download-queue'
-    },
    isAuthorsPage() {
-      return this.page === 'authors'
+      return this.$route.name === 'library-library-authors'
    },
    isAlbumsPage() {
      return this.page === 'albums'
@ -282,13 +280,13 @@ export default {
    },
    entityName() {
      if (this.isAlbumsPage) return 'Albums'
+      if (this.isMusicLibrary) return 'Tracks'

      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
      return ''
    },
    seriesId() {
@ -373,21 +371,6 @@ export default {
        }
      }
    },
-    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
@ -414,19 +397,6 @@ export default {
      }
      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()
@ -457,8 +427,6 @@ export default {
        this.markSeriesFinished()
      } else if (this.handleSubtitlesAction(action)) {
        return
-      } else if (this.handleCollapseSubSeriesAction(action)) {
-        return
      }
    },
    showOpenSeriesRSSFeed() {
@ -474,58 +442,46 @@ export default {
      this.$axios
        .$get(`/api/me/series/${this.seriesId}/readd-to-continue-listening`)
        .then(() => {
-          this.$toast.success(this.$strings.ToastItemUpdateSuccess)
+          this.$toast.success('Series re-added to continue listening')
        })
        .catch((error) => {
          console.error('Failed to re-add series to continue listening', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error('Failed to re-add series to continue listening')
        })
        .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 this.authors) {
+        const payload = {}
+        if (author.asin) payload.asin = author.asin
+        else payload.q = author.name

-        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)
+        payload.region = 'us'
+        if (this.libraryProvider.startsWith('audible.')) {
+          payload.region = this.libraryProvider.split('.').pop() || 'us'
        }
-      } catch (error) {
-        console.error('Failed to match all authors', error)
-        this.$toast.error(this.$strings.ToastMatchAllAuthorsFailed)
+
+        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(`Author ${author.name} not found`)
+        } 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)
      }
      this.processingAuthors = false
    },
@ -535,13 +491,13 @@ export default {
        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)
          })
          .catch((error) => {
            console.error('Failed to remove library items with issues', error)
-            this.$toast.error(this.$strings.ToastRemoveItemsWithIssuesFailed)
+            this.$toast.error('Failed to remove library items with issues')
          })
          .finally(() => {
            this.processingIssues = false
@ -597,7 +553,7 @@ export default {
    updateCollapseSeries() {
      this.saveSettings()
    },
-    updateCollapseSubSeries() {
+    updateCollapseBookSeries() {
      this.saveSettings()
    },
    updateShowSubtitles() {
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@ -1,11 +1,11 @@
 <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>
+    <div class="w-44 fixed left-0 top-16 bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-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'">
+      <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-3 h-12 border-b border-primary border-opacity-30 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-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>
@ -13,13 +13,13 @@
      <modals-changelog-view-modal v-model="showChangelogModal" :versionData="versionData" />
    </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="w-44 h-12 px-4 border-t bg-bg border-black border-opacity-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>

        <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>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ $config.version }}</a>
    </div>
  </div>
 </template>
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@ -2,10 +2,6 @@
  <div id="bookshelf" ref="bookshelf" class="w-full overflow-y-auto" :style="{ fontSize: sizeMultiplier + 'rem' }">
    <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>
    </template>
@ -13,23 +9,15 @@
    <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="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">{{ $strings.ButtonConfigureScanner }}</ui-btn>
+        <ui-btn color="success" class="w-52" :loading="isScanningLibrary || tempIsScanning" @click="scan">{{ $strings.ButtonScanLibrary }}</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://www.audiobookshelf.org/guides/collections" 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>
+        <ui-btn v-if="hasFilter" color="primary" @click="clearFilter">{{ $strings.ButtonClearFilter }}</ui-btn>
      </div>
    </div>

@ -77,13 +65,7 @@ export default {
      tempIsScanning: false,
      cardWidth: 0,
      cardHeight: 0,
-      coverHeight: 0,
-      resizeObserver: null,
-      lastScrollTop: 0,
-      lastTimestamp: 0,
-      postScrollTimeout: null,
-      currFirstEntityIndex: -1,
-      currLastEntityIndex: -1
+      resizeObserver: null
    }
  },
  watch: {
@ -109,7 +91,6 @@ export default {
      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.hasFilter) {
        if (this.filterName === 'Issues') return this.$strings.MessageNoIssues
        else if (this.filterName === 'Feed-open') return this.$strings.MessageBookshelfNoRSSFeeds
@ -117,11 +98,6 @@ export default {
      }
      return this.$strings.MessageNoResults
    },
-    emptyMessageHelp() {
-      if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollectionsHelp
-      if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylistsHelp
-      return ''
-    },
    entityName() {
      if (!this.page) return 'items'
      return this.page
@ -135,12 +111,6 @@ export default {
    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')
    },
@ -194,6 +164,9 @@ export default {
    bookWidth() {
      return this.cardWidth
    },
+    bookHeight() {
+      return this.cardHeight
+    },
    shelfPadding() {
      if (this.bookshelfWidth < 640) return 32 * this.sizeMultiplier
      return 64 * this.sizeMultiplier
@ -204,6 +177,9 @@ export default {
    entityWidth() {
      return this.cardWidth
    },
+    entityHeight() {
+      return this.cardHeight
+    },
    shelfPaddingHeight() {
      return 16
    },
@ -241,8 +217,6 @@ export default {
        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() {
@ -371,60 +345,59 @@ export default {
      }
    },
    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,26 +407,40 @@ 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
+      this.entityIndexesMounted = []
+      for (let i = 0; i < lastBookIndex; i++) {
+        this.entityIndexesMounted.push(i)
+        if (!this.entities[i]) {
+          const page = Math.floor(i / this.booksPerFetch)
+          this.loadPage(page)
+        }
      }
-      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') {
@ -470,9 +457,6 @@ export default {
        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)
@ -517,29 +501,12 @@ export default {
      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
      this.handleScroll(scrollTop)
    },
    libraryItemAdded(libraryItem) {
@ -552,15 +519,6 @@ export default {
      if (this.entityName === 'items' || 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,18 +526,6 @@ 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') {
        var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
@ -590,7 +536,6 @@ export default {
          this.executeRebuild()
        }
      }
-      this.routeToBookshelfIfLastIssueRemoved()
    },
    libraryItemsAdded(libraryItems) {
      console.log('items added', libraryItems)
@ -656,34 +601,6 @@ export default {
        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)
@ -710,14 +627,13 @@ export default {
    },
    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()
+        this.pagesLoaded[page] = true
        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]
+            this.pagesLoaded[page] = false
            break
          }
        }
@ -732,6 +648,7 @@ 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
@ -756,9 +673,10 @@ export default {
      this.initSizeData(bookshelf)
      this.checkUpdateSearchParams()

-      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)
+      this.mountEntites(0, lastBookIndex)

      // Set last scroll position for this bookshelf page
      if (this.$store.state.lastBookshelfScrollData[this.page] && window.bookshelf) {
@ -789,7 +707,7 @@ export default {
        var bookshelf = document.getElementById('bookshelf')
        if (bookshelf) {
          this.init(bookshelf)
-          bookshelf.addEventListener('scroll', this.scroll, { passive: true })
+          bookshelf.addEventListener('scroll', this.scroll)
        }
      })

@ -809,9 +727,6 @@ export default {
        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 {
@ -841,9 +756,6 @@ export default {
        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 {
@ -852,14 +764,10 @@ export default {
    },
    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
@ -872,14 +780,6 @@ export default {
        .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)`
    }
  },
  async mounted() {
--- a/client/components/app/MediaPlayerContainer.vue
+++ b/client/components/app/MediaPlayerContainer.vue
@ -1,9 +1,10 @@
 <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 id="videoDock" />
    <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="flex items-start mb-6 lg:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : 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">
@ -11,9 +12,10 @@
          </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">
+        <div v-if="!playerHandler.isVideo" 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-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
+          <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</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>
@ -25,7 +27,7 @@
          <p class="font-mono text-xs sm:text-sm pl-1 sm:pl-1.5 pb-px">{{ totalDurationPretty }}</p>
        </div>
      </div>
-      <div class="grow" />
+      <div class="flex-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>
@ -41,25 +43,26 @@
      :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"
+      @showPlayerSettings="showPlayerSettingsModal = true"
    />

-    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :playback-rate="currentPlaybackRate" :library-item-id="libraryItemId" @select="selectBookmark" />
+    <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-type="sleepTimerType" :remaining="sleepTimerRemaining" :has-chapters="!!chapters.length" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />

-    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" />
+    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" :library-item-id="libraryItemId" />
+
+    <modals-player-settings-modal v-model="showPlayerSettingsModal" />
  </div>
 </template>

@ -78,6 +81,7 @@ export default {
      currentTime: 0,
      showSleepTimerModal: false,
      showPlayerQueueItemsModal: false,
+      showPlayerSettingsModal: false,
      sleepTimerSet: false,
      sleepTimerRemaining: 0,
      sleepTimerType: null,
@ -85,8 +89,7 @@ export default {
      displayTitle: null,
      currentPlaybackRate: 1,
      syncFailedToast: null,
-      coverAspectRatio: 1,
-      lastChapterId: null
+      coverAspectRatio: 1
    }
  },
  computed: {
@ -135,6 +138,9 @@ export default {
    isPodcast() {
      return this.streamLibraryItem?.mediaType === 'podcast'
    },
+    isMusic() {
+      return this.streamLibraryItem?.mediaType === 'music'
+    },
    isExplicit() {
      return !!this.mediaMetadata.explicit
    },
@ -156,7 +162,7 @@ export default {
      return this.mediaMetadata.authors || []
    },
    libraryId() {
-      return this.streamLibraryItem?.libraryId || null
+      return this.streamLibraryItem ? this.streamLibraryItem.libraryId : null
    },
    totalDurationPretty() {
      // Adjusted by playback rate
@ -164,17 +170,11 @@ export default {
    },
    podcastAuthor() {
      if (!this.isPodcast) return null
-      return this.mediaMetadata.author || this.$strings.LabelUnknown
+      return this.mediaMetadata.author || 'Unknown'
    },
-    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
-      })
+    musicArtists() {
+      if (!this.isMusic) return null
+      return this.mediaMetadata.artists.join(', ')
    },
    playerQueueItems() {
      return this.$store.state.playerQueueItems || []
@ -237,22 +237,18 @@ export default {
        }
      }, 1000)
    },
-    checkChapterEnd() {
+    checkChapterEnd(time) {
      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
+      const chapterEndTime = this.currentChapter.end
+      const tolerance = 0.75
+      if (time >= chapterEndTime - tolerance) {
+        this.sleepTimerEnd()
      }
    },
    sleepTimerEnd() {
      this.clearSleepTimer()
      this.playerHandler.pause()
-      this.$toast.info(this.$strings.ToastSleepTimerDone)
+      this.$toast.info('Sleep Timer Done.. zZzzZz')
    },
    cancelSleepTimer() {
      this.showSleepTimerModal = false
@ -306,7 +302,7 @@ export default {
      }

      if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER && this.sleepTimerSet) {
-        this.checkChapterEnd()
+        this.checkChapterEnd(time)
      }
    },
    setDuration(duration) {
@ -379,28 +375,19 @@ export default {
        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
-            })
-          })
-        }
+        var coverImageSrc = this.$store.getters['globals/getLibraryItemCoverSrc'](this.streamLibraryItem, '/Logo.png', true)
+        const artwork = [
+          {
+            src: coverImageSrc
+          }
+        ]

        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
+          artwork
        })
        console.log('Set media session metadata', navigator.mediaSession.metadata)

@ -473,30 +460,6 @@ export default {
        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
@ -535,7 +498,7 @@ export default {
    },
    showFailedProgressSyncs() {
      if (!isNaN(this.syncFailedToast)) this.$toast.dismiss(this.syncFailedToast)
-      this.syncFailedToast = this.$toast(this.$strings.ToastProgressIsNotBeingSynced, { timeout: false, type: 'error' })
+      this.syncFailedToast = this.$toast('Progress is not being synced. Restart playback', { timeout: false, type: 'error' })
    },
    sessionClosedEvent(sessionId) {
      if (this.playerHandler.currentSessionId === sessionId) {
@ -549,7 +512,6 @@ export default {
    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)
  },
@ -557,7 +519,6 @@ export default {
    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)
  }
--- a/client/components/app/SettingsContent.vue
+++ b/client/components/app/SettingsContent.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white/5 p-2 sm:p-4 mb-8">
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-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>
@ -39,4 +39,4 @@ export default {
  color: white;
  padding: 2px 4px;
 }
-</style>
+</style>
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@ -1,10 +1,10 @@
 <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' }">
+  <div 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 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'">
+    <div id="siderail-buttons-container" :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 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>
@ -14,15 +14,15 @@
        <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
      </nuxt-link>

-      <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>
+      <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 border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-symbols text-2xl">format_list_bulleted</span>

        <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>

        <div v-show="isPodcastLatestPage" 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/70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary/80' : 'bg-bg/60'">
+      <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>
@ -32,7 +32,7 @@
        <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
      </nuxt-link>

-      <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'">
+      <nuxt-link v-if="isBookLibrary" :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>
@ -42,23 +42,23 @@
        <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
      </nuxt-link>

-      <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>
+      <nuxt-link v-if="isBookLibrary" :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-symbols-outlined text-2xl">collections_bookmark</span>

        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>

        <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="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>
+      <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" 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="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-symbols text-2.5xl">queue_music</span>

        <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>

        <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
      </nuxt-link>

-      <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'">
+      <nuxt-link v-if="isBookLibrary" :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"
@ -71,23 +71,23 @@
        <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>
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" 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="isNarratorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-symbols text-2xl">record_voice_over</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>
+      <nuxt-link v-if="isBookLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/stats`" 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="isStatsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-symbols text-2xl">monitoring</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'">
+      <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'">
        <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>
@ -95,21 +95,29 @@
        <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>
+      <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" 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="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-symbols-outlined text-xl">album</span>
+
+        <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>
+
+        <div v-show="isMusicAlbumsPage" 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 text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+        <span class="material-symbols text-2xl">file_download</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'">
+      <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-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">
+        <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>
@ -164,6 +172,9 @@ export default {
    isPodcastLibrary() {
      return this.currentLibraryMediaType === 'podcast'
    },
+    isMusicLibrary() {
+      return this.currentLibraryMediaType === 'music'
+    },
    isPodcastDownloadQueuePage() {
      return this.$route.name === 'library-library-podcast-download-queue'
    },
@ -173,6 +184,9 @@ export default {
    isPodcastLatestPage() {
      return this.$route.name === 'library-library-podcast-latest'
    },
+    isMusicAlbumsPage() {
+      return this.paramId === 'albums'
+    },
    homePage() {
      return this.$route.name === 'library-library'
    },
@ -180,7 +194,7 @@ export default {
      return this.$route.name === 'library-library-series-id' || this.paramId === 'series'
    },
    isAuthorsPage() {
-      return this.libraryBookshelfPage && this.paramId === 'authors'
+      return this.$route.name === 'library-library-authors'
    },
    isNarratorsPage() {
      return this.$route.name === 'library-library-narrators'
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@ -1,13 +1,13 @@
 <template>
-  <div class="pb-3e" :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
-    <nuxt-link :to="`/author/${author?.id}`">
+  <div :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" />

          <!-- 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">
+          <div cy-id="textInline" v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-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>
@ -25,7 +25,7 @@
          </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">
+          <div cy-id="spinner" 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>
@ -40,7 +40,7 @@
 <script>
 export default {
  props: {
-    authorMount: {
+    author: {
      type: Object,
      default: () => {}
    },
@ -57,8 +57,7 @@ export default {
  data() {
    return {
      searching: false,
-      isHovering: false,
-      author: null
+      isHovering: false
    }
  },
  computed: {
@ -68,41 +67,35 @@ export default {
    cardHeight() {
      return this.height * this.sizeMultiplier
    },
-    coverHeight() {
-      return this.cardHeight
-    },
    userToken() {
-      return this.store.getters['user/getToken']
+      return this.$store.getters['user/getToken']
    },
    _author() {
      return this.author || {}
    },
    authorId() {
-      return this._author?.id || ''
+      return this._author.id
    },
    name() {
-      return this._author?.name || ''
+      return this._author.name || ''
    },
    asin() {
-      return this._author?.asin || ''
+      return this._author.asin || ''
    },
    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']
+      return this.$store.getters['user/getUserCanUpdate']
    },
    currentLibraryId() {
-      return this.store.state.libraries.currentLibraryId
+      return this.$store.state.libraries.currentLibraryId
    },
    libraryProvider() {
-      return this.store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
    },
    sizeMultiplier() {
-      return this.store.getters['user/getSizeMultiplier']
+      return this.$store.getters['user/getSizeMultiplier']
    }
  },
  methods: {
@ -128,54 +121,24 @@ export default {
        return null
      })
      if (!response) {
-        this.$toast.error(this.$getString('ToastAuthorNotFound', [this.name]))
+        this.$toast.error(`Author ${this.name} 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 ${response.author.name} was updated`)
+        else this.$toast.success(`Author ${response.author.name} was updated (no image found)`)
      } else {
-        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+        this.$toast.info(`No updates were made for Author ${response.author.name}`)
      }
      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)
+    this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
  },
  beforeDestroy() {
-    this.removeListeners()
+    this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
  }
 }
 </script>
--- a/client/components/cards/AuthorSearchCard.vue
+++ b/client/components/cards/AuthorSearchCard.vue
@ -1,9 +1,9 @@
 <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>
--- a/client/components/cards/BookMatchCard.vue
+++ b/client/components/cards/BookMatchCard.vue
@ -1,33 +1,33 @@
 <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="flex py-1 hover:bg-gray-300 hover:bg-opacity-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>
-      <div v-if="!isPodcast" class="px-2 md:px-4 grow">
+      <div v-if="!isPodcast" class="px-2 md:px-4 flex-grow">
        <div class="flex items-center">
          <h1 class="text-sm md:text-base">{{ book.title }}</h1>
-          <div class="grow" />
+          <div class="flex-grow" />
          <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
        </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 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">
+          <div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-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>
        </div>
        <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">
+      <div v-else class="px-4 flex-grow">
        <h1>
          <div class="flex items-center">{{ book.title }}<widgets-explicit-indicator v-if="book.explicit" /></div>
        </h1>
--- a/client/components/cards/GenreSearchCard.vue
+++ b/client/components/cards/GenreSearchCard.vue
@ -3,7 +3,7 @@
    <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">
+    <div class="flex-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>
--- a/client/components/cards/GroupCard.vue
+++ b/client/components/cards/GroupCard.vue
@ -1,11 +1,11 @@
 <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="{ width: cardWidth + 'px', height: cardHeight + '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 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` }">
+          <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 :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
          </div>

--- a/client/components/cards/ItemSearchCard.vue
+++ b/client/components/cards/ItemSearchCard.vue
@ -1,7 +1,7 @@
 <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">
+    <div class="flex-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>
--- a/client/components/cards/ItemTaskRunningCard.vue
+++ b/client/components/cards/ItemTaskRunningCard.vue
@ -4,16 +4,15 @@
      <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">
+    <div class="flex-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>
+    <ui-btn v-if="userIsAdminOrUp && !isFinished && isLibraryScan && !cancelingScan" color="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>

@ -27,16 +26,7 @@ export default {
  },
  data() {
    return {
-      cancelingScan: false,
-      specialMessage: ''
-    }
-  },
-  watch: {
-    task: {
-      immediate: true,
-      handler() {
-        this.initTask()
-      }
+      cancelingScan: false
    }
  },
  computed: {
@ -44,17 +34,14 @@ export default {
      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 || ''
    },
+    details() {
+      return this.task.details || 'Unknown'
+    },
    isFinished() {
      return !!this.task.isFinished
    },
@ -65,9 +52,6 @@ export default {
      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() {
@ -103,21 +87,6 @@ export default {
    }
  },
  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) {
--- 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-symbols">close</span>
    </div>

    <template v-if="!uploadSuccess && !uploadFailed">
@ -21,8 +21,8 @@
          <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 :text="$strings.LabelUploaderItemFetchMetadataHelp">
-              <div 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>
+              <div class="ml-2 mb-1 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-primary cursor-pointer" @click="fetchMetadata">
+                <span class="text-base text-white text-opacity-80 font-mono material-symbols">sync</span>
              </div>
            </ui-tooltip>
          </div>
@ -61,7 +61,7 @@
      <p class="text-base">"{{ itemData.title }}" {{ $strings.MessageUploaderItemFailed }}</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">
+    <div v-if="isNonInteractable" 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="nonInteractionLabel" />
    </div>
  </div>
--- a/client/components/cards/LazyAlbumCard.vue
+++ b/client/components/cards/LazyAlbumCard.vue
@ -1,15 +1,15 @@
 <template>
-  <div ref="card" :id="`album-card-${index}`" :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 ref="card" :id="`album-card-${index}`" :style="{ width: cardWidth + '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="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">
+      <div class="w-full h-full bg-primary relative rounded overflow-hidden">
        <covers-preview-cover ref="cover" :src="coverSrc" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
      </div>
    </div>

    <div class="relative w-full">
      <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` }">
+        <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
          <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
        </div>
      </div>
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@ -1,41 +1,48 @@
 <template>
-  <div ref="card" :id="`book-card-${index}`" tabindex="0" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-xs z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded-sm overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
+  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
      <!-- When cover image does not fill -->
-      <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xs bg-primary">
+      <div cy-id="coverBg" 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>

-      <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black/90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #78350f">
+      <div cy-id="seriesSequenceList" v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #78350f">
        <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
      </div>
-      <div cy-id="booksInSeries" v-else-if="booksInSeries" 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">
+      <div cy-id="booksInSeries" v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-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' }">{{ booksInSeries }}</p>
      </div>

-      <div class="w-full h-full absolute top-0 left-0 rounded-sm overflow-hidden z-10">
-        <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" aria-hidden="true" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: 0.5 + 'em' }">
+      <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
+        <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: 0.5 + 'em' }">
          <p :style="{ fontSize: 0.8 + 'em' }" class="text-gray-300 text-center">{{ title }}</p>
        </div>

        <!-- Cover Image -->
-        <img cy-id="coverImage" v-if="libraryItem" :alt="`${displayTitle}, ${$strings.LabelCover}`" ref="cover" aria-hidden="true" :src="bookCoverSrc" class="relative w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+        <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="relative w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />

        <!-- Placeholder Cover Title & Author -->
        <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em' }">
          <div>
-            <p cy-id="placeholderTitleText" aria-hidden="true" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'em' }">{{ titleCleaned }}</p>
+            <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'em' }">{{ titleCleaned }}</p>
          </div>
        </div>
        <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em', bottom: authorBottom + 'em' }">
-          <p cy-id="placeholderAuthorText" aria-hidden="true" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'em' }">{{ authorCleaned }}</p>
+          <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'em' }">{{ authorCleaned }}</p>
+        </div>
+
+        <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #78350f">
+          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequenceList }}</p>
+        </div>
+        <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #cd9d49dd">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ booksInSeries }}</p>
        </div>

        <!-- No progress shown for podcasts (unless showing podcast episode) -->
-        <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1e max-w-full z-20 rounded-b box-shadow-progressbar" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * userProgressPercent + 'px' }"></div>
+        <div cy-id="progressBar" v-if="!isPodcast || episodeProgress" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * userProgressPercent + 'px' }"></div>

        <!-- Overlay is not shown if collapsing series in library -->
-        <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded-sm md:block" :class="overlayWrapperClasslist">
+        <div cy-id="overlay" v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded md:block" :class="overlayWrapperClasslist">
          <div cy-id="playButton" v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
            <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
              <span class="material-symbols fill" :style="{ fontSize: playIconFontSize + 'em' }">play_arrow</span>
@ -68,12 +75,12 @@
        </div>

        <!-- Processing/loading spinner overlay -->
-        <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black/40 rounded-sm flex items-center justify-center">
+        <div cy-id="loadingSpinner" v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
          <widgets-loading-spinner size="la-lg" />
        </div>

        <!-- Series name overlay -->
-        <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black/60 rounded-sm flex items-center justify-center" :style="{ padding: 1 + 'em' }">
+        <div cy-id="seriesNameOverlay" v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: 1 + 'em' }">
          <p v-if="seriesName" class="text-gray-200 text-center" :style="{ fontSize: 1.1 + 'em' }">{{ seriesName }}</p>
        </div>

@ -86,28 +93,28 @@

        <!-- rss feed icon -->
        <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 + 'em' }">
-          <span class="material-symbols" aria-hidden="true" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
+          <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
        </div>
        <!-- media item shared icon -->
        <div cy-id="mediaItemShare" v-if="mediaItemShare && !isSelectionMode && !isHovering" class="absolute text-success left-0 z-10" :style="{ padding: 0.375 + 'em', top: rssFeed ? '2em' : '0px' }">
-          <span class="material-symbols" aria-hidden="true" :style="{ fontSize: 1.5 + 'em' }">public</span>
+          <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">public</span>
        </div>

        <!-- Series sequence -->
-        <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black/90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
+        <div cy-id="seriesSequence" v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
          <p :style="{ fontSize: 0.8 + 'em' }">#{{ seriesSequence }}</p>
        </div>

        <!-- Podcast Episode # -->
-        <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black/90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
+        <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
          <p :style="{ fontSize: 0.8 + 'em' }">
            Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
          </p>
        </div>

        <!-- Podcast Num Episodes -->
-        <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black/90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
-          <p :style="{ fontSize: 0.8 + 'em' }" role="status" :aria-label="$strings.LabelNumberOfEpisodes">{{ numEpisodes }}</p>
+        <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
+          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodes }}</p>
        </div>

        <!-- Podcast Num Episodes -->
@ -194,6 +201,23 @@ export default {
      // This method returns immediately without waiting for the DOM to update
      return this.coverWidth
    },
+    /*
+    cardHeight() {
+      // This method returns immediately without waiting for the DOM to update
+      return this.coverHeight + this.detailsHeight
+    },
+    detailsHeight() {
+      if (!this.isAlternativeBookshelfView) return 0
+      const lineHeight = 1.5
+      const remSize = 16
+      const baseHeight = this.sizeMultiplier * lineHeight * remSize
+      const titleHeight = 0.9 * baseHeight
+      const line2Height = 0.8 * baseHeight
+      const line3Height = this.displaySortLine ? 0.8 * baseHeight : 0
+      const marginHeight = 8 * 2 * this.sizeMultiplier // py-2
+      return titleHeight + line2Height + line3Height + marginHeight
+    },
+    */
    sizeMultiplier() {
      return this.store.getters['user/getSizeMultiplier']
    },
@ -219,11 +243,15 @@ export default {
    isPodcast() {
      return this.mediaType === 'podcast' || this.store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
    },
+    isMusic() {
+      return this.mediaType === 'music'
+    },
    isExplicit() {
      return this.mediaMetadata.explicit || false
    },
    placeholderUrl() {
-      return this.store.getters['globals/getPlaceholderCoverSrc']
+      const config = this.$config || this.$nuxt.$config
+      return `${config.routerBasePath}/book_placeholder.jpg`
    },
    bookCoverSrc() {
      return this.store.getters['globals/getLibraryItemCoverSrc'](this._libraryItem, this.placeholderUrl)
@ -236,7 +264,6 @@ export default {
      return this.mediaMetadata.series
    },
    seriesName() {
-      if (this.collapsedSeries?.name) return this.collapsedSeries.name
      return this.series?.name || null
    },
    seriesSequence() {
@ -318,7 +345,7 @@ export default {
    },
    displaySubtitle() {
      if (!this.libraryItem) return '\u00A0'
-      if (this.collapsedSeries) return `${this.collapsedSeries.numBooks} ${this.$strings.LabelBooks}`
+      if (this.collapsedSeries) return this.collapsedSeries.numBooks === 1 ? '1 book' : `${this.collapsedSeries.numBooks} books`
      if (this.mediaMetadata.subtitle) return this.mediaMetadata.subtitle
      if (this.mediaMetadata.seriesName) return this.mediaMetadata.seriesName
      return ''
@ -326,6 +353,7 @@ export default {
    displayLineTwo() {
      if (this.recentEpisode) return this.title
      if (this.isPodcast) return this.author
+      if (this.isMusic) return this.artist
      if (this.collapsedSeries) return ''
      if (this.isAuthorBookshelfView) {
        return this.mediaMetadata.publishedYear || ''
@ -335,14 +363,14 @@ export default {
    },
    displaySortLine() {
      if (this.collapsedSeries) return null
-      if (this.orderBy === 'mtimeMs') return this.$getString('LabelFileModifiedDate', [this.$formatDate(this._libraryItem.mtimeMs, this.dateFormat)])
-      if (this.orderBy === 'birthtimeMs') return this.$getString('LabelFileBornDate', [this.$formatDate(this._libraryItem.birthtimeMs, this.dateFormat)])
-      if (this.orderBy === 'addedAt') return this.$getString('LabelAddedDate', [this.$formatDate(this._libraryItem.addedAt, this.dateFormat)])
-      if (this.orderBy === 'media.duration') return this.$strings.LabelDuration + ': ' + this.$elapsedPrettyExtended(this.media.duration, false)
-      if (this.orderBy === 'size') return this.$strings.LabelSize + ': ' + this.$bytesPretty(this._libraryItem.size)
-      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} ` + this.$strings.LabelEpisodes
+      if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs, this.dateFormat)
+      if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs, this.dateFormat)
+      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt, this.dateFormat)
+      if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
+      if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
+      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
      if (this.orderBy === 'media.metadata.publishedYear') {
-        if (this.mediaMetadata.publishedYear) return this.$getString('LabelPublishedDate', [this.mediaMetadata.publishedYear])
+        if (this.mediaMetadata.publishedYear) return 'Published ' + this.mediaMetadata.publishedYear
        return '\u00A0'
      }
      return null
@ -353,6 +381,7 @@ export default {
      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.recentEpisode.id)
    },
    userProgress() {
+      if (this.isMusic) return null
      if (this.episodeProgress) return this.episodeProgress
      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
    },
@ -408,7 +437,7 @@ export default {
      return !this.isSelectionMode && !this.showPlayButton && this.ebookFormat
    },
    showPlayButton() {
-      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode)
+      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode || this.isMusic)
    },
    showSmallEBookIcon() {
      return !this.isSelectionMode && this.ebookFormat
@ -429,8 +458,8 @@ export default {
    },
    overlayWrapperClasslist() {
      const classes = []
-      if (this.isSelectionMode) classes.push('bg-black/60')
-      else classes.push('bg-black/40')
+      if (this.isSelectionMode) classes.push('bg-opacity-60')
+      else classes.push('bg-opacity-40')
      if (this.selected) {
        classes.push('border-2 border-yellow-400')
      }
@ -452,6 +481,8 @@ export default {
      return this.store.getters['user/getIsAdminOrUp']
    },
    moreMenuItems() {
+      if (this.isMusic) return []
+
      if (this.recentEpisode) {
        const items = [
          {
@ -696,7 +727,7 @@ export default {
    toggleFinished(confirmed = false) {
      if (!this.itemIsFinished && this.userProgressPercent > 0 && !confirmed) {
        const payload = {
-          message: this.$getString('MessageConfirmMarkItemFinished', [this.displayTitle]),
+          message: `Are you sure you want to mark "${this.displayTitle}" as finished?`,
          callback: (confirmed) => {
            if (confirmed) {
              this.toggleFinished(true)
@ -741,18 +772,18 @@ export default {
        .then((data) => {
          var result = data.result
          if (!result) {
-            this.$toast.error(this.$getString('ToastRescanFailed', [this.displayTitle]))
+            this.$toast.error(`Re-Scan Failed for "${this.title}"`)
          } else if (result === 'UPDATED') {
-            this.$toast.success(this.$strings.ToastRescanUpdated)
+            this.$toast.success(`Re-Scan complete item was updated`)
          } else if (result === 'UPTODATE') {
-            this.$toast.success(this.$strings.ToastRescanUpToDate)
+            this.$toast.success(`Re-Scan complete item was up to date`)
          } else if (result === 'REMOVED') {
-            this.$toast.error(this.$strings.ToastRescanRemoved)
+            this.$toast.error(`Re-Scan complete item was removed`)
          }
        })
        .catch((error) => {
          console.error('Failed to scan library item', error)
-          this.$toast.error(this.$strings.ToastScanFailed)
+          this.$toast.error('Failed to scan library item')
        })
        .finally(() => {
          this.processing = false
@ -809,7 +840,7 @@ export default {
        })
        .catch((error) => {
          console.error('Failed to remove series from home', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error('Failed to update user')
        })
        .finally(() => {
          this.processing = false
@ -827,7 +858,7 @@ export default {
        })
        .catch((error) => {
          console.error('Failed to hide item from home', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error('Failed to update user')
        })
        .finally(() => {
          this.processing = false
@ -842,7 +873,7 @@ export default {
          episodeId: this.recentEpisode.id,
          title: this.recentEpisode.title,
          subtitle: this.mediaMetadata.title,
-          caption: this.recentEpisode.publishedAt ? this.$getString('LabelPublishedDate', [this.$formatDate(this.recentEpisode.publishedAt, this.dateFormat)]) : this.$strings.LabelUnknownPublishDate,
+          caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
          duration: this.recentEpisode.audioFile.duration || null,
          coverPath: this.media.coverPath || null
        }
@ -892,11 +923,11 @@ export default {
            axios
              .$delete(`/api/items/${this.libraryItemId}?hard=${hardDelete ? 1 : 0}`)
              .then(() => {
-                this.$toast.success(this.$strings.ToastItemDeletedSuccess)
+                this.$toast.success('Item deleted')
              })
              .catch((error) => {
                console.error('Failed to delete item', error)
-                this.$toast.error(this.$strings.ToastItemDeletedFailed)
+                this.$toast.error('Failed to delete item')
              })
              .finally(() => {
                this.processing = false
@ -1002,7 +1033,7 @@ export default {
                  episodeId: episode.id,
                  title: episode.title,
                  subtitle: this.mediaMetadata.title,
-                  caption: episode.publishedAt ? this.$getString('LabelPublishedDate', [this.$formatDate(episode.publishedAt, this.dateFormat)]) : this.$strings.LabelUnknownPublishDate,
+                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
                  duration: episode.audioFile.duration || null,
                  coverPath: this.media.coverPath || null
                })
--- a/client/components/cards/LazyCollectionCard.vue
+++ b/client/components/cards/LazyCollectionCard.vue
@ -1,13 +1,13 @@
 <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 ref="card" :id="`collection-card-${index}`" :style="{ width: cardWidth + '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="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">
+      <div class="w-full h-full bg-primary relative rounded 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 v-show="isHovering && userCanUpdate" 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 + '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>
+          <span class="material-symbols text-white text-opacity-75 hover:text-opacity-100" :style="{ fontSize: 1.25 + 'em' }">edit</span>
        </div>
      </div>

@ -15,7 +15,7 @@
    </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` }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
      </div>
    </div>
@ -57,11 +57,23 @@ export default {
      return this.store.getters['libraries/getBookCoverAspectRatio']
    },
    cardWidth() {
-      return this.width || (this.coverHeight / this.bookCoverAspectRatio) * 2
+      return this.width || this.coverHeight * 2
    },
    coverHeight() {
      return this.height * this.sizeMultiplier
    },
+    cardHeight() {
+      return this.coverHeight + this.bottomTextHeight
+    },
+    bottomTextHeight() {
+      if (!this.isAlternativeBookshelfView) return 0 // bottom text appears on top of the divider
+      const lineHeight = 1.5
+      const remSize = 16
+      const baseHeight = this.sizeMultiplier * lineHeight * remSize
+      const titleHeight = this.labelFontSize * baseHeight
+      const paddingHeight = 4 * 2 * this.sizeMultiplier // py-1
+      return titleHeight + paddingHeight
+    },
    labelFontSize() {
      if (this.width < 160) return 0.75
      return 0.9
--- a/client/components/cards/LazyPlaylistCard.vue
+++ b/client/components/cards/LazyPlaylistCard.vue
@ -1,19 +1,19 @@
 <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 ref="card" :id="`playlist-card-${index}`" :style="{ width: cardWidth + 'px', fontSize: sizeMultiplier + 'rem' }" 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="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">
+      <div class="w-full h-full bg-primary relative rounded 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 v-show="isHovering && userCanUpdate" 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 + '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>
+          <span class="material-symbols text-white text-opacity-75 hover:text-opacity-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` }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em ${0.5}em` }">
        <p class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ title }}</p>
      </div>
    </div>
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@ -1,18 +1,18 @@
 <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="card" ref="card" :id="`series-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute rounded-sm 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">
+      <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="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 cy-id="seriesLengthMarker" class="absolute rounded-lg bg-black bg-opacity-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' }">{{ 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="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b w-full" :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' }">
+      <div cy-id="hoveringDisplayTitle" 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: '1em' }">
        <p :style="{ fontSize: 1.2 + 'em' }">{{ displayTitle }}</p>
      </div>

@ -20,7 +20,7 @@
    </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` }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
      </div>
    </div>
@ -65,7 +65,7 @@ export default {
      return this.store.getters['libraries/getBookCoverAspectRatio']
    },
    cardWidth() {
-      return this.width || (this.coverHeight / this.bookCoverAspectRatio) * 2
+      return this.width || this.coverHeight * 2
    },
    coverHeight() {
      return this.height * this.sizeMultiplier
@ -96,7 +96,7 @@ export default {
    displaySortLine() {
      switch (this.orderBy) {
        case 'addedAt':
-          return this.$getString('LabelAddedDate', [this.$formatDate(this.addedAt, this.dateFormat)])
+          return `${this.$strings.LabelAdded} ${this.$formatDate(this.addedAt, this.dateFormat)}`
        case 'totalDuration':
          return `${this.$strings.LabelDuration} ${this.$elapsedPrettyExtended(this.totalDuration, false)}`
        case 'lastBookUpdated':
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@ -3,11 +3,11 @@
    <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>
+          <span class="material-symbols-outlined text-[10em]">record_voice_over</span>
        </div>

        <!-- Narrator name & num books overlay -->
-        <div class="absolute bottom-0 left-0 w-full py-1e bg-black/60 px-2e">
+        <div class="absolute bottom-0 left-0 w-full py-1e bg-black bg-opacity-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>
--- a/client/components/cards/NarratorSearchCard.vue
+++ b/client/components/cards/NarratorSearchCard.vue
@ -1,9 +1,9 @@
 <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>
+      <span class="material-symbols text-2xl text-gray-200">record_voice_over</span>
    </div>
-    <div class="grow px-2 narratorSearchCardContent h-full">
+    <div class="flex-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>
--- a/client/components/cards/NotificationCard.vue
+++ b/client/components/cards/NotificationCard.vue
@ -1,17 +1,17 @@
 <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="w-full border border-white border-opacity-10 rounded-xl p-4 my-2" :class="notification.enabled ? 'bg-primary bg-opacity-25' : 'bg-error bg-opacity-5'">
    <div class="flex flex-wrap items-center">
      <p class="text-base md:text-lg font-semibold pr-4">{{ eventName }}</p>
-      <div class="grow" />
+      <div class="flex-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="fireTestEventAndSucceed">Fire onTest Event</ui-btn>
+      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" color="red-600" @click.stop="fireTestEventAndFail">Fire & Fail</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-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">Test</ui-btn>
+      <ui-btn v-else :loading="enabling" small color="success" class="mr-2" @click="enableNotification">Enable</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" />
+      <ui-icon-btn bg-color="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>
@ -65,12 +65,12 @@ export default {
      this.$axios
        .$get(`/api/notifications/test?fail=${intentionallyFail ? 1 : 0}`)
        .then(() => {
-          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
+          this.$toast.success('Triggered onTest Event')
        })
        .catch((error) => {
          console.error('Failed', error)
          const errorMsg = error.response ? error.response.data : null
-          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
+          this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger onTest event')
        })
        .finally(() => {
          this.testing = false
@ -91,7 +91,7 @@ export default {
    // End testing functions
    sendTestClick() {
      const payload = {
-        message: this.$strings.MessageConfirmNotificationTestTrigger,
+        message: `Trigger this notification with test data?`,
        callback: (confirmed) => {
          if (confirmed) {
            this.sendTest()
@ -106,12 +106,12 @@ export default {
      this.$axios
        .$get(`/api/notifications/${this.notification.id}/test`)
        .then(() => {
-          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
+          this.$toast.success('Triggered test notification')
        })
        .catch((error) => {
          console.error('Failed', error)
          const errorMsg = error.response ? error.response.data : null
-          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
+          this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger test notification')
        })
        .finally(() => {
          this.sendingTest = false
@ -127,10 +127,11 @@ export default {
        .$patch(`/api/notifications/${this.notification.id}`, payload)
        .then((updatedSettings) => {
          this.$emit('update', updatedSettings)
+          this.$toast.success('Notification enabled')
        })
        .catch((error) => {
          console.error('Failed to update notification', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error('Failed to update notification')
        })
        .finally(() => {
          this.enabling = false
@ -138,7 +139,7 @@ export default {
    },
    deleteNotificationClick() {
      const payload = {
-        message: this.$strings.MessageConfirmDeleteNotification,
+        message: `Are you sure you want to delete this notification?`,
        callback: (confirmed) => {
          if (confirmed) {
            this.deleteNotification()
@ -154,10 +155,11 @@ export default {
        .$delete(`/api/notifications/${this.notification.id}`)
        .then((updatedSettings) => {
          this.$emit('update', updatedSettings)
+          this.$toast.success('Deleted notification')
        })
        .catch((error) => {
          console.error('Failed', error)
-          this.$toast.error(this.$strings.ToastNotificationDeleteFailed)
+          this.$toast.error('Failed to delete notification')
        })
        .finally(() => {
          this.deleting = false
@ -169,4 +171,4 @@ export default {
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/cards/PodcastFeedSummaryCard.vue
+++ b/client/components/cards/PodcastFeedSummaryCard.vue
@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="w-full p-2 border border-white/10 rounded-sm">
+  <div ref="wrapper" class="w-full p-2 border border-white border-opacity-10 rounded">
    <div class="flex">
      <div class="w-16 min-w-16">
        <div class="w-full h-16 bg-primary">
@ -7,7 +7,7 @@
        </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' }">
+      <div class="flex-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>
@ -68,4 +68,4 @@ export default {
    this.width = this.$refs.wrapper.clientWidth
  }
 }
-</script>
+</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>
--- a/client/components/cards/TagSearchCard.vue
+++ b/client/components/cards/TagSearchCard.vue
@ -3,7 +3,7 @@
    <div class="w-10 h-10 flex items-center justify-center">
      <span class="material-symbols 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>
--- a/client/components/content/LibraryItemDetails.vue
+++ b/client/components/content/LibraryItemDetails.vue
@ -1,45 +1,77 @@
 <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 class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNarrators }}</span>
      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-ellipsis">
+      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-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 v-if="publishedYear" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-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 v-if="publisher" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-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 v-if="musicAlbum" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">Album</span>
+      </div>
+      <div>
+        {{ musicAlbum }}
+      </div>
+    </div>
+    <div v-if="musicAlbumArtist" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">Album Artist</span>
+      </div>
+      <div>
+        {{ musicAlbumArtist }}
+      </div>
+    </div>
+    <div v-if="musicTrackPretty" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">Track</span>
+      </div>
+      <div>
+        {{ musicTrackPretty }}
+      </div>
+    </div>
+    <div v-if="musicDiscPretty" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">Disc</span>
+      </div>
+      <div>
+        {{ musicDiscPretty }}
+      </div>
+    </div>
+    <div v-if="podcastType" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-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 class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelGenres }}</span>
      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-ellipsis">
+      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-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>
@ -47,10 +79,10 @@
      </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 class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelTags }}</span>
      </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden text-ellipsis">
+      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-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>
@ -58,24 +90,24 @@
      </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 class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-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 v-if="tracks.length || audioFile || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-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 class="flex py-0.5">
+      <div class="w-24 min-w-24 sm:w-32 sm:min-w-32">
+        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelSize }}</span>
      </div>
      <div>
        {{ sizePretty }}
@ -102,6 +134,10 @@ export default {
    isPodcast() {
      return this.libraryItem.mediaType === 'podcast'
    },
+    audioFile() {
+      // Music track
+      return this.media.audioFile
+    },
    media() {
      return this.libraryItem.media || {}
    },
@ -132,6 +168,25 @@ export default {
    publisher() {
      return this.mediaMetadata.publisher || ''
    },
+    musicArtists() {
+      return this.mediaMetadata.artists || []
+    },
+    musicAlbum() {
+      return this.mediaMetadata.album || ''
+    },
+    musicAlbumArtist() {
+      return this.mediaMetadata.albumArtist || ''
+    },
+    musicTrackPretty() {
+      if (!this.mediaMetadata.trackNumber) return null
+      if (!this.mediaMetadata.trackTotal) return this.mediaMetadata.trackNumber
+      return `${this.mediaMetadata.trackNumber} / ${this.mediaMetadata.trackTotal}`
+    },
+    musicDiscPretty() {
+      if (!this.mediaMetadata.discNumber) return null
+      if (!this.mediaMetadata.discTotal) return this.mediaMetadata.discNumber
+      return `${this.mediaMetadata.discNumber} / ${this.mediaMetadata.discTotal}`
+    },
    narrators() {
      return this.mediaMetadata.narrators || []
    },
@ -165,4 +220,4 @@ export default {
  methods: {},
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/controls/FilterSelect.vue
+++ b/client/components/controls/FilterSelect.vue
@ -1,25 +1,23 @@
 <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 border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none 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">{{ 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">
+      <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-symbols" style="font-size: 1.1rem">close</span>
-      </button>
-    </div>
+      </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">
+    <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 ring-opacity-5 overflow-auto focus:outline-none">
+      <ul class="h-full w-full" 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)">
+          <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="option" @click="clickedOption(item)">
            <div class="flex items-center justify-between">
              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
            </div>
@ -88,4 +86,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@ -1,15 +1,15 @@
 <template>
  <div class="">
    <div class="w-full relative sm:w-80">
-      <form role="search" @submit.prevent="submitSearch">
+      <form @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>
+      <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-symbols" style="font-size: 1.2rem">search</span>
        <span v-else class="material-symbols" style="font-size: 1.2rem">close</span>
-      </button>
+      </div>
    </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 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 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>
@ -42,7 +42,7 @@
          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelAuthors }}</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}`">
+              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(item.id)}`">
                <cards-author-search-card :author="item" />
              </nuxt-link>
            </li>
@ -157,7 +157,7 @@ export default {
      clearTimeout(this.focusTimeout)
      this.focusTimeout = setTimeout(() => {
        this.showMenu = false
-      }, 100)
+      }, 200)
    },
    async runSearch(value) {
      this.lastSearch = value
--- a/client/components/controls/LibraryFilterSelect.vue
+++ b/client/components/controls/LibraryFilterSelect.vue
@ -1,30 +1,28 @@
 <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>
+    <button type="button" class="relative w-full h-full bg-bg 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 :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">
+      <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-200" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
        <span class="material-symbols" style="font-size: 1.1rem">close</span>
-      </button>
-    </div>
+      </div>
+    </button>

-    <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">
+    <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 ring-opacity-5 overflow-auto focus:outline-none text-sm libraryFilterMenu">
+      <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="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)">
+          <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="option" @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>
+              <span class="material-symbols text-2xl">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">
@ -33,8 +31,8 @@
          </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">
+      <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-white/5" role="option" @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>
@ -42,13 +40,13 @@
            <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">
+        <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">{{ $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)">
+          <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="option" @click="clickedSublistOption(item.value)">
            <div class="flex items-center">
              <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
            </div>
@ -100,6 +98,9 @@ export default {
    isPodcast() {
      return this.libraryMediaType === 'podcast'
    },
+    isMusic() {
+      return this.libraryMediaType === 'music'
+    },
    seriesItems() {
      return [
        {
@ -191,12 +192,6 @@ export default {
          value: 'publishers',
          sublist: true
        },
-        {
-          text: this.$strings.LabelPublishedDecade,
-          textPlural: this.$strings.LabelPublishedDecades,
-          value: 'publishedDecades',
-          sublist: true
-        },
        {
          text: this.$strings.LabelLanguage,
          textPlural: this.$strings.LabelLanguages,
@ -279,9 +274,35 @@ export default {
        }
      ]
    },
+    musicItems() {
+      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.ButtonIssues,
+          value: 'issues',
+          sublist: false
+        }
+      ]
+    },
    selectItems() {
      if (this.isSeries) return this.seriesItems
      if (this.isPodcast) return this.podcastItems
+      if (this.isMusic) return this.musicItems
      return this.bookItems
    },
    selectedItemSublist() {
@ -346,9 +367,6 @@ export default {
    publishers() {
      return this.filterData.publishers || []
    },
-    publishedDecades() {
-      return this.filterData.publishedDecades || []
-    },
    progress() {
      return [
        {
@ -415,17 +433,21 @@ export default {
          id: 'isbn',
          name: 'ISBN'
        },
+        {
+          id: 'subtitle',
+          name: this.$strings.LabelSubtitle
+        },
        {
          id: 'authors',
          name: this.$strings.LabelAuthor
        },
        {
-          id: 'chapters',
-          name: this.$strings.LabelChapters
+          id: 'publishedYear',
+          name: this.$strings.LabelPublishYear
        },
        {
-          id: 'cover',
-          name: this.$strings.LabelCover
+          id: 'series',
+          name: this.$strings.LabelSeries
        },
        {
          id: 'description',
@ -436,32 +458,24 @@ export default {
          name: this.$strings.LabelGenres
        },
        {
-          id: 'language',
-          name: this.$strings.LabelLanguage
+          id: 'tags',
+          name: this.$strings.LabelTags
        },
        {
          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: 'language',
+          name: this.$strings.LabelLanguage
        },
        {
-          id: 'subtitle',
-          name: this.$strings.LabelSubtitle
-        },
-        {
-          id: 'tags',
-          name: this.$strings.LabelTags
+          id: 'cover',
+          name: this.$strings.LabelCover
        }
      ]
    },
--- a/client/components/controls/LibrarySortSelect.vue
+++ b/client/components/controls/LibrarySortSelect.vue
@ -1,20 +1,20 @@
 <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">
+    <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-symbols 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-96 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-96 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
      <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)">
+        <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="option" @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 class="material-symbols text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
          </span>
        </li>
      </template>
@ -56,6 +56,9 @@ export default {
    isPodcast() {
      return this.libraryMediaType === 'podcast'
    },
+    isMusic() {
+      return this.libraryMediaType === 'music'
+    },
    podcastItems() {
      return [
        {
@ -145,10 +148,40 @@ export default {
        }
      ]
    },
+    musicItems() {
+      return [
+        {
+          text: this.$strings.LabelTitle,
+          value: 'media.metadata.title'
+        },
+        {
+          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'
+        }
+      ]
+    },
    selectItems() {
      let items = null
      if (this.isPodcast) {
        items = this.podcastItems
+      } else if (this.isMusic) {
+        items = this.musicItems
      } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
        items = this.seriesItems
      } else {
--- 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="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 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base">x</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 v-show="showMenu" class="absolute -top-20 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 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">x</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-2xl sm:text-3xl">{{ playbackRate }}<span class="text-2xl">x</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() {
@ -45,7 +41,7 @@ export default {
      currentPlaybackRate: 0,
      MIN_SPEED: 0.5,
      MAX_SPEED: 10,
-      menuLeft: -96,
+      menuLeft: -92,
      arrowLeft: 0
    }
  },
@ -62,17 +58,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,14 +73,14 @@ 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))
+      if (this.playbackRate - 0.1 < this.MIN_SPEED) return
+      var newPlaybackRate = this.playbackRate - 0.1
+      this.playbackRate = Number(newPlaybackRate.toFixed(1))
    },
    updateMenuPositions() {
      if (!this.$refs.wrapper) return
@ -100,9 +89,9 @@ export default {
      if (boundingBox.left + 110 > window.innerWidth - 10) {
        this.menuLeft = window.innerWidth - 230 - boundingBox.left

-        this.arrowLeft = Math.abs(this.menuLeft) - 96
+        this.arrowLeft = Math.abs(this.menuLeft) - 92
      } else {
-        this.menuLeft = -96
+        this.menuLeft = -92
        this.arrowLeft = 0
      }
    },
@ -120,4 +109,4 @@ export default {
    this.currentPlaybackRate = this.playbackRate
  }
 }
-</script>
+</script>
--- a/client/components/controls/SortSelect.vue
+++ b/client/components/controls/SortSelect.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 border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none 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-symbols 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 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none 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="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="option" @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 class="material-symbols text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
          </span>
        </li>
      </template>
@ -77,4 +77,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/controls/VolumeControl.vue
+++ b/client/components/controls/VolumeControl.vue
@ -4,10 +4,10 @@
      <span class="material-symbols text-2xl sm:text-3xl">{{ volumeIcon }}</span>
    </button>
    <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
    }
  },
@ -45,9 +45,9 @@ export default {
        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 +89,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 +113,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 +137,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
    }
@ -140,7 +147,7 @@ export default {
      this.isMute = true
    }
    const storageVolume = localStorage.getItem('volume')
-    if (storageVolume && !isNaN(storageVolume)) {
+    if (storageVolume) {
      this.volume = parseFloat(storageVolume)
    }
  },
@ -150,4 +157,4 @@ export default {
    document.body.removeEventListener('mouseup', this.mouseup)
  }
 }
-</script>
+</script>
--- a/client/components/covers/AuthorImage.vue
+++ b/client/components/covers/AuthorImage.vue
@ -56,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${this.$config.routerBasePath}/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
--- a/client/components/covers/BookCover.vue
+++ b/client/components/covers/BookCover.vue
@ -1,7 +1,7 @@
 <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>

@ -96,8 +96,8 @@ export default {
      return this.author
    },
    placeholderUrl() {
-      const store = this.$store || this.$nuxt.$store
-      return store.getters['globals/getPlaceholderCoverSrc']
+      const config = this.$config || this.$nuxt.$config
+      return `${config.routerBasePath}/book_placeholder.jpg`
    },
    fullCoverUrl() {
      if (!this.libraryItem) return null
--- 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="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
@ -109,7 +109,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 +121,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'

--- a/client/components/covers/PlaylistCover.vue
+++ b/client/components/covers/PlaylistCover.vue
@ -1,11 +1,11 @@
 <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" />
+  <div class="relative rounded-sm 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 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 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 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" />
    </div>
  </div>
 </template>
@ -48,4 +48,4 @@ export default {
  methods: {},
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/covers/PreviewCover.vue
+++ b/client/components/covers/PreviewCover.vue
@ -1,12 +1,12 @@
 <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="relative rounded-sm" :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 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'" />

-      <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' }">
+      <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-symbols" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
      </a>
    </div>
@ -18,7 +18,7 @@
      </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>
+    <p v-if="!imageFailed && showResolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
  </div>
 </template>

@ -65,12 +65,11 @@ export default {
      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']
+      const config = this.$config || this.$nuxt.$config
+      return `${config.routerBasePath}/book_placeholder.jpg`
    }
  },
  methods: {
--- a/client/components/modals/AccountModal.vue
+++ b/client/components/modals/AccountModal.vue
@ -69,15 +69,6 @@
              </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>
-              </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>
@ -120,10 +111,10 @@
          </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="hasOpenIDLink" small :loading="unlinkingFromOpenID" color="primary" type="button" class="mr-2" @click.stop="unlinkOpenID">Unlink OpenID</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>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
          </div>
        </div>
      </div>
@ -221,19 +212,19 @@ export default {
    },
    unlinkOpenID() {
      const payload = {
-        message: this.$strings.MessageConfirmUnlinkOpenId,
+        message: 'Are you sure you want to unlink this user from OpenID?',
        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.$toast.success('User unlinked from OpenID')
                this.show = false
              })
              .catch((error) => {
                console.error('Failed to unlink user from OpenID', error)
-                this.$toast.error(this.$strings.ToastUnlinkOpenIdFailed)
+                this.$toast.error('Failed to unlink user from OpenID')
              })
              .finally(() => {
                this.unlinkingFromOpenID = false
@ -274,15 +265,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)
+        this.$toast.error('Must select at least one tag')
        return
      }

@ -305,7 +296,7 @@ export default {
        .then((data) => {
          this.processing = false
          if (data.error) {
-            this.$toast.error(`${this.$strings.ToastFailedToUpdate}: ${data.error}`)
+            this.$toast.error(`${this.$strings.ToastAccountUpdateFailed}: ${data.error}`)
          } else {
            console.log('Account updated', data.user)

@ -322,12 +313,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 +329,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
          }
        })
@ -360,11 +351,9 @@ export default {
        update: type === 'admin',
        delete: type === 'admin',
        upload: type === 'admin',
-        accessExplicitContent: type === 'admin',
        accessAllLibraries: true,
        accessAllTags: true,
-        selectedTagsNotAccessible: false,
-        createEreader: type === 'admin'
+        selectedTagsNotAccessible: false
      }
    },
    init() {
@ -396,9 +385,7 @@ export default {
            upload: false,
            accessAllLibraries: true,
            accessAllTags: true,
-            accessExplicitContent: false,
-            selectedTagsNotAccessible: false,
-            createEreader: false
+            selectedTagsNotAccessible: false
          },
          librariesAccessible: [],
          itemTagsSelected: []
--- a/client/components/modals/AddCustomMetadataProviderModal.vue
+++ b/client/components/modals/AddCustomMetadataProviderModal.vue
@ -2,7 +2,7 @@
  <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>
+        <p class="text-3xl text-white truncate">Add custom metadata provider</p>
      </div>
    </template>
    <form @submit.prevent="submitForm">
@ -10,21 +10,21 @@
        <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 />
+              <ui-text-input-with-label v-model="newName" :label="$strings.LabelName" />
            </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 />
+            <ui-text-input-with-label v-model="newUrl" label="URL" />
          </div>
          <div class="w-full mb-2 p-1">
-            <ui-text-input-with-label v-model="newAuthHeaderValue" :label="$strings.LabelProviderAuthorizationValue" type="password" />
+            <ui-text-input-with-label v-model="newAuthHeaderValue" :label="'Authorization Header Value'" 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 class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonAdd }}</ui-btn>
          </div>
        </div>
      </div>
@ -65,13 +65,9 @@ export default {
    }
  },
  methods: {
-    async submitForm() {
-      // Remove focus from active input
-      document.activeElement?.blur?.()
-      await this.$nextTick()
-
+    submitForm() {
      if (!this.newName || !this.newUrl) {
-        this.$toast.error(this.$strings.ToastProviderNameAndUrlRequired)
+        this.$toast.error('Must add name and url')
        return
      }

@ -85,13 +81,13 @@ export default {
        })
        .then((data) => {
          this.$emit('added', data.provider)
-          this.$toast.success(this.$strings.ToastProviderCreatedSuccess)
+          this.$toast.success('New provider added')
          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)
+          this.$toast.error('Failed to add provider: ' + errorMsg)
        })
        .finally(() => {
          this.processing = false
--- a/client/components/modals/AudioFileDataModal.vue
+++ b/client/components/modals/AudioFileDataModal.vue
@ -4,10 +4,10 @@
      <div class="flex items-center justify-between">
        <p class="text-base text-gray-200 truncate">{{ metadata.filename }}</p>
        <ui-btn v-if="ffprobeData" small class="ml-2" @click="ffprobeData = null">{{ $strings.ButtonReset }}</ui-btn>
-        <ui-btn v-else-if="userIsAdminOrUp" small :loading="probingFile" class="ml-2" @click="getFFProbeData">{{ $strings.ButtonProbeAudioFile }}</ui-btn>
+        <ui-btn v-else-if="userIsAdminOrUp" small :loading="probingFile" class="ml-2" @click="getFFProbeData">Probe Audio File</ui-btn>
      </div>

-      <div class="w-full h-px bg-white/10 my-4" />
+      <div class="w-full h-px bg-white bg-opacity-10 my-4" />

      <template v-if="!ffprobeData">
        <ui-text-input-with-label :value="metadata.path" readonly :label="$strings.LabelPath" class="mb-4 text-sm" />
@ -75,7 +75,7 @@
          </div>
        </div>

-        <div class="w-full h-px bg-white/10 my-4" />
+        <div class="w-full h-px bg-white bg-opacity-10 my-4" />

        <p class="font-bold mb-2">{{ $strings.LabelMetaTags }}</p>

@ -90,8 +90,8 @@
        <div class="relative">
          <ui-textarea-with-label :value="prettyFfprobeData" readonly :rows="30" class="text-xs" />

-          <button class="absolute top-4 right-4" :class="hasCopied ? 'text-success' : 'text-gray-400 hover:text-white'" @click.stop="copyToClipboard">
-            <span class="material-symbols">{{ hasCopied ? 'done' : 'content_copy' }}</span>
+          <button class="absolute top-4 right-4" :class="copiedToClipboard ? 'text-success' : 'text-white/50 hover:text-white/80'" @click.stop="copyFfprobeData">
+            <span class="material-symbols">{{ copiedToClipboard ? 'check' : 'content_copy' }}</span>
          </button>
        </div>
      </div>
@ -113,13 +113,14 @@ export default {
    return {
      probingFile: false,
      ffprobeData: null,
-      hasCopied: null
+      copiedToClipboard: false
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.ffprobeData = null
+        this.copiedToClipboard = false
        this.probingFile = false
      }
    }
@ -158,19 +159,14 @@ export default {
        })
        .catch((error) => {
          console.error('Failed to get ffprobe data', error)
-          this.$toast.error(this.$strings.ToastFailedToLoadData)
+          this.$toast.error('FFProbe failed')
        })
        .finally(() => {
          this.probingFile = false
        })
    },
-    copyToClipboard() {
-      clearTimeout(this.hasCopied)
-      this.$copyToClipboard(this.prettyFfprobeData).then((success) => {
-        this.hasCopied = setTimeout(() => {
-          this.hasCopied = null
-        }, 2000)
-      })
+    async copyFfprobeData() {
+      this.copiedToClipboard = await this.$copyToClipboard(this.prettyFfprobeData)
    }
  },
  mounted() {}
--- a/client/components/modals/BackupScheduleModal.vue
+++ b/client/components/modals/BackupScheduleModal.vue
@ -9,7 +9,7 @@
      <widgets-cron-expression-builder ref="expressionBuilder" v-model="newCronExpression" @input="expressionUpdated" />

      <div class="flex items-center justify-end">
-        <ui-btn :disabled="!isUpdated" @click="submit">{{ isUpdated ? $strings.ButtonSave : $strings.MessageNoUpdatesWereNecessary }}</ui-btn>
+        <ui-btn :disabled="!isUpdated" @click="submit">{{ isUpdated ? $strings.ButtonSave : $strings.MessageNoUpdateNecessary }}</ui-btn>
      </div>
    </div>
  </modals-modal>
--- a/client/components/modals/BatchQuickMatchModel.vue
+++ b/client/components/modals/BatchQuickMatchModel.vue
@ -6,7 +6,7 @@
      </div>
    </template>

-    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
      <div v-if="show" class="w-full h-full py-4">
        <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
          <div class="flex px-8 items-center py-2">
@ -32,11 +32,11 @@
              </p>
            </ui-tooltip>
          </div>
-          <div class="mt-4 pt-4 text-white/80 border-t border-white/5">
+          <div class="mt-4 pt-4 text-white text-opacity-80 border-t border-white border-opacity-5">
            <div class="flex items-center px-4">
              <ui-btn type="button" @click="show = false">{{ $strings.ButtonCancel }}</ui-btn>
-              <div class="grow" />
-              <ui-btn color="bg-success" @click="doBatchQuickMatch">{{ $strings.ButtonSubmit }}</ui-btn>
+              <div class="flex-grow" />
+              <ui-btn color="success" @click="doBatchQuickMatch">{{ $strings.ButtonSubmit }}</ui-btn>
            </div>
          </div>
        </div>
@ -54,7 +54,8 @@ export default {
      options: {
        provider: undefined,
        overrideDetails: true,
-        overrideCover: true
+        overrideCover: true,
+        overrideDefaults: true
      }
    }
  },
@ -98,8 +99,8 @@ export default {
    init() {
      // If we don't have a set provider (first open of dialog) or we've switched library, set
      // the selected provider to the current library default provider
-      if (!this.options.provider || this.lastUsedLibrary != this.currentLibraryId) {
-        this.lastUsedLibrary = this.currentLibraryId
+      if (!this.options.provider || this.options.lastUsedLibrary != this.currentLibraryId) {
+        this.options.lastUsedLibrary = this.currentLibraryId
        this.options.provider = this.libraryProvider
      }
    },
@ -115,10 +116,10 @@ export default {
          libraryItemIds: this.selectedBookIds
        })
        .then(() => {
-          this.$toast.info(this.$getString('ToastBatchQuickMatchStarted', [this.selectedBookIds.length]))
+          this.$toast.info('Batch quick match of ' + this.selectedBookIds.length + ' books started!')
        })
        .catch((error) => {
-          this.$toast.error(this.$strings.ToastBatchQuickMatchFailed)
+          this.$toast.error('Batch quick match failed')
          console.error('Failed to batch quick match', error)
        })
        .finally(() => {
--- a/client/components/modals/BookmarksModal.vue
+++ b/client/components/modals/BookmarksModal.vue
@ -5,28 +5,26 @@
        <p class="text-3xl text-white truncate">{{ $strings.LabelYourBookmarks }}</p>
      </div>
    </template>
-    <div v-if="show" class="w-full rounded-lg bg-bg box-shadow-md relative" style="max-height: 80vh">
-      <div v-if="bookmarks.length" class="h-full max-h-[calc(80vh-60px)] w-full relative overflow-y-auto overflow-x-hidden">
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div v-if="show" class="w-full h-full">
        <template v-for="bookmark in bookmarks">
-          <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" :playback-rate="playbackRate" @click="clickBookmark" @delete="deleteBookmark" />
+          <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @update="submitUpdateBookmark" @delete="deleteBookmark" />
        </template>
-      </div>
-      <div v-else class="flex h-32 items-center justify-center">
-        <p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
-      </div>
-
-      <div v-if="canCreateBookmark && !hideCreate" class="w-full border-t border-white/10">
-        <form @submit.prevent="submitCreateBookmark">
-          <div class="flex px-4 py-2 items-center text-center border-b border-white/10 text-white/80">
+        <div v-if="!bookmarks.length" class="flex h-32 items-center justify-center">
+          <p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
+        </div>
+        <div v-if="!hideCreate" class="w-full h-px bg-white bg-opacity-10" />
+        <form v-if="!hideCreate" @submit.prevent="submitCreateBookmark">
+          <div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
            <div class="w-16 max-w-16 text-center">
              <p class="text-sm font-mono text-gray-400">
-                {{ this.$secondsToTimestamp(currentTime / playbackRate) }}
+                {{ this.$secondsToTimestamp(currentTime) }}
              </p>
            </div>
-            <div class="grow px-2">
-              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full h-10" />
+            <div class="flex-grow px-2">
+              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
            </div>
-            <ui-btn type="submit" color="bg-success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">add</span></ui-btn>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">add</span></ui-btn>
          </div>
        </form>
      </div>
@ -47,7 +45,6 @@ export default {
      default: 0
    },
    libraryItemId: String,
-    playbackRate: Number,
    hideCreate: Boolean
  },
  data() {
@ -60,7 +57,6 @@ export default {
  watch: {
    show(newVal) {
      if (newVal) {
-        this.selectedBookmark = null
        this.showBookmarkTitleInput = false
        this.newBookmarkTitle = ''
      }
@ -76,7 +72,7 @@ export default {
      }
    },
    canCreateBookmark() {
-      return !this.bookmarks.find((bm) => Math.abs(this.currentTime - bm.time) < 1)
+      return !this.bookmarks.find((bm) => bm.time === this.currentTime)
    },
    dateFormat() {
      return this.$store.state.serverSettings.dateFormat
@ -98,7 +94,7 @@ export default {
          this.$toast.success(this.$strings.ToastBookmarkRemoveSuccess)
        })
        .catch((error) => {
-          this.$toast.error(this.$strings.ToastRemoveFailed)
+          this.$toast.error(this.$strings.ToastBookmarkRemoveFailed)
          console.error(error)
        })
      this.show = false
@ -106,6 +102,19 @@ export default {
    clickBookmark(bm) {
      this.$emit('select', bm)
    },
+    submitUpdateBookmark(updatedBookmark) {
+      var bookmark = { ...updatedBookmark }
+      this.$axios
+        .$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastBookmarkUpdateSuccess)
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastBookmarkUpdateFailed)
+          console.error(error)
+        })
+      this.show = false
+    },
    submitCreateBookmark() {
      if (!this.newBookmarkTitle) {
        this.newBookmarkTitle = this.$formatDatetime(Date.now(), this.dateFormat, this.timeFormat)
--- a/client/components/modals/ChaptersModal.vue
+++ b/client/components/modals/ChaptersModal.vue
@ -7,7 +7,7 @@
            {{ chap.title }}
          </p>
          <span class="font-mono text-xxs sm:text-xs text-gray-400 pl-2 whitespace-nowrap">{{ $elapsedPrettyExtended((chap.end - chap.start) / _playbackRate) }}</span>
-          <span class="grow" />
+          <span class="flex-grow" />
          <span class="font-mono text-xs sm:text-sm text-gray-300">{{ $secondsToTimestamp(chap.start / _playbackRate) }}</span>

          <div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
--- a/client/components/modals/Dialog.vue
+++ b/client/components/modals/Dialog.vue
@ -7,12 +7,12 @@
    </template>

    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white/20" style="max-height: 75%" @click.stop>
+      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
        <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
          <template v-for="item in items">
-            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success/10' : ''" role="option" @click="clickedOption(item.value)">
+            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" role="option" @click="clickedOption(item.value)">
              <div class="relative flex items-center px-3">
-                <p class="font-normal block truncate text-base text-white/80">{{ item.text }}</p>
+                <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
              </div>
            </li>
          </template>
--- a/client/components/modals/EditSeriesInputInnerModal.vue
+++ b/client/components/modals/EditSeriesInputInnerModal.vue
@ -1,14 +1,14 @@
 <template>
-  <div ref="wrapper" role="dialog" aria-modal="true" class="hidden absolute top-0 left-0 w-full h-full bg-black/50 rounded-lg items-center justify-center" style="z-index: 61" @click="clickClose">
-    <button type="button" class="absolute top-3 right-3 md:top-5 md:right-5 h-8 w-8 md:h-12 md:w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" aria-label="Close modal">
+  <div ref="wrapper" class="hidden absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 rounded-lg items-center justify-center" style="z-index: 61" @click="clickClose">
+    <div class="absolute top-3 right-3 md:top-5 md:right-5 h-8 w-8 md:h-12 md:w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
      <span class="material-symbols text-2xl md:text-4xl">close</span>
-    </button>
+    </div>
    <div ref="content" class="text-white">
      <form v-if="selectedSeries" @submit.prevent="submitSeriesForm">
        <div class="bg-bg rounded-lg px-2 py-6 sm:p-6 md:p-8" @click.stop>
          <div class="flex">
-            <div class="grow p-1 min-w-48 sm:min-w-64 md:min-w-80">
-              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!isNewSeries" :label="$strings.LabelSeriesName" @input="seriesNameInputHandler" />
+            <div class="flex-grow p-1 min-w-48 sm:min-w-64 md:min-w-80">
+              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!isNewSeries" :label="$strings.LabelSeriesName" />
            </div>
            <div class="w-24 sm:w-28 md:w-40 p-1">
              <ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" :label="$strings.LabelSequence" />
@ -66,11 +66,6 @@ export default {
    }
  },
  methods: {
-    seriesNameInputHandler() {
-      if (this.$refs.sequenceInput) {
-        this.$refs.sequenceInput.setFocus()
-      }
-    },
    setInputFocus() {
      if (this.isNewSeries) {
        // Focus on series input if new series
@ -139,4 +134,4 @@ export default {
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/modals/ListeningSessionModal.vue
+++ b/client/components/modals/ListeningSessionModal.vue
@ -11,7 +11,7 @@
        <p v-if="_session.displayAuthor" class="text-xs text-gray-400 px-4">{{ $getString('LabelByAuthor', [_session.displayAuthor]) }}</p>
      </div>

-      <div class="w-full h-px bg-white/10 my-4" />
+      <div class="w-full h-px bg-white bg-opacity-10 my-4" />

      <div class="flex flex-wrap mb-4">
        <div class="w-full md:w-2/3">
@ -99,8 +99,8 @@
      </div>

      <div class="flex items-center">
-        <ui-btn v-if="!isOpenSession && !isMediaItemShareSession" small color="bg-error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
-        <ui-btn v-else-if="!isMediaItemShareSession" small color="bg-error" @click.stop="closeSessionClick">{{ $strings.ButtonCloseSession }}</ui-btn>
+        <ui-btn v-if="!isOpenSession && !isMediaItemShareSession" small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-else-if="!isMediaItemShareSession" small color="error" @click.stop="closeSessionClick">Close Open Session</ui-btn>
      </div>
    </div>
  </modals-modal>
@ -206,13 +206,14 @@ export default {
      this.$axios
        .$post(`/api/session/${this._session.id}/close`)
        .then(() => {
+          this.$toast.success('Session closed')
          this.show = false
          this.$emit('closedSession')
        })
        .catch((error) => {
          console.error('Failed to close session', error)
          const errMsg = error.response?.data || ''
-          this.$toast.error(errMsg || this.$strings.ToastSessionCloseFailed)
+          this.$toast.error(errMsg || 'Failed to close open session')
        })
        .finally(() => {
          this.processing = false
--- a/client/components/modals/Modal.vue
+++ b/client/components/modals/Modal.vue
@ -1,14 +1,14 @@
 <template>
-  <div ref="wrapper" role="dialog" aria-modal="true" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-primary/${bgOpacity}`">
-    <div class="absolute top-0 left-0 right-0 w-full h-36 bg-linear-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
+    <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />

    <button class="absolute top-4 right-4 landscape:top-4 landscape:right-4 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 inline-flex text-gray-200 hover:text-white" aria-label="Close modal" @click="clickClose">
      <span class="material-symbols text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
    </button>
    <slot name="outer" />
-    <div ref="content" tabindex="0" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white outline-hidden" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
+    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" aria-modal="true" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
      <slot />
-      <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black/60 rounded-lg flex items-center justify-center">
+      <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
        <ui-loading-indicator />
      </div>
    </div>
@ -126,9 +126,6 @@ export default {

      this.$eventBus.$on('modal-hotkey', this.hotkey)
      this.$store.commit('setOpenModal', this.name)
-
-      // Set focus to the modal content
-      this.content.focus()
    },
    setHide() {
      if (this.content) this.content.style.transform = 'scale(0)'
@ -163,4 +160,4 @@ export default {
    this.$eventBus.$off('showing-prompt', this.showingPrompt)
  }
 }
-</script>
+</script>
--- a/client/components/modals/PlayerSettingsModal.vue
+++ b/client/components/modals/PlayerSettingsModal.vue
@ -11,12 +11,9 @@
      <div class="flex items-center mb-4">
        <ui-select-input v-model="jumpForwardAmount" :label="$strings.LabelJumpForwardAmount" menuMaxHeight="250px" :items="jumpValues" @input="setJumpForwardAmount" />
      </div>
-      <div class="flex items-center mb-4">
+      <div class="flex items-center">
        <ui-select-input v-model="jumpBackwardAmount" :label="$strings.LabelJumpBackwardAmount" menuMaxHeight="250px" :items="jumpValues" @input="setJumpBackwardAmount" />
      </div>
-      <div class="flex items-center mb-4">
-        <ui-select-input v-model="playbackRateIncrementDecrement" :label="$strings.LabelPlaybackRateIncrementDecrement" menuMaxHeight="250px" :items="playbackRateIncrementDecrementValues" @input="setPlaybackRateIncrementDecrementAmount" />
-      </div>
    </div>
  </modals-modal>
 </template>
@ -38,9 +35,7 @@ export default {
        { text: this.$getString('LabelTimeDurationXMinutes', ['5']), value: 300 }
      ],
      jumpForwardAmount: 10,
-      jumpBackwardAmount: 10,
-      playbackRateIncrementDecrementValues: [0.1, 0.05],
-      playbackRateIncrementDecrement: 0.1
+      jumpBackwardAmount: 10
    }
  },
  computed: {
@ -64,24 +59,12 @@ export default {
    setJumpBackwardAmount(val) {
      this.jumpBackwardAmount = val
      this.$store.dispatch('user/updateUserSettings', { jumpBackwardAmount: val })
-    },
-    setPlaybackRateIncrementDecrementAmount(val) {
-      this.playbackRateIncrementDecrement = val
-      this.$store.dispatch('user/updateUserSettings', { playbackRateIncrementDecrement: val })
-    },
-    settingsUpdated() {
-      this.useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack')
-      this.jumpForwardAmount = this.$store.getters['user/getUserSetting']('jumpForwardAmount')
-      this.jumpBackwardAmount = this.$store.getters['user/getUserSetting']('jumpBackwardAmount')
-      this.playbackRateIncrementDecrement = this.$store.getters['user/getUserSetting']('playbackRateIncrementDecrement')
    }
  },
  mounted() {
-    this.settingsUpdated()
-    this.$eventBus.$on('user-settings', this.settingsUpdated)
-  },
-  beforeDestroy() {
-    this.$eventBus.$off('user-settings', this.settingsUpdated)
+    this.useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack')
+    this.jumpForwardAmount = this.$store.getters['user/getUserSetting']('jumpForwardAmount')
+    this.jumpBackwardAmount = this.$store.getters['user/getUserSetting']('jumpBackwardAmount')
  }
 }
 </script>
--- a/client/components/modals/ShareModal.vue
+++ b/client/components/modals/ShareModal.vue
@ -16,21 +16,20 @@
      <template v-if="currentShare">
        <div class="w-full py-2">
          <label class="px-1 text-sm font-semibold block">{{ $strings.LabelShareURL }}</label>
-          <ui-text-input v-model="currentShareUrl" show-copy readonly />
+          <ui-text-input v-model="currentShareUrl" show-copy readonly class="text-base h-10" />
        </div>
        <div class="w-full py-2 px-1">
-          <p v-if="currentShare.isDownloadable" class="text-sm mb-2">{{ $strings.LabelDownloadable }}</p>
-          <p v-if="currentShare.expiresAt">{{ $getString('MessageShareExpiresIn', [currentShareTimeRemaining]) }}</p>
+          <p v-if="currentShare.expiresAt" class="text-base">{{ $getString('MessageShareExpiresIn', [currentShareTimeRemaining]) }}</p>
          <p v-else>{{ $strings.LabelPermanent }}</p>
        </div>
      </template>
      <template v-else>
-        <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4 mb-2">
+        <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
          <div class="w-full sm:w-48">
            <label class="px-1 text-sm font-semibold block">{{ $strings.LabelSlug }}</label>
            <ui-text-input v-model="newShareSlug" class="text-base h-10" />
          </div>
-          <div class="grow" />
+          <div class="flex-grow" />
          <div class="w-full sm:w-80">
            <label class="px-1 text-sm font-semibold block">{{ $strings.LabelDuration }}</label>
            <div class="inline-flex items-center space-x-2">
@ -47,22 +46,13 @@
            </div>
          </div>
        </div>
-        <div class="flex items-center w-full md:w-1/2 mb-4">
-          <p class="text-sm text-gray-300 py-1 px-1">{{ $strings.LabelDownloadable }}</p>
-          <ui-toggle-switch size="sm" v-model="isDownloadable" />
-          <ui-tooltip :text="$strings.LabelShareDownloadableHelp">
-            <p class="pl-4 text-sm">
-              <span class="material-symbols icon-text text-sm">info</span>
-            </p>
-          </ui-tooltip>
-        </div>
        <p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareURLWillBe', [demoShareUrl])" />
        <p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareExpirationWillBe', [expirationDateString])" />
      </template>
      <div class="flex items-center pt-6">
-        <div class="grow" />
-        <ui-btn v-if="currentShare" color="bg-error" small @click="deleteShare">{{ $strings.ButtonDelete }}</ui-btn>
-        <ui-btn v-if="!currentShare" color="bg-success" small @click="openShare">{{ $strings.ButtonShare }}</ui-btn>
+        <div class="flex-grow" />
+        <ui-btn v-if="currentShare" color="error" small @click="deleteShare">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-if="!currentShare" color="success" small @click="openShare">{{ $strings.ButtonShare }}</ui-btn>
      </div>
    </div>
  </modals-modal>
@ -91,8 +81,7 @@ export default {
          text: this.$strings.LabelDays,
          value: 'days'
        }
-      ],
-      isDownloadable: false
+      ]
    }
  },
  watch: {
@ -123,11 +112,11 @@ export default {
      return this.$store.state.user.user
    },
    demoShareUrl() {
-      return `${window.origin}${this.$config.routerBasePath}/share/${this.newShareSlug}`
+      return `${window.origin}/share/${this.newShareSlug}`
    },
    currentShareUrl() {
      if (!this.currentShare) return ''
-      return `${window.origin}${this.$config.routerBasePath}/share/${this.currentShare.slug}`
+      return `${window.origin}/share/${this.currentShare.slug}`
    },
    currentShareTimeRemaining() {
      if (!this.currentShare) return 'Error'
@ -176,15 +165,14 @@ export default {
    },
    openShare() {
      if (!this.newShareSlug) {
-        this.$toast.error(this.$strings.ToastSlugRequired)
+        this.$toast.error('Slug is required')
        return
      }
      const payload = {
        slug: this.newShareSlug,
        mediaItemType: 'book',
        mediaItemId: this.libraryItem.media.id,
-        expiresAt: this.expireDurationSeconds ? Date.now() + this.expireDurationSeconds * 1000 : 0,
-        isDownloadable: this.isDownloadable
+        expiresAt: this.expireDurationSeconds ? Date.now() + this.expireDurationSeconds * 1000 : 0
      }
      this.processing = true
      this.$axios
--- a/client/components/modals/SleepTimerModal.vue
+++ b/client/components/modals/SleepTimerModal.vue
@ -15,7 +15,7 @@
        </template>
        <form class="flex items-center justify-center px-6 py-3" @submit.prevent="submitCustomTime">
          <ui-text-input v-model="customTime" type="number" step="any" min="0.1" :placeholder="$strings.LabelTimeInMinutes" class="w-48" />
-          <ui-btn color="bg-success" type="submit" :padding-x="0" class="h-9 w-18 flex items-center justify-center ml-1">{{ $strings.ButtonSubmit }}</ui-btn>
+          <ui-btn color="success" type="submit" :padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
        </form>
      </div>
      <div v-if="timerSet" class="w-full p-4">
--- a/client/components/modals/UploadImageModal.vue
+++ b/client/components/modals/UploadImageModal.vue
@ -5,9 +5,9 @@
        <div class="w-40 pr-2 pt-4" style="min-width: 160px">
          <ui-file-input ref="fileInput" @change="fileUploadSelected">Upload Cover</ui-file-input>
        </div>
-        <form @submit.prevent="submitForm" class="flex grow">
+        <form @submit.prevent="submitForm" class="flex flex-grow">
          <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
-          <ui-btn color="bg-success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
+          <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
        </form>
      </div>
      <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
@ -18,7 +18,7 @@
        </div>
        <div class="absolute bottom-0 right-0 flex py-4 px-5">
          <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>
-          <ui-btn :loading="processingUpload" color="bg-success" @click="submitCoverUpload">Upload</ui-btn>
+          <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">Upload</ui-btn>
        </div>
      </div>
    </div>
@ -78,13 +78,14 @@ export default {
          if (data.error) {
            this.$toast.error(data.error)
          } else {
+            this.$toast.success('Cover Uploaded')
            this.resetCoverPreview()
          }
          this.processingUpload = false
        })
        .catch((error) => {
          console.error('Failed', error)
-          var errorMsg = error.response && error.response.data ? error.response.data : this.$strings.ToastUnknownError
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
          this.$toast.error(errorMsg)
          this.processingUpload = false
        })
@ -94,7 +95,7 @@ export default {

      var success = await this.$axios.$post(`/api/${this.entity}/${this.entityId}/cover`, { url: this.imageUrl }).catch((error) => {
        console.error('Failed to download cover from url', error)
-        var errorMsg = error.response && error.response.data ? error.response.data : this.$strings.ToastUnknownError
+        var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
        this.$toast.error(errorMsg)
        return false
      })
@ -103,4 +104,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/modals/authors/EditModal.vue
+++ b/client/components/modals/authors/EditModal.vue
@ -15,10 +15,10 @@
            </div>
          </div>
        </div>
-        <div class="grow">
-          <form @submit.prevent="submitUploadCover" class="flex grow mb-2 p-2">
+        <div class="flex-grow">
+          <form @submit.prevent="submitUploadCover" class="flex flex-grow mb-2 p-2">
            <ui-text-input v-model="imageUrl" :placeholder="$strings.LabelImageURLFromTheWeb" class="h-9 w-full" />
-            <ui-btn color="bg-success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
+            <ui-btn color="success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
          </form>

          <form v-if="author" @submit.prevent="submitForm">
@ -26,7 +26,7 @@
              <div class="w-3/4 p-2">
                <ui-text-input-with-label v-model="authorCopy.name" :disabled="processing" :label="$strings.LabelName" />
              </div>
-              <div class="grow p-2">
+              <div class="flex-grow p-2">
                <ui-text-input-with-label v-model="authorCopy.asin" :disabled="processing" label="ASIN" />
              </div>
            </div>
@ -35,8 +35,8 @@
            </div>

            <div class="flex pt-2 px-2">
-              <ui-btn v-if="userCanDelete" small color="bg-error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
-              <div class="grow" />
+              <ui-btn v-if="userCanDelete" small color="error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
+              <div class="flex-grow" />
              <ui-btn type="button" class="mx-2" @click="searchAuthor">{{ $strings.ButtonQuickMatch }}</ui-btn>

              <ui-btn type="submit">{{ $strings.ButtonSave }}</ui-btn>
@ -116,12 +116,12 @@ export default {
            this.$axios
              .$delete(`/api/authors/${this.authorId}`)
              .then(() => {
-                this.$toast.success(this.$strings.ToastAuthorRemoveSuccess)
+                this.$toast.success('Author removed')
                this.show = false
              })
              .catch((error) => {
                console.error('Failed to remove author', error)
-                this.$toast.error(this.$strings.ToastRemoveFailed)
+                this.$toast.error('Failed to remove author')
              })
              .finally(() => {
                this.processing = false
@ -141,14 +141,14 @@ export default {
        }
      })
      if (!Object.keys(updatePayload).length) {
-        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+        this.$toast.info(this.$strings.MessageNoUpdateNecessary)
        return
      }
      this.processing = true
      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
        console.error('Failed', error)
        const errorMsg = error.response ? error.response.data : null
-        this.$toast.error(errorMsg || this.$strings.ToastFailedToUpdate)
+        this.$toast.error(errorMsg || this.$strings.ToastAuthorUpdateFailed)
        return null
      })
      if (result) {
@ -158,7 +158,7 @@ export default {
        } else if (result.merged) {
          this.$toast.success(this.$strings.ToastAuthorUpdateMerged)
          this.show = false
-        } else this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+        } else this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
      }
      this.processing = false
    },
@ -174,7 +174,7 @@ export default {
        })
        .catch((error) => {
          console.error('Failed', error)
-          this.$toast.error(this.$strings.ToastRemoveFailed)
+          this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
        })
        .finally(() => {
          this.processing = false
@ -182,7 +182,7 @@ export default {
    },
    submitUploadCover() {
      if (!this.imageUrl?.startsWith('http:') && !this.imageUrl?.startsWith('https:')) {
-        this.$toast.error(this.$strings.ToastInvalidImageUrl)
+        this.$toast.error('Invalid image url')
        return
      }

@ -194,14 +194,14 @@ export default {
        .$post(`/api/authors/${this.authorId}/image`, updatePayload)
        .then((data) => {
          this.imageUrl = ''
-          this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
+          this.$toast.success('Author image updated')

          this.authorCopy.updatedAt = data.author.updatedAt
          this.authorCopy.imagePath = data.author.imagePath
        })
        .catch((error) => {
          console.error('Failed', error)
-          this.$toast.error(error.response.data || this.$strings.ToastRemoveFailed)
+          this.$toast.error(error.response.data || 'Failed to remove author image')
        })
        .finally(() => {
          this.processing = false
@ -209,7 +209,7 @@ export default {
    },
    async searchAuthor() {
      if (!this.authorCopy.name && !this.authorCopy.asin) {
-        this.$toast.error(this.$strings.ToastNameRequired)
+        this.$toast.error('Must enter an author name')
        return
      }
      this.processing = true
@ -228,19 +228,17 @@ export default {
        return null
      })
      if (!response) {
-        this.$toast.error(this.$strings.ToastAuthorSearchNotFound)
+        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)
-        }
+        } else this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)

        this.authorCopy = {
          ...response.author
        }
      } else {
-        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+        this.$toast.info('No updates were made for Author')
      }
      this.processing = false
    }
--- a/client/components/modals/bookmarks/BookmarkItem.vue
+++ b/client/components/modals/bookmarks/BookmarkItem.vue
@ -1,20 +1,20 @@
 <template>
-  <div class="flex items-center px-4 py-4 justify-start relative hover:bg-primary/10" :class="wrapperClass" @click.stop="click" @mouseover="mouseover" @mouseleave="mouseleave">
+  <div class="flex items-center px-4 py-4 justify-start relative bg-primary hover:bg-opacity-25" :class="wrapperClass" @click.stop="click" @mouseover="mouseover" @mouseleave="mouseleave">
    <div class="w-16 max-w-16 text-center">
      <p class="text-sm font-mono text-gray-400">
-        {{ this.$secondsToTimestamp(bookmark.time / playbackRate) }}
+        {{ this.$secondsToTimestamp(bookmark.time) }}
      </p>
    </div>
-    <div class="grow overflow-hidden px-2">
+    <div class="flex-grow overflow-hidden px-2">
      <template v-if="isEditing">
        <form @submit.prevent="submitUpdate">
          <div class="flex items-center">
-            <div class="grow pr-2">
-              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full h-10" />
+            <div class="flex-grow pr-2">
+              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
            </div>
-            <ui-btn type="submit" color="bg-success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">forward</span></ui-btn>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-symbols text-2xl -mt-px">forward</span></ui-btn>
            <div class="pl-2 flex items-center">
-              <span class="material-symbols text-3xl text-white/70 hover:text-white/95 cursor-pointer" @click.stop.prevent="cancelEditing">close</span>
+              <span class="material-symbols text-3xl text-white text-opacity-70 hover:text-opacity-95 cursor-pointer" @click.stop.prevent="cancelEditing">close</span>
            </div>
          </div>
        </form>
@ -35,8 +35,7 @@ export default {
      type: Object,
      default: () => {}
    },
-    highlight: Boolean,
-    playbackRate: Number
+    highlight: Boolean
  },
  data() {
    return {
@ -48,7 +47,7 @@ export default {
  computed: {
    wrapperClass() {
      var classes = []
-      if (this.highlight) classes.push('bg-bg/60')
+      if (this.highlight) classes.push('bg-bg bg-opacity-60')
      if (!this.isEditing) classes.push('cursor-pointer')
      return classes.join(' ')
    }
@ -84,19 +83,11 @@ export default {
      if (this.newBookmarkTitle === this.bookmark.title) {
        return this.cancelEditing()
      }
-      const bookmark = { ...this.bookmark }
+      var bookmark = { ...this.bookmark }
      bookmark.title = this.newBookmarkTitle
-
-      this.$axios
-        .$patch(`/api/me/item/${bookmark.libraryItemId}/bookmark`, bookmark)
-        .then(() => {
-          this.isEditing = false
-        })
-        .catch((error) => {
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
-          console.error(error)
-        })
+      this.$emit('update', bookmark)
    }
-  }
+  },
+  mounted() {}
 }
-</script>
+</script>
--- a/client/components/modals/changelog/ViewModal.vue
+++ b/client/components/modals/changelog/ViewModal.vue
@ -2,7 +2,7 @@
  <modals-modal v-model="show" name="changelog" :width="800" :height="'unset'">
    <template #outer>
      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <h1 class="text-3xl text-white truncate">Changelog</h1>
+        <p class="text-3xl text-white truncate">Changelog</p>
      </div>
    </template>
    <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-scroll" style="max-height: 80vh">
@ -13,7 +13,7 @@
          </p>
          <div class="custom-text" v-html="getChangelog(release)" />
        </div>
-        <div v-if="release !== releasesToShow[releasesToShow.length - 1]" :key="`${release.name}-divider`" class="border-b border-black-300 my-8" />
+        <div v-if="release !== releasesToShow[releasesToShow.length - 1]" class="border-b border-black-300 my-8" />
      </template>
    </div>
  </modals-modal>
@ -62,8 +62,6 @@ since we don't have access to the actual elements in this component

 2. v-deep allows these to take effect on the content passed in to the v-html in the div above
 */
-@reference "tailwindcss";
-
 .custom-text ::v-deep > h2 {
  @apply text-lg font-bold;
 }
--- a/client/components/modals/collections/AddCreateModal.vue
+++ b/client/components/modals/collections/AddCreateModal.vue
@ -6,7 +6,7 @@
      </div>
    </template>

-    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
      <div v-if="show" class="w-full h-full">
        <div class="py-4 px-4">
          <h1 v-if="!showBatchCollectionModal" class="text-2xl">{{ $strings.LabelAddToCollection }}</h1>
@ -19,27 +19,16 @@
            </template>
          </transition-group>
        </div>
-        <div v-if="!collections.length" class="flex h-32 items-center justify-center text-center px-2">
-          <div>
-            <p class="text-xl mb-2">{{ $strings.MessageNoCollections }}</p>
-            <div class="text-sm flex items-center justify-center text-gray-200">
-              <p>{{ $strings.MessageBookshelfNoCollectionsHelp }}</p>
-              <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
-                <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
-                  <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
-                </a>
-              </ui-tooltip>
-            </div>
-          </div>
+        <div v-if="!collections.length" class="flex h-32 items-center justify-center">
+          <p class="text-xl">{{ $strings.MessageNoCollections }}</p>
        </div>
-
-        <div class="w-full h-px bg-white/10" />
+        <div class="w-full h-px bg-white bg-opacity-10" />
        <form @submit.prevent="submitCreateCollection">
-          <div class="flex px-4 py-2 items-center text-center border-b border-white/10 text-white/80">
-            <div class="grow px-2">
+          <div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
+            <div class="flex-grow px-2">
              <ui-text-input v-model="newCollectionName" :placeholder="$strings.PlaceholderNewCollection" class="w-full" />
            </div>
-            <ui-btn type="submit" color="bg-success" :padding-x="4" class="h-10">{{ $strings.ButtonCreate }}</ui-btn>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10">{{ $strings.ButtonCreate }}</ui-btn>
          </div>
        </form>
      </div>
@ -149,11 +138,12 @@ export default {
          .$post(`/api/collections/${collection.id}/batch/remove`, { books: this.selectedBookIds })
          .then((updatedCollection) => {
            console.log(`Books removed from collection`, updatedCollection)
+            this.$toast.success(this.$strings.ToastCollectionItemsRemoveSuccess)
            this.processing = false
          })
          .catch((error) => {
            console.error('Failed to remove books from collection', error)
-            this.$toast.error(this.$strings.ToastRemoveFailed)
+            this.$toast.error(this.$strings.ToastCollectionItemsRemoveFailed)
            this.processing = false
          })
      } else {
@ -162,11 +152,12 @@ export default {
          .$delete(`/api/collections/${collection.id}/book/${this.selectedLibraryItemId}`)
          .then((updatedCollection) => {
            console.log(`Book removed from collection`, updatedCollection)
+            this.$toast.success(this.$strings.ToastCollectionItemsRemoveSuccess)
            this.processing = false
          })
          .catch((error) => {
            console.error('Failed to remove book from collection', error)
-            this.$toast.error(this.$strings.ToastRemoveFailed)
+            this.$toast.error(this.$strings.ToastCollectionItemsRemoveFailed)
            this.processing = false
          })
      }
@ -176,16 +167,17 @@ export default {
      this.processing = true

      if (this.showBatchCollectionModal) {
-        // BATCH Add books
+        // BATCH Remove books
        this.$axios
          .$post(`/api/collections/${collection.id}/batch/add`, { books: this.selectedBookIds })
          .then((updatedCollection) => {
            console.log(`Books added to collection`, updatedCollection)
+            this.$toast.success('Books added to collection')
            this.processing = false
          })
          .catch((error) => {
            console.error('Failed to add books to collection', error)
-            this.$toast.error(this.$strings.ToastCollectionItemsAddFailed)
+            this.$toast.error('Failed to add books to collection')
            this.processing = false
          })
      } else {
@ -195,11 +187,12 @@ export default {
          .$post(`/api/collections/${collection.id}/book`, { id: this.selectedLibraryItemId })
          .then((updatedCollection) => {
            console.log(`Book added to collection`, updatedCollection)
+            this.$toast.success('Book added to collection')
            this.processing = false
          })
          .catch((error) => {
            console.error('Failed to add book to collection', error)
-            this.$toast.error(this.$strings.ToastCollectionItemsAddFailed)
+            this.$toast.error('Failed to add book to collection')
            this.processing = false
          })
      }
@ -221,13 +214,14 @@ export default {
        .$post('/api/collections', newCollection)
        .then((data) => {
          console.log('New Collection Created', data)
+          this.$toast.success(`Collection "${data.name}" created`)
          this.processing = false
          this.newCollectionName = ''
        })
        .catch((error) => {
          console.error('Failed to create collection', error)
          var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(this.$strings.ToastCollectionCreateFailed + ': ' + errMsg)
+          this.$toast.error(`Failed to create collection: ${errMsg}`)
          this.processing = false
        })
    }
--- a/client/components/modals/collections/CollectionItem.vue
+++ b/client/components/modals/collections/CollectionItem.vue
@ -1,15 +1,15 @@
 <template>
-  <div class="flex items-center px-4 py-2 justify-start relative hover:bg-black-400" @mouseover="mouseover" @mouseleave="mouseleave">
+  <div class="flex items-center px-4 py-2 justify-start relative hover:bg-bg" @mouseover="mouseover" @mouseleave="mouseleave">
    <div v-if="isBookIncluded" class="absolute top-0 left-0 h-full w-1 bg-success z-10" />
    <div class="w-20 max-w-20 text-center">
      <covers-collection-cover :book-items="books" :width="80" :height="40 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
    </div>
-    <div class="grow overflow-hidden px-2">
+    <div class="flex-grow overflow-hidden px-2">
      <nuxt-link :to="`/collection/${collection.id}`" class="pl-2 pr-2 truncate hover:underline cursor-pointer" @click.native="clickNuxtLink">{{ collection.name }}</nuxt-link>
    </div>
    <div class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
-      <ui-btn v-if="!isBookIncluded" color="bg-success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-symbols text-2xl pt-px">add</span></ui-btn>
-      <ui-btn v-else color="bg-error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-symbols text-2xl pt-px">remove</span></ui-btn>
+      <ui-btn v-if="!isBookIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-symbols text-2xl pt-px">add</span></ui-btn>
+      <ui-btn v-else color="error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-symbols text-2xl pt-px">remove</span></ui-btn>
    </div>
  </div>
 </template>
@ -55,4 +55,4 @@ export default {
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/modals/collections/EditModal.vue
+++ b/client/components/modals/collections/EditModal.vue
@ -12,32 +12,32 @@
            <div class="w-full flex justify-center mb-2 md:w-auto md:mb-0 md:block">
              <covers-collection-cover :book-items="books" :width="200" :height="100 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
            </div>
-            <div class="grow px-4">
+            <div class="flex-grow px-4">
              <ui-text-input-with-label v-model="newCollectionName" :label="$strings.LabelName" class="mb-2" />

              <ui-textarea-with-label v-model="newCollectionDescription" :label="$strings.LabelDescription" />
            </div>
          </div>
-          <div class="absolute bottom-0 left-0 right-0 w-full py-4 px-4 flex">
-            <ui-btn v-if="userCanDelete" small color="bg-error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
-            <div class="grow" />
-            <ui-btn color="bg-success" type="submit">{{ $strings.ButtonSave }}</ui-btn>
+          <div class="absolute bottom-0 left-0 right-0 w-full py-2 px-4 flex">
+            <ui-btn v-if="userCanDelete" small color="error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSave }}</ui-btn>
          </div>
        </form>
      </template>
      <template v-else>
        <div class="flex items-center mb-3">
-          <div class="hover:bg-white/10 cursor-pointer h-11 w-11 flex items-center justify-center rounded-full" @click="showImageUploader = false">
+          <div class="hover:bg-white hover:bg-opacity-10 cursor-pointer h-11 w-11 flex items-center justify-center rounded-full" @click="showImageUploader = false">
            <span class="material-symbols text-4xl">arrow_back</span>
          </div>
          <p class="ml-2 text-xl mb-1">Collection Cover Image</p>
        </div>
        <div class="flex mb-4">
          <ui-btn small class="mr-2">Upload</ui-btn>
-          <ui-text-input v-model="newCoverImage" class="grow" placeholder="Collection Cover Image" />
+          <ui-text-input v-model="newCoverImage" class="flex-grow" placeholder="Collection Cover Image" />
        </div>
        <div class="flex justify-end">
-          <ui-btn color="bg-success">Upload</ui-btn>
+          <ui-btn color="success">Upload</ui-btn>
        </div>
      </template>
    </div>
@ -94,39 +94,28 @@ export default {
      this.newCollectionDescription = this.collection.description || ''
    },
    removeClick() {
-      const payload = {
-        message: this.$getString('MessageConfirmRemoveCollection', [this.collectionName]),
-        callback: (confirmed) => {
-          if (confirmed) {
-            this.deleteCollection()
-          }
-        },
-        type: 'yesNo'
+      if (confirm(this.$getString('MessageConfirmRemoveCollection', [this.collectionName]))) {
+        this.processing = true
+        this.$axios
+          .$delete(`/api/collections/${this.collection.id}`)
+          .then(() => {
+            this.processing = false
+            this.show = false
+            this.$toast.success(this.$strings.ToastCollectionRemoveSuccess)
+          })
+          .catch((error) => {
+            console.error('Failed to remove collection', error)
+            this.processing = false
+            this.$toast.error(this.$strings.ToastCollectionRemoveFailed)
+          })
      }
-      this.$store.commit('globals/setConfirmPrompt', payload)
-    },
-    deleteCollection() {
-      this.processing = true
-      this.$axios
-        .$delete(`/api/collections/${this.collection.id}`)
-        .then(() => {
-          this.show = false
-          this.$toast.success(this.$strings.ToastCollectionRemoveSuccess)
-        })
-        .catch((error) => {
-          console.error('Failed to remove collection', error)
-          this.$toast.error(this.$strings.ToastRemoveFailed)
-        })
-        .finally(() => {
-          this.processing = false
-        })
    },
    submitForm() {
      if (this.newCollectionName === this.collectionName && this.newCollectionDescription === this.collection.description) {
        return
      }
      if (!this.newCollectionName) {
-        return this.$toast.error(this.$strings.ToastNameRequired)
+        return this.$toast.error('Collection must have a name')
      }

      this.processing = true
@ -146,7 +135,7 @@ export default {
        .catch((error) => {
          console.error('Failed to update collection', error)
          this.processing = false
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error(this.$strings.ToastCollectionUpdateFailed)
        })
    }
  },
--- a/client/components/modals/emails/EReaderDeviceModal.vue
+++ b/client/components/modals/emails/EReaderDeviceModal.vue
@ -26,8 +26,8 @@
          </div>

          <div class="flex items-center pt-4">
-            <div class="grow" />
-            <ui-btn color="bg-success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
          </div>
        </div>
      </div>
@ -125,12 +125,12 @@ export default {
      this.$refs.ereaderEmailInput.blur()

      if (!this.newDevice.name?.trim() || !this.newDevice.email?.trim()) {
-        this.$toast.error(this.$strings.ToastNameEmailRequired)
+        this.$toast.error('Name and email required')
        return
      }

      if (this.newDevice.availabilityOption === 'specificUsers' && !this.newDevice.users.length) {
-        this.$toast.error(this.$strings.ToastSelectAtLeastOneUser)
+        this.$toast.error('Must select at least one user')
        return
      }
      if (this.newDevice.availabilityOption !== 'specificUsers') {
@ -142,14 +142,14 @@ export default {

      if (!this.ereaderDevice) {
        if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          this.$toast.error('Ereader device with that name already exists')
          return
        }

        this.submitCreate()
      } else {
        if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
+          this.$toast.error('Ereader device with that name already exists')
          return
        }

@ -174,11 +174,12 @@ export default {
        .$post(`/api/emails/ereader-devices`, payload)
        .then((data) => {
          this.$emit('update', data.ereaderDevices)
+          this.$toast.success('Device updated')
          this.show = false
        })
        .catch((error) => {
          console.error('Failed to update device', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error('Failed to update device')
        })
        .finally(() => {
          this.processing = false
@ -200,11 +201,12 @@ export default {
        .$post('/api/emails/ereader-devices', payload)
        .then((data) => {
          this.$emit('update', data.ereaderDevices || [])
+          this.$toast.success('Device added')
          this.show = false
        })
        .catch((error) => {
          console.error('Failed to add device', error)
-          this.$toast.error(this.$strings.ToastDeviceAddFailed)
+          this.$toast.error('Failed to add device')
        })
        .finally(() => {
          this.processing = false
--- a/client/components/modals/emails/UserEReaderDeviceModal.vue
+++ b/client/components/modals/emails/UserEReaderDeviceModal.vue
@ -1,188 +0,0 @@
-<template>
-  <modals-modal ref="modal" v-model="show" name="ereader-device-edit" :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="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
-        <div class="w-full px-3 py-5 md:p-12">
-          <div class="flex items-center -mx-1 mb-4">
-            <div class="w-full md:w-1/2 px-1">
-              <ui-text-input-with-label ref="ereaderNameInput" v-model="newDevice.name" :disabled="processing" :label="$strings.LabelName" />
-            </div>
-            <div class="w-full md:w-1/2 px-1">
-              <ui-text-input-with-label ref="ereaderEmailInput" v-model="newDevice.email" :disabled="processing" :label="$strings.LabelEmail" />
-            </div>
-          </div>
-
-          <div class="flex items-center pt-4">
-            <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,
-    existingDevices: {
-      type: Array,
-      default: () => []
-    },
-    ereaderDevice: {
-      type: Object,
-      default: () => null
-    }
-  },
-  data() {
-    return {
-      processing: false,
-      newDevice: {
-        name: '',
-        email: '',
-        availabilityOption: 'adminAndUp',
-        users: []
-      }
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    user() {
-      return this.$store.state.user.user
-    },
-    title() {
-      return !this.ereaderDevice ? 'Create Device' : 'Update Device'
-    }
-  },
-  methods: {
-    submitForm() {
-      this.$refs.ereaderNameInput.blur()
-      this.$refs.ereaderEmailInput.blur()
-
-      if (!this.newDevice.name?.trim() || !this.newDevice.email?.trim()) {
-        this.$toast.error(this.$strings.ToastNameEmailRequired)
-        return
-      }
-
-      this.newDevice.name = this.newDevice.name.trim()
-      this.newDevice.email = this.newDevice.email.trim()
-
-      // Only catches duplicate names for the current user
-      // Duplicates with other users caught on server side
-      if (!this.ereaderDevice) {
-        if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
-          return
-        }
-
-        this.submitCreate()
-      } else {
-        if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
-          this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
-          return
-        }
-
-        this.submitUpdate()
-      }
-    },
-    submitUpdate() {
-      this.processing = true
-
-      const existingDevicesWithoutThisOne = this.existingDevices.filter((d) => d.name !== this.ereaderDevice.name)
-
-      const payload = {
-        ereaderDevices: [
-          ...existingDevicesWithoutThisOne,
-          {
-            ...this.newDevice
-          }
-        ]
-      }
-
-      this.$axios
-        .$post(`/api/me/ereader-devices`, payload)
-        .then((data) => {
-          this.$emit('update', data.ereaderDevices)
-          this.show = false
-        })
-        .catch((error) => {
-          console.error('Failed to update device', error)
-          if (error.response?.data?.toLowerCase().includes('duplicate')) {
-            this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
-          } else {
-            this.$toast.error(this.$strings.ToastDeviceAddFailed)
-          }
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    submitCreate() {
-      this.processing = true
-
-      const payload = {
-        ereaderDevices: [
-          ...this.existingDevices,
-          {
-            ...this.newDevice
-          }
-        ]
-      }
-
-      this.$axios
-        .$post('/api/me/ereader-devices', payload)
-        .then((data) => {
-          this.$emit('update', data.ereaderDevices || [])
-          this.show = false
-        })
-        .catch((error) => {
-          console.error('Failed to add device', error)
-          if (error.response?.data?.toLowerCase().includes('duplicate')) {
-            this.$toast.error(this.$strings.ToastDeviceNameAlreadyExists)
-          } else {
-            this.$toast.error(this.$strings.ToastDeviceAddFailed)
-          }
-        })
-        .finally(() => {
-          this.processing = false
-        })
-    },
-    init() {
-      if (this.ereaderDevice) {
-        this.newDevice.name = this.ereaderDevice.name
-        this.newDevice.email = this.ereaderDevice.email
-        this.newDevice.availabilityOption = this.ereaderDevice.availabilityOption || 'specificUsers'
-        this.newDevice.users = this.ereaderDevice.users || [this.user.id]
-      } else {
-        this.newDevice.name = ''
-        this.newDevice.email = ''
-        this.newDevice.availabilityOption = 'specificUsers'
-        this.newDevice.users = [this.user.id]
-      }
-    }
-  },
-  mounted() {}
-}
-</script>
--- a/client/components/modals/item/EditModal.vue
+++ b/client/components/modals/item/EditModal.vue
@ -2,24 +2,24 @@
  <modals-modal v-model="show" name="edit-book" :width="800" :height="height" :processing="processing" :content-margin-top="marginTop">
    <template #outer>
      <div class="absolute top-0 left-0 p-4 landscape:px-4 landscape:py-2 md:portrait:p-5 lg:p-5 w-2/3 overflow-hidden pointer-events-none">
-        <h1 class="text-xl md:portrait:text-3xl md:landscape:text-lg lg:text-3xl text-white truncate pointer-events-none">{{ title }}</h1>
+        <p class="text-xl md:portrait:text-3xl md:landscape:text-lg lg:text-3xl text-white truncate pointer-events-none">{{ title }}</p>
      </div>
    </template>
-    <div role="tablist" class="absolute -top-10 left-0 z-10 w-full flex">
+    <div class="absolute -top-10 left-0 z-10 w-full flex">
      <template v-for="tab in availableTabs">
-        <button :key="tab.id" role="tab" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</button>
+        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
      </template>
    </div>

-    <div role="tabpanel" class="w-full h-full max-h-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative">
-      <component v-if="libraryItem && show" :is="tabName" :library-item="libraryItem" :processing.sync="processing" @close="show = false" @selectTab="selectTab" />
-    </div>
-
    <div v-show="canGoPrev" class="absolute -left-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
-      <button class="material-symbols text-5xl text-white/50 hover:text-white/90 cursor-pointer pointer-events-auto" :aria-label="$strings.ButtonNext" @click.stop.prevent="goPrevBook" @mousedown.prevent>arrow_back_ios</button>
+      <div class="material-symbols text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goPrevBook" @mousedown.prevent>arrow_back_ios</div>
    </div>
    <div v-show="canGoNext" class="absolute -right-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
-      <button class="material-symbols text-5xl text-white/50 hover:text-white/90 cursor-pointer pointer-events-auto" :aria-label="$strings.ButtonPrevious" @click.stop.prevent="goNextBook" @mousedown.prevent>arrow_forward_ios</button>
+      <div class="material-symbols text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goNextBook" @mousedown.prevent>arrow_forward_ios</div>
+    </div>
+
+    <div class="w-full h-full max-h-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative">
+      <component v-if="libraryItem && show" :is="tabName" :library-item="libraryItem" :processing.sync="processing" @close="show = false" @selectTab="selectTab" />
    </div>
  </modals-modal>
 </template>
@ -196,9 +196,6 @@ export default {
  methods: {
    async goPrevBook() {
      if (this.currentBookshelfIndex - 1 < 0) return
-      // Remove focus from active input
-      document.activeElement?.blur?.()
-
      var prevBookId = this.bookshelfBookIds[this.currentBookshelfIndex - 1]
      this.processing = true
      var prevBook = await this.$axios.$get(`/api/items/${prevBookId}?expanded=1`).catch((error) => {
@ -218,9 +215,6 @@ export default {
    },
    async goNextBook() {
      if (this.currentBookshelfIndex >= this.bookshelfBookIds.length - 1) return
-      // Remove focus from active input
-      document.activeElement?.blur?.()
-
      this.processing = true
      var nextBookId = this.bookshelfBookIds[this.currentBookshelfIndex + 1]
      var nextBook = await this.$axios.$get(`/api/items/${nextBookId}?expanded=1`).catch((error) => {
@ -306,4 +300,4 @@ export default {
 .tab.tab-selected {
  height: 41px;
 }
-</style>
+</style>
--- a/client/components/modals/item/tabs/Cover.vue
+++ b/client/components/modals/item/tabs/Cover.vue
@ -1,42 +1,42 @@
 <template>
  <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
    <div class="flex flex-col sm:flex-row mb-4">
-      <div class="relative self-center md:self-start">
-        <covers-preview-cover :src="coverUrl" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      <div class="relative self-center">
+        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, libraryItemUpdatedAt, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />

        <!-- book cover overlay -->
        <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
-          <div class="absolute top-0 left-0 w-full h-16 bg-linear-to-b from-black-600 to-transparent" />
-          <div v-if="userCanDelete" class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-xs" @click="removeCover">
+          <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
+          <div v-if="userCanDelete" class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
            <ui-tooltip direction="top" :text="$strings.LabelRemoveCover">
              <span class="material-symbols text-2xl">delete</span>
            </ui-tooltip>
          </div>
        </div>
      </div>
-      <div class="grow sm:pl-2 md:pl-6 sm:pr-2 mt-6 md:mt-0">
+      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-6 md:mt-0">
        <div class="flex items-center">
          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 md:min-w-32">
            <ui-file-input ref="fileInput" @change="fileUploadSelected">
              <span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span>
-              <span class="material-symbols text-2xl inline-block md:hidden!">upload</span>
+              <span class="material-symbols text-2xl inline-block md:!hidden">upload</span>
            </ui-file-input>
          </div>

-          <form @submit.prevent="submitForm" class="flex grow">
+          <form @submit.prevent="submitForm" class="flex flex-grow">
            <ui-text-input v-model="imageUrl" :placeholder="$strings.LabelImageURLFromTheWeb" class="h-9 w-full" />
-            <ui-btn color="bg-success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
+            <ui-btn color="success" type="submit" :padding-x="4" :disabled="!imageUrl" class="ml-2 sm:ml-3 w-24 h-9">{{ $strings.ButtonSubmit }}</ui-btn>
          </form>
        </div>

-        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-white/10">
+        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-white border-opacity-10">
          <div class="flex items-center justify-center py-2">
            <p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
-            <div class="grow" />
+            <div class="flex-grow" />
            <ui-btn small @click="showLocalCovers = !showLocalCovers">{{ showLocalCovers ? $strings.ButtonHide : $strings.ButtonShow }}</ui-btn>
          </div>

-          <div v-if="showLocalCovers" class="flex items-center justify-center flex-wrap pb-2">
+          <div v-if="showLocalCovers" class="flex items-center justify-center pb-2">
            <template v-for="localCoverFile in localCovers">
              <div :key="localCoverFile.ino" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="localCoverFile.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(localCoverFile)">
                <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
@ -50,13 +50,13 @@
    </div>
    <form @submit.prevent="submitSearchForm">
      <div class="flex flex-wrap sm:flex-nowrap items-center justify-start -mx-1">
-        <div class="w-48 grow p-1">
+        <div class="w-48 flex-grow p-1">
          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
        </div>
-        <div class="w-72 grow p-1">
+        <div class="w-72 flex-grow p-1">
          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
        </div>
-        <div v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 grow p-1">
+        <div v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 flex-grow p-1">
          <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
        </div>
        <ui-btn class="mt-5 ml-1 md:min-w-24" :padding-x="4" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
@ -79,7 +79,7 @@
      </div>
      <div class="absolute bottom-0 right-0 flex py-4 px-5">
        <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">{{ $strings.ButtonReset }}</ui-btn>
-        <ui-btn :loading="processingUpload" color="bg-success" @click="submitCoverUpload">{{ $strings.ButtonUpload }}</ui-btn>
+        <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">{{ $strings.ButtonUpload }}</ui-btn>
      </div>
    </div>
  </div>
@ -157,12 +157,6 @@ export default {
    coverPath() {
      return this.media.coverPath
    },
-    coverUrl() {
-      if (!this.coverPath) {
-        return this.$store.getters['globals/getPlaceholderCoverSrc']
-      }
-      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId, this.libraryItemUpdatedAt, true)
-    },
    mediaMetadata() {
      return this.media.metadata || {}
    },
@ -200,6 +194,7 @@ export default {
          if (data.error) {
            this.$toast.error(data.error)
          } else {
+            this.$toast.success('Cover Uploaded')
            this.resetCoverPreview()
          }
          this.processingUpload = false
@ -209,7 +204,7 @@ export default {
          if (error.response && error.response.data) {
            this.$toast.error(error.response.data)
          } else {
-            this.$toast.error(this.$strings.ToastUnknownError)
+            this.$toast.error('Oops, something went wrong...')
          }
          this.processingUpload = false
        })
@ -260,7 +255,7 @@ export default {
    },
    async updateCover(cover) {
      if (!cover.startsWith('http:') && !cover.startsWith('https:')) {
-        this.$toast.error(this.$strings.ToastInvalidUrl)
+        this.$toast.error('Invalid URL')
        return
      }

@ -269,10 +264,11 @@ export default {
        .$post(`/api/items/${this.libraryItemId}/cover`, { url: cover })
        .then(() => {
          this.imageUrl = ''
+          this.$toast.success('Update Successful')
        })
        .catch((error) => {
          console.error('Failed to update cover', error)
-          this.$toast.error(error.response?.data || this.$strings.ToastCoverUpdateFailed)
+          this.$toast.error(error.response?.data || 'Failed to update cover')
        })
        .finally(() => {
          this.isProcessing = false
@ -312,9 +308,12 @@ export default {
      this.isProcessing = true
      this.$axios
        .$patch(`/api/items/${this.libraryItemId}/cover`, { cover: coverFile.metadata.path })
+        .then(() => {
+          this.$toast.success('Update Successful')
+        })
        .catch((error) => {
          console.error('Failed to set local cover', error)
-          this.$toast.error(error.response?.data || this.$strings.ToastCoverUpdateFailed)
+          this.$toast.error(error.response?.data || 'Failed to set cover')
        })
        .finally(() => {
          this.isProcessing = false
@ -322,4 +321,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/modals/item/tabs/Details.vue
+++ b/client/components/modals/item/tabs/Details.vue
@ -5,15 +5,17 @@
      <widgets-podcast-details-edit v-else ref="itemDetailsEdit" :library-item="libraryItem" @submit="saveAndClose" />
    </div>

-    <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white/5'">
+    <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white border-opacity-5'">
      <div class="flex items-center px-4">
        <ui-tooltip :disabled="!!quickMatching" :text="$getString('MessageQuickMatchDescription', [libraryProvider])" direction="bottom" class="mr-2 md:mr-4">
-          <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg-bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">{{ $strings.ButtonQuickMatch }}</ui-btn>
+          <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">{{ $strings.ButtonQuickMatch }}</ui-btn>
        </ui-tooltip>

-        <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="isLibraryScanning" color="bg-bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
+        <ui-tooltip :disabled="isLibraryScanning" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
+          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="isLibraryScanning" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
+        </ui-tooltip>

-        <div class="grow" />
+        <div class="flex-grow" />

        <!-- desktop -->
        <ui-btn @click="save" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
@ -90,7 +92,7 @@ export default {

      var { title, author } = this.$refs.itemDetailsEdit.getTitleAndAuthorName()
      if (!title) {
-        this.$toast.error(this.$strings.ToastTitleRequired)
+        this.$toast.error('Must have a title for quick match')
        return
      }
      this.quickMatching = true
@ -106,9 +108,9 @@ export default {
          if (res.warning) {
            this.$toast.warning(res.warning)
          } else if (res.updated) {
-            this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
+            this.$toast.success('Item details updated')
          } else {
-            this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+            this.$toast.info('No updates were made')
          }
        })
        .catch((error) => {
@ -126,18 +128,18 @@ export default {
          this.rescanning = false
          var result = data.result
          if (!result) {
-            this.$toast.error(this.$getString('ToastRescanFailed', [this.title]))
+            this.$toast.error(`Re-Scan Failed for "${this.title}"`)
          } else if (result === 'UPDATED') {
-            this.$toast.success(this.$strings.ToastRescanUpdated)
+            this.$toast.success(`Re-Scan complete item was updated`)
          } else if (result === 'UPTODATE') {
-            this.$toast.success(this.$strings.ToastRescanUpToDate)
+            this.$toast.success(`Re-Scan complete item was up to date`)
          } else if (result === 'REMOVED') {
-            this.$toast.error(this.$strings.ToastRescanRemoved)
+            this.$toast.error(`Re-Scan complete item was removed`)
          }
        })
        .catch((error) => {
          console.error('Failed to scan library item', error)
-          this.$toast.error(this.$strings.ToastScanFailed)
+          this.$toast.error('Failed to scan library item')
          this.rescanning = false
        })
    },
@ -154,7 +156,7 @@ export default {
      }
      var updatedDetails = this.$refs.itemDetailsEdit.getDetails()
      if (!updatedDetails.hasChanges) {
-        this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+        this.$toast.info('No changes were made')
        return false
      }
      return this.updateDetails(updatedDetails)
@ -168,7 +170,7 @@ export default {
      this.isProcessing = false
      if (updateResult) {
        if (updateResult.updated) {
-          this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
+          this.$toast.success('Item details updated')
          return true
        } else {
          this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
@ -215,4 +217,4 @@ export default {
  height: calc(100% - 80px);
  max-height: calc(100% - 80px);
 }
-</style>
+</style>
--- a/client/components/modals/item/tabs/Episodes.vue
+++ b/client/components/modals/item/tabs/Episodes.vue
@ -6,7 +6,7 @@
        <ui-text-input-with-label ref="maxEpisodesInput" v-model="maxEpisodesToDownload" :disabled="checkingNewEpisodes" type="number" :label="$strings.LabelLimit" class="w-16 mr-2" input-class="h-10">
          <div class="flex -mb-0.5">
            <p class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': checkingNewEpisodes }">{{ $strings.LabelLimit }}</p>
-            <ui-tooltip direction="top" :text="$strings.LabelMaxEpisodesToDownload">
+            <ui-tooltip direction="top" text="Max # of episodes to download. Use 0 for unlimited.">
              <span class="material-symbols text-base">info</span>
            </ui-tooltip>
          </div>
@ -99,7 +99,7 @@ export default {

      if (this.maxEpisodesToDownload < 0) {
        this.maxEpisodesToDownload = 3
-        this.$toast.error(this.$strings.ToastInvalidMaxEpisodesToDownload)
+        this.$toast.error('Invalid max episodes to download')
        return
      }

@ -113,10 +113,6 @@ export default {
          return false
        })
        console.log('updateResult', updateResult)
-      } else if (!lastEpisodeCheck) {
-        this.$toast.error(this.$strings.ToastDateTimeInvalidOrIncomplete)
-        this.checkingNewEpisodes = false
-        return false
      }

      this.$axios
@ -124,9 +120,9 @@ export default {
        .then((response) => {
          if (response.episodes && response.episodes.length) {
            console.log('New episodes', response.episodes.length)
-            this.$toast.success(this.$getString('ToastNewEpisodesFound', [response.episodes.length]))
+            this.$toast.success(`${response.episodes.length} new episodes found!`)
          } else {
-            this.$toast.info(this.$strings.ToastNoNewEpisodesFound)
+            this.$toast.info('No new episodes found')
          }
          this.checkingNewEpisodes = false
        })
@ -145,4 +141,4 @@ export default {
    this.setLastEpisodeCheckInput()
  }
 }
-</script>
+</script>
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@ -5,7 +5,7 @@
        <div class="w-36 px-1">
          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
        </div>
-        <div class="grow md:w-72 px-1">
+        <div class="flex-grow md:w-72 px-1">
          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
        </div>
        <div v-show="provider != 'itunes'" class="w-60 md:w-72 px-1">
@ -27,7 +27,7 @@
    </div>
    <div v-if="selectedMatchOrig" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
      <div class="flex mb-4">
-        <div class="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center cursor-pointer" @click="clearSelectedMatch">
+        <div class="w-8 h-8 rounded-full hover:bg-white hover:bg-opacity-10 flex items-center justify-center cursor-pointer" @click="clearSelectedMatch">
          <span class="material-symbols text-3xl">arrow_back</span>
        </div>
        <p class="text-xl pl-3">{{ $strings.HeaderUpdateDetails }}</p>
@ -35,9 +35,9 @@
      <ui-checkbox v-model="selectAll" :label="$strings.LabelSelectAll" checkbox-bg="bg" @input="selectAllToggled" />
      <form @submit.prevent="submitMatchUpdate">
        <div v-if="selectedMatchOrig.cover" class="flex flex-wrap md:flex-nowrap items-center justify-center">
-          <div class="flex grow items-center py-2">
+          <div class="flex flex-grow items-center py-2">
            <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
-            <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly :label="$strings.LabelCover" class="grow mx-4" />
+            <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly :label="$strings.LabelCover" class="flex-grow mx-4" />
          </div>

          <div class="flex py-2">
@ -57,176 +57,176 @@
        </div>
        <div v-if="selectedMatchOrig.title" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.title" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" :label="$strings.LabelTitle" />
-            <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('title', mediaMetadata.title)">{{ mediaMetadata.title || '' }}</a>
+            <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('title', mediaMetadata.title)">{{ mediaMetadata.title || '' }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.subtitle" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.subtitle" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" :label="$strings.LabelSubtitle" />
-            <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('subtitle', mediaMetadata.subtitle)">{{ mediaMetadata.subtitle }}</a>
+            <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('subtitle', mediaMetadata.subtitle)">{{ mediaMetadata.subtitle }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.author" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.author" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" :label="$strings.LabelAuthor" />
-            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('author', mediaMetadata.authorName)">{{ mediaMetadata.authorName }}</a>
+            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('author', mediaMetadata.authorName)">{{ mediaMetadata.authorName }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.narrator" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.narrator" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-multi-select v-model="selectedMatch.narrator" :items="narrators" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
-            <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('narrator', mediaMetadata.narrators)">{{ mediaMetadata.narratorName }}</a>
+            <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('narrator', mediaMetadata.narrators)">{{ mediaMetadata.narratorName }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.description" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.description" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
-            <ui-rich-text-editor v-model="selectedMatch.description" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
-            <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('description', mediaMetadata.description)">{{ mediaMetadata.descriptionPlain.substr(0, 100) + (mediaMetadata.descriptionPlain.length > 100 ? '...' : '') }}</a>
+          <div class="flex-grow ml-4">
+            <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
+            <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('description', mediaMetadata.description)">{{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.publisher" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.publisher" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" :label="$strings.LabelPublisher" />
-            <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publisher', mediaMetadata.publisher)">{{ mediaMetadata.publisher }}</a>
+            <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publisher', mediaMetadata.publisher)">{{ mediaMetadata.publisher }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.publishedYear" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.publishedYear" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.publishedYear" :disabled="!selectedMatchUsage.publishedYear" :label="$strings.LabelPublishYear" />
-            <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publishedYear', mediaMetadata.publishedYear)">{{ mediaMetadata.publishedYear }}</a>
+            <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('publishedYear', mediaMetadata.publishedYear)">{{ mediaMetadata.publishedYear }}</a>
            </p>
          </div>
        </div>

        <div v-if="selectedMatchOrig.series" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.series" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <widgets-series-input-widget v-model="selectedMatch.series" :disabled="!selectedMatchUsage.series" />
-            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('series', mediaMetadata.series)">{{ mediaMetadata.seriesName }}</a>
+            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('series', mediaMetadata.series)">{{ mediaMetadata.seriesName }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.genres?.length" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.genres" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-multi-select v-model="selectedMatch.genres" :items="genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" />
-            <p v-if="mediaMetadata.genres?.length" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('genres', mediaMetadata.genres)">{{ mediaMetadata.genres.join(', ') }}</a>
+            <p v-if="mediaMetadata.genres?.length" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('genres', mediaMetadata.genres)">{{ mediaMetadata.genres.join(', ') }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.tags" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.tags" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-multi-select v-model="selectedMatch.tags" :items="tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
-            <p v-if="media.tags?.length" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('tags', media.tags)">{{ media.tags.join(', ') }}</a>
+            <p v-if="media.tags?.length" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('tags', media.tags)">{{ media.tags.join(', ') }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.language" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.language" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" :label="$strings.LabelLanguage" />
-            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('language', mediaMetadata.language)">{{ mediaMetadata.language }}</a>
+            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('language', mediaMetadata.language)">{{ mediaMetadata.language }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.isbn" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.isbn" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" />
-            <p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('isbn', mediaMetadata.isbn)">{{ mediaMetadata.isbn }}</a>
+            <p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('isbn', mediaMetadata.isbn)">{{ mediaMetadata.isbn }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.asin" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.asin" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.asin" :disabled="!selectedMatchUsage.asin" label="ASIN" />
-            <p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('asin', mediaMetadata.asin)">{{ mediaMetadata.asin }}</a>
+            <p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('asin', mediaMetadata.asin)">{{ mediaMetadata.asin }}</a>
            </p>
          </div>
        </div>

        <div v-if="selectedMatchOrig.itunesId" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.itunesId" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.itunesId" type="number" :disabled="!selectedMatchUsage.itunesId" label="iTunes ID" />
-            <p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesId', mediaMetadata.itunesId)">{{ mediaMetadata.itunesId }}</a>
+            <p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesId', mediaMetadata.itunesId)">{{ mediaMetadata.itunesId }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.feedUrl" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.feedUrl" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.feedUrl" :disabled="!selectedMatchUsage.feedUrl" label="RSS Feed URL" />
-            <p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('feedUrl', mediaMetadata.feedUrl)">{{ mediaMetadata.feedUrl }}</a>
+            <p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('feedUrl', mediaMetadata.feedUrl)">{{ mediaMetadata.feedUrl }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.itunesPageUrl" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.itunesPageUrl" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.itunesPageUrl" :disabled="!selectedMatchUsage.itunesPageUrl" label="iTunes Page URL" />
-            <p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesPageUrl', mediaMetadata.itunesPageUrl)">{{ mediaMetadata.itunesPageUrl }}</a>
+            <p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('itunesPageUrl', mediaMetadata.itunesPageUrl)">{{ mediaMetadata.itunesPageUrl }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.releaseDate" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.releaseDate" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4">
+          <div class="flex-grow ml-4">
            <ui-text-input-with-label v-model="selectedMatch.releaseDate" :disabled="!selectedMatchUsage.releaseDate" :label="$strings.LabelReleaseDate" />
-            <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white/60">
-              {{ $strings.LabelCurrently }} <a :title="$strings.LabelClickToUseCurrentValue" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('releaseDate', mediaMetadata.releaseDate)">{{ mediaMetadata.releaseDate }}</a>
+            <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">
+              {{ $strings.LabelCurrently }} <a title="Click to use current value" class="cursor-pointer hover:underline" @click.stop="setMatchFieldValue('releaseDate', mediaMetadata.releaseDate)">{{ mediaMetadata.releaseDate }}</a>
            </p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.explicit != null" class="flex items-center pb-2" :class="{ 'pt-2': mediaMetadata.explicit == null }">
          <ui-checkbox v-model="selectedMatchUsage.explicit" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4" :class="{ 'pt-4': mediaMetadata.explicit != null }">
+          <div class="flex-grow ml-4" :class="{ 'pt-4': mediaMetadata.explicit != null }">
            <ui-checkbox v-model="selectedMatch.explicit" :label="$strings.LabelExplicit" :disabled="!selectedMatchUsage.explicit" :checkbox-bg="!selectedMatchUsage.explicit ? 'bg' : 'primary'" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
-            <p v-if="mediaMetadata.explicit != null" class="text-xs ml-1 text-white/60">{{ $strings.LabelCurrently }} {{ mediaMetadata.explicit ? $strings.LabelExplicitChecked : $strings.LabelExplicitUnchecked }}</p>
+            <p v-if="mediaMetadata.explicit != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.explicit ? $strings.LabelExplicitChecked : $strings.LabelExplicitUnchecked }}</p>
          </div>
        </div>
        <div v-if="selectedMatchOrig.abridged != null" class="flex items-center pb-2" :class="{ 'pt-2': mediaMetadata.abridged == null }">
          <ui-checkbox v-model="selectedMatchUsage.abridged" checkbox-bg="bg" @input="checkboxToggled" />
-          <div class="grow ml-4" :class="{ 'pt-4': mediaMetadata.abridged != null }">
+          <div class="flex-grow ml-4" :class="{ 'pt-4': mediaMetadata.abridged != null }">
            <ui-checkbox v-model="selectedMatch.abridged" :label="$strings.LabelAbridged" :disabled="!selectedMatchUsage.abridged" :checkbox-bg="!selectedMatchUsage.abridged ? 'bg' : 'primary'" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
-            <p v-if="mediaMetadata.abridged != null" class="text-xs ml-1 text-white/60">{{ $strings.LabelCurrently }} {{ mediaMetadata.abridged ? $strings.LabelAbridgedChecked : $strings.LabelAbridgedUnchecked }}</p>
+            <p v-if="mediaMetadata.abridged != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.abridged ? $strings.LabelAbridgedChecked : $strings.LabelAbridgedUnchecked }}</p>
          </div>
        </div>

        <div class="flex items-center justify-end py-2">
-          <ui-btn color="bg-success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+          <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
        </div>
      </form>
    </div>
@ -397,7 +397,7 @@ export default {
    },
    submitSearch() {
      if (!this.searchTitle) {
-        this.$toast.warning(this.$strings.ToastTitleRequired)
+        this.$toast.warning('Search title is required')
        return
      }
      this.persistProvider()
@ -618,12 +618,12 @@ export default {
          if (updateResult.updated) {
            this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
          } else {
-            this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+            this.$toast.info(this.$strings.ToastItemDetailsUpdateUnneeded)
          }
          this.clearSelectedMatch()
          this.$emit('selectTab', 'details')
        } else {
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error(this.$strings.ToastItemDetailsUpdateFailed)
        }
      } else {
        this.clearSelectedMatch()
--- a/client/components/modals/item/tabs/Schedule.vue
+++ b/client/components/modals/item/tabs/Schedule.vue
@ -2,28 +2,28 @@
  <div class="w-full h-full relative">
    <div id="scheduleWrapper" class="w-full overflow-y-auto px-2 py-4 md:px-6 md:py-6">
      <template v-if="!feedUrl">
-        <widgets-alert type="warning" class="text-base mb-4">{{ $strings.ToastPodcastNoRssFeed }}</widgets-alert>
+        <widgets-alert type="warning" class="text-base mb-4">No RSS feed URL is set for this podcast</widgets-alert>
      </template>
      <template v-if="feedUrl || autoDownloadEpisodes">
        <div class="flex items-center justify-between mb-4">
-          <p class="text-base md:text-xl font-semibold">{{ $strings.HeaderScheduleEpisodeDownloads }}</p>
-          <ui-checkbox v-model="enableAutoDownloadEpisodes" :label="$strings.LabelEnable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
+          <p class="text-base md:text-xl font-semibold">Schedule Automatic Episode Downloads</p>
+          <ui-checkbox v-model="enableAutoDownloadEpisodes" label="Enable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
        </div>

        <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
          <ui-text-input ref="maxEpisodesInput" type="number" v-model="newMaxEpisodesToKeep" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updatedMaxEpisodesToKeep" />
-          <ui-tooltip :text="$strings.LabelMaxEpisodesToKeepHelp">
+          <ui-tooltip text="Value of 0 sets no max limit. After a new episode is auto-downloaded this will delete the oldest episode if you have more than X episodes. <br>This will only delete 1 episode per new download.">
            <p class="pl-4 text-base">
-              {{ $strings.LabelMaxEpisodesToKeep }}
+              Max episodes to keep
              <span class="material-symbols icon-text">info</span>
            </p>
          </ui-tooltip>
        </div>
        <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
          <ui-text-input ref="maxEpisodesToDownloadInput" type="number" v-model="newMaxNewEpisodesToDownload" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updateMaxNewEpisodesToDownload" />
-          <ui-tooltip :text="$strings.LabelUseZeroForUnlimited">
+          <ui-tooltip text="Value of 0 sets no max limit. When checking for new episodes this is the max number of episodes that will be downloaded.">
            <p class="pl-4 text-base">
-              {{ $strings.LabelMaxEpisodesToDownloadPerCheck }}
+              Max new episodes to download per check
              <span class="material-symbols icon-text">info</span>
            </p>
          </ui-tooltip>
@ -33,10 +33,10 @@
      </template>
    </div>

-    <div v-if="feedUrl || autoDownloadEpisodes" class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white/5">
+    <div v-if="feedUrl || autoDownloadEpisodes" class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white border-opacity-5">
      <div class="flex items-center px-2 md:px-4">
-        <div class="grow" />
-        <ui-btn @click="save" :disabled="!isUpdated" :color="isUpdated ? 'bg-success' : 'bg-primary'" class="mx-2">{{ isUpdated ? $strings.ButtonSave : $strings.MessageNoUpdatesWereNecessary }}</ui-btn>
+        <div class="flex-grow" />
+        <ui-btn @click="save" :disabled="!isUpdated" :color="isUpdated ? 'success' : 'primary'" class="mx-2">{{ isUpdated ? 'Save' : 'No update necessary' }}</ui-btn>
      </div>
    </div>
  </div>
@ -163,7 +163,7 @@ export default {
      this.isProcessing = false
      if (updateResult) {
        if (updateResult.updated) {
-          this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
+          this.$toast.success('Item details updated')
          return true
        } else {
          this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
--- a/client/components/modals/item/tabs/Tools.vue
+++ b/client/components/modals/item/tabs/Tools.vue
@ -9,7 +9,7 @@
          <p class="text-lg">{{ $strings.LabelToolsMakeM4b }}</p>
          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $strings.LabelToolsMakeM4bDescription }}</p>
        </div>
-        <div class="grow" />
+        <div class="flex-grow" />
        <div>
          <ui-btn :to="`/audiobook/${libraryItemId}/manage?tool=m4b`" class="flex items-center"
            >{{ $strings.ButtonOpenManager }}
@ -26,25 +26,25 @@
          <p class="text-lg">{{ $strings.LabelToolsEmbedMetadata }}</p>
          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $strings.LabelToolsEmbedMetadataDescription }}</p>
        </div>
-        <div class="grow" />
+        <div class="flex-grow" />
        <div>
          <ui-btn :to="`/audiobook/${libraryItemId}/manage?tool=embed`" class="flex items-center"
            >{{ $strings.ButtonOpenManager }}
            <span class="material-symbols text-lg ml-2">launch</span>
          </ui-btn>

-          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">{{ $strings.ButtonQuickEmbed }}</ui-btn>
+          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">Quick Embed</ui-btn>
        </div>
      </div>

      <!-- queued alert -->
      <widgets-alert v-if="isMetadataEmbedQueued" type="warning" class="mt-4">
-        <p class="text-lg">{{ $getString('MessageQuickEmbedQueue', [queuedEmbedLIds.length]) }}</p>
+        <p class="text-lg">Queued for metadata embed ({{ queuedEmbedLIds.length }} in queue)</p>
      </widgets-alert>

      <!-- processing alert -->
      <widgets-alert v-if="isEmbedTaskRunning" type="warning" class="mt-4">
-        <p class="text-lg">{{ $strings.MessageQuickEmbedInProgress }}</p>
+        <p class="text-lg">Currently embedding metadata</p>
      </widgets-alert>
    </div>

@ -113,7 +113,7 @@ export default {
  methods: {
    quickEmbed() {
      const payload = {
-        message: this.$strings.MessageConfirmQuickEmbed,
+        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
        callback: (confirmed) => {
          if (confirmed) {
            this.$axios
--- a/client/components/modals/libraries/EditLibrary.vue
+++ b/client/components/modals/libraries/EditLibrary.vue
@ -5,7 +5,7 @@
        <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
          <ui-dropdown v-model="mediaType" :items="mediaTypes" :label="$strings.LabelMediaType" :disabled="!isNew" small @input="changedMediaType" />
        </div>
-        <div class="w-full md:grow px-1 py-1 md:py-0">
+        <div class="w-full md:flex-grow px-1 py-1 md:py-0">
          <ui-text-input-with-label ref="nameInput" v-model="name" :label="$strings.LabelLibraryName" @blur="nameBlurred" />
        </div>
        <div class="w-1/5 md:w-18 px-1 py-1 md:py-0">
@ -19,16 +19,16 @@
      <div class="folders-container overflow-y-auto w-full py-2 mb-2">
        <p class="px-1 text-sm font-semibold">{{ $strings.LabelFolders }}</p>
        <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
-          <span class="material-symbols fill mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
          <ui-editable-text ref="folderInput" v-model="folder.fullPath" :readonly="!!folder.id" type="text" class="w-full" @blur="existingFolderInputBlurred(folder)" />
          <span v-show="folders.length > 1" class="material-symbols text-2xl ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
        </div>
        <div class="flex py-1 px-2 items-center w-full">
-          <span class="material-symbols fill mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
          <ui-editable-text ref="newFolderInput" v-model="newFolderPath" :placeholder="$strings.PlaceholderNewFolderPath" type="text" class="w-full" @blur="newFolderInputBlurred" />
        </div>

-        <ui-btn class="w-full mt-2" color="bg-primary" @click="browseForFolder">{{ $strings.ButtonBrowseForFolder }}</ui-btn>
+        <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">{{ $strings.ButtonBrowseForFolder }}</ui-btn>
      </div>
    </div>
    <modals-libraries-lazy-folder-chooser v-else :paths="folderPaths" @back="showDirectoryPicker = false" @select="selectFolder" />
--- a/client/components/modals/libraries/EditModal.vue
+++ b/client/components/modals/libraries/EditModal.vue
@ -14,7 +14,7 @@
    <div class="px-2 md:px-4 w-full text-sm pt-2 md:pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
      <component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :library-id="libraryId" :processing.sync="processing" @update="updateLibrary" @close="show = false" />

-      <div v-show="selectedTab !== 'tools'" class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white/10">
+      <div v-show="selectedTab !== 'tools'" class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
        <div class="flex justify-end">
          <ui-btn @click="submit">{{ buttonText }}</ui-btn>
        </div>
@ -111,6 +111,7 @@ export default {
    },
    updateLibrary(library) {
      this.mapLibraryToCopy(library)
+      console.log('Updated library', this.libraryCopy)
    },
    getNewLibraryData() {
      return {
@ -127,9 +128,7 @@ export default {
          autoScanCronExpression: null,
          hideSingleBookSeries: false,
          onlyShowLaterBooksInContinueSeries: false,
-          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata'],
-          markAsFinishedPercentComplete: null,
-          markAsFinishedTimeRemaining: 10
+          metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata']
        }
      }
    },
@ -157,11 +156,11 @@ export default {
    },
    validate() {
      if (!this.libraryCopy.name) {
-        this.$toast.error(this.$strings.ToastNameRequired)
+        this.$toast.error('Library must have a name')
        return false
      }
      if (!this.libraryCopy.folders.length) {
-        this.$toast.error(this.$strings.ToastMustHaveAtLeastOnePath)
+        this.$toast.error('Library must have at least 1 path')
        return false
      }

@ -206,7 +205,7 @@ export default {
    submitUpdateLibrary() {
      var newLibraryPayload = this.getLibraryUpdatePayload()
      if (!Object.keys(newLibraryPayload).length) {
-        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+        this.$toast.info('No updates are necessary')
        return
      }

@ -223,7 +222,7 @@ export default {
          if (error.response && error.response.data) {
            this.$toast.error(error.response.data)
          } else {
-            this.$toast.error(this.$strings.ToastFailedToUpdate)
+            this.$toast.error(this.$strings.ToastLibraryUpdateFailed)
          }
          this.processing = false
        })
@ -237,6 +236,7 @@ export default {
          this.show = false
          this.$toast.success(this.$getString('ToastLibraryCreateSuccess', [res.name]))
          if (!this.$store.state.libraries.currentLibraryId) {
+            console.log('Setting initially library id', res.id)
            // First library added
            this.$store.dispatch('libraries/fetch', res.id)
          }
@ -264,4 +264,4 @@ export default {
 .tab.tab-selected {
  height: 41px;
 }
-</style>
+</style>
--- a/client/components/modals/libraries/LazyFolderChooser.vue
+++ b/client/components/modals/libraries/LazyFolderChooser.vue
@ -4,24 +4,24 @@
      <span class="material-symbols text-3xl cursor-pointer hover:text-gray-300" @click="$emit('back')">arrow_back</span>
      <p class="px-4 text-xl">{{ $strings.HeaderChooseAFolder }}</p>
    </div>
-    <div v-if="rootDirs.length" class="w-full bg-primary/70 py-1 px-4 mb-2">
+    <div v-if="rootDirs.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
      <p class="font-mono truncate">{{ selectedPath || '/' }}</p>
    </div>
-    <div v-if="rootDirs.length" class="relative flex bg-primary/50 p-4 folder-container">
+    <div v-if="rootDirs.length" class="relative flex bg-primary bg-opacity-50 p-4 folder-container">
      <div class="w-1/2 border-r border-bg h-full overflow-y-auto">
        <div v-if="level > 0" class="w-full p-1 cursor-pointer flex items-center hover:bg-white/10" @click="goBack">
-          <span class="material-symbols fill text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
          <p class="text-base font-mono px-2">..</p>
        </div>
        <div v-for="dir in _directories" :key="dir.path" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200 hover:bg-white/10" :class="dir.className" @click="selectDir(dir)">
-          <span class="material-symbols fill text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
          <p class="text-base font-mono px-2 truncate">{{ dir.dirname }}</p>
          <span v-if="dir.path === selectedPath" class="material-symbols" style="font-size: 1.1rem">arrow_right</span>
        </div>
      </div>
      <div class="w-1/2 h-full overflow-y-auto">
        <div v-for="dir in _subdirs" :key="dir.path" :class="dir.className" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200 hover:bg-white/10" @click="selectSubDir(dir)">
-          <span class="material-symbols fill text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <span class="material-symbols fill bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
          <p class="text-base font-mono px-2 truncate">{{ dir.dirname }}</p>
        </div>
      </div>
@ -38,7 +38,7 @@
    </div>

    <div class="w-full py-2">
-      <ui-btn :disabled="!selectedPath" color="bg-primary" class="w-full mt-2" @click="selectFolder">{{ $strings.ButtonSelectFolderPath }}</ui-btn>
+      <ui-btn :disabled="!selectedPath" color="primary" class="w-full mt-2" @click="selectFolder">{{ $strings.ButtonSelectFolderPath }}</ui-btn>
    </div>
  </div>
 </template>
@ -162,7 +162,7 @@ export default {
        })
        .catch((error) => {
          console.error('Failed to get filesystem paths', error)
-          this.$toast.error(this.$strings.ToastFailedToLoadData)
+          this.$toast.error('Failed to get filesystem paths')
          return []
        })
        .finally(() => {
--- a/client/components/modals/libraries/LibraryScannerSettings.vue
+++ b/client/components/modals/libraries/LibraryScannerSettings.vue
@ -21,7 +21,7 @@
          <div class="text-center py-1 w-8 min-w-8">
            {{ source.include ? getSourceIndex(source.id) : '' }}
          </div>
-          <div class="grow inline-flex justify-between px-4 py-3">
+          <div class="flex-grow inline-flex justify-between px-4 py-3">
            {{ source.name }} <span v-if="source.include && (index === firstActiveSourceIndex || index === lastActiveSourceIndex)" class="px-2 italic font-semibold text-xs text-gray-400">{{ index === firstActiveSourceIndex ? $strings.LabelHighestPriority : $strings.LabelLowestPriority }}</span>
          </div>
          <div class="px-2 opacity-100">
--- a/client/components/modals/libraries/LibrarySettings.vue
+++ b/client/components/modals/libraries/LibrarySettings.vue
@ -1,95 +1,79 @@
 <template>
  <div class="w-full h-full px-1 md:px-4 py-1 mb-4">
-    <div class="flex flex-wrap">
-      <div class="flex items-center p-2 w-full md:w-1/2">
-        <ui-toggle-switch v-model="useSquareBookCovers" size="sm" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
-          <p class="pl-4 text-sm">
-            {{ $strings.LabelSettingsSquareBookCovers }}
+    <div class="flex items-center py-3">
+      <ui-toggle-switch v-model="useSquareBookCovers" @input="formUpdated" />
+      <ui-tooltip :text="$strings.LabelSettingsSquareBookCoversHelp">
+        <p class="pl-4 text-base">
+          {{ $strings.LabelSettingsSquareBookCovers }}
+          <span class="material-symbols icon-text text-sm">info</span>
+        </p>
+      </ui-tooltip>
+    </div>
+    <div class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" @input="formUpdated" />
+        <ui-toggle-switch v-else disabled :value="false" />
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
+      </div>
+      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
+    </div>
+    <div v-if="isBookLibrary" class="flex items-center py-3">
+      <ui-toggle-switch v-model="audiobooksOnly" @input="formUpdated" />
+      <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
+        <p class="pl-4 text-base">
+          {{ $strings.LabelSettingsAudiobooksOnly }}
+          <span class="material-symbols icon-text text-sm">info</span>
+        </p>
+      </ui-tooltip>
+    </div>
+    <div v-if="isBookLibrary" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
+      </div>
+    </div>
+    <div v-if="isBookLibrary" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
+        <p class="pl-4 text-base">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
+      </div>
+    </div>
+    <div v-if="isBookLibrary" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="hideSingleBookSeries" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
+          <p class="pl-4 text-base">
+            {{ $strings.LabelSettingsHideSingleBookSeries }}
            <span class="material-symbols icon-text text-sm">info</span>
          </p>
        </ui-tooltip>
      </div>
-      <div class="p-2 w-full md:w-1/2">
-        <div class="flex items-center">
-          <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="enableWatcher" size="sm" @input="formUpdated" />
-          <ui-toggle-switch v-else disabled size="sm" :value="false" />
-          <p class="pl-4 text-sm">{{ $strings.LabelSettingsEnableWatcherForLibrary }}</p>
-        </div>
-        <p v-if="globalWatcherDisabled" class="text-xs text-warning">*{{ $strings.MessageWatcherIsDisabledGlobally }}</p>
-      </div>
-      <div v-if="isBookLibrary" class="flex items-center p-2 w-full md:w-1/2">
-        <ui-toggle-switch v-model="audiobooksOnly" size="sm" @input="formUpdated" />
-        <ui-tooltip :text="$strings.LabelSettingsAudiobooksOnlyHelp">
-          <p class="pl-4 text-sm">
-            {{ $strings.LabelSettingsAudiobooksOnly }}
+    </div>
+    <div v-if="isBookLibrary" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
+          <p class="pl-4 text-base">
+            {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
            <span class="material-symbols icon-text text-sm">info</span>
          </p>
        </ui-tooltip>
      </div>
-      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
-        <div class="flex items-center">
-          <ui-toggle-switch v-model="skipMatchingMediaWithAsin" size="sm" @input="formUpdated" />
-          <p class="pl-4 text-sm">{{ $strings.LabelSettingsSkipMatchingBooksWithASIN }}</p>
-        </div>
-      </div>
-      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
-        <div class="flex items-center">
-          <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" size="sm" @input="formUpdated" />
-          <p class="pl-4 text-sm">{{ $strings.LabelSettingsSkipMatchingBooksWithISBN }}</p>
-        </div>
-      </div>
-      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
-        <div class="flex items-center">
-          <ui-toggle-switch v-model="hideSingleBookSeries" size="sm" @input="formUpdated" />
-          <ui-tooltip :text="$strings.LabelSettingsHideSingleBookSeriesHelp">
-            <p class="pl-4 text-sm">
-              {{ $strings.LabelSettingsHideSingleBookSeries }}
-              <span class="material-symbols icon-text text-sm">info</span>
-            </p>
-          </ui-tooltip>
-        </div>
-      </div>
-      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
-        <div class="flex items-center">
-          <ui-toggle-switch v-model="onlyShowLaterBooksInContinueSeries" size="sm" @input="formUpdated" />
-          <ui-tooltip :text="$strings.LabelSettingsOnlyShowLaterBooksInContinueSeriesHelp">
-            <p class="pl-4 text-sm">
-              {{ $strings.LabelSettingsOnlyShowLaterBooksInContinueSeries }}
-              <span class="material-symbols icon-text text-sm">info</span>
-            </p>
-          </ui-tooltip>
-        </div>
-      </div>
-      <div v-if="isBookLibrary" class="p-2 w-full md:w-1/2">
-        <div class="flex items-center">
-          <ui-toggle-switch v-model="epubsAllowScriptedContent" size="sm" @input="formUpdated" />
-          <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
-            <p class="pl-4 text-sm">
-              {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
-              <span class="material-symbols icon-text text-sm">info</span>
-            </p>
-          </ui-tooltip>
-        </div>
-      </div>
-      <div v-if="isPodcastLibrary" class="p-2 w-full md:w-1/2">
-        <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
-      </div>
-      <div class="p-2 w-full flex items-center space-x-2 flex-wrap">
-        <div>
-          <ui-dropdown v-model="markAsFinishedWhen" :items="maskAsFinishedWhenItems" :label="$strings.LabelSettingsLibraryMarkAsFinishedWhen" small class="w-72 min-w-72 text-sm" menu-max-height="200px" @input="markAsFinishedWhenChanged" />
-        </div>
-        <div class="w-16">
-          <div>
-            <label class="px-1 text-sm font-semibold"></label>
-            <div class="relative">
-              <ui-text-input v-model="markAsFinishedValue" type="number" label="" no-spinner custom-input-class="pr-5" @input="markAsFinishedChanged" />
-              <div class="absolute top-0 bottom-0 right-4 flex items-center">{{ markAsFinishedWhen === 'timeRemaining' ? '' : '%' }}</div>
-            </div>
-          </div>
-        </div>
+    </div>
+    <div v-if="isBookLibrary" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="epubsAllowScriptedContent" @input="formUpdated" />
+        <ui-tooltip :text="$strings.LabelSettingsEpubsAllowScriptedContentHelp">
+          <p class="pl-4 text-base">
+            {{ $strings.LabelSettingsEpubsAllowScriptedContent }}
+            <span class="material-symbols icon-text text-sm">info</span>
+          </p>
+        </ui-tooltip>
      </div>
    </div>
+    <div v-if="isPodcastLibrary" class="py-3">
+      <ui-dropdown :label="$strings.LabelPodcastSearchRegion" v-model="podcastSearchRegion" :items="$podcastSearchRegionOptions" small class="max-w-72" menu-max-height="200px" @input="formUpdated" />
+    </div>
  </div>
 </template>

@ -113,9 +97,7 @@ export default {
      epubsAllowScriptedContent: false,
      hideSingleBookSeries: false,
      onlyShowLaterBooksInContinueSeries: false,
-      podcastSearchRegion: 'us',
-      markAsFinishedWhen: 'timeRemaining',
-      markAsFinishedValue: 10
+      podcastSearchRegion: 'us'
    }
  },
  computed: {
@ -137,34 +119,10 @@ export default {
    providers() {
      if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
      return this.$store.state.scanners.providers
-    },
-    maskAsFinishedWhenItems() {
-      return [
-        {
-          text: this.$strings.LabelSettingsLibraryMarkAsFinishedTimeRemaining,
-          value: 'timeRemaining'
-        },
-        {
-          text: this.$strings.LabelSettingsLibraryMarkAsFinishedPercentComplete,
-          value: 'percentComplete'
-        }
-      ]
    }
  },
  methods: {
-    markAsFinishedWhenChanged(val) {
-      if (val === 'percentComplete' && this.markAsFinishedValue > 100) {
-        this.markAsFinishedValue = 100
-      }
-      this.formUpdated()
-    },
-    markAsFinishedChanged(val) {
-      this.formUpdated()
-    },
    getLibraryData() {
-      let markAsFinishedTimeRemaining = this.markAsFinishedWhen === 'timeRemaining' ? Number(this.markAsFinishedValue) : null
-      let markAsFinishedPercentComplete = this.markAsFinishedWhen === 'percentComplete' ? Number(this.markAsFinishedValue) : null
-
      return {
        settings: {
          coverAspectRatio: this.useSquareBookCovers ? this.$constants.BookCoverAspectRatio.SQUARE : this.$constants.BookCoverAspectRatio.STANDARD,
@ -175,9 +133,7 @@ export default {
          epubsAllowScriptedContent: !!this.epubsAllowScriptedContent,
          hideSingleBookSeries: !!this.hideSingleBookSeries,
          onlyShowLaterBooksInContinueSeries: !!this.onlyShowLaterBooksInContinueSeries,
-          podcastSearchRegion: this.podcastSearchRegion,
-          markAsFinishedTimeRemaining: markAsFinishedTimeRemaining,
-          markAsFinishedPercentComplete: markAsFinishedPercentComplete
+          podcastSearchRegion: this.podcastSearchRegion
        }
      }
    },
@ -194,11 +150,6 @@ export default {
      this.hideSingleBookSeries = !!this.librarySettings.hideSingleBookSeries
      this.onlyShowLaterBooksInContinueSeries = !!this.librarySettings.onlyShowLaterBooksInContinueSeries
      this.podcastSearchRegion = this.librarySettings.podcastSearchRegion || 'us'
-      this.markAsFinishedWhen = this.librarySettings.markAsFinishedTimeRemaining ? 'timeRemaining' : 'percentComplete'
-      if (!this.librarySettings.markAsFinishedTimeRemaining && !this.librarySettings.markAsFinishedPercentComplete) {
-        this.markAsFinishedWhen = 'timeRemaining'
-      }
-      this.markAsFinishedValue = this.librarySettings.markAsFinishedTimeRemaining || this.librarySettings.markAsFinishedPercentComplete || 10
    }
  },
  mounted() {
--- a/client/components/modals/libraries/LibraryTools.vue
+++ b/client/components/modals/libraries/LibraryTools.vue
@ -3,13 +3,13 @@
    <div class="w-full border border-black-200 p-4 my-8">
      <div class="flex flex-wrap items-center">
        <div>
-          <p class="text-lg">{{ $strings.LabelRemoveMetadataFile }}</p>
-          <p class="max-w-sm text-sm pt-2 text-gray-300">{{ $getString('LabelRemoveMetadataFileHelp', [mediaType]) }}</p>
+          <p class="text-lg">Remove metadata files in library item folders</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Remove all metadata.json or metadata.abs files in your {{ mediaType }} folders</p>
        </div>
-        <div class="grow" />
+        <div class="flex-grow" />
        <div>
-          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">{{ $strings.LabelRemoveAllMetadataJson }}</ui-btn>
-          <ui-btn @click.stop="removeAllMetadataClick('abs')">{{ $strings.LabelRemoveAllMetadataAbs }}</ui-btn>
+          <ui-btn class="mb-4 block" @click.stop="removeAllMetadataClick('json')">Remove all metadata.json</ui-btn>
+          <ui-btn @click.stop="removeAllMetadataClick('abs')">Remove all metadata.abs</ui-btn>
        </div>
      </div>
    </div>
@ -43,7 +43,7 @@ export default {
  methods: {
    removeAllMetadataClick(ext) {
      const payload = {
-        message: this.$getString('MessageConfirmRemoveMetadataFiles', [ext]),
+        message: `Are you sure you want to remove all metadata.${ext} files in your library item folders?`,
        persistent: true,
        callback: (confirmed) => {
          if (confirmed) {
@ -60,16 +60,16 @@ export default {
        .$post(`/api/libraries/${this.libraryId}/remove-metadata?ext=${ext}`)
        .then((data) => {
          if (!data.found) {
-            this.$toast.info(this.$getString('ToastMetadataFilesRemovedNoneFound', [ext]))
+            this.$toast.info(`No metadata.${ext} files were found in library`)
          } else if (!data.removed) {
-            this.$toast.success(this.$getString('ToastMetadataFilesRemovedNoneRemoved', [ext]))
+            this.$toast.success(`No metadata.${ext} files removed`)
          } else {
-            this.$toast.success(this.$getString('ToastMetadataFilesRemovedSuccess', [data.removed, ext]))
+            this.$toast.success(`Successfully removed ${data.removed} metadata.${ext} files`)
          }
        })
        .catch((error) => {
          console.error('Failed to remove metadata files', error)
-          this.$toast.error(this.$getString('ToastMetadataFilesRemovedError', [ext]))
+          this.$toast.error('Failed to remove metadata files')
        })
        .finally(() => {
          this.$emit('update:processing', false)
@ -78,4 +78,4 @@ export default {
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/modals/libraries/ScheduleScan.vue
+++ b/client/components/modals/libraries/ScheduleScan.vue
@ -5,9 +5,6 @@
      <ui-checkbox v-model="enableAutoScan" @input="toggleEnableAutoScan" :label="$strings.LabelEnable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
    </div>
    <widgets-cron-expression-builder ref="cronExpressionBuilder" v-if="enableAutoScan" v-model="cronExpression" @input="updatedCron" />
-    <div v-else>
-      <p class="text-yellow-400 text-base">{{ $strings.MessageScheduleLibraryScanNote }}</p>
-    </div>
  </div>
 </template>

--- a/client/components/modals/notification/NotificationEditModal.vue
+++ b/client/components/modals/notification/NotificationEditModal.vue
@ -25,8 +25,8 @@
              <ui-toggle-switch v-model="newNotification.enabled" />
              <p class="text-lg pl-2">{{ $strings.LabelEnable }}</p>
            </div>
-            <div class="grow" />
-            <ui-btn color="bg-success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
          </div>
        </div>
      </div>
@ -77,13 +77,7 @@ export default {
      return this.notificationData.events || []
    },
    eventOptions() {
-      return this.notificationEvents.map((e) => {
-        return {
-          value: e.name,
-          text: e.name,
-          subtext: this.$strings[e.descriptionKey] || e.description
-        }
-      })
+      return this.notificationEvents.map((e) => ({ value: e.name, text: e.name, subtext: e.description }))
    },
    selectedEventData() {
      return this.notificationEvents.find((e) => e.name === this.newNotification.eventName)
@ -92,7 +86,7 @@ export default {
      return this.selectedEventData && this.selectedEventData.requiresLibrary
    },
    title() {
-      return this.isNew ? this.$strings.HeaderNotificationCreate : this.$strings.HeaderNotificationUpdate
+      return this.isNew ? 'Create Notification' : 'Update Notification'
    },
    availableVariables() {
      return this.selectedEventData ? this.selectedEventData.variables || null : null
@ -110,9 +104,9 @@ export default {
    },
    submitForm() {
      this.$refs.urlsInput?.forceBlur()
-
+      
      if (!this.newNotification.urls.length) {
-        this.$toast.error(this.$strings.ToastAppriseUrlRequired)
+        this.$toast.error('Must enter an Apprise URL')
        return
      }

@ -133,12 +127,12 @@ export default {
        .$patch(`/api/notifications/${payload.id}`, payload)
        .then((updatedSettings) => {
          this.$emit('update', updatedSettings)
-          this.$toast.success(this.$strings.ToastNotificationUpdateSuccess)
+          this.$toast.success('Notification updated')
          this.show = false
        })
        .catch((error) => {
          console.error('Failed to update notification', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error('Failed to update notification')
        })
        .finally(() => {
          this.processing = false
@ -155,11 +149,12 @@ export default {
        .$post('/api/notifications', payload)
        .then((updatedSettings) => {
          this.$emit('update', updatedSettings)
+          this.$toast.success('Notification created')
          this.show = false
        })
        .catch((error) => {
          console.error('Failed to create notification', error)
-          this.$toast.error(this.$strings.ToastNotificationCreateFailed)
+          this.$toast.error('Failed to create notification')
        })
        .finally(() => {
          this.processing = false
--- a/client/components/modals/player/QueueItemRow.vue
+++ b/client/components/modals/player/QueueItemRow.vue
@ -1,7 +1,7 @@
 <template>
  <div v-if="item" class="w-full flex items-center px-4 py-2" :class="wrapperClass" @mouseover="mouseover" @mouseleave="mouseleave">
    <covers-preview-cover :src="coverUrl" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" />
-    <div class="grow px-2 py-1 queue-item-row-content truncate">
+    <div class="flex-grow px-2 py-1 queue-item-row-content truncate">
      <p class="text-gray-200 text-sm truncate">{{ title }}</p>
      <p class="text-gray-300 text-sm">{{ subtitle }}</p>
      <p v-if="caption" class="text-gray-400 text-xs">{{ caption }}</p>
@ -9,10 +9,10 @@
    <div class="w-28">
      <p v-if="isOpenInPlayer" class="text-sm text-right text-gray-400">{{ $strings.ButtonPlaying }}</p>
      <div v-else-if="isHovering" class="flex items-center justify-end -mx-1">
-        <button class="outline-hidden mx-1 flex items-center" @click.stop="playClick">
+        <button class="outline-none mx-1 flex items-center" @click.stop="playClick">
          <span class="material-symbols fill text-2xl text-success">play_arrow</span>
        </button>
-        <button class="outline-hidden mx-1 flex items-center" @click.stop="removeClick">
+        <button class="outline-none mx-1 flex items-center" @click.stop="removeClick">
          <span class="material-symbols text-2xl text-error">close</span>
        </button>
      </div>
@ -55,7 +55,7 @@ export default {
      return this.item.coverPath
    },
    coverUrl() {
-      if (!this.coverPath) return this.$store.getters['globals/getPlaceholderCoverSrc']
+      if (!this.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId)
    },
    bookCoverAspectRatio() {
@ -72,9 +72,9 @@ export default {
      return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episodeId)
    },
    wrapperClass() {
-      if (this.isOpenInPlayer) return 'bg-yellow-400/10'
-      if (this.index % 2 === 0) return 'bg-gray-300/5 hover:bg-gray-300/10'
-      return 'bg-bg hover:bg-gray-300/10'
+      if (this.isOpenInPlayer) return 'bg-yellow-400 bg-opacity-10'
+      if (this.index % 2 === 0) return 'bg-gray-300 bg-opacity-5 hover:bg-opacity-10'
+      return 'bg-bg hover:bg-gray-300 hover:bg-opacity-10'
    }
  },
  methods: {
@ -99,4 +99,4 @@ export default {
 .queue-item-row-content {
  max-width: calc(100% - 48px - 128px);
 }
-</style>
+</style>
--- a/client/components/modals/player/QueueItemsModal.vue
+++ b/client/components/modals/player/QueueItemsModal.vue
@ -10,10 +10,10 @@
        <div class="pb-4 px-4 flex items-center">
          <p class="text-base text-gray-200">{{ $strings.HeaderPlayerQueue }}</p>
          <p class="text-base text-gray-400 px-4">{{ playerQueueItems.length }} Items</p>
-          <div class="grow" />
+          <div class="flex-grow" />
          <ui-checkbox v-model="playerQueueAutoPlay" label="Auto Play" medium checkbox-bg="primary" border-color="gray-600" label-class="pl-2 mb-px" />
        </div>
-        <modals-player-queue-item-row v-for="(item, index) in playerQueueItems" :key="index" :item="item" :index="index" @play="playItem(index)" @remove="removeItem" />
+        <modals-player-queue-item-row v-for="(item, index) in playerQueueItems" :key="index" :item="item" :index="index" @play="playItem" @remove="removeItem" />
      </div>
    </div>
  </modals-modal>
@ -22,7 +22,8 @@
 <script>
 export default {
  props: {
-    value: Boolean
+    value: Boolean,
+    libraryItemId: String
  },
  data() {
    return {}
@ -49,9 +50,11 @@ export default {
    }
  },
  methods: {
-    playItem(index) {
-      this.$eventBus.$emit('play-queue-item', {
-        index
+    playItem(item) {
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: item.libraryItemId,
+        episodeId: item.episodeId || null,
+        queueItems: this.playerQueueItems
      })
      this.show = false
    },
@ -60,4 +63,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/client/components/modals/playlists/AddCreateModal.vue
+++ b/client/components/modals/playlists/AddCreateModal.vue
@ -6,7 +6,7 @@
      </div>
    </template>

-    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
      <div v-if="show" class="w-full h-full">
        <div class="py-4 px-4">
          <h1 v-if="!isBatch" class="text-2xl">{{ $strings.LabelAddToPlaylist }}</h1>
@ -19,26 +19,16 @@
            </template>
          </transition-group>
        </div>
-        <div v-if="!playlists.length" class="flex h-32 items-center justify-center text-center px-2">
-          <div>
-            <p class="text-xl mb-2">{{ $strings.MessageNoUserPlaylists }}</p>
-            <div class="text-sm flex items-center justify-center text-gray-200">
-              <p>{{ $strings.MessageNoUserPlaylistsHelp }}</p>
-              <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
-                <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
-                  <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
-                </a>
-              </ui-tooltip>
-            </div>
-          </div>
+        <div v-if="!playlists.length" class="flex h-32 items-center justify-center">
+          <p class="text-xl">{{ $strings.MessageNoUserPlaylists }}</p>
        </div>
-        <div class="w-full h-px bg-white/10" />
+        <div class="w-full h-px bg-white bg-opacity-10" />
        <form @submit.prevent="submitCreatePlaylist">
-          <div class="flex px-4 py-2 items-center text-center border-b border-white/10 text-white/80">
-            <div class="grow px-2">
+          <div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
+            <div class="flex-grow px-2">
              <ui-text-input v-model="newPlaylistName" :placeholder="$strings.PlaceholderNewPlaylist" class="w-full" />
            </div>
-            <ui-btn type="submit" color="bg-success" :padding-x="4" class="h-10">{{ $strings.ButtonCreate }}</ui-btn>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10">{{ $strings.ButtonCreate }}</ui-btn>
          </div>
        </form>
      </div>
@ -140,11 +130,12 @@ export default {
        .$post(`/api/playlists/${playlist.id}/batch/remove`, { items: itemObjects })
        .then((updatedPlaylist) => {
          console.log(`Items removed from playlist`, updatedPlaylist)
+          this.$toast.success('Playlist item(s) removed')
          this.processing = false
        })
        .catch((error) => {
          console.error('Failed to remove items from playlist', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error('Failed to remove playlist item(s)')
          this.processing = false
        })
    },
@ -157,11 +148,12 @@ export default {
        .$post(`/api/playlists/${playlist.id}/batch/add`, { items: itemObjects })
        .then((updatedPlaylist) => {
          console.log(`Items added to playlist`, updatedPlaylist)
+          this.$toast.success('Items added to playlist')
          this.processing = false
        })
        .catch((error) => {
          console.error('Failed to add items to playlist', error)
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
+          this.$toast.error('Failed to add items to playlist')
          this.processing = false
        })
    },
@ -182,13 +174,14 @@ export default {
        .$post('/api/playlists', newPlaylist)
        .then((data) => {
          console.log('New playlist created', data)
+          this.$toast.success(`Playlist "${data.name}" created`)
          this.processing = false
          this.newPlaylistName = ''
        })
        .catch((error) => {
          console.error('Failed to create playlist', error)
          var errMsg = error.response ? error.response.data || '' : ''
-          this.$toast.error(this.$strings.ToastPlaylistCreateFailed + ': ' + errMsg)
+          this.$toast.error(`Failed to create playlist: ${errMsg}`)
          this.processing = false
        })
    }
--- a/Show more
+++ b/Show more