Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/App.tsx	(revision ca2788c962316d803637647aa8b89a14325d48a4)
@@ -13,37 +13,44 @@
 
 const Layout = () => (
-	<div className="flex flex-col min-h-screen">
-		<Navbar />
-		<main className="flex-grow">
-			<Outlet />
-		</main>
-		<Footer />
-	</div>
+  <div className="flex flex-col min-h-screen">
+    <Navbar />
+    <main className="flex-grow">
+      <Outlet />
+    </main>
+    <Footer />
+  </div>
 );
 const router = createBrowserRouter([
-	{
-		path: "/",
-		element: <Layout />,
-		children: [
-			{ path: "", element: <Home /> },
-			{ path: "subjects", element: <CourseCatalog /> },
-			{ path: "login", element: <Login /> },
-			{ path: "register", element: <Register /> },
-			{ path: "recommendations", element: <Recommendations /> },
-			{
-				path: "account",
-				element: (
-					<PrivateRoute>
-						<Account />
-					</PrivateRoute>
-				),
-			},
-		],
-	},
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      { path: "", element: <Home /> },
+      { path: "subjects", element: <CourseCatalog /> },
+      { path: "login", element: <Login /> },
+      { path: "register", element: <Register /> },
+      {
+        path: "recommendations",
+        element: (
+          <PrivateRoute>
+            <Recommendations />
+          </PrivateRoute>
+        ),
+      },
+      {
+        path: "account",
+        element: (
+          <PrivateRoute>
+            <Account />
+          </PrivateRoute>
+        ),
+      },
+    ],
+  },
 ]);
 
 function App() {
-	useAxiosAuth();
-	return <RouterProvider router={router} />;
+  useAxiosAuth();
+  return <RouterProvider router={router} />;
 }
 
Index: frontend/src/context/AuthProvider.tsx
===================================================================
--- frontend/src/context/AuthProvider.tsx	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/context/AuthProvider.tsx	(revision ca2788c962316d803637647aa8b89a14325d48a4)
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, ReactNode } from "react";
+import React, { useState, ReactNode } from "react";
 import AuthContext, { AuthContextType } from "./AuthContext";
-import axios from "axios";
+import axiosInstance from "../api/axiosInstance";
 
 export const AuthProvider: React.FC<{ children: ReactNode }> = ({
@@ -12,11 +12,13 @@
     localStorage.getItem("refresh_token")
   );
+
   const refreshAccessToken = async (): Promise<string | null> => {
-    const refreshToken = localStorage.getItem("refresh_token")
+    const refreshToken = localStorage.getItem("refresh_token");
     if (!refreshToken) {
+      logout();
       return null;
     }
     try {
-      const response = await axios.post<{ access: string; refresh?: string }>(
+      const response = await axiosInstance.post<{ access: string; refresh?: string }>(
         "http://localhost:8000/auth/refresh/",
         { refresh: refreshToken }
@@ -26,4 +28,5 @@
       localStorage.setItem("access_token", newAccessToken);
       setAccessToken(newAccessToken);
+
       if (response.data.refresh) {
         const newRefreshToken = response.data.refresh;
@@ -34,23 +37,10 @@
       return newAccessToken;
     } catch (error) {
-      console.error("Error refrershing access token:", error);
-      return null;
+      console.error("Error refreshing access token:", error);
+      return Promise.reject(error); // Propagate the error
     }
   };
-  useEffect(() => {
-    const storedAccessToken = localStorage.getItem("access_token");
-    const storedRefreshToken = localStorage.getItem("refresh_token");
 
-    if (storedAccessToken !== accessToken) {
-      setAccessToken(storedAccessToken);
-    }
-
-    if (storedRefreshToken !== refreshToken) {
-      setRefreshToken(storedRefreshToken);
-    }
-  }, [accessToken, refreshToken]);
   const login = (newAccessToken: string, newRefreshToken: string) => {
-    console.log("Logging in with access token:", newAccessToken);
-    console.log("Refresh token:", newRefreshToken);
     localStorage.setItem("access_token", newAccessToken);
     localStorage.setItem("refresh_token", newRefreshToken);
@@ -76,4 +66,5 @@
     refreshAccessToken,
   };
+
   return (
     <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
Index: frontend/src/hooks/useAxiosAuth.ts
===================================================================
--- frontend/src/hooks/useAxiosAuth.ts	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/hooks/useAxiosAuth.ts	(revision ca2788c962316d803637647aa8b89a14325d48a4)
@@ -1,3 +1,3 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useAuth } from "../hooks/useAuth";
 import axiosInstance from "../api/axiosInstance";
@@ -5,39 +5,59 @@
 const useAxiosAuth = () => {
   const { accessToken, refreshAccessToken, logout } = useAuth();
+  const accessTokenRef = useRef(accessToken);
+
+  useEffect(() => {
+    accessTokenRef.current = accessToken;
+  }, [accessToken]);
 
   useEffect(() => {
     const requestInterceptor = axiosInstance.interceptors.request.use(
       (config) => {
-        if (accessToken) {
-          config.headers.Authorization = `Bearer ${accessToken}`;
+        if (accessTokenRef.current) {
+          config.headers.Authorization = `Bearer ${accessTokenRef.current}`;
         }
         return config;
       },
-      (error) => Promise.reject(error)
+      (error) => {
+        return Promise.reject(error);
+      }
     );
+
     const responseInterceptor = axiosInstance.interceptors.response.use(
       (response) => response,
       async (error) => {
         const originalRequest = error.config;
+
         if (error.response?.status === 401 && !originalRequest._retry) {
           originalRequest._retry = true;
-          const newToken = await refreshAccessToken();
-          localStorage.setItem("access_token", newToken || "");
-          if (newToken) {
-            axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
-            originalRequest.headers["Authorization"] = `Bearer ${newToken}`;
-            return axiosInstance(originalRequest);
-          } else {
+
+          try {
+            const newAccessToken = await refreshAccessToken();
+
+            if (newAccessToken) {
+              // The request interceptor will handle adding the new header
+              return axiosInstance(originalRequest);
+            } else {
+              logout();
+              return Promise.reject(new Error("Token refresh failed."));
+            }
+          } catch (_error) {
             logout();
+            return Promise.reject(_error);
           }
         }
+
         return Promise.reject(error);
       }
     );
+
     return () => {
       axiosInstance.interceptors.request.eject(requestInterceptor);
       axiosInstance.interceptors.response.eject(responseInterceptor);
     };
-  }, [accessToken, refreshAccessToken, logout]);
+  }, [refreshAccessToken, logout]);
+
+  return axiosInstance;
 };
+
 export default useAxiosAuth;
Index: frontend/src/pages/Account.tsx
===================================================================
--- frontend/src/pages/Account.tsx	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/pages/Account.tsx	(revision ca2788c962316d803637647aa8b89a14325d48a4)
@@ -1,63 +1,49 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import axiosInstance from "../api/axiosInstance";
 import StudentForm from "../components/StudentForm/StudentForm";
 import { StudentData } from "../components/types";
-import { useAuth } from "../hooks/useAuth";
+import useAxiosAuth from "../hooks/useAxiosAuth";
 
 const Account = () => {
-	const navigate = useNavigate();
-	const { accessToken, refreshAccessToken } = useAuth();
-	const [tokenChecked, setTokenChecked] = useState(false);
-	const [formData, setFormData] = useState<StudentData | null>(null);
-	const [isLoading, setIsLoading] = useState(true);
+    const axiosAuth = useAxiosAuth();
+    const navigate = useNavigate();
 
-	useEffect(() => {
-		const checkToken = async () => {
-			let accessToken = localStorage.getItem("access_token");
+    const [formData, setFormData] = useState<StudentData | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
 
-			if (!accessToken) {
-				accessToken = await refreshAccessToken();
-				if (accessToken) {
-					localStorage.setItem("access_token", accessToken);
-				} else {
-					navigate("/login");
-					return;
-				}
-			}
-			setTokenChecked(true);
-		};
-		checkToken();
-	}, [refreshAccessToken, navigate]);
+    useEffect(() => {
+        // This function will run once when the component mounts
+        const fetchData = async () => {
+            try {
+                // Simply ask for the data.
+                // If the token is expired/missing, the interceptor will
+                // automatically refresh it and retry this request.
+                // This 'await' will just pause until the whole process is complete.
+                const resForm = await axiosAuth.get("/auth/form/");
+                setFormData(resForm.data);
+            } catch (error) {
+                // This catch block will only be triggered if the token refresh
+                // fails and the interceptor gives up. In that case, we should
+                // probably navigate the user away.
+                console.error("Could not fetch form data after retries.", error);
+                navigate("/login");
+            } finally {
+                // This will run whether the request succeeded or failed.
+                setIsLoading(false);
+            }
+        };
 
-	useEffect(() => {
-		const fetchData = async () => {
-			if (!accessToken) {
-				return;
-			}
-			try {
-				const resForm = await axiosInstance.get("/auth/form/");
-				setFormData(resForm.data);
-				// waiting for data to render
-				setTimeout(() => setIsLoading(false), 5);
-			} catch (error) {
-				console.error("Error fetching data.", error);
-				setIsLoading(false);
-			}
-		};
-		if (tokenChecked) {
-			fetchData();
-		}
-	}, [tokenChecked, accessToken]);
+        fetchData();
+    }, [axiosAuth, navigate]); 
 
-	return (
-		<div className="p-4">
-			<StudentForm
-				formData={formData}
-				isLoading={isLoading}
-				setIsLoading={setIsLoading}
-			/>
-		</div>
-	);
+    return (
+        <div className="p-4">
+            <StudentForm
+                formData={formData}
+                isLoading={isLoading}
+                setIsLoading={setIsLoading}
+            />
+        </div>
+    );
 };