Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 76c6604637c629d5ff97cbf5dfaa33c30f6432e0)
+++ frontend/src/App.tsx	(revision 4978c89ce8b5ac48ab5f807daf3f5573bc41c4e6)
@@ -1,3 +1,5 @@
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
@@ -12,65 +14,63 @@
 import Register from "./pages/Register";
 import SubjectView from "./pages/SubjectView";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 
 const Layout = () => (
-  <div className="flex flex-col min-h-screen">
-    <Navbar />
-    <ToastContainer
-      className="custom-toast-container"
-      position="top-right"
-      autoClose={2000}
-      hideProgressBar={false}
-      newestOnTop={false}
-      closeOnClick
-      rtl={false}
-      pauseOnFocusLoss
-      draggable
-      pauseOnHover
-      theme="light"
-    />
-    <main className="flex-grow">
-      <Outlet />
-    </main>
-    <Footer />
-  </div>
+	<div className="flex flex-col min-h-screen">
+		<Navbar />
+		<ToastContainer
+			className="custom-toast-container"
+			position="top-right"
+			autoClose={2000}
+			hideProgressBar={false}
+			newestOnTop={false}
+			closeOnClick
+			rtl={false}
+			pauseOnFocusLoss
+			draggable
+			pauseOnHover
+			theme="light"
+		/>
+		<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: (
-          <PrivateRoute>
-            <Recommendations />
-          </PrivateRoute>
-        ),
-      },
-      {
-        path: "account",
-        element: (
-          <PrivateRoute>
-            <Account />
-          </PrivateRoute>
-        ),
-      },
-      {
-        path: "subjects/:id",
-        element: <SubjectView />,
-      },
-    ],
-  },
+	{
+		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>
+				),
+			},
+			{
+				path: "subjects/:code",
+				element: <SubjectView />,
+			},
+		],
+	},
 ]);
 
 function App() {
-  useAxiosAuth();
-  return <RouterProvider router={router} />;
+	useAxiosAuth();
+	return <RouterProvider router={router} />;
 }