Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 8a47b30f7be0c80847e0bb6d30060d214d1bd85d)
+++ frontend/src/App.tsx	(revision 7621d7b2606460a77489dea20e584443f4fbdf4c)
@@ -9,6 +9,8 @@
 import "react-toastify/dist/ReactToastify.css";
 import LoadingSpinner from "./components/LoadingSpinner";
+import MiniPlayer from "./components/MiniPlayer";
 import Sidebar from "./components/Sidebar";
 import { useAuth } from "./context/authContext";
+import { usePlayer } from "./context/playerContext";
 import AllUsers from "./pages/AllUsers";
 import LandingPage from "./pages/LandingPage";
@@ -22,4 +24,5 @@
 const MainLayout = () => {
 	const { user } = useAuth();
+	const { currentSong } = usePlayer();
 	const location = useLocation();
 	// show sidebar only if user is logged in and is on the landing page
@@ -56,8 +59,9 @@
 				className={`grow transition-all duration-300 pt-20 ${
 					isSidebarOpen ? "ml-64" : "ml-0"
-				}`}
+				} ${currentSong ? "pb-20" : ""}`}
 			>
 				<Outlet />
 			</main>
+			<MiniPlayer />
 		</div>
 	);