diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
index 83e2af9..770891b 100644
--- a/packages/frontend/src/app.tsx
+++ b/packages/frontend/src/app.tsx
@@ -1,4 +1,4 @@
-import { Home } from "@/routes/Home";
+import { Home, Pieces } from "@/routes/Pieces";
 import { Login } from "@/routes/Login";
 import { Piece } from "@/routes/Piece";
 import { Repertoire } from "@/routes/Repertoire";
@@ -22,15 +22,24 @@ const router = createBrowserRouter([
 				Component: Home,
 			},
 			{
-				path: "piece/:pieceId",
+				path: "piece",
 				children: [
 					{
 						index: true,
-						Component: Piece,
+						Component: Pieces,
 					},
 					{
-						path: "attachment/:attachmentId",
-						Component: Attachment,
+						path: ":pieceId",
+						children: [
+							{
+								index: true,
+								Component: Piece,
+							},
+							{
+								path: "attachment/:attachmentId",
+								Component: Attachment,
+							},
+						],
 					},
 				],
 			},
diff --git a/packages/frontend/src/routes/Home.tsx b/packages/frontend/src/routes/Pieces.tsx
similarity index 99%
rename from packages/frontend/src/routes/Home.tsx
rename to packages/frontend/src/routes/Pieces.tsx
index aca373d..cc552c2 100644
--- a/packages/frontend/src/routes/Home.tsx
+++ b/packages/frontend/src/routes/Pieces.tsx
@@ -12,7 +12,7 @@ import { Loader2, Plus } from "lucide-react";
 import { FormEventHandler, ReactNode, useId, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
-export function Home() {
+export function Pieces() {
 
 	const [name, setName] = useState("");
 	const [author, setAuthor] = useState("");