diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cf1bdb3..7361a92 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -264,11 +264,15 @@
 						href="/jobs/{job.id}"
 						class="recent-item"
 						class:first={i === 0}
+						class:recent-failed={job.status === 'failed'}
 					>
 						<SourceIcon kind={jobKind(job)} size={36} accent={ACCENT} />
 						<div class="recent-text">
 							<div class="recent-title">{job.title || job.source}</div>
 							<div class="recent-meta mono">{jobMeta(job)}</div>
+							{#if job.status === 'failed' && job.error}
+								<div class="recent-err-line" title={job.error}>{job.error}</div>
+							{/if}
 						</div>
 						{#if job.status !== 'done' && job.status !== 'failed' && job.status !== 'cancelled'}
 							<div class="recent-progress mono" style="color: {ACCENT}">
@@ -560,6 +564,21 @@
 		text-align: right;
 	}
 
+	.recent-item.recent-failed .recent-meta {
+		color: var(--error-text);
+	}
+
+	.recent-err-line {
+		font-size: 11.5px;
+		color: var(--error-text);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-top: 3px;
+		font-family: var(--font-mono);
+		max-width: 100%;
+	}
+
 	/* ── Utilities ─────────────────────────────────────────── */
 	.sr-only {
 		position: absolute;
diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte
index a068d58..a384b2f 100644
--- a/src/routes/jobs/+page.svelte
+++ b/src/routes/jobs/+page.svelte
@@ -82,7 +82,7 @@
 	{:else}
 		<div class="job-list">
 			{#each jobs as job}
-				<a href="/jobs/{job.id}" class="glass job-row">
+				<a href="/jobs/{job.id}" class="glass job-row" data-status={['failed', 'cancelled'].includes(job.status) ? 'failed' : ''}>
 					<SourceIcon kind={jobKind(job)} size={36} accent={ACCENT} />
 
 					<div class="job-info">
@@ -99,6 +99,10 @@
 								<span>·</span>
 								<span>{job.audioMode}</span>
 							{/if}
+							{#if ['failed', 'cancelled'].includes(job.status) && job.error}
+								<span>·</span>
+								<span class="job-err-inline" title={job.error}>{job.error}</span>
+							{/if}
 						</div>
 					</div>
 
@@ -122,16 +126,20 @@
 						</div>
 					{/if}
 
-					<!-- Row actions -->
-					<div class="row-actions">
-						{#if ['failed', 'cancelled'].includes(job.status) && job.source?.startsWith('http')}
+					<!-- Retry slot (always visible) -->
+					{#if ['failed', 'cancelled'].includes(job.status)}
+						<div class="row-retry-slot">
 							<button
 								class="row-btn accent"
 								onclick={(e) => retryJob(e, job)}
 								aria-label="Retry"
 								title="Retry"
 							>↺</button>
-						{/if}
+						</div>
+					{/if}
+
+					<!-- Row actions (hover-revealed, delete only) -->
+					<div class="row-actions">
 						{#if isTerminalJobStatus(job.status)}
 							<button
 								class="row-btn danger"
@@ -248,6 +256,25 @@
 		opacity: 1;
 	}
 
+	.row-retry-slot {
+		flex-shrink: 0;
+	}
+
+	.job-err-inline {
+		color: var(--error-text);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 0;
+		max-width: 160px;
+		display: inline-block;
+		vertical-align: bottom;
+	}
+
+	.job-row[data-status="failed"] .job-name {
+		color: var(--error-text);
+	}
+
 	.row-btn {
 		width: 28px;
 		height: 28px;
diff --git a/src/routes/jobs/[id]/+page.svelte b/src/routes/jobs/[id]/+page.svelte
index 25307e2..e9ab5f7 100644
--- a/src/routes/jobs/[id]/+page.svelte
+++ b/src/routes/jobs/[id]/+page.svelte
@@ -135,8 +135,7 @@
 	const isTerminal = $derived(job !== null && isTerminalJobStatus(job.status));
 	const canRetry = $derived(
 		job !== null &&
-		['failed', 'cancelled'].includes(job.status) &&
-		(job.source?.startsWith('http') ?? false)
+		['failed', 'cancelled'].includes(job.status)
 	);
 
 	async function cancelJob() {
@@ -259,7 +258,23 @@
 
 		<!-- ── Error ─────────────────────────────────────────── -->
 		{#if job.error}
-			<div class="error-banner" role="alert">{job.error}</div>
+			<div class="error-banner" role="alert">
+				<div class="eb-icon" aria-hidden="true">
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+						<path d="M12 3L2 21h20L12 3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+						<line x1="12" y1="10" x2="12" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+						<circle cx="12" cy="18" r="0.8" fill="currentColor"/>
+					</svg>
+				</div>
+				<div class="eb-body">
+					<div class="eb-title">Transcription failed</div>
+					<div class="eb-msg">{job.error}</div>
+				</div>
+				<div class="eb-actions">
+					<button class="btn primary" onclick={retryJobAction} aria-label="Retry transcription">↺ Retry transcription</button>
+					<button class="btn ghost danger-ghost" onclick={deleteJob}>Delete</button>
+				</div>
+			</div>
 		{/if}
 
 		<!-- ── Two-column: pipeline + downloads/transcript ───── -->
@@ -391,12 +406,111 @@
 	}
 
 	.error-banner {
-		padding: 12px 16px;
+		display: flex;
+		gap: 14px;
+		align-items: flex-start;
+		padding: 16px 18px;
 		border-radius: 10px;
-		background: rgba(255, 90, 90, 0.08);
-		border: 1px solid rgba(255, 90, 90, 0.2);
-		color: #ff8a8a;
-		font-size: 13px;
+		background: var(--error-bg);
+		border: 1px solid var(--error-border);
+		margin-bottom: 24px;
+	}
+
+	.eb-icon {
+		width: 34px;
+		height: 34px;
+		display: grid;
+		place-items: center;
+		border-radius: 9px;
+		background: rgba(255,90,90,0.12);
+		color: var(--error-text);
+		flex-shrink: 0;
+	}
+
+	.eb-body {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.eb-title {
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--error-text);
+	}
+
+	.eb-msg {
+		font-family: var(--font-mono);
+		font-size: 12px;
+		line-height: 1.6;
+		color: rgba(255,180,180,0.85);
+		margin-top: 5px;
+		overflow-wrap: anywhere;
+		max-height: 96px;
+		overflow-y: auto;
+	}
+
+	.eb-actions {
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.btn {
+		font-family: var(--font-ui);
+		font-size: 12.5px;
+		font-weight: 550;
+		display: inline-flex;
+		align-items: center;
+		gap: 7px;
+		padding: 7px 13px;
+		border-radius: 9px;
+		border: 1px solid var(--border-strong);
+		background: var(--surface-hover);
+		color: var(--text);
+		cursor: pointer;
+		white-space: nowrap;
+		transition: background 140ms ease, border-color 140ms ease;
+	}
+	.btn:hover {
+		background: rgba(255,255,255,0.07);
+		border-color: rgba(255,255,255,0.18);
+	}
+	.btn:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 4px var(--accent-ring);
+		border-color: var(--accent);
+	}
+
+	.btn.primary {
+		background: var(--accent);
+		border-color: var(--accent);
+		color: #10120a;
+		font-weight: 600;
+		padding: 10px 18px;
+		font-size: 13.5px;
+		border-radius: 10px;
+		box-shadow: 0 0 18px rgba(205,242,78,0.18);
+	}
+	.btn.primary:hover {
+		background: #d9f566;
+		border-color: #d9f566;
+	}
+
+	.btn.ghost {
+		background: transparent;
+		border-color: transparent;
+	}
+	.btn.ghost:hover {
+		background: rgba(255,255,255,0.04);
+	}
+
+	.btn.danger-ghost {
+		color: var(--error-text);
+	}
+	.btn.danger-ghost:hover {
+		background: rgba(255,90,90,0.08);
+		border-color: var(--error-border);
 	}
 
 	/* ── Breadcrumb ─────────────────────────────────────────── */