diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..72e2371
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,46 @@
+import { useAudioPlayer } from './hooks/useAudioPlayer'
+import Navbar from './components/Navbar/Navbar'
+import Hero from './components/Hero/Hero'
+import FloatingScene from './components/FloatingScene/FloatingScene'
+import FeaturedAlbums from './components/FeaturedAlbums/FeaturedAlbums'
+import NewReleases from './components/NewReleases/NewReleases'
+import WaveSection from './components/WaveSection/WaveSection'
+import TrendingTracks from './components/TrendingTracks/TrendingTracks'
+import GenreExplorer from './components/GenreExplorer/GenreExplorer'
+import MoodSection from './components/MoodSection/MoodSection'
+import ArtistSpotlight from './components/ArtistSpotlight/ArtistSpotlight'
+import StatsSection from './components/StatsSection/StatsSection'
+import Footer from './components/Footer/Footer'
+import PlayerBar from './components/Player/PlayerBar'
+
+export default function App() {
+  const player = useAudioPlayer()
+
+  return (
+    <div className="min-h-screen" style={{ background: 'var(--dark-base)', paddingBottom: '80px' }}>
+      <Navbar />
+      <Hero isPlaying={player.isPlaying} onTogglePlay={player.togglePlay} />
+      <FloatingScene />
+      <FeaturedAlbums onPlay={player.play} currentTrack={player.currentTrack} />
+      <NewReleases />
+      <WaveSection />
+      <TrendingTracks currentTrack={player.currentTrack} onPlay={player.play} />
+      <GenreExplorer />
+      <MoodSection />
+      <ArtistSpotlight />
+      <StatsSection />
+      <Footer />
+      <PlayerBar
+        currentTrack={player.currentTrack}
+        isPlaying={player.isPlaying}
+        progress={player.progress}
+        volume={player.volume}
+        onToggle={player.togglePlay}
+        onNext={player.next}
+        onPrev={player.prev}
+        onSeek={player.setProgress}
+        onVolume={player.setVolume}
+      />
+    </div>
+  )
+}