diff --git a/app/src/App.tsx b/app/src/App.tsx
index f0dc5942..276598e1 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -16,6 +16,10 @@ import NotFound from "./pages/NotFound";
 import { Landing } from "./pages/Landing";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
 import Account from "./pages/Account";
+import { SavingsGoals } from "./pages/SavingsGoals";
+import { WeeklySummaryPage } from "./pages/WeeklySummary";
+import { Accounts } from "./pages/Accounts";
+import { Jobs } from "./pages/Jobs";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -91,6 +95,38 @@ const App = () => (
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="savings-goals"
+              element={
+                <ProtectedRoute>
+                  <SavingsGoals />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="weekly-summary"
+              element={
+                <ProtectedRoute>
+                  <WeeklySummaryPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="accounts"
+              element={
+                <ProtectedRoute>
+                  <Accounts />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="jobs"
+              element={
+                <ProtectedRoute>
+                  <Jobs />
+                </ProtectedRoute>
+              }
+            />
           </Route>
           <Route path="/signin" element={<SignIn />} />
           <Route path="/register" element={<Register />} />
diff --git a/app/src/__tests__/Jobs.integration.test.tsx b/app/src/__tests__/Jobs.integration.test.tsx
new file mode 100644
index 00000000..df6cfa52
--- /dev/null
+++ b/app/src/__tests__/Jobs.integration.test.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Jobs } from '@/pages/Jobs';
+
+jest.mock('@/hooks/use-toast', () => ({
+  useToast: () => ({ toast: jest.fn() }),
+}));
+jest.mock('@/components/ui/button', () => ({
+  Button: ({ children, ...props }: React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button {...props}>{children}</button>
+  ),
+}));
+jest.mock('@/components/ui/badge', () => ({
+  Badge: ({ children, variant }: React.PropsWithChildren & { variant?: string }) => (
+    <span data-variant={variant}>{children}</span>
+  ),
+}));
+jest.mock('@/components/ui/financial-card', () => ({
+  FinancialCard: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+  FinancialCardHeader: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+  FinancialCardTitle: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <h3 className={className}>{children}</h3>
+  ),
+  FinancialCardDescription: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <p className={className}>{children}</p>
+  ),
+  FinancialCardContent: ({ children, className }: React.PropsWithChildren & { className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+}));
+
+describe('Jobs', () => {
+  it('renders the page title', () => {
+    render(<Jobs />);
+    expect(screen.getByText('Job Monitor')).toBeInTheDocument();
+    expect(screen.getByText('Track and manage background job execution.')).toBeInTheDocument();
+  });
+
+  it('renders stats cards', () => {
+    render(<Jobs />);
+    expect(screen.getByText('Total Jobs')).toBeInTheDocument();
+    expect(screen.getByText('Success Rate')).toBeInTheDocument();
+    expect(screen.getByText('Succeeded')).toBeInTheDocument();
+    // "Failed" appears in stats card and filter button
+    expect(screen.getAllByText('Failed').length).toBeGreaterThan(0);
+    // "Running" appears in stats and filter
+    expect(screen.getAllByText('Running').length).toBeGreaterThan(0);
+    expect(screen.getByText('Avg Duration')).toBeInTheDocument();
+  });
+
+  it('renders filter buttons', () => {
+    render(<Jobs />);
+    expect(screen.getByText('All')).toBeInTheDocument();
+    expect(screen.getAllByText('Pending').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Running').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Success').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Failed').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Retrying').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Cancelled').length).toBeGreaterThan(0);
+  });
+
+  it('renders job list', () => {
+    render(<Jobs />);
+    // Should have jobs rendered
+    const jobsHeading = screen.getByText(/Jobs \(/);
+    expect(jobsHeading).toBeInTheDocument();
+  });
+
+  it('renders refresh button', () => {
+    render(<Jobs />);
+    expect(screen.getByText('Refresh')).toBeInTheDocument();
+  });
+
+  it('shows job types in the list', () => {
+    render(<Jobs />);
+    // Jobs are rendered with their type names; just verify the list section exists
+    const jobsHeading = screen.getByText(/Jobs \(/);
+    expect(jobsHeading).toBeInTheDocument();
+  });
+
+  it('renders retry button for failed jobs', () => {
+    render(<Jobs />);
+    // If there are failed jobs, there should be retry buttons
+    const retryButtons = screen.queryAllByText('Retry');
+    // May or may not have failed jobs in mock data, so just check it doesn't crash
+    expect(retryButtons.length).toBeGreaterThanOrEqual(0);
+  });
+});
diff --git a/app/src/__tests__/Navbar.test.tsx b/app/src/__tests__/Navbar.test.tsx
index dd538bd4..bf052e89 100644
--- a/app/src/__tests__/Navbar.test.tsx
+++ b/app/src/__tests__/Navbar.test.tsx
@@ -27,7 +27,9 @@ describe('Navbar auth state', () => {
   it('shows Account/Logout when signed in (token present)', () => {
     localStorage.setItem('fm_token', 'token');
     renderNav();
-    expect(screen.getByRole('link', { name: /account/i })).toBeInTheDocument();
+    // "Account" link in auth section (href=/account) and "Accounts" nav link (href=/accounts) both exist
+    const accountLinks = screen.getAllByRole('link', { name: /account/i });
+    expect(accountLinks.length).toBeGreaterThanOrEqual(1);
     expect(screen.getByRole('button', { name: /logout/i })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: /finmind/i })).toHaveAttribute('href', '/dashboard');
   });
diff --git a/app/src/api/jobs.ts b/app/src/api/jobs.ts
new file mode 100644
index 00000000..21833d62
--- /dev/null
+++ b/app/src/api/jobs.ts
@@ -0,0 +1,71 @@
+import { apiClient } from './client';
+
+export type JobStatus = 'pending' | 'running' | 'success' | 'failed' | 'retrying' | 'cancelled';
+
+export interface BackgroundJob {
+  id: string;
+  type: string;
+  status: JobStatus;
+  payload: Record<string, unknown>;
+  result?: Record<string, unknown>;
+  error?: string;
+  attempts: number;
+  maxAttempts: number;
+  nextRetryAt?: string;
+  createdAt: string;
+  startedAt?: string;
+  completedAt?: string;
+  updatedAt: string;
+}
+
+export interface JobStats {
+  total: number;
+  pending: number;
+  running: number;
+  success: number;
+  failed: number;
+  retrying: number;
+  avgDurationMs: number;
+  successRate: number;
+}
+
+export interface CreateJobRequest {
+  type: string;
+  payload: Record<string, unknown>;
+  maxAttempts?: number;
+}
+
+export const getJobs = async (status?: JobStatus): Promise<BackgroundJob[]> => {
+  const params = status ? { status } : {};
+  const response = await apiClient.get('/jobs', { params });
+  return response.data;
+};
+
+export const getJob = async (id: string): Promise<BackgroundJob> => {
+  const response = await apiClient.get(`/jobs/${id}`);
+  return response.data;
+};
+
+export const createJob = async (data: CreateJobRequest): Promise<BackgroundJob> => {
+  const response = await apiClient.post('/jobs', data);
+  return response.data;
+};
+
+export const cancelJob = async (id: string): Promise<BackgroundJob> => {
+  const response = await apiClient.post(`/jobs/${id}/cancel`);
+  return response.data;
+};
+
+export const retryJob = async (id: string): Promise<BackgroundJob> => {
+  const response = await apiClient.post(`/jobs/${id}/retry`);
+  return response.data;
+};
+
+export const getJobStats = async (): Promise<JobStats> => {
+  const response = await apiClient.get('/jobs/stats');
+  return response.data;
+};
+
+export const deleteJob = async (id: string): Promise<void> => {
+  await apiClient.delete(`/jobs/${id}`);
+};
diff --git a/app/src/components/layout/Navbar.tsx b/app/src/components/layout/Navbar.tsx
index c7593b70..cb99d4fe 100644
--- a/app/src/components/layout/Navbar.tsx
+++ b/app/src/components/layout/Navbar.tsx
@@ -8,8 +8,12 @@ import { logout as logoutApi } from '@/api/auth';
 
 const navigation = [
   { name: 'Dashboard', href: '/dashboard' },
+  { name: 'Accounts', href: '/accounts' },
   { name: 'Budgets', href: '/budgets' },
   { name: 'Bills', href: '/bills' },
+  { name: 'Savings', href: '/savings-goals' },
+  { name: 'Weekly', href: '/weekly-summary' },
+  { name: 'Jobs', href: '/jobs' },
   { name: 'Reminders', href: '/reminders' },
   { name: 'Expenses', href: '/expenses' },
   { name: 'Analytics', href: '/analytics' },
diff --git a/app/src/hooks/useJobQueue.ts b/app/src/hooks/useJobQueue.ts
new file mode 100644
index 00000000..447950b3
--- /dev/null
+++ b/app/src/hooks/useJobQueue.ts
@@ -0,0 +1,168 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+export type JobStatus = 'idle' | 'running' | 'success' | 'failed' | 'retrying';
+
+export interface JobState<T = unknown> {
+  id: string;
+  status: JobStatus;
+  result: T | null;
+  error: string | null;
+  attempts: number;
+  maxAttempts: number;
+  nextRetryIn: number | null; // ms
+}
+
+export interface UseJobQueueOptions {
+  maxAttempts?: number;
+  baseDelay?: number; // ms
+  maxDelay?: number; // ms
+  backoffMultiplier?: number;
+  jitter?: boolean;
+  onStatusChange?: (status: JobStatus, attempt: number) => void;
+  onSuccess?: (result: unknown) => void;
+  onFailure?: (error: string, attempts: number) => void;
+}
+
+const DEFAULT_OPTIONS: Required<UseJobQueueOptions> = {
+  maxAttempts: 3,
+  baseDelay: 1000,
+  maxDelay: 30000,
+  backoffMultiplier: 2,
+  jitter: true,
+  onStatusChange: () => {},
+  onSuccess: () => {},
+  onFailure: () => {},
+};
+
+function calculateDelay(attempt: number, options: Required<UseJobQueueOptions>): number {
+  const exponential = options.baseDelay * Math.pow(options.backoffMultiplier, attempt - 1);
+  const capped = Math.min(exponential, options.maxDelay);
+  if (options.jitter) {
+    return capped * (0.5 + Math.random() * 0.5);
+  }
+  return capped;
+}
+
+export function useJobQueue<T = unknown>(options: UseJobQueueOptions = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const [jobs, setJobs] = useState<Map<string, JobState<T>>>(new Map());
+  const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+  const cancelledRef = useRef<Set<string>>(new Set());
+
+  // Cleanup on unmount
+  useEffect(() => {
+    const timers = timersRef.current;
+    return () => {
+      timers.forEach((timer) => clearTimeout(timer));
+      timers.clear();
+    };
+  }, []);
+
+  const updateJob = useCallback((id: string, update: Partial<JobState<T>>) => {
+    setJobs((prev) => {
+      const next = new Map(prev);
+      const existing = next.get(id);
+      if (existing) {
+        next.set(id, { ...existing, ...update });
+      }
+      return next;
+    });
+  }, []);
+
+  const executeWithRetry = useCallback(
+    async (id: string, task: () => Promise<T>, attempt: number = 1) => {
+      if (cancelledRef.current.has(id)) {
+        updateJob(id, { status: 'failed', error: 'Cancelled' });
+        return;
+      }
+
+      updateJob(id, { status: attempt > 1 ? 'retrying' : 'running', attempts: attempt, error: null });
+      opts.onStatusChange(attempt > 1 ? 'retrying' : 'running', attempt);
+
+      try {
+        const result = await task();
+        updateJob(id, { status: 'success', result });
+        opts.onStatusChange('success', attempt);
+        opts.onSuccess(result);
+      } catch (err: unknown) {
+        const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+
+        if (attempt >= opts.maxAttempts || cancelledRef.current.has(id)) {
+          updateJob(id, { status: 'failed', error: errorMessage });
+          opts.onStatusChange('failed', attempt);
+          opts.onFailure(errorMessage, attempt);
+          return;
+        }
+
+        const delay = calculateDelay(attempt, opts);
+        updateJob(id, {
+          status: 'retrying',
+          error: errorMessage,
+          nextRetryIn: delay,
+        });
+        opts.onStatusChange('retrying', attempt);
+
+        const timer = setTimeout(() => {
+          timersRef.current.delete(id);
+          executeWithRetry(id, task, attempt + 1);
+        }, delay);
+
+        timersRef.current.set(id, timer);
+      }
+    },
+    [opts, updateJob]
+  );
+
+  const enqueue = useCallback(
+    (id: string, task: () => Promise<T>) => {
+      cancelledRef.current.delete(id);
+      const initialState: JobState<T> = {
+        id,
+        status: 'idle',
+        result: null,
+        error: null,
+        attempts: 0,
+        maxAttempts: opts.maxAttempts,
+        nextRetryIn: null,
+      };
+      setJobs((prev) => {
+        const next = new Map(prev);
+        next.set(id, initialState);
+        return next;
+      });
+      executeWithRetry(id, task);
+    },
+    [executeWithRetry, opts.maxAttempts]
+  );
+
+  const cancel = useCallback((id: string) => {
+    cancelledRef.current.add(id);
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(id);
+    }
+  }, []);
+
+  const retry = useCallback(
+    (id: string, task: () => Promise<T>) => {
+      cancelledRef.current.delete(id);
+      const existing = jobs.get(id);
+      if (existing) {
+        updateJob(id, { attempts: 0, error: null, result: null });
+      }
+      executeWithRetry(id, task);
+    },
+    [jobs, executeWithRetry, updateJob]
+  );
+
+  const getJob = useCallback((id: string) => jobs.get(id), [jobs]);
+
+  return {
+    jobs: Array.from(jobs.values()),
+    enqueue,
+    cancel,
+    retry,
+    getJob,
+  };
+}
diff --git a/app/src/pages/Jobs.tsx b/app/src/pages/Jobs.tsx
new file mode 100644
index 00000000..06b5b813
--- /dev/null
+++ b/app/src/pages/Jobs.tsx
@@ -0,0 +1,299 @@
+import { useState, useEffect, useMemo } from 'react';
+import {
+  FinancialCard,
+  FinancialCardContent,
+  FinancialCardDescription,
+  FinancialCardHeader,
+  FinancialCardTitle,
+} from '@/components/ui/financial-card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  RefreshCw,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  Loader2,
+  AlertTriangle,
+  Play,
+  Pause,
+  Trash2,
+  Activity,
+  Zap,
+  BarChart3,
+} from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import type { BackgroundJob, JobStatus, JobStats } from '@/api/jobs';
+
+// --- Mock Data --------------------------------------------------------------
+
+const JOB_TYPES = ['sync_accounts', 'generate_report', 'send_reminder', 'import_csv', 'budget_alert'];
+
+function generateMockJobs(): BackgroundJob[] {
+  const statuses: JobStatus[] = ['pending', 'running', 'success', 'failed', 'retrying', 'cancelled'];
+  const jobs: BackgroundJob[] = [];
+  const now = Date.now();
+
+  for (let i = 0; i < 20; i++) {
+    const status = statuses[Math.floor(Math.random() * statuses.length)];
+    const createdAt = new Date(now - Math.random() * 86400000 * 7).toISOString();
+    const attempts = status === 'success' ? 1 : status === 'retrying' ? Math.floor(1 + Math.random() * 3) : 1;
+
+    jobs.push({
+      id: `job-${i + 1}`,
+      type: JOB_TYPES[Math.floor(Math.random() * JOB_TYPES.length)],
+      status,
+      payload: {},
+      attempts,
+      maxAttempts: 3,
+      error: status === 'failed' ? 'Connection timeout after 30s' : undefined,
+      nextRetryAt: status === 'retrying' ? new Date(now + Math.random() * 60000).toISOString() : undefined,
+      createdAt,
+      startedAt: status !== 'pending' ? createdAt : undefined,
+      completedAt: ['success', 'failed', 'cancelled'].includes(status) ? new Date(now - Math.random() * 3600000).toISOString() : undefined,
+      updatedAt: createdAt,
+    });
+  }
+
+  return jobs.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+}
+
+function generateMockStats(jobs: BackgroundJob[]): JobStats {
+  const success = jobs.filter((j) => j.status === 'success').length;
+  const total = jobs.length;
+  return {
+    total,
+    pending: jobs.filter((j) => j.status === 'pending').length,
+    running: jobs.filter((j) => j.status === 'running').length,
+    success,
+    failed: jobs.filter((j) => j.status === 'failed').length,
+    retrying: jobs.filter((j) => j.status === 'retrying').length,
+    avgDurationMs: 2450,
+    successRate: total > 0 ? Math.round((success / total) * 100) : 0,
+  };
+}
+
+// --- Helpers ----------------------------------------------------------------
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleString('en-US', {
+    month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
+  });
+}
+
+function StatusIcon({ status }: { status: JobStatus }) {
+  switch (status) {
+    case 'success':
+      return <CheckCircle2 className="h-4 w-4 text-success" />;
+    case 'failed':
+      return <XCircle className="h-4 w-4 text-destructive" />;
+    case 'running':
+      return <Loader2 className="h-4 w-4 text-primary animate-spin" />;
+    case 'retrying':
+      return <RefreshCw className="h-4 w-4 text-warning animate-spin" />;
+    case 'pending':
+      return <Clock className="h-4 w-4 text-muted-foreground" />;
+    case 'cancelled':
+      return <Pause className="h-4 w-4 text-muted-foreground" />;
+  }
+}
+
+function StatusBadge({ status }: { status: JobStatus }) {
+  const variants: Record<JobStatus, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+    success: 'default',
+    running: 'secondary',
+    retrying: 'outline',
+    pending: 'outline',
+    failed: 'destructive',
+    cancelled: 'outline',
+  };
+  return (
+    <Badge variant={variants[status]} className="gap-1">
+      <StatusIcon status={status} />
+      {status.charAt(0).toUpperCase() + status.slice(1)}
+    </Badge>
+  );
+}
+
+// --- Component --------------------------------------------------------------
+
+export function Jobs() {
+  const [jobs, setJobs] = useState<BackgroundJob[]>(generateMockJobs);
+  const [filter, setFilter] = useState<JobStatus | 'all'>('all');
+  const { toast } = useToast();
+
+  const filteredJobs = useMemo(() => {
+    if (filter === 'all') return jobs;
+    return jobs.filter((j) => j.status === filter);
+  }, [jobs, filter]);
+
+  const stats = useMemo(() => generateMockStats(jobs), [jobs]);
+
+  const handleRetry = (job: BackgroundJob) => {
+    setJobs((prev) =>
+      prev.map((j) =>
+        j.id === job.id ? { ...j, status: 'running' as JobStatus, attempts: 0, error: undefined } : j
+      )
+    );
+    toast({ title: 'Job Retrying', description: `"${job.type}" has been queued for retry.` });
+
+    // Simulate success after 2s
+    setTimeout(() => {
+      setJobs((prev) =>
+        prev.map((j) =>
+          j.id === job.id ? { ...j, status: 'success' as JobStatus, attempts: 1, completedAt: new Date().toISOString() } : j
+        )
+      );
+      toast({ title: 'Job Succeeded', description: `"${job.type}" completed successfully.` });
+    }, 2000);
+  };
+
+  const handleCancel = (job: BackgroundJob) => {
+    setJobs((prev) =>
+      prev.map((j) =>
+        j.id === job.id ? { ...j, status: 'cancelled' as JobStatus, completedAt: new Date().toISOString() } : j
+      )
+    );
+    toast({ title: 'Job Cancelled', description: `"${job.type}" has been cancelled.` });
+  };
+
+  return (
+    <div className="container-financial py-8 space-y-8">
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Job Monitor</h1>
+          <p className="text-muted-foreground">Track and manage background job execution.</p>
+        </div>
+        <Button variant="outline" className="gap-2" onClick={() => setJobs(generateMockJobs())}>
+          <RefreshCw className="h-4 w-4" /> Refresh
+        </Button>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid gap-4 md:grid-cols-4 lg:grid-cols-6">
+        <FinancialCard>
+          <FinancialCardHeader className="pb-2">
+            <FinancialCardDescription className="flex items-center gap-1">
+              <Activity className="h-3 w-3" /> Total Jobs
+            </FinancialCardDescription>
+            <FinancialCardTitle className="text-2xl">{stats.total}</FinancialCardTitle>
+          </FinancialCardHeader>
+        </FinancialCard>
+        <FinancialCard>
+          <FinancialCardHeader className="pb-2">
+            <FinancialCardDescription>Success Rate</FinancialCardDescription>
+            <FinancialCardTitle className="text-2xl text-success">{stats.successRate}%</FinancialCardTitle>
+          </FinancialCardHeader>
+        </FinancialCard>
+        <FinancialCard>
+          <FinancialCardHeader className="pb-2">
+            <FinancialCardDescription className="flex items-center gap-1">
+              <CheckCircle2 className="h-3 w-3 text-success" /> Succeeded
+            </FinancialCardDescription>
+            <FinancialCardTitle className="text-2xl">{stats.success}</FinancialCardTitle>
+          </FinancialCardHeader>
+        </FinancialCard>
+        <FinancialCard>
+          <FinancialCardHeader className="pb-2">
+            <FinancialCardDescription className="flex items-center gap-1">
+              <XCircle className="h-3 w-3 text-destructive" /> Failed
+            </FinancialCardDescription>
+            <FinancialCardTitle className="text-2xl text-destructive">{stats.failed}</FinancialCardTitle>
+          </FinancialCardHeader>
+        </FinancialCard>
+        <FinancialCard>
+          <FinancialCardHeader className="pb-2">
+            <FinancialCardDescription className="flex items-center gap-1">
+              <Loader2 className="h-3 w-3" /> Running
+            </FinancialCardDescription>
+            <FinancialCardTitle className="text-2xl">{stats.running}</FinancialCardTitle>
+          </FinancialCardHeader>
+        </FinancialCard>
+        <FinancialCard>
+          <FinancialCardHeader className="pb-2">
+            <FinancialCardDescription className="flex items-center gap-1">
+              <Zap className="h-3 w-3" /> Avg Duration
+            </FinancialCardDescription>
+            <FinancialCardTitle className="text-2xl">{formatDuration(stats.avgDurationMs)}</FinancialCardTitle>
+          </FinancialCardHeader>
+        </FinancialCard>
+      </div>
+
+      {/* Filter */}
+      <div className="flex gap-2 flex-wrap">
+        {(['all', 'pending', 'running', 'success', 'failed', 'retrying', 'cancelled'] as const).map((f) => (
+          <Button
+            key={f}
+            variant={filter === f ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setFilter(f)}
+          >
+            {f === 'all' ? 'All' : f.charAt(0).toUpperCase() + f.slice(1)}
+          </Button>
+        ))}
+      </div>
+
+      {/* Jobs Table */}
+      <FinancialCard>
+        <FinancialCardHeader>
+          <FinancialCardTitle className="flex items-center gap-2">
+            <BarChart3 className="h-5 w-5" />
+            Jobs ({filteredJobs.length})
+          </FinancialCardTitle>
+        </FinancialCardHeader>
+        <FinancialCardContent>
+          <div className="space-y-3">
+            {filteredJobs.map((job) => (
+              <div
+                key={job.id}
+                className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50 transition-colors"
+              >
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  <StatusIcon status={job.status} />
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium truncate">{job.type}</span>
+                      <span className="text-xs text-muted-foreground">{job.id}</span>
+                    </div>
+                    <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                      <span>Attempt {job.attempts}/{job.maxAttempts}</span>
+                      <span>{formatTime(job.createdAt)}</span>
+                      {job.error && (
+                        <span className="text-destructive truncate max-w-[200px]">{job.error}</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <StatusBadge status={job.status} />
+                  {job.status === 'failed' && (
+                    <Button size="sm" variant="outline" className="gap-1" onClick={() => handleRetry(job)}>
+                      <RefreshCw className="h-3 w-3" /> Retry
+                    </Button>
+                  )}
+                  {(job.status === 'running' || job.status === 'pending') && (
+                    <Button size="sm" variant="outline" className="gap-1" onClick={() => handleCancel(job)}>
+                      <Pause className="h-3 w-3" /> Cancel
+                    </Button>
+                  )}
+                </div>
+              </div>
+            ))}
+            {filteredJobs.length === 0 && (
+              <div className="text-center py-8 text-muted-foreground">
+                No jobs matching this filter.
+              </div>
+            )}
+          </div>
+        </FinancialCardContent>
+      </FinancialCard>
+    </div>
+  );
+}