diff --git a/frontend/src/components/AudioPlayer.tsx b/frontend/src/components/AudioPlayer.tsx
index 2c2204f..67dc981 100644
--- a/frontend/src/components/AudioPlayer.tsx
+++ b/frontend/src/components/AudioPlayer.tsx
@@ -5,17 +5,12 @@ import {
   Play,
   Pause,
   Volume2,
-  SkipBack,
-  SkipForward,
+  VolumeX,
   ChevronDown,
   Maximize2,
-  Minimize2,
-  List,
-  VolumeX,
-  FastForward,
-  Rewind,
   X,
-  Info
+  RotateCcw,
+  RotateCw,
 } from 'lucide-react';
 
 interface AudioPlayerProps {
@@ -30,8 +25,6 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   const [volume, setVolume] = useState(1);
-  const [playbackSpeed, setPlaybackSpeed] = useState(1);
-  const [isSaving, setIsSaving] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -40,256 +33,230 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
   // Save progress periodically
   useEffect(() => {
     if (!episode || !userId) return;
-
-    const saveProgressInterval = setInterval(async () => {
+    const interval = setInterval(async () => {
       if (isPlaying) {
         try {
-          setIsSaving(true);
-          await episodeService.saveProgress(
-            episode._id,
-            Math.floor(currentTime),
-            false
-          );
-        } catch (error) {
-          console.error('Failed to save progress:', error);
-        } finally {
-          setIsSaving(false);
-        }
+          await episodeService.saveProgress(episode._id, Math.floor(currentTime), false);
+        } catch {}
       }
-    }, 30000); // Save every 30 seconds
-
-    return () => clearInterval(saveProgressInterval);
+    }, 30000);
+    return () => clearInterval(interval);
   }, [episode, userId, currentTime, isPlaying]);
 
   // Load previous progress
   useEffect(() => {
     if (!episode || !userId) return;
-
-    const loadProgress = async () => {
-      try {
-        const response = await episodeService.getProgress(episode._id);
-        if (response.progress) {
-          if (audioRef.current) {
-            audioRef.current.currentTime = response.progress.position;
-          }
-        }
-      } catch (error) {
-        console.error('Failed to load progress:', error);
+    episodeService.getProgress(episode._id).then((r) => {
+      if (r.progress?.position && audioRef.current) {
+        audioRef.current.currentTime = r.progress.position;
       }
-    };
-
-    loadProgress();
+    }).catch(() => {});
   }, [episode, userId]);
 
   const handlePlayPause = () => {
     if (!audioRef.current) return;
-
-    if (isPlaying) {
-      audioRef.current.pause();
-    } else {
-      audioRef.current.play();
-    }
+    if (isPlaying) audioRef.current.pause();
+    else audioRef.current.play();
     setIsPlaying(!isPlaying);
   };
 
-  const handleTimeUpdate = () => {
-    if (audioRef.current) {
-      setCurrentTime(audioRef.current.currentTime);
-    }
-  };
-
-  const handleLoadedMetadata = () => {
-    if (audioRef.current) {
-      setDuration(audioRef.current.duration);
-    }
+  const handleSeek = (delta: number) => {
+    if (!audioRef.current) return;
+    audioRef.current.currentTime = Math.max(0, Math.min(duration, currentTime + delta));
   };
 
   const handleProgressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTime = parseFloat(e.target.value);
-    setCurrentTime(newTime);
-    if (audioRef.current) {
-      audioRef.current.currentTime = newTime;
-    }
+    const t = parseFloat(e.target.value);
+    setCurrentTime(t);
+    if (audioRef.current) audioRef.current.currentTime = t;
   };
 
   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newVolume = parseFloat(e.target.value);
-    setVolume(newVolume);
-    if (audioRef.current) {
-      audioRef.current.volume = newVolume;
-    }
+    const v = parseFloat(e.target.value);
+    setVolume(v);
+    setIsMuted(v === 0);
+    if (audioRef.current) audioRef.current.volume = v;
   };
 
-  const handleSpeedChange = (speed: number) => {
-    setPlaybackSpeed(speed);
-    if (audioRef.current) {
-      audioRef.current.playbackRate = speed;
-    }
+  const toggleMute = () => {
+    if (!audioRef.current) return;
+    const muted = !isMuted;
+    setIsMuted(muted);
+    audioRef.current.volume = muted ? 0 : volume;
   };
 
-  const formatTime = (seconds: number) => {
-    if (!isFinite(seconds)) return '0:00';
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  const formatTime = (s: number) => {
+    if (!isFinite(s)) return '0:00';
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60);
+    return `${m}:${sec.toString().padStart(2, '0')}`;
   };
 
   if (!episode) return null;
 
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
   return (
-    <div 
-      className={`fixed bottom-8 left-1/2 -translate-x-1/2 w-[95%] max-w-6xl z-[100] transition-all duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)] ${
-        isExpanded ? 'h-[80vh] bottom-1/2 translate-y-1/2 rounded-[3rem]' : 'h-24 rounded-[2.5rem]'
-      } premium-glass p-0 shadow-2xl border-white/10 flex flex-col overflow-hidden animate-slide-up`}
-    >
+    <div className={`fixed z-[100] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] ${
+      isExpanded
+        ? 'inset-0 rounded-none'
+        : 'bottom-6 left-1/2 -translate-x-1/2 w-[96%] max-w-5xl rounded-[2rem] h-[88px]'
+    } premium-glass border-white/10 shadow-2xl overflow-hidden flex flex-col`}>
+
       <audio
         ref={audioRef}
         src={episode.audioUrl}
-        onTimeUpdate={handleTimeUpdate}
-        onLoadedMetadata={handleLoadedMetadata}
+        onTimeUpdate={() => audioRef.current && setCurrentTime(audioRef.current.currentTime)}
+        onLoadedMetadata={() => audioRef.current && setDuration(audioRef.current.duration)}
         onEnded={() => setIsPlaying(false)}
         crossOrigin="anonymous"
         autoPlay
       />
 
-      {/* COMPACT VIEW (DOCK) */}
-      <div className={`flex items-center gap-6 p-4 h-24 shrink-0 transition-opacity duration-300 ${isExpanded ? 'opacity-0 pointer-events-none absolute' : 'opacity-100'}`}>
-        {/* Info */}
-        <div className="flex items-center gap-4 min-w-[200px] lg:min-w-[300px] max-w-[400px]">
-          <div className="w-16 h-16 rounded-2xl overflow-hidden shadow-lg border border-white/10 shrink-0">
-            {podcast?.imageUrl ? (
-              <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover" />
-            ) : (
-              <div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent- violet flex items-center justify-center text-2xl">🎙️</div>
-            )}
+      {/* ── COMPACT BAR ── */}
+      <div className={`flex items-center gap-4 px-5 h-[88px] shrink-0 ${isExpanded ? 'hidden' : 'flex'}`}>
+
+        {/* Artwork + info */}
+        <div className="flex items-center gap-3 min-w-0 flex-1 max-w-[280px]">
+          <div className="w-13 h-13 w-12 h-12 rounded-xl overflow-hidden border border-white/10 shrink-0 shadow-lg">
+            {podcast?.imageUrl
+              ? <img src={podcast.imageUrl} alt="" className="w-full h-full object-cover" />
+              : <div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-violet flex items-center justify-center text-xl">🎙️</div>
+            }
           </div>
-          <div className="overflow-hidden">
-            <h4 className="text-sm font-bold text-white truncate leading-tight mb-1">{episode.title}</h4>
-            <p className="text-[10px] text-slate-400 font-bold truncate uppercase tracking-widest">{podcast?.title || 'Unknown Podcast'}</p>
+          <div className="min-w-0">
+            <p className="text-sm font-bold text-white truncate leading-tight">{episode.title}</p>
+            <p className="text-[10px] text-slate-500 font-bold truncate uppercase tracking-wider">{podcast?.title || ''}</p>
           </div>
         </div>
 
-        {/* Playback Controls */}
-        <div className="flex-1 flex flex-col items-center gap-2">
-          <div className="flex items-center gap-6">
-            <button 
-              onClick={() => audioRef.current && (audioRef.current.currentTime -= 15)}
-              className="text-slate-400 hover:text-white transition-all hover:scale-110 active:scale-90"
-            >
-              <Rewind className="w-5 h-5" />
+        {/* Controls + progress */}
+        <div className="flex-1 flex flex-col items-center gap-1.5">
+          <div className="flex items-center gap-5">
+            <button onClick={() => handleSeek(-30)} className="group flex flex-col items-center gap-0.5 text-slate-500 hover:text-white transition-colors">
+              <RotateCcw className="w-4 h-4" />
+              <span className="text-[8px] font-black">30</span>
             </button>
-            <button 
-              onClick={handlePlayPause}
-              className="w-12 h-12 rounded-full bg-white text-obsidian flex items-center justify-center transition-all hover:scale-110 active:scale-95 shadow-glow-indigo hover:shadow-white/50"
-            >
-              {isPlaying ? <Pause className="w-5 h-5 fill-current" /> : <Play className="w-5 h-5 fill-current ml-0.5" />}
+            <button onClick={handlePlayPause}
+              className="w-11 h-11 rounded-full bg-white text-obsidian flex items-center justify-center shadow-glow-indigo hover:scale-105 active:scale-95 transition-transform">
+              {isPlaying ? <Pause className="w-4 h-4 fill-current" /> : <Play className="w-4 h-4 fill-current ml-0.5" />}
             </button>
-            <button 
-              onClick={() => audioRef.current && (audioRef.current.currentTime += 30)}
-              className="text-slate-400 hover:text-white transition-all hover:scale-110 active:scale-90"
-            >
-              <FastForward className="w-5 h-5" />
+            <button onClick={() => handleSeek(30)} className="group flex flex-col items-center gap-0.5 text-slate-500 hover:text-white transition-colors">
+              <RotateCw className="w-4 h-4" />
+              <span className="text-[8px] font-black">30</span>
             </button>
           </div>
-          
-          <div className="w-full max-w-xl flex items-center gap-3 group">
-            <span className="text-[10px] font-bold text-slate-500 w-10 text-right tabular-nums">{formatTime(currentTime)}</span>
-            <div className="relative flex-1 h-1.5 flex items-center cursor-pointer">
-              <input
-                type="range"
-                min="0"
-                max={duration || 0}
-                value={currentTime}
+          <div className="w-full max-w-lg flex items-center gap-2">
+            <span className="text-[9px] text-slate-600 tabular-nums w-8 text-right">{formatTime(currentTime)}</span>
+            <div className="relative flex-1 h-1 group cursor-pointer">
+              <input type="range" min="0" max={duration || 0} value={currentTime}
                 onChange={handleProgressChange}
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
-              />
-              <div className="w-full h-1 bg-white/10 rounded-full overflow-hidden">
-                <div 
-                  className="h-full bg-gradient-to-r from-accent-indigo to-accent-cyan shadow-[0_0_10px_rgba(99,102,241,0.5)] transition-all duration-100"
-                  style={{ width: `${(currentTime / duration) * 100}%` }}
-                />
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
+              <div className="w-full h-full bg-white/10 rounded-full overflow-hidden">
+                <div className="h-full bg-gradient-to-r from-accent-indigo to-accent-cyan rounded-full transition-all duration-100"
+                  style={{ width: `${progress}%` }} />
               </div>
             </div>
-            <span className="text-[10px] font-bold text-slate-500 w-10 tabular-nums">{formatTime(duration)}</span>
+            <span className="text-[9px] text-slate-600 tabular-nums w-8">{formatTime(duration)}</span>
           </div>
         </div>
 
-        {/* Sidebar-like utility */}
-        <div className="flex items-center gap-4 min-w-[200px] justify-end">
-           <button 
-            onClick={() => setIsExpanded(true)}
-            className="p-3 rounded-2xl bg-white/[0.03] text-slate-400 hover:text-white hover:bg-white/10 transition-all"
-           >
-             <Maximize2 className="w-4 h-4" />
-           </button>
-           <button 
-            onClick={onClose}
-            className="p-3 rounded-2xl bg-white/[0.03] text-slate-400 hover:text-accent-rose hover:bg-accent-rose/10 transition-all"
-           >
-             <X className="w-4 h-4" />
-           </button>
+        {/* Right actions */}
+        <div className="flex items-center gap-2 shrink-0">
+          <button onClick={toggleMute} className="p-2 text-slate-500 hover:text-white transition-colors">
+            {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
+          </button>
+          <button onClick={() => setIsExpanded(true)}
+            className="p-2 rounded-xl bg-white/5 text-slate-500 hover:text-white hover:bg-white/10 transition-all">
+            <Maximize2 className="w-4 h-4" />
+          </button>
+          <button onClick={onClose}
+            className="p-2 rounded-xl bg-white/5 text-slate-500 hover:text-accent-rose hover:bg-accent-rose/10 transition-all">
+            <X className="w-4 h-4" />
+          </button>
         </div>
       </div>
 
-      {/* EXPANDED VIEW */}
+      {/* ── EXPANDED VIEW ── */}
       {isExpanded && (
-        <div className="flex-1 flex flex-col p-12 transition-all duration-500 reveal">
-          <div className="flex justify-between items-start mb-12">
-             <button onClick={() => setIsExpanded(false)} className="p-4 rounded-3xl bg-white/5 text-slate-400 hover:text-white transition-all">
-                <ChevronDown className="w-6 h-6" />
-             </button>
-             <div className="text-center">
-                <span className="text-[11px] font-bold text-accent-indigo uppercase tracking-[0.3em] mb-2 block">Premium Experience</span>
-                <h2 className="text-xl font-display font-extrabold text-white">Now Playing</h2>
-             </div>
-             <button onClick={onClose} className="p-4 rounded-3xl bg-white/5 text-slate-400 hover:text-accent-rose transition-all">
-                <X className="w-6 h-6" />
-             </button>
+        <div className="flex-1 flex flex-col p-8 lg:p-16 overflow-y-auto">
+          {/* Top bar */}
+          <div className="flex items-center justify-between mb-10">
+            <button onClick={() => setIsExpanded(false)}
+              className="p-3 rounded-2xl bg-white/5 text-slate-400 hover:text-white transition-all">
+              <ChevronDown className="w-5 h-5" />
+            </button>
+            <p className="text-[10px] font-black text-accent-indigo uppercase tracking-[0.3em]">En cours de lecture</p>
+            <button onClick={onClose}
+              className="p-3 rounded-2xl bg-white/5 text-slate-400 hover:text-accent-rose transition-all">
+              <X className="w-5 h-5" />
+            </button>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center flex-1">
-             <div className="aspect-square w-full max-w-md mx-auto rounded-[3.5rem] overflow-hidden shadow-2xl border-4 border-white/10 transform rotate-1">
-                {podcast?.imageUrl ? (
-                  <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover scale-105" />
-                ) : (
-                  <div className="w-full h-full bg-gradient-to-tr from-accent-indigo via-accent-violet to-accent-rose flex items-center justify-center text-9xl">🎙️</div>
-                )}
-             </div>
+          <div className="flex flex-col lg:flex-row gap-12 items-center flex-1">
+            {/* Artwork */}
+            <div className="w-64 h-64 lg:w-80 lg:h-80 rounded-[2.5rem] overflow-hidden shadow-2xl border border-white/10 shrink-0">
+              {podcast?.imageUrl
+                ? <img src={podcast.imageUrl} alt="" className="w-full h-full object-cover" />
+                : <div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-violet flex items-center justify-center text-7xl">🎙️</div>
+              }
+            </div>
 
-             <div className="flex flex-col gap-8">
-                <div>
-                   <h1 className="text-5xl font-display font-black text-white leading-tight mb-4">{episode.title}</h1>
-                   <p className="text-lg text-slate-400 font-medium leading-relaxed line-clamp-4">{episode.description}</p>
-                </div>
+            {/* Info + controls */}
+            <div className="flex flex-col gap-8 flex-1 w-full max-w-lg">
+              <div>
+                <p className="text-xs font-black text-accent-indigo uppercase tracking-widest mb-2">{podcast?.title}</p>
+                <h2 className="text-3xl lg:text-4xl font-display font-black text-white leading-tight mb-3">{episode.title}</h2>
+                <p className="text-sm text-slate-500 leading-relaxed line-clamp-3">{episode.description}</p>
+              </div>
 
-                <div className="space-y-4">
-                  <div className="flex justify-between items-center mb-2">
-                    <span className="text-xs font-bold text-accent-indigo tabular-nums">{formatTime(currentTime)}</span>
-                    <span className="text-xs font-bold text-slate-500 tabular-nums">{formatTime(duration)}</span>
-                  </div>
-                  <input
-                    type="range"
-                    min="0"
-                    max={duration || 0}
-                    value={currentTime}
+              {/* Progress */}
+              <div>
+                <div className="relative h-1.5 group cursor-pointer mb-2">
+                  <input type="range" min="0" max={duration || 0} value={currentTime}
                     onChange={handleProgressChange}
-                    className="w-full h-2 bg-white/10 rounded-full appearance-none cursor-pointer accent-accent-indigo"
-                  />
+                    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
+                  <div className="w-full h-full bg-white/10 rounded-full overflow-hidden">
+                    <div className="h-full bg-gradient-to-r from-accent-indigo to-accent-cyan rounded-full"
+                      style={{ width: `${progress}%` }} />
+                  </div>
                 </div>
+                <div className="flex justify-between text-xs text-slate-500 tabular-nums">
+                  <span>{formatTime(currentTime)}</span>
+                  <span>{formatTime(duration)}</span>
+                </div>
+              </div>
 
-                <div className="flex items-center justify-center gap-12">
-                   <button onClick={() => handleSpeedChange(playbackSpeed === 2 ? 1 : playbackSpeed + 0.5)} className="text-xs font-bold text-slate-400 hover:text-white">
-                      SPEED {playbackSpeed}x
-                   </button>
-                   <button onClick={handlePlayPause} className="w-24 h-24 rounded-full bg-white text-obsidian flex items-center justify-center shadow-glow-indigo transform active:scale-90 transition-transform">
-                      {isPlaying ? <Pause className="w-10 h-10 fill-current" /> : <Play className="w-10 h-10 fill-current ml-2" />}
-                   </button>
-                   <div className="flex items-center gap-4">
-                      <Volume2 className="w-5 h-5 text-slate-400" />
-                      <input type="range" min="0" max="1" step="0.1" value={volume} onChange={handleVolumeChange} className="w-32 h-1 bg-white/10 rounded-full accent-white" />
-                   </div>
-                </div>
-             </div>
+              {/* Controls */}
+              <div className="flex items-center justify-center gap-8">
+                <button onClick={() => handleSeek(-30)}
+                  className="flex flex-col items-center gap-1 text-slate-400 hover:text-white transition-colors group">
+                  <RotateCcw className="w-6 h-6 group-hover:scale-110 transition-transform" />
+                  <span className="text-[9px] font-black">-30s</span>
+                </button>
+
+                <button onClick={handlePlayPause}
+                  className="w-20 h-20 rounded-full bg-white text-obsidian flex items-center justify-center shadow-glow-indigo hover:scale-105 active:scale-95 transition-transform">
+                  {isPlaying ? <Pause className="w-8 h-8 fill-current" /> : <Play className="w-8 h-8 fill-current ml-1" />}
+                </button>
+
+                <button onClick={() => handleSeek(30)}
+                  className="flex flex-col items-center gap-1 text-slate-400 hover:text-white transition-colors group">
+                  <RotateCw className="w-6 h-6 group-hover:scale-110 transition-transform" />
+                  <span className="text-[9px] font-black">+30s</span>
+                </button>
+              </div>
+
+              {/* Volume */}
+              <div className="flex items-center gap-4">
+                <button onClick={toggleMute} className="text-slate-400 hover:text-white transition-colors shrink-0">
+                  {isMuted ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
+                </button>
+                <input type="range" min="0" max="1" step="0.05" value={isMuted ? 0 : volume}
+                  onChange={handleVolumeChange}
+                  className="flex-1 h-1 bg-white/10 rounded-full appearance-none cursor-pointer accent-white" />
+              </div>
+            </div>
           </div>
         </div>
       )}
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index 997d82d..4299b33 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -55,7 +55,7 @@ export default function Navigation() {
 
         {/* Footer */}
         <div className="mt-auto pt-6 border-t border-white/5">
-           <p className="px-2 text-[10px] text-slate-600 font-medium">Podcastic © 2026</p>
+          <p className="px-2 text-[10px] text-slate-700 font-bold uppercase tracking-widest">Podcastic © 2026</p>
         </div>
       </nav>
 
diff --git a/frontend/src/pages/Library.tsx b/frontend/src/pages/Library.tsx
index 45851de..3fd718e 100644
--- a/frontend/src/pages/Library.tsx
+++ b/frontend/src/pages/Library.tsx
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { podcastService, Podcast } from '../services/podcastService';
 import { authService } from '../services/authService';
 import Header from '../components/Header';
-import { BookOpen, Trash2, Loader, Rss, Play, Settings2, RefreshCw, AlertCircle } from 'lucide-react';
+import { BookOpen, Trash2, Loader, Rss, Play, RefreshCw, AlertCircle } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
 export default function Library() {
@@ -90,26 +90,26 @@ export default function Library() {
         onLogout={handleLogout}
       />
 
-      {/* Stats Quick View */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
-          <div className="premium-glass p-6 rounded-[2rem] flex items-center gap-6">
-             <div className="w-12 h-12 rounded-2xl bg-accent-indigo/10 flex items-center justify-center text-accent-indigo">
-                <BookOpen className="w-6 h-6" />
-             </div>
-             <div>
-                <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Podcasts</p>
-                <h3 className="text-2xl font-display font-black text-white">{podcasts.length}</h3>
-             </div>
+      {/* Stats */}
+      <div className="grid grid-cols-2 gap-4 mb-10">
+        <div className="premium-glass p-5 rounded-[1.5rem] flex items-center gap-4">
+          <div className="w-10 h-10 rounded-xl bg-accent-indigo/10 flex items-center justify-center text-accent-indigo shrink-0">
+            <BookOpen className="w-5 h-5" />
           </div>
-          <Link to="/add" className="premium-glass p-6 rounded-[2rem] flex items-center gap-6 group hover:bg-accent-indigo/5 transition-all">
-             <div className="w-12 h-12 rounded-2xl bg-accent-indigo flex items-center justify-center text-white shadow-glow-indigo group-hover:scale-110 transition-transform">
-                <Rss className="w-6 h-6" />
-             </div>
-             <div>
-                <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Action</p>
-                <h3 className="text-lg font-bold text-white">Ajouter un Podcast</h3>
-             </div>
-          </Link>
+          <div>
+            <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Abonnements</p>
+            <h3 className="text-2xl font-display font-black text-white">{podcasts.length}</h3>
+          </div>
+        </div>
+        <Link to="/add" className="premium-glass p-5 rounded-[1.5rem] flex items-center gap-4 group hover:bg-accent-indigo/5 transition-all">
+          <div className="w-10 h-10 rounded-xl bg-accent-indigo flex items-center justify-center text-white shadow-glow-indigo group-hover:scale-110 transition-transform shrink-0">
+            <Rss className="w-5 h-5" />
+          </div>
+          <div>
+            <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Action</p>
+            <h3 className="text-base font-bold text-white">Ajouter un podcast</h3>
+          </div>
+        </Link>
       </div>
 
       {isLoading ? (
@@ -206,18 +206,13 @@ export default function Library() {
                        <button onClick={() => setConfirmDeleteId(null)} className="flex-1 py-2 bg-white/5 text-slate-400 rounded-xl text-[11px] font-black uppercase hover:bg-white/10">Annuler</button>
                     </div>
                  ) : (
-                    <>
-                      <button className="p-2.5 rounded-xl bg-white/5 text-slate-500 hover:text-white hover:bg-white/10 transition-all">
-                        <Settings2 className="w-4 h-4" />
-                      </button>
-                      <button 
-                        onClick={() => setConfirmDeleteId(podcast.subscriptionId || podcast._id)}
-                        className="flex items-center gap-2 text-[10px] font-bold text-slate-600 hover:text-accent-rose transition-all uppercase tracking-widest"
-                      >
-                        <Trash2 className="w-3 h-3" />
-                        Désabonner
-                      </button>
-                    </>
+                    <button
+                      onClick={() => setConfirmDeleteId(podcast.subscriptionId || podcast._id)}
+                      className="ml-auto flex items-center gap-2 text-[10px] font-bold text-slate-600 hover:text-accent-rose transition-all uppercase tracking-widest"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                      Désabonner
+                    </button>
                  )}
               </div>
             </div>
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 9ff9ba2..1386062 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -3,100 +3,102 @@
 @tailwind utilities;
 
 :root {
-  --obsidian: #020617;
+  --obsidian: #080d1a;
   --accent-indigo: #6366f1;
   --accent-cyan: #06b6d4;
+  --accent-rose: #f43f5e;
+  --accent-violet: #8b5cf6;
 }
 
-* {
-  @apply box-border;
-}
+* { @apply box-border; }
 
-html {
-  @apply scroll-smooth;
-}
+html { @apply scroll-smooth; }
 
 body {
-  @apply bg-obsidian text-slate-200 antialiased font-sans transition-colors duration-500 overflow-x-hidden;
-  background-image: 
-    radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
-    radial-gradient(circle at 100% 100%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
+  background-color: var(--obsidian);
+  background-image:
+    radial-gradient(ellipse 80% 40% at 10% 10%, rgba(99,102,241,0.07) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 50% at 90% 90%, rgba(6,182,212,0.06) 0%, transparent 60%);
   min-height: 100vh;
+  @apply text-slate-200 antialiased font-sans overflow-x-hidden;
 }
 
-/* Scrollbar Style */
-::-webkit-scrollbar {
-  @apply w-1.5 h-1.5;
-}
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
 
-::-webkit-scrollbar-track {
-  @apply bg-transparent;
-}
+/* ── Typography ── */
+h1,h2,h3,h4 { @apply font-display font-extrabold tracking-tight text-white; }
 
-::-webkit-scrollbar-thumb {
-  @apply bg-white/10 rounded-full hover:bg-white/20 transition-colors;
-}
-
-/* Premium Typography */
-h1, h2, h3, h4 {
-  @apply font-display font-extrabold tracking-tight text-white;
-}
-
-/* Premium Glassmorphism */
+/* ── Glass card ── */
 .premium-glass {
-  @apply bg-white/[0.03] backdrop-blur-2xl border border-white/[0.08] shadow-glass;
-}
-
-.premium-glass-hover {
-  @apply transition-all duration-300 hover:bg-white/[0.06] hover:border-white/[0.15] hover:shadow-glow-indigo;
-}
-
-.glass-nav {
-  @apply bg-obsidian/40 backdrop-blur-xl border-white/[0.05];
-}
-
-/* Animations */
-@keyframes aura-fade {
-  0%, 100% { opacity: 0.5; transform: scale(1); }
-  50% { opacity: 0.8; transform: scale(1.05); }
-}
-
-.animate-aura {
-  animation: aura-fade 10s ease-in-out infinite;
-}
-
-@keyframes content-reveal {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.reveal {
-  animation: content-reveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
-}
-
-/* Custom UI Components */
-.neon-button {
-  @apply relative overflow-hidden px-6 py-3 rounded-2xl font-bold transition-all duration-300 
-         bg-gradient-to-r from-accent-indigo to-accent-violet text-white shadow-glow-indigo
-         hover:scale-[1.02] hover:shadow-indigo-500/40 active:scale-[0.98];
+  background: rgba(255,255,255,0.025);
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  border: 1px solid rgba(255,255,255,0.07);
+  box-shadow: 0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
 }
 
+/* ── Inputs ── */
 .input-premium {
-  @apply w-full px-5 py-4 rounded-2xl bg-white/[0.03] border border-white/[0.08] text-white 
-         focus:outline-none focus:ring-2 focus:ring-accent-indigo/30 focus:border-accent-indigo/50
-         placeholder:text-slate-500 transition-all;
+  @apply w-full px-5 py-4 rounded-2xl text-white
+         placeholder:text-slate-600 transition-all outline-none;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.07);
+}
+.input-premium:focus {
+  background: rgba(255,255,255,0.05);
+  border-color: rgba(99,102,241,0.5);
+  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
 }
 
-.tab-active {
-  @apply relative text-white after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 
-         after:w-1 after:h-1 after:bg-accent-indigo after:rounded-full after:shadow-[0_0_8px_rgba(99,102,241,1)];
+/* ── Buttons ── */
+.neon-button {
+  @apply relative inline-flex items-center justify-center gap-2 px-6 py-3 rounded-2xl
+         font-bold text-white transition-all duration-300 active:scale-[0.97] select-none;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  box-shadow: 0 4px 20px rgba(99,102,241,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
+}
+.neon-button:hover {
+  box-shadow: 0 6px 28px rgba(99,102,241,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
+  transform: translateY(-1px);
+}
+.neon-button:disabled {
+  opacity: 0.5;
+  transform: none;
+  cursor: not-allowed;
 }
 
-/* Utils */
-.text-balance {
-  text-wrap: balance;
+/* ── Animations ── */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }
 
-.mask-fade-bottom {
-  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
+
+@keyframes reveal {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes aura-pulse {
+  0%,100% { opacity: 0.5; transform: scale(1); }
+  50%      { opacity: 0.8; transform: scale(1.08); }
+}
+
+.reveal        { animation: reveal   0.5s cubic-bezier(0.2,0.8,0.2,1) both; }
+.animate-slide-up  { animation: slide-up  0.4s cubic-bezier(0.2,0.8,0.2,1) both; }
+.animate-fade-in   { animation: fade-in   0.3s ease both; }
+.animate-aura      { animation: aura-pulse 10s ease-in-out infinite; }
+
+/* ── Utility ── */
+.text-balance { text-wrap: balance; }
+.shadow-glass   { box-shadow: 0 8px 40px rgba(0,0,0,0.4); }
+.shadow-glow-indigo { box-shadow: 0 0 20px rgba(99,102,241,0.35); }
+.shadow-glow-cyan   { box-shadow: 0 0 20px rgba(6,182,212,0.35); }