diff --git a/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx b/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
index 2b025b3d..af95e1a8 100644
--- a/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, type ReactNode, type MouseEvent } from 'react';
-import { useParams, useNavigate } from 'react-router';
+import { useParams, Link } from 'react-router';
 import {
   Search,
   CheckCircle2,
@@ -97,7 +97,6 @@ const useJobsData = () => {
 
 type JobRowProps = { job: JobSummary; onAction: (ev: MouseEvent, job: JobSummary) => void };
 const JobRow = ({ job, onAction }: JobRowProps) => {
-  const navigate = useNavigate();
   const { id: activeId } = useParams<{ id: string }>();
   const isRunning = job.status === 'running';
   const target = basename(job.target);
@@ -105,8 +104,8 @@ const JobRow = ({ job, onAction }: JobRowProps) => {
     <div
       className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'}`}
     >
-      <button
-        onClick={() => navigate(`/jobs/${job.id}`)}
+      <Link
+        to={`/jobs/${job.id}`}
         className="flex-1 min-w-0 text-left px-4 py-2.5 flex items-center gap-3 cursor-pointer"
       >
         <StatusIcon status={job.status} />
@@ -122,7 +121,7 @@ const JobRow = ({ job, onAction }: JobRowProps) => {
             {job.error && <span className="text-xs text-red-500 truncate max-w-[160px]">{job.error}</span>}
           </div>
         </div>
-      </button>
+      </Link>
       <button
         onClick={(ev) => onAction(ev, job)}
         title={isRunning ? 'Stop' : 'Delete'}