diff --git a/console/src/api/const.ts b/console/src/api/const.ts
index 2f1ba0a529..94541a1d88 100644
--- a/console/src/api/const.ts
+++ b/console/src/api/const.ts
@@ -14,6 +14,10 @@ export const Privileges = {
     'evaluation.panel.save': true,
     'runtime.image.build': true,
     'task.execute': true,
+    'job.pinOrUnpin': true,
+    'job.cancel': true,
+    'job.pause': true,
+    'job.resume': true,
     // menu
     'project.menu.trash': true,
     // global
@@ -21,7 +25,6 @@ export const Privileges = {
     'job-pause': true,
     'job-resume': true,
     'job-dev': true,
-    'job.pinOrUnpin': true,
 }
 
 export type IPrivileges = typeof Privileges
diff --git a/console/src/i18n/locales.ts b/console/src/i18n/locales.ts
index 7a4b74239a..43342f877d 100644
--- a/console/src/i18n/locales.ts
+++ b/console/src/i18n/locales.ts
@@ -992,6 +992,10 @@ const locales0 = {
         en: 'Cancel',
         zh: '取消',
     },
+    'Cancel.Confirm': {
+        en: 'Are you sure to cancel the job?',
+        zh: '确定要取消该任务吗？',
+    },
     'Confirm': {
         en: 'Confirm',
         zh: '确认',
@@ -1172,6 +1176,10 @@ const locales0 = {
         en: 'Pause',
         zh: '暂停',
     },
+    'Pause.Confirm': {
+        en: 'Are you sure to pause the job?',
+        zh: '确定要暂停该任务吗？',
+    },
     'Resume': {
         en: 'Resume',
         zh: '恢复',
diff --git a/console/src/pages/Job/JobListCard.tsx b/console/src/pages/Job/JobListCard.tsx
index 0b27197212..13b51bec93 100644
--- a/console/src/pages/Job/JobListCard.tsx
+++ b/console/src/pages/Job/JobListCard.tsx
@@ -21,6 +21,11 @@ import { IconTooltip } from '@starwhale/ui/Tooltip'
 import IconFont from '@starwhale/ui/IconFont'
 import { useProjectRole } from '@project/hooks/useProjectRole'
 import { ConfigurationOverride } from '@starwhale/ui/base/helpers/overrides'
+import { ConfirmButton } from '@starwhale/ui'
+
+interface IActionButtonProps {
+    jobId: string
+}
 
 export default function JobListCard() {
     const [t] = useTranslation()
@@ -58,6 +63,42 @@ export default function JobListCard() {
         [canPinOrUnpin, jobsInfo, projectId]
     )
 
+    const CancelButton = ({ jobId }: IActionButtonProps) => (
+        <WithCurrentAuth id='job.cancel'>
+            <ConfirmButton
+                kind='tertiary'
+                onClick={() => handleAction(jobId, JobActionType.CANCEL)}
+                title={t('Cancel.Confirm')}
+            >
+                {t('Cancel')}
+            </ConfirmButton>
+        </WithCurrentAuth>
+    )
+
+    const PauseButton = ({ jobId }: IActionButtonProps) => (
+        <WithCurrentAuth id='job-pause'>
+            <WithCurrentAuth id='job.pause'>
+                <ConfirmButton
+                    kind='tertiary'
+                    onClick={() => handleAction(jobId, JobActionType.PAUSE)}
+                    title={t('Pause.Confirm')}
+                >
+                    {t('Pause')}
+                </ConfirmButton>
+            </WithCurrentAuth>
+        </WithCurrentAuth>
+    )
+
+    const ResumeButton = ({ jobId }: IActionButtonProps) => (
+        <WithCurrentAuth id='job-resume'>
+            <WithCurrentAuth id='job.resume'>
+                <Button kind='tertiary' onClick={() => handleAction(jobId, JobActionType.RESUME)}>
+                    {t('Resume')}
+                </Button>
+            </WithCurrentAuth>
+        </WithCurrentAuth>
+    )
+
     return (
         <Card
             title={t('Jobs')}
@@ -98,59 +139,25 @@ export default function JobListCard() {
                         const actions: Partial<Record<JobStatusType, React.ReactNode>> = {
                             [JobStatusType.CREATED]: (
                                 <>
-                                    <Button kind='tertiary' onClick={() => handleAction(job.id, JobActionType.CANCEL)}>
-                                        {t('Cancel')}
-                                    </Button>
-                                    <WithCurrentAuth id='job-pause'>
-                                        <Button
-                                            kind='tertiary'
-                                            onClick={() => handleAction(job.id, JobActionType.PAUSE)}
-                                        >
-                                            {t('Pause')}
-                                        </Button>
-                                    </WithCurrentAuth>
+                                    <CancelButton jobId={job.id} />
+                                    <PauseButton jobId={job.id} />
                                 </>
                             ),
                             [JobStatusType.RUNNING]: (
                                 <>
-                                    <Button kind='tertiary' onClick={() => handleAction(job.id, JobActionType.CANCEL)}>
-                                        {t('Cancel')}
-                                    </Button>
-                                    <WithCurrentAuth id='job-pause'>
-                                        <Button
-                                            kind='tertiary'
-                                            onClick={() => handleAction(job.id, JobActionType.PAUSE)}
-                                        >
-                                            {t('Pause')}
-                                        </Button>
-                                    </WithCurrentAuth>
+                                    <CancelButton jobId={job.id} />
+                                    <PauseButton jobId={job.id} />
                                 </>
                             ),
                             [JobStatusType.PAUSED]: (
                                 <>
-                                    <Button kind='tertiary' onClick={() => handleAction(job.id, JobActionType.CANCEL)}>
-                                        {t('Cancel')}
-                                    </Button>
-                                    <WithCurrentAuth id='job-resume'>
-                                        <Button
-                                            kind='tertiary'
-                                            onClick={() => handleAction(job.id, JobActionType.RESUME)}
-                                        >
-                                            {t('Resume')}
-                                        </Button>
-                                    </WithCurrentAuth>
+                                    <CancelButton jobId={job.id} />
+                                    <ResumeButton jobId={job.id} />
                                 </>
                             ),
                             [JobStatusType.FAIL]: (
                                 <>
-                                    <WithCurrentAuth id='job-resume'>
-                                        <Button
-                                            kind='tertiary'
-                                            onClick={() => handleAction(job.id, JobActionType.RESUME)}
-                                        >
-                                            {t('Resume')}
-                                        </Button>
-                                    </WithCurrentAuth>
+                                    <ResumeButton jobId={job.id} />
                                 </>
                             ),
                             [JobStatusType.SUCCESS]: (