Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
+++ frontend/src/App.tsx	(revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4)
@@ -8,59 +8,64 @@
 import Register from "./pages/Register";
 import UserDetailView from "./pages/UserDetailView";
+import MusicalCollection from "./pages/MusicalCollection";
 
 const Layout = () => {
-	return (
-		<div className="flex flex-col min-h-screen">
-			<Nav />
-			<ToastContainer
-				position="top-right"
-				autoClose={2000}
-				hideProgressBar={false}
-				newestOnTop={false}
-				closeOnClick
-				rtl={false}
-				pauseOnFocusLoss
-				draggable
-				pauseOnHover
-				theme="light"
-			/>
-			<main className="grow">
-				<Outlet />
-			</main>
-		</div>
-	);
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Nav />
+      <ToastContainer
+        position="top-right"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+      />
+      <main className="grow">
+        <Outlet />
+      </main>
+    </div>
+  );
 };
 
 const router = createBrowserRouter([
-	{
-		path: "",
-		element: <Layout />,
-		children: [
-			{
-				path: "/",
-				element: <LandingPage />,
-			},
-			{
-				path: "/login",
-				element: <Login />,
-			},
-			{
-				path: "/users",
-				element: <AllUsers />,
-			},
-			{
-				path: "/users/:userId",
-				element: <UserDetailView />,
-			},
-			{
-				path: "/register",
-				element: <Register />,
-			},
-		],
-	},
+  {
+    path: "",
+    element: <Layout />,
+    children: [
+      {
+        path: "/",
+        element: <LandingPage />,
+      },
+      {
+        path: "/login",
+        element: <Login />,
+      },
+      {
+        path: "/users",
+        element: <AllUsers />,
+      },
+      {
+        path: "/users/:userId",
+        element: <UserDetailView />,
+      },
+      {
+        path: "/register",
+        element: <Register />,
+      },
+      {
+        path: "/collection/:type/:id",
+        element: <MusicalCollection />,
+      },
+    ],
+  },
 ]);
 
 function App() {
-	return <RouterProvider router={router} />;
+  return <RouterProvider router={router} />;
 }