diff --git a/src/components/AttachmentPreview.test.tsx b/src/components/AttachmentPreview.test.tsx
new file mode 100644
index 0000000..53ac791
--- /dev/null
+++ b/src/components/AttachmentPreview.test.tsx
@@ -0,0 +1,220 @@
+// SPDX-FileCopyrightText: 2025 SecPal
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { I18nProvider } from "@lingui/react";
+import { i18n } from "@lingui/core";
+import { AttachmentPreview } from "./AttachmentPreview";
+
+describe("AttachmentPreview", () => {
+  const mockOnClose = vi.fn();
+  const mockOnDownload = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render image preview", () => {
+    const imageFile = new File(["image data"], "photo.jpg", {
+      type: "image/jpeg",
+    });
+    const imageUrl = URL.createObjectURL(imageFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={imageFile}
+          fileUrl={imageUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getByRole("img")).toHaveAttribute("src", imageUrl);
+    expect(screen.getByText("photo.jpg")).toBeInTheDocument();
+  });
+
+  it("should render PDF preview", () => {
+    const pdfFile = new File(["pdf data"], "document.pdf", {
+      type: "application/pdf",
+    });
+    const pdfUrl = URL.createObjectURL(pdfFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={pdfFile}
+          fileUrl={pdfUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    expect(screen.getByTitle("PDF Preview")).toBeInTheDocument();
+    expect(screen.getByText("document.pdf")).toBeInTheDocument();
+  });
+
+  it("should show unsupported preview message for other types", () => {
+    const textFile = new File(["text data"], "document.txt", {
+      type: "text/plain",
+    });
+    const textUrl = URL.createObjectURL(textFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={textFile}
+          fileUrl={textUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    expect(screen.getByText(/preview not available/i)).toBeInTheDocument();
+  });
+
+  it("should close modal when close button clicked", () => {
+    const imageFile = new File(["image data"], "photo.jpg", {
+      type: "image/jpeg",
+    });
+    const imageUrl = URL.createObjectURL(imageFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={imageFile}
+          fileUrl={imageUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    const closeButton = screen.getByRole("button", { name: /close preview/i });
+    fireEvent.click(closeButton);
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should close modal when ESC key pressed", () => {
+    const imageFile = new File(["image data"], "photo.jpg", {
+      type: "image/jpeg",
+    });
+    const imageUrl = URL.createObjectURL(imageFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={imageFile}
+          fileUrl={imageUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    fireEvent.keyDown(document, { key: "Escape", code: "Escape" });
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should trigger download when download button clicked", () => {
+    const imageFile = new File(["image data"], "photo.jpg", {
+      type: "image/jpeg",
+    });
+    const imageUrl = URL.createObjectURL(imageFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={imageFile}
+          fileUrl={imageUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    const downloadButton = screen.getByRole("button", {
+      name: /download file/i,
+    });
+    fireEvent.click(downloadButton);
+
+    expect(mockOnDownload).toHaveBeenCalledTimes(1);
+  });
+
+  it("should support zoom controls for images", () => {
+    const imageFile = new File(["image data"], "photo.jpg", {
+      type: "image/jpeg",
+    });
+    const imageUrl = URL.createObjectURL(imageFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={imageFile}
+          fileUrl={imageUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    const zoomInButton = screen.getByRole("button", { name: /zoom in/i });
+    const zoomOutButton = screen.getByRole("button", { name: /zoom out/i });
+
+    expect(zoomInButton).toBeInTheDocument();
+    expect(zoomOutButton).toBeInTheDocument();
+  });
+
+  it("should display file size", () => {
+    const imageFile = new File(["x".repeat(2048)], "photo.jpg", {
+      type: "image/jpeg",
+    });
+    const imageUrl = URL.createObjectURL(imageFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={imageFile}
+          fileUrl={imageUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    expect(screen.getByText(/2\.0 KB/i)).toBeInTheDocument();
+  });
+
+  it("should be keyboard accessible", () => {
+    const imageFile = new File(["image data"], "photo.jpg", {
+      type: "image/jpeg",
+    });
+    const imageUrl = URL.createObjectURL(imageFile);
+
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentPreview
+          file={imageFile}
+          fileUrl={imageUrl}
+          onClose={mockOnClose}
+          onDownload={mockOnDownload}
+        />
+      </I18nProvider>
+    );
+
+    const closeButton = screen.getByRole("button", { name: /close preview/i });
+    const downloadButton = screen.getByRole("button", {
+      name: /download file/i,
+    });
+
+    expect(closeButton).toHaveAttribute("type", "button");
+    expect(downloadButton).toHaveAttribute("type", "button");
+  });
+});
diff --git a/src/components/AttachmentPreview.tsx b/src/components/AttachmentPreview.tsx
new file mode 100644
index 0000000..6d45eec
--- /dev/null
+++ b/src/components/AttachmentPreview.tsx
@@ -0,0 +1,220 @@
+// SPDX-FileCopyrightText: 2025 SecPal
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { useState } from "react";
+import { Trans } from "@lingui/macro";
+import {
+  XMarkIcon,
+  ArrowDownTrayIcon,
+  MagnifyingGlassPlusIcon,
+  MagnifyingGlassMinusIcon,
+} from "@heroicons/react/24/outline";
+import { Button } from "./button";
+import { Dialog, DialogActions, DialogBody, DialogTitle } from "./dialog";
+
+/**
+ * AttachmentPreview Component Props
+ */
+export interface AttachmentPreviewProps {
+  /** File to preview */
+  file: File;
+  /** Object URL for the file */
+  fileUrl: string;
+  /** Callback when modal is closed */
+  onClose: () => void;
+  /** Callback when download button is clicked */
+  onDownload: () => void;
+}
+
+/**
+ * Check if file is an image
+ */
+function isImage(mimeType: string): boolean {
+  return mimeType.startsWith("image/");
+}
+
+/**
+ * Check if file is a PDF
+ */
+function isPDF(mimeType: string): boolean {
+  return mimeType === "application/pdf";
+}
+
+/**
+ * Format file size in human-readable format
+ */
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+
+  const units = ["B", "KB", "MB", "GB"];
+  const k = 1024;
+  const i = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(k)),
+    units.length - 1
+  );
+
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${units[i]}`;
+}
+
+/**
+ * AttachmentPreview Component
+ *
+ * Modal dialog for previewing image and PDF attachments.
+ * Supports zoom controls for images and inline PDF display.
+ *
+ * Features:
+ * - Image preview with zoom controls
+ * - PDF preview (iframe)
+ * - Download button
+ * - Close button and ESC key support
+ * - Click backdrop to close
+ * - Keyboard accessible
+ *
+ * @example
+ * ```tsx
+ * <AttachmentPreview
+ *   file={file}
+ *   fileUrl={objectUrl}
+ *   onClose={() => setShowPreview(false)}
+ *   onDownload={() => downloadFile(file)}
+ * />
+ * ```
+ */
+export function AttachmentPreview({
+  file,
+  fileUrl,
+  onClose,
+  onDownload,
+}: AttachmentPreviewProps) {
+  const [zoomLevel, setZoomLevel] = useState(100);
+  const canPreview = isImage(file.type) || isPDF(file.type);
+
+  /**
+   * Zoom in (max 200%)
+   */
+  const handleZoomIn = () => {
+    setZoomLevel((prev) => Math.min(prev + 25, 200));
+  };
+
+  /**
+   * Zoom out (min 50%)
+   */
+  const handleZoomOut = () => {
+    setZoomLevel((prev) => Math.max(prev - 25, 50));
+  };
+
+  return (
+    <Dialog open={true} onClose={onClose} size="5xl">
+      <DialogTitle>
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-semibold text-zinc-900 dark:text-white">
+              {file.name}
+            </h2>
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">
+              {formatFileSize(file.size)}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              onClick={onDownload}
+              aria-label="Download file"
+            >
+              <ArrowDownTrayIcon className="h-5 w-5" />
+              <Trans>Download</Trans>
+            </Button>
+            <Button
+              type="button"
+              onClick={onClose}
+              aria-label="Close preview"
+              color="zinc"
+            >
+              <XMarkIcon className="h-5 w-5" />
+              <Trans>Close</Trans>
+            </Button>
+          </div>
+        </div>
+      </DialogTitle>
+
+      <DialogBody>
+        {/* Image Preview */}
+        {isImage(file.type) && (
+          <div className="space-y-4">
+            {/* Zoom Controls */}
+            <div className="flex items-center justify-center gap-2">
+              <Button
+                type="button"
+                onClick={handleZoomOut}
+                disabled={zoomLevel <= 50}
+                aria-label="Zoom out"
+                color="zinc"
+              >
+                <MagnifyingGlassMinusIcon className="h-5 w-5" />
+              </Button>
+              <span className="text-sm text-zinc-600 dark:text-zinc-400">
+                {zoomLevel}%
+              </span>
+              <Button
+                type="button"
+                onClick={handleZoomIn}
+                disabled={zoomLevel >= 200}
+                aria-label="Zoom in"
+                color="zinc"
+              >
+                <MagnifyingGlassPlusIcon className="h-5 w-5" />
+              </Button>
+            </div>
+
+            {/* Image */}
+            <div className="flex justify-center overflow-auto rounded-lg bg-zinc-100 p-4 dark:bg-zinc-800">
+              <img
+                src={fileUrl}
+                alt={file.name}
+                className="max-h-[600px] object-contain"
+                style={{ transform: `scale(${zoomLevel / 100})` }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* PDF Preview */}
+        {isPDF(file.type) && (
+          <div className="h-[600px] w-full overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700">
+            <iframe
+              src={fileUrl}
+              title="PDF Preview"
+              className="h-full w-full"
+              sandbox="allow-scripts"
+            />
+          </div>
+        )}
+
+        {/* Unsupported Preview */}
+        {!canPreview && (
+          <div className="flex h-64 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800">
+            <div className="text-center">
+              <p className="text-sm text-zinc-600 dark:text-zinc-400">
+                <Trans>Preview not available for this file type.</Trans>
+              </p>
+              <Button type="button" onClick={onDownload} className="mt-4">
+                <ArrowDownTrayIcon className="h-5 w-5" />
+                <Trans>Download to view</Trans>
+              </Button>
+            </div>
+          </div>
+        )}
+      </DialogBody>
+
+      <DialogActions>
+        <Button type="button" onClick={onClose} color="zinc">
+          <Trans>Close</Trans>
+        </Button>
+        <Button type="button" onClick={onDownload}>
+          <ArrowDownTrayIcon className="h-5 w-5" />
+          <Trans>Download</Trans>
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/components/AttachmentUpload.test.tsx b/src/components/AttachmentUpload.test.tsx
new file mode 100644
index 0000000..b91203f
--- /dev/null
+++ b/src/components/AttachmentUpload.test.tsx
@@ -0,0 +1,220 @@
+// SPDX-FileCopyrightText: 2025 SecPal
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { I18nProvider } from "@lingui/react";
+import { i18n } from "@lingui/core";
+import { AttachmentUpload } from "./AttachmentUpload";
+
+describe("AttachmentUpload", () => {
+  const mockOnUpload = vi.fn();
+  const mockOnError = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render upload zone", () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} />
+      </I18nProvider>
+    );
+
+    expect(
+      screen.getByText(/drag files here or click to browse/i)
+    ).toBeInTheDocument();
+  });
+
+  it("should handle file selection via input", async () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} />
+      </I18nProvider>
+    );
+
+    const file = new File(["test content"], "test.txt", { type: "text/plain" });
+    const input = screen.getByLabelText(/select files/i);
+
+    fireEvent.change(input, { target: { files: [file] } });
+
+    await waitFor(() => {
+      expect(mockOnUpload).toHaveBeenCalledWith(file);
+    });
+  });
+
+  it("should handle drag and drop", async () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} />
+      </I18nProvider>
+    );
+
+    const file = new File(["test content"], "test.txt", { type: "text/plain" });
+    const dropZone = screen.getByText(/drag files here/i).closest("div");
+
+    fireEvent.dragOver(dropZone!);
+    fireEvent.drop(dropZone!, {
+      dataTransfer: { files: [file] },
+    });
+
+    await waitFor(() => {
+      expect(mockOnUpload).toHaveBeenCalledWith(file);
+    });
+  });
+
+  it("should validate file size (max 10MB)", async () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} onError={mockOnError} />
+      </I18nProvider>
+    );
+
+    // Create a file > 10MB
+    const largeFile = new File(["x".repeat(11 * 1024 * 1024)], "large.txt", {
+      type: "text/plain",
+    });
+    const input = screen.getByLabelText(/select files/i);
+
+    fireEvent.change(input, { target: { files: [largeFile] } });
+
+    await waitFor(() => {
+      expect(mockOnError).toHaveBeenCalledWith(expect.stringContaining("10MB"));
+      expect(mockOnUpload).not.toHaveBeenCalled();
+    });
+  });
+
+  it("should validate file type (allow images, PDFs, documents)", async () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} onError={mockOnError} />
+      </I18nProvider>
+    );
+
+    const executableFile = new File(["malicious"], "virus.exe", {
+      type: "application/x-msdownload",
+    });
+    const input = screen.getByLabelText(/select files/i);
+
+    fireEvent.change(input, { target: { files: [executableFile] } });
+
+    await waitFor(() => {
+      expect(mockOnError).toHaveBeenCalledWith(
+        expect.stringContaining("file type")
+      );
+      expect(mockOnUpload).not.toHaveBeenCalled();
+    });
+  });
+
+  it("should allow valid file types (images)", async () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} />
+      </I18nProvider>
+    );
+
+    const imageFile = new File(["image data"], "photo.jpg", {
+      type: "image/jpeg",
+    });
+    const input = screen.getByLabelText(/select files/i);
+
+    fireEvent.change(input, { target: { files: [imageFile] } });
+
+    await waitFor(() => {
+      expect(mockOnUpload).toHaveBeenCalledWith(imageFile);
+    });
+  });
+
+  it("should allow valid file types (PDFs)", async () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} />
+      </I18nProvider>
+    );
+
+    const pdfFile = new File(["pdf data"], "document.pdf", {
+      type: "application/pdf",
+    });
+    const input = screen.getByLabelText(/select files/i);
+
+    fireEvent.change(input, { target: { files: [pdfFile] } });
+
+    await waitFor(() => {
+      expect(mockOnUpload).toHaveBeenCalledWith(pdfFile);
+    });
+  });
+
+  it("should show loading state when uploading", () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} isUploading={true} />
+      </I18nProvider>
+    );
+
+    expect(screen.getAllByText(/uploading/i).length).toBeGreaterThan(0);
+    expect(screen.getByLabelText(/select files/i)).toBeDisabled();
+  });
+
+  it("should show progress bar during upload", () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload
+          onUpload={mockOnUpload}
+          isUploading={true}
+          uploadProgress={65}
+        />
+      </I18nProvider>
+    );
+
+    const progressBar = screen.getByRole("progressbar");
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveAttribute("aria-valuenow", "65");
+  });
+
+  it("should display multiple file selection info", async () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} />
+      </I18nProvider>
+    );
+
+    const files = [
+      new File(["content1"], "file1.txt", { type: "text/plain" }),
+      new File(["content2"], "file2.txt", { type: "text/plain" }),
+    ];
+    const input = screen.getByLabelText(/select files/i);
+
+    fireEvent.change(input, { target: { files } });
+
+    await waitFor(() => {
+      expect(mockOnUpload).toHaveBeenCalledTimes(2);
+      expect(mockOnUpload).toHaveBeenCalledWith(files[0]);
+      expect(mockOnUpload).toHaveBeenCalledWith(files[1]);
+    });
+  });
+
+  it("should show supported file types hint", () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} />
+      </I18nProvider>
+    );
+
+    expect(
+      screen.getByText(/supported.*images.*pdfs.*documents.*10mb/i)
+    ).toBeInTheDocument();
+  });
+
+  it("should be keyboard accessible", () => {
+    render(
+      <I18nProvider i18n={i18n}>
+        <AttachmentUpload onUpload={mockOnUpload} />
+      </I18nProvider>
+    );
+
+    const input = screen.getByLabelText(/select files/i);
+    expect(input).toHaveAttribute("type", "file");
+    expect(input).toHaveAttribute("tabindex", "0");
+  });
+});
diff --git a/src/components/AttachmentUpload.tsx b/src/components/AttachmentUpload.tsx
new file mode 100644
index 0000000..e71c626
--- /dev/null
+++ b/src/components/AttachmentUpload.tsx
@@ -0,0 +1,274 @@
+// SPDX-FileCopyrightText: 2025 SecPal
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { useState, useRef, DragEvent, ChangeEvent } from "react";
+import { Trans, msg } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
+import { CloudArrowUpIcon } from "@heroicons/react/24/outline";
+import { Button } from "./button";
+
+/**
+ * AttachmentUpload Component Props
+ */
+export interface AttachmentUploadProps {
+  /** Callback when file is selected/dropped */
+  onUpload: (file: File) => void | Promise<void>;
+  /** Callback when validation error occurs */
+  onError?: (error: string) => void;
+  /** Loading state during upload */
+  isUploading?: boolean;
+  /** Upload progress (0-100) */
+  uploadProgress?: number;
+}
+
+/**
+ * Allowed MIME types for file uploads
+ */
+const ALLOWED_MIME_TYPES = [
+  // Images
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+  "image/svg+xml", // ⚠️ Note: SVG files can contain embedded JavaScript. Ensure proper handling/sanitization when rendering.
+  // PDFs
+  "application/pdf",
+  // Documents
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "text/plain",
+  "text/csv",
+  "application/json",
+  "application/xml",
+  "text/xml",
+];
+
+/**
+ * Maximum file size in bytes (10MB)
+ */
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+/**
+ * Validate file type
+ */
+function isValidFileType(file: File): boolean {
+  return ALLOWED_MIME_TYPES.includes(file.type);
+}
+
+/**
+ * Validate file size
+ */
+function isValidFileSize(file: File): boolean {
+  return file.size <= MAX_FILE_SIZE;
+}
+
+/**
+ * AttachmentUpload Component
+ *
+ * Drag-and-drop file upload zone with file picker fallback.
+ * Validates file types and sizes before triggering upload callback.
+ *
+ * Features:
+ * - Drag-and-drop support
+ * - File picker button
+ * - File type validation (images, PDFs, documents)
+ * - File size validation (max 10MB)
+ * - Upload progress indicator
+ * - Keyboard accessible
+ *
+ * @example
+ * ```tsx
+ * <AttachmentUpload
+ *   onUpload={(file) => handleUpload(file)}
+ *   onError={(error) => showError(error)}
+ *   isUploading={uploading}
+ *   uploadProgress={50}
+ * />
+ * ```
+ */
+export function AttachmentUpload({
+  onUpload,
+  onError,
+  isUploading = false,
+  uploadProgress = 0,
+}: AttachmentUploadProps) {
+  const { i18n } = useLingui();
+  const [isDragOver, setIsDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  /**
+   * Handle file selection from input or drag-and-drop
+   */
+  const handleFiles = (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+
+    // Process each file
+    Array.from(files).forEach((file) => {
+      // Validate file type
+      if (!isValidFileType(file)) {
+        onError?.(
+          i18n._(
+            msg`Invalid file type: ${file.name}. Only images, PDFs, and documents are allowed.`
+          )
+        );
+        return;
+      }
+
+      // Validate file size
+      if (!isValidFileSize(file)) {
+        onError?.(
+          i18n._(msg`File too large: ${file.name}. Maximum size is 10MB.`)
+        );
+        return;
+      }
+
+      // File is valid, trigger upload callback
+      onUpload(file);
+    });
+  };
+
+  /**
+   * Handle file input change
+   */
+  const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    handleFiles(e.target.files);
+    // Reset input to allow selecting the same file again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  /**
+   * Handle drag over event
+   */
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  /**
+   * Handle drag leave event
+   */
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  };
+
+  /**
+   * Handle drop event
+   */
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    handleFiles(e.dataTransfer.files);
+  };
+
+  /**
+   * Trigger file picker
+   */
+  const handleBrowseClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Drag-and-drop zone */}
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`
+          relative rounded-lg border-2 border-dashed p-8 text-center
+          transition-colors duration-200
+          ${
+            isDragOver
+              ? "border-blue-400 bg-blue-50 dark:border-blue-500 dark:bg-blue-900/20"
+              : "border-zinc-300 bg-white dark:border-zinc-700 dark:bg-zinc-900"
+          }
+          ${
+            isUploading
+              ? "pointer-events-none opacity-50"
+              : "hover:border-zinc-400 dark:hover:border-zinc-600"
+          }
+        `}
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        {/* Icon */}
+        <CloudArrowUpIcon className="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-500" />
+
+        {/* Main text */}
+        <p className="mt-4 text-sm font-medium text-zinc-900 dark:text-white">
+          {isUploading ? (
+            <Trans>Uploading...</Trans>
+          ) : (
+            <Trans>Drag files here or click to browse</Trans>
+          )}
+        </p>
+
+        {/* Hint text */}
+        <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+          <Trans>Supported: Images, PDFs, Documents (max 10MB)</Trans>
+        </p>
+
+        {/* Browse button */}
+        {!isUploading && (
+          <Button
+            type="button"
+            onClick={handleBrowseClick}
+            className="mt-4"
+            disabled={isUploading}
+          >
+            <Trans>Select Files</Trans>
+          </Button>
+        )}
+
+        {/* Hidden file input */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          onChange={handleFileInputChange}
+          disabled={isUploading}
+          aria-label="Select files to upload"
+          tabIndex={0}
+          className="sr-only"
+          accept={ALLOWED_MIME_TYPES.join(",")}
+        />
+      </div>
+
+      {/* Progress bar */}
+      {isUploading && uploadProgress !== undefined && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-zinc-700 dark:text-zinc-300">
+              <Trans>Uploading...</Trans>
+            </span>
+            <span className="text-zinc-600 dark:text-zinc-400">
+              {uploadProgress}%
+            </span>
+          </div>
+          <div
+            role="progressbar"
+            aria-valuenow={uploadProgress}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            className="h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700"
+          >
+            <div
+              className="h-full rounded-full bg-blue-600 transition-all duration-300 dark:bg-blue-500"
+              style={{ width: `${uploadProgress}%` }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/Secrets/SecretDetail.test.tsx b/src/pages/Secrets/SecretDetail.test.tsx
index da63b21..4e64e41 100644
--- a/src/pages/Secrets/SecretDetail.test.tsx
+++ b/src/pages/Secrets/SecretDetail.test.tsx
@@ -5,6 +5,8 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Route, Routes, MemoryRouter } from "react-router";
+import { I18nProvider } from "@lingui/react";
+import { i18n } from "@lingui/core";
 import { SecretDetail } from "./SecretDetail";
 import * as secretApi from "../../services/secretApi";
 import type { SecretDetail as SecretDetailType } from "../../services/secretApi";
@@ -16,6 +18,9 @@ vi.mock("../../services/secretApi", async (importOriginal) => {
   return {
     ...actual,
     getSecretById: vi.fn(),
+    getSecretMasterKey: vi.fn(),
+    downloadAndDecryptAttachment: vi.fn(),
+    deleteAttachment: vi.fn(),
   };
 });
 
@@ -68,11 +73,13 @@ describe("SecretDetail", () => {
   // Helper to render with router
   const renderWithRouter = (secretId: string) => {
     return render(
-      <MemoryRouter initialEntries={[`/secrets/${secretId}`]}>
-        <Routes>
-          <Route path="/secrets/:id" element={<SecretDetail />} />
-        </Routes>
-      </MemoryRouter>
+      <I18nProvider i18n={i18n}>
+        <MemoryRouter initialEntries={[`/secrets/${secretId}`]}>
+          <Routes>
+            <Route path="/secrets/:id" element={<SecretDetail />} />
+          </Routes>
+        </MemoryRouter>
+      </I18nProvider>
     );
   };
 
@@ -146,15 +153,22 @@ describe("SecretDetail", () => {
   it("should display attachments", async () => {
     vi.mocked(secretApi.getSecretById).mockResolvedValue(mockSecret);
 
+    // Mock master key for attachment decryption
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
     renderWithRouter("secret-1");
 
     await waitFor(() => {
       expect(screen.getByText("Gmail Account")).toBeInTheDocument();
     });
 
-    expect(screen.getByText(/Attachments \(1\)/)).toBeInTheDocument();
+    // Wait for attachments section to appear
+    await waitFor(() => {
+      expect(screen.getByText(/Attachments \(1\)/)).toBeInTheDocument();
+    });
+
     expect(screen.getByText(/recovery-codes.txt/)).toBeInTheDocument();
-    expect(screen.getByText(/1.2 KB/)).toBeInTheDocument();
   });
 
   it("should display shares", async () => {
@@ -258,4 +272,545 @@ describe("SecretDetail", () => {
     expect(screen.queryByText("Attachments")).not.toBeInTheDocument();
     expect(screen.queryByText("Shared with")).not.toBeInTheDocument();
   });
+
+  it("should handle master key loading failure gracefully", async () => {
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(mockSecret);
+    vi.mocked(secretApi.getSecretMasterKey).mockRejectedValue(
+      new Error("Failed to decrypt master key")
+    );
+
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    // Should still display secret details despite master key failure
+    expect(screen.getByText("user@example.com")).toBeInTheDocument();
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Failed to load master key:",
+      expect.any(Error)
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("should download attachment when download handler called", async () => {
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(mockSecret);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    const mockFile = new File(["test content"], "recovery-codes.txt", {
+      type: "text/plain",
+    });
+    vi.mocked(secretApi.downloadAndDecryptAttachment).mockResolvedValue(
+      mockFile
+    );
+
+    // Mock DOM APIs
+    const createElementSpy = vi.spyOn(document, "createElement");
+    const appendChildSpy = vi.spyOn(document.body, "appendChild");
+    const removeChildSpy = vi.spyOn(document.body, "removeChild");
+    const createObjectURLSpy = vi
+      .spyOn(URL, "createObjectURL")
+      .mockReturnValue("blob:mock-url");
+    const revokeObjectURLSpy = vi.spyOn(URL, "revokeObjectURL");
+
+    const user = userEvent.setup();
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    // Wait for master key to load
+    await waitFor(() => {
+      expect(secretApi.getSecretMasterKey).toHaveBeenCalledWith("secret-1");
+    });
+
+    // Click download button
+    const downloadButton = screen.getByRole("button", {
+      name: /Download recovery-codes.txt/,
+    });
+    await user.click(downloadButton);
+
+    // Verify download flow
+    await waitFor(() => {
+      expect(secretApi.downloadAndDecryptAttachment).toHaveBeenCalledWith(
+        "att-1",
+        mockMasterKey
+      );
+    });
+
+    expect(createObjectURLSpy).toHaveBeenCalledWith(mockFile);
+    expect(createElementSpy).toHaveBeenCalledWith("a");
+    expect(appendChildSpy).toHaveBeenCalled();
+    expect(removeChildSpy).toHaveBeenCalled();
+    expect(revokeObjectURLSpy).toHaveBeenCalledWith("blob:mock-url");
+
+    // Cleanup
+    createObjectURLSpy.mockRestore();
+    revokeObjectURLSpy.mockRestore();
+    createElementSpy.mockRestore();
+    appendChildSpy.mockRestore();
+    removeChildSpy.mockRestore();
+  });
+
+  it("should handle download failure with alert", async () => {
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(mockSecret);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    vi.mocked(secretApi.downloadAndDecryptAttachment).mockRejectedValue(
+      new Error("Download failed")
+    );
+
+    const alertSpy = vi.spyOn(window, "alert").mockImplementation(() => {});
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    const user = userEvent.setup();
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(secretApi.getSecretMasterKey).toHaveBeenCalled();
+    });
+
+    const downloadButton = screen.getByRole("button", {
+      name: /Download recovery-codes.txt/,
+    });
+    await user.click(downloadButton);
+
+    await waitFor(() => {
+      expect(alertSpy).toHaveBeenCalledWith("Failed to download attachment");
+    });
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Download failed:",
+      expect.any(Error)
+    );
+
+    alertSpy.mockRestore();
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("should delete attachment with confirmation", async () => {
+    const mockMasterKey = {} as CryptoKey;
+
+    // Initial load with attachment
+    vi.mocked(secretApi.getSecretById)
+      .mockResolvedValueOnce(mockSecret)
+      .mockResolvedValueOnce({ ...mockSecret, attachments: [] }); // After delete
+
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    const confirmSpy = vi.spyOn(window, "confirm").mockReturnValue(true);
+    vi.mocked(secretApi.deleteAttachment).mockResolvedValue();
+
+    const user = userEvent.setup();
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    // Wait for attachments to load
+    await waitFor(() => {
+      expect(screen.getByText(/recovery-codes.txt/)).toBeInTheDocument();
+    });
+
+    const deleteButton = screen.getByRole("button", {
+      name: /Delete recovery-codes.txt/,
+    });
+    await user.click(deleteButton);
+
+    await waitFor(() => {
+      expect(confirmSpy).toHaveBeenCalledWith(
+        "Are you sure you want to delete this attachment?"
+      );
+    });
+
+    expect(secretApi.deleteAttachment).toHaveBeenCalledWith("att-1");
+
+    // Verify secret was refreshed (second call to getSecretById)
+    await waitFor(() => {
+      expect(secretApi.getSecretById).toHaveBeenCalledTimes(2);
+    });
+
+    confirmSpy.mockRestore();
+  });
+
+  it("should cancel delete when confirmation rejected", async () => {
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(mockSecret);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    const confirmSpy = vi.spyOn(window, "confirm").mockReturnValue(false);
+    vi.mocked(secretApi.deleteAttachment).mockResolvedValue();
+
+    const user = userEvent.setup();
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/recovery-codes.txt/)).toBeInTheDocument();
+    });
+
+    const deleteButton = screen.getByRole("button", {
+      name: /Delete recovery-codes.txt/,
+    });
+    await user.click(deleteButton);
+
+    expect(confirmSpy).toHaveBeenCalled();
+    expect(secretApi.deleteAttachment).not.toHaveBeenCalled();
+
+    confirmSpy.mockRestore();
+  });
+
+  it("should handle delete failure with alert", async () => {
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(mockSecret);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    const confirmSpy = vi.spyOn(window, "confirm").mockReturnValue(true);
+    vi.mocked(secretApi.deleteAttachment).mockRejectedValue(
+      new Error("Delete failed")
+    );
+
+    const alertSpy = vi.spyOn(window, "alert").mockImplementation(() => {});
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    const user = userEvent.setup();
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/recovery-codes.txt/)).toBeInTheDocument();
+    });
+
+    const deleteButton = screen.getByRole("button", {
+      name: /Delete recovery-codes.txt/,
+    });
+    await user.click(deleteButton);
+
+    await waitFor(() => {
+      expect(alertSpy).toHaveBeenCalledWith("Failed to delete attachment");
+    });
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Delete failed:",
+      expect.any(Error)
+    );
+
+    confirmSpy.mockRestore();
+    alertSpy.mockRestore();
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("should open preview modal for previewable attachment", async () => {
+    // Use mock secret with image attachment
+    const secretWithImage = {
+      ...mockSecret,
+      attachments: [
+        {
+          id: "att-img",
+          filename: "image.png",
+          size: 5000,
+          mime_type: "image/png",
+          created_at: "2025-01-01T10:00:00Z",
+        },
+      ],
+    };
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(secretWithImage);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    const mockFile = new File(["test content"], "image.png", {
+      type: "image/png",
+    });
+    vi.mocked(secretApi.downloadAndDecryptAttachment).mockResolvedValue(
+      mockFile
+    );
+
+    const createObjectURLSpy = vi
+      .spyOn(URL, "createObjectURL")
+      .mockReturnValue("blob:mock-url");
+
+    const user = userEvent.setup();
+
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/image.png/)).toBeInTheDocument();
+    });
+
+    const previewButton = screen.getByRole("button", {
+      name: /Preview image.png/,
+    });
+    await user.click(previewButton);
+
+    await waitFor(() => {
+      expect(secretApi.downloadAndDecryptAttachment).toHaveBeenCalledWith(
+        "att-img",
+        mockMasterKey
+      );
+    });
+
+    expect(createObjectURLSpy).toHaveBeenCalledWith(mockFile);
+
+    // Preview modal should be visible
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    createObjectURLSpy.mockRestore();
+  });
+
+  it("should handle preview failure with alert", async () => {
+    const secretWithImage = {
+      ...mockSecret,
+      attachments: [
+        {
+          id: "att-img",
+          filename: "image.png",
+          size: 5000,
+          mime_type: "image/png",
+          created_at: "2025-01-01T10:00:00Z",
+        },
+      ],
+    };
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(secretWithImage);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    vi.mocked(secretApi.downloadAndDecryptAttachment).mockRejectedValue(
+      new Error("Preview failed")
+    );
+
+    const alertSpy = vi.spyOn(window, "alert").mockImplementation(() => {});
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    const user = userEvent.setup();
+
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/image.png/)).toBeInTheDocument();
+    });
+
+    const previewButton = screen.getByRole("button", {
+      name: /Preview image.png/,
+    });
+    await user.click(previewButton);
+
+    await waitFor(() => {
+      expect(alertSpy).toHaveBeenCalledWith("Failed to load preview");
+    });
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Preview failed:",
+      expect.any(Error)
+    );
+
+    alertSpy.mockRestore();
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("should cleanup preview URL when modal is closed", async () => {
+    const secretWithImage = {
+      ...mockSecret,
+      attachments: [
+        {
+          id: "att-img",
+          filename: "image.png",
+          size: 5000,
+          mime_type: "image/png",
+          created_at: "2025-01-01T10:00:00Z",
+        },
+      ],
+    };
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(secretWithImage);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    const mockFile = new File(["test content"], "image.png", {
+      type: "image/png",
+    });
+    vi.mocked(secretApi.downloadAndDecryptAttachment).mockResolvedValue(
+      mockFile
+    );
+
+    const createObjectURLSpy = vi
+      .spyOn(URL, "createObjectURL")
+      .mockReturnValue("blob:mock-url");
+    const revokeObjectURLSpy = vi.spyOn(URL, "revokeObjectURL");
+
+    const user = userEvent.setup();
+
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/image.png/)).toBeInTheDocument();
+    });
+
+    const previewButton = screen.getByRole("button", {
+      name: /Preview image.png/,
+    });
+    await user.click(previewButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    // Close modal
+    const closeButton = screen.getByRole("button", { name: /close preview/i });
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(revokeObjectURLSpy).toHaveBeenCalledWith("blob:mock-url");
+    });
+
+    createObjectURLSpy.mockRestore();
+    revokeObjectURLSpy.mockRestore();
+  });
+
+  it("should cleanup preview URL on component unmount", async () => {
+    const secretWithImage = {
+      ...mockSecret,
+      attachments: [
+        {
+          id: "att-img",
+          filename: "image.png",
+          size: 5000,
+          mime_type: "image/png",
+          created_at: "2025-01-01T10:00:00Z",
+        },
+      ],
+    };
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(secretWithImage);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    const mockFile = new File(["test content"], "image.png", {
+      type: "image/png",
+    });
+    vi.mocked(secretApi.downloadAndDecryptAttachment).mockResolvedValue(
+      mockFile
+    );
+
+    const createObjectURLSpy = vi
+      .spyOn(URL, "createObjectURL")
+      .mockReturnValue("blob:mock-url-unmount");
+    const revokeObjectURLSpy = vi.spyOn(URL, "revokeObjectURL");
+
+    const user = userEvent.setup();
+
+    const { unmount } = renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/image.png/)).toBeInTheDocument();
+    });
+
+    const previewButton = screen.getByRole("button", {
+      name: /Preview image.png/,
+    });
+    await user.click(previewButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    // Unmount component
+    unmount();
+
+    // Verify URL was revoked on unmount
+    expect(revokeObjectURLSpy).toHaveBeenCalledWith("blob:mock-url-unmount");
+
+    createObjectURLSpy.mockRestore();
+    revokeObjectURLSpy.mockRestore();
+  });
+
+  it("should use internationalized error messages", async () => {
+    vi.mocked(secretApi.getSecretById).mockResolvedValue(mockSecret);
+
+    const mockMasterKey = {} as CryptoKey;
+    vi.mocked(secretApi.getSecretMasterKey).mockResolvedValue(mockMasterKey);
+
+    vi.mocked(secretApi.downloadAndDecryptAttachment).mockRejectedValue(
+      new Error("Network error")
+    );
+
+    const alertSpy = vi.spyOn(window, "alert").mockImplementation(() => {});
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    const user = userEvent.setup();
+
+    renderWithRouter("secret-1");
+
+    await waitFor(() => {
+      expect(screen.getByText("Gmail Account")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/recovery-codes.txt/)).toBeInTheDocument();
+    });
+
+    const downloadButton = screen.getByRole("button", {
+      name: /Download recovery-codes.txt/,
+    });
+    await user.click(downloadButton);
+
+    await waitFor(() => {
+      // i18n._(msg`...`) returns the English string in tests
+      expect(alertSpy).toHaveBeenCalledWith("Failed to download attachment");
+    });
+
+    alertSpy.mockRestore();
+    consoleErrorSpy.mockRestore();
+  });
 });
diff --git a/src/pages/Secrets/SecretDetail.tsx b/src/pages/Secrets/SecretDetail.tsx
index e512319..bde329a 100644
--- a/src/pages/Secrets/SecretDetail.tsx
+++ b/src/pages/Secrets/SecretDetail.tsx
@@ -3,11 +3,31 @@
 
 import { useState, useEffect } from "react";
 import { useParams, Link } from "react-router";
+import { msg } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
 import {
   getSecretById,
   ApiError,
+  getSecretMasterKey,
+  downloadAndDecryptAttachment,
+  deleteAttachment,
   type SecretDetail as SecretDetailType,
 } from "../../services/secretApi";
+import { AttachmentList } from "../../components/AttachmentList";
+import { AttachmentPreview } from "../../components/AttachmentPreview";
+
+/**
+ * Helper function to trigger browser download
+ * Creates a temporary link element, clicks it, and cleans up
+ */
+function triggerDownload(url: string, filename: string): void {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
 
 /**
  * Secret Detail Page
@@ -17,10 +37,26 @@ import {
  */
 export function SecretDetail() {
   const { id } = useParams<{ id: string }>();
+  const { i18n } = useLingui();
   const [secret, setSecret] = useState<SecretDetailType | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [showPassword, setShowPassword] = useState(false);
+  const [masterKey, setMasterKey] = useState<CryptoKey | null>(null);
+  const [attachmentLoading, setAttachmentLoading] = useState(false);
+  const [previewFile, setPreviewFile] = useState<{
+    file: File;
+    url: string;
+  } | null>(null);
+
+  // Cleanup blob URL when previewFile changes or component unmounts
+  useEffect(() => {
+    return () => {
+      if (previewFile) {
+        URL.revokeObjectURL(previewFile.url);
+      }
+    };
+  }, [previewFile]);
 
   useEffect(() => {
     const loadSecret = async () => {
@@ -35,6 +71,17 @@ export function SecretDetail() {
         setError(null);
         const data = await getSecretById(id);
         setSecret(data);
+
+        // Load master key if secret has attachments
+        if (data.attachments && data.attachments.length > 0) {
+          try {
+            const key = await getSecretMasterKey(id);
+            setMasterKey(key);
+          } catch (keyErr) {
+            console.error("Failed to load master key:", keyErr);
+            // Non-fatal - user can still view secret details
+          }
+        }
       } catch (err) {
         if (err instanceof ApiError) {
           if (err.status === 404) {
@@ -55,6 +102,89 @@ export function SecretDetail() {
     loadSecret();
   }, [id]);
 
+  /**
+   * Handle attachment download
+   */
+  const handleDownload = async (
+    attachmentId: string,
+    key: CryptoKey
+  ): Promise<void> => {
+    try {
+      setAttachmentLoading(true);
+      const file = await downloadAndDecryptAttachment(attachmentId, key);
+
+      // Trigger browser download
+      const url = URL.createObjectURL(file);
+      try {
+        triggerDownload(url, file.name);
+      } finally {
+        URL.revokeObjectURL(url);
+      }
+    } catch (err) {
+      console.error("Download failed:", err);
+      alert(i18n._(msg`Failed to download attachment`));
+    } finally {
+      setAttachmentLoading(false);
+    }
+  };
+
+  /**
+   * Handle attachment delete
+   */
+  const handleDelete = async (attachmentId: string): Promise<void> => {
+    if (
+      !confirm(i18n._(msg`Are you sure you want to delete this attachment?`))
+    ) {
+      return;
+    }
+
+    try {
+      setAttachmentLoading(true);
+      await deleteAttachment(attachmentId);
+
+      // Refresh secret to update attachment list
+      if (id) {
+        const updatedSecret = await getSecretById(id);
+        setSecret(updatedSecret);
+      }
+    } catch (err) {
+      console.error("Delete failed:", err);
+      alert(i18n._(msg`Failed to delete attachment`));
+    } finally {
+      setAttachmentLoading(false);
+    }
+  };
+
+  /**
+   * Handle attachment preview
+   */
+  const handlePreview = async (
+    attachmentId: string,
+    key: CryptoKey
+  ): Promise<void> => {
+    try {
+      setAttachmentLoading(true);
+      const file = await downloadAndDecryptAttachment(attachmentId, key);
+      const url = URL.createObjectURL(file);
+      setPreviewFile({ file, url });
+    } catch (err) {
+      console.error("Preview failed:", err);
+      alert(i18n._(msg`Failed to load preview`));
+    } finally {
+      setAttachmentLoading(false);
+    }
+  };
+
+  /**
+   * Close preview modal
+   */
+  const handleClosePreview = () => {
+    if (previewFile) {
+      URL.revokeObjectURL(previewFile.url);
+      setPreviewFile(null);
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex min-h-screen items-center justify-center">
@@ -233,23 +363,23 @@ export function SecretDetail() {
               <h2 className="mb-4 text-lg font-semibold text-zinc-900 dark:text-white">
                 Attachments ({secret.attachments.length})
               </h2>
-              <ul className="space-y-2">
-                {secret.attachments.map((attachment) => (
-                  <li
-                    key={attachment.id}
-                    className="flex items-center justify-between rounded-md border border-zinc-200 p-3 dark:border-zinc-700"
-                  >
-                    <div>
-                      <p className="font-medium text-zinc-900 dark:text-white">
-                        📄 {attachment.filename}
-                      </p>
-                      <p className="text-sm text-zinc-600 dark:text-zinc-400">
-                        {(attachment.size / 1024).toFixed(1)} KB
-                      </p>
-                    </div>
-                  </li>
-                ))}
-              </ul>
+              {masterKey ? (
+                <AttachmentList
+                  attachments={secret.attachments}
+                  masterKey={masterKey}
+                  onDownload={handleDownload}
+                  onDelete={handleDelete}
+                  onPreview={handlePreview}
+                  isLoading={attachmentLoading}
+                />
+              ) : (
+                <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-amber-800 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-400">
+                  <p className="text-sm">
+                    ⚠️ Unable to load encryption key for attachments. Please
+                    refresh the page or contact support if the problem persists.
+                  </p>
+                </div>
+              )}
             </div>
           )}
 
@@ -312,6 +442,18 @@ export function SecretDetail() {
           </div>
         </div>
       </div>
+
+      {/* Attachment Preview Modal */}
+      {previewFile && (
+        <AttachmentPreview
+          file={previewFile.file}
+          fileUrl={previewFile.url}
+          onClose={handleClosePreview}
+          onDownload={() => {
+            triggerDownload(previewFile.url, previewFile.file.name);
+          }}
+        />
+      )}
     </div>
   );
 }