diff --git a/src/platform/assets/components/ActiveMediaAssetCard.test.ts b/src/platform/assets/components/ActiveMediaAssetCard.test.ts
index c653ae0be..c00d319ed 100644
--- a/src/platform/assets/components/ActiveMediaAssetCard.test.ts
+++ b/src/platform/assets/components/ActiveMediaAssetCard.test.ts
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { computed } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -6,6 +7,18 @@ import ActiveJobCard from './ActiveMediaAssetCard.vue'
 
 import type { JobListItem } from '@/composables/queue/useJobList'
 
+vi.mock('@/composables/queue/useJobActions', () => ({
+  useJobActions: () => ({
+    cancelAction: {
+      icon: 'icon-[lucide--x]',
+      label: 'Cancel',
+      variant: 'destructive'
+    },
+    canCancelJob: computed(() => false),
+    runCancelJob: vi.fn()
+  })
+}))
+
 vi.mock('@/composables/useProgressBarBackground', () => ({
   useProgressBarBackground: () => ({
     progressBarPrimaryClass: 'bg-blue-500',
diff --git a/src/platform/assets/components/ActiveMediaAssetCard.vue b/src/platform/assets/components/ActiveMediaAssetCard.vue
index 8121d9bc3..8d68b41ff 100644
--- a/src/platform/assets/components/ActiveMediaAssetCard.vue
+++ b/src/platform/assets/components/ActiveMediaAssetCard.vue
@@ -1,8 +1,13 @@
 <template>
   <div
     role="status"
+    tabindex="0"
     :aria-label="t('sideToolbar.activeJobStatus', { status: statusText })"
     class="flex flex-col gap-2 p-2 rounded-lg"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+    @focusin="hovered = true"
+    @focusout="hovered = false"
   >
     <!-- Thumbnail -->
     <div class="relative aspect-square overflow-hidden rounded-lg">
@@ -34,6 +39,17 @@
           class="icon-[lucide--loader-circle] size-8 animate-spin text-muted-foreground"
         />
       </div>
+      <!-- Cancel button overlay -->
+      <Button
+        v-if="hovered && canCancelJob"
+        variant="destructive"
+        size="icon"
+        :aria-label="cancelAction.label"
+        class="absolute top-2 right-2"
+        @click.stop="runCancelJob()"
+      >
+        <i :class="cancelAction.icon" />
+      </Button>
     </div>
 
     <!-- Footer: Progress bar or status text -->
@@ -61,15 +77,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
+import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
 
 const { job } = defineProps<{ job: JobListItem }>()
 
 const { t } = useI18n()
+const hovered = ref(false)
+
+const { cancelAction, canCancelJob, runCancelJob } = useJobActions(() => job)
 
 const { progressBarPrimaryClass, hasProgressPercent, progressPercentStyle } =
   useProgressBarBackground()
diff --git a/src/platform/assets/composables/useMediaAssetActions.test.ts b/src/platform/assets/composables/useMediaAssetActions.test.ts
index ef7ccf8ee..6c8f680a0 100644
--- a/src/platform/assets/composables/useMediaAssetActions.test.ts
+++ b/src/platform/assets/composables/useMediaAssetActions.test.ts
@@ -112,6 +112,7 @@ function createMockAsset(overrides: Partial<AssetItem> = {}): AssetItem {
 
 describe('useMediaAssetActions', () => {
   beforeEach(() => {
+    vi.resetModules()
     setActivePinia(createPinia())
     vi.clearAllMocks()
     capturedFilenames.values = []