diff --git a/app/(main)/settings/onboarding/page.tsx b/app/(main)/settings/onboarding/page.tsx
index 256a6a39..6ce0f6ce 100644
--- a/app/(main)/settings/onboarding/page.tsx
+++ b/app/(main)/settings/onboarding/page.tsx
@@ -1,20 +1,31 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import SettingsSidebar from "@/app/components/settings/SettingsSidebar";
 import PageHeader from "@/app/components/PageHeader";
 import { useAuth } from "@/app/lib/context/AuthContext";
-import { usePaginatedList, useInfiniteScroll } from "@/app/hooks";
 import {
+  useDebouncedValue,
+  useInfiniteScroll,
+  useOnboardingActivation,
+  usePaginatedList,
+} from "@/app/hooks";
+import {
+  DeleteOrganizationModal,
+  DeleteProjectModal,
+  EditOrganizationModal,
+  OnboardingCredentials,
   OnboardingForm,
   OnboardingSuccess,
   OrganizationList,
+  OrganizationListSkeleton,
   ProjectList,
   StepIndicator,
   UserList,
-  OnboardingCredentials,
 } from "@/app/components/settings/onboarding";
+import { useToast } from "@/app/hooks/useToast";
 import {
+  ActiveStatus,
   Organization,
   Project,
   ProjectListResponse,
@@ -25,6 +36,8 @@ import { ArrowLeftIcon } from "@/app/components/icons";
 import { DEFAULT_PAGE_LIMIT } from "@/app/lib/constants";
 import { TabNavigation } from "@/app/components/ui";
 
+const SEARCH_DEBOUNCE_MS = 300;
+
 const PROJECT_TABS = [
   { id: "users", label: "Users" },
   { id: "credentials", label: "Credentials" },
@@ -32,34 +45,6 @@ const PROJECT_TABS = [
 
 type View = "loading" | "list" | "projects" | "users" | "form" | "success";
 
-function OrganizationListSkeleton() {
-  return (
-    <div className="animate-pulse">
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <div className="h-5 w-36 bg-neutral-200 rounded mb-2" />
-          <div className="h-3 w-24 bg-neutral-100 rounded" />
-        </div>
-        <div className="h-9 w-40 bg-neutral-200 rounded-full" />
-      </div>
-      <div className="space-y-2.5">
-        {[1, 2, 3].map((i) => (
-          <div
-            key={i}
-            className="flex items-center justify-between gap-3 p-4 rounded-lg bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)]"
-          >
-            <div className="min-w-0 flex-1">
-              <div className="h-4 w-40 max-w-full bg-neutral-200 rounded mb-2" />
-              <div className="h-3 w-28 bg-neutral-100 rounded" />
-            </div>
-            <div className="h-4 w-4 shrink-0 bg-neutral-100 rounded" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 export default function OnboardingPage() {
   const { activeKey } = useAuth();
   const [view, setView] = useState<View>("loading");
@@ -71,6 +56,34 @@ export default function OnboardingPage() {
     null,
   );
   const [activeProjectTab, setActiveProjectTab] = useState("users");
+  const [orgToDelete, setOrgToDelete] = useState<Organization | null>(null);
+  const [isDeletingOrg, setIsDeletingOrg] = useState(false);
+  const [orgToEdit, setOrgToEdit] = useState<Organization | null>(null);
+  const [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
+  const [isDeletingProject, setIsDeletingProject] = useState(false);
+  const [orgSearchInput, setOrgSearchInput] = useState("");
+  const [projectSearchInput, setProjectSearchInput] = useState("");
+  const [orgActiveStatus, setOrgActiveStatus] =
+    useState<ActiveStatus>("active");
+  const [projectActiveStatus, setProjectActiveStatus] =
+    useState<ActiveStatus>("active");
+  const toast = useToast();
+  const debouncedOrgSearch = useDebouncedValue(
+    orgSearchInput.trim(),
+    SEARCH_DEBOUNCE_MS,
+  );
+  const debouncedProjectSearch = useDebouncedValue(
+    projectSearchInput.trim(),
+    SEARCH_DEBOUNCE_MS,
+  );
+
+  const orgExtraParams = useMemo(() => {
+    const params: Record<string, string> = {
+      is_active: orgActiveStatus === "active" ? "true" : "false",
+    };
+    if (debouncedOrgSearch) params.search = debouncedOrgSearch;
+    return params;
+  }, [debouncedOrgSearch, orgActiveStatus]);
 
   const {
     items: organizations,
@@ -82,6 +95,7 @@ export default function OnboardingPage() {
   } = usePaginatedList<Organization>({
     endpoint: "/api/organization",
     limit: DEFAULT_PAGE_LIMIT,
+    extraParams: orgExtraParams,
   });
 
   const scrollRef = useInfiniteScroll({
@@ -90,34 +104,38 @@ export default function OnboardingPage() {
     isLoading: isLoadingOrgs || isLoadingMore,
   });
 
+  const initialOrgViewDecidedRef = useRef(false);
   useEffect(() => {
-    if (isLoadingOrgs) {
-      setView("loading");
-      return;
-    }
-    if (view === "loading") {
-      setView(organizations.length > 0 ? "list" : "form");
-    }
+    if (initialOrgViewDecidedRef.current) return;
+    if (isLoadingOrgs) return;
+    initialOrgViewDecidedRef.current = true;
+    setView(organizations.length > 0 ? "list" : "form");
   }, [isLoadingOrgs, organizations.length]);
 
-  const fetchProjects = useCallback(
-    async (org: Organization) => {
-      setSelectedOrg(org);
-      setView("projects");
-      setIsLoadingProjects(true);
-      setProjects([]);
+  const buildProjectsQuery = (search: string, status: ActiveStatus) => {
+    const params = new URLSearchParams({
+      is_active: status === "active" ? "true" : "false",
+    });
+    if (search) params.set("search", search);
+    return params.toString();
+  };
 
+  const loadProjects = useCallback(
+    async (orgId: number, search: string, status: ActiveStatus) => {
+      setIsLoadingProjects(true);
       try {
+        const qs = buildProjectsQuery(search, status);
         const result = await apiFetch<ProjectListResponse>(
-          `/api/organization/${org.id}/projects`,
+          `/api/organization/${orgId}/projects?${qs}`,
           activeKey?.key ?? "",
         );
-
         if (result.success && result.data) {
           setProjects(result.data);
+        } else {
+          setProjects([]);
         }
       } catch {
-        // keep empty list
+        setProjects([]);
       } finally {
         setIsLoadingProjects(false);
       }
@@ -125,11 +143,42 @@ export default function OnboardingPage() {
     [activeKey],
   );
 
+  const fetchProjects = useCallback(
+    async (org: Organization) => {
+      setSelectedOrg(org);
+      setView("projects");
+      setProjectSearchInput("");
+      setProjectActiveStatus("active");
+      setProjects([]);
+      await loadProjects(org.id, "", "active");
+    },
+    [loadProjects],
+  );
+
+  useEffect(() => {
+    if (view !== "projects" || !selectedOrg) return;
+    void loadProjects(
+      selectedOrg.id,
+      debouncedProjectSearch,
+      projectActiveStatus,
+    );
+  }, [
+    debouncedProjectSearch,
+    projectActiveStatus,
+    view,
+    selectedOrg,
+    loadProjects,
+  ]);
+
   const refreshProjects = useCallback(async () => {
     if (!selectedOrg) return;
     try {
+      const qs = buildProjectsQuery(
+        debouncedProjectSearch,
+        projectActiveStatus,
+      );
       const result = await apiFetch<ProjectListResponse>(
-        `/api/organization/${selectedOrg.id}/projects`,
+        `/api/organization/${selectedOrg.id}/projects?${qs}`,
         activeKey?.key ?? "",
       );
       if (result.success && result.data) {
@@ -138,7 +187,7 @@ export default function OnboardingPage() {
     } catch {
       // keep current list
     }
-  }, [selectedOrg, activeKey]);
+  }, [selectedOrg, activeKey, debouncedProjectSearch, projectActiveStatus]);
 
   const handleSuccess = (data: OnboardResponseData) => {
     setOnboardData(data);
@@ -165,6 +214,7 @@ export default function OnboardingPage() {
     setSelectedOrg(null);
     setSelectedProject(null);
     setProjects([]);
+    setProjectSearchInput("");
     setView("list");
   };
 
@@ -173,6 +223,71 @@ export default function OnboardingPage() {
     setView("projects");
   };
 
+  const handleConfirmDeleteOrg = async (hardDelete: boolean) => {
+    if (!orgToDelete) return;
+    setIsDeletingOrg(true);
+    try {
+      await apiFetch(
+        `/api/organization/${orgToDelete.id}`,
+        activeKey?.key ?? "",
+        {
+          method: "DELETE",
+          body: JSON.stringify({ hard_delete: hardDelete }),
+        },
+      );
+      toast.success(
+        hardDelete
+          ? `"${orgToDelete.name}" permanently deleted`
+          : `"${orgToDelete.name}" deactivated`,
+      );
+      setOrgToDelete(null);
+      refetchOrganizations();
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : "Failed to delete organization",
+      );
+    } finally {
+      setIsDeletingOrg(false);
+    }
+  };
+
+  const handleConfirmDeleteProject = async (hardDelete: boolean) => {
+    if (!projectToDelete) return;
+    setIsDeletingProject(true);
+    try {
+      await apiFetch(
+        `/api/project/${projectToDelete.id}`,
+        activeKey?.key ?? "",
+        {
+          method: "DELETE",
+          body: JSON.stringify({ hard_delete: hardDelete }),
+        },
+      );
+      toast.success(
+        hardDelete
+          ? `"${projectToDelete.name}" permanently deleted`
+          : `"${projectToDelete.name}" deactivated`,
+      );
+      setProjectToDelete(null);
+      await refreshProjects();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed to delete project");
+    } finally {
+      setIsDeletingProject(false);
+    }
+  };
+
+  const {
+    activatingOrgId,
+    activatingProjectId,
+    activateOrg: handleActivateOrg,
+    activateProject: handleActivateProject,
+  } = useOnboardingActivation({
+    apiKey: activeKey?.key ?? "",
+    onOrgActivated: refetchOrganizations,
+    onProjectActivated: refreshProjects,
+  });
+
   return (
     <div className="w-full h-screen flex flex-col bg-bg-primary">
       <div className="flex flex-1 overflow-hidden">
@@ -191,9 +306,18 @@ export default function OnboardingPage() {
               {view === "list" && (
                 <OrganizationList
                   organizations={organizations}
+                  isLoading={isLoadingOrgs}
                   isLoadingMore={isLoadingMore}
                   onNewOrg={() => setView("form")}
                   onSelectOrg={fetchProjects}
+                  onDeleteOrg={setOrgToDelete}
+                  onEditOrg={setOrgToEdit}
+                  onActivateOrg={handleActivateOrg}
+                  activatingOrgId={activatingOrgId}
+                  search={orgSearchInput}
+                  onSearchChange={setOrgSearchInput}
+                  activeStatus={orgActiveStatus}
+                  onActiveStatusChange={setOrgActiveStatus}
                 />
               )}
 
@@ -205,6 +329,13 @@ export default function OnboardingPage() {
                   onBack={handleBackToOrgs}
                   onSelectProject={handleSelectProject}
                   onProjectAdded={refreshProjects}
+                  search={projectSearchInput}
+                  onSearchChange={setProjectSearchInput}
+                  activeStatus={projectActiveStatus}
+                  onActiveStatusChange={setProjectActiveStatus}
+                  onDeleteProject={setProjectToDelete}
+                  onActivateProject={handleActivateProject}
+                  activatingProjectId={activatingProjectId}
                 />
               )}
 
@@ -313,6 +444,38 @@ export default function OnboardingPage() {
           </div>
         </div>
       </div>
+
+      {orgToDelete && (
+        <DeleteOrganizationModal
+          organization={orgToDelete}
+          isDeleting={isDeletingOrg}
+          onCancel={() => {
+            if (!isDeletingOrg) setOrgToDelete(null);
+          }}
+          onConfirm={handleConfirmDeleteOrg}
+        />
+      )}
+
+      {projectToDelete && (
+        <DeleteProjectModal
+          project={projectToDelete}
+          isDeleting={isDeletingProject}
+          onCancel={() => {
+            if (!isDeletingProject) setProjectToDelete(null);
+          }}
+          onConfirm={handleConfirmDeleteProject}
+        />
+      )}
+
+      {orgToEdit && (
+        <EditOrganizationModal
+          open
+          organization={orgToEdit}
+          apiKey={activeKey?.key ?? ""}
+          onClose={() => setOrgToEdit(null)}
+          onOrganizationUpdated={refetchOrganizations}
+        />
+      )}
     </div>
   );
 }
diff --git a/app/api/organization/[orgId]/projects/route.ts b/app/api/organization/[orgId]/projects/route.ts
index d3c01482..2bef2d99 100644
--- a/app/api/organization/[orgId]/projects/route.ts
+++ b/app/api/organization/[orgId]/projects/route.ts
@@ -7,10 +7,10 @@ export async function GET(
 ) {
   try {
     const { orgId } = await params;
-    const { status, data } = await apiClient(
-      request,
-      `/api/v1/projects/organization/${orgId}`,
-    );
+    const { searchParams } = new URL(request.url);
+    const qs = searchParams.toString();
+    const endpoint = `/api/v1/projects/organization/${orgId}${qs ? `?${qs}` : ""}`;
+    const { status, data } = await apiClient(request, endpoint);
     return NextResponse.json(data, { status });
   } catch {
     return NextResponse.json(
diff --git a/app/api/organization/[orgId]/route.ts b/app/api/organization/[orgId]/route.ts
new file mode 100644
index 00000000..14851462
--- /dev/null
+++ b/app/api/organization/[orgId]/route.ts
@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ orgId: string }> },
+) {
+  const { orgId } = await params;
+  try {
+    const body = await request.json().catch(() => ({}));
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/organizations/${orgId}`,
+      {
+        method: "PATCH",
+        body: JSON.stringify(body),
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ orgId: string }> },
+) {
+  const { orgId } = await params;
+  try {
+    const body = await request.json().catch(() => ({}));
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/organizations/${orgId}`,
+      {
+        method: "DELETE",
+        body: JSON.stringify(body),
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/project/[projectId]/route.ts b/app/api/project/[projectId]/route.ts
new file mode 100644
index 00000000..25b59afc
--- /dev/null
+++ b/app/api/project/[projectId]/route.ts
@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ projectId: string }> },
+) {
+  const { projectId } = await params;
+  try {
+    const body = await request.json().catch(() => ({}));
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/projects/${projectId}`,
+      {
+        method: "DELETE",
+        body: JSON.stringify(body),
+      },
+    );
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/components/guardrails/BanListModal.tsx b/app/components/guardrails/BanListModal.tsx
index a0813949..24b03be0 100644
--- a/app/components/guardrails/BanListModal.tsx
+++ b/app/components/guardrails/BanListModal.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { guardrailsFetch } from "@/app/lib/guardrailsClient";
 import { useAuth } from "@/app/lib/context/AuthContext";
-import { Button, Field, Modal } from "@/app/components/ui";
+import { Button, Checkbox, Field, Modal } from "@/app/components/ui";
 
 interface BanListModalProps {
   onClose: () => void;
@@ -132,17 +132,11 @@ export default function BanListModal({
             placeholder="e.g. healthcare, finance"
           />
 
-          <label className="flex items-center gap-2.5 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={isPublic}
-              onChange={(e) => setIsPublic(e.target.checked)}
-              className="w-4 h-4 rounded"
-            />
-            <span className="text-sm text-text-primary">
-              Make this ban list public
-            </span>
-          </label>
+          <Checkbox
+            checked={isPublic}
+            onChange={setIsPublic}
+            label="Make this ban list public"
+          />
         </div>
       </div>
 
diff --git a/app/components/guardrails/ValidatorConfigPanel.tsx b/app/components/guardrails/ValidatorConfigPanel.tsx
index 84d374cc..78805397 100644
--- a/app/components/guardrails/ValidatorConfigPanel.tsx
+++ b/app/components/guardrails/ValidatorConfigPanel.tsx
@@ -2,11 +2,12 @@ import { useEffect, useState } from "react";
 import { Validator } from "@/app/lib/types/guardrails";
 import {
   Button,
+  Checkbox,
   Field,
   InfoTooltip,
-  Select,
-  MultiSelect,
   Loader,
+  MultiSelect,
+  Select,
 } from "@/app/components/ui";
 import { CloseIcon } from "@/app/components/icons";
 import {
@@ -323,15 +324,11 @@ export default function ValidatorConfigPanel({
             />
           </div>
 
-          <label className="flex items-center gap-2.5 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={isEnabled}
-              onChange={(e) => setIsEnabled(e.target.checked)}
-              className="w-4 h-4 rounded"
-            />
-            <span className="text-sm text-text-primary">Enabled</span>
-          </label>
+          <Checkbox
+            checked={isEnabled}
+            onChange={setIsEnabled}
+            label="Enabled"
+          />
         </fieldset>
 
         {!readOnly && (
diff --git a/app/components/knowledge-base/DocumentPickerModal.tsx b/app/components/knowledge-base/DocumentPickerModal.tsx
index 42f67373..6122fc22 100644
--- a/app/components/knowledge-base/DocumentPickerModal.tsx
+++ b/app/components/knowledge-base/DocumentPickerModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import { Button, Modal } from "@/app/components/ui";
+import { Button, Checkbox, Modal } from "@/app/components/ui";
 import { CheckLineIcon, SearchIcon } from "@/app/components/icons";
 import { Document } from "@/app/lib/types/document";
 
@@ -70,11 +70,10 @@ export default function DocumentPickerModal({
                         : "border-border hover:bg-neutral-50"
                     }`}
                   >
-                    <input
-                      type="checkbox"
+                    <Checkbox
                       checked={isSelected}
                       onChange={() => onToggleDocument(doc.id)}
-                      className="mr-3 w-4 h-4 cursor-pointer accent-accent-primary"
+                      inputClassName="mr-3 cursor-pointer"
                     />
                     <div className="flex-1 min-w-0">
                       <p
diff --git a/app/components/settings/credentials/CredentialForm.tsx b/app/components/settings/credentials/CredentialForm.tsx
index 2405e625..e0f63416 100644
--- a/app/components/settings/credentials/CredentialForm.tsx
+++ b/app/components/settings/credentials/CredentialForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Loader, Field, Button } from "@/app/components/ui";
+import { Button, Checkbox, Field, Loader } from "@/app/components/ui";
 import { Credential, ProviderDef } from "@/app/lib/types/credentials";
 import { timeAgo } from "@/app/lib/utils";
 
@@ -44,15 +44,13 @@ export default function CredentialForm({
         <Loader size="sm" message="Loading credentials…" />
       ) : (
         <div className="space-y-5">
-          <label className="flex items-center gap-2.5 cursor-pointer select-none w-fit">
-            <input
-              type="checkbox"
-              checked={isActive}
-              onChange={(e) => onActiveChange(e.target.checked)}
-              className="w-4 h-4 rounded accent-status-success"
-            />
-            <span className="text-sm text-text-primary">Active?</span>
-          </label>
+          <Checkbox
+            checked={isActive}
+            onChange={onActiveChange}
+            accent="success"
+            label="Active?"
+            className="select-none"
+          />
 
           {provider.fields.map((field) => (
             <Field
diff --git a/app/components/settings/credentials/CredentialFormPanel.tsx b/app/components/settings/credentials/CredentialFormPanel.tsx
index ae3eb412..fb9d8300 100644
--- a/app/components/settings/credentials/CredentialFormPanel.tsx
+++ b/app/components/settings/credentials/CredentialFormPanel.tsx
@@ -2,7 +2,7 @@
 
 import { Credential, ProviderDef } from "@/app/lib/types/credentials";
 import { timeAgo } from "@/app/lib/utils";
-import { Button, Field, Loader } from "@/app/components/ui";
+import { Button, Checkbox, Field, Loader } from "@/app/components/ui";
 interface CredentialFormPanelProps {
   provider: ProviderDef;
   existingCredential: Credential | null;
@@ -55,15 +55,13 @@ export default function CredentialFormPanel({
         </p>
 
         <div className="space-y-4">
-          <label className="flex items-center gap-2.5 cursor-pointer select-none w-fit">
-            <input
-              type="checkbox"
-              checked={isActive}
-              onChange={(e) => onActiveChange(e.target.checked)}
-              className="w-4 h-4 rounded accent-status-success"
-            />
-            <span className="text-sm text-text-primary">Active</span>
-          </label>
+          <Checkbox
+            checked={isActive}
+            onChange={onActiveChange}
+            accent="success"
+            label="Active"
+            className="select-none"
+          />
 
           {provider.fields.map((field) => (
             <Field
diff --git a/app/components/settings/onboarding/AddProjectModal.tsx b/app/components/settings/onboarding/AddProjectModal.tsx
index bba95fb4..74d9631b 100644
--- a/app/components/settings/onboarding/AddProjectModal.tsx
+++ b/app/components/settings/onboarding/AddProjectModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Button, Field, Modal } from "@/app/components/ui";
+import { Button, Checkbox, Field, Modal } from "@/app/components/ui";
 import { useToast } from "@/app/hooks/useToast";
 import {
   AddProjectModalProps,
@@ -94,20 +94,12 @@ export default function AddProjectModal({
           placeholder="Enter project description (optional)"
         />
 
-        <div>
-          <label className="flex items-center gap-2.5 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={isActive}
-              onChange={(e) => setIsActive(e.target.checked)}
-              className="w-4 h-4 rounded"
-            />
-            <span className="text-sm text-text-primary">Active</span>
-          </label>
-          <p className="text-xs text-text-secondary mt-1 ml-6.5">
-            Inactive projects won&apos;t be available for use.
-          </p>
-        </div>
+        <Checkbox
+          checked={isActive}
+          onChange={setIsActive}
+          label="Active"
+          description="Inactive projects won't be available for use."
+        />
 
         <div className="flex items-center justify-end gap-2 pt-4 border-t border-border">
           <Button variant="outline" size="md" onClick={handleClose}>
diff --git a/app/components/settings/onboarding/DeleteOrganizationModal.tsx b/app/components/settings/onboarding/DeleteOrganizationModal.tsx
new file mode 100644
index 00000000..69cead97
--- /dev/null
+++ b/app/components/settings/onboarding/DeleteOrganizationModal.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Checkbox, Field, Modal } from "@/app/components/ui";
+import { WarningIcon } from "@/app/components/icons";
+import { Organization } from "@/app/lib/types/onboarding";
+
+interface DeleteOrganizationModalProps {
+  organization: Organization;
+  isDeleting: boolean;
+  onCancel: () => void;
+  onConfirm: (hardDelete: boolean) => void;
+}
+
+const HARD_DELETE_ITEMS = [
+  "Projects, collections, documents",
+  "Credentials and assistants",
+  "Fine-tunings and conversations",
+  "User-project mappings",
+];
+
+export default function DeleteOrganizationModal({
+  organization,
+  isDeleting,
+  onCancel,
+  onConfirm,
+}: DeleteOrganizationModalProps) {
+  const [typedName, setTypedName] = useState("");
+  const [hardDelete, setHardDelete] = useState(false);
+  const nameMatches = typedName.trim() === organization.name;
+  const canDelete = nameMatches && !isDeleting;
+
+  return (
+    <Modal
+      open
+      onClose={onCancel}
+      title="Delete organization"
+      maxWidth="max-w-md"
+      maxHeight="max-h-fit"
+    >
+      <div className="px-6 py-5 space-y-4">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0">
+            <WarningIcon className="w-5 h-5 text-status-error-text" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm text-text-primary wrap-anywhere">
+              You&apos;re about to delete <strong>{organization.name}</strong>.
+            </p>
+            {!hardDelete && (
+              <p className="text-xs text-text-secondary mt-1">
+                Soft delete — the org is marked inactive and its projects are
+                deactivated. You can reactivate it later.
+              </p>
+            )}
+          </div>
+        </div>
+
+        {hardDelete && (
+          <div className="rounded-lg border border-status-error-border bg-status-error-bg/40 px-3 py-2.5">
+            <p className="text-xs font-semibold text-status-error-text">
+              Permanent delete — this cannot be undone.
+            </p>
+            <p className="text-xs text-text-secondary mt-1">
+              Everything under this org will be removed:
+            </p>
+            <ul className="mt-1.5 space-y-0.5 text-xs text-text-secondary list-disc pl-5">
+              {HARD_DELETE_ITEMS.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <Checkbox
+          checked={hardDelete}
+          onChange={setHardDelete}
+          disabled={isDeleting}
+          accent="error"
+          label="Permanently delete"
+        />
+
+        <div>
+          <label className="block text-xs text-text-secondary mb-1.5">
+            To confirm, type the organization name below:
+          </label>
+          <Field
+            label=""
+            value={typedName}
+            onChange={setTypedName}
+            placeholder={organization.name}
+            disabled={isDeleting}
+            autoFocus
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-border">
+        <Button
+          variant="outline"
+          size="md"
+          onClick={onCancel}
+          disabled={isDeleting}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="danger"
+          size="md"
+          onClick={() => onConfirm(hardDelete)}
+          disabled={!canDelete}
+        >
+          {isDeleting
+            ? "Deleting…"
+            : hardDelete
+              ? "Permanently delete"
+              : "Delete"}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/settings/onboarding/DeleteProjectModal.tsx b/app/components/settings/onboarding/DeleteProjectModal.tsx
new file mode 100644
index 00000000..8cab5321
--- /dev/null
+++ b/app/components/settings/onboarding/DeleteProjectModal.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Checkbox, Field, Modal } from "@/app/components/ui";
+import { WarningIcon } from "@/app/components/icons";
+import { Project } from "@/app/lib/types/onboarding";
+
+interface DeleteProjectModalProps {
+  project: Project;
+  isDeleting: boolean;
+  onCancel: () => void;
+  onConfirm: (hardDelete: boolean) => void;
+}
+
+const HARD_DELETE_ITEMS = [
+  "Collections and documents",
+  "Credentials and assistants",
+  "Fine-tunings and conversations",
+  "User-project mappings",
+];
+
+export default function DeleteProjectModal({
+  project,
+  isDeleting,
+  onCancel,
+  onConfirm,
+}: DeleteProjectModalProps) {
+  const [typedName, setTypedName] = useState("");
+  const [hardDelete, setHardDelete] = useState(false);
+  const nameMatches = typedName.trim() === project.name;
+  const canDelete = nameMatches && !isDeleting;
+
+  return (
+    <Modal
+      open
+      onClose={onCancel}
+      title="Delete project"
+      maxWidth="max-w-md"
+      maxHeight="max-h-fit"
+    >
+      <div className="px-6 py-5 space-y-4">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0">
+            <WarningIcon className="w-5 h-5 text-status-error-text" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm text-text-primary wrap-anywhere">
+              You&apos;re about to delete <strong>{project.name}</strong>.
+            </p>
+            {!hardDelete && (
+              <p className="text-xs text-text-secondary mt-1">
+                Soft delete — the project is marked inactive. No data is removed
+                and you can reactivate it later.
+              </p>
+            )}
+          </div>
+        </div>
+
+        {hardDelete && (
+          <div className="rounded-lg border border-status-error-border bg-status-error-bg/40 px-3 py-2.5">
+            <p className="text-xs font-semibold text-status-error-text">
+              Permanent delete — this cannot be undone.
+            </p>
+            <p className="text-xs text-text-secondary mt-1">
+              Everything under this project will be removed:
+            </p>
+            <ul className="mt-1.5 space-y-0.5 text-xs text-text-secondary list-disc pl-5">
+              {HARD_DELETE_ITEMS.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <Checkbox
+          checked={hardDelete}
+          onChange={setHardDelete}
+          disabled={isDeleting}
+          accent="error"
+          label="Permanently delete"
+        />
+
+        <div>
+          <label className="block text-xs text-text-secondary mb-1.5">
+            To confirm, type the project name below:
+          </label>
+          <Field
+            label=""
+            value={typedName}
+            onChange={setTypedName}
+            placeholder={project.name}
+            disabled={isDeleting}
+            autoFocus
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-border">
+        <Button
+          variant="outline"
+          size="md"
+          onClick={onCancel}
+          disabled={isDeleting}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="danger"
+          size="md"
+          onClick={() => onConfirm(hardDelete)}
+          disabled={!canDelete}
+        >
+          {isDeleting
+            ? "Deleting…"
+            : hardDelete
+              ? "Permanently delete"
+              : "Delete"}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/settings/onboarding/EditOrganizationModal.tsx b/app/components/settings/onboarding/EditOrganizationModal.tsx
new file mode 100644
index 00000000..0607501b
--- /dev/null
+++ b/app/components/settings/onboarding/EditOrganizationModal.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button, Checkbox, Field, Modal } from "@/app/components/ui";
+import { useToast } from "@/app/hooks/useToast";
+import {
+  EditOrganizationModalProps,
+  OrganizationResponse,
+} from "@/app/lib/types/onboarding";
+import { apiFetch } from "@/app/lib/apiClient";
+
+export default function EditOrganizationModal({
+  open,
+  onClose,
+  organization,
+  apiKey,
+  onOrganizationUpdated,
+}: EditOrganizationModalProps) {
+  const toast = useToast();
+  const [name, setName] = useState(organization.name);
+  const [isActive, setIsActive] = useState(organization.is_active);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [nameError, setNameError] = useState("");
+
+  useEffect(() => {
+    setName(organization.name);
+    setIsActive(organization.is_active);
+    setNameError("");
+  }, [organization]);
+
+  const handleClose = () => {
+    if (isSubmitting) return;
+    setName(organization.name);
+    setIsActive(organization.is_active);
+    setNameError("");
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    if (!name.trim()) {
+      setNameError("Organization name is required");
+      return;
+    }
+
+    setNameError("");
+    setIsSubmitting(true);
+
+    try {
+      await apiFetch<OrganizationResponse>(
+        `/api/organization/${organization.id}`,
+        apiKey,
+        {
+          method: "PATCH",
+          body: JSON.stringify({
+            name: name.trim(),
+            is_active: isActive,
+          }),
+        },
+      );
+
+      toast.success("Organization updated");
+      onOrganizationUpdated();
+      onClose();
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to update organization",
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const hasChanges =
+    name.trim() !== organization.name || isActive !== organization.is_active;
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      title="Edit organization"
+      maxWidth="max-w-md"
+    >
+      <div className="px-6 pb-6 space-y-4">
+        <Field
+          label="Name *"
+          value={name}
+          onChange={(val) => {
+            setName(val);
+            if (nameError) setNameError("");
+          }}
+          placeholder="Enter organization name"
+          error={nameError}
+        />
+
+        <Checkbox
+          checked={isActive}
+          onChange={setIsActive}
+          label="Active"
+          description="Inactive organizations are hidden from listings and their projects are deactivated."
+        />
+
+        <div className="flex items-center justify-end gap-2 pt-4 border-t border-border">
+          <Button
+            variant="outline"
+            size="md"
+            onClick={handleClose}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={isSubmitting || !name.trim() || !hasChanges}
+            size="md"
+          >
+            {isSubmitting ? "Saving..." : "Save Changes"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/settings/onboarding/EditProjectModal.tsx b/app/components/settings/onboarding/EditProjectModal.tsx
index f239203b..339012d6 100644
--- a/app/components/settings/onboarding/EditProjectModal.tsx
+++ b/app/components/settings/onboarding/EditProjectModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Button, Field, Modal } from "@/app/components/ui";
+import { Button, Checkbox, Field, Modal } from "@/app/components/ui";
 import { useToast } from "@/app/hooks/useToast";
 import {
   EditProjectModalProps,
@@ -18,21 +18,21 @@ export default function EditProjectModal({
 }: EditProjectModalProps) {
   const toast = useToast();
   const [name, setName] = useState(project.name);
-  const [description, setDescription] = useState(project.description);
+  const [description, setDescription] = useState(project.description ?? "");
   const [isActive, setIsActive] = useState(project.is_active);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [nameError, setNameError] = useState("");
 
   useEffect(() => {
     setName(project.name);
-    setDescription(project.description);
+    setDescription(project.description ?? "");
     setIsActive(project.is_active);
     setNameError("");
   }, [project]);
 
   const handleClose = () => {
     setName(project.name);
-    setDescription(project.description);
+    setDescription(project.description ?? "");
     setIsActive(project.is_active);
     setNameError("");
     onClose();
@@ -95,20 +95,12 @@ export default function EditProjectModal({
           placeholder="Enter project description (optional)"
         />
 
-        <div>
-          <label className="flex items-center gap-2.5 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={isActive}
-              onChange={(e) => setIsActive(e.target.checked)}
-              className="w-4 h-4 rounded"
-            />
-            <span className="text-sm text-text-primary">Active</span>
-          </label>
-          <p className="text-xs text-text-secondary mt-1 ml-6.5">
-            Inactive projects won&apos;t be available for use.
-          </p>
-        </div>
+        <Checkbox
+          checked={isActive}
+          onChange={setIsActive}
+          label="Active"
+          description="Inactive projects won't be available for use."
+        />
 
         <div className="flex items-center justify-end gap-2 pt-4 border-t border-border">
           <Button variant="outline" size="md" onClick={handleClose}>
diff --git a/app/components/settings/onboarding/OrganizationList.tsx b/app/components/settings/onboarding/OrganizationList.tsx
index 972eb3cb..2c96b041 100644
--- a/app/components/settings/onboarding/OrganizationList.tsx
+++ b/app/components/settings/onboarding/OrganizationList.tsx
@@ -1,53 +1,170 @@
-import { OrganizationListProps } from "@/app/lib/types/onboarding";
+import {
+  ActiveStatus,
+  OrganizationListProps,
+} from "@/app/lib/types/onboarding";
 import { formatRelativeTime } from "@/app/lib/utils";
-import { Button, Loader } from "@/app/components/ui";
+import { Button, Loader, TabNavigation } from "@/app/components/ui";
 import { useAuth } from "@/app/lib/context/AuthContext";
-import { ChevronRightIcon } from "@/app/components/icons";
+import {
+  ChevronRightIcon,
+  EditIcon,
+  SearchIcon,
+  TrashIcon,
+} from "@/app/components/icons";
+import { STATUS_TABS } from "@/app/lib/constants";
+
+function OrganizationRowsSkeleton() {
+  return (
+    <div className="space-y-2 animate-pulse">
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          className="flex items-center justify-between gap-3 p-4 rounded-lg bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)]"
+        >
+          <div className="min-w-0 flex-1">
+            <div className="h-4 w-40 max-w-full bg-neutral-200 rounded mb-2" />
+            <div className="h-3 w-28 bg-neutral-100 rounded" />
+          </div>
+          <div className="h-4 w-4 shrink-0 bg-neutral-100 rounded" />
+        </div>
+      ))}
+    </div>
+  );
+}
 
 export default function OrganizationList({
   organizations,
+  isLoading,
   isLoadingMore,
   onNewOrg,
   onSelectOrg,
+  onDeleteOrg,
+  onEditOrg,
+  onActivateOrg,
+  search,
+  onSearchChange,
+  activeStatus,
+  onActiveStatusChange,
+  activatingOrgId = null,
 }: OrganizationListProps) {
   const { currentUser } = useAuth();
+  const canDelete = currentUser?.is_superuser && !!onDeleteOrg;
+  const canEdit = currentUser?.is_superuser && !!onEditOrg;
+  const canActivate = currentUser?.is_superuser && !!onActivateOrg;
   return (
     <div>
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h2 className="text-lg font-semibold text-text-primary">
-            Organizations
-          </h2>
-          <p className="text-xs text-text-secondary mt-0.5">
-            {organizations.length} organization
-            {organizations.length !== 1 ? "s" : ""}
-          </p>
+      <div className="sticky top-0 z-10 bg-bg-primary -mx-8 -mt-5 px-8 pt-5 pb-4">
+        <div className="flex items-center justify-between mb-3">
+          <div>
+            <h2 className="text-lg font-semibold text-text-primary">
+              Organizations
+            </h2>
+            <p className="text-xs text-text-secondary mt-0.5">
+              {organizations.length} organization
+              {organizations.length !== 1 ? "s" : ""}
+            </p>
+          </div>
+          {currentUser?.is_superuser && (
+            <Button size="sm" onClick={onNewOrg}>
+              + New Organization
+            </Button>
+          )}
+        </div>
+        <div className="relative mb-3">
+          <SearchIcon className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary pointer-events-none" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search organizations..."
+            className="w-full pl-10 pr-4 py-2.5 rounded-full bg-bg-secondary text-text-primary text-sm placeholder:text-neutral focus:outline-none focus:ring-1 focus:ring-accent-primary focus:bg-bg-primary transition-colors"
+          />
+        </div>
+        <div className="-mx-4">
+          <TabNavigation
+            tabs={STATUS_TABS}
+            activeTab={activeStatus}
+            onTabChange={(id) => onActiveStatusChange(id as ActiveStatus)}
+          />
         </div>
-        {currentUser?.is_superuser && (
-          <Button size="sm" onClick={onNewOrg}>
-            + New Organization
-          </Button>
-        )}
       </div>
 
-      <div className="space-y-2">
-        {organizations.map((org) => (
-          <button
-            key={org.id}
-            onClick={() => onSelectOrg(org)}
-            className="w-full flex items-center justify-between gap-3 p-4 rounded-lg bg-bg-primary text-left shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)] hover:shadow-[0_4px_12px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow cursor-pointer"
-          >
-            <div className="min-w-0">
-              <p className="text-sm font-medium text-text-primary truncate">
-                {org.name}
-              </p>
-              <p className="text-xs text-text-secondary mt-0.5">
-                Created {formatRelativeTime(org.inserted_at)}
-              </p>
+      <div className="space-y-2 mt-3">
+        {isLoading && organizations.length === 0 ? (
+          <OrganizationRowsSkeleton />
+        ) : organizations.length === 0 ? (
+          <div className="text-center py-12 text-text-secondary text-sm">
+            {search.trim()
+              ? `No ${activeStatus} organizations match "${search.trim()}"`
+              : activeStatus === "inactive"
+                ? "No inactive organizations"
+                : "No organizations yet"}
+          </div>
+        ) : (
+          organizations.map((org) => (
+            <div
+              key={org.id}
+              className="group w-full flex items-center justify-between gap-3 p-4 rounded-lg bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)] hover:shadow-[0_4px_12px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow"
+            >
+              <button
+                type="button"
+                onClick={() => onSelectOrg(org)}
+                className="flex-1 min-w-0 text-left cursor-pointer"
+              >
+                <p className="text-sm font-medium text-text-primary truncate">
+                  {org.name}
+                </p>
+                <p className="text-xs text-text-secondary mt-0.5">
+                  Created {formatRelativeTime(org.inserted_at)}
+                </p>
+              </button>
+              <div className="flex items-center gap-1 shrink-0">
+                {canActivate && !org.is_active && (
+                  <button
+                    type="button"
+                    onClick={() => onActivateOrg!(org)}
+                    disabled={activatingOrgId === org.id}
+                    className="px-2.5 py-1 rounded-md border border-status-success-border text-status-success-text bg-status-success-bg/40 hover:bg-status-success-bg hover:border-status-success-text text-xs font-medium transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+                    aria-label={`Activate ${org.name}`}
+                    title="Activate organization"
+                  >
+                    {activatingOrgId === org.id ? "Activating…" : "Activate"}
+                  </button>
+                )}
+                {canEdit && (
+                  <button
+                    type="button"
+                    onClick={() => onEditOrg!(org)}
+                    className="p-1.5 rounded-md text-text-secondary hover:bg-neutral-100 hover:text-text-primary transition-colors cursor-pointer"
+                    aria-label={`Edit ${org.name}`}
+                    title="Edit organization"
+                  >
+                    <EditIcon className="w-4 h-4" />
+                  </button>
+                )}
+                {canDelete && (
+                  <button
+                    type="button"
+                    onClick={() => onDeleteOrg!(org)}
+                    className="p-1.5 rounded-md border border-status-error-border text-status-error-text bg-status-error-bg/40 hover:bg-status-error-bg hover:border-status-error-text transition-colors cursor-pointer"
+                    aria-label={`Delete ${org.name}`}
+                    title="Delete organization"
+                  >
+                    <TrashIcon className="w-4 h-4" />
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={() => onSelectOrg(org)}
+                  aria-label={`Open ${org.name}`}
+                  className="p-1 rounded-md text-text-secondary cursor-pointer"
+                >
+                  <ChevronRightIcon className="w-4 h-4" />
+                </button>
+              </div>
             </div>
-            <ChevronRightIcon className="w-4 h-4 shrink-0 text-text-secondary" />
-          </button>
-        ))}
+          ))
+        )}
       </div>
 
       {isLoadingMore && (
diff --git a/app/components/settings/onboarding/OrganizationListSkeleton.tsx b/app/components/settings/onboarding/OrganizationListSkeleton.tsx
new file mode 100644
index 00000000..b2cf0623
--- /dev/null
+++ b/app/components/settings/onboarding/OrganizationListSkeleton.tsx
@@ -0,0 +1,27 @@
+export default function OrganizationListSkeleton() {
+  return (
+    <div className="animate-pulse">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <div className="h-5 w-36 bg-neutral-200 rounded mb-2" />
+          <div className="h-3 w-24 bg-neutral-100 rounded" />
+        </div>
+        <div className="h-9 w-40 bg-neutral-200 rounded-full" />
+      </div>
+      <div className="space-y-2.5">
+        {[1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className="flex items-center justify-between gap-3 p-4 rounded-lg bg-bg-primary shadow-[0_2px_6px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)]"
+          >
+            <div className="min-w-0 flex-1">
+              <div className="h-4 w-40 max-w-full bg-neutral-200 rounded mb-2" />
+              <div className="h-3 w-28 bg-neutral-100 rounded" />
+            </div>
+            <div className="h-4 w-4 shrink-0 bg-neutral-100 rounded" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/settings/onboarding/ProjectList.tsx b/app/components/settings/onboarding/ProjectList.tsx
index c5cc0d50..08b27d02 100644
--- a/app/components/settings/onboarding/ProjectList.tsx
+++ b/app/components/settings/onboarding/ProjectList.tsx
@@ -1,17 +1,24 @@
 "use client";
 
 import { useState } from "react";
-import { Project, ProjectListProps } from "@/app/lib/types/onboarding";
+import {
+  ActiveStatus,
+  Project,
+  ProjectListProps,
+} from "@/app/lib/types/onboarding";
 import { formatRelativeTime } from "@/app/lib/utils";
 import {
   ArrowLeftIcon,
   ChevronRightIcon,
   EditIcon,
+  SearchIcon,
+  TrashIcon,
 } from "@/app/components/icons";
-import { Button } from "@/app/components/ui";
+import { Button, TabNavigation } from "@/app/components/ui";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import AddProjectModal from "./AddProjectModal";
 import EditProjectModal from "./EditProjectModal";
+import { STATUS_TABS } from "@/app/lib/constants";
 
 function ProjectListSkeleton() {
   return (
@@ -42,43 +49,77 @@ export default function ProjectList({
   onBack,
   onSelectProject,
   onProjectAdded,
+  search,
+  onSearchChange,
+  activeStatus,
+  onActiveStatusChange,
+  onDeleteProject,
+  onActivateProject,
+  activatingProjectId = null,
 }: ProjectListProps) {
   const { activeKey, currentUser } = useAuth();
+  const canActivate = currentUser?.is_superuser && !!onActivateProject;
   const [showAddModal, setShowAddModal] = useState(false);
   const [editingProject, setEditingProject] = useState<Project | null>(null);
 
   return (
     <div>
-      <button
-        onClick={onBack}
-        className="text-sm text-text-secondary hover:text-text-primary mb-4 flex items-center gap-1 transition-colors cursor-pointer"
-      >
-        <ArrowLeftIcon className="w-3.5 h-3.5" /> Back to organizations
-      </button>
+      <div className="sticky top-0 z-10 bg-bg-primary -mx-8 -mt-5 px-8 pt-5 pb-4">
+        <button
+          onClick={onBack}
+          className="text-sm text-text-secondary hover:text-text-primary mb-4 flex items-center gap-1 transition-colors cursor-pointer"
+        >
+          <ArrowLeftIcon className="w-3.5 h-3.5" /> Back to organizations
+        </button>
+
+        <div className="flex items-center justify-between mb-3">
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold text-text-primary truncate">
+              {organization.name}
+            </h2>
+            <p className="text-xs text-text-secondary mt-0.5">
+              {isLoading
+                ? "Loading projects..."
+                : `${projects.length} project${projects.length !== 1 ? "s" : ""}`}
+            </p>
+          </div>
+          {currentUser?.is_superuser && (
+            <Button size="sm" onClick={() => setShowAddModal(true)}>
+              + Add Project
+            </Button>
+          )}
+        </div>
 
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h2 className="text-lg font-semibold text-text-primary">
-            {organization.name}
-          </h2>
-          <p className="text-xs text-text-secondary mt-0.5">
-            {isLoading
-              ? "Loading projects..."
-              : `${projects.length} project${projects.length !== 1 ? "s" : ""}`}
-          </p>
+        <div className="relative mb-3">
+          <SearchIcon className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary pointer-events-none" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search projects..."
+            className="w-full pl-10 pr-4 py-2.5 rounded-full bg-bg-secondary text-text-primary text-sm placeholder:text-neutral focus:outline-none focus:ring-1 focus:ring-accent-primary focus:bg-bg-primary transition-colors"
+          />
+        </div>
+        <div className="-mx-4">
+          <TabNavigation
+            tabs={STATUS_TABS}
+            activeTab={activeStatus}
+            onTabChange={(id) => onActiveStatusChange(id as ActiveStatus)}
+          />
         </div>
-        {currentUser?.is_superuser && (
-          <Button size="sm" onClick={() => setShowAddModal(true)}>
-            + Add Project
-          </Button>
-        )}
       </div>
 
+      <div className="mt-3" />
+
       {isLoading ? (
         <ProjectListSkeleton />
       ) : projects.length === 0 ? (
         <div className="text-center py-12 text-text-secondary text-sm">
-          No projects found for this organization.
+          {search.trim()
+            ? `No ${activeStatus} projects match "${search.trim()}"`
+            : activeStatus === "inactive"
+              ? "No inactive projects in this organization."
+              : "No projects found for this organization."}
         </div>
       ) : (
         <div className="space-y-2">
@@ -104,15 +145,22 @@ export default function ProjectList({
                 </p>
               </button>
               <div className="flex items-center gap-2 shrink-0">
-                <span
-                  className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-medium border ${
-                    project.is_active
-                      ? "bg-status-success-bg text-status-success-text border-status-success-border"
-                      : "bg-bg-secondary text-text-secondary border-border"
-                  }`}
-                >
-                  {project.is_active ? "Active" : "Inactive"}
-                </span>
+                {canActivate && !project.is_active && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onActivateProject!(project);
+                    }}
+                    disabled={activatingProjectId === project.id}
+                    className="px-2.5 py-1 rounded-md border border-status-success-border text-status-success-text bg-status-success-bg/40 hover:bg-status-success-bg hover:border-status-success-text text-xs font-medium transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+                    title="Activate project"
+                    aria-label={`Activate ${project.name}`}
+                  >
+                    {activatingProjectId === project.id
+                      ? "Activating…"
+                      : "Activate"}
+                  </button>
+                )}
                 {currentUser?.is_superuser && (
                   <button
                     onClick={(e) => {
@@ -126,6 +174,19 @@ export default function ProjectList({
                     <EditIcon className="w-4 h-4" />
                   </button>
                 )}
+                {currentUser?.is_superuser && onDeleteProject && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDeleteProject(project);
+                    }}
+                    className="p-1.5 rounded-md border border-status-error-border text-status-error-text bg-status-error-bg/40 hover:bg-status-error-bg hover:border-status-error-text transition-colors cursor-pointer"
+                    title="Delete project"
+                    aria-label={`Delete ${project.name}`}
+                  >
+                    <TrashIcon className="w-4 h-4" />
+                  </button>
+                )}
                 <button
                   onClick={() => onSelectProject(project)}
                   className="p-1.5 rounded-md text-text-secondary hover:bg-neutral-100 hover:text-text-primary transition-colors cursor-pointer"
diff --git a/app/components/settings/onboarding/index.ts b/app/components/settings/onboarding/index.ts
index 27ebaa4d..da34ea3e 100644
--- a/app/components/settings/onboarding/index.ts
+++ b/app/components/settings/onboarding/index.ts
@@ -1,6 +1,7 @@
 export { default as OnboardingForm } from "./OnboardingForm";
 export { default as OnboardingSuccess } from "./OnboardingSuccess";
 export { default as OrganizationList } from "./OrganizationList";
+export { default as OrganizationListSkeleton } from "./OrganizationListSkeleton";
 export { default as ProjectList } from "./ProjectList";
 export { default as StepIndicator } from "./StepIndicator";
 export { default as UserList } from "./UserList";
@@ -8,3 +9,6 @@ export { default as OnboardingCredentials } from "./OnboardingCredentials";
 export { default as AddUserModal } from "./AddUserModal";
 export { default as AddProjectModal } from "./AddProjectModal";
 export { default as EditProjectModal } from "./EditProjectModal";
+export { default as DeleteOrganizationModal } from "./DeleteOrganizationModal";
+export { default as DeleteProjectModal } from "./DeleteProjectModal";
+export { default as EditOrganizationModal } from "./EditOrganizationModal";
diff --git a/app/components/ui/Checkbox.tsx b/app/components/ui/Checkbox.tsx
new file mode 100644
index 00000000..bbe7ca60
--- /dev/null
+++ b/app/components/ui/Checkbox.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { CheckboxAccent, CheckboxProps } from "@/app/lib/types/ui";
+
+const ACCENT_CLASS: Record<CheckboxAccent, string> = {
+  primary: "",
+  success: "accent-status-success",
+  error: "accent-status-error-text",
+};
+
+export default function Checkbox({
+  checked,
+  onChange,
+  label,
+  description,
+  accent = "primary",
+  disabled = false,
+  className = "",
+  inputClassName = "",
+  ...inputProps
+}: CheckboxProps) {
+  const inputEl = (
+    <input
+      type="checkbox"
+      checked={checked}
+      onChange={(e) => onChange(e.target.checked)}
+      disabled={disabled}
+      className={`w-4 h-4 rounded shrink-0 ${ACCENT_CLASS[accent]} ${inputClassName}`}
+      {...inputProps}
+    />
+  );
+
+  if (!label && !description) return inputEl;
+
+  return (
+    <label
+      className={`inline-flex items-start gap-2.5 ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"} ${className}`}
+    >
+      <span className="flex items-center h-5 shrink-0">{inputEl}</span>
+      <span className="leading-tight">
+        {label && <span className="text-sm text-text-primary">{label}</span>}
+        {description && (
+          <span className="block text-xs text-text-secondary mt-0.5">
+            {description}
+          </span>
+        )}
+      </span>
+    </label>
+  );
+}
diff --git a/app/components/ui/index.ts b/app/components/ui/index.ts
index 789093f0..620aa19b 100644
--- a/app/components/ui/index.ts
+++ b/app/components/ui/index.ts
@@ -1,4 +1,5 @@
 export { default as Button } from "./Button";
+export { default as Checkbox } from "./Checkbox";
 export { default as Field } from "./Field";
 export { default as Select } from "./Select";
 export { default as MultiSelect } from "./MultiSelect";
diff --git a/app/hooks/index.ts b/app/hooks/index.ts
index 66db69bc..c8c473c9 100644
--- a/app/hooks/index.ts
+++ b/app/hooks/index.ts
@@ -1,4 +1,6 @@
 export { useConfigs } from "./useConfigs";
+export { useDebouncedValue } from "./useDebouncedValue";
+export { useOnboardingActivation } from "./useOnboardingActivation";
 export { useInfiniteScroll } from "./useInfiniteScroll";
 export { usePaginatedList } from "./usePaginatedList";
 export type { UsePaginatedListResult } from "@/app/lib/types/pagination";
diff --git a/app/hooks/useDebouncedValue.ts b/app/hooks/useDebouncedValue.ts
new file mode 100644
index 00000000..243cd3ac
--- /dev/null
+++ b/app/hooks/useDebouncedValue.ts
@@ -0,0 +1,12 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(t);
+  }, [value, delayMs]);
+  return debounced;
+}
diff --git a/app/hooks/useOnboardingActivation.ts b/app/hooks/useOnboardingActivation.ts
new file mode 100644
index 00000000..f717d86a
--- /dev/null
+++ b/app/hooks/useOnboardingActivation.ts
@@ -0,0 +1,64 @@
+"use client";
+
+import { useState } from "react";
+import { apiFetch } from "@/app/lib/apiClient";
+import { Organization, Project } from "@/app/lib/types/onboarding";
+import { useToast } from "@/app/hooks/useToast";
+
+export function useOnboardingActivation({
+  apiKey,
+  onOrgActivated,
+  onProjectActivated,
+}: {
+  apiKey: string;
+  onOrgActivated?: () => void | Promise<void>;
+  onProjectActivated?: () => void | Promise<void>;
+}) {
+  const toast = useToast();
+  const [activatingOrgId, setActivatingOrgId] = useState<number | null>(null);
+  const [activatingProjectId, setActivatingProjectId] = useState<number | null>(
+    null,
+  );
+
+  const activateOrg = async (org: Organization) => {
+    setActivatingOrgId(org.id);
+    try {
+      await apiFetch(`/api/organization/${org.id}`, apiKey, {
+        method: "PATCH",
+        body: JSON.stringify({ name: org.name, is_active: true }),
+      });
+      toast.success(`"${org.name}" activated`);
+      await onOrgActivated?.();
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : "Failed to activate organization",
+      );
+    } finally {
+      setActivatingOrgId(null);
+    }
+  };
+
+  const activateProject = async (project: Project) => {
+    setActivatingProjectId(project.id);
+    try {
+      await apiFetch(`/api/projects/${project.id}`, apiKey, {
+        method: "PATCH",
+        body: JSON.stringify({
+          name: project.name,
+          description: project.description ?? "",
+          is_active: true,
+        }),
+      });
+      toast.success(`"${project.name}" activated`);
+      await onProjectActivated?.();
+    } catch (e) {
+      toast.error(
+        e instanceof Error ? e.message : "Failed to activate project",
+      );
+    } finally {
+      setActivatingProjectId(null);
+    }
+  };
+
+  return { activatingOrgId, activatingProjectId, activateOrg, activateProject };
+}
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 8f86fee4..cb084b26 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -183,3 +183,8 @@ export const TOAST_CONFIG: Record<
     progressBg: "#3498db",
   },
 };
+
+export const STATUS_TABS = [
+  { id: "active", label: "Active" },
+  { id: "inactive", label: "Inactive" },
+];
diff --git a/app/lib/types/onboarding.ts b/app/lib/types/onboarding.ts
index c37702e3..f7961aaf 100644
--- a/app/lib/types/onboarding.ts
+++ b/app/lib/types/onboarding.ts
@@ -71,11 +71,22 @@ export interface UserProjectDeleteResponse {
   metadata?: Record<string, unknown>;
 }
 
+export type ActiveStatus = "active" | "inactive";
+
 export interface OrganizationListProps {
   organizations: Organization[];
+  isLoading: boolean;
   isLoadingMore: boolean;
   onNewOrg: () => void;
   onSelectOrg: (org: Organization) => void;
+  onDeleteOrg?: (org: Organization) => void;
+  onEditOrg?: (org: Organization) => void;
+  onActivateOrg?: (org: Organization) => void;
+  search: string;
+  onSearchChange: (value: string) => void;
+  activeStatus: ActiveStatus;
+  onActiveStatusChange: (status: ActiveStatus) => void;
+  activatingOrgId?: number | null;
 }
 
 export interface ProjectListProps {
@@ -85,6 +96,13 @@ export interface ProjectListProps {
   onBack: () => void;
   onSelectProject: (project: Project) => void;
   onProjectAdded: () => void;
+  search: string;
+  onSearchChange: (value: string) => void;
+  activeStatus: ActiveStatus;
+  onActiveStatusChange: (status: ActiveStatus) => void;
+  onDeleteProject?: (project: Project) => void;
+  onActivateProject?: (project: Project) => void;
+  activatingProjectId?: number | null;
 }
 
 export interface UserListProps {
@@ -110,6 +128,22 @@ export interface EditProjectModalProps {
   onProjectUpdated: () => void;
 }
 
+export interface EditOrganizationModalProps {
+  open: boolean;
+  onClose: () => void;
+  organization: Organization;
+  apiKey: string;
+  onOrganizationUpdated: () => void;
+}
+
+export interface OrganizationResponse {
+  success: boolean;
+  data?: Organization;
+  error?: string;
+  errors?: { field: string; message: string }[];
+  metadata?: Record<string, unknown>;
+}
+
 export interface AddUserModalProps {
   open: boolean;
   onClose: () => void;
diff --git a/app/lib/types/ui.ts b/app/lib/types/ui.ts
index 7dadc5ec..b6e05a84 100644
--- a/app/lib/types/ui.ts
+++ b/app/lib/types/ui.ts
@@ -1,3 +1,5 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+
 export interface SelectOption {
   value: string;
   label: string;
@@ -8,3 +10,19 @@ export interface SelectOption {
    */
   group?: string;
 }
+
+export type CheckboxAccent = "primary" | "success" | "error";
+
+export interface CheckboxProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "onChange" | "type" | "checked"
+> {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: ReactNode;
+  description?: ReactNode;
+  accent?: CheckboxAccent;
+  disabled?: boolean;
+  className?: string;
+  inputClassName?: string;
+}