diff --git a/src/lib/components/NowPlayingBar.backup.svelte b/src/lib/components/NowPlayingBar.backup.svelte
new file mode 100644
index 000000000..714722b03
--- /dev/null
+++ b/src/lib/components/NowPlayingBar.backup.svelte
@@ -0,0 +1,574 @@
+<script lang="ts">
+  import {
+    Shuffle,
+    SkipBack,
+    Play,
+    Pause,
+    SkipForward,
+    Repeat,
+    Heart,
+    Plus,
+    List,
+    Volume2,
+    VolumeX,
+    Volume1,
+    Cast,
+    Mic2
+  } from 'lucide-svelte';
+  import QualityBadge from './QualityBadge.svelte';
+  import GlassSurface from './glass/GlassSurface.svelte';
+
+  interface Props {
+    artwork?: string;
+    trackTitle?: string;
+    artist?: string;
+    quality?: string;
+    qualityLevel?: number;
+    bitDepth?: number;
+    samplingRate?: number;
+    isPlaying?: boolean;
+    onTogglePlay?: () => void;
+    onSkipBack?: () => void;
+    onSkipForward?: () => void;
+    currentTime?: number;
+    duration?: number;
+    onSeek?: (time: number) => void;
+    volume?: number;
+    onVolumeChange?: (volume: number) => void;
+    isShuffle?: boolean;
+    onToggleShuffle?: () => void;
+    repeatMode?: 'off' | 'all' | 'one';
+    onToggleRepeat?: () => void;
+    isFavorite?: boolean;
+    onToggleFavorite?: () => void;
+    onOpenQueue?: () => void;
+    onOpenFullScreen?: () => void;
+    onCast?: () => void;
+    onToggleLyrics?: () => void;
+    lyricsActive?: boolean;
+  }
+
+  let {
+    artwork = '',
+    trackTitle = '',
+    artist = '',
+    quality = '',
+    qualityLevel = 0,
+    bitDepth,
+    samplingRate,
+    isPlaying = false,
+    onTogglePlay,
+    onSkipBack,
+    onSkipForward,
+    currentTime = 0,
+    duration = 0,
+    onSeek,
+    volume = 70,
+    onVolumeChange,
+    isShuffle = false,
+    onToggleShuffle,
+    repeatMode = 'off',
+    onToggleRepeat,
+    isFavorite = false,
+    onToggleFavorite,
+    onOpenQueue,
+    onOpenFullScreen,
+    onCast,
+    onToggleLyrics,
+    lyricsActive = false
+  }: Props = $props();
+
+  let progressRef: HTMLDivElement;
+  let volumeRef: HTMLDivElement;
+  let isDraggingProgress = $state(false);
+  let isDraggingVolume = $state(false);
+
+  const progress = $derived(duration > 0 ? (currentTime / duration) * 100 : 0);
+  const hasTrack = $derived(trackTitle !== '');
+
+  function formatTime(seconds: number): string {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  function handleProgressMouseDown(e: MouseEvent) {
+    isDraggingProgress = true;
+    updateProgress(e);
+  }
+
+  function updateProgress(e: MouseEvent) {
+    if (progressRef) {
+      const rect = progressRef.getBoundingClientRect();
+      const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+      const newTime = Math.round((percentage / 100) * duration);
+      onSeek?.(newTime);
+    }
+  }
+
+  function handleVolumeMouseDown(e: MouseEvent) {
+    isDraggingVolume = true;
+    updateVolume(e);
+  }
+
+  function updateVolume(e: MouseEvent) {
+    if (volumeRef) {
+      const rect = volumeRef.getBoundingClientRect();
+      const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+      onVolumeChange?.(Math.round(percentage));
+    }
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (isDraggingProgress) updateProgress(e);
+    if (isDraggingVolume) updateVolume(e);
+  }
+
+  function handleMouseUp() {
+    isDraggingProgress = false;
+    isDraggingVolume = false;
+  }
+
+  function handleRepeatClick() {
+    onToggleRepeat?.();
+  }
+
+  $effect(() => {
+    if (isDraggingProgress || isDraggingVolume) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  });
+</script>
+
+<GlassSurface rootClassName="now-playing-bar" enableRipple={false} enableDistortion={false}>
+  <!-- Left Section - Track Info -->
+  <div class="track-info">
+    {#if hasTrack}
+      <button class="artwork-btn" onclick={onOpenFullScreen}>
+        {#if artwork}
+          <img src={artwork} alt={trackTitle} />
+        {:else}
+          <div class="artwork-placeholder">
+            <Play size={20} />
+          </div>
+        {/if}
+      </button>
+      <div class="track-details">
+        <div class="track-title">{trackTitle}</div>
+        <div class="track-artist">{artist}</div>
+        <div class="track-quality">
+          <QualityBadge {quality} {bitDepth} {samplingRate} />
+        </div>
+      </div>
+    {:else}
+      <div class="empty-state">
+        <span class="empty-text">No track playing</span>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Center Section - Controls & Progress -->
+  <div class="controls-section">
+    <div class="control-buttons">
+      <button
+        class="control-btn"
+        class:active={isShuffle}
+        onclick={onToggleShuffle}
+      >
+        <Shuffle size={20} />
+      </button>
+      <button class="control-btn primary" onclick={onSkipBack}>
+        <SkipBack size={24} />
+      </button>
+      <button class="control-btn primary play-pause" onclick={onTogglePlay}>
+        {#if isPlaying}
+          <Pause size={28} />
+        {:else}
+          <Play size={28} />
+        {/if}
+      </button>
+      <button class="control-btn primary" onclick={onSkipForward}>
+        <SkipForward size={24} />
+      </button>
+      <button
+        class="control-btn"
+        class:active={repeatMode !== 'off'}
+        onclick={handleRepeatClick}
+      >
+        <Repeat size={20} />
+        {#if repeatMode === 'one'}
+          <span class="repeat-one">1</span>
+        {/if}
+      </button>
+    </div>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <span class="time">{formatTime(currentTime)}</span>
+      <div
+        class="progress-bar"
+        bind:this={progressRef}
+        onmousedown={handleProgressMouseDown}
+        role="slider"
+        tabindex="0"
+        aria-valuenow={currentTime}
+        aria-valuemin={0}
+        aria-valuemax={duration}
+      >
+        <div class="progress-fill" style="width: {progress}%"></div>
+        <div class="progress-thumb" style="left: {progress}%"></div>
+      </div>
+      <span class="time">{formatTime(duration)}</span>
+    </div>
+  </div>
+
+  <!-- Right Section - Actions & Volume -->
+  <div class="actions-section">
+    <button
+      class="action-btn"
+      class:active={isFavorite}
+      onclick={onToggleFavorite}
+    >
+      <Heart size={20} fill={isFavorite ? 'var(--accent-primary)' : 'none'} color={isFavorite ? 'var(--accent-primary)' : '#888888'} />
+    </button>
+    <button class="action-btn">
+      <Plus size={20} />
+    </button>
+    <button class="action-btn" onclick={onOpenQueue}>
+      <List size={20} />
+    </button>
+    <button class="action-btn" onclick={onCast} title="Cast to device">
+      <Cast size={20} />
+    </button>
+    <button
+      class="action-btn"
+      class:active={lyricsActive}
+      onclick={onToggleLyrics}
+      title="Lyrics"
+    >
+      <Mic2 size={20} />
+    </button>
+
+    <!-- Volume Control -->
+    <div class="volume-control">
+      <button class="action-btn" onclick={() => onVolumeChange?.(volume === 0 ? 70 : 0)}>
+        {#if volume === 0}
+          <VolumeX size={20} />
+        {:else if volume < 50}
+          <Volume1 size={20} />
+        {:else}
+          <Volume2 size={20} />
+        {/if}
+      </button>
+      <div
+        class="volume-bar"
+        bind:this={volumeRef}
+        onmousedown={handleVolumeMouseDown}
+        role="slider"
+        tabindex="0"
+        aria-valuenow={volume}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <div class="volume-fill" style="width: {volume}%"></div>
+        <div class="volume-thumb" style="left: {volume}%"></div>
+      </div>
+    </div>
+
+    <span class="remaining-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
+  </div>
+</GlassSurface>
+
+<style>
+  :global(.now-playing-bar) {
+    position: fixed !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: auto !important;
+    height: 80px;
+    z-index: 100;
+    --glass-bg: rgba(25, 25, 30, 0.88);
+    --glass-blur: 20px;
+    --glass-radius: 0;
+    --glass-border: rgba(255, 255, 255, 0.06);
+    --glass-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
+  }
+
+  :global(.now-playing-bar .glass-content) {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    gap: 24px;
+  }
+
+  /* Track Info */
+  .track-info {
+    width: 240px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .artwork-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 150ms ease;
+  }
+
+  .artwork-btn:hover {
+    opacity: 0.8;
+  }
+
+  .artwork-btn img {
+    width: 56px;
+    height: 56px;
+    border-radius: 4px;
+    object-fit: cover;
+  }
+
+  .artwork-placeholder {
+    width: 56px;
+    height: 56px;
+    border-radius: 4px;
+    background: var(--bg-tertiary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    height: 56px;
+  }
+
+  .empty-text {
+    font-size: 14px;
+    color: var(--text-muted);
+  }
+
+  .track-details {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .track-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .track-artist {
+    font-size: 13px;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .track-quality {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 2px;
+  }
+
+  .quality-text {
+    font-size: 11px;
+    color: #666666;
+  }
+
+  /* Controls */
+  .controls-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .control-buttons {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .control-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: color 150ms ease, transform 100ms ease;
+    position: relative;
+  }
+
+  .control-btn:hover {
+    color: var(--text-primary);
+  }
+
+  .control-btn:active {
+    transform: scale(0.95);
+  }
+
+  .control-btn.primary {
+    color: var(--text-primary);
+  }
+
+  .control-btn.primary:hover {
+    color: var(--accent-primary);
+  }
+
+  .control-btn.active {
+    color: var(--accent-primary);
+  }
+
+  .repeat-one {
+    position: absolute;
+    font-size: 10px;
+    font-weight: 700;
+    top: -8px;
+    right: -4px;
+  }
+
+  .control-btn.play-pause {
+    margin: 0 8px;
+  }
+
+  /* Progress Bar */
+  .progress-container {
+    width: 100%;
+    max-width: 600px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .time {
+    font-size: 12px;
+    color: #666666;
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .progress-bar {
+    flex: 1;
+    height: 4px;
+    background-color: #333333;
+    border-radius: 9999px;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background-color: var(--accent-primary);
+    border-radius: 9999px;
+    transition: width 50ms linear;
+  }
+
+  .progress-thumb {
+    position: absolute;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  .progress-bar:hover .progress-thumb {
+    opacity: 1;
+  }
+
+  /* Actions */
+  .actions-section {
+    width: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+
+  .action-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: color 150ms ease;
+  }
+
+  .action-btn:hover {
+    color: var(--text-primary);
+  }
+
+  .action-btn.active {
+    color: var(--accent-primary);
+  }
+
+  /* Volume */
+  .volume-control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 8px;
+  }
+
+  .volume-bar {
+    width: 80px;
+    height: 4px;
+    background-color: #333333;
+    border-radius: 9999px;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .volume-fill {
+    height: 100%;
+    background-color: var(--accent-primary);
+    border-radius: 9999px;
+  }
+
+  .volume-thumb {
+    position: absolute;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  .volume-bar:hover .volume-thumb {
+    opacity: 1;
+  }
+
+  .remaining-time {
+    font-size: 12px;
+    color: #666666;
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    margin-left: 8px;
+  }
+</style>
diff --git a/src/lib/components/NowPlayingBar.svelte b/src/lib/components/NowPlayingBar.svelte
index 4c1a35e9d..4437b1e47 100644
--- a/src/lib/components/NowPlayingBar.svelte
+++ b/src/lib/components/NowPlayingBar.svelte
@@ -184,23 +184,23 @@
         onclick={onToggleShuffle}
         title="Shuffle"
       >
-        <Shuffle size={18} />
+        <Shuffle size={16} />
       </button>
 
       <button class="control-btn" onclick={onSkipBack} title="Previous">
-        <SkipBack size={20} />
+        <SkipBack size={18} />
       </button>
 
       <button class="control-btn play-btn" onclick={onTogglePlay} title={isPlaying ? 'Pause' : 'Play'}>
         {#if isPlaying}
-          <Pause size={22} />
+          <Pause size={20} />
         {:else}
-          <Play size={22} />
+          <Play size={20} />
         {/if}
       </button>
 
       <button class="control-btn" onclick={onSkipForward} title="Next">
-        <SkipForward size={20} />
+        <SkipForward size={18} />
       </button>
 
       <button
@@ -210,16 +210,16 @@
         title={repeatMode === 'off' ? 'Repeat' : repeatMode === 'all' ? 'Repeat All' : 'Repeat One'}
       >
         {#if repeatMode === 'one'}
-          <Repeat1 size={18} />
+          <Repeat1 size={16} />
         {:else}
-          <Repeat size={18} />
+          <Repeat size={16} />
         {/if}
       </button>
 
       <div class="divider"></div>
 
       <button class="control-btn" title="Add to Playlist">
-        <Plus size={18} />
+        <Plus size={16} />
       </button>
 
       <button
@@ -228,26 +228,25 @@
         onclick={onToggleFavorite}
         title={isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
       >
-        <Heart size={18} fill={isFavorite ? 'currentColor' : 'none'} />
+        <Heart size={16} fill={isFavorite ? 'currentColor' : 'none'} />
       </button>
     </div>
 
     <!-- Center: Song Card -->
     <div class="center-section">
       {#if hasTrack}
-        <div
-          class="song-card"
-          role="button"
-          tabindex="0"
-          onmouseenter={() => showArtworkPreview = true}
-          onmouseleave={() => showArtworkPreview = false}
-        >
-          <button class="artwork-container" onclick={onOpenFullScreen}>
+        <div class="song-card">
+          <button
+            class="artwork-container"
+            onclick={onOpenFullScreen}
+            onmouseenter={() => showArtworkPreview = true}
+            onmouseleave={() => showArtworkPreview = false}
+          >
             {#if artwork}
               <img src={artwork} alt={trackTitle} class="artwork" />
             {:else}
               <div class="artwork-placeholder">
-                <Play size={16} />
+                <Play size={14} />
               </div>
             {/if}
 
@@ -297,7 +296,7 @@
         onclick={onCast}
         title={isCastConnected ? 'Casting - Click to manage' : 'Cast to device'}
       >
-        <Cast size={18} />
+        <Cast size={16} />
       </button>
 
       <button
@@ -306,15 +305,15 @@
         onclick={onToggleLyrics}
         title="Lyrics"
       >
-        <Mic2 size={18} />
+        <Mic2 size={16} />
       </button>
 
       <button class="control-btn" onclick={onOpenQueue} title="Queue">
-        <ListMusic size={18} />
+        <ListMusic size={16} />
       </button>
 
       <button class="control-btn" onclick={onOpenFullScreen} title="Full Screen">
-        <Maximize2 size={18} />
+        <Maximize2 size={16} />
       </button>
 
       <div class="divider"></div>
@@ -327,11 +326,11 @@
           title={volume === 0 ? 'Unmute' : 'Mute'}
         >
           {#if volume === 0}
-            <VolumeX size={18} />
+            <VolumeX size={16} />
           {:else if volume < 50}
-            <Volume1 size={18} />
+            <Volume1 size={16} />
           {:else}
-            <Volume2 size={18} />
+            <Volume2 size={16} />
           {/if}
         </button>
 
@@ -485,8 +484,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 30px;
+    height: 30px;
     padding: 0;
     background: transparent;
     border: none;
@@ -520,8 +519,8 @@
   }
 
   .play-btn {
-    width: 36px;
-    height: 36px;
+    width: 34px;
+    height: 34px;
     color: white;
     margin: 0 4px;
   }
@@ -538,8 +537,8 @@
     padding: 8px 12px;
     background: rgba(255, 255, 255, 0.04);
     border-radius: 8px;
-    max-width: 500px;
-    min-width: 320px;
+    max-width: 700px;
+    min-width: 640px;
   }
 
   .artwork-container {
diff --git a/src/lib/components/QualityBadge.svelte b/src/lib/components/QualityBadge.svelte
index 6755a289d..462b233b6 100644
--- a/src/lib/components/QualityBadge.svelte
+++ b/src/lib/components/QualityBadge.svelte
@@ -133,16 +133,16 @@
   }
 
   .tier-label {
-    font-size: 9px;
+    font-size: 8px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: rgba(255, 255, 255, 0.85);
+    color: rgba(255, 255, 255, 0.9);
   }
 
   .quality-info {
-    font-size: 10px;
+    font-size: 9px;
     font-weight: 500;
-    color: rgba(255, 255, 255, 0.85);
+    color: rgba(255, 255, 255, 0.9);
   }
 </style>
diff --git a/static/cd-music.svg b/static/cd-music.svg
new file mode 100644
index 000000000..60e459bc9
--- /dev/null
+++ b/static/cd-music.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none">
+<g clip-path="url(#clip0_429_11112)">
+<circle cx="12" cy="12" r="2" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="18" cy="9" r="2" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.318 3.63135C14.2913 3.22394 13.1718 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.1514 21 19.6464 18.1892 20.6855 14.3669" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 9V2L22 4" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_429_11112">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/static/icons/AppIcons/android/144x144.png b/static/icons/AppIcons/android/144x144.png
new file mode 100644
index 000000000..51443f2b6
Binary files /dev/null and b/static/icons/AppIcons/android/144x144.png differ
diff --git a/static/icons/AppIcons/android/192x192.png b/static/icons/AppIcons/android/192x192.png
new file mode 100644
index 000000000..a5c2d7bcf
Binary files /dev/null and b/static/icons/AppIcons/android/192x192.png differ
diff --git a/static/icons/AppIcons/android/48x48.png b/static/icons/AppIcons/android/48x48.png
new file mode 100644
index 000000000..3f74ad76a
Binary files /dev/null and b/static/icons/AppIcons/android/48x48.png differ
diff --git a/static/icons/AppIcons/android/72x72.png b/static/icons/AppIcons/android/72x72.png
new file mode 100644
index 000000000..86503cae0
Binary files /dev/null and b/static/icons/AppIcons/android/72x72.png differ
diff --git a/static/icons/AppIcons/android/96x96.png b/static/icons/AppIcons/android/96x96.png
new file mode 100644
index 000000000..bae0a3fa0
Binary files /dev/null and b/static/icons/AppIcons/android/96x96.png differ
diff --git a/static/mp3-player.svg b/static/mp3-player.svg
new file mode 100644
index 000000000..915c06417
--- /dev/null
+++ b/static/mp3-player.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1"><defs><style>.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.91px;}</style></defs><rect class="cls-1" x="5.32" y="1.5" width="13.36" height="21" rx="1.91"/><circle class="cls-1" cx="12" cy="16.77" r="2.86"/><rect class="cls-1" x="8.18" y="4.36" width="7.64" height="6.68"/></svg>
\ No newline at end of file