diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 146e603..b78a51a 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -10,6 +10,7 @@
 'use client'
 
 import { useState, useEffect, useCallback } from 'react'
+import Link from 'next/link'
 import { ForumLayout } from '@/components/layout/forum-layout'
 import { Breadcrumbs } from '@/components/breadcrumbs'
 import { AgeGateDialog } from '@/components/age-gate-dialog'
@@ -438,6 +439,23 @@ export default function SettingsPage() {
               </div>
             </fieldset>
 
+            {/* My Reports link */}
+            <div className="rounded-lg border border-border p-4">
+              <Link
+                href="/settings/reports"
+                className={cn(
+                  'text-sm font-medium text-primary transition-colors',
+                  'hover:text-primary-hover underline underline-offset-4',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                )}
+              >
+                View my reports and appeals
+              </Link>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Track the status of reports you have submitted and appeal dismissed reports.
+              </p>
+            </div>
+
             {/* Save */}
             <div className="flex justify-end">
               <button
diff --git a/src/app/settings/reports/page.test.tsx b/src/app/settings/reports/page.test.tsx
new file mode 100644
index 0000000..ec285ba
--- /dev/null
+++ b/src/app/settings/reports/page.test.tsx
@@ -0,0 +1,169 @@
+/**
+ * Tests for My Reports page.
+ * @see specs/prd-web.md Section M7 (Appeals process)
+ * @see decisions/content-moderation.md
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { axe } from 'vitest-axe'
+import MyReportsPage from './page'
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    back: vi.fn(),
+  }),
+  redirect: vi.fn(),
+}))
+
+vi.mock('@/hooks/use-auth', () => ({
+  useAuth: () => ({
+    user: {
+      did: 'did:plc:user-alice-001',
+      handle: 'alice.bsky.social',
+      displayName: 'Alice',
+      avatarUrl: null,
+    },
+    isAuthenticated: true,
+    isLoading: false,
+    getAccessToken: () => 'mock-access-token',
+    login: vi.fn(),
+    logout: vi.fn(),
+    setSessionFromCallback: vi.fn(),
+    authFetch: vi.fn(),
+  }),
+}))
+
+describe('MyReportsPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders page heading', async () => {
+    render(<MyReportsPage />)
+    expect(screen.getByRole('heading', { name: /my reports/i })).toBeInTheDocument()
+  })
+
+  it('renders breadcrumbs with link to settings', async () => {
+    render(<MyReportsPage />)
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('loads and displays user reports from API', async () => {
+    render(<MyReportsPage />)
+    // Wait for reports to load -- check for exact reason type labels
+    await waitFor(() => {
+      expect(screen.getByText('Spam')).toBeInTheDocument()
+    })
+    expect(screen.getByText('Harassment')).toBeInTheDocument()
+    expect(screen.getByText('Misleading')).toBeInTheDocument()
+    expect(screen.getByText('Violation')).toBeInTheDocument()
+  })
+
+  it('shows report status badges', async () => {
+    render(<MyReportsPage />)
+    await waitFor(() => {
+      const pendingBadges = screen.getAllByText('Pending')
+      expect(pendingBadges.length).toBeGreaterThan(0)
+    })
+  })
+
+  it('shows Appeal button only for dismissed reports', async () => {
+    render(<MyReportsPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Misleading')).toBeInTheDocument()
+    })
+    // Only the dismissed report (id: 3) should have an Appeal button
+    const appealButtons = screen.getAllByRole('button', { name: /^appeal$/i })
+    expect(appealButtons.length).toBe(1)
+  })
+
+  it('opens appeal form when Appeal button is clicked', async () => {
+    const user = userEvent.setup()
+    render(<MyReportsPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Misleading')).toBeInTheDocument()
+    })
+    const appealButton = screen.getByRole('button', { name: /^appeal$/i })
+    await user.click(appealButton)
+    expect(screen.getByLabelText(/reason for appeal/i)).toBeInTheDocument()
+  })
+
+  it('submits appeal with reason text', async () => {
+    const user = userEvent.setup()
+    render(<MyReportsPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Misleading')).toBeInTheDocument()
+    })
+    await user.click(screen.getByRole('button', { name: /^appeal$/i }))
+    await user.type(
+      screen.getByLabelText(/reason for appeal/i),
+      'I believe this was wrongly dismissed'
+    )
+    await user.click(screen.getByRole('button', { name: /submit appeal/i }))
+    await waitFor(() => {
+      expect(screen.getByText(/appeal submitted/i)).toBeInTheDocument()
+    })
+  })
+
+  it('requires appeal reason text', async () => {
+    const user = userEvent.setup()
+    render(<MyReportsPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Misleading')).toBeInTheDocument()
+    })
+    await user.click(screen.getByRole('button', { name: /^appeal$/i }))
+    await user.click(screen.getByRole('button', { name: /submit appeal/i }))
+    expect(screen.getByText(/please provide a reason/i)).toBeInTheDocument()
+  })
+
+  it('shows appeal pending status for already-appealed reports', async () => {
+    render(<MyReportsPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Violation')).toBeInTheDocument()
+    })
+    // Report id: 4 has appealStatus: 'pending'
+    expect(screen.getByText('Appeal pending')).toBeInTheDocument()
+  })
+
+  it('shows empty state when no reports exist', async () => {
+    const { server } = await import('@/mocks/server')
+    const { http, HttpResponse } = await import('msw')
+    server.use(
+      http.get('http://localhost:3000/api/moderation/my-reports', () => {
+        return HttpResponse.json({ reports: [], cursor: null })
+      })
+    )
+    render(<MyReportsPage />)
+    await waitFor(() => {
+      expect(screen.getByText(/no reports/i)).toBeInTheDocument()
+    })
+  })
+
+  it('passes axe accessibility check', async () => {
+    const { container } = render(<MyReportsPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Spam')).toBeInTheDocument()
+    })
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it('passes axe accessibility check with appeal form open', async () => {
+    const user = userEvent.setup()
+    const { container } = render(<MyReportsPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Misleading')).toBeInTheDocument()
+    })
+    await user.click(screen.getByRole('button', { name: /^appeal$/i }))
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})
diff --git a/src/app/settings/reports/page.tsx b/src/app/settings/reports/page.tsx
new file mode 100644
index 0000000..a34709f
--- /dev/null
+++ b/src/app/settings/reports/page.tsx
@@ -0,0 +1,272 @@
+/**
+ * My Reports page - lists user's submitted reports with appeal functionality.
+ * URL: /settings/reports
+ * Shows report status, resolution, and allows appeals for dismissed reports.
+ * Client component (form state, API calls).
+ * @see specs/prd-web.md Section M7 (Appeals process)
+ * @see decisions/content-moderation.md
+ */
+
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { ForumLayout } from '@/components/layout/forum-layout'
+import { Breadcrumbs } from '@/components/breadcrumbs'
+import { ErrorAlert } from '@/components/error-alert'
+import { cn } from '@/lib/utils'
+import { getMyReports, submitAppeal } from '@/lib/api/client'
+import type { MyReport } from '@/lib/api/types'
+import { useAuth } from '@/hooks/use-auth'
+
+function statusLabel(report: MyReport): string {
+  if (report.appealStatus === 'pending') return 'Appeal pending'
+  if (report.status === 'resolved' && report.resolutionType) {
+    return report.resolutionType.charAt(0).toUpperCase() + report.resolutionType.slice(1)
+  }
+  return 'Pending'
+}
+
+function statusColor(report: MyReport): string {
+  if (report.appealStatus === 'pending')
+    return 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400'
+  if (report.status === 'pending') return 'bg-blue-500/10 text-blue-700 dark:text-blue-400'
+  if (report.resolutionType === 'dismissed') return 'bg-muted text-muted-foreground'
+  return 'bg-green-500/10 text-green-700 dark:text-green-400'
+}
+
+function canAppeal(report: MyReport): boolean {
+  return (
+    report.status === 'resolved' &&
+    report.resolutionType === 'dismissed' &&
+    report.appealStatus === 'none'
+  )
+}
+
+export default function MyReportsPage() {
+  const { getAccessToken } = useAuth()
+  const [reports, setReports] = useState<MyReport[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [appealingId, setAppealingId] = useState<number | null>(null)
+  const [appealReason, setAppealReason] = useState('')
+  const [appealError, setAppealError] = useState('')
+  const [appealSubmitting, setAppealSubmitting] = useState(false)
+  const [appealSuccess, setAppealSuccess] = useState<number | null>(null)
+
+  useEffect(() => {
+    const token = getAccessToken()
+    if (!token) {
+      setLoading(false)
+      return
+    }
+
+    getMyReports(token)
+      .then((response) => {
+        setReports(response.reports)
+      })
+      .catch(() => setError('Failed to load reports'))
+      .finally(() => setLoading(false))
+  }, [getAccessToken])
+
+  const handleAppealOpen = useCallback((reportId: number) => {
+    setAppealingId(reportId)
+    setAppealReason('')
+    setAppealError('')
+    setAppealSuccess(null)
+  }, [])
+
+  const handleAppealCancel = useCallback(() => {
+    setAppealingId(null)
+    setAppealReason('')
+    setAppealError('')
+  }, [])
+
+  const handleAppealSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault()
+      if (!appealReason.trim()) {
+        setAppealError('Please provide a reason for your appeal.')
+        return
+      }
+      if (appealingId === null) return
+
+      const token = getAccessToken()
+      if (!token) {
+        setAppealError('Not authenticated')
+        return
+      }
+
+      setAppealSubmitting(true)
+      setAppealError('')
+
+      try {
+        const updated = await submitAppeal(appealingId, appealReason.trim(), token)
+        setReports((prev) => prev.map((r) => (r.id === appealingId ? updated : r)))
+        setAppealSuccess(appealingId)
+        setAppealingId(null)
+        setAppealReason('')
+      } catch {
+        setAppealError('Failed to submit appeal. Please try again.')
+      } finally {
+        setAppealSubmitting(false)
+      }
+    },
+    [appealingId, appealReason, getAccessToken]
+  )
+
+  const formatDate = (iso: string) => {
+    return new Date(iso).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  }
+
+  return (
+    <ForumLayout>
+      <div className="space-y-6">
+        <Breadcrumbs
+          items={[
+            { label: 'Home', href: '/' },
+            { label: 'Settings', href: '/settings' },
+            { label: 'My Reports' },
+          ]}
+        />
+
+        <h1 className="text-2xl font-bold text-foreground">My Reports</h1>
+
+        {loading ? (
+          <div className="max-w-2xl animate-pulse space-y-4">
+            <div className="h-24 rounded-lg bg-muted" />
+            <div className="h-24 rounded-lg bg-muted" />
+          </div>
+        ) : error ? (
+          <ErrorAlert message={error} variant="page" />
+        ) : reports.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            You have no reports. Reports you submit will appear here.
+          </p>
+        ) : (
+          <div className="max-w-2xl space-y-4">
+            {reports.map((report) => (
+              <div
+                key={report.id}
+                className="rounded-lg border border-border bg-card p-4 space-y-3"
+              >
+                {/* Report header */}
+                <div className="flex items-start justify-between gap-3">
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-foreground">
+                      {report.reasonType.charAt(0).toUpperCase() + report.reasonType.slice(1)}
+                    </p>
+                    {report.description && (
+                      <p className="text-sm text-muted-foreground">{report.description}</p>
+                    )}
+                  </div>
+                  <span
+                    className={cn(
+                      'shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium',
+                      statusColor(report)
+                    )}
+                  >
+                    {statusLabel(report)}
+                  </span>
+                </div>
+
+                {/* Metadata */}
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                  <span>Reported: {formatDate(report.createdAt)}</span>
+                  {report.resolvedAt && <span>Resolved: {formatDate(report.resolvedAt)}</span>}
+                </div>
+
+                {/* Appeal success message */}
+                {appealSuccess === report.id && (
+                  <p
+                    className="rounded-md bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-400"
+                    role="status"
+                  >
+                    Appeal submitted. A moderator will re-review your report.
+                  </p>
+                )}
+
+                {/* Appeal button */}
+                {canAppeal(report) && appealingId !== report.id && appealSuccess !== report.id && (
+                  <button
+                    type="button"
+                    onClick={() => handleAppealOpen(report.id)}
+                    className={cn(
+                      'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors',
+                      'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                    )}
+                  >
+                    Appeal
+                  </button>
+                )}
+
+                {/* Appeal form */}
+                {appealingId === report.id && (
+                  <form onSubmit={handleAppealSubmit} className="space-y-3" noValidate>
+                    <div className="space-y-1">
+                      <label
+                        htmlFor={`appeal-reason-${report.id}`}
+                        className="block text-sm font-medium text-foreground"
+                      >
+                        Reason for appeal
+                      </label>
+                      <textarea
+                        id={`appeal-reason-${report.id}`}
+                        value={appealReason}
+                        onChange={(e) => {
+                          setAppealReason(e.target.value)
+                          setAppealError('')
+                        }}
+                        placeholder="Explain why you believe this report should be reconsidered"
+                        rows={3}
+                        disabled={appealSubmitting}
+                        className={cn(
+                          'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                          'disabled:cursor-not-allowed disabled:opacity-50'
+                        )}
+                      />
+                      {appealError && (
+                        <p className="text-sm text-destructive" role="alert">
+                          {appealError}
+                        </p>
+                      )}
+                    </div>
+                    <div className="flex gap-3">
+                      <button
+                        type="submit"
+                        disabled={appealSubmitting}
+                        className={cn(
+                          'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors',
+                          'hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                          'disabled:cursor-not-allowed disabled:opacity-50'
+                        )}
+                      >
+                        {appealSubmitting ? 'Submitting...' : 'Submit appeal'}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleAppealCancel}
+                        disabled={appealSubmitting}
+                        className={cn(
+                          'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors',
+                          'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                          'disabled:cursor-not-allowed disabled:opacity-50'
+                        )}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </form>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </ForumLayout>
+  )
+}
diff --git a/src/components/report-dialog.test.tsx b/src/components/report-dialog.test.tsx
index e1f3b00..ef57a96 100644
--- a/src/components/report-dialog.test.tsx
+++ b/src/components/report-dialog.test.tsx
@@ -72,6 +72,43 @@ describe('ReportDialog', () => {
     expect(screen.queryByRole('button', { name: /report/i })).not.toBeInTheDocument()
   })
 
+  it('shows success acknowledgment after report submission', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn().mockResolvedValue(undefined)
+    render(<ReportDialog subjectUri="at://test" onSubmit={onSubmit} />)
+    await user.click(screen.getByRole('button', { name: /report/i }))
+    await user.click(screen.getByLabelText(/spam/i))
+    await user.click(screen.getByRole('button', { name: /submit report/i }))
+    expect(await screen.findByText(/report submitted/i)).toBeInTheDocument()
+    expect(screen.getByText(/moderator will review/i)).toBeInTheDocument()
+  })
+
+  it('shows error message when report submission fails', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn().mockRejectedValue(new Error('Rate limited'))
+    render(<ReportDialog subjectUri="at://test" onSubmit={onSubmit} />)
+    await user.click(screen.getByRole('button', { name: /report/i }))
+    await user.click(screen.getByLabelText(/spam/i))
+    await user.click(screen.getByRole('button', { name: /submit report/i }))
+    expect(await screen.findByText(/failed to submit report/i)).toBeInTheDocument()
+  })
+
+  it('disables submit button while submitting', async () => {
+    const user = userEvent.setup()
+    let resolveSubmit: () => void
+    const onSubmit = vi.fn().mockReturnValue(
+      new Promise<void>((resolve) => {
+        resolveSubmit = resolve
+      })
+    )
+    render(<ReportDialog subjectUri="at://test" onSubmit={onSubmit} />)
+    await user.click(screen.getByRole('button', { name: /report/i }))
+    await user.click(screen.getByLabelText(/spam/i))
+    await user.click(screen.getByRole('button', { name: /submit report/i }))
+    expect(screen.getByRole('button', { name: /submitting/i })).toBeDisabled()
+    resolveSubmit!()
+  })
+
   it('passes axe accessibility check when dialog is open', async () => {
     const user = userEvent.setup()
     const { container } = render(<ReportDialog subjectUri="at://test" onSubmit={vi.fn()} />)
@@ -79,4 +116,16 @@ describe('ReportDialog', () => {
     const results = await axe(container)
     expect(results).toHaveNoViolations()
   })
+
+  it('passes axe accessibility check when showing success acknowledgment', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn().mockResolvedValue(undefined)
+    const { container } = render(<ReportDialog subjectUri="at://test" onSubmit={onSubmit} />)
+    await user.click(screen.getByRole('button', { name: /report/i }))
+    await user.click(screen.getByLabelText(/spam/i))
+    await user.click(screen.getByRole('button', { name: /submit report/i }))
+    await screen.findByText(/report submitted/i)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
 })
diff --git a/src/components/report-dialog.tsx b/src/components/report-dialog.tsx
index 21b44fa..b76cb6a 100644
--- a/src/components/report-dialog.tsx
+++ b/src/components/report-dialog.tsx
@@ -1,6 +1,7 @@
 /**
  * ReportDialog - Report content with AT Protocol reason categories.
- * Button + accessible dialog with reason selection and optional details.
+ * Button + accessible dialog with reason selection, optional details,
+ * and success/error acknowledgment after submission.
  * Follows com.atproto.moderation.defs reason types.
  * @see specs/prd-web.md Section M7 (Report button)
  * @see decisions/content-moderation.md
@@ -9,7 +10,7 @@
 'use client'
 
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { Flag } from '@phosphor-icons/react'
+import { Flag, CheckCircle } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
 
 export interface ReportSubmission {
@@ -20,7 +21,7 @@ export interface ReportSubmission {
 
 interface ReportDialogProps {
   subjectUri: string
-  onSubmit: (report: ReportSubmission) => void
+  onSubmit: (report: ReportSubmission) => void | Promise<void>
   disabled?: boolean
   className?: string
 }
@@ -44,6 +45,8 @@ export function ReportDialog({
   const [reason, setReason] = useState('')
   const [details, setDetails] = useState('')
   const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
   const dialogRef = useRef<HTMLDivElement>(null)
 
   const handleClose = useCallback(() => {
@@ -51,6 +54,8 @@ export function ReportDialog({
     setReason('')
     setDetails('')
     setError('')
+    setSubmitting(false)
+    setSubmitted(false)
   }, [])
 
   const handleKeyDown = useCallback(
@@ -71,14 +76,22 @@ export function ReportDialog({
     }
   }, [open, handleKeyDown])
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!reason) {
       setError('Please select a reason')
       return
     }
-    onSubmit({ subjectUri, reason, details })
-    handleClose()
+    setSubmitting(true)
+    setError('')
+    try {
+      await onSubmit({ subjectUri, reason, details })
+      setSubmitted(true)
+    } catch {
+      setError('Failed to submit report. Please try again.')
+    } finally {
+      setSubmitting(false)
+    }
   }
 
   if (disabled) return null
@@ -110,80 +123,114 @@ export function ReportDialog({
             aria-labelledby="report-dialog-title"
             className="relative z-50 w-full max-w-md rounded-lg border border-border bg-background p-6 shadow-lg"
           >
-            <h2 id="report-dialog-title" className="text-lg font-semibold text-foreground">
-              Report Content
-            </h2>
-
-            <form onSubmit={handleSubmit} className="mt-4 space-y-4" noValidate>
-              <fieldset>
-                <legend className="text-sm font-medium text-foreground">Reason</legend>
-                <div className="mt-2 space-y-2">
-                  {REPORT_REASONS.map((r) => (
-                    <label key={r.value} className="flex items-center gap-2">
-                      <input
-                        type="radio"
-                        name="report-reason"
-                        value={r.value}
-                        checked={reason === r.value}
-                        onChange={() => {
-                          setReason(r.value)
-                          setError('')
-                        }}
-                        className="h-4 w-4 border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                      />
-                      <span className="text-sm text-foreground">{r.label}</span>
-                    </label>
-                  ))}
-                </div>
-                {error && (
-                  <p className="mt-1 text-sm text-destructive" role="alert">
-                    {error}
-                  </p>
-                )}
-              </fieldset>
-
-              <div className="space-y-1">
-                <label
-                  htmlFor="report-details"
-                  className="block text-sm font-medium text-foreground"
-                >
-                  Additional details
-                </label>
-                <textarea
-                  id="report-details"
-                  value={details}
-                  onChange={(e) => setDetails(e.target.value)}
-                  placeholder="Optional: provide more context"
-                  rows={3}
-                  className={cn(
-                    'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                  )}
+            {submitted ? (
+              <div className="space-y-4 text-center">
+                <CheckCircle
+                  size={48}
+                  className="mx-auto text-green-600 dark:text-green-400"
+                  aria-hidden="true"
                 />
-              </div>
-
-              <div className="flex justify-end gap-3">
+                <h2 id="report-dialog-title" className="text-lg font-semibold text-foreground">
+                  Report submitted
+                </h2>
+                <p className="text-sm text-muted-foreground" role="status">
+                  A moderator will review your report.
+                </p>
                 <button
                   type="button"
                   onClick={handleClose}
                   className={cn(
-                    'rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors',
-                    'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                    'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors',
+                    'hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
                   )}
                 >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className={cn(
-                    'rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors',
-                    'hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                  )}
-                >
-                  Submit Report
+                  Close
                 </button>
               </div>
-            </form>
+            ) : (
+              <>
+                <h2 id="report-dialog-title" className="text-lg font-semibold text-foreground">
+                  Report Content
+                </h2>
+
+                <form onSubmit={handleSubmit} className="mt-4 space-y-4" noValidate>
+                  <fieldset disabled={submitting}>
+                    <legend className="text-sm font-medium text-foreground">Reason</legend>
+                    <div className="mt-2 space-y-2">
+                      {REPORT_REASONS.map((r) => (
+                        <label key={r.value} className="flex items-center gap-2">
+                          <input
+                            type="radio"
+                            name="report-reason"
+                            value={r.value}
+                            checked={reason === r.value}
+                            onChange={() => {
+                              setReason(r.value)
+                              setError('')
+                            }}
+                            className="h-4 w-4 border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+                          />
+                          <span className="text-sm text-foreground">{r.label}</span>
+                        </label>
+                      ))}
+                    </div>
+                    {error && (
+                      <p className="mt-1 text-sm text-destructive" role="alert">
+                        {error}
+                      </p>
+                    )}
+                  </fieldset>
+
+                  <div className="space-y-1">
+                    <label
+                      htmlFor="report-details"
+                      className="block text-sm font-medium text-foreground"
+                    >
+                      Additional details
+                    </label>
+                    <textarea
+                      id="report-details"
+                      value={details}
+                      onChange={(e) => setDetails(e.target.value)}
+                      placeholder="Optional: provide more context"
+                      rows={3}
+                      disabled={submitting}
+                      className={cn(
+                        'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        'disabled:cursor-not-allowed disabled:opacity-50'
+                      )}
+                    />
+                  </div>
+
+                  <div className="flex justify-end gap-3">
+                    <button
+                      type="button"
+                      onClick={handleClose}
+                      disabled={submitting}
+                      className={cn(
+                        'rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors',
+                        'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        'disabled:cursor-not-allowed disabled:opacity-50'
+                      )}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="submit"
+                      disabled={submitting}
+                      className={cn(
+                        'rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors',
+                        'hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        'disabled:cursor-not-allowed disabled:opacity-50'
+                      )}
+                    >
+                      {submitting ? 'Submitting...' : 'Submit Report'}
+                    </button>
+                  </div>
+                </form>
+              </>
+            )}
           </div>
         </div>
       )}
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
index 43b73e8..9865da0 100644
--- a/src/lib/api/client.ts
+++ b/src/lib/api/client.ts
@@ -41,6 +41,8 @@ import type {
   UpdateOnboardingFieldInput,
   OnboardingStatus,
   SubmitOnboardingInput,
+  MyReport,
+  MyReportsResponse,
 } from './types'
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3000'
@@ -761,4 +763,35 @@ export function submitOnboarding(
   })
 }
 
+// --- My Reports + Appeals endpoints ---
+
+export function getMyReports(
+  accessToken: string,
+  params: PaginationParams = {},
+  options?: FetchOptions
+): Promise<MyReportsResponse> {
+  const query = buildQuery({ limit: params.limit, cursor: params.cursor })
+  return apiFetch<MyReportsResponse>(`/api/moderation/my-reports${query}`, {
+    ...options,
+    headers: { ...options?.headers, Authorization: `Bearer ${accessToken}` },
+  })
+}
+
+export function submitAppeal(
+  reportId: number,
+  reason: string,
+  accessToken: string,
+  options?: FetchOptions
+): Promise<MyReport> {
+  return apiFetch<MyReport>(
+    `/api/moderation/reports/${encodeURIComponent(String(reportId))}/appeal`,
+    {
+      ...options,
+      method: 'POST',
+      headers: { ...options?.headers, Authorization: `Bearer ${accessToken}` },
+      body: { reason },
+    }
+  )
+}
+
 export { ApiError }
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
index 1350809..600c04a 100644
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -279,6 +279,32 @@ export interface ModerationReportsResponse {
   total: number
 }
 
+// --- User's own reports (my-reports) ---
+
+export type AppealStatus = 'none' | 'pending' | 'rejected'
+
+export interface MyReport {
+  id: number
+  reporterDid: string
+  targetUri: string
+  targetDid: string
+  reasonType: ReportReasonType
+  description: string | null
+  status: 'pending' | 'resolved'
+  resolutionType: ReportResolution | null
+  resolvedBy: string | null
+  resolvedAt: string | null
+  appealReason: string | null
+  appealedAt: string | null
+  appealStatus: AppealStatus
+  createdAt: string
+}
+
+export interface MyReportsResponse {
+  reports: MyReport[]
+  cursor: string | null
+}
+
 export interface FirstPostQueueItem {
   id: string
   authorDid: string
diff --git a/src/mocks/data.ts b/src/mocks/data.ts
index 368cdb8..5b8cf70 100644
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@@ -24,6 +24,7 @@ import type {
   Plugin,
   UserPreferences,
   OnboardingField,
+  MyReport,
 } from '@/lib/api/types'
 
 const COMMUNITY_DID = 'did:plc:test-community-123'
@@ -917,3 +918,72 @@ export const mockOnboardingFields: OnboardingField[] = [
     updatedAt: TWO_DAYS_AGO,
   },
 ]
+
+// --- My Reports (user's own reports) ---
+
+export const mockMyReports: MyReport[] = [
+  {
+    id: 1,
+    reporterDid: 'did:plc:user-alice-001',
+    targetUri: 'at://did:plc:user-bob-002/forum.barazo.topic.post/abc123',
+    targetDid: 'did:plc:user-bob-002',
+    reasonType: 'spam',
+    description: 'This is spam content',
+    status: 'pending',
+    resolutionType: null,
+    resolvedBy: null,
+    resolvedAt: null,
+    appealReason: null,
+    appealedAt: null,
+    appealStatus: 'none',
+    createdAt: NOW,
+  },
+  {
+    id: 2,
+    reporterDid: 'did:plc:user-alice-001',
+    targetUri: 'at://did:plc:user-carol-003/forum.barazo.topic.post/def456',
+    targetDid: 'did:plc:user-carol-003',
+    reasonType: 'harassment',
+    description: 'Targeted harassment',
+    status: 'resolved',
+    resolutionType: 'warned',
+    resolvedBy: 'did:plc:mod-001',
+    resolvedAt: YESTERDAY,
+    appealReason: null,
+    appealedAt: null,
+    appealStatus: 'none',
+    createdAt: TWO_DAYS_AGO,
+  },
+  {
+    id: 3,
+    reporterDid: 'did:plc:user-alice-001',
+    targetUri: 'at://did:plc:user-dave-004/forum.barazo.topic.reply/ghi789',
+    targetDid: 'did:plc:user-dave-004',
+    reasonType: 'misleading',
+    description: 'Misleading information',
+    status: 'resolved',
+    resolutionType: 'dismissed',
+    resolvedBy: 'did:plc:mod-001',
+    resolvedAt: YESTERDAY,
+    appealReason: null,
+    appealedAt: null,
+    appealStatus: 'none',
+    createdAt: LAST_WEEK,
+  },
+  {
+    id: 4,
+    reporterDid: 'did:plc:user-alice-001',
+    targetUri: 'at://did:plc:user-eve-005/forum.barazo.topic.post/jkl012',
+    targetDid: 'did:plc:user-eve-005',
+    reasonType: 'violation',
+    description: 'Rule violation',
+    status: 'pending',
+    resolutionType: null,
+    resolvedBy: null,
+    resolvedAt: null,
+    appealReason: 'I believe this was wrongly dismissed',
+    appealedAt: YESTERDAY,
+    appealStatus: 'pending',
+    createdAt: LAST_WEEK,
+  },
+]
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index ec98116..e2c24dc 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -26,6 +26,7 @@ import {
   mockUserPreferences,
   mockCommunityPreferences,
   mockOnboardingFields,
+  mockMyReports,
 } from './data'
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3000'
@@ -679,4 +680,39 @@ export const handlers = [
     }
     return HttpResponse.json({ success: true })
   }),
+
+  // --- My Reports + Appeals endpoints ---
+
+  // GET /api/moderation/my-reports
+  http.get(`${API_URL}/api/moderation/my-reports`, ({ request }) => {
+    const auth = request.headers.get('Authorization')
+    if (!auth?.startsWith('Bearer ')) {
+      return HttpResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+    return HttpResponse.json({
+      reports: mockMyReports,
+      cursor: null,
+    })
+  }),
+
+  // POST /api/moderation/reports/:id/appeal
+  http.post(`${API_URL}/api/moderation/reports/:id/appeal`, async ({ request, params }) => {
+    const auth = request.headers.get('Authorization')
+    if (!auth?.startsWith('Bearer ')) {
+      return HttpResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+    const id = Number(params['id'])
+    const report = mockMyReports.find((r) => r.id === id)
+    if (!report) {
+      return HttpResponse.json({ error: 'Report not found' }, { status: 404 })
+    }
+    const body = (await request.json()) as { reason?: string }
+    return HttpResponse.json({
+      ...report,
+      appealReason: body.reason ?? null,
+      appealedAt: new Date().toISOString(),
+      appealStatus: 'pending',
+      status: 'pending',
+    })
+  }),
 ]