diff --git a/apps/web/src/app/tool/[slug]/page.tsx b/apps/web/src/app/tool/[...slug]/page.tsx
similarity index 98%
rename from apps/web/src/app/tool/[slug]/page.tsx
rename to apps/web/src/app/tool/[...slug]/page.tsx
index 9a8a9f2..4bf5528 100644
--- a/apps/web/src/app/tool/[slug]/page.tsx
+++ b/apps/web/src/app/tool/[...slug]/page.tsx
@@ -71,7 +71,7 @@ interface Tool {
 export default function ToolDetailPage({
   params,
 }: {
-  params: Promise<{ slug: string }>;
+  params: Promise<{ slug: string[] }>;
 }): React.ReactElement {
   const [tool, setTool] = useState<Tool | null>(null);
   const [loading, setLoading] = useState(true);
@@ -79,7 +79,8 @@ export default function ToolDetailPage({
   const [slug, setSlug] = useState<string>('');
 
   useEffect(() => {
-    params.then((p) => setSlug(p.slug));
+    // Join slug array to reconstruct package name (e.g., ['@tpmjs', 'text-transformer'] -> '@tpmjs/text-transformer')
+    params.then((p) => setSlug(p.slug.join('/')));
   }, [params]);
 
   useEffect(() => {
diff --git a/apps/web/src/app/tool/tool-search/page.tsx b/apps/web/src/app/tool/tool-search/page.tsx
index c9f9234..f54c41b 100644
--- a/apps/web/src/app/tool/tool-search/page.tsx
+++ b/apps/web/src/app/tool/tool-search/page.tsx
@@ -327,7 +327,7 @@ export default function ToolSearchPage(): React.ReactElement {
                   </CardContent>
 
                   <CardFooter>
-                    <Link href={`/tool/${encodeURIComponent(tool.npmPackageName)}`}>
+                    <Link href={`/tool/${tool.npmPackageName}`}>
                       <Button variant="outline" size="sm" className="w-full">
                         View Details
                       </Button>