diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md
new file mode 100644
index 0000000..308e73a
--- /dev/null
+++ b/DESIGN_SYSTEM.md
@@ -0,0 +1,539 @@
+# RepoDructor - Design System & Architecture Guide
+
+## 🎨 Design Philosophy
+
+RepoDructor follows a **Glassmorphism** design philosophy with **Aurora-inspired** lighting effects. The application emphasizes transparency, depth, and visual hierarchy through carefully crafted blur effects, subtle borders, and dynamic lighting.
+
+### Core Design Principles
+
+1. **Transparency & Depth**: All UI elements use glassmorphism with varying levels of transparency
+2. **Dynamic Lighting**: Aurora orbs and particles provide ambient lighting that responds to music playback
+3. **Smooth Animations**: Every interaction includes fluid transitions and micro-animations
+4. **Responsive Design**: Mobile-first approach with adaptive layouts
+5. **Accessibility**: Support for reduced motion and high contrast preferences
+
+---
+
+## 🏗️ Architecture Overview
+
+### Component Structure
+
+```
+components/
+├── Base Components
+│   ├── BaseButton.client.vue          # Foundation button component
+│   └── IconButton.client.vue          # Extends BaseButton for icon buttons
+├── UI Components
+│   ├── ThemeToggle.client.vue         # Dark/light theme switcher
+│   ├── PlaybackControls.client.vue    # Shuffle/repeat controls
+│   ├── TrackListItem.client.vue       # Individual track display
+│   ├── TrackList.client.vue           # Track collection container
+│   └── MusicControls.client.vue       # Main playback controls (fixed bottom)
+├── Layout Components
+│   ├── MainContainer.client.vue       # App layout wrapper
+│   └── AuroraBackground.client.vue    # Dynamic background effects
+└── pages/
+    └── index.vue                      # Main application page
+```
+
+### Component Hierarchy
+
+```
+index.vue
+├── AuroraBackground.client.vue
+├── MainContainer.client.vue
+│   ├── Header (built-in)
+│   │   ├── PlaybackControls.client.vue
+│   │   │   ├── IconButton.client.vue (shuffle)
+│   │   │   └── IconButton.client.vue (repeat)
+│   │   └── ThemeToggle.client.vue
+│   └── TrackList.client.vue
+│       └── TrackListItem.client.vue (multiple)
+└── MusicControls.client.vue
+    └── IconButton.client.vue (multiple)
+```
+
+---
+
+## 🎯 Component Design Patterns
+
+### Base Components
+
+#### BaseButton.client.vue
+**Purpose**: Foundation for all interactive buttons
+**Variants**: `default`, `icon`, `primary`
+**Key Features**:
+- Glassmorphism background with blur effects
+- Hover animations with shimmer effect
+- Active state management
+- Accessibility support
+
+```vue
+<BaseButton variant="icon" :active="true" @click="handleClick">
+  <Music :size="20" />
+</BaseButton>
+```
+
+#### IconButton.client.vue
+**Purpose**: Specialized button for icons with badges
+**Sizes**: `small`, `normal`, `large`
+**Icon Support**: String (emojis), Object/Function (Lucide Vue components)
+**Key Features**:
+- Extends BaseButton with icon-specific styling
+- Support for both emoji strings and SVG components
+- Badge support for notifications
+- Icon-specific hover animations
+- Responsive sizing with dynamic icon scaling
+
+### UI Components
+
+#### ThemeToggle.client.vue
+**Purpose**: Dark/light theme switcher
+**Key Features**:
+- Smooth rotation animation on toggle
+- Radial glow effect on hover
+- Persists preference in localStorage
+- Updates document theme attribute
+
+#### PlaybackControls.client.vue
+**Purpose**: Shuffle and repeat mode controls
+**Key Features**:
+- Icon-specific hover animations (wiggle for shuffle, spin for repeat)
+- Active state with glow effects
+- LocalStorage persistence
+- Emits change events to parent
+
+#### TrackListItem.client.vue
+**Purpose**: Individual track display with interaction
+**Key Features**:
+- Ripple effect on click
+- Hover lift animation
+- Active state with gradient background
+- Loading state with spinner
+- Waveform visualization for active playing tracks
+
+#### TrackList.client.vue
+**Purpose**: Container for track collection
+**Key Features**:
+- Staggered animations for child items
+- Scrollable container with custom scrollbar
+- Empty state and loading state handling
+- Glassmorphism container styling
+
+#### MusicControls.client.vue
+**Purpose**: Main music playback controls (fixed at bottom)
+**Key Features**:
+- Collapsible interface with compact and expanded states
+- Track information display with animated status indicators
+- Navigation controls with Lucide SVG icons (SkipBack, Play/Pause, SkipForward)
+- Progress bar with interactive seek functionality
+- Volume control with visual feedback and mute toggle
+- Compact collapse button positioned in top-right corner
+- Dynamic bottom positioning (closer when expanded, standard when collapsed)
+- Responsive layout that adapts to screen size
+
+### Layout Components
+
+#### MainContainer.client.vue
+**Purpose**: Application layout wrapper
+**Key Features**:
+- Header with app branding and controls
+- Responsive content area
+- Consistent spacing and margins
+- Glassmorphism header styling
+
+#### AuroraBackground.client.vue
+**Purpose**: Dynamic background effects
+**Key Features**:
+- Multiple floating orbs with different colors
+- Interactive orbs that respond to music playback
+- Particle system with floating elements
+- Gradient overlays
+- Performance optimized animations
+
+---
+
+## 🎨 Design Tokens
+
+### Color System
+
+```css
+/* Light Mode */
+--bg-primary: #f8fafc;
+--bg-secondary: rgba(255, 255, 255, 0.8);
+--bg-glass: rgba(255, 255, 255, 0.25);
+--text-primary: #1e293b;
+--text-secondary: #64748b;
+--accent-primary: #3b82f6;
+--accent-secondary: #8b5cf6;
+--border-glass: rgba(255, 255, 255, 0.18);
+
+/* Dark Mode */
+--bg-primary: #0f172a;
+--bg-secondary: rgba(15, 23, 42, 0.8);
+--bg-glass: rgba(15, 23, 42, 0.3);
+--text-primary: #f1f5f9;
+--text-secondary: #94a3b8;
+--accent-primary: #60a5fa;
+--accent-secondary: #a78bfa;
+--border-glass: rgba(255, 255, 255, 0.125);
+
+/* Aurora Colors */
+--aurora-1: #ff6b6b;
+--aurora-2: #4ecdc4;
+--aurora-3: #45b7d1;
+--aurora-4: #f9ca24;
+--aurora-5: #6c5ce7;
+```
+
+### Typography
+
+```css
+font-family: 'Inter', sans-serif;
+
+/* Sizes */
+--text-xs: 0.75rem;
+--text-sm: 0.875rem;
+--text-base: 1rem;
+--text-lg: 1.125rem;
+--text-xl: 1.25rem;
+--text-2xl: 1.5rem;
+
+/* Weights */
+--font-light: 300;
+--font-normal: 400;
+--font-medium: 500;
+--font-semibold: 600;
+--font-bold: 700;
+```
+
+### Spacing
+
+```css
+--space-1: 0.25rem;   /* 4px */
+--space-2: 0.5rem;    /* 8px */
+--space-3: 0.75rem;   /* 12px */
+--space-4: 1rem;      /* 16px */
+--space-5: 1.25rem;   /* 20px */
+--space-6: 1.5rem;    /* 24px */
+--space-8: 2rem;      /* 32px */
+--space-10: 2.5rem;   /* 40px */
+```
+
+### Border Radius
+
+```css
+--radius-sm: 8px;
+--radius-md: 12px;
+--radius-lg: 16px;
+--radius-xl: 20px;
+--radius-full: 50%;
+```
+
+---
+
+## ✨ Animation System
+
+### Core Animation Classes
+
+Located in `assets/css/animations.css`:
+
+```css
+/* Utility Classes */
+.animate-fade-in          /* Fade in effect */
+.animate-slide-in-up      /* Slide up with fade */
+.animate-bounce-in        /* Bounce entrance */
+.animate-scale-in         /* Scale entrance */
+.animate-glow            /* Continuous glow effect */
+.animate-pulse-glow      /* Pulsing glow */
+
+/* Hover Effects */
+.hover-lift              /* Lift on hover */
+.hover-scale             /* Scale on hover */
+.hover-glow              /* Glow on hover */
+
+/* Interactive Effects */
+.ripple                  /* Click ripple effect */
+.stagger-children        /* Staggered child animations */
+```
+
+### Performance Considerations
+
+```css
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Hardware Acceleration */
+.aurora-orb,
+.interactive-orb,
+.particle {
+  will-change: transform;
+  transform: translateZ(0);
+}
+```
+
+---
+
+## 🎨 Icon System
+
+### Icon Library: Lucide Vue
+
+RepoDructor uses **Lucide Vue** as the primary icon system for consistent, scalable iconography that matches the glassmorphism aesthetic.
+
+### Icon Implementation
+
+```vue
+<script setup>
+import { Play, Pause, SkipForward, SkipBack, Shuffle, Repeat, Repeat1, 
+         Volume2, Volume1, VolumeX, Sun, Moon, ChevronUp, ChevronDown, Music } from 'lucide-vue-next'
+</script>
+
+<template>
+  <!-- Direct component usage -->
+  <Play :size="24" />
+  
+  <!-- Dynamic icon selection -->
+  <component :is="isPlaying ? Pause : Play" :size="20" />
+  
+  <!-- With IconButton wrapper -->
+  <IconButton :icon="Shuffle" :active="isShuffled" title="Shuffle" />
+</template>
+```
+
+### Icon Categories
+
+**Playback Controls:**
+- `Play`, `Pause` - Primary playback states
+- `SkipForward`, `SkipBack` - Navigation controls
+- `Shuffle` - Random playback mode
+- `Repeat`, `Repeat1` - Repeat modes
+
+**Audio Controls:**
+- `Volume2`, `Volume1`, `VolumeX` - Volume states
+- `Music` - General music representation
+
+**Interface Controls:**
+- `Sun`, `Moon` - Theme toggle states  
+- `ChevronUp`, `ChevronDown` - Collapse/expand actions
+
+### Icon Sizing
+
+Icons automatically scale based on context:
+- **Small buttons**: 18px
+- **Normal buttons**: 20px  
+- **Large buttons**: 28px
+- **Custom sizing**: Use `:size` prop
+
+### Benefits
+
+- **Consistent**: Unified design language across all icons
+- **Scalable**: Vector-based for perfect rendering at any size
+- **Local**: No external dependencies or network requests
+- **Accessible**: Proper semantic meaning and ARIA support
+- **Themeable**: Inherit colors from CSS custom properties
+
+---
+
+## 📱 Responsive Design
+
+### Breakpoints
+
+```css
+/* Mobile First Approach */
+@media (max-width: 768px)  /* Tablet and below */
+@media (max-width: 480px)  /* Mobile */
+
+/* Special Mobile Considerations */
+@media (max-width: 768px) {
+  .music-controls {
+    /* Fixed positioning with safe areas */
+    bottom: calc(20px + env(safe-area-inset-bottom));
+    left: 20px;
+    right: 20px;
+  }
+}
+```
+
+### Layout Patterns
+
+1. **Desktop**: Horizontal layouts with fixed controls at bottom
+2. **Tablet**: Slightly compressed with smaller gaps
+3. **Mobile**: Vertical stacking with reorganized control layouts
+
+---
+
+## 🎵 Audio Integration Patterns
+
+### State Management
+
+```javascript
+// Core audio states
+const isPlaying = ref(false)
+const currentTrack = ref(null)
+const currentTime = ref(0)
+const duration = ref(0)
+const volume = ref(0.7)
+
+// Playback modes
+const isShuffled = useLocalStorage('shuffle', false)
+const repeatMode = useLocalStorage('repeat', 'none')
+```
+
+### Event Handling
+
+```javascript
+// Component communication pattern
+const emit = defineEmits(['track-selected', 'shuffle-changed'])
+
+// Handle track selection
+const handleTrackClick = (track, index) => {
+  emit('track-selected', { track, index })
+}
+```
+
+---
+
+## 🔧 Development Guidelines
+
+### Component Creation
+
+1. **Always use `.client.vue` suffix** for client-side components
+2. **Follow the composition API pattern** with `<script setup>`
+3. **Include responsive design** in every component
+4. **Add hover states and animations** for interactive elements
+5. **Support both light and dark themes**
+
+### CSS Guidelines
+
+```css
+/* Use CSS custom properties for theming */
+.component {
+  background: var(--bg-glass);
+  color: var(--text-primary);
+}
+
+/* Include smooth transitions */
+.interactive-element {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Glassmorphism pattern */
+.glass-element {
+  background: var(--bg-glass);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--border-glass);
+  border-radius: var(--radius-xl);
+}
+```
+
+### Accessibility
+
+```vue
+<!-- Include proper ARIA labels -->
+<button :aria-label="isPlaying ? 'Pause' : 'Play'" @click="togglePlay">
+  <component :is="isPlaying ? Pause : Play" :size="20" />
+</button>
+
+<!-- Support keyboard navigation -->
+<div class="focus-ring:focus-visible" tabindex="0">
+  <!-- Content -->
+</div>
+```
+
+---
+
+## 🚀 Performance Optimization
+
+### Image and Asset Handling
+
+- Use WebP format for images when possible
+- Implement lazy loading for large lists
+- Use Lucide Vue for consistent SVG iconography
+- Icons are locally bundled (no external CDN dependencies)
+
+### Animation Performance
+
+```css
+/* Use transform and opacity for animations */
+.optimized-animation {
+  transform: translateY(0);
+  opacity: 1;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+/* Avoid animating expensive properties */
+/* ❌ Don't animate: width, height, top, left */
+/* ✅ Do animate: transform, opacity, filter */
+```
+
+### Memory Management
+
+```javascript
+// Clean up audio resources
+const cleanupAudio = () => {
+  if (audioPlayer.value?.currentBlobUrl) {
+    URL.revokeObjectURL(audioPlayer.value.currentBlobUrl)
+    audioPlayer.value.currentBlobUrl = null
+  }
+}
+
+onUnmounted(() => {
+  cleanupAudio()
+})
+```
+
+---
+
+## 🎯 Future Development Considerations
+
+### Planned Features
+- Playlist management
+- Audio visualizer enhancements
+- Keyboard shortcuts
+- Drag and drop file upload
+- Audio effects (equalizer, etc.)
+
+### Technical Debt
+- Consider moving to Pinia for state management if app grows
+- Implement virtual scrolling for large track lists
+- Add unit tests for components
+- Consider PWA caching strategies
+
+### Design Evolution
+- Seasonal theme variations
+- User-customizable aurora colors
+- Advanced animation preferences
+- Accessibility improvements
+
+---
+
+## 📚 Resources
+
+### Dependencies
+- **Nuxt 3**: Application framework
+- **Vue 3**: Component framework  
+- **@vueuse/core**: Composition utilities
+- **@vite-pwa/nuxt**: PWA functionality
+- **lucide-vue-next**: SVG icon library for consistent iconography
+
+### Design References
+- **Glassmorphism**: https://glassmorphism.com/
+- **Aurora Borealis**: Color inspiration for background effects
+- **Apple Music**: UI/UX reference for music controls
+- **Spotify**: Reference for track list interactions
+
+### Code Standards
+- **ESLint**: Code linting
+- **Prettier**: Code formatting
+- **Vue Style Guide**: Component structure
+- **Conventional Commits**: Git commit format
+
+---
+
+*This design system is a living document. Update it as the application evolves and new patterns emerge.*
\ No newline at end of file
diff --git a/assets/css/animations.css b/assets/css/animations.css
new file mode 100644
index 0000000..605b562
--- /dev/null
+++ b/assets/css/animations.css
@@ -0,0 +1,410 @@
+/* Advanced Animations and Transitions */
+
+/* Smooth page transitions */
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* Enhanced glassmorphism hover effects */
+.glass:hover,
+.glass-strong:hover {
+  transform: translateY(-2px) scale(1.01);
+  box-shadow: 
+    var(--shadow-glass),
+    0 0 30px rgba(59, 130, 246, 0.15);
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Ripple effect for clickable elements */
+.ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.ripple::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.ripple:active::before {
+  width: 300px;
+  height: 300px;
+}
+
+/* Floating elements animation */
+@keyframes float-gentle {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.float-animation {
+  animation: float-gentle 6s ease-in-out infinite;
+}
+
+/* Pulse animation for active elements */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
+  }
+}
+
+.pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* Slide in animations */
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Scale animations */
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+/* Rotation animations */
+@keyframes rotateIn {
+  from {
+    opacity: 0;
+    transform: rotate(-180deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+/* Fade animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Bounce animations */
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Shake animation for errors */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
+  20%, 40%, 60%, 80% { transform: translateX(10px); }
+}
+
+/* Glow animation */
+@keyframes glow {
+  0%, 100% {
+    filter: brightness(1) drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
+  }
+  50% {
+    filter: brightness(1.2) drop-shadow(0 0 15px rgba(139, 92, 246, 0.6));
+  }
+}
+
+/* Progress bar animation */
+@keyframes progressFill {
+  0% { width: 0%; }
+  100% { width: var(--progress-width, 100%); }
+}
+
+/* Shimmer effect */
+@keyframes shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0)
+  );
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  animation: shimmer 2s infinite;
+}
+
+/* Utility classes for animations */
+.animate-slide-in-left {
+  animation: slideInLeft 0.5s ease-out;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.5s ease-out;
+}
+
+.animate-slide-in-up {
+  animation: slideInUp 0.5s ease-out;
+}
+
+.animate-slide-in-down {
+  animation: slideInDown 0.5s ease-out;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.animate-bounce-in {
+  animation: bounceIn 0.6s ease-out;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.4s ease-out;
+}
+
+.animate-rotate-in {
+  animation: rotateIn 0.6s ease-out;
+}
+
+.animate-shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+.animate-glow {
+  animation: glow 3s ease-in-out infinite alternate;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* Staggered animations */
+.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
+.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
+.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
+.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
+.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
+.stagger-children > *:nth-child(n+6) { animation-delay: 0.6s; }
+
+/* Hover state enhancements */
+.hover-lift {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+}
+
+.hover-scale {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+.hover-glow {
+  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
+}
+
+/* Focus states for accessibility */
+.focus-ring:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  .aurora-orb,
+  .interactive-orb,
+  .particle {
+    animation: none !important;
+  }
+  
+  .float-animation {
+    animation: none !important;
+  }
+}
+
+/* High contrast mode adjustments */
+@media (prefers-contrast: high) {
+  .glass,
+  .glass-strong {
+    border: 2px solid var(--text-primary);
+  }
+  
+  .shimmer {
+    background: none;
+  }
+}
+
+/* Custom scrollbar animations */
+::-webkit-scrollbar-thumb {
+  transition: background-color 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-secondary);
+}
+
+/* Loading state animations */
+.loading-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-glass) 25%,
+    rgba(59, 130, 246, 0.1) 50%,
+    var(--bg-glass) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* Music-specific animations */
+.music-playing {
+  animation: pulse-glow 1.5s ease-in-out infinite;
+}
+
+.volume-wave {
+  animation: wave 1s ease-in-out infinite;
+}
+
+@keyframes wave {
+  0%, 100% { height: 20%; }
+  50% { height: 100%; }
+}
+
+/* Success and error animations */
+.success-bounce {
+  animation: bounceIn 0.6s ease-out;
+  color: #10b981;
+}
+
+.error-shake {
+  animation: shake 0.5s ease-in-out;
+  color: #ef4444;
+}
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
index 5e2c090..2e12e2f 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import './animations.css';
 
 :root {
   /* Light mode variables */
@@ -46,8 +47,8 @@ body {
   font-family: 'Inter', sans-serif;
   background: var(--bg-primary);
   color: var(--text-primary);
-  overflow-x: hidden;
-  min-height: 100vh;
+  overflow: hidden;
+  height: 100vh;
 }
 
 /* Glassmorphism effect */
@@ -58,6 +59,9 @@ body {
   border: 1px solid var(--border-glass);
   border-radius: 20px;
   box-shadow: var(--shadow-glass);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
 }
 
 .glass-strong {
@@ -67,6 +71,9 @@ body {
   border: 1px solid var(--border-glass);
   border-radius: 20px;
   box-shadow: var(--shadow-glass);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
 }
 
 /* Aurora background animation */
@@ -143,26 +150,35 @@ body {
 .btn {
   background: var(--bg-glass);
   backdrop-filter: blur(20px);
-  border: 1px solid var(--border-glass);
+  border: none;
   border-radius: 12px;
   color: var(--text-primary);
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   padding: 12px 20px;
   font-weight: 500;
+  box-shadow: 
+    0 4px 12px rgba(0, 0, 0, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
 }
 
 .btn:hover {
   background: var(--accent-primary);
   color: white;
-  transform: translateY(-2px);
-  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
+  transform: translateY(-3px);
+  box-shadow: 
+    0 8px 20px rgba(59, 130, 246, 0.4),
+    0 4px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
 
 .btn-icon {
   background: var(--bg-glass);
   backdrop-filter: blur(20px);
-  border: 1px solid var(--border-glass);
+  border: none;
   border-radius: 50%;
   width: 48px;
   height: 48px;
@@ -170,13 +186,22 @@ body {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 
+    0 4px 12px rgba(0, 0, 0, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
 }
 
 .btn-icon:hover {
   background: var(--accent-primary);
-  transform: scale(1.1);
-  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
+  transform: scale(1.1) translateY(-2px);
+  box-shadow: 
+    0 8px 20px rgba(59, 130, 246, 0.4),
+    0 4px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
 
 /* Music player container */
diff --git a/components/AuroraBackground.client.vue b/components/AuroraBackground.client.vue
new file mode 100644
index 0000000..d19669c
--- /dev/null
+++ b/components/AuroraBackground.client.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="aurora-background">
+    <!-- Main Aurora Orbs -->
+    <div 
+      v-for="(orb, index) in auroraOrbs" 
+      :key="`orb-${index}`"
+      class="aurora-orb"
+      :class="`orb-${index + 1}`"
+      :style="orbStyle(orb, index)"
+    ></div>
+    
+    <!-- Interactive Orbs (respond to music) -->
+    <div 
+      v-for="(orb, index) in interactiveOrbs" 
+      :key="`interactive-${index}`"
+      class="interactive-orb"
+      :style="interactiveOrbStyle(orb, index)"
+      :class="{ pulsing: isPlaying }"
+    ></div>
+    
+    <!-- Particle System -->
+    <div class="particles">
+      <div 
+        v-for="(particle, index) in particles" 
+        :key="`particle-${index}`"
+        class="particle"
+        :style="particleStyle(particle, index)"
+      ></div>
+    </div>
+    
+    <!-- Gradient Overlay -->
+    <div class="gradient-overlay" :class="{ active: isPlaying }"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+
+const props = defineProps({
+  isPlaying: {
+    type: Boolean,
+    default: false
+  },
+  currentTrack: {
+    type: Object,
+    default: null
+  }
+})
+
+// Aurora orbs configuration
+const auroraOrbs = ref([
+  {
+    colors: ['var(--aurora-1)', 'var(--aurora-2)'],
+    size: 300,
+    position: { top: '10%', left: '10%' },
+    duration: 8,
+    delay: 0
+  },
+  {
+    colors: ['var(--aurora-3)', 'var(--aurora-4)'],
+    size: 250,
+    position: { top: '60%', right: '20%' },
+    duration: 10,
+    delay: 2
+  },
+  {
+    colors: ['var(--aurora-5)', 'var(--aurora-1)'],
+    size: 200,
+    position: { bottom: '20%', left: '50%' },
+    duration: 12,
+    delay: 4
+  },
+  {
+    colors: ['var(--aurora-2)', 'var(--aurora-5)'],
+    size: 180,
+    position: { top: '30%', right: '10%' },
+    duration: 9,
+    delay: 6
+  }
+])
+
+// Interactive orbs that respond to music
+const interactiveOrbs = ref([
+  {
+    colors: ['var(--accent-primary)', 'var(--accent-secondary)'],
+    size: 120,
+    position: { top: '20%', left: '70%' },
+    intensity: 0.5
+  },
+  {
+    colors: ['var(--aurora-3)', 'var(--aurora-5)'],
+    size: 90,
+    position: { bottom: '30%', left: '20%' },
+    intensity: 0.3
+  },
+  {
+    colors: ['var(--aurora-1)', 'var(--aurora-4)'],
+    size: 100,
+    position: { top: '70%', right: '30%' },
+    intensity: 0.4
+  }
+])
+
+// Floating particles
+const particles = ref([])
+
+// Animation frame reference
+let animationFrame = null
+
+// Generate particles
+const generateParticles = () => {
+  particles.value = Array.from({ length: 20 }, (_, index) => ({
+    size: Math.random() * 4 + 1,
+    position: {
+      left: Math.random() * 100 + '%',
+      top: Math.random() * 100 + '%'
+    },
+    delay: Math.random() * 10,
+    duration: Math.random() * 20 + 15,
+    opacity: Math.random() * 0.3 + 0.1
+  }))
+}
+
+// Compute styles for orbs
+const orbStyle = (orb, index) => ({
+  '--orb-size': orb.size + 'px',
+  '--animation-duration': orb.duration + 's',
+  '--animation-delay': orb.delay + 's',
+  '--color-1': orb.colors[0],
+  '--color-2': orb.colors[1],
+  ...orb.position
+})
+
+const interactiveOrbStyle = (orb, index) => ({
+  '--orb-size': orb.size + 'px',
+  '--color-1': orb.colors[0],
+  '--color-2': orb.colors[1],
+  '--intensity': orb.intensity,
+  ...orb.position
+})
+
+const particleStyle = (particle, index) => ({
+  '--particle-size': particle.size + 'px',
+  '--animation-delay': particle.delay + 's',
+  '--animation-duration': particle.duration + 's',
+  '--particle-opacity': particle.opacity,
+  ...particle.position
+})
+
+// Watch for track changes to trigger special effects
+watch(() => props.currentTrack, (newTrack, oldTrack) => {
+  if (newTrack && newTrack !== oldTrack) {
+    triggerTrackChangeEffect()
+  }
+})
+
+const triggerTrackChangeEffect = () => {
+  // Create a burst effect when track changes
+  const burstOrb = document.createElement('div')
+  burstOrb.className = 'track-change-burst'
+  burstOrb.style.cssText = `
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 50px;
+    height: 50px;
+    background: radial-gradient(circle, var(--accent-primary), transparent);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    animation: burst 1s ease-out forwards;
+    pointer-events: none;
+    z-index: -1;
+  `
+  
+  document.body.appendChild(burstOrb)
+  
+  setTimeout(() => {
+    document.body.removeChild(burstOrb)
+  }, 1000)
+}
+
+onMounted(() => {
+  generateParticles()
+  
+  // Add burst animation keyframes to document
+  const style = document.createElement('style')
+  style.textContent = `
+    @keyframes burst {
+      0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
+      100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
+    }
+  `
+  document.head.appendChild(style)
+})
+</script>
+
+<style scoped>
+.aurora-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.aurora-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.6;
+  background: linear-gradient(45deg, var(--color-1), var(--color-2));
+  width: var(--orb-size);
+  height: var(--orb-size);
+  animation: float var(--animation-duration) ease-in-out infinite;
+  animation-delay: var(--animation-delay);
+}
+
+.interactive-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  opacity: calc(var(--intensity) * 0.8);
+  background: linear-gradient(45deg, var(--color-1), var(--color-2));
+  width: var(--orb-size);
+  height: var(--orb-size);
+  transition: all 0.5s ease;
+  animation: gentle-float 6s ease-in-out infinite;
+}
+
+.interactive-orb.pulsing {
+  opacity: calc(var(--intensity) * 1.2);
+  filter: blur(40px);
+  animation: music-pulse 2s ease-in-out infinite;
+}
+
+.particles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.particle {
+  position: absolute;
+  width: var(--particle-size);
+  height: var(--particle-size);
+  background: radial-gradient(circle, var(--accent-primary), transparent);
+  border-radius: 50%;
+  opacity: var(--particle-opacity);
+  animation: float-particle var(--animation-duration) linear infinite;
+  animation-delay: var(--animation-delay);
+}
+
+.gradient-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 0%,
+    rgba(59, 130, 246, 0.05) 50%,
+    transparent 100%
+  );
+  transition: opacity 0.5s ease;
+  opacity: 0;
+}
+
+.gradient-overlay.active {
+  opacity: 1;
+}
+
+/* Animations */
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(30px, -30px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+}
+
+@keyframes gentle-float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(15px, -15px) scale(1.05);
+  }
+}
+
+@keyframes music-pulse {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(10px, -10px) scale(1.2);
+  }
+  50% {
+    transform: translate(-5px, 5px) scale(0.8);
+  }
+  75% {
+    transform: translate(8px, -8px) scale(1.1);
+  }
+}
+
+@keyframes float-particle {
+  0% {
+    transform: translateY(100vh) rotate(0deg);
+  }
+  100% {
+    transform: translateY(-10vh) rotate(360deg);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .aurora-orb {
+    filter: blur(60px);
+  }
+  
+  .interactive-orb {
+    filter: blur(40px);
+  }
+  
+  .interactive-orb.pulsing {
+    filter: blur(30px);
+  }
+}
+
+/* Reduce motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .aurora-orb,
+  .interactive-orb,
+  .particle {
+    animation-duration: 20s;
+  }
+  
+  .interactive-orb.pulsing {
+    animation: none;
+    opacity: calc(var(--intensity) * 0.9);
+  }
+}
+
+/* Performance optimization */
+.aurora-orb,
+.interactive-orb,
+.particle {
+  will-change: transform;
+  transform: translateZ(0);
+}
+</style>
\ No newline at end of file
diff --git a/components/BaseButton.client.vue b/components/BaseButton.client.vue
new file mode 100644
index 0000000..6827b36
--- /dev/null
+++ b/components/BaseButton.client.vue
@@ -0,0 +1,186 @@
+<template>
+  <button 
+    :class="[
+      'base-button',
+      variant,
+      {
+        'active': active,
+        'disabled': disabled
+      }
+    ]"
+    :disabled="disabled"
+    @click="handleClick"
+    v-bind="$attrs"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'icon', 'primary'].includes(value)
+  },
+  active: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const handleClick = (event) => {
+  if (!props.disabled) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style scoped>
+.base-button {
+  background: var(--bg-glass);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: none;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 500;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 
+    0 4px 12px rgba(0, 0, 0, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.base-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.5s;
+}
+
+.base-button:hover::before {
+  left: 100%;
+}
+
+.base-button:hover {
+  background: var(--accent-primary);
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 
+    0 8px 20px rgba(59, 130, 246, 0.4),
+    0 4px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.base-button:active {
+  transform: translateY(1px);
+  box-shadow: 
+    0 2px 6px rgba(0, 0, 0, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.base-button.default {
+  border-radius: 12px;
+  padding: 12px 20px;
+}
+
+.base-button.icon {
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.base-button.icon:hover {
+  transform: scale(1.1) translateY(-2px);
+  box-shadow: 
+    0 8px 20px rgba(59, 130, 246, 0.4),
+    0 4px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.base-button.primary {
+  border-radius: 12px;
+  padding: 12px 20px;
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+  color: white;
+  box-shadow: 
+    0 6px 16px rgba(59, 130, 246, 0.3),
+    0 3px 6px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.base-button.primary:hover {
+  background: linear-gradient(45deg, var(--accent-secondary), var(--accent-primary));
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 
+    0 8px 24px rgba(59, 130, 246, 0.4),
+    0 4px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+}
+
+.base-button.active {
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)) !important;
+  color: white !important;
+  box-shadow: 
+    0 6px 18px rgba(59, 130, 246, 0.5),
+    0 3px 6px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+.base-button.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.base-button.disabled:hover {
+  background: var(--bg-glass);
+  color: var(--text-primary);
+  box-shadow: 
+    0 2px 6px rgba(0, 0, 0, 0.1),
+    0 1px 2px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.02);
+}
+
+/* Animation enhancement */
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.base-button.active {
+  animation: pulse 2s infinite;
+}
+</style>
\ No newline at end of file
diff --git a/components/IconButton.client.vue b/components/IconButton.client.vue
new file mode 100644
index 0000000..c6343e9
--- /dev/null
+++ b/components/IconButton.client.vue
@@ -0,0 +1,138 @@
+<template>
+  <BaseButton 
+    variant="icon"
+    :active="active"
+    :disabled="disabled"
+    :title="title"
+    @click="$emit('click', $event)"
+    :class="[
+      'icon-button',
+      {
+        'large': size === 'large',
+        'small': size === 'small'
+      }
+    ]"
+  >
+    <component v-if="typeof icon === 'object' || typeof icon === 'function'" :is="icon" class="icon" :size="iconSize" />
+    <span v-else class="icon">{{ icon }}</span>
+    <div v-if="badge" class="badge">{{ badge }}</div>
+  </BaseButton>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import BaseButton from './BaseButton.client.vue'
+
+const props = defineProps({
+  icon: {
+    type: [String, Object, Function],
+    required: true
+  },
+  active: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'normal',
+    validator: (value) => ['small', 'normal', 'large'].includes(value)
+  },
+  badge: {
+    type: [String, Number],
+    default: null
+  }
+})
+
+defineEmits(['click'])
+
+const iconSize = computed(() => {
+  switch (props.size) {
+    case 'small': return 18
+    case 'large': return 28
+    default: return 20
+  }
+})
+</script>
+
+<style scoped>
+.icon-button {
+  position: relative;
+}
+
+.icon-button.small {
+  width: 36px;
+  height: 36px;
+  font-size: 0.9rem;
+}
+
+.icon-button.large {
+  width: 60px;
+  height: 60px;
+  font-size: 1.5rem;
+}
+
+.icon {
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+.icon-button:hover .icon {
+  transform: scale(1.1);
+}
+
+.badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--accent-primary);
+  color: white;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: 600;
+  z-index: 1;
+}
+
+/* Special animations for specific icons */
+.icon-button[title*="Shuffle"]:hover .icon {
+  animation: shuffle 0.5s ease-in-out;
+}
+
+.icon-button[title*="Repeat"]:hover .icon {
+  animation: rotate 0.5s ease-in-out;
+}
+
+.icon-button[title*="Play"]:hover .icon,
+.icon-button[title*="Pause"]:hover .icon {
+  animation: pulse-icon 0.3s ease-in-out;
+}
+
+@keyframes shuffle {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px); }
+  75% { transform: translateX(2px); }
+}
+
+@keyframes rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse-icon {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+</style>
\ No newline at end of file
diff --git a/components/MainContainer.client.vue b/components/MainContainer.client.vue
new file mode 100644
index 0000000..f9c4e3c
--- /dev/null
+++ b/components/MainContainer.client.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="main-container">
+    <!-- Header Section -->
+    <header class="app-header glass">
+      <div class="header-content">
+        <div class="app-title">
+          <h1 class="title-text">
+            <Music :size="32" class="title-icon" />
+            RepoDructor
+          </h1>
+          <p class="subtitle">Music Player</p>
+        </div>
+        
+        <div class="header-controls">
+          <PlaybackControls 
+            @shuffle-changed="$emit('shuffle-changed', $event)"
+            @repeat-changed="$emit('repeat-changed', $event)"
+          />
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+
+    <!-- Main Content Area -->
+    <main class="main-content">
+      <div class="content-wrapper">
+        <slot />
+      </div>
+    </main>
+
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Music } from 'lucide-vue-next'
+import ThemeToggle from './ThemeToggle.client.vue'
+import PlaybackControls from './PlaybackControls.client.vue'
+
+const props = defineProps({
+  currentTrack: {
+    type: Object,
+    default: null
+  },
+  isPlaying: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['shuffle-changed', 'repeat-changed'])
+
+// Computed property to determine if there's an active track
+const hasActiveTrack = computed(() => !!props.currentTrack)
+</script>
+
+<style scoped>
+.main-container {
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  padding-bottom: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.app-header {
+  margin-bottom: 15px;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.app-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    var(--accent-primary) 25%, 
+    var(--accent-secondary) 75%, 
+    transparent 100%
+  );
+}
+
+.header-content {
+  padding: 16px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.app-title {
+  flex: 1;
+}
+
+.title-text {
+  font-size: 2rem;
+  font-weight: 700;
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+  animation: glow-text 3s ease-in-out infinite alternate;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-icon {
+  color: var(--accent-primary);
+  flex-shrink: 0;
+}
+
+.subtitle {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin: 4px 0 0 0;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+}
+
+.header-controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Allow flex child to shrink */
+}
+
+.content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  animation: fadeInUp 0.6s ease-out;
+  min-height: 0; /* Allow flex child to shrink */
+}
+
+
+/* Animations */
+@keyframes glow-text {
+  0% { 
+    filter: brightness(1) drop-shadow(0 0 5px rgba(59, 130, 246, 0.3)); 
+  }
+  100% { 
+    filter: brightness(1.2) drop-shadow(0 0 15px rgba(139, 92, 246, 0.5)); 
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 0.7; }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .main-container {
+    padding: 15px;
+    padding-bottom: 0;
+    height: 92vh;
+  }
+  
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    text-align: center;
+  }
+  
+  .app-title {
+    flex: none;
+  }
+  
+  .title-text {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 0.85rem;
+  }
+  
+  .header-controls {
+    justify-content: center;
+    gap: 12px;
+  }
+  
+  .content-wrapper {
+    gap: 12px;
+  }
+  
+}
+
+@media (max-width: 480px) {
+  .main-container {
+    padding: 10px;
+    padding-bottom: 120px;
+  }
+  
+  .header-content {
+    padding: 12px;
+    gap: 12px;
+  }
+  
+  .title-text {
+    font-size: 1.6rem;
+  }
+  
+  .subtitle {
+    font-size: 0.8rem;
+  }
+  
+  .header-controls {
+    gap: 8px;
+  }
+  
+  .content-wrapper {
+    gap: 12px;
+  }
+}
+
+/* Performance optimization */
+.main-container {
+  will-change: scroll-position;
+}
+
+.app-header {
+  will-change: backdrop-filter;
+}
+
+/* Smooth scrolling */
+@media (prefers-reduced-motion: no-preference) {
+  .main-container {
+    scroll-behavior: smooth;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .title-text {
+    background: none;
+    -webkit-text-fill-color: var(--text-primary);
+    color: var(--text-primary);
+  }
+  
+  .app-header::before {
+    background: var(--accent-primary);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/MusicControls.client.vue b/components/MusicControls.client.vue
new file mode 100644
index 0000000..a30e9ba
--- /dev/null
+++ b/components/MusicControls.client.vue
@@ -0,0 +1,667 @@
+<template>
+  <div v-if="currentTrack" class="music-controls glass" :class="{ collapsed: isCollapsed }">
+    <!-- Collapsed State -->
+    <div v-if="isCollapsed" class="collapsed-content">
+      <div class="collapsed-info">
+        <div class="collapsed-track-name">{{ currentTrack.name }}</div>
+        <div class="collapsed-meta">
+          <span class="status-indicator" :class="{ playing: isPlaying }"></span>
+          <span class="status-text">{{ isPlaying ? 'Playing' : 'Paused' }}</span>
+          <span class="time-separator">•</span>
+          <span class="current-time">{{ formatTime(currentTime) }}</span>
+        </div>
+      </div>
+      <IconButton
+        :icon="ChevronUp"
+        title="Expand controls"
+        size="small"
+        @click="toggleCollapse"
+        class="expand-btn"
+      />
+    </div>
+    
+    <!-- Expanded State -->
+    <template v-else>
+      <!-- Track Info -->
+      <div class="track-info">
+        <div class="track-name">{{ currentTrack.name }}</div>
+        <div class="track-status">
+          <span class="status-indicator" :class="{ playing: isPlaying }"></span>
+          <span class="status-text">{{ isPlaying ? 'Playing' : 'Paused' }}</span>
+        </div>
+      </div>
+      
+      <div class="controls-layout">
+        <!-- Navigation Controls -->
+        <div class="nav-controls">
+          <IconButton
+            :icon="SkipBack"
+            title="Previous"
+            size="small"
+            @click="$emit('previous')"
+            class="nav-btn"
+          />
+          
+          <IconButton
+            :icon="isPlaying ? Pause : Play"
+            :title="isPlaying ? 'Pause' : 'Play'"
+            size="large"
+            @click="$emit('toggle-play')"
+            class="play-btn"
+            :class="{ playing: isPlaying }"
+          />
+          
+          <IconButton
+            :icon="SkipForward"
+            title="Next"
+            size="small"
+            @click="$emit('next')"
+            class="nav-btn"
+          />
+        </div>
+      
+      <!-- Progress Section -->
+      <div class="progress-section">
+        <div 
+          class="progress-bar" 
+          @click="handleSeek"
+          ref="progressBarRef"
+          :title="`Seek to ${Math.floor(progressPercent)}%`"
+        >
+          <div class="progress-track">
+            <div 
+              class="progress-fill" 
+              :style="{ width: progressPercent + '%' }"
+            ></div>
+            <div 
+              class="progress-thumb" 
+              :style="{ left: progressPercent + '%' }"
+              :class="{ visible: isDragging || isHovered }"
+            ></div>
+          </div>
+        </div>
+        
+        <div class="time-display">
+          <span class="current-time">{{ formatTime(currentTime) }}</span>
+          <span class="separator">/</span>
+          <span class="total-time">{{ formatTime(duration) }}</span>
+        </div>
+      </div>
+      
+      <!-- Volume Control -->
+      <div class="volume-section">
+        <div class="volume-control">
+          <IconButton
+            :icon="volumeIcon"
+            title="Volume"
+            size="small"
+            @click="toggleMute"
+            class="volume-btn"
+          />
+          
+          <div 
+            class="volume-slider" 
+            @click="handleVolumeChange"
+            ref="volumeSliderRef"
+            :title="`Volume: ${Math.round(volume * 100)}%`"
+          >
+            <div class="volume-track">
+              <div 
+                class="volume-fill" 
+                :style="{ width: (volume * 100) + '%' }"
+              ></div>
+              <div 
+                class="volume-thumb"
+                :style="{ left: (volume * 100) + '%' }"
+                :class="{ visible: isVolumeHovered }"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      </div>
+      
+      <!-- Collapse Button (positioned absolute top-right) -->
+      <IconButton
+        :icon="ChevronDown"
+        title="Collapse controls"
+        size="small"
+        @click="toggleCollapse"
+        class="collapse-btn-compact"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ChevronUp, ChevronDown, SkipBack, SkipForward, Play, Pause, Volume2, Volume1, VolumeX } from 'lucide-vue-next'
+import IconButton from './IconButton.client.vue'
+
+const props = defineProps({
+  currentTrack: {
+    type: Object,
+    default: null
+  },
+  isPlaying: {
+    type: Boolean,
+    default: false
+  },
+  currentTime: {
+    type: Number,
+    default: 0
+  },
+  duration: {
+    type: Number,
+    default: 0
+  },
+  volume: {
+    type: Number,
+    default: 0.7
+  }
+})
+
+const emit = defineEmits(['previous', 'next', 'toggle-play', 'seek', 'volume-change'])
+
+const progressBarRef = ref(null)
+const volumeSliderRef = ref(null)
+const isDragging = ref(false)
+const isHovered = ref(false)
+const isVolumeHovered = ref(false)
+const previousVolume = ref(0.7)
+const isCollapsed = ref(false)
+
+const progressPercent = computed(() => {
+  if (props.duration === 0) return 0
+  return (props.currentTime / props.duration) * 100
+})
+
+const volumeIcon = computed(() => {
+  if (props.volume === 0) return VolumeX
+  if (props.volume < 0.7) return Volume1
+  return Volume2
+})
+
+const formatTime = (seconds) => {
+  if (!seconds || isNaN(seconds)) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+const handleSeek = (event) => {
+  if (!progressBarRef.value) return
+  
+  const rect = progressBarRef.value.getBoundingClientRect()
+  const percent = (event.clientX - rect.left) / rect.width
+  const newTime = percent * props.duration
+  
+  emit('seek', newTime)
+}
+
+const handleVolumeChange = (event) => {
+  if (!volumeSliderRef.value) return
+  
+  const rect = volumeSliderRef.value.getBoundingClientRect()
+  const percent = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width))
+  
+  emit('volume-change', percent)
+}
+
+const toggleMute = () => {
+  if (props.volume > 0) {
+    previousVolume.value = props.volume
+    emit('volume-change', 0)
+  } else {
+    emit('volume-change', previousVolume.value)
+  }
+}
+
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+}
+
+// Event listeners for hover states
+onMounted(() => {
+  if (progressBarRef.value) {
+    progressBarRef.value.addEventListener('mouseenter', () => { isHovered.value = true })
+    progressBarRef.value.addEventListener('mouseleave', () => { isHovered.value = false })
+  }
+  
+  if (volumeSliderRef.value) {
+    volumeSliderRef.value.addEventListener('mouseenter', () => { isVolumeHovered.value = true })
+    volumeSliderRef.value.addEventListener('mouseleave', () => { isVolumeHovered.value = false })
+  }
+})
+</script>
+
+<style scoped>
+.music-controls {
+  position: fixed;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+  border-radius: 20px;
+  padding: 20px;
+  box-shadow: var(--shadow-glass);
+  z-index: 1000;
+  min-width: 600px;
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.music-controls.collapsed {
+  min-width: 350px;
+  max-width: 450px;
+  padding: 12px 16px;
+  border-radius: 16px;
+  bottom: 5px;
+}
+
+/* Collapsed State Styles */
+.collapsed-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.collapsed-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.collapsed-track-name {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: glow 3s ease-in-out infinite alternate;
+}
+
+.collapsed-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.time-separator {
+  opacity: 0.5;
+}
+
+.expand-btn {
+  flex-shrink: 0;
+}
+
+.music-controls {
+  position: relative;
+}
+
+.collapse-btn-compact {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  opacity: 0.6;
+  transition: all 0.3s ease;
+  width: 24px !important;
+  height: 24px !important;
+  z-index: 10;
+}
+
+.collapse-btn-compact:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.track-info {
+  text-align: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.track-name {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: glow 3s ease-in-out infinite alternate;
+}
+
+.track-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  transition: all 0.3s ease;
+}
+
+.status-indicator.playing {
+  background: var(--accent-primary);
+  animation: pulse-dot 1.5s ease-in-out infinite;
+}
+
+.status-text {
+  font-weight: 500;
+}
+
+.controls-layout {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.nav-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.play-btn {
+  position: relative;
+  overflow: hidden;
+}
+
+.play-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: 50%;
+}
+
+.play-btn.playing::before {
+  opacity: 0.2;
+}
+
+.play-btn:hover::before {
+  opacity: 0.3;
+}
+
+.progress-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.progress-bar {
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.progress-track {
+  height: 6px;
+  background: var(--bg-glass);
+  border-radius: 3px;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+  border-radius: 3px;
+  transition: width 0.1s ease;
+  position: relative;
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
+  animation: shimmer 2s infinite;
+}
+
+.progress-thumb {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background: white;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.progress-thumb.visible {
+  opacity: 1;
+}
+
+.time-display {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  min-width: 100px;
+}
+
+.separator {
+  opacity: 0.5;
+}
+
+.volume-section {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.volume-slider {
+  width: 80px;
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.volume-track {
+  height: 4px;
+  background: var(--bg-glass);
+  border-radius: 2px;
+  position: relative;
+}
+
+.volume-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+  border-radius: 2px;
+  transition: width 0.2s ease;
+}
+
+.volume-thumb {
+  position: absolute;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  background: white;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.volume-thumb.visible {
+  opacity: 1;
+}
+
+/* Animations */
+@keyframes shimmer {
+  0% { transform: translateX(-100px); }
+  100% { transform: translateX(100px); }
+}
+
+@keyframes glow {
+  0% { filter: brightness(1); }
+  100% { filter: brightness(1.2); }
+}
+
+@keyframes pulse-dot {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.2); opacity: 0.8; }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .music-controls {
+    position: fixed;
+    bottom: calc(20px + env(safe-area-inset-bottom));
+    left: 20px;
+    right: 20px;
+    width: auto;
+    min-width: auto;
+    max-width: none;
+    transform: none;
+    padding: 12px 16px;
+    border-radius: 16px;
+    gap: 10px;
+  }
+  
+  .music-controls.collapsed {
+    padding: 10px 12px;
+    border-radius: 12px;
+  }
+  
+  .collapsed-track-name {
+    font-size: 0.9rem;
+  }
+  
+  .collapsed-meta {
+    font-size: 0.75rem;
+  }
+  
+  .track-name {
+    font-size: 1rem;
+  }
+  
+  .track-status {
+    font-size: 0.8rem;
+  }
+  
+  .controls-layout {
+    gap: 12px;
+  }
+  
+  .nav-controls {
+    gap: 8px;
+  }
+  
+  .progress-section {
+    gap: 6px;
+  }
+  
+  .progress-track {
+    height: 4px;
+  }
+  
+  .time-display {
+    font-size: 0.75rem;
+    min-width: 80px;
+  }
+  
+  .volume-slider {
+    width: 60px;
+  }
+  
+  .volume-track {
+    height: 3px;
+  }
+  
+  .volume-control {
+    gap: 6px;
+  }
+}
+
+/* Very small screens */
+@media (max-width: 480px) {
+  .track-info {
+    padding-bottom: 6px;
+  }
+  
+  .track-name {
+    font-size: 0.95rem;
+  }
+  
+  .controls-layout {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+  }
+  
+  .progress-section {
+    order: -1;
+    width: 100%;
+  }
+  
+  .nav-controls {
+    flex: 1;
+    justify-content: center;
+  }
+  
+  .volume-section {
+    flex: 1;
+    justify-content: center;
+  }
+  
+  .collapsed-content {
+    gap: 8px;
+  }
+  
+  .collapsed-track-name {
+    font-size: 0.85rem;
+  }
+  
+  .collapsed-meta {
+    font-size: 0.7rem;
+    gap: 4px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/PlaybackControls.client.vue b/components/PlaybackControls.client.vue
new file mode 100644
index 0000000..2096b78
--- /dev/null
+++ b/components/PlaybackControls.client.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="playback-controls">
+    <!-- Shuffle -->
+    <IconButton
+      :icon="Shuffle"
+      :active="isShuffled"
+      :title="`Shuffle: ${isShuffled ? 'On' : 'Off'}`"
+      @click="toggleShuffle"
+      class="shuffle-btn"
+    />
+    
+    <!-- Repeat modes -->
+    <IconButton
+      :icon="repeatIcon"
+      :active="repeatMode !== 'none'"
+      :title="repeatTitle"
+      @click="cycleRepeat"
+      class="repeat-btn"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import { Shuffle, Repeat, Repeat1 } from 'lucide-vue-next'
+import IconButton from './IconButton.client.vue'
+
+// Playback modes
+const isShuffled = useLocalStorage('shuffle', false)
+const repeatMode = useLocalStorage('repeat', 'none') // 'none', 'all', 'one'
+
+const emit = defineEmits(['shuffle-changed', 'repeat-changed'])
+
+const repeatIcon = computed(() => {
+  switch (repeatMode.value) {
+    case 'none': return Repeat
+    case 'all': return Repeat
+    case 'one': return Repeat1
+    default: return Repeat
+  }
+})
+
+const repeatTitle = computed(() => {
+  switch (repeatMode.value) {
+    case 'none': return 'Repeat: Off'
+    case 'all': return 'Repeat: All'
+    case 'one': return 'Repeat: One'
+    default: return 'Repeat: Off'
+  }
+})
+
+const toggleShuffle = () => {
+  isShuffled.value = !isShuffled.value
+  emit('shuffle-changed', isShuffled.value)
+}
+
+const cycleRepeat = () => {
+  const modes = ['none', 'all', 'one']
+  const currentIndex = modes.indexOf(repeatMode.value)
+  repeatMode.value = modes[(currentIndex + 1) % modes.length]
+  emit('repeat-changed', repeatMode.value)
+}
+</script>
+
+<style scoped>
+.playback-controls {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.shuffle-btn:hover {
+  animation: wiggle 0.5s ease-in-out;
+}
+
+.repeat-btn:hover {
+  animation: spin 0.6s ease-in-out;
+}
+
+@keyframes wiggle {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-5deg); }
+  75% { transform: rotate(5deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(180deg); }
+}
+
+/* Active state glow */
+.shuffle-btn:deep(.icon-button.active),
+.repeat-btn:deep(.icon-button.active) {
+  box-shadow: 0 0 20px var(--accent-primary);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .playback-controls {
+    gap: 8px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/ThemeToggle.client.vue b/components/ThemeToggle.client.vue
new file mode 100644
index 0000000..3df3393
--- /dev/null
+++ b/components/ThemeToggle.client.vue
@@ -0,0 +1,59 @@
+<template>
+  <IconButton
+    :icon="isDark ? Sun : Moon"
+    :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    @click="toggleTheme"
+    class="theme-toggle"
+  />
+</template>
+
+<script setup>
+import { useLocalStorage } from '@vueuse/core'
+import { watch } from 'vue'
+import { Sun, Moon } from 'lucide-vue-next'
+import IconButton from './IconButton.client.vue'
+
+const isDark = useLocalStorage('theme-dark', false)
+
+const toggleTheme = () => {
+  isDark.value = !isDark.value
+}
+
+// Apply theme change to document
+watch(isDark, (newValue) => {
+  if (process.client) {
+    document.documentElement.setAttribute('data-theme', newValue ? 'dark' : 'light')
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.theme-toggle {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.theme-toggle:hover {
+  transform: scale(1.1) rotate(180deg);
+}
+
+/* Special glow effect for theme toggle */
+.theme-toggle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 0.3s ease;
+  z-index: -1;
+}
+
+.theme-toggle:hover::after {
+  width: 80px;
+  height: 80px;
+  opacity: 0.3;
+}
+</style>
\ No newline at end of file
diff --git a/components/TrackList.client.vue b/components/TrackList.client.vue
new file mode 100644
index 0000000..8d31e48
--- /dev/null
+++ b/components/TrackList.client.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="track-list glass">
+    <div class="track-list-header">
+      <h3 class="title">Your Music Library</h3>
+      <div v-if="tracks.length > 0" class="track-count">
+        {{ tracks.length }} song{{ tracks.length !== 1 ? 's' : '' }}
+      </div>
+    </div>
+    
+    <div v-if="loading" class="loading-state">
+      <div class="loading-spinner large"></div>
+      <p>Loading your music...</p>
+    </div>
+    
+    <div v-else-if="tracks.length === 0" class="empty-state">
+      <div class="empty-icon">
+        <Music :size="48" />
+      </div>
+      <p>No music files found</p>
+      <p class="hint">Add some music files to the /music folder!</p>
+    </div>
+    
+    <div v-else class="track-list-content">
+      <div class="tracks-container stagger-children">
+        <TrackListItem
+          v-for="(track, index) in displayTracks"
+          :key="track.name"
+          :track="track"
+          :is-active="currentTrack?.name === track.name"
+          :is-playing="currentTrack?.name === track.name && isPlaying"
+          :is-loading="loadingTrack === track.name"
+          @click="handleTrackClick(track, index)"
+          class="track-item-wrapper animate-fade-in-up"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Music } from 'lucide-vue-next'
+import TrackListItem from './TrackListItem.client.vue'
+
+const props = defineProps({
+  tracks: {
+    type: Array,
+    default: () => []
+  },
+  displayTracks: {
+    type: Array,
+    default: () => []
+  },
+  currentTrack: {
+    type: Object,
+    default: null
+  },
+  isPlaying: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  loadingTrack: {
+    type: String,
+    default: null
+  }
+})
+
+const emit = defineEmits(['track-selected'])
+
+const handleTrackClick = (track, index) => {
+  emit('track-selected', { track, index })
+}
+</script>
+
+<style scoped>
+.track-list {
+  padding: 20px;
+  margin-bottom: 0;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.track-list::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
+  opacity: 0.5;
+}
+
+.track-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-glass);
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: 1.3rem;
+  font-weight: 600;
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+}
+
+.track-count {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  background: var(--bg-glass);
+  padding: 4px 12px;
+  border-radius: 20px;
+  border: 1px solid var(--border-glass);
+}
+
+.loading-state {
+  text-align: center;
+  padding: 60px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.loading-spinner {
+  width: 30px;
+  height: 30px;
+  border: 3px solid var(--bg-glass);
+  border-top: 3px solid var(--accent-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-spinner.large {
+  width: 40px;
+  height: 40px;
+  border-width: 4px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-secondary);
+}
+
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-state p {
+  margin: 8px 0;
+}
+
+.hint {
+  font-size: 0.9rem;
+  font-style: italic;
+}
+
+.track-list-content {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.tracks-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.track-item-wrapper {
+  animation: slideInUp 0.3s ease-out;
+  animation-fill-mode: both;
+}
+
+.track-item-wrapper:nth-child(1) { animation-delay: 0.05s; }
+.track-item-wrapper:nth-child(2) { animation-delay: 0.1s; }
+.track-item-wrapper:nth-child(3) { animation-delay: 0.15s; }
+.track-item-wrapper:nth-child(4) { animation-delay: 0.2s; }
+.track-item-wrapper:nth-child(5) { animation-delay: 0.25s; }
+.track-item-wrapper:nth-child(n+6) { animation-delay: 0.3s; }
+
+/* Scrollbar styling for track list */
+.tracks-container {
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.tracks-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.tracks-container::-webkit-scrollbar-track {
+  background: var(--bg-glass);
+  border-radius: 3px;
+}
+
+.tracks-container::-webkit-scrollbar-thumb {
+  background: var(--accent-primary);
+  border-radius: 3px;
+}
+
+.tracks-container::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-secondary);
+}
+
+/* Animations */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .track-list {
+    padding: 15px;
+    margin-bottom: 0;
+  }
+  
+  .track-list-header {
+    margin-bottom: 12px;
+    padding-bottom: 10px;
+  }
+  
+  .title {
+    font-size: 1.2rem;
+  }
+  
+  .track-count {
+    font-size: 0.8rem;
+    padding: 3px 10px;
+  }
+  
+  .loading-state,
+  .empty-state {
+    padding: 40px 15px;
+  }
+  
+  .empty-icon {
+    font-size: 2.5rem;
+  }
+  
+  .tracks-container {
+    gap: 6px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/TrackListItem.client.vue b/components/TrackListItem.client.vue
new file mode 100644
index 0000000..e59dbb7
--- /dev/null
+++ b/components/TrackListItem.client.vue
@@ -0,0 +1,257 @@
+<template>
+  <div 
+    :class="[
+      'track-item',
+      'ripple',
+      'hover-lift',
+      {
+        'active': isActive,
+        'loading': isLoading,
+        'animate-pulse-glow': isActive && isPlaying
+      }
+    ]"
+    @click="handleClick"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <div class="track-info">
+      <p class="track-name">{{ track.name }}</p>
+      <p class="track-duration">{{ formatTime(track.duration || 0) }}</p>
+    </div>
+    
+    <div class="track-status">
+      <div v-if="isLoading" class="loading-spinner"></div>
+      <div v-else class="status-icon">
+        <Pause v-if="isActive && !isPlaying" class="icon paused" :size="18" />
+        <Play v-else-if="isActive && isPlaying" class="icon playing" :size="18" />
+        <Music v-else class="icon idle" :size="18" />
+      </div>
+    </div>
+
+    <!-- Waveform visualization for active track -->
+    <div v-if="isActive && isPlaying" class="waveform">
+      <div class="wave" v-for="i in 5" :key="i" :style="{ animationDelay: i * 0.1 + 's' }"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Play, Pause, Music } from 'lucide-vue-next'
+
+const props = defineProps({
+  track: {
+    type: Object,
+    required: true
+  },
+  isActive: {
+    type: Boolean,
+    default: false
+  },
+  isPlaying: {
+    type: Boolean,
+    default: false
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const isHovered = ref(false)
+
+const handleClick = () => {
+  emit('click', props.track)
+}
+
+const formatTime = (seconds) => {
+  if (!seconds || isNaN(seconds)) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+</script>
+
+<style scoped>
+.track-item {
+  padding: 16px 20px;
+  margin-bottom: 8px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid transparent;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+  min-height: 70px;
+}
+
+.track-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
+  transition: left 0.5s;
+}
+
+.track-item:hover::before {
+  left: 100%;
+}
+
+.track-item:hover {
+  background: var(--bg-glass);
+  transform: translateX(5px) translateY(-2px);
+  box-shadow: 
+    0 6px 20px rgba(59, 130, 246, 0.2),
+    0 3px 8px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.track-item.active {
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+  color: white;
+  box-shadow: 
+    0 8px 25px rgba(59, 130, 246, 0.4),
+    0 4px 10px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.track-item.active:hover {
+  transform: translateX(5px) translateY(-3px) scale(1.02);
+  box-shadow: 
+    0 10px 30px rgba(59, 130, 246, 0.5),
+    0 5px 12px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+}
+
+.track-info {
+  flex: 1;
+}
+
+.track-name {
+  font-weight: 500;
+  font-size: 1.05rem;
+  margin-bottom: 6px;
+  transition: color 0.3s ease;
+  line-height: 1.3;
+}
+
+.track-duration {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  transition: color 0.3s ease;
+  line-height: 1.2;
+}
+
+.track-item.active .track-duration {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.track-status {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  position: relative;
+}
+
+.status-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.icon {
+  font-size: 1.2rem;
+  transition: transform 0.2s ease;
+}
+
+.icon.playing {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.icon.paused {
+  opacity: 0.7;
+}
+
+.loading-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--bg-glass);
+  border-top: 2px solid var(--accent-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Waveform visualization */
+.waveform {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  display: flex;
+  align-items: end;
+  gap: 2px;
+  padding: 0 16px;
+}
+
+.wave {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 1px;
+  animation: wave 1.5s ease-in-out infinite;
+  min-height: 1px;
+}
+
+/* Animations */
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes wave {
+  0%, 100% { height: 1px; }
+  50% { height: 3px; }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .track-item {
+    padding: 10px 12px;
+  }
+  
+  .track-name {
+    font-size: 0.9rem;
+  }
+  
+  .track-duration {
+    font-size: 0.8rem;
+  }
+  
+  .status-icon {
+    width: 28px;
+    height: 28px;
+  }
+  
+  .icon {
+    font-size: 1rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/msucia.png b/msucia.png
new file mode 100644
index 0000000..b317eb5
Binary files /dev/null and b/msucia.png differ
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ab30855..2896027 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,6 +3,8 @@ import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   compatibilityDate: '2025-08-02',
+  // Disable SSR completely to avoid hydration issues with client-side audio APIs
+  ssr: false,
   devtools: { 
     enabled: true,
     vscode: {},
@@ -76,7 +78,7 @@ export default defineNuxtConfig({
         periodicSyncForUpdates: 20
       },
       devOptions: {
-        enabled: true,
+        enabled: false,
         type: 'module',
         navigateFallback: '/'
       },
diff --git a/package-lock.json b/package-lock.json
index 1aba774..d645d81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
       "dependencies": {
         "@vite-pwa/nuxt": "^1.0.4",
         "@vueuse/core": "^10.5.0",
-        "@vueuse/nuxt": "^10.5.0"
+        "@vueuse/nuxt": "^10.5.0",
+        "lucide-vue-next": "^0.536.0"
       },
       "devDependencies": {
         "@nuxt/devtools": "latest",
@@ -9933,6 +9934,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.536.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.536.0.tgz",
+      "integrity": "sha512-ypauLrs4PymzxBKvEiuyo1HqOqjPdBdAtATCSPs4hLgqEA0JAEINWfQbGoLEkaEixT7gsTeSK5TAvOhAcaHfCA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/luxon": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.1.tgz",
diff --git a/package.json b/package.json
index 6732b3b..07ea84c 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@vite-pwa/nuxt": "^1.0.4",
     "@vueuse/core": "^10.5.0",
-    "@vueuse/nuxt": "^10.5.0"
+    "@vueuse/nuxt": "^10.5.0",
+    "lucide-vue-next": "^0.536.0"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 2c1ee50..e796c17 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,124 +1,43 @@
 <template>
-  <div class="music-player">
-    <!-- Aurora background -->
-    <div class="aurora-bg">
-      <div class="aurora-orb"></div>
-      <div class="aurora-orb"></div>
-      <div class="aurora-orb"></div>
-      <div class="aurora-orb"></div>
-    </div>
+  <div>
+    <!-- Aurora Background -->
+    <AuroraBackground 
+      :is-playing="isPlaying" 
+      :current-track="currentTrack"
+    />
 
-    <!-- Header -->
-    <header class="glass-strong" style="padding: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
-      <h1 style="font-size: 2rem; font-weight: 700; background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-        🎵 RepoDructor
-      </h1>
-      
-      <div style="display: flex; gap: 10px; align-items: center;">
-        <!-- Theme toggle -->
-        <button @click="toggleTheme" class="btn-icon" title="Toggle theme">
-          <span v-if="isDark">☀️</span>
-          <span v-else>🌙</span>
-        </button>
-        
-        <!-- Shuffle -->
-        <button @click="toggleShuffle" class="btn-icon" :class="{ 'active': isShuffled }" title="Shuffle">
-          🔀
-        </button>
-        
-        <!-- Repeat modes -->
-        <button @click="cycleRepeat" class="btn-icon" title="Repeat mode">
-          <span v-if="repeatMode === 'none'">🔁</span>
-          <span v-else-if="repeatMode === 'all'">🔂</span>
-          <span v-else>🔂</span>
-        </button>
-      </div>
-    </header>
+    <!-- Main Container -->
+    <MainContainer 
+      :current-track="currentTrack"
+      :is-playing="isPlaying"
+      @shuffle-changed="handleShuffleChanged"
+      @repeat-changed="handleRepeatChanged"
+    >
+      <!-- Track List -->
+      <TrackList 
+        :tracks="tracks"
+        :display-tracks="displayTracks"
+        :current-track="currentTrack"
+        :is-playing="isPlaying"
+        :loading="loading"
+        :loading-track="loadingTrack"
+        @track-selected="handleTrackSelected"
+      />
+    </MainContainer>
 
-    <!-- Now Playing -->
-    <div v-if="currentTrack" class="glass" style="padding: 20px; margin-bottom: 20px; text-align: center;">
-      <h2 style="font-size: 1.5rem; margin-bottom: 10px;">Now Playing</h2>
-      <p style="font-size: 1.2rem; font-weight: 600; color: var(--accent-primary);">
-        {{ currentTrack.name }}
-      </p>
-      <p style="color: var(--text-secondary); margin-top: 5px;">
-        Duration: {{ formatTime(currentTrack.duration || 0) }}
-      </p>
-    </div>
-
-    <!-- Track List -->
-    <div class="track-list">
-      <h3 style="margin-bottom: 15px; font-size: 1.3rem;">Your Music Library</h3>
-      
-      <div v-if="loading" style="text-align: center; padding: 40px;">
-        <p>Loading your music...</p>
-      </div>
-      
-      <div v-else-if="tracks.length === 0" style="text-align: center; padding: 40px;">
-        <p>No music files found. Add some music files to the /music folder!</p>
-      </div>
-      
-      <div v-else>
-        <div 
-          v-for="(track, index) in displayTracks" 
-          :key="track.name"
-          @click="playTrack(track, index)"
-          class="track-item"
-          :class="{ active: currentTrack?.name === track.name }"
-          style="display: flex; justify-content: space-between; align-items: center;"
-        >
-          <div>
-            <p style="font-weight: 500;">{{ track.name }}</p>
-            <p style="font-size: 0.9rem; color: var(--text-secondary);">
-              {{ formatTime(track.duration || 0) }}
-            </p>
-          </div>
-          
-          <div style="display: flex; gap: 10px; align-items: center;">
-            <span v-if="currentTrack?.name === track.name && !isPlaying">⏸️</span>
-            <span v-else-if="currentTrack?.name === track.name && isPlaying">▶️</span>
-            <span v-else>🎵</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Player Controls -->
-    <div class="player-controls" v-if="currentTrack">
-      <!-- Previous -->
-      <button @click="previousTrack" class="btn-icon" title="Previous">
-        ⏮️
-      </button>
-      
-      <!-- Play/Pause -->
-      <button @click="togglePlay" class="btn-icon" style="width: 60px; height: 60px; font-size: 1.5rem;" title="Play/Pause">
-        <span v-if="isPlaying">⏸️</span>
-        <span v-else>▶️</span>
-      </button>
-      
-      <!-- Next -->
-      <button @click="nextTrack" class="btn-icon" title="Next">
-        ⏭️
-      </button>
-      
-      <!-- Progress Bar -->
-      <div class="progress-bar" @click="seekTo" ref="progressBar">
-        <div class="progress-fill" :style="{ width: progressPercent + '%' }"></div>
-      </div>
-      
-      <!-- Time -->
-      <div style="min-width: 100px; text-align: center; font-size: 0.9rem;">
-        {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-      </div>
-      
-      <!-- Volume -->
-      <div class="volume-control">
-        <span>🔊</span>
-        <div class="volume-slider" @click="setVolume" ref="volumeSlider">
-          <div class="progress-fill" :style="{ width: volume * 100 + '%' }"></div>
-        </div>
-      </div>
-    </div>
+    <!-- Music Controls -->
+    <MusicControls
+      :current-track="currentTrack"
+      :is-playing="isPlaying"
+      :current-time="currentTime"
+      :duration="duration"
+      :volume="volume"
+      @previous="previousTrack"
+      @next="nextTrack"
+      @toggle-play="togglePlay"
+      @seek="seekTo"
+      @volume-change="setVolume"
+    />
 
     <!-- Audio Element -->
     <audio 
@@ -133,9 +52,20 @@
 </template>
 
 <script setup>
+// Disable SSR for this page since it uses browser APIs and audio elements
+definePageMeta({
+  ssr: false
+})
+
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 
+// Import components
+import AuroraBackground from '~/components/AuroraBackground.client.vue'
+import MainContainer from '~/components/MainContainer.client.vue'
+import TrackList from '~/components/TrackList.client.vue'
+import MusicControls from '~/components/MusicControls.client.vue'
+
 // Reactive state
 const tracks = ref([])
 const currentTrack = ref(null)
@@ -145,8 +75,9 @@ const currentTime = ref(0)
 const duration = ref(0)
 const volume = ref(0.7)
 const loading = ref(true)
+const loadingTrack = ref(null)
 
-// Theme
+// Theme (handled by ThemeToggle component now)
 const isDark = useLocalStorage('theme-dark', false)
 
 // Playback modes
@@ -156,14 +87,8 @@ const shuffledIndices = ref([])
 
 // Refs
 const audioPlayer = ref(null)
-const progressBar = ref(null)
-const volumeSlider = ref(null)
 
-// Computed
-const progressPercent = computed(() => {
-  if (duration.value === 0) return 0
-  return (currentTime.value / duration.value) * 100
-})
+// Computed - removed progressPercent as it's not used in this component
 
 const displayTracks = computed(() => {
   if (isShuffled.value && shuffledIndices.value.length > 0) {
@@ -197,6 +122,7 @@ const generateShuffledIndices = () => {
 }
 
 const playTrack = async (track, index) => {
+  loadingTrack.value = track.name
   currentTrack.value = track
   currentTrackIndex.value = isShuffled.value 
     ? shuffledIndices.value.indexOf(tracks.value.indexOf(track))
@@ -224,6 +150,7 @@ const playTrack = async (track, index) => {
       
       // Auto-play when ready
       audioPlayer.value.addEventListener('canplay', () => {
+        loadingTrack.value = null
         audioPlayer.value.play()
       }, { once: true })
     } catch (error) {
@@ -235,6 +162,7 @@ const playTrack = async (track, index) => {
       
       // Auto-play when ready (fallback)
       audioPlayer.value.addEventListener('canplay', () => {
+        loadingTrack.value = null
         audioPlayer.value.play()
       }, { once: true })
     }
@@ -301,46 +229,30 @@ const previousTrack = () => {
   }, 100)
 }
 
-const toggleShuffle = () => {
-  isShuffled.value = !isShuffled.value
-  if (isShuffled.value) {
+const handleShuffleChanged = (shuffled) => {
+  isShuffled.value = shuffled
+  if (shuffled) {
     generateShuffledIndices()
   }
 }
 
-const cycleRepeat = () => {
-  const modes = ['none', 'all', 'one']
-  const currentIndex = modes.indexOf(repeatMode.value)
-  repeatMode.value = modes[(currentIndex + 1) % modes.length]
+const handleRepeatChanged = (mode) => {
+  repeatMode.value = mode
 }
 
-const toggleTheme = () => {
-  isDark.value = !isDark.value
+const handleTrackSelected = ({ track, index }) => {
+  playTrack(track, index)
 }
 
-const formatTime = (seconds) => {
-  if (!seconds || isNaN(seconds)) return '0:00'
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.floor(seconds % 60)
-  return `${mins}:${secs.toString().padStart(2, '0')}`
-}
+// Removed formatTime function as it's not used in this component - it's defined in child components where needed
 
-const seekTo = (event) => {
-  if (!audioPlayer.value || !progressBar.value) return
-  
-  const rect = progressBar.value.getBoundingClientRect()
-  const percent = (event.clientX - rect.left) / rect.width
-  const newTime = percent * duration.value
-  
+const seekTo = (newTime) => {
+  if (!audioPlayer.value) return
   audioPlayer.value.currentTime = newTime
 }
 
-const setVolume = (event) => {
-  if (!volumeSlider.value) return
-  
-  const rect = volumeSlider.value.getBoundingClientRect()
-  const percent = (event.clientX - rect.left) / rect.width
-  volume.value = Math.max(0, Math.min(1, percent))
+const setVolume = (newVolume) => {
+  volume.value = Math.max(0, Math.min(1, newVolume))
   
   if (audioPlayer.value) {
     audioPlayer.value.volume = volume.value
@@ -454,13 +366,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.active {
-  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)) !important;
-  color: white !important;
-}
+/* Page-specific styles */
+</style>
 
-.btn-icon.active {
-  background: var(--accent-primary) !important;
-  color: white !important;
-}
-</style>
\ No newline at end of file