diff --git a/.claude/launch.json b/.claude/launch.json
index 8b30f3bf..e8f8d419 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -5,7 +5,8 @@
       "name": "dev",
       "runtimeExecutable": "npm",
       "runtimeArgs": ["run", "dev"],
-      "port": 5173
+      "port": 5173,
+      "autoPort": true
     }
   ]
 }
diff --git a/cypress/e2e/ocotillo/list-pages.cy.ts b/cypress/e2e/ocotillo/list-pages.cy.ts
index 260974b4..b4f2919d 100644
--- a/cypress/e2e/ocotillo/list-pages.cy.ts
+++ b/cypress/e2e/ocotillo/list-pages.cy.ts
@@ -43,23 +43,25 @@ describe('Ocotillo List Pages', () => {
   })
 
   it('renders the project list with project rows and navigation targets', () => {
-    cy.visit('/ocotillo/well/projects')
+    cy.visit('/ocotillo/projects')
     cy.wait('@getProjects')
 
     cy.contains('h3', /^Projects$/).should('be.visible')
-    cy.get('input[aria-label="Filter rows on this page"]').should(
+    cy.get('input[aria-label="Search projects"]').should(
       'have.attr',
       'placeholder',
-      'Filter this page...'
+      'Search projects…'
     )
 
-    cy.contains('[role="columnheader"]', 'Name').should('be.visible')
-    cy.contains('[role="columnheader"]', 'Description').should('be.visible')
-    cy.contains('[role="columnheader"]', 'Release Status').should('be.visible')
-    cy.contains('[role="columnheader"]', 'Type').should('be.visible')
+    // Native table semantics: the shadcn table renders th/tr rather than the
+    // DataGrid's explicit role attributes.
+    cy.contains('th', 'Name').should('be.visible')
+    cy.contains('th', 'Description').should('be.visible')
+    cy.contains('th', 'Release Status').should('be.visible')
+    cy.contains('th', 'Type').should('be.visible')
 
-    cy.contains('[role="row"]', projectAlpha.name).should('be.visible')
-    cy.contains('[role="row"]', projectBeta.name).should('be.visible')
+    cy.contains('tr', projectAlpha.name).should('be.visible')
+    cy.contains('tr', projectBeta.name).should('be.visible')
     cy.contains(projectAlpha.description).should('be.visible')
   })
 
@@ -68,7 +70,6 @@ describe('Ocotillo List Pages', () => {
     cy.wait('@getContacts')
 
     cy.contains('h3', /contacts & owners/i).should('be.visible')
-    cy.get('input[aria-label="Filter rows on this page"]').should('be.visible')
 
     cy.contains('[role="columnheader"]', 'Name').should('be.visible')
     cy.contains('[role="columnheader"]', 'Organization').should('be.visible')
diff --git a/cypress/e2e/ocotillo/show-pages.cy.ts b/cypress/e2e/ocotillo/show-pages.cy.ts
index baa20c92..a340ac31 100644
--- a/cypress/e2e/ocotillo/show-pages.cy.ts
+++ b/cypress/e2e/ocotillo/show-pages.cy.ts
@@ -13,7 +13,7 @@ describe('Ocotillo Show Pages', () => {
   it('renders the project show page with details, map, and associated wells', () => {
     interceptProjectShowFixtures()
     cy.login()
-    cy.visit('/ocotillo/well/projects/show/10')
+    cy.visit('/ocotillo/projects/show/10')
     cy.wait('@getProject')
 
     cy.contains('h3', projectAlpha.name).should('be.visible')
diff --git a/src/analytics/posthog.ts b/src/analytics/posthog.ts
index afec9e22..0785d5d3 100644
--- a/src/analytics/posthog.ts
+++ b/src/analytics/posthog.ts
@@ -145,7 +145,7 @@ export const listPageviewProps = (
   pathname: string,
   search: string
 ): Record<string, unknown> | undefined => {
-  if (pathname === '/ocotillo/well/projects') {
+  if (pathname === '/ocotillo/projects') {
     return { page_template: 'projects_list' }
   }
 
diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 0083504d..5adbd0ab 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -1088,7 +1088,7 @@ const BREADCRUMB_RESOURCES: Record<
   sample: { label: 'Samples', listHref: '/ocotillo/sample', resource: 'sample' },
   projects: {
     label: 'Projects',
-    listHref: '/ocotillo/well/projects',
+    listHref: '/ocotillo/projects',
     resource: 'group',
   },
 }
diff --git a/src/components/ListPage.tsx b/src/components/ListPage.tsx
index 90a8705d..be52d1bf 100644
--- a/src/components/ListPage.tsx
+++ b/src/components/ListPage.tsx
@@ -18,7 +18,7 @@ import {
   MuiEvent,
 } from '@mui/x-data-grid'
 import { settings } from '@/settings'
-import React, { useMemo, useState } from 'react'
+import React from 'react'
 import { useNavigate } from 'react-router'
 import {
   CanAccess,
@@ -35,10 +35,12 @@ import {
 } from '@/components/OcotilloPageHeader'
 
 /**
- * Standard layout for Ocotillo list pages: title, optional description, search
- * bar, record count, and MUI DataGrid with shared toolbar. Wells and Projects
- * both use this component; page files supply columns, dataGridProps, and any
- * page-specific header buttons or row navigation.
+ * Standard layout for Ocotillo list pages: title, optional description, record
+ * count, and MUI DataGrid with shared toolbar. Wells and Projects both use this
+ * component; page files supply columns, dataGridProps, and any page-specific
+ * header buttons or row navigation. Lists that opt into searchMode="server"
+ * also get a search input; everything else filters via the DataGrid's Filters
+ * toolbar button.
  */
 
 // Shows a dismissible chip for each active column filter.
@@ -238,9 +240,9 @@ export const ListPage: React.FC<ListPageProps> = ({
   }
 
   const navigate = useNavigate()
-  const [localQuickFilter, setLocalQuickFilter] = useState('')
-  const quickFilter =
-    searchMode === 'server' ? (searchValue ?? '') : localQuickFilter
+  // Only server-search lists get a search input; client-side filtering is the
+  // DataGrid's Filters toolbar button.
+  const isServerSearch = searchMode === 'server'
 
   const { show } = useNavigation()
   const { resource } = useResourceParams()
@@ -275,38 +277,7 @@ export const ListPage: React.FC<ListPageProps> = ({
   const rowCount = dataGridProps.rowCount as number | undefined
   const { rows: allRows, ...restDataGridProps } = dataGridProps
 
-  const getSearchableCellValue = (row: any, col: GridColDef<any>) => {
-    const raw = row[col.field]
-
-    if (raw == null) return ''
-    if (Array.isArray(raw)) return raw.map((v) => String(v)).join(', ')
-    if (typeof raw === 'object') return JSON.stringify(raw)
-    return String(raw)
-  }
-
-  const filteredRows = useMemo(() => {
-    if (searchMode === 'server') {
-      return allRows ?? []
-    }
-
-    if (!quickFilter || !allRows) return allRows ?? []
-
-    const needle = quickFilter.toLowerCase().trim()
-
-    return allRows.filter((row: any) =>
-      columns.some((col) =>
-        getSearchableCellValue(row, col).toLowerCase().includes(needle)
-      )
-    )
-  }, [allRows, quickFilter, columns, searchMode])
-
-  const handleSearchChange = (value: string) => {
-    if (searchMode === 'server') {
-      onSearchChange?.(value)
-    } else {
-      setLocalQuickFilter(value)
-    }
-  }
+  const rows = allRows ?? []
 
   const toolbarConfig = {
     hideExport: restDataGridProps.paginationMode === 'server',
@@ -398,52 +369,45 @@ export const ListPage: React.FC<ListPageProps> = ({
       >
         {children}
 
-        {/* Search bar and record count sit outside the DataGrid to preserve input focus */}
+        {/* Server search bar and record count sit outside the DataGrid to preserve input focus */}
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between',
+            justifyContent: isServerSearch ? 'space-between' : 'flex-end',
             px: 0,
             pb: 1.5,
           }}
         >
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-              border: 1,
-              borderColor: 'divider',
-              borderRadius: 1,
-              px: 1,
-              py: 0.25,
-              width: 400,
-              bgcolor: 'background.paper',
-            }}
-          >
-            <SearchIcon
-              sx={{ fontSize: 16, color: 'text.secondary', flexShrink: 0 }}
-            />
-            <InputBase
-              value={quickFilter}
-              onChange={(e) => handleSearchChange(e.target.value)}
-              placeholder={
-                searchPlaceholder ??
-                (searchMode === 'server'
-                  ? 'Search all records...'
-                  : 'Filter this page...')
-              }
-              sx={{ fontSize: 14, flex: 1 }}
-              inputProps={{
-                'aria-label':
-                  searchAriaLabel ??
-                  (searchMode === 'server'
-                    ? 'Search all records'
-                    : 'Filter rows on this page'),
+          {isServerSearch && (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                border: 1,
+                borderColor: 'divider',
+                borderRadius: 1,
+                px: 1,
+                py: 0.25,
+                width: 400,
+                bgcolor: 'background.paper',
               }}
-            />
-          </Box>
+            >
+              <SearchIcon
+                sx={{ fontSize: 16, color: 'text.secondary', flexShrink: 0 }}
+              />
+              <InputBase
+                value={searchValue ?? ''}
+                onChange={(e) => onSearchChange?.(e.target.value)}
+                placeholder={searchPlaceholder ?? 'Search all records...'}
+                sx={{ fontSize: 14, flex: 1 }}
+                inputProps={{
+                  'aria-label': searchAriaLabel ?? 'Search all records',
+                }}
+              />
+            </Box>
+          )}
           {rowCount !== undefined && rowCount > 0 && (
             <Typography variant="caption" color="text.secondary">
               {rowCount.toLocaleString()} total records
@@ -454,7 +418,7 @@ export const ListPage: React.FC<ListPageProps> = ({
         {/* Refine sets filterDebounceMs to 0 for server-side grids; restore MUI debounce so toolbar column filters keep input focus while typing. */}
         <DataGrid
           {...restDataGridProps}
-          rows={filteredRows}
+          rows={rows}
           filterDebounceMs={
             restDataGridProps.filterMode === 'server'
               ? 700
diff --git a/src/components/MapComponent.tsx b/src/components/MapComponent.tsx
index 86a8e931..cff572a9 100644
--- a/src/components/MapComponent.tsx
+++ b/src/components/MapComponent.tsx
@@ -30,6 +30,8 @@ interface MapComponentProps {
   popupContent?: any
   setPopupContent?: any
   onMouseMoveCallback?: any
+  /** Fires once the map is ready, for callers that fit bounds after mount. */
+  onLoad?: () => void
   showDrawControls?: {
     show: boolean
     position?: ControlPosition
@@ -61,6 +63,7 @@ export const MapComponent = ({
   popupContent,
   setPopupContent,
   onMouseMoveCallback,
+  onLoad,
   setSelectionPolygons,
   isLoading = false,
   initialViewState,
@@ -279,7 +282,10 @@ export const MapComponent = ({
       ref={mapRef}
       initialViewState={initialViewState}
       onClick={handleMouseClick}
-      onLoad={emitBoundsChange}
+      onLoad={() => {
+        emitBoundsChange()
+        onLoad?.()
+      }}
       onMove={(evt) => {
         setViewState(evt.viewState)
         emitBoundsChange()
diff --git a/src/components/ProjectEdit/ProjectEditPanel.tsx b/src/components/ProjectEdit/ProjectEditPanel.tsx
new file mode 100644
index 00000000..77b4dcd0
--- /dev/null
+++ b/src/components/ProjectEdit/ProjectEditPanel.tsx
@@ -0,0 +1,458 @@
+import { useNotification, useOne, useUpdate } from '@refinedev/core'
+import { Loader2, MapIcon, UploadIcon } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Link as RouterLink } from 'react-router'
+import { captureEvent } from '@/analytics/posthog'
+import {
+  EditPanel,
+  EditPanelField,
+  EditPanelSection,
+} from '@/components/editing'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Button, buttonVariants } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Textarea } from '@/components/ui/textarea'
+import { useAccessCapabilities, useLexicon } from '@/hooks'
+import type { IGroup } from '@/interfaces/ocotillo/IGroup'
+import { parseProjectBoundaryGeoJson } from '@/utils'
+
+interface ProjectEditPanelProps {
+  projectId: string | number
+  projectName?: string | null
+  onClose: () => void
+}
+
+/** Fields this panel can send to PATCH /group/{id}. */
+type ProjectDraft = {
+  name: string
+  description: string
+  release_status: string
+  group_type: string
+  /** WKT, the shape the API stores in group.project_area. */
+  project_area: string
+}
+
+const EMPTY_DRAFT: ProjectDraft = {
+  name: '',
+  description: '',
+  release_status: '',
+  group_type: '',
+  project_area: '',
+}
+
+const MAX_BOUNDARY_FILE_BYTES = 10 * 1024 * 1024
+
+function draftFromProject(project: IGroup | undefined): ProjectDraft {
+  return {
+    name: project?.name ?? '',
+    description: project?.description ?? '',
+    release_status: project?.release_status ?? '',
+    group_type: project?.group_type ?? '',
+    project_area:
+      typeof project?.project_area === 'string' ? project.project_area : '',
+  }
+}
+
+function FieldsSkeleton() {
+  return (
+    <>
+      {[0, 1, 2].map((row) => (
+        <div key={row} className="col-span-2 flex flex-col gap-1.5">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-8 w-full rounded-md" />
+        </div>
+      ))}
+    </>
+  )
+}
+
+export function ProjectEditPanel({
+  projectId,
+  projectName,
+  onClose,
+}: ProjectEditPanelProps) {
+  const { open: notify } = useNotification()
+  const { canManageAmp } = useAccessCapabilities()
+  const { mutateAsync: updateProject, mutation } = useUpdate()
+
+  const isSaving = mutation.isPending
+
+  const [draft, setDraft] = useState<ProjectDraft>(EMPTY_DRAFT)
+  const [initial, setInitial] = useState<ProjectDraft>(EMPTY_DRAFT)
+  const [discardDialogOpen, setDiscardDialogOpen] = useState(false)
+  const [boundaryError, setBoundaryError] = useState<string | null>(null)
+  const [boundaryFileName, setBoundaryFileName] = useState<string | null>(null)
+  const wasLoadingRef = useRef(true)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const { query: projectQuery, result: project } = useOne<IGroup>({
+    resource: 'group',
+    dataProviderName: 'ocotillo',
+    id: projectId,
+    queryOptions: { enabled: Boolean(projectId) },
+  })
+
+  const { options: releaseStatusOptions, isLoading: isReleaseStatusLoading } =
+    useLexicon({ category: 'release_status' })
+  const { options: groupTypeOptions, isLoading: isGroupTypeLoading } =
+    useLexicon({ category: 'group_type' })
+
+  const isLoading = projectQuery.isLoading
+
+  useEffect(() => {
+    captureEvent('edit_panel_opened', {
+      resource: 'project',
+      project_id: projectId,
+    })
+  }, [projectId])
+
+  useEffect(() => {
+    wasLoadingRef.current = true
+  }, [projectId])
+
+  // Seed the draft once per project, so typing is not clobbered by refetches.
+  useEffect(() => {
+    if (isLoading) {
+      wasLoadingRef.current = true
+      return
+    }
+
+    if (!wasLoadingRef.current) {
+      return
+    }
+
+    const next = draftFromProject(project)
+    setDraft(next)
+    setInitial(next)
+    wasLoadingRef.current = false
+  }, [isLoading, project, projectId])
+
+  const changedFields = useMemo(
+    () =>
+      (Object.keys(draft) as (keyof ProjectDraft)[]).filter(
+        (field) => draft[field] !== initial[field]
+      ),
+    [draft, initial]
+  )
+
+  const isDirty = changedFields.length > 0
+  const isNameInvalid = draft.name.trim().length === 0
+
+  const panelTitle = projectName ? `Edit: ${projectName}` : 'Edit project'
+
+  const setField = (field: keyof ProjectDraft, value: string) => {
+    setDraft((previous) => ({ ...previous, [field]: value }))
+  }
+
+  const handleBoundaryFile = async (file: File | undefined) => {
+    // Reset first so re-picking the same file after an error still registers.
+    if (fileInputRef.current) fileInputRef.current.value = ''
+    if (!file) return
+
+    setBoundaryError(null)
+    setBoundaryFileName(null)
+
+    if (file.size > MAX_BOUNDARY_FILE_BYTES) {
+      setBoundaryError(
+        'File is larger than 10 MB. Simplify it before uploading.'
+      )
+      return
+    }
+
+    const result = parseProjectBoundaryGeoJson(await file.text())
+
+    if ('error' in result) {
+      setBoundaryError(result.error)
+      return
+    }
+
+    setField('project_area', result.wkt)
+    setBoundaryFileName(file.name)
+    captureEvent('project_boundary_uploaded', {
+      project_id: projectId,
+      file_name: file.name,
+    })
+  }
+
+  const handleRemoveBoundary = () => {
+    setBoundaryError(null)
+    setBoundaryFileName(null)
+    setField('project_area', '')
+  }
+
+  const handleSave = async () => {
+    if (!isDirty || isSaving || isNameInvalid) {
+      return
+    }
+
+    const values: Record<string, string | null> = {}
+    for (const field of changedFields) {
+      const value = draft[field].trim()
+      // The API treats description and release_status as nullable; name is not.
+      values[field] = field === 'name' ? value : value === '' ? null : value
+    }
+
+    try {
+      await updateProject({
+        resource: 'group',
+        dataProviderName: 'ocotillo',
+        id: projectId,
+        values,
+      })
+
+      captureEvent('edit_saved', {
+        resource: 'project',
+        project_id: projectId,
+        fields_changed: changedFields,
+      })
+      onClose()
+    } catch (error) {
+      // group has a unique (name, group_type) constraint, so a rename or a type
+      // change can collide with an existing project.
+      const status = (error as { statusCode?: number })?.statusCode
+      notify?.({
+        type: 'error',
+        message:
+          status === 409
+            ? 'Another project already uses this name and type.'
+            : 'Could not save project changes. Please try again.',
+      })
+    }
+  }
+
+  const handleRequestClose = () => {
+    if (isSaving) {
+      return
+    }
+
+    if (isDirty) {
+      setDiscardDialogOpen(true)
+      return
+    }
+
+    onClose()
+  }
+
+  const handleDiscardChanges = () => {
+    captureEvent('edit_abandoned', {
+      resource: 'project',
+      project_id: projectId,
+      had_changes: isDirty,
+    })
+    onClose()
+  }
+
+  return (
+    <>
+      <EditPanel
+        title={panelTitle}
+        onClose={handleRequestClose}
+        footer={
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleRequestClose}
+              disabled={isSaving}
+            >
+              Close
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleSave}
+              disabled={!isDirty || isSaving || isNameInvalid}
+            >
+              {isSaving ? (
+                <>
+                  <Loader2 className="animate-spin" aria-hidden />
+                  Saving…
+                </>
+              ) : (
+                'Save'
+              )}
+            </Button>
+          </>
+        }
+      >
+        <EditPanelSection title="Details">
+          {isLoading ? (
+            <FieldsSkeleton />
+          ) : (
+            <>
+              <EditPanelField label="Name" required span="full">
+                <Input
+                  className="h-8 text-sm"
+                  value={draft.name}
+                  disabled={!canManageAmp || isSaving}
+                  aria-invalid={isNameInvalid || undefined}
+                  onChange={(event) => setField('name', event.target.value)}
+                />
+                {canManageAmp ? (
+                  isNameInvalid ? (
+                    <p className="text-xs text-destructive">
+                      Name cannot be empty.
+                    </p>
+                  ) : null
+                ) : (
+                  <p className="text-xs text-muted-foreground">
+                    Only administrators can rename a project.
+                  </p>
+                )}
+              </EditPanelField>
+
+              <EditPanelField label="Description" span="full">
+                <Textarea
+                  className="min-h-20 text-sm"
+                  value={draft.description}
+                  disabled={isSaving}
+                  onChange={(event) =>
+                    setField('description', event.target.value)
+                  }
+                />
+              </EditPanelField>
+
+              <EditPanelField label="Release status" span="full">
+                <Select
+                  value={draft.release_status || undefined}
+                  disabled={isSaving || isReleaseStatusLoading}
+                  onValueChange={(value) => setField('release_status', value)}
+                >
+                  <SelectTrigger className="h-8 w-full text-sm">
+                    <SelectValue placeholder="Select release status…" />
+                  </SelectTrigger>
+                  <SelectContent position="popper" className="max-h-60">
+                    {releaseStatusOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </EditPanelField>
+
+              <EditPanelField label="Type" span="full">
+                <Select
+                  value={draft.group_type || undefined}
+                  disabled={isSaving || isGroupTypeLoading}
+                  onValueChange={(value) => setField('group_type', value)}
+                >
+                  <SelectTrigger className="h-8 w-full text-sm">
+                    <SelectValue placeholder="Select type…" />
+                  </SelectTrigger>
+                  <SelectContent position="popper" className="max-h-60">
+                    {groupTypeOptions.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </EditPanelField>
+            </>
+          )}
+        </EditPanelSection>
+
+        <EditPanelSection title="Boundary">
+          {isLoading ? (
+            <FieldsSkeleton />
+          ) : (
+            <EditPanelField label="Project area" span="full">
+              <p className="text-xs text-muted-foreground">
+                {draft.project_area
+                  ? boundaryFileName
+                    ? `Boundary from ${boundaryFileName} (unsaved).`
+                    : 'Boundary set.'
+                  : 'No boundary set.'}
+              </p>
+
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".geojson,.json,application/geo+json,application/json"
+                className="hidden"
+                onChange={(event) =>
+                  handleBoundaryFile(event.target.files?.[0])
+                }
+              />
+
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={isSaving}
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <UploadIcon className="size-3.5" aria-hidden />
+                  Upload GeoJSON
+                </Button>
+
+                <Button variant="outline" size="sm" asChild>
+                  <RouterLink to={`/ocotillo/projects/show/${projectId}`}>
+                    <MapIcon className="size-3.5" aria-hidden />
+                    Edit on map
+                  </RouterLink>
+                </Button>
+
+                {draft.project_area ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    disabled={isSaving}
+                    onClick={handleRemoveBoundary}
+                  >
+                    Remove
+                  </Button>
+                ) : null}
+              </div>
+
+              {boundaryError ? (
+                <p className="text-xs text-destructive">{boundaryError}</p>
+              ) : (
+                <p className="text-xs text-muted-foreground">
+                  Upload a GeoJSON file containing a single polygon in WGS84.
+                </p>
+              )}
+            </EditPanelField>
+          )}
+        </EditPanelSection>
+      </EditPanel>
+
+      <AlertDialog open={discardDialogOpen} onOpenChange={setDiscardDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Project changes you have not saved will be lost.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Keep editing</AlertDialogCancel>
+            <AlertDialogAction
+              className={buttonVariants({ variant: 'destructive' })}
+              onClick={handleDiscardChanges}
+            >
+              Discard
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
diff --git a/src/components/ProjectsTable/ProjectBoundaryDialog.tsx b/src/components/ProjectsTable/ProjectBoundaryDialog.tsx
new file mode 100644
index 00000000..ca8e8e55
--- /dev/null
+++ b/src/components/ProjectsTable/ProjectBoundaryDialog.tsx
@@ -0,0 +1,171 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Layer, type MapRef, Source } from 'react-map-gl/maplibre'
+import wellknown from 'wellknown'
+import MapComponent from '@/components/MapComponent'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import type { IGroup } from '@/interfaces/ocotillo/IGroup'
+
+/**
+ * Read-only look at one project's boundary. The project show page pairs the
+ * boundary with the project's wells; this is the quick check from the list, so
+ * it draws the geometry alone and fits the view to it.
+ */
+
+type Position = number[]
+
+function parseBoundary(
+  projectArea: IGroup['project_area']
+): GeoJSON.Geometry | null {
+  if (!projectArea) return null
+
+  if (typeof projectArea !== 'string') {
+    return projectArea as GeoJSON.Geometry
+  }
+
+  try {
+    return wellknown.parse(projectArea) as GeoJSON.Geometry | null
+  } catch {
+    return null
+  }
+}
+
+/** Walks arbitrarily nested coordinate arrays so any geometry type works. */
+function collectPositions(coordinates: unknown, into: Position[]): void {
+  if (!Array.isArray(coordinates)) return
+
+  if (typeof coordinates[0] === 'number') {
+    into.push(coordinates as Position)
+    return
+  }
+
+  for (const entry of coordinates) {
+    collectPositions(entry, into)
+  }
+}
+
+function boundsOf(
+  geometry: GeoJSON.Geometry
+): [[number, number], [number, number]] | null {
+  const positions: Position[] = []
+  collectPositions(
+    (geometry as { coordinates?: unknown }).coordinates,
+    positions
+  )
+
+  if (positions.length === 0) return null
+
+  const lons = positions.map(([lon]) => lon)
+  const lats = positions.map(([, lat]) => lat)
+
+  return [
+    [Math.min(...lons), Math.min(...lats)],
+    [Math.max(...lons), Math.max(...lats)],
+  ]
+}
+
+export function ProjectBoundaryDialog({
+  project,
+  onClose,
+}: {
+  project: IGroup | null
+  onClose: () => void
+}) {
+  const mapRef = useRef<MapRef>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const [isMapLoaded, setIsMapLoaded] = useState(false)
+
+  const boundary = useMemo(
+    () => parseBoundary(project?.project_area),
+    [project?.project_area]
+  )
+  const bounds = useMemo(
+    () => (boundary ? boundsOf(boundary) : null),
+    [boundary]
+  )
+
+  const isOpen = Boolean(project)
+
+  useEffect(() => {
+    if (!isOpen) setIsMapLoaded(false)
+  }, [isOpen])
+
+  // The map mounts while the dialog is still animating open, so it can report
+  // ready at the wrong size. Resize and fit again once the dialog has settled.
+  useEffect(() => {
+    if (!isMapLoaded || !bounds || !mapRef.current) return
+
+    const fit = () => {
+      const map = mapRef.current?.getMap()
+      if (!map) return
+      map.resize()
+      map.fitBounds(bounds, { padding: 48, maxZoom: 12, duration: 0 })
+    }
+
+    fit()
+    const timer = setTimeout(fit, 150)
+    return () => clearTimeout(timer)
+  }, [bounds, isMapLoaded])
+
+  const [[west, south], [east, north]] = bounds ?? [
+    [-109, 31],
+    [-103, 37],
+  ]
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>{project?.name ?? 'Project'}</DialogTitle>
+          <DialogDescription>
+            {project?.group_type
+              ? `${project.group_type} boundary`
+              : 'Project boundary'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {boundary ? (
+          <div
+            ref={containerRef}
+            data-testid="project-boundary-map"
+            className="relative flex h-[60vh] max-h-[520px] w-full overflow-hidden rounded-md border"
+          >
+            <MapComponent
+              mapRef={mapRef}
+              containerRef={containerRef}
+              style={{ flex: 1, width: '100%', height: '100%' }}
+              initialViewState={{
+                longitude: (west + east) / 2,
+                latitude: (south + north) / 2,
+                zoom: 7,
+              }}
+              onLoad={() => setIsMapLoaded(true)}
+            >
+              <Source id="project-area" type="geojson" data={boundary}>
+                <Layer
+                  type="fill"
+                  id="project-area-fill"
+                  paint={{ 'fill-color': '#007bff', 'fill-opacity': 0.2 }}
+                />
+                <Layer
+                  type="line"
+                  id="project-area-outline"
+                  paint={{ 'line-color': '#007bff', 'line-width': 2 }}
+                />
+              </Source>
+            </MapComponent>
+          </div>
+        ) : (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            This project has no boundary geometry.
+          </p>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/components/ProjectsTable/ProjectsTable.tsx b/src/components/ProjectsTable/ProjectsTable.tsx
new file mode 100644
index 00000000..d0163bef
--- /dev/null
+++ b/src/components/ProjectsTable/ProjectsTable.tsx
@@ -0,0 +1,507 @@
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+  MapIcon,
+  PencilIcon,
+  SearchIcon,
+} from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+import { Link as RouterLink } from 'react-router'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import type { IGroup } from '@/interfaces/ocotillo/IGroup'
+import { cn } from '@/lib/utils'
+import { formatAppDateTime } from '@/utils'
+
+/**
+ * Projects table. Sorting, filtering and paging all run over the full result
+ * set held in memory — the group endpoint returns well under a thousand rows
+ * and ignores sort parameters, so filtering a single server page would only
+ * ever describe part of the data.
+ */
+
+export type ProjectSortKey =
+  | 'name'
+  | 'description'
+  | 'release_status'
+  | 'group_type'
+  | 'created_at'
+
+type SortDirection = 'asc' | 'desc'
+
+const PAGE_SIZE = 20
+
+const NO_VALUE = '—'
+const ALL_OPTION = '__all__'
+const EMPTY_OPTION = '__empty__'
+
+const RELEASE_STATUS_VARIANT: Record<
+  string,
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'filter'
+  | 'filterEmerald'
+> = {
+  draft: 'secondary',
+  provisional: 'filter',
+  final: 'filterEmerald',
+  published: 'filterEmerald',
+  public: 'filterEmerald',
+  archived: 'outline',
+  private: 'destructive',
+}
+
+const COLUMNS: { key: ProjectSortKey; label: string; className?: string }[] = [
+  { key: 'name', label: 'Name' },
+  { key: 'description', label: 'Description', className: 'w-[30%]' },
+  { key: 'release_status', label: 'Release Status', className: 'w-40' },
+  { key: 'group_type', label: 'Type', className: 'w-44' },
+  { key: 'created_at', label: 'Created At', className: 'w-48' },
+]
+
+function valueFor(project: IGroup, key: ProjectSortKey): string {
+  const value = project[key]
+  return typeof value === 'string' ? value : ''
+}
+
+/** Case-insensitive compare that always sorts blanks to the bottom. */
+function compareProjects(
+  a: IGroup,
+  b: IGroup,
+  key: ProjectSortKey,
+  direction: SortDirection
+): number {
+  const left = valueFor(a, key)
+  const right = valueFor(b, key)
+
+  if (!left && !right) return 0
+  if (!left) return 1
+  if (!right) return -1
+
+  const result =
+    key === 'created_at'
+      ? new Date(left).getTime() - new Date(right).getTime()
+      : left.localeCompare(right, undefined, { sensitivity: 'base' })
+
+  return direction === 'asc' ? result : -result
+}
+
+/** A facet select matches everything, only blanks, or one exact value. */
+function matchesFacet(value: string, filter: string): boolean {
+  if (filter === ALL_OPTION) return true
+  if (filter === EMPTY_OPTION) return value === ''
+  return value === filter
+}
+
+function distinctValues(projects: IGroup[], key: ProjectSortKey): string[] {
+  const values = new Set<string>()
+  for (const project of projects) {
+    const value = valueFor(project, key)
+    if (value) values.add(value)
+  }
+  return [...values].sort((a, b) => a.localeCompare(b))
+}
+
+function FilterSelect({
+  label,
+  value,
+  options,
+  hasBlanks,
+  onChange,
+}: {
+  label: string
+  value: string
+  options: string[]
+  hasBlanks: boolean
+  onChange: (value: string) => void
+}) {
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger className="h-8 w-44 text-sm" aria-label={label}>
+        <SelectValue placeholder={label} />
+      </SelectTrigger>
+      <SelectContent position="popper" className="max-h-60">
+        <SelectItem value={ALL_OPTION}>{label}: all</SelectItem>
+        {options.map((option) => (
+          <SelectItem key={option} value={option}>
+            {option}
+          </SelectItem>
+        ))}
+        {hasBlanks ? (
+          <SelectItem value={EMPTY_OPTION}>{label}: none</SelectItem>
+        ) : null}
+      </SelectContent>
+    </Select>
+  )
+}
+
+function SortableHeader({
+  column,
+  sortKey,
+  sortDirection,
+  onSort,
+}: {
+  column: (typeof COLUMNS)[number]
+  sortKey: ProjectSortKey
+  sortDirection: SortDirection
+  onSort: (key: ProjectSortKey) => void
+}) {
+  const isSorted = sortKey === column.key
+  const SortIcon = !isSorted
+    ? ChevronsUpDownIcon
+    : sortDirection === 'asc'
+      ? ArrowUpIcon
+      : ArrowDownIcon
+
+  return (
+    <TableHead
+      className={column.className}
+      aria-sort={
+        isSorted
+          ? sortDirection === 'asc'
+            ? 'ascending'
+            : 'descending'
+          : 'none'
+      }
+    >
+      <button
+        type="button"
+        onClick={() => onSort(column.key)}
+        className="inline-flex items-center gap-1 rounded-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      >
+        {column.label}
+        <SortIcon
+          className={cn(
+            'size-3.5',
+            isSorted ? 'text-foreground' : 'text-muted-foreground/60'
+          )}
+          aria-hidden
+        />
+      </button>
+    </TableHead>
+  )
+}
+
+export interface ProjectsTableProps {
+  projects: IGroup[]
+  isLoading?: boolean
+  canEdit?: boolean
+  selectedProjectId?: number | null
+  projectHref: (project: IGroup) => string
+  onSelect?: (project: IGroup) => void
+  onEdit?: (project: IGroup, source: 'row_double_click' | 'edit_action') => void
+  onViewBoundary?: (project: IGroup) => void
+}
+
+export function ProjectsTable({
+  projects,
+  isLoading = false,
+  canEdit = false,
+  selectedProjectId = null,
+  projectHref,
+  onSelect,
+  onEdit,
+  onViewBoundary,
+}: ProjectsTableProps) {
+  const [search, setSearch] = useState('')
+  const [typeFilter, setTypeFilter] = useState(ALL_OPTION)
+  const [statusFilter, setStatusFilter] = useState(ALL_OPTION)
+  const [sortKey, setSortKey] = useState<ProjectSortKey>('name')
+  const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
+  const [page, setPage] = useState(0)
+
+  const typeOptions = useMemo(
+    () => distinctValues(projects, 'group_type'),
+    [projects]
+  )
+  const statusOptions = useMemo(
+    () => distinctValues(projects, 'release_status'),
+    [projects]
+  )
+  const hasUntyped = useMemo(
+    () => projects.some((project) => !valueFor(project, 'group_type')),
+    [projects]
+  )
+  const hasNoStatus = useMemo(
+    () => projects.some((project) => !valueFor(project, 'release_status')),
+    [projects]
+  )
+
+  const filtered = useMemo(() => {
+    const needle = search.trim().toLowerCase()
+
+    return projects.filter((project) => {
+      const type = valueFor(project, 'group_type')
+      const status = valueFor(project, 'release_status')
+
+      if (!matchesFacet(type, typeFilter)) return false
+      if (!matchesFacet(status, statusFilter)) return false
+
+      if (!needle) return true
+
+      return [project.name, project.description, type, status]
+        .filter(Boolean)
+        .some((field) => String(field).toLowerCase().includes(needle))
+    })
+  }, [projects, search, statusFilter, typeFilter])
+
+  const sorted = useMemo(
+    () =>
+      [...filtered].sort((a, b) =>
+        compareProjects(a, b, sortKey, sortDirection)
+      ),
+    [filtered, sortDirection, sortKey]
+  )
+
+  const pageCount = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE))
+
+  // Filtering can shrink the result set out from under the current page.
+  useEffect(() => {
+    setPage((current) => Math.min(current, pageCount - 1))
+  }, [pageCount])
+
+  const pageRows = sorted.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+
+  const handleSort = (key: ProjectSortKey) => {
+    if (key === sortKey) {
+      setSortDirection((current) => (current === 'asc' ? 'desc' : 'asc'))
+      return
+    }
+    setSortKey(key)
+    setSortDirection('asc')
+  }
+
+  const rangeStart = sorted.length === 0 ? 0 : page * PAGE_SIZE + 1
+  const rangeEnd = Math.min(sorted.length, (page + 1) * PAGE_SIZE)
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative">
+          <SearchIcon
+            className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden
+          />
+          <Input
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value)
+              setPage(0)
+            }}
+            placeholder="Search projects…"
+            aria-label="Search projects"
+            className="h-8 w-72 pl-8 text-sm"
+          />
+        </div>
+
+        <FilterSelect
+          label="Type"
+          value={typeFilter}
+          options={typeOptions}
+          hasBlanks={hasUntyped}
+          onChange={(value) => {
+            setTypeFilter(value)
+            setPage(0)
+          }}
+        />
+
+        <FilterSelect
+          label="Release status"
+          value={statusFilter}
+          options={statusOptions}
+          hasBlanks={hasNoStatus}
+          onChange={(value) => {
+            setStatusFilter(value)
+            setPage(0)
+          }}
+        />
+
+        <span className="ml-auto text-xs text-muted-foreground">
+          {sorted.length === projects.length
+            ? `${projects.length.toLocaleString()} projects`
+            : `${sorted.length.toLocaleString()} of ${projects.length.toLocaleString()} projects`}
+        </span>
+      </div>
+
+      <div className="rounded-md border">
+        {/* Compact rows: shorter header, tighter cell padding than the shadcn
+            default. Row height is floored by the tallest cell content, so the
+            action buttons are icon-xs to keep them under the text line box. */}
+        <Table className="[&_td]:py-0.5 [&_th]:h-7">
+          <TableHeader>
+            <TableRow>
+              {COLUMNS.map((column) => (
+                <SortableHeader
+                  key={column.key}
+                  column={column}
+                  sortKey={sortKey}
+                  sortDirection={sortDirection}
+                  onSort={handleSort}
+                />
+              ))}
+              <TableHead className="w-24">
+                <span className="sr-only">Actions</span>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {isLoading ? (
+              Array.from({ length: 8 }).map((_, index) => (
+                <TableRow key={`skeleton-${index}`}>
+                  {COLUMNS.map((column) => (
+                    <TableCell key={column.key}>
+                      <Skeleton className="h-4 w-full max-w-40" />
+                    </TableCell>
+                  ))}
+                  <TableCell />
+                </TableRow>
+              ))
+            ) : pageRows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={COLUMNS.length + 1}
+                  className="h-24 text-center text-muted-foreground"
+                >
+                  No projects match these filters.
+                </TableCell>
+              </TableRow>
+            ) : (
+              pageRows.map((project) => {
+                const status = valueFor(project, 'release_status')
+                const type = valueFor(project, 'group_type')
+
+                return (
+                  <TableRow
+                    key={project.id}
+                    data-state={
+                      selectedProjectId === project.id ? 'selected' : undefined
+                    }
+                    onClick={() => onSelect?.(project)}
+                    onDoubleClick={() => onEdit?.(project, 'row_double_click')}
+                    className="cursor-pointer"
+                  >
+                    <TableCell className="font-medium">
+                      <RouterLink
+                        to={projectHref(project)}
+                        onClick={(event) => event.stopPropagation()}
+                        className="hover:underline"
+                      >
+                        {project.name}
+                      </RouterLink>
+                    </TableCell>
+                    <TableCell className="max-w-0 truncate text-muted-foreground">
+                      {project.description?.trim() || NO_VALUE}
+                    </TableCell>
+                    <TableCell>
+                      {status ? (
+                        <Badge
+                          variant={
+                            RELEASE_STATUS_VARIANT[status] ?? 'secondary'
+                          }
+                        >
+                          {status}
+                        </Badge>
+                      ) : (
+                        NO_VALUE
+                      )}
+                    </TableCell>
+                    <TableCell>{type || NO_VALUE}</TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {formatAppDateTime(project.created_at)}
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap">
+                      {/* Only offered where there is geometry to look at. */}
+                      {project.project_area ? (
+                        <Button
+                          variant="ghost"
+                          size="icon-xs"
+                          aria-label={`View boundary for ${project.name}`}
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            onViewBoundary?.(project)
+                          }}
+                        >
+                          <MapIcon aria-hidden />
+                        </Button>
+                      ) : null}
+                      {canEdit ? (
+                        <Button
+                          variant="ghost"
+                          size="icon-xs"
+                          aria-label={`Edit ${project.name}`}
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            onEdit?.(project, 'edit_action')
+                          }}
+                        >
+                          <PencilIcon aria-hidden />
+                        </Button>
+                      ) : null}
+                    </TableCell>
+                  </TableRow>
+                )
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-muted-foreground">
+          {sorted.length === 0
+            ? 'No results'
+            : `${rangeStart.toLocaleString()}–${rangeEnd.toLocaleString()} of ${sorted.length.toLocaleString()}`}
+        </span>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page === 0}
+            onClick={() => setPage((current) => Math.max(0, current - 1))}
+          >
+            <ChevronLeftIcon className="size-3.5" aria-hidden />
+            Previous
+          </Button>
+          <span className="text-xs text-muted-foreground">
+            Page {page + 1} of {pageCount}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= pageCount - 1}
+            onClick={() =>
+              setPage((current) => Math.min(pageCount - 1, current + 1))
+            }
+          >
+            Next
+            <ChevronRightIcon className="size-3.5" aria-hidden />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 00000000..b01ab008
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+}
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
index de40b43a..229f6d5d 100644
--- a/src/config/navigation.ts
+++ b/src/config/navigation.ts
@@ -112,9 +112,9 @@ export const RESOURCE_NAV: NavItem[] = [
   },
   {
     label: 'Projects',
-    href: '/ocotillo/well/projects',
+    href: '/ocotillo/projects',
     icon: FolderKanban,
-    resource: 'ocotillo.thing-well-projects',
+    resource: 'ocotillo.projects',
     roles: viewerAndAbove,
   },
   {
diff --git a/src/hooks/useSearchModalState.ts b/src/hooks/useSearchModalState.ts
index f063d72a..6b61d581 100644
--- a/src/hooks/useSearchModalState.ts
+++ b/src/hooks/useSearchModalState.ts
@@ -214,7 +214,7 @@ export const useSearchModalState = ({
         break
       case GroupType.Projects:
         go({
-          to: `/ocotillo/well/projects/show/${(option as ProjectResult).properties.id}`,
+          to: `/ocotillo/projects/show/${(option as ProjectResult).properties.id}`,
           type: 'push',
         })
         break
diff --git a/src/pages/ocotillo/projects/index.ts b/src/pages/ocotillo/projects/index.ts
new file mode 100644
index 00000000..1f96e3a6
--- /dev/null
+++ b/src/pages/ocotillo/projects/index.ts
@@ -0,0 +1,2 @@
+export * from './list'
+export * from './show'
diff --git a/src/pages/ocotillo/projects/list.tsx b/src/pages/ocotillo/projects/list.tsx
new file mode 100644
index 00000000..7a5119ab
--- /dev/null
+++ b/src/pages/ocotillo/projects/list.tsx
@@ -0,0 +1,124 @@
+/**
+ * Projects list. Unlike the other Ocotillo lists this page uses the shadcn
+ * table rather than ListPage/MUI DataGrid: the group endpoint is small enough
+ * to load in full, which lets sorting and filtering cover every project instead
+ * of one server page.
+ */
+
+import { Typography } from '@mui/material'
+import { CanAccess, useList } from '@refinedev/core'
+import { useCallback, useEffect, useState } from 'react'
+import { captureEvent } from '@/analytics/posthog'
+import { AppBreadcrumb } from '@/components/AppBreadcrumb'
+import { EditPanelLayout } from '@/components/editing'
+import { ocotilloPageTitleTypographySx } from '@/components/OcotilloPageHeader'
+import { ProjectEditPanel } from '@/components/ProjectEdit/ProjectEditPanel'
+import { ProjectBoundaryDialog } from '@/components/ProjectsTable/ProjectBoundaryDialog'
+import { ProjectsTable } from '@/components/ProjectsTable/ProjectsTable'
+import { useAccessCapabilities } from '@/hooks'
+import { IGroup } from '@/interfaces/ocotillo/IGroup'
+
+/** The group endpoint holds low hundreds of rows; fetch them all and page locally. */
+const ALL_PROJECTS_PAGE_SIZE = 500
+
+const projectHref = (project: IGroup) => `/ocotillo/projects/show/${project.id}`
+
+export const ProjectList: React.FC = () => {
+  const { canEditAmp } = useAccessCapabilities()
+  const [selectedProject, setSelectedProject] = useState<IGroup | null>(null)
+  const [isPanelOpen, setIsPanelOpen] = useState(false)
+  const [boundaryProject, setBoundaryProject] = useState<IGroup | null>(null)
+
+  useEffect(() => {
+    captureEvent('feature_used', { feature: 'projects_list' })
+  }, [])
+
+  const { result, query } = useList<IGroup>({
+    resource: 'group',
+    dataProviderName: 'ocotillo',
+    pagination: { pageSize: ALL_PROJECTS_PAGE_SIZE },
+  })
+
+  const projects = result?.data ?? []
+
+  const openProjectPanel = useCallback(
+    (project: IGroup, trigger: 'row_double_click' | 'edit_action') => {
+      if (!canEditAmp) return
+
+      setSelectedProject(project)
+      setIsPanelOpen(true)
+      captureEvent('projects_edit_opened', {
+        project_id: project.id,
+        project_name: project.name,
+        trigger,
+      })
+    },
+    [canEditAmp]
+  )
+
+  const handleSelect = useCallback((project: IGroup) => {
+    setSelectedProject(project)
+    captureEvent('projects_row_clicked', {
+      project_id: project.id,
+      project_name: project.name,
+    })
+  }, [])
+
+  const handleClosePanel = useCallback(() => {
+    setIsPanelOpen(false)
+  }, [])
+
+  const handleViewBoundary = useCallback((project: IGroup) => {
+    setBoundaryProject(project)
+    captureEvent('project_boundary_viewed', {
+      project_id: project.id,
+      project_name: project.name,
+    })
+  }, [])
+
+  return (
+    <CanAccess resource="ocotillo.projects" action="list">
+      <EditPanelLayout
+        open={isPanelOpen && Boolean(selectedProject)}
+        pinPanel="sticky"
+        panel={
+          selectedProject ? (
+            <ProjectEditPanel
+              projectId={selectedProject.id}
+              projectName={selectedProject.name}
+              onClose={handleClosePanel}
+            />
+          ) : null
+        }
+      >
+        {/* pt-3 aligns the title with the MUI List header other Ocotillo list pages use. */}
+        <div className="flex flex-col gap-4 px-4 pb-4 pt-3 sm:px-6">
+          <AppBreadcrumb />
+          <Typography
+            variant="h3"
+            fontWeight={700}
+            sx={ocotilloPageTitleTypographySx}
+          >
+            Projects
+          </Typography>
+
+          <ProjectsTable
+            projects={projects}
+            isLoading={query.isLoading}
+            canEdit={canEditAmp}
+            selectedProjectId={selectedProject?.id ?? null}
+            projectHref={projectHref}
+            onSelect={handleSelect}
+            onEdit={openProjectPanel}
+            onViewBoundary={handleViewBoundary}
+          />
+        </div>
+      </EditPanelLayout>
+
+      <ProjectBoundaryDialog
+        project={boundaryProject}
+        onClose={() => setBoundaryProject(null)}
+      />
+    </CanAccess>
+  )
+}
diff --git a/src/pages/ocotillo/thing/well-projects/show.tsx b/src/pages/ocotillo/projects/show.tsx
similarity index 96%
rename from src/pages/ocotillo/thing/well-projects/show.tsx
rename to src/pages/ocotillo/projects/show.tsx
index 657f1e92..8405dfdf 100644
--- a/src/pages/ocotillo/thing/well-projects/show.tsx
+++ b/src/pages/ocotillo/projects/show.tsx
@@ -1,25 +1,22 @@
-import { useEffect, useMemo } from 'react'
-import { useList, useOne } from '@refinedev/core'
-import { Show } from '@refinedev/mui'
 import { Alert, Chip, Stack } from '@mui/material'
 import Grid from '@mui/material/Grid2'
+import { useList, useOne } from '@refinedev/core'
+import { Show } from '@refinedev/mui'
+import { useEffect, useMemo } from 'react'
 import { useParams } from 'react-router'
 import { captureEvent } from '@/analytics/posthog'
 import { InteractiveSatelliteMapCard } from '@/components'
 import {
-  ProjectDetailsCard,
-  ProjectWellsCard,
-} from '@/components/ProjectShow'
-import {
-  ocotilloCardHeaderProps,
   OcotilloPageTitle,
+  ocotilloCardHeaderProps,
 } from '@/components/OcotilloPageHeader'
+import { ProjectDetailsCard, ProjectWellsCard } from '@/components/ProjectShow'
 import type { IWell } from '@/interfaces/ocotillo'
 import type { IGroup } from '@/interfaces/ocotillo/IGroup'
 
 const MAP_WELL_PAGE_SIZE = 500
 
-export const WellProjectShow = () => {
+export const ProjectShow = () => {
   const { id } = useParams<{ id: string }>()
 
   const { query: projectQuery, result: project } = useOne<IGroup>({
diff --git a/src/pages/ocotillo/thing/index.tsx b/src/pages/ocotillo/thing/index.tsx
index 7fd35514..4575e34a 100644
--- a/src/pages/ocotillo/thing/index.tsx
+++ b/src/pages/ocotillo/thing/index.tsx
@@ -3,6 +3,4 @@ export * from './create'
 export * from './well-show'
 export * from './well-show-pdf-preview'
 export * from './well-batch-export'
-export * from './well-projects/list'
-export * from './well-projects/show'
 export * from './spring-show'
diff --git a/src/pages/ocotillo/thing/well-projects/list.tsx b/src/pages/ocotillo/thing/well-projects/list.tsx
deleted file mode 100644
index f77d8afc..00000000
--- a/src/pages/ocotillo/thing/well-projects/list.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Projects list — same ListPage template as WellList in ../list.tsx.
- * Copy that file when adding new wells-area list pages.
- */
-import { useEffect, useMemo } from 'react'
-import { type CrudFilter } from '@refinedev/core'
-import { useDataGrid } from '@refinedev/mui'
-import { GridCheckCircleIcon, GridColDef } from '@mui/x-data-grid'
-import { captureEvent } from '@/analytics/posthog'
-import { ListPage } from '@/components/ListPage'
-import { releaseStatusColumnDef } from '@/components/CommonColumnDefs'
-import { useListPageDataGridAnalytics } from '@/hooks'
-import { IGroup } from '@/interfaces/ocotillo/IGroup'
-import { formatAppDateTime } from '@/utils'
-
-// Provisional — update after team decision in OcotilloAPI PR (BDMS-876).
-const PROJECT_LIST_FILTERS: CrudFilter[] = [
-  { field: 'group_type', operator: 'ne', value: 'Geographic Area' },
-  { field: 'group_type', operator: 'ne', value: 'Historical' },
-]
-
-export const WellProjectList: React.FC = () => {
-  useEffect(() => {
-    captureEvent('feature_used', { feature: 'projects_list' })
-  }, [])
-
-  const { dataGridProps } = useDataGrid<IGroup>({
-    resource: 'group',
-    dataProviderName: 'ocotillo',
-    pagination: { pageSize: 50 },
-    filters: {
-      permanent: PROJECT_LIST_FILTERS,
-    },
-  })
-
-  const dataGridPropsWithAnalytics = useListPageDataGridAnalytics(
-    dataGridProps,
-    'projects'
-  )
-
-  const columns = useMemo<GridColDef<IGroup>[]>(
-    () => [
-      {
-        field: 'name',
-        headerName: 'Name',
-        type: 'string',
-        minWidth: 180,
-        flex: 1,
-      },
-      {
-        field: 'well_count',
-        headerName: 'Wells',
-        type: 'number',
-        width: 80,
-        align: 'right',
-        headerAlign: 'right',
-      },
-      {
-        field: 'description',
-        headerName: 'Description',
-        type: 'string',
-        minWidth: 220,
-        flex: 1.5,
-        valueGetter: (_: unknown, row: IGroup) =>
-          row.description?.trim() || '—',
-      },
-      releaseStatusColumnDef<IGroup>(),
-      {
-        field: 'group_type',
-        headerName: 'Type',
-        type: 'string',
-        width: 140,
-      },
-      {
-        field: 'parent_group_id',
-        headerName: 'Parent Group',
-        type: 'string',
-        width: 120,
-      },
-      {
-        field: 'project_area',
-        headerName: 'Has Boundary',
-        type: 'string',
-        width: 120,
-        align: 'center',
-        headerAlign: 'center',
-        renderCell: (params) =>
-          params.value ? <GridCheckCircleIcon color="primary" /> : null,
-      },
-      {
-        field: 'created_at',
-        headerName: 'Created At',
-        width: 175,
-        valueGetter: (isoDate: string) => formatAppDateTime(isoDate),
-      },
-    ],
-    []
-  )
-
-  const projectsDataGridProps = {
-    ...dataGridPropsWithAnalytics,
-    initialState: {
-      columns: {
-        columnVisibilityModel: {
-          well_count: false,
-          parent_group_id: false,
-          project_area: false,
-        },
-      },
-    },
-  }
-
-  return (
-    <ListPage
-      title="Projects"
-      columns={columns}
-      dataGridProps={projectsDataGridProps}
-      getRowId={(row) => row.id}
-      hideBreadcrumb
-      hideHeaderButtons
-      getRowHref={(params) => `/ocotillo/well/projects/show/${params.id}`}
-      accessResource="ocotillo.thing-well-projects"
-      onRowClick={(params) => {
-        captureEvent('projects_row_clicked', {
-          project_id: params.id,
-          project_name: params.row.name,
-        })
-      }}
-    />
-  )
-}
diff --git a/src/resources/ocotillo.tsx b/src/resources/ocotillo.tsx
index 34cc9580..ed939877 100644
--- a/src/resources/ocotillo.tsx
+++ b/src/resources/ocotillo.tsx
@@ -212,14 +212,12 @@ tables.push({
 })
 
 tables.push({
-  name: 'thing-well-projects',
-  list: '/ocotillo/well/projects',
-  show: '/ocotillo/well/projects/show/:id',
+  name: 'projects',
+  list: '/ocotillo/projects',
+  show: '/ocotillo/projects/show/:id',
   meta: {
     label: 'Projects',
     icon: <Workspaces />,
-    parent: 'ocotillo.thing-well',
-    nestedLevel: 1,
   },
 })
 
diff --git a/src/routes/ocotillo.tsx b/src/routes/ocotillo.tsx
index 38b836f7..da5eabbc 100644
--- a/src/routes/ocotillo.tsx
+++ b/src/routes/ocotillo.tsx
@@ -55,11 +55,10 @@ import {
   WellBatchExport,
   WellCreate,
   WellList,
-  WellProjectList,
-  WellProjectShow,
   WellShow,
   WellShowPdfPreview,
 } from '@/pages/ocotillo/thing'
+import { ProjectList, ProjectShow } from '@/pages/ocotillo/projects'
 import {
   ThingIdLinkCreate,
   ThingIdLinkEdit,
@@ -82,6 +81,24 @@ export const OcotilloRoutes = () => {
         <Route index element={<ContactList />} />
         <Route path={'show/:id'} element={<ContactShow />} />
       </Route>
+      <Route path="projects">
+        <Route
+          index
+          element={
+            <ProtectedRoute resource="ocotillo.projects">
+              <ProjectList />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path={'show/:id'}
+          element={
+            <ProtectedRoute resource="ocotillo.projects">
+              <ProjectShow />
+            </ProtectedRoute>
+          }
+        />
+      </Route>
       <Route path="well">
         <Route index element={<WellList />} />
         <Route
@@ -92,24 +109,6 @@ export const OcotilloRoutes = () => {
             </ProtectedRoute>
           }
         />
-        <Route path={'projects'}>
-          <Route
-            index
-            element={
-              <ProtectedRoute resource="ocotillo.thing-well-projects">
-                <WellProjectList />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path={'show/:id'}
-            element={
-              <ProtectedRoute resource="ocotillo.thing-well-projects">
-                <WellProjectShow />
-              </ProtectedRoute>
-            }
-          />
-        </Route>
         <Route path={'show/:id'} element={<WellShow />} />
         <Route
           path={'pdf-preview/:id'}
diff --git a/src/test/components/ProjectListPanel.test.tsx b/src/test/components/ProjectListPanel.test.tsx
new file mode 100644
index 00000000..91857054
--- /dev/null
+++ b/src/test/components/ProjectListPanel.test.tsx
@@ -0,0 +1,170 @@
+// @vitest-environment jsdom
+
+import { act, render, screen } from '@testing-library/react'
+import React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ProjectsTableProps } from '@/components/ProjectsTable/ProjectsTable'
+import type { IGroup } from '@/interfaces/ocotillo/IGroup'
+
+const captureEventMock = vi.fn()
+let canEditAmp = true
+
+const PROJECT: IGroup = {
+  id: 7,
+  name: 'Questa Red River',
+  description: null,
+  created_at: '2026-02-27T17:37:49Z',
+  group_type: 'Monitoring Plan',
+  release_status: 'draft',
+}
+
+vi.mock('@/analytics/posthog', () => ({
+  captureEvent: (...args: unknown[]) => captureEventMock(...args),
+}))
+
+vi.mock('@refinedev/core', () => ({
+  CanAccess: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useList: () => ({
+    result: { data: [PROJECT], total: 1 },
+    query: { isLoading: false },
+  }),
+}))
+
+vi.mock('@mui/material', () => ({
+  Typography: ({ children }: { children: React.ReactNode }) => (
+    <h1>{children}</h1>
+  ),
+}))
+
+vi.mock('@/components/AppBreadcrumb', () => ({ AppBreadcrumb: () => null }))
+vi.mock('@/components/OcotilloPageHeader', () => ({
+  ocotilloPageTitleTypographySx: {},
+}))
+
+vi.mock('@/hooks', () => ({
+  useAccessCapabilities: () => ({ canEditAmp }),
+}))
+
+// Captures what the page hands the table so the wiring can be driven directly.
+let tableProps: ProjectsTableProps | null = null
+
+vi.mock('@/components/ProjectsTable/ProjectsTable', () => ({
+  ProjectsTable: (props: ProjectsTableProps) => {
+    tableProps = props
+    return <div data-testid="projects-table" />
+  },
+}))
+
+vi.mock('@/components/editing', () => ({
+  EditPanelLayout: ({
+    open,
+    panel,
+    children,
+  }: {
+    open: boolean
+    panel: React.ReactNode
+    children: React.ReactNode
+  }) => (
+    <div>
+      {children}
+      {open ? <div data-testid="panel-open">{panel}</div> : null}
+    </div>
+  ),
+}))
+
+vi.mock('@/components/ProjectEdit/ProjectEditPanel', () => ({
+  ProjectEditPanel: ({ projectName }: { projectName?: string | null }) => (
+    <div data-testid="project-edit-panel">{projectName}</div>
+  ),
+}))
+
+// Stubbed out because the real dialog pulls in mapbox-gl, which jsdom cannot run.
+vi.mock('@/components/ProjectsTable/ProjectBoundaryDialog', () => ({
+  ProjectBoundaryDialog: ({ project }: { project: IGroup | null }) =>
+    project ? <div data-testid="boundary-dialog">{project.name}</div> : null,
+}))
+
+import { ProjectList } from '@/pages/ocotillo/projects'
+
+describe('ProjectList edit wiring', () => {
+  beforeEach(() => {
+    tableProps = null
+    captureEventMock.mockClear()
+    canEditAmp = true
+  })
+
+  it('tells the table whether the user can edit', () => {
+    render(<ProjectList />)
+    expect(tableProps?.canEdit).toBe(true)
+
+    canEditAmp = false
+    render(<ProjectList />)
+    expect(tableProps?.canEdit).toBe(false)
+  })
+
+  it('opens the panel for the edited project and records the trigger', () => {
+    render(<ProjectList />)
+    expect(screen.queryByTestId('panel-open')).toBeNull()
+
+    act(() => tableProps?.onEdit?.(PROJECT, 'edit_action'))
+
+    expect(screen.getByTestId('project-edit-panel')).toHaveTextContent(
+      'Questa Red River'
+    )
+    expect(captureEventMock).toHaveBeenCalledWith('projects_edit_opened', {
+      project_id: PROJECT.id,
+      project_name: PROJECT.name,
+      trigger: 'edit_action',
+    })
+  })
+
+  it('records double click as its own trigger', () => {
+    render(<ProjectList />)
+
+    act(() => tableProps?.onEdit?.(PROJECT, 'row_double_click'))
+
+    expect(captureEventMock).toHaveBeenCalledWith('projects_edit_opened', {
+      project_id: PROJECT.id,
+      project_name: PROJECT.name,
+      trigger: 'row_double_click',
+    })
+  })
+
+  it('does not open the panel for users who cannot edit', () => {
+    canEditAmp = false
+    render(<ProjectList />)
+
+    act(() => tableProps?.onEdit?.(PROJECT, 'edit_action'))
+
+    expect(screen.queryByTestId('panel-open')).toBeNull()
+    expect(captureEventMock).not.toHaveBeenCalledWith(
+      'projects_edit_opened',
+      expect.anything()
+    )
+  })
+
+  it('opens the boundary dialog for the chosen project', () => {
+    render(<ProjectList />)
+    expect(screen.queryByTestId('boundary-dialog')).toBeNull()
+
+    act(() => tableProps?.onViewBoundary?.(PROJECT))
+
+    expect(screen.getByTestId('boundary-dialog')).toHaveTextContent(
+      'Questa Red River'
+    )
+    expect(screen.queryByTestId('panel-open')).toBeNull()
+    expect(captureEventMock).toHaveBeenCalledWith('project_boundary_viewed', {
+      project_id: PROJECT.id,
+      project_name: PROJECT.name,
+    })
+  })
+
+  it('selects a row without opening the panel', () => {
+    render(<ProjectList />)
+
+    act(() => tableProps?.onSelect?.(PROJECT))
+
+    expect(screen.queryByTestId('panel-open')).toBeNull()
+    expect(tableProps?.selectedProjectId).toBe(PROJECT.id)
+  })
+})
diff --git a/src/test/components/ProjectsTable.test.tsx b/src/test/components/ProjectsTable.test.tsx
new file mode 100644
index 00000000..d179d060
--- /dev/null
+++ b/src/test/components/ProjectsTable.test.tsx
@@ -0,0 +1,293 @@
+// @vitest-environment jsdom
+
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import type { IGroup } from '@/interfaces/ocotillo/IGroup'
+
+vi.mock('react-router', () => ({
+  Link: ({
+    to,
+    children,
+    ...props
+  }: {
+    to: string
+    children: React.ReactNode
+  }) => (
+    <a href={to} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+// Radix Select needs pointer APIs jsdom lacks; swap in a native select.
+vi.mock('@/components/ui/select', () => ({
+  Select: ({
+    value,
+    onValueChange,
+    children,
+  }: {
+    value?: string
+    onValueChange?: (value: string) => void
+    children: React.ReactNode
+  }) => (
+    <select
+      value={value ?? ''}
+      onChange={(event) => onValueChange?.(event.target.value)}
+    >
+      {children}
+    </select>
+  ),
+  SelectTrigger: ({ 'aria-label': label }: { 'aria-label'?: string }) => (
+    <optgroup label={label} />
+  ),
+  SelectValue: () => null,
+  SelectContent: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  SelectItem: ({
+    value,
+    children,
+  }: {
+    value: string
+    children: React.ReactNode
+  }) => <option value={value}>{children}</option>,
+}))
+
+import { ProjectsTable } from '@/components/ProjectsTable/ProjectsTable'
+
+const project = (overrides: Partial<IGroup> & { id: number }): IGroup => ({
+  name: `Project ${overrides.id}`,
+  description: null,
+  created_at: '2026-02-27T17:37:49Z',
+  release_status: 'draft',
+  group_type: 'Monitoring Plan',
+  ...overrides,
+})
+
+const PROJECTS: IGroup[] = [
+  project({
+    id: 1,
+    name: 'Tularosa Basin',
+    description: 'Southern basin monitoring',
+    created_at: '2026-03-01T00:00:00Z',
+  }),
+  project({
+    id: 2,
+    name: 'Arroyo Seco',
+    group_type: null,
+    release_status: 'public',
+    created_at: '2026-01-01T00:00:00Z',
+  }),
+  project({
+    id: 3,
+    name: 'Espanola Basin',
+    group_type: 'Historical',
+    created_at: '2026-02-01T00:00:00Z',
+    project_area:
+      'MULTIPOLYGON (((-106 35, -105 35, -105 36, -106 36, -106 35)))',
+  }),
+]
+
+const renderTable = (
+  props: Partial<React.ComponentProps<typeof ProjectsTable>> = {}
+) =>
+  render(
+    <ProjectsTable
+      projects={PROJECTS}
+      projectHref={(item) => `/projects/${item.id}`}
+      {...props}
+    />
+  )
+
+/** Row names in render order, skipping the header row. */
+const rowNames = () =>
+  screen
+    .getAllByRole('row')
+    .slice(1)
+    .map((row) => within(row).getAllByRole('cell')[0].textContent)
+
+describe('ProjectsTable sorting', () => {
+  it('sorts by name ascending by default', () => {
+    renderTable()
+
+    expect(rowNames()).toEqual([
+      'Arroyo Seco',
+      'Espanola Basin',
+      'Tularosa Basin',
+    ])
+  })
+
+  it('reverses direction when the same header is clicked again', async () => {
+    const user = userEvent.setup()
+    renderTable()
+
+    await user.click(screen.getByRole('button', { name: /^Name/ }))
+
+    expect(rowNames()).toEqual([
+      'Tularosa Basin',
+      'Espanola Basin',
+      'Arroyo Seco',
+    ])
+  })
+
+  it('sorts dates chronologically, not as strings', async () => {
+    const user = userEvent.setup()
+    renderTable()
+
+    await user.click(screen.getByRole('button', { name: /^Created At/ }))
+
+    expect(rowNames()).toEqual([
+      'Arroyo Seco',
+      'Espanola Basin',
+      'Tularosa Basin',
+    ])
+  })
+
+  it('sorts blank values last regardless of direction', async () => {
+    const user = userEvent.setup()
+    renderTable()
+
+    await user.click(screen.getByRole('button', { name: /^Type/ }))
+    expect(rowNames()[2]).toBe('Arroyo Seco')
+
+    await user.click(screen.getByRole('button', { name: /^Type/ }))
+    expect(rowNames()[2]).toBe('Arroyo Seco')
+  })
+
+  it('exposes sort state to assistive tech', async () => {
+    const user = userEvent.setup()
+    renderTable()
+
+    const nameHeader = screen
+      .getByRole('button', { name: /^Name/ })
+      .closest('th') as HTMLElement
+    expect(nameHeader).toHaveAttribute('aria-sort', 'ascending')
+
+    await user.click(screen.getByRole('button', { name: /^Name/ }))
+    expect(nameHeader).toHaveAttribute('aria-sort', 'descending')
+  })
+})
+
+describe('ProjectsTable filtering', () => {
+  it('searches across name and description', async () => {
+    const user = userEvent.setup()
+    renderTable()
+
+    await user.type(screen.getByLabelText('Search projects'), 'southern')
+
+    expect(rowNames()).toEqual(['Tularosa Basin'])
+  })
+
+  it('filters by type, including projects with no type', async () => {
+    const user = userEvent.setup()
+    renderTable()
+
+    const [typeSelect] = screen.getAllByRole('combobox')
+
+    await user.selectOptions(typeSelect, 'Historical')
+    expect(rowNames()).toEqual(['Espanola Basin'])
+
+    await user.selectOptions(typeSelect, '__empty__')
+    expect(rowNames()).toEqual(['Arroyo Seco'])
+
+    await user.selectOptions(typeSelect, '__all__')
+    expect(rowNames()).toHaveLength(3)
+  })
+
+  it('combines search with a facet filter', async () => {
+    const user = userEvent.setup()
+    renderTable()
+
+    const [typeSelect] = screen.getAllByRole('combobox')
+    await user.selectOptions(typeSelect, 'Monitoring Plan')
+    await user.type(screen.getByLabelText('Search projects'), 'arroyo')
+
+    expect(screen.getByText('No projects match these filters.')).toBeVisible()
+  })
+
+  it('reports how many rows the filters left', async () => {
+    const user = userEvent.setup()
+    renderTable()
+
+    expect(screen.getByText('3 projects')).toBeVisible()
+
+    await user.type(screen.getByLabelText('Search projects'), 'basin')
+    expect(screen.getByText('2 of 3 projects')).toBeVisible()
+  })
+})
+
+describe('ProjectsTable row actions', () => {
+  it('hides the edit action from users who cannot edit', () => {
+    renderTable({ canEdit: false })
+
+    expect(screen.queryByRole('button', { name: /^Edit / })).toBeNull()
+  })
+
+  it('reports the edit source for the button and for double click', async () => {
+    const user = userEvent.setup()
+    const onEdit = vi.fn()
+    renderTable({ canEdit: true, onEdit })
+
+    await user.click(screen.getByRole('button', { name: 'Edit Arroyo Seco' }))
+    expect(onEdit).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 2 }),
+      'edit_action'
+    )
+
+    await user.dblClick(screen.getByText('Tularosa Basin'))
+    expect(onEdit).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: 1 }),
+      'row_double_click'
+    )
+  })
+
+  it('selects on row click without triggering an edit', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    const onEdit = vi.fn()
+    renderTable({ canEdit: true, onSelect, onEdit })
+
+    await user.click(screen.getByText('Espanola Basin').closest('td')!)
+
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 3 }))
+    expect(onEdit).not.toHaveBeenCalled()
+  })
+
+  it('offers the boundary action only for projects that have geometry', async () => {
+    const user = userEvent.setup()
+    const onViewBoundary = vi.fn()
+    renderTable({ onViewBoundary })
+
+    const buttons = screen.getAllByRole('button', { name: /^View boundary/ })
+    expect(buttons).toHaveLength(1)
+    expect(buttons[0]).toHaveAccessibleName('View boundary for Espanola Basin')
+
+    await user.click(buttons[0])
+    expect(onViewBoundary).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 3 })
+    )
+  })
+
+  it('does not select the row when the boundary action is used', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    renderTable({ onSelect, onViewBoundary: vi.fn() })
+
+    await user.click(
+      screen.getByRole('button', { name: 'View boundary for Espanola Basin' })
+    )
+
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('marks the selected row for styling and assistive tech', () => {
+    renderTable({ selectedProjectId: 3 })
+
+    const selected = screen
+      .getByText('Espanola Basin')
+      .closest('tr') as HTMLElement
+    expect(selected).toHaveAttribute('data-state', 'selected')
+  })
+})
diff --git a/src/test/components/SearchModal.test.tsx b/src/test/components/SearchModal.test.tsx
index c6e96c94..35f27a6f 100644
--- a/src/test/components/SearchModal.test.tsx
+++ b/src/test/components/SearchModal.test.tsx
@@ -214,7 +214,7 @@ describe('SearchModal arcade easter eggs', () => {
     await user.click(screen.getByText(/Monitoring Project/))
 
     expect(goMock).toHaveBeenCalledWith({
-      to: '/ocotillo/well/projects/show/42',
+      to: '/ocotillo/projects/show/42',
       type: 'push',
     })
     expect(onClose).toHaveBeenCalled()
diff --git a/src/test/setup.ts b/src/test/setup.ts
index d56a211b..92b4b9ce 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -4,7 +4,17 @@ import { checkMockServerHealth } from './mock-server'
 import { ocotilloDataProvider } from '@/providers/ocotillo-data-provider'
 
 process.env.NODE_ENV = 'test'
-  
+
+// jsdom implements neither of these. maplibre-gl calls createObjectURL at
+// module load to start its worker, so any test that reaches MapComponent
+// throws during import — vitest then fails the run on the unhandled
+// rejection even though every test itself passes. Guarded because the API
+// contract tests run in the node environment, where there is no window.
+if (typeof window !== 'undefined') {
+  window.URL.createObjectURL ??= vi.fn(() => 'blob:test')
+  window.URL.revokeObjectURL ??= vi.fn()
+}
+
   // Mock the authentication provider (for node api contract tests)
   vi.mock('@/providers/authentik-provider', () => ({
     getAccessToken: vi.fn().mockResolvedValue('mock-token'),
diff --git a/src/test/utils/accessControl.test.ts b/src/test/utils/accessControl.test.ts
index d6cbd47f..ccc9b462 100644
--- a/src/test/utils/accessControl.test.ts
+++ b/src/test/utils/accessControl.test.ts
@@ -47,7 +47,7 @@ const expectedRegisteredRoutableResources = [
   'ocotillo.thing-well',
   'ocotillo.thing-well-batch-export',
   'ocotillo.thing-well-pdf-preview',
-  'ocotillo.thing-well-projects',
+  'ocotillo.projects',
 ].sort()
 
 // Geothermal resources are a separate portal — accessible to Geothermal roles
@@ -72,7 +72,7 @@ const expectedAccessByScenario: Scenario[] = [
       'ocotillo.contact',
       'ocotillo.thing-well',
       'ocotillo.thing-well-batch-export',
-      'ocotillo.thing-well-projects',
+      'ocotillo.projects',
     ],
   },
   {
@@ -85,7 +85,7 @@ const expectedAccessByScenario: Scenario[] = [
       'ocotillo.contact',
       'ocotillo.hydrograph-correction',
       'ocotillo.thing-well-batch-export',
-      'ocotillo.thing-well-projects',
+      'ocotillo.projects',
     ],
   },
   {
@@ -124,7 +124,7 @@ const expectedAccessByScenario: Scenario[] = [
       'ocotillo.thing-well',
       'ocotillo.contact',
       'ocotillo.thing-well-batch-export',
-      'ocotillo.thing-well-projects',
+      'ocotillo.projects',
       ...GEOTHERMAL_ROUTABLE,
     ],
   },
diff --git a/src/test/utils/projectBoundary.test.ts b/src/test/utils/projectBoundary.test.ts
new file mode 100644
index 00000000..dc75dc32
--- /dev/null
+++ b/src/test/utils/projectBoundary.test.ts
@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest'
+import { parseProjectBoundaryGeoJson } from '@/utils/projectBoundary'
+
+const SQUARE = [
+  [
+    [-106.5, 34.5],
+    [-106.4, 34.5],
+    [-106.4, 34.6],
+    [-106.5, 34.6],
+    [-106.5, 34.5],
+  ],
+]
+
+const polygon = (coordinates = SQUARE) => ({ type: 'Polygon', coordinates })
+
+const parse = (value: unknown) =>
+  parseProjectBoundaryGeoJson(JSON.stringify(value))
+
+const errorOf = (result: ReturnType<typeof parseProjectBoundaryGeoJson>) =>
+  'error' in result ? result.error : null
+
+describe('parseProjectBoundaryGeoJson', () => {
+  it('emits MULTIPOLYGON WKT, the only type the API accepts', () => {
+    expect(parse(polygon())).toEqual({
+      wkt: 'MULTIPOLYGON (((-106.5 34.5, -106.4 34.5, -106.4 34.6, -106.5 34.6, -106.5 34.5)))',
+    })
+  })
+
+  it('accepts a Feature and a single-feature FeatureCollection', () => {
+    const feature = { type: 'Feature', properties: {}, geometry: polygon() }
+
+    expect(parse(feature)).toHaveProperty('wkt')
+    expect(
+      parse({ type: 'FeatureCollection', features: [feature] })
+    ).toHaveProperty('wkt')
+  })
+
+  it('accepts a MultiPolygon with exactly one part', () => {
+    expect(
+      parse({ type: 'MultiPolygon', coordinates: [SQUARE] })
+    ).toHaveProperty('wkt')
+  })
+
+  it('rejects multiple features', () => {
+    const feature = { type: 'Feature', properties: {}, geometry: polygon() }
+    const result = parse({
+      type: 'FeatureCollection',
+      features: [feature, feature],
+    })
+
+    expect(errorOf(result)).toContain('2 features')
+  })
+
+  it('rejects a multi-part MultiPolygon', () => {
+    const result = parse({
+      type: 'MultiPolygon',
+      coordinates: [SQUARE, SQUARE],
+    })
+
+    expect(errorOf(result)).toContain('2 parts')
+  })
+
+  it('rejects non-polygon geometry', () => {
+    const result = parse({ type: 'Point', coordinates: [-106.5, 34.5] })
+
+    expect(errorOf(result)).toContain('"Point"')
+  })
+
+  it('rejects invalid JSON', () => {
+    expect(errorOf(parseProjectBoundaryGeoJson('{oops'))).toContain(
+      'not valid JSON'
+    )
+  })
+
+  it('rejects an unclosed ring', () => {
+    const result = parse(polygon([SQUARE[0].slice(0, 4)]))
+
+    expect(errorOf(result)).toContain('closed')
+  })
+
+  it('rejects a ring with too few positions', () => {
+    const result = parse(polygon([SQUARE[0].slice(0, 3)]))
+
+    expect(errorOf(result)).toContain('four positions')
+  })
+
+  it('rejects coordinates outside WGS84 bounds', () => {
+    const projected = SQUARE[0].map(([lon, lat]) => [
+      lon * 10_000,
+      lat * 10_000,
+    ])
+    const result = parse(polygon([projected]))
+
+    expect(errorOf(result)).toContain('WGS84')
+  })
+
+  it('rejects non-numeric coordinates', () => {
+    const strings = [
+      ['a', 'b'],
+      ['c', 'd'],
+      ['e', 'f'],
+      ['a', 'b'],
+    ] as unknown as number[][]
+    const result = parse(polygon([strings]))
+
+    expect(errorOf(result)).toContain('numeric')
+  })
+})
diff --git a/src/utils/accessControl.ts b/src/utils/accessControl.ts
index 95d61d6b..656aadf3 100644
--- a/src/utils/accessControl.ts
+++ b/src/utils/accessControl.ts
@@ -98,7 +98,14 @@ const resourcePolicies: Record<string, ResourcePolicy> = {
   },
   'ocotillo.thing-well-pdf-preview': { list: adminRoles, show: adminRoles },
   'ocotillo.thing-well-batch-export': { list: viewerRoles, show: viewerRoles },
-  'ocotillo.thing-well-projects': { list: viewerRoles, show: viewerRoles },
+  // Editors may change description and release status; renaming is admin-only
+  // and is enforced per-field in the project edit panel.
+  'ocotillo.projects': {
+    list: viewerRoles,
+    show: viewerRoles,
+    edit: editorRoles,
+    manage: adminRoles,
+  },
   'ocotillo.asset-unassociated': {
     list: adminRoles,
     show: adminRoles,
@@ -258,7 +265,7 @@ export const canAccessResource = ({
     return matchesPolicy(policy[action], capabilities.roles)
   }
 
-  if (resource === 'ocotillo.thing-well-projects') {
+  if (resource === 'ocotillo.projects') {
     const policy = resourcePolicies[resource]
     return matchesPolicy(policy[action], capabilities.roles)
   }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index bc91b2c0..8922f1a0 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -30,4 +30,5 @@ export * from './UtmToLonLat'
 export * from './WellBatchExport'
 export * from './wellSiteName'
 export * from './docsSearch'
+export * from './projectBoundary'
 export * from './searchModal'
diff --git a/src/utils/projectBoundary.ts b/src/utils/projectBoundary.ts
new file mode 100644
index 00000000..4a5393b5
--- /dev/null
+++ b/src/utils/projectBoundary.ts
@@ -0,0 +1,161 @@
+import wellknown from 'wellknown'
+
+/**
+ * Project boundaries are stored as a single WKT geometry in `group.project_area`,
+ * so uploads must resolve to exactly one polygon. Anything ambiguous is rejected
+ * with a message the user can act on rather than being silently merged.
+ *
+ * The column is MULTIPOLYGON and the API rejects any other WKT type, so the
+ * accepted single polygon is emitted as a one-part MultiPolygon.
+ */
+
+export type ParsedBoundary = { wkt: string } | { error: string }
+
+const MAX_VERTICES = 50_000
+
+type Ring = number[][]
+
+function isPolygonGeometry(value: unknown): value is GeoJSON.Polygon {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as GeoJSON.Polygon).type === 'Polygon'
+  )
+}
+
+function isMultiPolygonGeometry(value: unknown): value is GeoJSON.MultiPolygon {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as GeoJSON.MultiPolygon).type === 'MultiPolygon'
+  )
+}
+
+/** Pulls the one polygon out of a geometry, Feature, or FeatureCollection. */
+function extractPolygon(root: unknown): GeoJSON.Polygon | { error: string } {
+  if (typeof root !== 'object' || root === null) {
+    return { error: 'File does not contain a GeoJSON object.' }
+  }
+
+  const node = root as { type?: string; features?: unknown; geometry?: unknown }
+
+  if (node.type === 'FeatureCollection') {
+    const features = Array.isArray(node.features) ? node.features : []
+    if (features.length === 0) {
+      return { error: 'This file has no features.' }
+    }
+    if (features.length > 1) {
+      return {
+        error: `This file has ${features.length} features. Upload a file with a single polygon.`,
+      }
+    }
+    return extractPolygon(features[0])
+  }
+
+  if (node.type === 'Feature') {
+    return extractPolygon(node.geometry)
+  }
+
+  if (isPolygonGeometry(node)) {
+    return node
+  }
+
+  if (isMultiPolygonGeometry(node)) {
+    const parts = node.coordinates ?? []
+    if (parts.length !== 1) {
+      return {
+        error: `This file is a MultiPolygon with ${parts.length} parts. Upload a file with a single polygon.`,
+      }
+    }
+    return { type: 'Polygon', coordinates: parts[0] }
+  }
+
+  const found = node.type ? `"${node.type}"` : 'an unrecognized type'
+  return { error: `Expected a Polygon but found ${found}.` }
+}
+
+function validateRings(rings: Ring[]): string | null {
+  if (!Array.isArray(rings) || rings.length === 0) {
+    return 'Polygon has no coordinates.'
+  }
+
+  let vertices = 0
+
+  for (const ring of rings) {
+    if (!Array.isArray(ring) || ring.length < 4) {
+      return 'Each polygon ring needs at least four positions.'
+    }
+
+    vertices += ring.length
+
+    for (const position of ring) {
+      if (
+        !Array.isArray(position) ||
+        position.length < 2 ||
+        typeof position[0] !== 'number' ||
+        typeof position[1] !== 'number' ||
+        Number.isNaN(position[0]) ||
+        Number.isNaN(position[1])
+      ) {
+        return 'Coordinates must be numeric [longitude, latitude] pairs.'
+      }
+
+      const [longitude, latitude] = position
+      if (
+        longitude < -180 ||
+        longitude > 180 ||
+        latitude < -90 ||
+        latitude > 90
+      ) {
+        return 'Coordinates must be WGS84 longitude/latitude (EPSG:4326).'
+      }
+    }
+
+    const [firstLon, firstLat] = ring[0]
+    const [lastLon, lastLat] = ring[ring.length - 1]
+    if (firstLon !== lastLon || firstLat !== lastLat) {
+      return 'Each polygon ring must be closed (first and last position equal).'
+    }
+  }
+
+  if (vertices > MAX_VERTICES) {
+    return `Polygon has ${vertices.toLocaleString()} vertices, over the ${MAX_VERTICES.toLocaleString()} limit. Simplify it before uploading.`
+  }
+
+  return null
+}
+
+/** Parses uploaded GeoJSON text into the WKT the API stores, or an error to show. */
+export function parseProjectBoundaryGeoJson(text: string): ParsedBoundary {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(text)
+  } catch {
+    return { error: 'This file is not valid JSON.' }
+  }
+
+  const polygon = extractPolygon(parsed)
+  if ('error' in polygon) {
+    return polygon
+  }
+
+  const ringError = validateRings(polygon.coordinates as Ring[])
+  if (ringError) {
+    return { error: ringError }
+  }
+
+  const multiPolygon: GeoJSON.MultiPolygon = {
+    type: 'MultiPolygon',
+    coordinates: [polygon.coordinates],
+  }
+
+  const wkt = wellknown.stringify(
+    multiPolygon as Parameters<typeof wellknown.stringify>[0]
+  )
+
+  if (!wkt) {
+    return { error: 'Could not convert this polygon to WKT.' }
+  }
+
+  return { wkt }
+}
diff --git a/vite.config.ts b/vite.config.ts
index aefa7167..a21d26b3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -67,7 +67,10 @@ export default defineConfig(({ mode }) => {
     },
     server: {
       host: '0.0.0.0',
-      port: 5173,
+      // 5173 by default because the Authentik redirect URI is registered
+      // against it; override with PORT when that instance is already taken
+      // (e.g. a second dev server on the same checkout).
+      port: Number(process.env.PORT) || 5173,
       proxy: {
         '/api': {
           target: env.VITE_API_URL,