diff --git a/app/src/components/ProgramCard.tsx b/app/src/components/ProgramCard.tsx
index edf8f15..4d0cc10 100644
--- a/app/src/components/ProgramCard.tsx
+++ b/app/src/components/ProgramCard.tsx
@@ -5,9 +5,13 @@ import { StackBadge } from "./StackBadge"
 
 interface ProgramCardProps {
   program: ProgramSummary
+  // Where the card links. Defaults to the program page; the Tools page passes
+  // "/tools" so a tool card opens its tool detail page (a tool is 1:1 with its
+  // program, same name).
+  linkBase?: string
 }
 
-export function ProgramCard({ program }: ProgramCardProps) {
+export function ProgramCard({ program, linkBase = "/programs" }: ProgramCardProps) {
   // The dot reflects the uniform lifecycle state (a tool on PATH, a service
   // running, a static site served). Lifecycle controls live on the detail page's
   // Deployment section, not here — a card just shows state and links through.
@@ -26,7 +30,7 @@ export function ProgramCard({ program }: ProgramCardProps) {
           title={program.active === true ? "active" : program.active === false ? "inactive" : "no deployment"}
         />
         <Link
-          to={`/programs/${program.id}`}
+          to={`${linkBase}/${program.id}`}
           className="text-base font-semibold hover:text-[var(--primary)] transition-colors after:absolute after:inset-0"
         >
           {program.id}
diff --git a/app/src/components/ProgramList.tsx b/app/src/components/ProgramList.tsx
index 3198d98..2b2a9ec 100644
--- a/app/src/components/ProgramList.tsx
+++ b/app/src/components/ProgramList.tsx
@@ -4,9 +4,10 @@ import { ProgramCard } from "./ProgramCard"
 
 interface ProgramListProps {
   programs: ProgramSummary[]
+  linkBase?: string // where each card links (default "/programs")
 }
 
-export function ProgramList({ programs }: ProgramListProps) {
+export function ProgramList({ programs, linkBase }: ProgramListProps) {
   const [search, setSearch] = useState("")
 
   const filtered = useMemo(() => {
@@ -38,7 +39,7 @@ export function ProgramList({ programs }: ProgramListProps) {
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {filtered.map((program) => (
-            <ProgramCard key={program.id} program={program} />
+            <ProgramCard key={program.id} program={program} linkBase={linkBase} />
           ))}
         </div>
       )}
diff --git a/app/src/pages/Tools.tsx b/app/src/pages/Tools.tsx
index 171238e..bcded37 100644
--- a/app/src/pages/Tools.tsx
+++ b/app/src/pages/Tools.tsx
@@ -14,7 +14,7 @@ export function Tools() {
       {isLoading ? (
         <p className="text-[var(--muted)]">Loading...</p>
       ) : programs && programs.length > 0 ? (
-        <ProgramList programs={programs} />
+        <ProgramList programs={programs} linkBase="/tools" />
       ) : (
         <p className="text-[var(--muted)]">No tools yet.</p>
       )}