Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision ea25fae4cae40e08d4102a7196ef60bd226f3c4f)
+++ frontend/src/App.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -4,5 +4,4 @@
 import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
-import PrivateRoute from "./components/PrivateRoute";
 import CourseCatalog from "./components/SubjectCatalog/SubjectCatalog";
 import "./index.css";
@@ -16,4 +15,6 @@
 import SubjectView from "./pages/SubjectView";
 import { AuthProvider } from "./context/AuthProvider";
+import ProtectedLayout from "./components/ProtectedLayout";
+import PrivateRoute from "./components/PrivateRoute";
 
 const Layout = () => (
@@ -39,4 +40,5 @@
 	</div>
 );
+
 const router = createBrowserRouter([
 	{
@@ -48,36 +50,37 @@
 			{ path: "login", element: <Login /> },
 			{ path: "register", element: <Register /> },
+			{ path: "subjects/:code", element: <SubjectView /> },
+
 			{
-				path: "recommendations",
-				element: (
-					<PrivateRoute>
-						<Recommendations />
-					</PrivateRoute>
-				),
+				element: <ProtectedLayout />,
+				children: [
+					{
+						path: "recommendations",
+						element: (
+							<PrivateRoute>
+								<Recommendations />
+							</PrivateRoute>
+						),
+					},
+					{
+						path: "account",
+						element: (
+							<PrivateRoute>
+								<Account />
+							</PrivateRoute>
+						),
+					},
+					{
+						path: "subject-preferences",
+						element: (
+							<PrivateRoute>
+								<SubjectPreferences />
+							</PrivateRoute>
+						),
+					},
+				],
 			},
-			{
-				path: "account",
-				element: (
-					<PrivateRoute>
-						<Account />
-					</PrivateRoute>
-				),
-			},
-			{
-				path: "subject-preferences",
-				element: (
-					<PrivateRoute>
-						<SubjectPreferences />
-					</PrivateRoute>
-				),
-			},
-			{
-				path: "subjects/:code",
-				element: <SubjectView />,
-			},
-			{
-				path: "*",
-				element: <NotFound />,
-			},
+
+			{ path: "*", element: <NotFound /> },
 		],
 	},
@@ -87,5 +90,5 @@
 	return (
 		<AuthProvider>
-			<RouterProvider router={router} />{" "}
+			<RouterProvider router={router} />
 		</AuthProvider>
 	);
Index: frontend/src/components/LoadingSpinner.tsx
===================================================================
--- frontend/src/components/LoadingSpinner.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
+++ frontend/src/components/LoadingSpinner.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const LoadingSpinner: React.FC = () => {
+    return (
+        <div className="flex flex-col items-center justify-center flex-grow w-full min-h-[300px]">
+            <div 
+                className="w-12 h-12 border-4 border-gray-200 rounded-full border-t-blue-600 animate-spin"
+                role="status"
+                aria-label="Loading"
+            >
+                <span className="sr-only">Loading...</span>
+            </div>
+            <p className="mt-4 text-lg text-white text-center">Loading session...</p>
+        </div>
+    );
+};
+
+export default LoadingSpinner;
Index: frontend/src/components/PrivateRoute.tsx
===================================================================
--- frontend/src/components/PrivateRoute.tsx	(revision ea25fae4cae40e08d4102a7196ef60bd226f3c4f)
+++ frontend/src/components/PrivateRoute.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -1,15 +1,20 @@
-import React from 'react';
-import { Navigate } from 'react-router-dom';
-import { useAuth } from '../hooks/useAuth';
+import React from "react";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
 
 interface PrivateRouteProps {
-    children: React.ReactNode;
+	children: React.ReactNode;
 }
+
 const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
-    const { isAuthenticated } = useAuth();
-    if (!isAuthenticated) {
-        return <Navigate to="/login" replace />;
-    }
-    return <>{children}</>;
-}
+	const { isAuthenticated } = useAuth();
+
+	// This check runs AFTER ProtectedLayout has finished initializing
+	if (!isAuthenticated) {
+		return <Navigate to="/login" replace />;
+	}
+
+	return <>{children}</>;
+};
+
 export default PrivateRoute;
Index: frontend/src/components/ProtectedLayout.tsx
===================================================================
--- frontend/src/components/ProtectedLayout.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
+++ frontend/src/components/ProtectedLayout.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import { Outlet } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+import LoadingSpinner from "../components/LoadingSpinner";
+
+const ProtectedLayout: React.FC = () => {
+	const { loading, sessionInitialized, initializeUser } = useAuth();
+	const [isInitializing, setIsInitializing] = useState(true);
+
+	useEffect(() => {
+		// If the session isn't initialized and the initial token check is done
+		if (!sessionInitialized && !loading) {
+			initializeUser().finally(() => {
+				setIsInitializing(false);
+			});
+		} else {
+			setIsInitializing(false);
+		}
+	}, [loading, sessionInitialized, initializeUser]);
+
+	if (isInitializing) {
+		return <LoadingSpinner />;
+	}
+
+	// Once done, render the child route (e.g. Recommendations)
+	return <Outlet />;
+};
+
+export default ProtectedLayout;
Index: frontend/src/components/StudentForm/StudentForm.tsx
===================================================================
--- frontend/src/components/StudentForm/StudentForm.tsx	(revision ea25fae4cae40e08d4102a7196ef60bd226f3c4f)
+++ frontend/src/components/StudentForm/StudentForm.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -21,4 +21,5 @@
 } from "./utils";
 import axiosInstance from "../../api/axiosInstance";
+import { isAxiosError } from 'axios';
 
 interface StudentFormProps {
@@ -33,4 +34,34 @@
 	technologies: string[];
 }
+
+
+const parseBackendError = (error: unknown): string => {
+  if (isAxiosError(error) && error.response) {
+    const data = error.response.data;
+
+    if (data && data.detail) {
+      return data.detail;
+    }
+
+    if (data && data.message) {
+      return data.message;
+    }
+
+    if (data && typeof data === 'object' && Object.keys(data).length > 0) {
+      const firstErrorField = Object.keys(data)[0];
+      const errorMessages = data[firstErrorField];
+
+      if (Array.isArray(errorMessages) && errorMessages.length > 0) {
+        return errorMessages[0];
+      }
+    }
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return 'An unknown error occurred. Please try again.';
+};
 
 const StudentForm = ({ formData, isLoading }: StudentFormProps) => {
@@ -288,7 +319,8 @@
 			window.scrollTo({ top: 0, behavior: "smooth" });
 		} catch (error) {
+			const errorMessage = parseBackendError(error);
 			setFormStatus({
 				isSubmitting: false,
-				message: `Грешка при зачувување: ${(error as Error).message}`,
+				message: `Грешка при зачувување: ${errorMessage}`,
 				isError: true,
 			});
Index: frontend/src/context/AuthContext.tsx
===================================================================
--- frontend/src/context/AuthContext.tsx	(revision ea25fae4cae40e08d4102a7196ef60bd226f3c4f)
+++ frontend/src/context/AuthContext.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -1,22 +1,22 @@
-import { createContext } from 'react';
-import { StudentData } from '../components/types';
+import { createContext } from "react";
+import { StudentData } from "../components/types";
 
 export interface User {
-    full_name: string;
-    user_type: string;
+	full_name: string;
+	user_type: string;
 }
 export interface AuthContextType {
-    accessToken: string | null;
-    formData: StudentData | null;
-    setFormData: (data: StudentData | null) => void;
-    user: User | null; 
-    login: (accessToken: string, refreshToken: string, userData: User) => void;
-    logout: () => void;
-    isAuthenticated: boolean;
-    loading: boolean;
+	accessToken: string | null;
+	formData: StudentData | null;
+	setFormData: (data: StudentData | null) => void;
+	user: User | null;
+	login: (accessToken: string, refreshToken: string, userData: User) => void;
+	logout: () => void;
+	isAuthenticated: boolean;
+	loading: boolean;
+	sessionInitialized: boolean;
+	initializeUser: () => Promise<void>;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export default AuthContext;
-
-
Index: frontend/src/context/AuthProvider.tsx
===================================================================
--- frontend/src/context/AuthProvider.tsx	(revision ea25fae4cae40e08d4102a7196ef60bd226f3c4f)
+++ frontend/src/context/AuthProvider.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -9,7 +9,8 @@
 import { jwtDecode } from "jwt-decode";
 import { toast } from "react-toastify";
+import { User } from "./AuthContext";
 import { StudentData } from "../components/types";
-import { User } from "../context/AuthContext";
-import AuthContext, { AuthContextType } from "../context/AuthContext";
+import AuthContext, { AuthContextType } from "./AuthContext";
+import { AxiosError, AxiosRequestConfig, isAxiosError } from "axios";
 
 interface DecodedToken {
@@ -21,11 +22,15 @@
 }
 
+interface CustomAxiosRequestConfig extends AxiosRequestConfig {
+	_retry?: boolean;
+}
+
 let isRefreshing = false;
 let failedQueue: Array<{
-	resolve: (value: any) => void;
-	reject: (reason?: any) => void;
+	resolve: (value: string | null) => void;
+	reject: (reason: unknown) => void;
 }> = [];
 
-const processQueue = (error: any, token: string | null = null) => {
+const processQueue = (error: unknown, token: string | null = null) => {
 	failedQueue.forEach((prom) => {
 		if (error) {
@@ -43,7 +48,7 @@
 	const [user, setUser] = useState<User | null>(null);
 	const [accessToken, setAccessToken] = useState<string | null>(null);
-	const [refreshToken, setRefreshToken] = useState<string | null>(null);
 	const [formData, setFormData] = useState<StudentData | null>(null);
 	const [loading, setLoading] = useState(true);
+	const [sessionInitialized, setSessionInitialized] = useState(false);
 
 	const proactiveRefreshTimeoutId = useRef<number | null>(null);
@@ -53,5 +58,4 @@
 			clearTimeout(proactiveRefreshTimeoutId.current);
 		}
-
 		const currentRefreshToken = localStorage.getItem("refresh");
 		if (currentRefreshToken) {
@@ -65,11 +69,10 @@
 				);
 		}
-
 		localStorage.removeItem("access");
 		localStorage.removeItem("refresh");
 		setAccessToken(null);
-		setRefreshToken(null);
 		setFormData(null);
 		setUser(null);
+		setSessionInitialized(false); // Reset session on logout
 	}, []);
 
@@ -79,5 +82,4 @@
 				clearTimeout(proactiveRefreshTimeoutId.current);
 			}
-
 			try {
 				const decodedToken = jwtDecode<DecodedToken>(token);
@@ -86,14 +88,7 @@
 				const refreshOffset = 15 * 1000;
 				const timeoutDuration = expirationTime - currentTime - refreshOffset;
-
 				if (timeoutDuration > 0) {
 					proactiveRefreshTimeoutId.current = window.setTimeout(async () => {
-						if (isRefreshing) {
-							console.log(
-								"Proactive refresh aborted, another refresh is in progress."
-							);
-							return;
-						}
-
+						if (isRefreshing) return;
 						const currentRefreshToken = localStorage.getItem("refresh");
 						if (currentRefreshToken) {
@@ -103,16 +98,13 @@
 									access: string;
 									refresh?: string;
-								}>("/auth/refresh/", {
-									refresh: currentRefreshToken,
-								});
+								}>("/auth/refresh/", { refresh: currentRefreshToken });
 								localStorage.setItem("access", res.data.access);
 								setAccessToken(res.data.access);
 								if (res.data.refresh) {
 									localStorage.setItem("refresh", res.data.refresh);
-									setRefreshToken(res.data.refresh);
 								}
 								scheduleProactiveRefresh(res.data.access);
 							} catch (err) {
-								console.error("Proactive refresh failed", err);
+								console.error("Proactive token refresh failed:", err);
 								logout();
 							} finally {
@@ -138,25 +130,23 @@
 				return config;
 			},
-			(error) => Promise.reject(error)
+			(error: AxiosError) => Promise.reject(error)
 		);
-
 		const responseIntercept = axiosInstance.interceptors.response.use(
 			(response) => response,
 			async (error) => {
-				const originalRequest = error.config;
+				const originalRequest = error.config as CustomAxiosRequestConfig;
 				if (error.response?.status === 401 && !originalRequest._retry) {
 					originalRequest._retry = true;
-
 					if (isRefreshing) {
 						return new Promise((resolve, reject) => {
 							failedQueue.push({ resolve, reject });
 						}).then((token) => {
-							originalRequest.headers["Authorization"] = "Bearer " + token;
+							if (originalRequest.headers) {
+								originalRequest.headers["Authorization"] = "Bearer " + token;
+							}
 							return axiosInstance(originalRequest);
 						});
 					}
-
 					isRefreshing = true;
-
 					const currentRefreshToken = localStorage.getItem("refresh");
 					if (!currentRefreshToken) {
@@ -165,12 +155,9 @@
 						return Promise.reject(error);
 					}
-
 					try {
 						const response = await axiosInstance.post<{
 							access: string;
 							refresh?: string;
-						}>("/auth/refresh/", {
-							refresh: currentRefreshToken,
-						});
+						}>("/auth/refresh/", { refresh: currentRefreshToken });
 						const newAccessToken = response.data.access;
 						localStorage.setItem("access", newAccessToken);
@@ -178,10 +165,11 @@
 						if (response.data.refresh) {
 							localStorage.setItem("refresh", response.data.refresh);
-							setRefreshToken(response.data.refresh);
 						}
 						scheduleProactiveRefresh(newAccessToken);
-						originalRequest.headers[
-							"Authorization"
-						] = `Bearer ${newAccessToken}`;
+						if (originalRequest.headers) {
+							originalRequest.headers[
+								"Authorization"
+							] = `Bearer ${newAccessToken}`;
+						}
 						processQueue(null, newAccessToken);
 						return axiosInstance(originalRequest);
@@ -198,5 +186,4 @@
 			}
 		);
-
 		return () => {
 			axiosInstance.interceptors.request.eject(requestIntercept);
@@ -212,5 +199,5 @@
 			setUser(response.data);
 		} catch (error) {
-			console.error("Could not fetch user data on load", error);
+			console.error("Could not fetch user data", error);
 		}
 	}, []);
@@ -224,5 +211,5 @@
 		} catch (error) {
 			console.error("Could not fetch user form data", error);
-			if ((error as any).response?.status !== 401) {
+			if (isAxiosError(error) && error.response?.status !== 401) {
 				toast.error("Could not load form data.");
 			}
@@ -235,25 +222,28 @@
 			localStorage.setItem("refresh", newRefreshToken);
 			setAccessToken(newAccessToken);
-			setRefreshToken(newRefreshToken);
 			setUser(userData);
 			scheduleProactiveRefresh(newAccessToken);
 			await fetchFormData(newAccessToken);
+			setSessionInitialized(true);
 		},
 		[fetchFormData, scheduleProactiveRefresh]
 	);
 
+	const initializeUser = useCallback(async () => {
+		const token = localStorage.getItem("access");
+		if (token) {
+			scheduleProactiveRefresh(token);
+			await Promise.all([fetchUser(token), fetchFormData(token)]);
+		}
+		setSessionInitialized(true);
+	}, [fetchUser, fetchFormData, scheduleProactiveRefresh]);
+
 	useEffect(() => {
-		const initializeAuth = async () => {
-			const token = localStorage.getItem("access");
-			if (token) {
-				setAccessToken(token);
-				setRefreshToken(localStorage.getItem("refresh"));
-				scheduleProactiveRefresh(token);
-				await Promise.all([fetchUser(token), fetchFormData(token)]);
-			}
-			setLoading(false);
-		};
-		initializeAuth();
-	}, [fetchUser, fetchFormData, scheduleProactiveRefresh]);
+		const token = localStorage.getItem("access");
+		if (token) {
+			setAccessToken(token);
+		}
+		setLoading(false);
+	}, []);
 
 	const contextValue: AuthContextType = {
@@ -264,12 +254,12 @@
 		login,
 		logout,
-		isAuthenticated: !!accessToken && !loading,
+		isAuthenticated: !!accessToken,
 		loading,
+		sessionInitialized,
+		initializeUser,
 	};
 
 	return (
-		<AuthContext.Provider value={contextValue}>
-			{!loading && children}
-		</AuthContext.Provider>
+		<AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
 	);
 };
Index: frontend/src/hooks/useAuth.ts
===================================================================
--- frontend/src/hooks/useAuth.ts	(revision ea25fae4cae40e08d4102a7196ef60bd226f3c4f)
+++ frontend/src/hooks/useAuth.ts	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -3,8 +3,8 @@
 
 export const useAuth = (): AuthContextType => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
+	const context = useContext(AuthContext);
+	if (context === undefined) {
+		throw new Error("useAuth must be used within an AuthProvider");
+	}
+	return context;
 };
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision ea25fae4cae40e08d4102a7196ef60bd226f3c4f)
+++ frontend/src/pages/Register.tsx	(revision 9d4d22253b58f4c83850b8e11e05c5699e960b83)
@@ -5,4 +5,5 @@
 import PasswordInput from "../components/PasswordInput";
 import { useAuth } from "../hooks/useAuth";
+import { User } from "../context/AuthContext";
 
 interface RegisterForm {
@@ -49,4 +50,5 @@
 				access: string;
 				refresh: string;
+				user: User;
 			}>("http://localhost:8000/auth/register/", {
 				email: formData.email,
@@ -55,6 +57,7 @@
 				full_name: formData.fullName,
 			});
-			const { access, refresh } = response.data;
-			login(access, refresh);
+			console.log(response.data);
+			const { access, refresh, user } = response.data;
+			login(access, refresh, user);
 			toast.success("Успешна регистрација!");
 			navigate("/account");