diff --git a/src/__tests__/ErrorBoundary.test.tsx b/src/__tests__/ErrorBoundary.test.tsx
new file mode 100644
index 0000000..c05941a
--- /dev/null
+++ b/src/__tests__/ErrorBoundary.test.tsx
@@ -0,0 +1,121 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import ErrorBoundary from '@/components/ErrorBoundary';
+
+describe('ErrorBoundary', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders children when no error', () => {
+    render(
+      <ErrorBoundary>
+        <div>Test content</div>
+      </ErrorBoundary>
+    );
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+  });
+
+  it('renders error UI when error is caught', () => {
+    const TestComponent = () => {
+      throw new Error('Test error');
+    };
+
+    const { container } = render(
+      <ErrorBoundary>
+        <TestComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('displays copy button for error details', () => {
+    const TestComponent = () => {
+      throw new Error('Test error message');
+    };
+
+    render(
+      <ErrorBoundary>
+        <TestComponent />
+      </ErrorBoundary>
+    );
+
+    const copyButton = screen.getByText('Copy error details');
+    expect(copyButton).toBeInTheDocument();
+  });
+
+  it('copies error details to clipboard when button is clicked', async () => {
+    const mockClipboard = {
+      writeText: vi.fn().mockResolvedValue(undefined),
+    };
+    Object.assign(navigator, { clipboard: mockClipboard });
+
+    const TestComponent = () => {
+      throw new Error('Test error message');
+    };
+
+    render(
+      <ErrorBoundary>
+        <TestComponent />
+      </ErrorBoundary>
+    );
+
+    const copyButton = screen.getByText('Copy error details');
+    await userEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(mockClipboard.writeText).toHaveBeenCalled();
+      expect(mockClipboard.writeText.mock.calls[0][0]).toContain('Test error message');
+    });
+  });
+
+  it('shows copied confirmation for 2 seconds', async () => {
+    vi.useFakeTimers();
+    const mockClipboard = {
+      writeText: vi.fn().mockResolvedValue(undefined),
+    };
+    Object.assign(navigator, { clipboard: mockClipboard });
+
+    const TestComponent = () => {
+      throw new Error('Test error');
+    };
+
+    render(
+      <ErrorBoundary>
+        <TestComponent />
+      </ErrorBoundary>
+    );
+
+    const copyButton = screen.getByText('Copy error details');
+    await userEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Copied!')).toBeInTheDocument();
+    });
+
+    vi.advanceTimersByTime(2000);
+
+    await waitFor(() => {
+      expect(screen.getByText('Copy error details')).toBeInTheDocument();
+    });
+
+    vi.useRealTimers();
+  });
+
+  it('renders reload and dashboard buttons', () => {
+    const TestComponent = () => {
+      throw new Error('Test error');
+    };
+
+    render(
+      <ErrorBoundary>
+        <TestComponent />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Reload Page')).toBeInTheDocument();
+    expect(screen.getByText('Go to Dashboard')).toBeInTheDocument();
+  });
+});
diff --git a/src/__tests__/Skeleton.test.tsx b/src/__tests__/Skeleton.test.tsx
new file mode 100644
index 0000000..15fe317
--- /dev/null
+++ b/src/__tests__/Skeleton.test.tsx
@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Skeleton } from '@/components/Skeleton';
+
+describe('Skeleton', () => {
+  it('renders with skeleton-shimmer class', () => {
+    const { container } = render(<Skeleton />);
+    const skeletonDiv = container.querySelector('div');
+    expect(skeletonDiv).toHaveClass('skeleton-shimmer');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Skeleton className="h-4 w-24" />);
+    const skeletonDiv = container.querySelector('div');
+    expect(skeletonDiv).toHaveClass('h-4');
+    expect(skeletonDiv).toHaveClass('w-24');
+    expect(skeletonDiv).toHaveClass('skeleton-shimmer');
+  });
+
+  it('has proper base styles', () => {
+    const { container } = render(<Skeleton />);
+    const skeletonDiv = container.querySelector('div');
+    expect(skeletonDiv).toHaveClass('bg-gray-200');
+    expect(skeletonDiv).toHaveClass('dark:bg-gray-700');
+    expect(skeletonDiv).toHaveClass('rounded');
+  });
+
+  it('renders InvoiceCardSkeleton with proper ARIA attributes', () => {
+    const { render: customRender } = require('@testing-library/react');
+    const { InvoiceCardSkeleton } = require('@/components/Skeleton');
+    const { container } = customRender(<InvoiceCardSkeleton />);
+    const skeleton = container.querySelector('[role="status"]');
+    expect(skeleton).toHaveAttribute('aria-busy', 'true');
+    expect(skeleton).toHaveAttribute('aria-label', 'Loading invoice data');
+  });
+});
diff --git a/src/__tests__/Toast.test.tsx b/src/__tests__/Toast.test.tsx
index 08ef967..607ab69 100644
--- a/src/__tests__/Toast.test.tsx
+++ b/src/__tests__/Toast.test.tsx
@@ -1,8 +1,17 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import Toast from '@/components/Toast';
 
 describe('Toast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('renders the message', () => {
     render(<Toast message="Saved!" />);
     expect(screen.getByText('Saved!')).toBeInTheDocument();
@@ -14,12 +23,12 @@ describe('Toast', () => {
   });
 
   it('renders dismiss button when onDismiss provided', () => {
-    render(<Toast message="Saved!" onDismiss={jest.fn()} />);
+    render(<Toast message="Saved!" onDismiss={vi.fn()} />);
     expect(screen.getByRole('button', { name: 'Dismiss notification' })).toBeInTheDocument();
   });
 
   it('calls onDismiss when dismiss button clicked', async () => {
-    const onDismiss = jest.fn();
+    const onDismiss = vi.fn();
     render(<Toast message="Saved!" onDismiss={onDismiss} />);
     await userEvent.click(screen.getByRole('button', { name: 'Dismiss notification' }));
     expect(onDismiss).toHaveBeenCalledTimes(1);
@@ -44,4 +53,68 @@ describe('Toast', () => {
     render(<Toast message="Note" />);
     expect(screen.getByRole('alert')).toHaveClass('bg-gray-700');
   });
+
+  it('renders progress bar when duration is provided', () => {
+    const { container } = render(
+      <Toast message="Loading..." duration={4000} />
+    );
+    const progressBar = container.querySelector('div[aria-hidden="true"]');
+    expect(progressBar).toBeInTheDocument();
+  });
+
+  it('does not render progress bar when duration is not provided', () => {
+    const { container } = render(<Toast message="Loading..." />);
+    const progressBars = container.querySelectorAll('div[aria-hidden="true"]');
+    expect(progressBars.length).toBe(0);
+  });
+
+  it('progress bar decreases over time', () => {
+    const { container } = render(
+      <Toast message="Loading..." duration={4000} />
+    );
+    const progressBar = container.querySelector('div[aria-hidden="true"]');
+    const initialWidth = progressBar?.parentElement?.querySelector('div')?.style.width;
+
+    vi.advanceTimersByTime(2000);
+
+    const updatedWidth = progressBar?.parentElement?.querySelector('div')?.style.width;
+    expect(initialWidth).not.toBe(updatedWidth);
+  });
+
+  it('pauses progress when hovering', () => {
+    const onDismiss = vi.fn();
+    const { container } = render(
+      <Toast message="Loading..." duration={4000} onDismiss={onDismiss} />
+    );
+    const alert = screen.getByRole('alert');
+
+    userEvent.hover(alert);
+    vi.advanceTimersByTime(2000);
+
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it('resumes progress when hover ends', async () => {
+    const onDismiss = vi.fn();
+    const { container } = render(
+      <Toast message="Loading..." duration={1000} onDismiss={onDismiss} />
+    );
+    const alert = screen.getByRole('alert');
+
+    await userEvent.hover(alert);
+    vi.advanceTimersByTime(500);
+    await userEvent.unhover(alert);
+    vi.advanceTimersByTime(1000);
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  it('calls onDismiss when progress completes', () => {
+    const onDismiss = vi.fn();
+    render(<Toast message="Loading..." duration={1000} onDismiss={onDismiss} />);
+
+    vi.advanceTimersByTime(1000);
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/globals.css b/src/app/globals.css
index c992527..cc6074e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -126,6 +126,26 @@ html[data-contrast="high"] .text-indigo-500 {
 }
 
 /* ── Custom animations ─────────────────────────────────────────── */
+@keyframes shimmer {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.skeleton-shimmer {
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-shimmer {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
 @keyframes slide-up {
   from {
     opacity: 0;
diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx
index 7f7cf42..fe4dfc8 100644
--- a/src/components/Breadcrumb.tsx
+++ b/src/components/Breadcrumb.tsx
@@ -51,7 +51,7 @@ export default function Breadcrumb({ items }: Props) {
                 </span>
               )}
               {isLast ? (
-                <span className="text-gray-300 font-medium">{item.label}</span>
+                <span className="text-gray-300 font-medium" aria-current="page">{item.label}</span>
               ) : (
                 <>
                   {i === 0 && !showEllipsis && (
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 640615e..31fac81 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -12,11 +12,12 @@ interface Props {
 interface State {
   error: Error | null;
   sentryEventId: string | null;
+  copied: boolean;
 }
 
 /** Root error boundary — wraps the entire app. Captures exceptions to Sentry when configured. */
 export default class ErrorBoundary extends Component<Props, State> {
-  state: State = { error: null, sentryEventId: null };
+  state: State = { error: null, sentryEventId: null, copied: false };
 
   static getDerivedStateFromError(error: Error): Partial<State> {
     return { error };
@@ -36,10 +37,26 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   private handleRetry = () => {
-    this.setState({ error: null, sentryEventId: null });
+    this.setState({ error: null, sentryEventId: null, copied: false });
     window.location.reload();
   };
 
+  private handleCopyErrorDetails = async () => {
+    const { error } = this.state;
+    if (!error) return;
+
+    const errorText = `${error.message}\n${error.stack}`;
+    try {
+      await navigator.clipboard.writeText(errorText);
+      this.setState({ copied: true });
+      setTimeout(() => {
+        this.setState({ copied: false });
+      }, 2000);
+    } catch {
+      console.error('Failed to copy error details');
+    }
+  };
+
   render() {
     const { error, sentryEventId } = this.state;
     if (!error) {
@@ -95,6 +112,13 @@ export default class ErrorBoundary extends Component<Props, State> {
                   Error ID: {sentryEventId}
                 </p>
               )}
+              <button
+                type="button"
+                onClick={this.handleCopyErrorDetails}
+                className="min-h-10 px-4 py-2 text-sm rounded-lg bg-gray-800 hover:bg-gray-700 font-semibold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
+              >
+                {this.state.copied ? "Copied!" : "Copy error details"}
+              </button>
               <div className="flex gap-3 flex-wrap justify-center">
                 <button
                   type="button"
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index 1316ebb..98d1755 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 
 /** Shared animated shimmer base */
-const shimmer = "animate-pulse bg-gray-200 dark:bg-gray-700 rounded";
+const shimmer = "skeleton-shimmer bg-gray-200 dark:bg-gray-700 rounded";
 
 /** Base pulsing rectangle primitive — every skeleton in the app builds on this. */
 export function Skeleton({ className = "" }: { className?: string }) {
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index ff73d46..9a4652f 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -1,11 +1,58 @@
 'use client';
-interface Props { message: string; type?: 'success' | 'error' | 'info'; onDismiss?: () => void; }
-export default function Toast({ message, type = 'info', onDismiss }: Props) {
+import { useState, useEffect } from 'react';
+
+interface Props {
+  message: string;
+  type?: 'success' | 'error' | 'info';
+  onDismiss?: () => void;
+  duration?: number;
+}
+
+export default function Toast({ message, type = 'info', onDismiss, duration = 4000 }: Props) {
   const colors = { success: 'bg-green-700', error: 'bg-red-700', info: 'bg-gray-700' };
+  const [isHovering, setIsHovering] = useState(false);
+  const [progress, setProgress] = useState(100);
+
+  useEffect(() => {
+    if (isHovering || !duration) return;
+
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev <= 0) {
+          onDismiss?.();
+          return 0;
+        }
+        return prev - (100 / (duration / 100));
+      });
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, [isHovering, duration, onDismiss]);
+
   return (
-    <div role="alert" aria-live="polite" className={`flex items-center gap-3 px-4 py-3 rounded-xl text-white text-sm shadow-lg ${colors[type]}`}>
-      <span className="flex-1">{message}</span>
-      {onDismiss && <button onClick={onDismiss} aria-label="Dismiss notification">✕</button>}
+    <div
+      role="alert"
+      aria-live="polite"
+      className={`flex flex-col gap-3 px-4 py-3 rounded-xl text-white text-sm shadow-lg ${colors[type]}`}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      <div className="flex items-center gap-3">
+        <span className="flex-1">{message}</span>
+        {onDismiss && <button onClick={onDismiss} aria-label="Dismiss notification">✕</button>}
+      </div>
+      {duration && (
+        <div className="w-full h-0.5 bg-black/20 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-white/50 rounded-full transition-all"
+            style={{
+              width: `${progress}%`,
+              transitionDuration: isHovering ? '0s' : '100ms',
+            }}
+            aria-hidden="true"
+          />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/__tests__/Breadcrumb.test.tsx b/src/components/__tests__/Breadcrumb.test.tsx
index d96fbe1..b28be74 100644
--- a/src/components/__tests__/Breadcrumb.test.tsx
+++ b/src/components/__tests__/Breadcrumb.test.tsx
@@ -48,4 +48,25 @@ describe("Breadcrumb", () => {
     const list = container.querySelector("ol");
     expect(list).toBeInTheDocument();
   });
+
+  it("should mark the last item with aria-current='page'", () => {
+    const items: BreadcrumbItem[] = [
+      { label: "Invoices", href: "/dashboard" },
+      { label: "Invoice #123" },
+    ];
+    const { container } = render(<Breadcrumb items={items} />);
+    const lastItem = container.querySelector("span[aria-current='page']");
+    expect(lastItem).toBeInTheDocument();
+    expect(lastItem).toHaveTextContent("Invoice #123");
+  });
+
+  it("should not mark non-last items with aria-current", () => {
+    const items: BreadcrumbItem[] = [
+      { label: "Invoices", href: "/dashboard" },
+      { label: "Invoice #123" },
+    ];
+    const { container } = render(<Breadcrumb items={items} />);
+    const invoicesLink = screen.getByText("Invoices").closest("a");
+    expect(invoicesLink).not.toHaveAttribute("aria-current");
+  });
 });