diff --git a/src/routes/cases.index.tsx b/src/routes/cases.index.tsx
index 42b5629..c58e82a 100644
--- a/src/routes/cases.index.tsx
+++ b/src/routes/cases.index.tsx
@@ -6,10 +6,12 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { supabase } from "@/integrations/supabase/client";
-import { Plus, Search } from "lucide-react";
+import { Plus, Search, Archive, ArchiveRestore } from "lucide-react";
 import { formatDate, statusBadgeClass } from "@/lib/format";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { setArchived } from "@/lib/archive";
 
 export const Route = createFileRoute("/cases/")({
   component: () => (
@@ -23,22 +25,34 @@ function CasesList() {
   const [cases, setCases] = useState<any[]>([]);
   const [q, setQ] = useState("");
   const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [view, setView] = useState<"active" | "archived">("active");
+
+  const load = async () => {
+    const { data } = await supabase
+      .from("cases")
+      .select("*, client:clients(name), assignee:profiles!cases_assigned_attorney_id_fkey(full_name, email)")
+      .order("updated_at", { ascending: false });
+    setCases(data ?? []);
+  };
 
   useEffect(() => {
-    (async () => {
-      const { data } = await supabase
-        .from("cases")
-        .select("*, client:clients(name), assignee:profiles!cases_assigned_attorney_id_fkey(full_name, email)")
-        .order("updated_at", { ascending: false });
-      setCases(data ?? []);
-    })();
+    load();
   }, []);
 
-  const filtered = cases.filter((c) => {
+  const visible = cases.filter((c) =>
+    view === "archived" ? c.archived_at : !c.archived_at,
+  );
+  const filtered = visible.filter((c) => {
     const okStatus = statusFilter === "all" || c.status === statusFilter;
     const okQ = [c.title, c.case_number, c.client?.name].filter(Boolean).join(" ").toLowerCase().includes(q.toLowerCase());
     return okStatus && okQ;
   });
+  const archivedCount = cases.filter((c) => c.archived_at).length;
+  const activeCount = cases.length - archivedCount;
+
+  const onArchive = async (id: string, archived: boolean) => {
+    if (await setArchived("cases", id, archived)) load();
+  };
 
   return (
     <PageContainer>
@@ -53,6 +67,12 @@ function CasesList() {
       />
 
       <div className="flex flex-col sm:flex-row gap-3 mb-4">
+        <Tabs value={view} onValueChange={(v) => setView(v as "active" | "archived")}>
+          <TabsList>
+            <TabsTrigger value="active">Active ({activeCount})</TabsTrigger>
+            <TabsTrigger value="archived">Archived ({archivedCount})</TabsTrigger>
+          </TabsList>
+        </Tabs>
         <div className="relative flex-1 max-w-sm">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search cases…" className="pl-9" />
@@ -81,11 +101,14 @@ function CasesList() {
                 <th className="text-left px-4 py-3 font-medium">Status</th>
                 <th className="text-left px-4 py-3 font-medium">Attorney</th>
                 <th className="text-left px-4 py-3 font-medium">Opened</th>
+                <th className="text-right px-4 py-3 font-medium w-12"></th>
               </tr>
             </thead>
             <tbody>
               {filtered.length === 0 && (
-                <tr><td colSpan={5} className="text-center py-12 text-muted-foreground">No cases.</td></tr>
+                <tr><td colSpan={6} className="text-center py-12 text-muted-foreground">
+                  {view === "archived" ? "No archived cases." : "No cases."}
+                </td></tr>
               )}
               {filtered.map((c) => (
                 <tr key={c.id} className="border-t hover:bg-muted/30">
@@ -101,6 +124,16 @@ function CasesList() {
                   </td>
                   <td className="px-4 py-3 text-muted-foreground">{c.assignee?.full_name || c.assignee?.email || "—"}</td>
                   <td className="px-4 py-3 text-muted-foreground">{formatDate(c.opened_at)}</td>
+                  <td className="px-4 py-3 text-right">
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      title={c.archived_at ? "Restore" : "Archive"}
+                      onClick={() => onArchive(c.id, !c.archived_at)}
+                    >
+                      {c.archived_at ? <ArchiveRestore className="h-4 w-4" /> : <Archive className="h-4 w-4" />}
+                    </Button>
+                  </td>
                 </tr>
               ))}
             </tbody>
diff --git a/src/routes/clients.index.tsx b/src/routes/clients.index.tsx
index 6a697d7..a851a78 100644
--- a/src/routes/clients.index.tsx
+++ b/src/routes/clients.index.tsx
@@ -6,10 +6,12 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { supabase } from "@/integrations/supabase/client";
 import { ClientFormDialog } from "@/components/clients/client-form-dialog";
-import { Plus, Search, Building2, User, Briefcase as Building } from "lucide-react";
+import { Plus, Search, Building2, User, Archive, ArchiveRestore } from "lucide-react";
 import { formatDate } from "@/lib/format";
+import { setArchived } from "@/lib/archive";
 
 export const Route = createFileRoute("/clients/")({
   component: () => (
@@ -23,6 +25,7 @@ function ClientsList() {
   const [clients, setClients] = useState<any[]>([]);
   const [q, setQ] = useState("");
   const [open, setOpen] = useState(false);
+  const [view, setView] = useState<"active" | "archived">("active");
 
   const load = async () => {
     const { data } = await supabase
@@ -36,7 +39,10 @@ function ClientsList() {
     load();
   }, []);
 
-  const filtered = clients.filter((c) =>
+  const visible = clients.filter((c) =>
+    view === "archived" ? c.archived_at : !c.archived_at,
+  );
+  const filtered = visible.filter((c) =>
     [c.name, c.management_company, c.primary_contact_name, c.primary_contact_email]
       .filter(Boolean)
       .join(" ")
@@ -44,9 +50,16 @@ function ClientsList() {
       .includes(q.toLowerCase()),
   );
 
+  const archivedCount = clients.filter((c) => c.archived_at).length;
+  const activeCount = clients.length - archivedCount;
+
   const typeIcon = (t: string) =>
     t === "hoa" || t === "condo" ? Building2 : User;
 
+  const onArchive = async (id: string, archived: boolean) => {
+    if (await setArchived("clients", id, archived)) load();
+  };
+
   return (
     <PageContainer>
       <PageHeader
@@ -60,14 +73,22 @@ function ClientsList() {
         }
       />
 
-      <div className="relative mb-4 max-w-sm">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-        <Input
-          value={q}
-          onChange={(e) => setQ(e.target.value)}
-          placeholder="Search by name, contact, manager…"
-          className="pl-9"
-        />
+      <div className="flex flex-col sm:flex-row gap-3 mb-4">
+        <Tabs value={view} onValueChange={(v) => setView(v as "active" | "archived")}>
+          <TabsList>
+            <TabsTrigger value="active">Active ({activeCount})</TabsTrigger>
+            <TabsTrigger value="archived">Archived ({archivedCount})</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search by name, contact, manager…"
+            className="pl-9"
+          />
+        </div>
       </div>
 
       <Card className="border-border/60 overflow-hidden">
@@ -80,13 +101,18 @@ function ClientsList() {
                 <th className="text-left px-4 py-3 font-medium">Contact</th>
                 <th className="text-left px-4 py-3 font-medium">Units</th>
                 <th className="text-left px-4 py-3 font-medium">Created</th>
+                <th className="text-right px-4 py-3 font-medium w-12"></th>
               </tr>
             </thead>
             <tbody>
               {filtered.length === 0 && (
                 <tr>
-                  <td colSpan={5} className="text-center py-12 text-muted-foreground">
-                    {clients.length === 0 ? "No clients yet. Add your first one." : "No matches."}
+                  <td colSpan={6} className="text-center py-12 text-muted-foreground">
+                    {visible.length === 0
+                      ? view === "archived"
+                        ? "No archived clients."
+                        : "No clients yet. Add your first one."
+                      : "No matches."}
                   </td>
                 </tr>
               )}
@@ -118,6 +144,20 @@ function ClientsList() {
                     </td>
                     <td className="px-4 py-3 text-muted-foreground">{c.num_units ?? "—"}</td>
                     <td className="px-4 py-3 text-muted-foreground">{formatDate(c.created_at)}</td>
+                    <td className="px-4 py-3 text-right">
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        title={c.archived_at ? "Restore" : "Archive"}
+                        onClick={() => onArchive(c.id, !c.archived_at)}
+                      >
+                        {c.archived_at ? (
+                          <ArchiveRestore className="h-4 w-4" />
+                        ) : (
+                          <Archive className="h-4 w-4" />
+                        )}
+                      </Button>
+                    </td>
                   </tr>
                 );
               })}