diff --git a/src/components/Player/PlayerBar.jsx b/src/components/Player/PlayerBar.jsx
new file mode 100644
index 0000000..7ed03f7
--- /dev/null
+++ b/src/components/Player/PlayerBar.jsx
@@ -0,0 +1,146 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import Waveform3D from './Waveform3D'
+
+export default function PlayerBar({ currentTrack, isPlaying, progress, volume, onToggle, onNext, onPrev, onSeek, onVolume }) {
+  const [liked, setLiked] = useState(false)
+  const [shuffled, setShuffled] = useState(false)
+  const [repeated, setRepeated] = useState(false)
+
+  if (!currentTrack) return null
+
+  const pct = `${(progress * 100).toFixed(1)}%`
+
+  return (
+    <AnimatePresence>
+      <motion.footer
+        initial={{ y: 100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
+        className="fixed bottom-0 left-0 right-0 z-50 glass-dark"
+        style={{ borderTop: '1px solid rgba(201,168,76,0.1)', boxShadow: '0 -16px 48px rgba(0,0,0,0.7)' }}
+      >
+        <div className="max-w-7xl mx-auto px-5 h-20 flex items-center gap-4 md:gap-6">
+
+          {/* ── Track info ──────────────────── */}
+          <div className="flex items-center gap-3 w-48 md:w-56 flex-shrink-0 min-w-0">
+            <div className="relative w-11 h-11 rounded-lg overflow-hidden flex-shrink-0 shadow-card">
+              <img src={currentTrack.cover} alt={currentTrack.title} className="w-full h-full object-cover" />
+              {isPlaying && (
+                <div className="absolute inset-0 rounded-lg"
+                  style={{ boxShadow: 'inset 0 0 0 1.5px rgba(201,168,76,0.6)', animation: 'pulse-gold 2s ease-in-out infinite' }} />
+              )}
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="text-white text-xs font-semibold truncate leading-snug">{currentTrack.title}</p>
+              <p className="text-secondary text-xs truncate">{currentTrack.artist}</p>
+            </div>
+            <motion.button
+              whileHover={{ scale: 1.2 }}
+              whileTap={{ scale: 0.85 }}
+              onClick={() => setLiked(l => !l)}
+              className="flex-shrink-0 transition-colors"
+              style={{ color: liked ? 'var(--gold)' : 'var(--text-muted)' }}
+            >
+              <svg className="w-3.5 h-3.5" fill={liked ? 'currentColor' : 'none'}
+                stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8}
+                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+              </svg>
+            </motion.button>
+          </div>
+
+          {/* ── Centre: controls + progress ─ */}
+          <div className="flex-1 flex flex-col items-center gap-1.5 min-w-0">
+            {/* Control buttons */}
+            <div className="flex items-center gap-5">
+              {/* Shuffle */}
+              <motion.button whileHover={{ scale: 1.15 }} whileTap={{ scale: 0.88 }}
+                onClick={() => setShuffled(s => !s)}
+                style={{ color: shuffled ? 'var(--gold)' : 'var(--text-muted)' }}
+                className="hidden sm:block transition-colors">
+                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8}
+                    d="M16 3l4 4-4 4M20 7H4M8 21l-4-4 4-4M4 17h16" />
+                </svg>
+              </motion.button>
+
+              {/* Prev */}
+              <motion.button whileHover={{ scale: 1.12 }} whileTap={{ scale: 0.88 }}
+                onClick={onPrev} className="text-secondary hover:text-white transition-colors">
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M6 6h2v12H6zm3.5 6 8.5 6V6z" />
+                </svg>
+              </motion.button>
+
+              {/* Play/Pause */}
+              <motion.button
+                whileHover={{ scale: 1.08, boxShadow: '0 0 28px rgba(201,168,76,0.45)' }}
+                whileTap={{ scale: 0.92 }}
+                onClick={onToggle}
+                className="w-9 h-9 rounded-full flex items-center justify-center text-dark-base shadow-gold-sm"
+                style={{ background: 'linear-gradient(135deg, #c9a84c, #e8c547)' }}
+              >
+                {isPlaying
+                  ? <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></svg>
+                  : <svg className="w-3.5 h-3.5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
+                }
+              </motion.button>
+
+              {/* Next */}
+              <motion.button whileHover={{ scale: 1.12 }} whileTap={{ scale: 0.88 }}
+                onClick={onNext} className="text-secondary hover:text-white transition-colors">
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
+                </svg>
+              </motion.button>
+
+              {/* Repeat */}
+              <motion.button whileHover={{ scale: 1.15 }} whileTap={{ scale: 0.88 }}
+                onClick={() => setRepeated(r => !r)}
+                style={{ color: repeated ? 'var(--gold)' : 'var(--text-muted)' }}
+                className="hidden sm:block transition-colors">
+                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8}
+                    d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3" />
+                </svg>
+              </motion.button>
+            </div>
+
+            {/* Progress bar */}
+            <div className="w-full max-w-md flex items-center gap-2.5">
+              <span className="text-xs text-muted font-mono w-8 text-right flex-shrink-0">0:00</span>
+              <div className="flex-1 h-1 rounded-full cursor-pointer group relative"
+                style={{ background: 'var(--dark-border)' }}
+                onClick={e => {
+                  const r = e.currentTarget.getBoundingClientRect()
+                  onSeek((e.clientX - r.left) / r.width)
+                }}>
+                <div className="h-full rounded-full relative transition-all"
+                  style={{ width: pct, background: 'linear-gradient(90deg, #c9a84c, #e8c547)' }}>
+                  <div className="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-white scale-0 group-hover:scale-100 transition-transform shadow-gold-sm" />
+                </div>
+              </div>
+              <span className="text-xs text-muted font-mono w-8 flex-shrink-0">{currentTrack.duration}</span>
+            </div>
+          </div>
+
+          {/* ── Right: waveform + volume ─────── */}
+          <div className="hidden lg:flex items-center gap-4 w-52 flex-shrink-0 justify-end">
+            <div className="w-24 h-9">
+              <Waveform3D isPlaying={isPlaying} />
+            </div>
+            <div className="flex items-center gap-2">
+              <svg className="w-3.5 h-3.5 text-muted flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z" />
+              </svg>
+              <input type="range" min="0" max="1" step="0.01"
+                value={volume} onChange={e => onVolume(parseFloat(e.target.value))}
+                className="w-20" style={{ accentColor: 'var(--gold)' }} />
+            </div>
+          </div>
+        </div>
+      </motion.footer>
+    </AnimatePresence>
+  )
+}