diff --git a/frontend/src/components/ProjectCard/index.tsx b/frontend/src/components/ProjectCard/index.tsx
index b8b6325..f05f38a 100644
--- a/frontend/src/components/ProjectCard/index.tsx
+++ b/frontend/src/components/ProjectCard/index.tsx
@@ -1,16 +1,17 @@
 import { Compass } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 interface ProjectCardProps {
   title: string;
   description: string;
+  to?: string;
   imageUrl?: string;
-  onClick?: () => void;
 }
 
-export default function ProjectCard({ title, description, imageUrl, onClick }: ProjectCardProps): JSX.Element {
+export default function ProjectCard({ title, description, imageUrl = '', to = '' }: ProjectCardProps): JSX.Element {
   return (
-    <div
-      onClick={onClick}
+    <Link
+      to={to}
       className="relative flex w-[327px] cursor-pointer items-start gap-4 overflow-hidden rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50"
     >
       <div className="flex h-24 w-24 items-center justify-center rounded-lg bg-gray-100">
@@ -28,6 +29,6 @@ export default function ProjectCard({ title, description, imageUrl, onClick }: P
         <div className="font-sans text-lg leading-tight text-black dark:text-white">{title}</div>
         <div className="text-sm leading-tight text-gray-500 dark:text-gray-400">{description}</div>
       </div>
-    </div>
+    </Link>
   );
 }
diff --git a/frontend/src/components/WorkspaceSidebar/index.tsx b/frontend/src/components/WorkspaceSidebar/index.tsx
index 5445aa5..57431b4 100644
--- a/frontend/src/components/WorkspaceSidebar/index.tsx
+++ b/frontend/src/components/WorkspaceSidebar/index.tsx
@@ -17,7 +17,7 @@ export default function WorkspaceSidebar({ workspaceName, projects }: { workspac
   // const [selectedProjectId, setSelectedProjectId] = useState<string | undefined>();
   const handleSelectProject = (projectId: string) => {
     // setSelectedProjectId(projectId);
-    navigate(`${webPath.workspace()}/${workspaceId}/project/${projectId}`);
+    navigate(`${webPath.workspace()}/${workspaceId}/${projectId}`);
   };
 
   return (
diff --git a/frontend/src/pages/WorkspaceBrowseDetail.tsx b/frontend/src/pages/WorkspaceBrowseDetail.tsx
index cbe75f6..328a44b 100644
--- a/frontend/src/pages/WorkspaceBrowseDetail.tsx
+++ b/frontend/src/pages/WorkspaceBrowseDetail.tsx
@@ -113,10 +113,8 @@ function ProjectList({
         <ProjectCard
           key={project.id}
           title={project.title}
+          to={`${webPath.workspace()}/${workspaceId}/${project.id}`}
           description={project.projectType}
-          onClick={() => {
-            navigate(`${webPath.workspace()}/${workspaceId}/project/${project.id}`);
-          }}
         />
       ))}
     </div>
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index 06a5231..7b33116 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -67,7 +67,7 @@ const router = createBrowserRouter([
         element: <LabelCanvas />,
       },
       {
-        path: 'project/:projectId',
+        path: ':projectId',
         element: <LabelCanvas />,
       },
     ],