Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision ebdd3d48efef8374b874c7bf90d571fa73c18f19)
+++ frontend/src/App.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
@@ -1,6 +1,12 @@
-import { useState } from "react";
-import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import { useEffect, useState } from "react";
+import {
+	createBrowserRouter,
+	Outlet,
+	RouterProvider,
+	useLocation,
+} from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import LoadingSpinner from "./components/LoadingSpinner";
 import Sidebar from "./components/Sidebar";
 import { useAuth } from "./context/authContext";
@@ -15,5 +21,15 @@
 const MainLayout = () => {
 	const { user } = useAuth();
-	const [isSidebarOpen, setIsSidebarOpen] = useState(!!user);
+	const location = useLocation();
+	// show sidebar only if user is logged in and is on the landing page
+	const isLandingPage = location.pathname === "/";
+	const [isSidebarOpen, setIsSidebarOpen] = useState(!!user && isLandingPage);
+
+	// Open sidebar when user logs in and navigates to landing page
+	useEffect(() => {
+		if (user && isLandingPage) {
+			setIsSidebarOpen(true);
+		}
+	}, [user, isLandingPage]);
 
 	return (
@@ -51,9 +67,5 @@
 
 	if (isAuthLoading) {
-		return (
-			<div className="flex h-screen items-center justify-center bg-[#121212]">
-				<div className="w-12 h-12 border-4 border-white/10 border-t-[#1db954] rounded-full animate-spin"></div>
-			</div>
-		);
+		return <LoadingSpinner />;
 	}
 
Index: frontend/src/components/LoadingSpinner.tsx
===================================================================
--- frontend/src/components/LoadingSpinner.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
+++ frontend/src/components/LoadingSpinner.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
@@ -0,0 +1,9 @@
+const LoadingSpinner = () => {
+	return (
+		<div className="flex h-screen items-center justify-center bg-[#121212]">
+			<div className="w-12 h-12 border-4 border-white/10 border-t-[#1db954] rounded-full animate-spin"></div>
+		</div>
+	);
+};
+
+export default LoadingSpinner;
Index: frontend/src/pages/AllUsers.tsx
===================================================================
--- frontend/src/pages/AllUsers.tsx	(revision ebdd3d48efef8374b874c7bf90d571fa73c18f19)
+++ frontend/src/pages/AllUsers.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
@@ -2,4 +2,5 @@
 import { useNavigate } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
+import LoadingSpinner from "../components/LoadingSpinner";
 
 interface User {
@@ -39,5 +40,7 @@
 	};
 
-	if (users.length == 0) return <div className="p-6">Loading...</div>;
+	if (users.length == 0) {
+		return <LoadingSpinner />;
+	}
 	if (error) {
 		return (
Index: frontend/src/pages/MusicalCollection.tsx
===================================================================
--- frontend/src/pages/MusicalCollection.tsx	(revision ebdd3d48efef8374b874c7bf90d571fa73c18f19)
+++ frontend/src/pages/MusicalCollection.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
@@ -2,4 +2,5 @@
 import { useNavigate, useParams } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
+import LoadingSpinner from "../components/LoadingSpinner";
 import type { Song, Album, Playlist } from "../utils/types";
 import { handleError } from "../utils/error";
@@ -71,5 +72,5 @@
 
   if (isLoading) {
-    return <div className="p-6">Loading...</div>;
+    return <LoadingSpinner />;
   }
 
Index: frontend/src/pages/Nav.tsx
===================================================================
--- frontend/src/pages/Nav.tsx	(revision ebdd3d48efef8374b874c7bf90d571fa73c18f19)
+++ frontend/src/pages/Nav.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
@@ -52,5 +52,5 @@
 		>
 			<div className="flex items-center gap-4">
-				{onToggleSidebar && (
+				{onToggleSidebar && user && (
 					<button
 						onClick={onToggleSidebar}
Index: frontend/src/pages/UserDetail.tsx
===================================================================
--- frontend/src/pages/UserDetail.tsx	(revision ebdd3d48efef8374b874c7bf90d571fa73c18f19)
+++ frontend/src/pages/UserDetail.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
@@ -2,4 +2,5 @@
 import { useNavigate, useParams } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
+import LoadingSpinner from "../components/LoadingSpinner";
 import ArtistView from "../components/userProfile/ArtistView";
 import ListenerView from "../components/userProfile/ListenerView";
@@ -174,5 +175,7 @@
 	}
 
-	if (!user) return <div className="p-6">Loading...</div>;
+	if (!user) {
+		return <LoadingSpinner />;
+	}
 
 	return (