Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/SongController.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/SongController.java	(revision 591919dcbfc8cdaa28d9cb3a0ab779f85b9a104f)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/SongController.java	(revision 5938bc91ed6ba103319368a469dca23bdb676da9)
@@ -20,11 +20,9 @@
 @AllArgsConstructor
 public class SongController {
-    private final AuthService authService;
     private final SongService songService;
 
     @GetMapping("/top")
     public HttpEntity<List<MusicalEntityDto>> getSongs(){
-        Long userId = authService.getCurrentUserID();
-        return ResponseEntity.ok(songService.getTopSongs(userId));
+        return ResponseEntity.ok(songService.getTopSongs());
     }
 
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/SongService.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/SongService.java	(revision 591919dcbfc8cdaa28d9cb3a0ab779f85b9a104f)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/SongService.java	(revision 5938bc91ed6ba103319368a469dca23bdb676da9)
@@ -15,5 +15,9 @@
     private final AuthService authService;
 
-    public List<MusicalEntityDto> getTopSongs(Long userId){
+    public List<MusicalEntityDto> getTopSongs(){
+        Long userId = null;
+        try {
+            userId = authService.getCurrentUserID();
+        } catch (Exception ignored) {}
         return songRepository.findTopByListens(userId);
     }
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 591919dcbfc8cdaa28d9cb3a0ab779f85b9a104f)
+++ frontend/src/App.tsx	(revision 5938bc91ed6ba103319368a469dca23bdb676da9)
@@ -4,4 +4,5 @@
 import "react-toastify/dist/ReactToastify.css";
 import Sidebar from "./components/Sidebar";
+import { useAuth } from "./context/authContext";
 import AllUsers from "./pages/AllUsers";
 import LandingPage from "./pages/LandingPage";
@@ -12,6 +13,7 @@
 import UserDetail from "./pages/UserDetail";
 
-const Layout = () => {
-	const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+const MainLayout = () => {
+	const { user } = useAuth();
+	const [isSidebarOpen, setIsSidebarOpen] = useState(!!user);
 
 	return (
@@ -43,4 +45,18 @@
 		</div>
 	);
+};
+
+const Layout = () => {
+	const { isAuthLoading } = useAuth();
+
+	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 <MainLayout />;
 };
 
Index: frontend/src/components/Sidebar.tsx
===================================================================
--- frontend/src/components/Sidebar.tsx	(revision 591919dcbfc8cdaa28d9cb3a0ab779f85b9a104f)
+++ frontend/src/components/Sidebar.tsx	(revision 5938bc91ed6ba103319368a469dca23bdb676da9)
@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import axiosInstance from "../api/axiosInstance";
+import { useAuth } from "../context/authContext";
 import type { BasicPlaylist, BasicSong, SidebarProps } from "../utils/types";
 
 const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
+	const { user } = useAuth();
 	const [recentlyListened, setRecentlyListened] = useState<BasicSong[]>([]);
 	const [playlists, setPlaylists] = useState<BasicPlaylist[]>([]);
@@ -25,6 +27,11 @@
 			}
 		};
-		fetchData();
-	}, []);
+		if (user) {
+			fetchData();
+		} else {
+			setRecentlyListened([]);
+			setPlaylists([]);
+		}
+	}, [user]);
 	return (
 		<div