diff --git a/__tests__/api/dispute-evidence.test.ts b/__tests__/api/dispute-evidence.test.ts
new file mode 100644
index 0000000..179a10d
--- /dev/null
+++ b/__tests__/api/dispute-evidence.test.ts
@@ -0,0 +1,153 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { NextRequest } from 'next/server'
+
+import { GET, POST } from '@/app/api/disputes/[id]/evidence/route'
+import { GET as downloadEvidence } from '@/app/api/disputes/[id]/evidence/[evidenceId]/route'
+
+vi.mock('@/lib/auth/session', () => ({
+  readAccessToken: vi.fn().mockReturnValue('token'),
+  verifyAccessToken: vi.fn().mockReturnValue({ walletAddress: 'GABC', jti: 'jti-1' }),
+}))
+
+vi.mock('@/lib/db', () => ({
+  sql: vi.fn(),
+}))
+
+vi.mock('@/lib/security/fileEncryption', () => ({
+  computeFileHash: vi.fn().mockReturnValue('dummy-hash'),
+  storeEncryptedFile: vi.fn().mockResolvedValue({ iv: 'dummy-iv', filePath: '/tmp/evidence-file' }),
+  readEncryptedFile: vi.fn().mockResolvedValue(Buffer.from('file-content')),
+}))
+
+import { sql } from '@/lib/db'
+
+type SqlMock = ReturnType<typeof vi.fn>
+
+function queueSql(responses: unknown[]) {
+  const mock = sql as unknown as SqlMock
+  for (const response of responses) {
+    mock.mockResolvedValueOnce(response)
+  }
+}
+
+function makeContext(disputeId = '42', evidenceId = '9') {
+  return { params: Promise.resolve({ id: disputeId, evidenceId }) }
+}
+
+function makeGetRequest(url: string) {
+  return new NextRequest(new Request(url))
+}
+
+function makePostRequest(url: string, files: File[], description = '') {
+  const formData = new FormData()
+  for (const file of files) {
+    Object.defineProperty(file, 'arrayBuffer', {
+      configurable: true,
+      value: vi.fn().mockResolvedValue(new TextEncoder().encode('content').buffer),
+    })
+    formData.append('files', file)
+  }
+  if (description) formData.append('description', description)
+  return {
+    nextUrl: new URL(url),
+    formData: vi.fn().mockResolvedValue(formData),
+  } as unknown as NextRequest
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  ;(sql as unknown as SqlMock).mockReset()
+})
+
+describe('GET /api/disputes/[id]/evidence', () => {
+  it('returns 403 when the user is not a dispute participant or admin', async () => {
+    queueSql([
+      [{ id: 3, role: 'client' }],
+      [{ id: 42, client_id: 1, freelancer_id: 2 }],
+    ])
+
+    const response = await GET(makeGetRequest('http://localhost/api/disputes/42/evidence'), makeContext())
+
+    expect(response.status).toBe(403)
+    const body = await response.json()
+    expect(body.code).toBe('FORBIDDEN')
+  })
+
+  it('returns evidence in chronological order for an authorized party', async () => {
+    queueSql([
+      [{ id: 1, role: 'client' }],
+      [{ id: 42, client_id: 1, freelancer_id: 2 }],
+      [{ id: 9, file_name: 'proof.pdf', created_at: '2026-01-01T00:00:00Z' }],
+    ])
+
+    const response = await GET(makeGetRequest('http://localhost/api/disputes/42/evidence'), makeContext())
+
+    expect(response.status).toBe(200)
+    const body = await response.json()
+    expect(body.evidence).toHaveLength(1)
+    expect(body.evidence[0].file_name).toBe('proof.pdf')
+  })
+})
+
+describe('POST /api/disputes/[id]/evidence', () => {
+  it('rejects unsupported file types before storage', async () => {
+    const request = makePostRequest(
+      'http://localhost/api/disputes/42/evidence',
+      [new File(['<script>'], 'bad.html', { type: 'text/html' })],
+    )
+
+    const response = await POST(request, makeContext())
+
+    expect(response.status).toBe(422)
+    const body = await response.json()
+    expect(body.code).toBe('VALIDATION_ERRORS')
+  })
+
+  it('stores encrypted evidence metadata for authorized users', async () => {
+    queueSql([
+      [{ id: 1, role: 'freelancer' }],
+      [{ id: 42, client_id: 2, freelancer_id: 1 }],
+      [{ id: 9, file_name: 'proof.pdf', file_hash: 'dummy-hash', created_at: '2026-01-01T00:00:00Z' }],
+      [],
+    ])
+
+    const request = makePostRequest(
+      'http://localhost/api/disputes/42/evidence',
+      [new File(['content'], 'proof.pdf', { type: 'application/pdf' })],
+      'Signed scope document',
+    )
+
+    const response = await POST(request, makeContext())
+
+    expect(response.status).toBe(201)
+    const body = await response.json()
+    expect(body.evidence[0].file_name).toBe('proof.pdf')
+    expect(body.evidence[0].file_hash).toBe('dummy-hash')
+  })
+})
+
+describe('GET /api/disputes/[id]/evidence/[evidenceId]', () => {
+  it('downloads encrypted evidence for an authorized participant', async () => {
+    queueSql([
+      [{ id: 1, role: 'client' }],
+      [{ id: 42, client_id: 1, freelancer_id: 2 }],
+      [{
+        id: 9,
+        file_name: 'proof.pdf',
+        file_type: 'application/pdf',
+        mime_type: 'application/pdf',
+        encryption_iv: 'dummy-iv',
+        file_path: '/tmp/evidence-file',
+      }],
+    ])
+
+    const response = await downloadEvidence(
+      makeGetRequest('http://localhost/api/disputes/42/evidence/9?preview=0'),
+      makeContext('42', '9'),
+    )
+
+    expect(response.status).toBe(200)
+    expect(response.headers.get('Content-Type')).toBe('application/pdf')
+    expect(response.headers.get('Content-Disposition')).toBe('attachment; filename="proof.pdf"')
+  })
+})
diff --git a/app/api/disputes/[id]/evidence/[evidenceId]/route.ts b/app/api/disputes/[id]/evidence/[evidenceId]/route.ts
new file mode 100644
index 0000000..510d46f
--- /dev/null
+++ b/app/api/disputes/[id]/evidence/[evidenceId]/route.ts
@@ -0,0 +1,12 @@
+export const dynamic = 'force-dynamic'
+
+import { NextRequest } from 'next/server'
+import { withAuthCtx } from '@/lib/auth/middleware'
+import { downloadEvidence } from '../route'
+
+type RouteContext = { params: Promise<{ id: string; evidenceId: string }> }
+
+export const GET = withAuthCtx(async (request: NextRequest, auth, context: RouteContext) => {
+  const { id, evidenceId } = await context.params
+  return downloadEvidence(request, auth, id, evidenceId)
+})
diff --git a/app/api/disputes/[id]/evidence/route.ts b/app/api/disputes/[id]/evidence/route.ts
index 6ada5ff..6149ab0 100644
--- a/app/api/disputes/[id]/evidence/route.ts
+++ b/app/api/disputes/[id]/evidence/route.ts
@@ -1,25 +1,237 @@
 export const dynamic = 'force-dynamic'
 
+import { randomUUID } from 'crypto'
 import { NextRequest, NextResponse } from 'next/server'
 import { sql } from '@/lib/db'
-import { withAuth } from '@/lib/auth/middleware'
+import { withAuthCtx } from '@/lib/auth/middleware'
+import {
+  ALLOWED_DISPUTE_EVIDENCE_MIME_TYPES,
+  MAX_DISPUTE_EVIDENCE_FILE_SIZE,
+  MAX_DISPUTE_EVIDENCE_FILES_PER_BATCH,
+} from '@/lib/validations'
+import {
+  computeFileHash,
+  readEncryptedFile,
+  storeEncryptedFile,
+} from '@/lib/security/fileEncryption'
 
 type RouteContext = { params: Promise<{ id: string }> }
+type AuthLike = { walletAddress: string }
+type UserRow = { id: string | number; role: string }
+type DisputeAccessRow = { id: string | number; client_id: string | number; freelancer_id: string | number | null }
+type EvidenceRow = {
+  id: string | number
+  file_url: string
+  file_name: string
+  file_type?: string | null
+  mime_type?: string | null
+  encryption_iv?: string | null
+  file_path?: string | null
+}
+type DisputeAccess = {
+  user: UserRow
+  dispute: DisputeAccessRow
+}
 
-export const POST = withAuth(async (request: NextRequest, auth, context: RouteContext) => {
+async function getDisputeAccess(disputeId: string, walletAddress: string): Promise<DisputeAccess | NextResponse> {
+  const users = (await sql`
+    SELECT id, role FROM users WHERE wallet_address = ${walletAddress} LIMIT 1
+  `) as UserRow[]
+  const user = users[0]
+  if (!user) return NextResponse.json({ error: 'User not found', code: 'USER_NOT_FOUND' }, { status: 404 })
+
+  const disputes = (await sql`
+    SELECT d.id, j.client_id, j.freelancer_id
+    FROM disputes d
+    JOIN jobs j ON d.job_id = j.id
+    WHERE d.id = ${disputeId}
+    LIMIT 1
+  `) as DisputeAccessRow[]
+  const dispute = disputes[0]
+  if (!dispute) return NextResponse.json({ error: 'Dispute not found', code: 'DISPUTE_NOT_FOUND' }, { status: 404 })
+
+  const userId = String(user.id)
+  const isParticipant = String(dispute.client_id) === userId || String(dispute.freelancer_id) === userId
+  if (user.role !== 'admin' && !isParticipant) {
+    return NextResponse.json({ error: 'Access denied', code: 'FORBIDDEN' }, { status: 403 })
+  }
+
+  return { user, dispute }
+}
+
+function isAccessResponse(value: DisputeAccess | NextResponse): value is NextResponse {
+  return value instanceof NextResponse
+}
+
+function validateEvidenceFiles(files: File[]) {
+  const errors: { filename: string; reason: string }[] = []
+
+  for (const file of files) {
+    if (!file.size || file.size <= 0) {
+      errors.push({ filename: file.name, reason: 'File is empty' })
+      continue
+    }
+    if (file.size > MAX_DISPUTE_EVIDENCE_FILE_SIZE) {
+      errors.push({
+        filename: file.name,
+        reason: `File exceeds ${MAX_DISPUTE_EVIDENCE_FILE_SIZE / (1024 * 1024)} MB limit`,
+      })
+      continue
+    }
+    if (!ALLOWED_DISPUTE_EVIDENCE_MIME_TYPES.includes(file.type as typeof ALLOWED_DISPUTE_EVIDENCE_MIME_TYPES[number])) {
+      errors.push({ filename: file.name, reason: `File type "${file.type || 'unknown'}" is not allowed` })
+    }
+  }
+
+  return errors
+}
+
+export const GET = withAuthCtx(async (_request: NextRequest, auth, context: RouteContext) => {
   const { id } = await context.params
   try {
-    const { fileUrl, fileName, fileType, description } = await request.json()
-    if (!fileUrl || !fileName) return NextResponse.json({ error: 'Missing required fields', code: 'MISSING_FIELDS' }, { status: 400 })
-    const [user] = await sql`SELECT id FROM users WHERE wallet_address = ${auth.walletAddress}`
-    if (!user) return NextResponse.json({ error: 'User not found', code: 'USER_NOT_FOUND' }, { status: 404 })
-    const [evidence] = await sql`
-      INSERT INTO dispute_evidence (dispute_id, file_url, file_name, file_type, uploaded_by, description)
-      VALUES (${id}, ${fileUrl}, ${fileName}, ${fileType || 'other'}, ${user.id}, ${description || null})
-      RETURNING *
+    const access = await getDisputeAccess(id, auth.walletAddress)
+    if (isAccessResponse(access)) return access
+
+    const evidence = await sql`
+      SELECT de.id, de.dispute_id, de.file_url, de.file_name, de.file_type,
+             de.uploaded_by, de.description, de.created_at,
+             de.mime_type, de.file_size, de.file_hash, u.username as uploaded_by_username
+      FROM dispute_evidence de
+      JOIN users u ON u.id = de.uploaded_by
+      WHERE de.dispute_id = ${id} AND COALESCE(de.is_removed, FALSE) = FALSE
+      ORDER BY de.created_at ASC
     `
-    return NextResponse.json(evidence, { status: 201 })
+
+    return NextResponse.json({ evidence }, { status: 200 })
+  } catch {
+    return NextResponse.json({ error: 'Failed to load evidence', code: 'EVIDENCE_LIST_FAILED' }, { status: 500 })
+  }
+})
+
+export const POST = withAuthCtx(async (request: NextRequest, auth, context: RouteContext) => {
+  const { id } = await context.params
+
+  let formData: FormData
+  try {
+    formData = await request.formData()
+  } catch {
+    return NextResponse.json(
+      { error: 'Request body must be multipart/form-data', code: 'INVALID_FORM_DATA' },
+      { status: 400 },
+    )
+  }
+
+  const files = Array.from(formData.entries())
+    .filter((entry): entry is [string, File] => entry[1] instanceof File)
+    .map(([, file]) => file)
+
+  const description = String(formData.get('description') ?? '').trim()
+
+  if (files.length === 0 && description.length === 0) {
+    return NextResponse.json(
+      { error: 'Attach at least one evidence file or add a description', code: 'NO_EVIDENCE' },
+      { status: 400 },
+    )
+  }
+
+  if (files.length > MAX_DISPUTE_EVIDENCE_FILES_PER_BATCH) {
+    return NextResponse.json(
+      {
+        error: `Cannot upload more than ${MAX_DISPUTE_EVIDENCE_FILES_PER_BATCH} files at once`,
+        code: 'TOO_MANY_FILES',
+      },
+      { status: 422 },
+    )
+  }
+
+  const validationErrors = validateEvidenceFiles(files)
+  if (validationErrors.length > 0) {
+    return NextResponse.json(
+      { error: 'Some files failed validation', code: 'VALIDATION_ERRORS', details: validationErrors },
+      { status: 422 },
+    )
+  }
+
+  try {
+    const access = await getDisputeAccess(id, auth.walletAddress)
+    if (isAccessResponse(access)) return access
+
+    const inserted = []
+
+    if (files.length === 0) {
+      const rows = (await sql`
+        INSERT INTO dispute_evidence (dispute_id, file_url, file_name, file_type, uploaded_by, description)
+        VALUES (${id}, ${'note-only'}, ${'Evidence note'}, ${'note'}, ${access.user.id}, ${description})
+        RETURNING id, dispute_id, file_url, file_name, file_type, uploaded_by, description,
+                  created_at, mime_type, file_size, file_hash
+      `) as EvidenceRow[]
+      const evidence = rows[0]
+      inserted.push(evidence)
+    }
+
+    for (const file of files) {
+      const buffer = Buffer.from(await file.arrayBuffer())
+      const fileHash = computeFileHash(buffer)
+      const ext = file.name.split('.').pop()?.toLowerCase() || 'bin'
+      const storedFilename = `${randomUUID()}.${ext}`
+      const { iv, filePath } = await storeEncryptedFile(buffer, storedFilename)
+
+      const rows = (await sql`
+        INSERT INTO dispute_evidence
+          (dispute_id, file_url, file_name, file_type, uploaded_by, description,
+           stored_filename, mime_type, file_size, file_hash, encryption_iv, file_path)
+        VALUES
+          (${id}, ${`dispute-evidence://${storedFilename}`}, ${file.name}, ${file.type || 'application/octet-stream'},
+           ${access.user.id}, ${description || null}, ${storedFilename}, ${file.type || 'application/octet-stream'},
+           ${file.size}, ${fileHash}, ${iv}, ${filePath})
+        RETURNING id, dispute_id, file_url, file_name, file_type, uploaded_by, description,
+                  created_at, mime_type, file_size, file_hash
+      `) as EvidenceRow[]
+      const evidence = rows[0]
+      inserted.push(evidence)
+    }
+
+    await sql`UPDATE disputes SET status = 'under_review', updated_at = CURRENT_TIMESTAMP WHERE id = ${id} AND status = 'open'`
+
+    return NextResponse.json({ evidence: inserted }, { status: 201 })
   } catch {
     return NextResponse.json({ error: 'Failed to submit evidence', code: 'EVIDENCE_UPLOAD_FAILED' }, { status: 500 })
   }
 })
+
+export async function downloadEvidence(request: NextRequest, auth: AuthLike, disputeId: string, evidenceId: string) {
+  try {
+    const access = await getDisputeAccess(disputeId, auth.walletAddress)
+    if (isAccessResponse(access)) return access
+
+    const rows = (await sql`
+      SELECT id, file_url, file_name, file_type, mime_type, encryption_iv, file_path
+      FROM dispute_evidence
+      WHERE id = ${evidenceId} AND dispute_id = ${disputeId} AND COALESCE(is_removed, FALSE) = FALSE
+      LIMIT 1
+    `) as EvidenceRow[]
+    const evidence = rows[0]
+    if (!evidence) return NextResponse.json({ error: 'Evidence not found', code: 'EVIDENCE_NOT_FOUND' }, { status: 404 })
+
+    if (!evidence.file_path || !evidence.encryption_iv) {
+      return NextResponse.redirect(new URL(evidence.file_url, request.url))
+    }
+
+    const plaintext = await readEncryptedFile(evidence.file_path, evidence.encryption_iv)
+
+    const preview = request.nextUrl.searchParams.get('preview') === '1'
+    const disposition = preview ? 'inline' : 'attachment'
+
+    return new NextResponse(new Uint8Array(plaintext), {
+      status: 200,
+      headers: {
+        'Content-Type': evidence.mime_type || evidence.file_type || 'application/octet-stream',
+        'Content-Disposition': `${disposition}; filename="${evidence.file_name}"`,
+        'Content-Length': String(plaintext.length),
+        'Cache-Control': 'private, no-store',
+      },
+    })
+  } catch {
+    return NextResponse.json({ error: 'Failed to download evidence', code: 'EVIDENCE_DOWNLOAD_FAILED' }, { status: 500 })
+  }
+}
diff --git a/app/api/disputes/[id]/route.ts b/app/api/disputes/[id]/route.ts
index 1023a62..5b4be71 100644
--- a/app/api/disputes/[id]/route.ts
+++ b/app/api/disputes/[id]/route.ts
@@ -2,19 +2,40 @@ export const dynamic = 'force-dynamic'
 
 import { NextRequest, NextResponse } from 'next/server'
 import { sql } from '@/lib/db'
-import { withAuth } from '@/lib/auth/middleware'
+import { withAuthCtx } from '@/lib/auth/middleware'
 
 type RouteContext = { params: Promise<{ id: string }> }
+type UserRow = { id: string | number; role: string }
+type DisputeRow = {
+  client_id: string | number
+  freelancer_id: string | number | null
+  [key: string]: unknown
+}
 
-export const GET = withAuth(async (_request: NextRequest, _auth, context: RouteContext) => {
+export const GET = withAuthCtx(async (_request: NextRequest, auth, context: RouteContext) => {
   const { id } = await context.params
   try {
-    const [dispute] = await sql`
-      SELECT d.*, j.title as job_title, u.username as raised_by_username, u.wallet_address as raised_by_wallet
+    const users = (await sql`
+      SELECT id, role FROM users WHERE wallet_address = ${auth.walletAddress} LIMIT 1
+    `) as UserRow[]
+    const user = users[0]
+    if (!user) return NextResponse.json({ error: 'User not found', code: 'USER_NOT_FOUND' }, { status: 404 })
+
+    const disputes = (await sql`
+      SELECT d.*, j.title as job_title, j.client_id, j.freelancer_id,
+             u.username as raised_by_username, u.wallet_address as raised_by_wallet
       FROM disputes d JOIN jobs j ON d.job_id = j.id JOIN users u ON d.raised_by = u.id
       WHERE d.id = ${id}
-    `
+    `) as DisputeRow[]
+    const dispute = disputes[0]
     if (!dispute) return NextResponse.json({ error: 'Dispute not found', code: 'DISPUTE_NOT_FOUND' }, { status: 404 })
+
+    const userId = String(user.id)
+    const isParticipant = String(dispute.client_id) === userId || String(dispute.freelancer_id) === userId
+    if (user.role !== 'admin' && !isParticipant) {
+      return NextResponse.json({ error: 'Access denied', code: 'FORBIDDEN' }, { status: 403 })
+    }
+
     return NextResponse.json(dispute, { status: 200 })
   } catch {
     return NextResponse.json({ error: 'Failed to fetch dispute', code: 'DISPUTE_DETAILS_FAILED' }, { status: 500 })
diff --git a/app/dashboard/disputes/[id]/page.test.tsx b/app/dashboard/disputes/[id]/page.test.tsx
index 115953f..e9e3b44 100644
--- a/app/dashboard/disputes/[id]/page.test.tsx
+++ b/app/dashboard/disputes/[id]/page.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { cleanup, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import DisputeResolutionPage from './page'
 
@@ -13,33 +13,54 @@ const mockDispute = {
   raised_by_wallet: 'GABCDE1234',
 }
 
+const mockEvidence = {
+  evidence: [
+    {
+      id: 7,
+      file_name: 'scope-change.pdf',
+      mime_type: 'application/pdf',
+      file_size: 1200,
+      file_hash: 'abcdef1234567890',
+      description: 'Shows the disputed scope change',
+      created_at: '2024-02-01T13:00:00.000Z',
+      uploaded_by_username: 'alice',
+    },
+  ],
+}
+
 describe('DisputeResolutionPage', () => {
   beforeEach(() => {
-    vi.stubGlobal('fetch', vi.fn(() =>
-      Promise.resolve({
+    vi.useRealTimers()
+    vi.stubGlobal('fetch', vi.fn((url: string) => {
+      const payload = url.endsWith('/evidence') ? mockEvidence : mockDispute
+      return Promise.resolve({
         ok: true,
-        json: async () => mockDispute,
-      }) as Response,
-    ))
+        status: 200,
+        json: async () => payload,
+      }) as Promise<Response>
+    }))
   })
 
   afterEach(() => {
+    cleanup()
     vi.restoreAllMocks()
+    vi.useRealTimers()
   })
 
-  it('renders dispute details and evidence UI', async () => {
+  it('renders dispute details and evidence management UI', async () => {
     render(<DisputeResolutionPage params={{ id: '42' }} />)
 
-    expect(screen.getByText(/review dispute/i)).toBeInTheDocument()
+    expect(screen.getByText(/evidence review/i)).toBeInTheDocument()
     expect(screen.getByText(/dispute resolution/i)).toBeInTheDocument()
 
-    await waitFor(() => {
-      expect(screen.getByText(/Website Rebuild/i)).toBeInTheDocument()
-      expect(screen.getByText(/Quality issue with the final delivery/i)).toBeInTheDocument()
-      expect(screen.getByText(/alice/i)).toBeInTheDocument()
-    })
+    expect(await screen.findByText(/Quality issue with the final delivery/i)).toBeInTheDocument()
+    expect(screen.getAllByText(/Website Rebuild/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/alice/i).length).toBeGreaterThan(0)
 
-    expect(screen.getByRole('button', { name: /choose files/i })).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /submit evidence/i })).toBeInTheDocument()
+    expect(screen.getByText(/choose files/i)).toBeInTheDocument()
+    expect(screen.getAllByText(/submit evidence/i).length).toBeGreaterThan(0)
+    expect(screen.getByText(/scope-change\.pdf/i)).toBeInTheDocument()
+    expect(screen.getAllByText(/preview/i).length).toBeGreaterThan(0)
+    expect(screen.getAllByText(/download/i).length).toBeGreaterThan(0)
   })
 })
diff --git a/app/dashboard/disputes/[id]/page.tsx b/app/dashboard/disputes/[id]/page.tsx
index 57b1d92..bfc9a71 100644
--- a/app/dashboard/disputes/[id]/page.tsx
+++ b/app/dashboard/disputes/[id]/page.tsx
@@ -1,20 +1,25 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import {
   ArrowLeft,
-  AlertCircle,
   CheckCircle2,
   Clock3,
-  FilePlus,
+  Download,
+  Eye,
+  FileArchive,
+  FileImage,
+  FileText,
+  FileVideo,
+  ShieldAlert,
   ShieldCheck,
+  Trash2,
   Upload,
-  Users,
 } from "lucide-react";
 import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -24,13 +29,21 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
+import { Progress } from "@/components/ui/progress";
 import { Textarea } from "@/components/ui/textarea";
 
 interface DisputeDetails {
-  id: number;
+  id: number | string;
   job_title: string;
   reason: string;
-  status: "open" | "under_review" | "resolved" | string;
+  status:
+    | "open"
+    | "under_review"
+    | "resolved"
+    | "resolved_client"
+    | "resolved_freelancer"
+    | "resolved_split"
+    | string;
   created_at: string;
   updated_at?: string;
   resolution?: string | null;
@@ -39,22 +52,59 @@ interface DisputeDetails {
   raised_by_wallet?: string | null;
 }
 
+interface EvidenceItem {
+  id: number | string;
+  file_name: string;
+  file_type?: string | null;
+  mime_type?: string | null;
+  file_size?: number | null;
+  file_hash?: string | null;
+  description?: string | null;
+  created_at: string;
+  uploaded_by_username?: string | null;
+}
+
 interface PreviewFile {
   id: string;
   name: string;
   url: string;
   type: string;
   size: number;
+  progress: number;
+  state: "queued" | "uploading" | "complete" | "error";
+  error?: string;
 }
 
+const MAX_FILE_SIZE = 50 * 1024 * 1024;
+const MAX_FILES = 10;
+const allowedEvidenceTypes = [
+  "application/pdf",
+  "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",
+  "application/zip",
+  "application/gzip",
+  "application/x-tar",
+  "text/plain",
+  "text/csv",
+  "application/json",
+  "video/mp4",
+  "video/webm",
+  "video/quicktime",
+  "video/x-msvideo",
+];
+
 const statusStyles: Record<string, { label: string; color: string; textColor: string }> = {
   open: {
     label: "Open",
     color: "bg-amber-500/10",
-    textColor: "text-amber-500",
+    textColor: "text-amber-600 dark:text-amber-400",
   },
   under_review: {
-    label: "Under Review",
+    label: "Under review",
     color: "bg-secondary/10",
     textColor: "text-secondary",
   },
@@ -65,15 +115,8 @@ const statusStyles: Record<string, { label: string; color: string; textColor: st
   },
 };
 
-const allowedFileTypes = [
-  "image/",
-  "application/pdf",
-  "text/plain",
-  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-];
-
 function formatDate(value?: string) {
-  if (!value) return "—";
+  if (!value) return "Unavailable";
   return new Date(value).toLocaleString(undefined, {
     month: "short",
     day: "numeric",
@@ -83,15 +126,35 @@ function formatDate(value?: string) {
   });
 }
 
+function formatFileSize(size?: number | null) {
+  if (!size) return "No file";
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(0)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+
 function createPreviewId(file: File) {
   return `${file.name}-${file.size}-${file.lastModified}`;
 }
 
 function isAcceptedFile(file: File) {
-  return (
-    allowedFileTypes.some((allowed) => file.type.startsWith(allowed)) ||
-    file.name.toLowerCase().endsWith(".docx")
-  );
+  return file.type.startsWith("image/") || allowedEvidenceTypes.includes(file.type);
+}
+
+function getEvidenceIcon(type?: string | null) {
+  if (type?.startsWith("image/")) return FileImage;
+  if (type?.startsWith("video/")) return FileVideo;
+  if (type?.includes("zip") || type?.includes("tar") || type?.includes("gzip")) return FileArchive;
+  return FileText;
+}
+
+function getEvidenceUrl(disputeId: string, evidenceId: string | number, preview = false) {
+  const suffix = preview ? "?preview=1" : "";
+  return `/api/disputes/${disputeId}/evidence/${evidenceId}${suffix}`;
+}
+
+function normalizeStatus(status?: string) {
+  if (!status) return "open";
+  return status.startsWith("resolved") ? "resolved" : status;
 }
 
 export default function DisputeResolutionPage({ params }: { params: { id: string } }) {
@@ -100,83 +163,120 @@ export default function DisputeResolutionPage({ params }: { params: { id: string
 
 function DisputeResolutionView({ disputeId }: { disputeId: string }) {
   const [dispute, setDispute] = useState<DisputeDetails | null>(null);
+  const [evidence, setEvidence] = useState<EvidenceItem[]>([]);
   const [loading, setLoading] = useState(true);
+  const [evidenceLoading, setEvidenceLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [accessDenied, setAccessDenied] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [previews, setPreviews] = useState<PreviewFile[]>([]);
   const [notes, setNotes] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const previewsRef = useRef<PreviewFile[]>([]);
 
-  useEffect(() => {
-    let mounted = true;
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setLoading(true);
-    setError(null);
-
-    fetch(`/api/disputes/${disputeId}`, {
+  const fetchDispute = useCallback(async () => {
+    const res = await fetch(`/api/disputes/${disputeId}`, {
       credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-      .then(async (res) => {
-        if (!res.ok) {
-          const data = await res.json().catch(() => null);
-          throw new Error(data?.error || "Unable to load dispute details.");
-        }
-        return res.json();
-      })
-      .then((data) => {
-        if (!mounted) return;
-        setDispute(data);
-      })
-      .catch((err) => {
-        if (!mounted) return;
-        setError(err.message || "Unable to load dispute details.");
-      })
-      .finally(() => {
-        if (mounted) setLoading(false);
-      });
+      headers: { "Content-Type": "application/json" },
+    });
+    if (res.status === 403) {
+      setAccessDenied(true);
+      throw new Error("Access denied");
+    }
+    if (!res.ok) {
+      const data = await res.json().catch(() => null);
+      throw new Error(data?.error || "Unable to load dispute details.");
+    }
+    setAccessDenied(false);
+    setDispute(await res.json());
+  }, [disputeId]);
 
-    return () => {
-      mounted = false;
-    };
+  const fetchEvidence = useCallback(async () => {
+    const res = await fetch(`/api/disputes/${disputeId}/evidence`, {
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+    });
+    if (res.status === 403) {
+      setAccessDenied(true);
+      throw new Error("Access denied");
+    }
+    if (!res.ok) {
+      const data = await res.json().catch(() => null);
+      throw new Error(data?.error || "Unable to load evidence.");
+    }
+    const data = await res.json();
+    setEvidence(Array.isArray(data.evidence) ? data.evidence : []);
   }, [disputeId]);
 
+  const refreshDispute = useCallback(
+    async (showLoading = false) => {
+      if (showLoading) setLoading(true);
+      setError(null);
+      try {
+        await Promise.all([fetchDispute(), fetchEvidence()]);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Unable to load dispute.";
+        setError(message);
+      } finally {
+        setLoading(false);
+        setEvidenceLoading(false);
+      }
+    },
+    [fetchDispute, fetchEvidence],
+  );
+
+  useEffect(() => {
+    refreshDispute(true);
+    const timer = window.setInterval(() => refreshDispute(false), 15000);
+    return () => window.clearInterval(timer);
+  }, [refreshDispute]);
+
+  useEffect(() => {
+    previewsRef.current = previews;
+  }, [previews]);
+
   useEffect(() => {
     return () => {
-      previews.forEach((preview) => URL.revokeObjectURL(preview.url));
+      previewsRef.current.forEach((preview) => URL.revokeObjectURL(preview.url));
     };
-  }, [previews]);
+  }, []);
+
+  const timeline = useMemo(() => {
+    const status = normalizeStatus(dispute?.status);
+    const evidenceSubmitted = evidence.length > 0 || status === "under_review" || status === "resolved";
+    return [
+      { key: "opened", label: "Opened", date: dispute?.created_at, complete: Boolean(dispute), active: status === "open" && !evidenceSubmitted },
+      { key: "evidence", label: "Evidence submitted", date: evidence.at(-1)?.created_at, complete: evidenceSubmitted, active: status === "open" && evidence.length > 0 },
+      { key: "review", label: "Under review", date: dispute?.updated_at, complete: status === "under_review" || status === "resolved", active: status === "under_review" },
+      { key: "resolved", label: "Resolved", date: dispute?.resolved_at ?? dispute?.updated_at, complete: status === "resolved", active: status === "resolved" },
+    ];
+  }, [dispute, evidence]);
 
   const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(event.target.files ?? []);
     if (files.length === 0) return;
 
+    const currentIds = new Set(selectedFiles.map(createPreviewId));
     const nextFiles: File[] = [];
     const invalidFiles: string[] = [];
     const sizeExceeded: string[] = [];
 
     for (const file of files) {
-      if (nextFiles.length + selectedFiles.length >= 5) break;
+      if (selectedFiles.length + nextFiles.length >= MAX_FILES) break;
       if (!isAcceptedFile(file)) {
         invalidFiles.push(file.name);
         continue;
       }
-      if (file.size > 10 * 1024 * 1024) {
+      if (file.size > MAX_FILE_SIZE) {
         sizeExceeded.push(file.name);
         continue;
       }
-      nextFiles.push(file);
+      if (!currentIds.has(createPreviewId(file))) nextFiles.push(file);
     }
 
-    if (invalidFiles.length > 0) {
-      toast.error(`Unsupported file type: ${invalidFiles.join(", ")}`);
-    }
-    if (sizeExceeded.length > 0) {
-      toast.error(`File size too large: ${sizeExceeded.join(", ")}`);
-    }
+    if (invalidFiles.length > 0) toast.error(`Unsupported file type: ${invalidFiles.join(", ")}`);
+    if (sizeExceeded.length > 0) toast.error(`File size too large: ${sizeExceeded.join(", ")}`);
 
     if (nextFiles.length === 0) {
       event.target.value = "";
@@ -189,79 +289,181 @@ function DisputeResolutionView({ disputeId }: { disputeId: string }) {
       type: file.type,
       size: file.size,
       url: URL.createObjectURL(file),
+      progress: 0,
+      state: "queued" as const,
     }));
 
-    setSelectedFiles((current) => [...current, ...nextFiles].slice(0, 5));
-    setPreviews((current) => [...current, ...newPreviews].slice(0, 5));
+    setSelectedFiles((current) => [...current, ...nextFiles].slice(0, MAX_FILES));
+    setPreviews((current) => [...current, ...newPreviews].slice(0, MAX_FILES));
     event.target.value = "";
   };
 
   const handleRemoveFile = (removeId: string) => {
-    setSelectedFiles((current) =>
-      current.filter((file) => createPreviewId(file) !== removeId),
-    );
-    setPreviews((current) => current.filter((preview) => preview.id !== removeId));
+    setSelectedFiles((current) => current.filter((file) => createPreviewId(file) !== removeId));
+    setPreviews((current) => {
+      const removed = current.find((preview) => preview.id === removeId);
+      if (removed) URL.revokeObjectURL(removed.url);
+      return current.filter((preview) => preview.id !== removeId);
+    });
   };
 
+  const uploadEvidenceFile = useCallback(
+    (file: File, description: string) => {
+      return new Promise<void>((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        const formData = new FormData();
+        formData.append("files", file);
+        if (description) formData.append("description", description);
+
+        const previewId = createPreviewId(file);
+        setPreviews((current) =>
+          current.map((preview) =>
+            preview.id === previewId ? { ...preview, state: "uploading", progress: 2 } : preview,
+          ),
+        );
+
+        xhr.upload.onprogress = (event) => {
+          if (!event.lengthComputable) return;
+          const progress = Math.min(99, Math.round((event.loaded / event.total) * 100));
+          setPreviews((current) =>
+            current.map((preview) => (preview.id === previewId ? { ...preview, progress } : preview)),
+          );
+        };
+
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            setPreviews((current) =>
+              current.map((preview) =>
+                preview.id === previewId ? { ...preview, state: "complete", progress: 100 } : preview,
+              ),
+            );
+            resolve();
+            return;
+          }
+
+          let message = "Evidence upload failed.";
+          try {
+            message = JSON.parse(xhr.responseText)?.error || message;
+          } catch {
+            message = "Evidence upload failed.";
+          }
+          setPreviews((current) =>
+            current.map((preview) =>
+              preview.id === previewId ? { ...preview, state: "error", error: message } : preview,
+            ),
+          );
+          reject(new Error(message));
+        };
+
+        xhr.onerror = () => {
+          const message = "Evidence upload failed. Check your connection and try again.";
+          setPreviews((current) =>
+            current.map((preview) =>
+              preview.id === previewId ? { ...preview, state: "error", error: message } : preview,
+            ),
+          );
+          reject(new Error(message));
+        };
+
+        xhr.open("POST", `/api/disputes/${disputeId}/evidence`);
+        xhr.withCredentials = true;
+        xhr.send(formData);
+      });
+    },
+    [disputeId],
+  );
+
   const submitEvidence = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    if (selectedFiles.length === 0 && notes.trim().length === 0) {
+    const trimmedNotes = notes.trim();
+    if (selectedFiles.length === 0 && trimmedNotes.length === 0) {
       toast.error("Add evidence or notes before submitting.");
       return;
     }
 
     setIsSubmitting(true);
-    await new Promise((resolve) => setTimeout(resolve, 800));
-    setIsSubmitting(false);
-    setSelectedFiles([]);
-    setPreviews([]);
-    setNotes("");
-    toast.success("Dispute evidence submitted successfully.");
+    try {
+      if (selectedFiles.length === 0) {
+        const formData = new FormData();
+        formData.append("description", trimmedNotes);
+        const res = await fetch(`/api/disputes/${disputeId}/evidence`, {
+          method: "POST",
+          credentials: "include",
+          body: formData,
+        });
+        if (!res.ok) {
+          const data = await res.json().catch(() => null);
+          throw new Error(data?.error || "Evidence note could not be submitted.");
+        }
+      } else {
+        for (const file of selectedFiles) {
+          await uploadEvidenceFile(file, trimmedNotes);
+        }
+      }
+
+      setSelectedFiles([]);
+      setPreviews((current) => {
+        current.forEach((preview) => URL.revokeObjectURL(preview.url));
+        return [];
+      });
+      setNotes("");
+      await refreshDispute(false);
+      toast.success("Evidence submitted for review.");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Evidence upload failed.";
+      toast.error(message);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
-  const status = statusStyles[dispute?.status ?? "open"] ?? statusStyles.open;
+  const status = statusStyles[normalizeStatus(dispute?.status)] ?? statusStyles.open;
 
   return (
-    <div className="p-8">
+    <div className="p-4 sm:p-6 lg:p-8">
       <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
         <div>
-          <p className="text-sm font-medium uppercase tracking-[0.24em] text-muted-foreground">
+          <p className="text-sm font-medium uppercase tracking-[0.18em] text-muted-foreground">
             Dispute resolution
           </p>
-          <h1 className="mt-2 text-3xl font-bold">Review dispute</h1>
+          <h1 className="mt-2 text-2xl font-bold sm:text-3xl">Evidence review</h1>
           <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-            Use this page to view dispute details, attach supporting evidence, and track the resolution outcome.
+            {dispute?.job_title ?? "Loading dispute workspace"}
           </p>
         </div>
-        <Link href="/dashboard/disputes" className="self-start">
-          <Button asChild variant="outline" size="sm">
-            <span className="inline-flex items-center gap-2">
-              <ArrowLeft className="h-4 w-4" /> Back to disputes
-            </span>
-          </Button>
-        </Link>
+        <Button asChild variant="outline" size="sm" className="self-start">
+          <Link href="/dashboard/disputes">
+            <ArrowLeft className="h-4 w-4" /> Back to disputes
+          </Link>
+        </Button>
       </div>
 
       {loading ? (
-        <div className="mt-10 rounded-3xl border border-border/50 bg-card/80 p-8 text-center text-muted-foreground">
-          Loading dispute details…
+        <div className="mt-10 rounded-xl border border-border/50 bg-card/80 p-8 text-center text-muted-foreground">
+          Loading dispute details...
+        </div>
+      ) : accessDenied ? (
+        <div className="mt-10 rounded-xl border border-destructive/50 bg-destructive/10 p-8 text-center text-destructive">
+          <ShieldAlert className="mx-auto h-8 w-8" />
+          <p className="mt-3 font-semibold">Restricted dispute</p>
+          <p className="mt-2 text-sm">Only the contract parties and moderators can view this evidence.</p>
         </div>
       ) : error ? (
-        <div className="mt-10 rounded-3xl border border-destructive/50 bg-destructive/10 p-8 text-center text-destructive">
+        <div className="mt-10 rounded-xl border border-destructive/50 bg-destructive/10 p-8 text-center text-destructive">
           <p className="font-semibold">Unable to load dispute</p>
           <p className="mt-2">{error}</p>
         </div>
       ) : (
-        <div className="mt-8 grid gap-6 xl:grid-cols-[1.6fr_1fr]">
+        <div className="mt-8 grid gap-6 xl:grid-cols-[minmax(0,1.45fr)_minmax(340px,0.85fr)]">
           <div className="space-y-6">
-            <Card className="p-6">
-              <CardHeader className="border-b border-border/50 pb-4">
+            <Card className="p-0">
+              <CardHeader className="border-b border-border/50">
                 <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                   <div>
-                    <CardTitle className="text-2xl">{dispute?.job_title ?? "Dispute details"}</CardTitle>
+                    <CardTitle className="text-xl sm:text-2xl">{dispute?.job_title ?? "Dispute details"}</CardTitle>
                     <CardDescription>
-                      {dispute?.reason ? "Reason and context for this dispute." : "No dispute reason available."}
+                      Raised by {dispute?.raised_by_username ?? "unknown user"} on {formatDate(dispute?.created_at)}
                     </CardDescription>
                   </div>
                   <Badge className={`${status.color} ${status.textColor} border-0`}>
@@ -272,73 +474,52 @@ function DisputeResolutionView({ disputeId }: { disputeId: string }) {
 
               <CardContent className="space-y-6">
                 <div className="grid gap-4 sm:grid-cols-2">
-                  <div className="rounded-2xl border border-border/50 bg-muted/40 p-4">
+                  <div className="rounded-lg border border-border/50 bg-muted/40 p-4">
                     <p className="text-sm text-muted-foreground">Raised by</p>
-                    <p className="mt-2 font-semibold text-foreground">
+                    <p className="mt-2 break-words font-semibold text-foreground">
                       {dispute?.raised_by_username ?? "Unknown"}
                     </p>
-                    <p className="mt-1 text-sm text-muted-foreground">{dispute?.raised_by_wallet ?? "Wallet unavailable"}</p>
+                    <p className="mt-1 break-all text-sm text-muted-foreground">{dispute?.raised_by_wallet ?? "Wallet unavailable"}</p>
                   </div>
-                  <div className="rounded-2xl border border-border/50 bg-muted/40 p-4">
-                    <p className="text-sm text-muted-foreground">Created</p>
+                  <div className="rounded-lg border border-border/50 bg-muted/40 p-4">
+                    <p className="text-sm text-muted-foreground">Last update</p>
                     <p className="mt-2 font-semibold text-foreground">
-                      {formatDate(dispute?.created_at)}
+                      {formatDate(dispute?.updated_at ?? dispute?.created_at)}
                     </p>
-                    <p className="mt-1 text-sm text-muted-foreground">Last updated {formatDate(dispute?.updated_at ?? dispute?.created_at)}</p>
+                    <p className="mt-1 text-sm text-muted-foreground">{evidence.length} evidence item{evidence.length === 1 ? "" : "s"}</p>
                   </div>
                 </div>
 
                 <div className="space-y-2">
                   <p className="text-sm font-semibold">Dispute reason</p>
-                  <div className="rounded-3xl border border-border/50 bg-background p-4 text-sm leading-6 text-muted-foreground">
+                  <div className="rounded-lg border border-border/50 bg-background p-4 text-sm leading-6 text-muted-foreground">
                     {dispute?.reason ?? "No additional information provided."}
                   </div>
                 </div>
-
-                <div className="space-y-2">
-                  <p className="text-sm font-semibold">Current resolution outcome</p>
-                  <div className="rounded-3xl border border-border/50 bg-card/80 p-4">
-                    <p className="text-sm text-muted-foreground">Status</p>
-                    <p className="mt-2 text-lg font-semibold text-foreground">
-                      {dispute?.status === "resolved"
-                        ? "Resolved"
-                        : dispute?.status === "under_review"
-                        ? "In review"
-                        : "Open"}
-                    </p>
-                    <p className="mt-2 text-sm text-muted-foreground">
-                      {dispute?.status === "resolved"
-                        ? dispute?.resolution ?? "Final outcome has been recorded."
-                        : "This dispute is being evaluated by the platform team and DAO voting integration will be added soon."}
-                    </p>
-                  </div>
-                </div>
               </CardContent>
             </Card>
 
             <form onSubmit={submitEvidence} className="space-y-6">
-              <Card className="p-6">
-                <CardHeader className="border-b border-border/50 pb-4">
-                  <div>
-                    <CardTitle>Evidence upload</CardTitle>
-                    <CardDescription>
-                      Share files and notes to support the dispute resolution review.
-                    </CardDescription>
-                  </div>
+              <Card className="p-0">
+                <CardHeader className="border-b border-border/50">
+                  <CardTitle>Submit evidence</CardTitle>
+                  <CardDescription>
+                    Documents, images, videos, archives, and notes are accepted.
+                  </CardDescription>
                 </CardHeader>
 
                 <CardContent className="space-y-6">
-                  <div className="grid gap-4 sm:grid-cols-[1fr_auto]">
+                  <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_160px]">
                     <div className="space-y-2">
                       <Label htmlFor="dispute-evidence" className="text-sm font-semibold">
-                        Supporting evidence
+                        Evidence files
                       </Label>
                       <input
                         id="dispute-evidence"
                         ref={fileInputRef}
                         type="file"
                         multiple
-                        accept="image/*,.pdf,.docx,.txt"
+                        accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.gz,.tar,.txt,.csv,.json"
                         onChange={handleFileUpload}
                         className="sr-only"
                       />
@@ -347,157 +528,216 @@ function DisputeResolutionView({ disputeId }: { disputeId: string }) {
                         variant="outline"
                         className="w-full justify-start text-muted-foreground hover:text-foreground"
                         onClick={() => fileInputRef.current?.click()}
+                        disabled={isSubmitting}
                       >
-                        <Upload className="mr-2 h-4 w-4" />
+                        <Upload className="h-4 w-4" />
                         Choose files
                       </Button>
                       <p className="text-xs text-muted-foreground">
-                        Maximum 5 files, 10MB each. Supported: images, PDF, DOCX, TXT.
+                        Up to {MAX_FILES} files, {MAX_FILE_SIZE / (1024 * 1024)} MB each.
                       </p>
                     </div>
-                    <div className="rounded-3xl border border-border/50 bg-muted/40 p-4">
-                      <p className="text-sm text-muted-foreground">Selected files</p>
-                      <p className="mt-2 text-lg font-semibold text-foreground">{selectedFiles.length}</p>
+                    <div className="rounded-lg border border-border/50 bg-muted/40 p-4">
+                      <p className="text-sm text-muted-foreground">Queued</p>
+                      <p className="mt-2 text-2xl font-semibold text-foreground">{selectedFiles.length}</p>
                     </div>
                   </div>
 
                   {previews.length > 0 && (
                     <div className="grid gap-3 sm:grid-cols-2">
-                      {previews.map((file) => (
-                        <div
-                          key={file.id}
-                          className="group overflow-hidden rounded-3xl border border-border/50 bg-background"
-                        >
-                          {file.type.startsWith("image/") ? (
-                            // eslint-disable-next-line @next/next/no-img-element
-                            <img
-                              src={file.url}
-                              alt={file.name}
-                              className="h-40 w-full object-cover"
-                            />
-                          ) : (
-                            <div className="flex h-40 items-center justify-center bg-muted/80 text-muted-foreground">
-                              <FilePlus className="h-8 w-8" />
-                            </div>
-                          )}
-                          <div className="flex items-center justify-between gap-2 p-4">
-                            <div>
-                              <p className="font-semibold">{file.name}</p>
-                              <p className="text-xs text-muted-foreground">{(file.size / 1024 / 1024).toFixed(1)} MB</p>
+                      {previews.map((file) => {
+                        const Icon = getEvidenceIcon(file.type);
+                        return (
+                          <div key={file.id} className="overflow-hidden rounded-lg border border-border/50 bg-background">
+                            {file.type.startsWith("image/") ? (
+                              // eslint-disable-next-line @next/next/no-img-element
+                              <img src={file.url} alt={file.name} className="h-40 w-full object-cover" />
+                            ) : (
+                              <div className="flex h-40 items-center justify-center bg-muted/80 text-muted-foreground">
+                                <Icon className="h-8 w-8" />
+                              </div>
+                            )}
+                            <div className="space-y-3 p-4">
+                              <div className="flex items-start justify-between gap-3">
+                                <div className="min-w-0">
+                                  <p className="truncate font-semibold">{file.name}</p>
+                                  <p className="text-xs text-muted-foreground">{formatFileSize(file.size)}</p>
+                                </div>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => handleRemoveFile(file.id)}
+                                  disabled={isSubmitting}
+                                  aria-label={`Remove ${file.name}`}
+                                >
+                                  <Trash2 className="h-4 w-4" />
+                                </Button>
+                              </div>
+                              {(file.state === "uploading" || file.state === "complete" || file.state === "error") && (
+                                <div className="space-y-2">
+                                  <Progress value={file.progress} />
+                                  <p className="text-xs text-muted-foreground">
+                                    {file.state === "error" ? file.error : `${file.progress}% uploaded`}
+                                  </p>
+                                </div>
+                              )}
                             </div>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => handleRemoveFile(file.id)}
-                            >
-                              ✕
-                            </Button>
                           </div>
-                        </div>
-                      ))}
+                        );
+                      })}
                     </div>
                   )}
 
                   <div className="space-y-2">
                     <Label htmlFor="evidence-notes" className="text-sm font-semibold">
-                      Notes for the review team
+                      Evidence notes
                     </Label>
                     <Textarea
                       id="evidence-notes"
                       value={notes}
                       onChange={(event) => setNotes(event.target.value)}
-                      placeholder="Explain why this evidence is important for the dispute..."
+                      placeholder="Add context for moderators and the other party..."
                       rows={4}
+                      disabled={isSubmitting}
                     />
                   </div>
                 </CardContent>
 
                 <CardFooter className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                   <div className="text-sm text-muted-foreground">
-                    Evidence updates are saved for review, and DAO voting is planned for a later phase.
+                    Files are validated before upload and stored with an integrity hash.
                   </div>
                   <Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-                    {isSubmitting ? "Submitting…" : "Submit evidence"}
+                    {isSubmitting ? "Submitting..." : "Submit evidence"}
                   </Button>
                 </CardFooter>
               </Card>
             </form>
+
+            <Card className="p-0">
+              <CardHeader className="border-b border-border/50">
+                <CardTitle>Evidence list</CardTitle>
+                <CardDescription>Chronological record for this dispute.</CardDescription>
+              </CardHeader>
+              <CardContent>
+                {evidenceLoading ? (
+                  <p className="text-sm text-muted-foreground">Loading evidence...</p>
+                ) : evidence.length === 0 ? (
+                  <div className="rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+                    No evidence has been submitted yet.
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {evidence.map((item) => {
+                      const type = item.mime_type ?? item.file_type;
+                      const Icon = getEvidenceIcon(type);
+                      const canPreview = Boolean(item.file_size) && (
+                        type?.startsWith("image/") || type?.startsWith("video/") || type === "application/pdf" || type?.startsWith("text/")
+                      );
+                      return (
+                        <div key={item.id} className="rounded-lg border border-border/50 bg-background p-4">
+                          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                            <div className="flex min-w-0 gap-3">
+                              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                                <Icon className="h-5 w-5" />
+                              </span>
+                              <div className="min-w-0">
+                                <p className="truncate font-semibold">{item.file_name}</p>
+                                <p className="mt-1 text-xs text-muted-foreground">
+                                  {formatDate(item.created_at)} by {item.uploaded_by_username ?? "unknown"}
+                                </p>
+                                {item.description && (
+                                  <p className="mt-2 text-sm leading-6 text-muted-foreground">{item.description}</p>
+                                )}
+                                <div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
+                                  <span>{formatFileSize(item.file_size)}</span>
+                                  {item.file_hash && <span className="break-all">SHA-256 {item.file_hash.slice(0, 12)}...</span>}
+                                </div>
+                              </div>
+                            </div>
+                            {item.file_size ? (
+                              <div className="flex gap-2">
+                                {canPreview ? (
+                                  <Button asChild variant="outline" size="sm">
+                                    <a href={getEvidenceUrl(disputeId, item.id, true)} target="_blank" rel="noreferrer">
+                                      <Eye className="h-4 w-4" /> Preview
+                                    </a>
+                                  </Button>
+                                ) : null}
+                                <Button asChild variant="outline" size="sm">
+                                  <a href={getEvidenceUrl(disputeId, item.id)}>
+                                    <Download className="h-4 w-4" /> Download
+                                  </a>
+                                </Button>
+                              </div>
+                            ) : null}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
           </div>
 
           <div className="space-y-6">
-            <Card className="p-6">
-              <CardHeader className="border-b border-border/50 pb-4">
-                <div>
-                  <CardTitle>Voting status</CardTitle>
-                  <CardDescription>
-                    Placeholder for future on-chain DAO dispute voting and governance.
-                  </CardDescription>
-                </div>
+            <Card className="p-0">
+              <CardHeader className="border-b border-border/50">
+                <CardTitle>Status timeline</CardTitle>
+                <CardDescription>Opened, evidence, review, and resolution stages.</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
-                <div className="rounded-3xl border border-border/50 bg-muted/40 p-4">
-                  <div className="flex items-center justify-between gap-3">
-                    <div>
-                      <p className="text-sm font-semibold">DAO voting</p>
-                      <p className="text-sm text-muted-foreground">Not yet active</p>
+                {timeline.map((item, index) => (
+                  <div key={item.key} className="flex gap-3">
+                    <div className="flex flex-col items-center">
+                      <span
+                        className={`flex h-8 w-8 items-center justify-center rounded-full border ${
+                          item.complete
+                            ? "border-accent bg-accent/10 text-accent"
+                            : item.active
+                              ? "border-secondary bg-secondary/10 text-secondary"
+                              : "border-border bg-muted text-muted-foreground"
+                        }`}
+                      >
+                        {item.complete ? <CheckCircle2 className="h-4 w-4" /> : <Clock3 className="h-4 w-4" />}
+                      </span>
+                      {index < timeline.length - 1 && <span className="h-10 w-px bg-border" />}
+                    </div>
+                    <div className="pb-4">
+                      <p className="font-semibold">{item.label}</p>
+                      <p className="mt-1 text-sm text-muted-foreground">{item.complete || item.active ? formatDate(item.date) : "Pending"}</p>
                     </div>
-                    <Badge className="border-0 bg-secondary/10 text-secondary">Coming soon</Badge>
-                  </div>
-                  <div className="mt-4 h-2 overflow-hidden rounded-full bg-border/20">
-                    <div className="h-full w-20 rounded-full bg-secondary" />
-                  </div>
-                </div>
-                <div className="grid gap-3 rounded-3xl border border-border/50 bg-background p-4">
-                  <div className="flex items-center gap-3">
-                    <Clock3 className="h-5 w-5 text-secondary" />
-                    <p className="text-sm text-foreground">Waiting for governance integration</p>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <Users className="h-5 w-5 text-muted-foreground" />
-                    <p className="text-sm text-muted-foreground">Community voting will be enabled in a future release.</p>
                   </div>
-                </div>
+                ))}
               </CardContent>
             </Card>
 
-            <Card className="p-6">
-              <CardHeader className="border-b border-border/50 pb-4">
-                <div>
-                  <CardTitle>Resolution outcome</CardTitle>
-                  <CardDescription>
-                    Track the dispute status and final decision summary.
-                  </CardDescription>
-                </div>
+            <Card className="p-0">
+              <CardHeader className="border-b border-border/50">
+                <CardTitle>Access control</CardTitle>
+                <CardDescription>Evidence is scoped to the dispute record.</CardDescription>
               </CardHeader>
               <CardContent className="space-y-4">
-                <div className="grid gap-4 rounded-3xl border border-border/50 bg-muted/40 p-4">
-                  <div className="flex items-center gap-3">
-                    <span className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary/10 text-secondary">
-                      <ShieldCheck className="h-5 w-5" />
-                    </span>
+                <div className="rounded-lg border border-border/50 bg-muted/40 p-4">
+                  <div className="flex items-start gap-3">
+                    <ShieldCheck className="mt-0.5 h-5 w-5 text-accent" />
                     <div>
-                      <p className="font-semibold">
-                        {dispute?.status === "resolved" ? "Final outcome recorded" : "Resolution pending"}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {dispute?.status === "resolved"
-                          ? "This dispute has been closed and the outcome is available below."
-                          : "The review team will publish a decision after evidence is evaluated."}
+                      <p className="font-semibold">Authorized viewers only</p>
+                      <p className="mt-1 text-sm leading-6 text-muted-foreground">
+                        Contract parties and moderators can view, submit, preview, and download evidence.
                       </p>
                     </div>
                   </div>
-                  {dispute?.status === "resolved" ? (
-                    <div className="rounded-3xl border border-border/50 bg-background p-4 text-sm">
-                      <p className="font-semibold">Outcome summary</p>
-                      <p className="mt-2 text-muted-foreground">{dispute.resolution ?? "No resolution details were provided."}</p>
-                      <p className="mt-3 text-xs text-muted-foreground">Resolved at {formatDate(dispute.resolved_at ?? dispute.updated_at)}</p>
-                    </div>
-                  ) : (
-                    <div className="rounded-3xl border border-border/50 bg-background p-4 text-sm text-muted-foreground">
-                      Final outcome information will appear here once the dispute is resolved.
-                    </div>
-                  )}
+                </div>
+                <div className="rounded-lg border border-border/50 bg-background p-4">
+                  <p className="text-sm font-semibold">Resolution outcome</p>
+                  <p className="mt-2 text-sm leading-6 text-muted-foreground">
+                    {normalizeStatus(dispute?.status) === "resolved"
+                      ? dispute?.resolution ?? "Final outcome has been recorded."
+                      : "A moderator decision will appear here after review."}
+                  </p>
                 </div>
               </CardContent>
             </Card>
diff --git a/lib/validations/index.ts b/lib/validations/index.ts
index 285c2b1..53deec9 100644
--- a/lib/validations/index.ts
+++ b/lib/validations/index.ts
@@ -168,6 +168,17 @@ export const ALLOWED_DELIVERABLE_MIME_TYPES = [
 export const MAX_DELIVERABLE_FILE_SIZE = 50 * 1024 * 1024 // 50 MB
 export const MAX_DELIVERABLE_FILES_PER_BATCH = 10
 
+export const ALLOWED_DISPUTE_EVIDENCE_MIME_TYPES = [
+  ...ALLOWED_DELIVERABLE_MIME_TYPES,
+  'video/mp4',
+  'video/webm',
+  'video/quicktime',
+  'video/x-msvideo',
+] as const
+
+export const MAX_DISPUTE_EVIDENCE_FILE_SIZE = 50 * 1024 * 1024 // 50 MB
+export const MAX_DISPUTE_EVIDENCE_FILES_PER_BATCH = 10
+
 export const DeliverableMetadataSchema = z.object({
   id: z.string().uuid(),
   milestone_id: z.string().uuid(),
diff --git a/scripts/006-dispute-enhancements.sql b/scripts/006-dispute-enhancements.sql
index 8562192..92bafc8 100644
--- a/scripts/006-dispute-enhancements.sql
+++ b/scripts/006-dispute-enhancements.sql
@@ -43,4 +43,14 @@ CREATE TABLE IF NOT EXISTS dispute_resolution_log (
 -- Add indexes for performance
 CREATE INDEX IF NOT EXISTS idx_dispute_evidence_dispute ON dispute_evidence(dispute_id);
 CREATE INDEX IF NOT EXISTS idx_dispute_comments_dispute ON dispute_comments(dispute_id);
-CREATE INDEX IF NOT EXISTS idx_dispute_resolution_log_dispute ON dispute_resolution_log(dispute_id);
\ No newline at end of file
+CREATE INDEX IF NOT EXISTS idx_dispute_resolution_log_dispute ON dispute_resolution_log(dispute_id);
+
+-- Add encrypted local evidence metadata used by the dispute evidence API.
+ALTER TABLE dispute_evidence
+ADD COLUMN IF NOT EXISTS stored_filename TEXT,
+ADD COLUMN IF NOT EXISTS mime_type TEXT,
+ADD COLUMN IF NOT EXISTS file_size INTEGER,
+ADD COLUMN IF NOT EXISTS file_hash TEXT,
+ADD COLUMN IF NOT EXISTS encryption_iv TEXT,
+ADD COLUMN IF NOT EXISTS file_path TEXT,
+ADD COLUMN IF NOT EXISTS is_removed BOOLEAN DEFAULT FALSE;