From 0203af467c9af28ec5e29733b7a644d15d0d5a5f Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 25 Mar 2026 12:07:31 +0100
Subject: [PATCH 01/26] fix: replace score label for confirmed occurrences

---
 ui/src/components/determination-score.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/determination-score.tsx b/ui/src/components/determination-score.tsx
index 1267612aa..ea8a10eeb 100644
--- a/ui/src/components/determination-score.tsx
+++ b/ui/src/components/determination-score.tsx
@@ -21,7 +21,7 @@ export const DeterminationScore = ({
     <BasicTooltip content={tooltip}>
       <div className="flex items-center gap-3">
         <IdentificationScore confirmed={confirmed} confidenceScore={score} />
-        <span>{scoreLabel}</span>
+        <span>{confirmed ? translate(STRING.CONFIRMED) : scoreLabel}</span>
       </div>
     </BasicTooltip>
   )

From 020a188b2b293c6e2d3f68a72454f906df436284 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 25 Mar 2026 12:18:28 +0100
Subject: [PATCH 02/26] feat: add tooltip and adjust copy for score column

---
 ui/src/components/determination-score.tsx           |  8 ++++----
 .../filters/verification-status-filter.tsx          |  4 ++--
 ui/src/pages/occurrences/occurrence-columns.tsx     |  3 ++-
 ui/src/utils/language.ts                            | 13 ++++++++++---
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/determination-score.tsx b/ui/src/components/determination-score.tsx
index ea8a10eeb..3ab0735be 100644
--- a/ui/src/components/determination-score.tsx
+++ b/ui/src/components/determination-score.tsx
@@ -3,15 +3,15 @@ import { IdentificationScore } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 
 export const DeterminationScore = ({
-  confirmed,
   score,
   scoreLabel,
   tooltip,
+  verified,
 }: {
-  confirmed?: boolean
   score?: number
   scoreLabel?: string
   tooltip?: string
+  verified?: boolean
 }) => {
   if (score === undefined || scoreLabel === undefined) {
     return <span>{translate(STRING.VALUE_NOT_AVAILABLE)}</span>
@@ -20,8 +20,8 @@ export const DeterminationScore = ({
   return (
     <BasicTooltip content={tooltip}>
       <div className="flex items-center gap-3">
-        <IdentificationScore confirmed={confirmed} confidenceScore={score} />
-        <span>{confirmed ? translate(STRING.CONFIRMED) : scoreLabel}</span>
+        <IdentificationScore confirmed={verified} confidenceScore={score} />
+        <span>{verified ? translate(STRING.VERIFIED) : scoreLabel}</span>
       </div>
     </BasicTooltip>
   )
diff --git a/ui/src/components/filtering/filters/verification-status-filter.tsx b/ui/src/components/filtering/filters/verification-status-filter.tsx
index ee5d5a3b7..e87681f48 100644
--- a/ui/src/components/filtering/filters/verification-status-filter.tsx
+++ b/ui/src/components/filtering/filters/verification-status-filter.tsx
@@ -4,8 +4,8 @@ import { booleanToString, stringToBoolean } from '../utils'
 import { FilterProps } from './types'
 
 const OPTIONS = [
-  { value: true, label: 'Verified' },
-  { value: false, label: 'Not verified' },
+  { value: true, label: translate(STRING.VERIFIED) },
+  { value: false, label: translate(STRING.NOT_VERIFIED) },
 ]
 
 export const VerificationStatusFilter = ({
diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx
index b550aff3f..2091b730a 100644
--- a/ui/src/pages/occurrences/occurrence-columns.tsx
+++ b/ui/src/pages/occurrences/occurrence-columns.tsx
@@ -68,11 +68,11 @@ export const columns: (
   {
     id: 'score',
     name: translate(STRING.FIELD_LABEL_SCORE),
+    tooltip: translate(STRING.TOOLTIP_SCORE),
     sortField: 'determination_score',
     renderCell: (item: Occurrence) => (
       <BasicTableCell>
         <DeterminationScore
-          confirmed={item.determinationVerified}
           score={item.determinationScore}
           scoreLabel={item.determinationScoreLabel}
           tooltip={
@@ -84,6 +84,7 @@ export const columns: (
                   score: `${item.determinationScore}`,
                 })
           }
+          verified={item.determinationVerified}
         />
       </BasicTableCell>
     ),
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index e1808b590..32ba70153 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -256,6 +256,7 @@ export enum STRING {
   TOOLTIP_OCCURRENCE,
   TOOLTIP_PIPELINE,
   TOOLTIP_PROCESSING_SERVICE,
+  TOOLTIP_SCORE,
   TOOLTIP_SESSION,
   TOOLTIP_SITE,
   TOOLTIP_STATUS,
@@ -285,6 +286,7 @@ export enum STRING {
   MANAGE_ACCESS_FOR,
   NEW_ID,
   NOT_CONNECTED,
+  NOT_VERIFIED,
   OR,
   PIPELINES,
   RECENT,
@@ -294,10 +296,10 @@ export enum STRING {
   REMOVE_TAXA_LIST_TAXON,
   RESULTS_MEMBERS,
   RESULTS,
-  SELECT,
   SELECT_COLUMNS,
   SELECT_PLACEHOLDER,
   SELECT_TAXON_PLACEHOLDER,
+  SELECT,
   SET_PASSWORD_DETAILS,
   SET_PASSWORD,
   SETTINGS,
@@ -313,6 +315,7 @@ export enum STRING {
   USER_INFO,
   VALUE_NOT_AVAILABLE,
   VERIFIED_BY,
+  VERIFIED,
   YOU,
 }
 
@@ -433,7 +436,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_ROLE]: 'Role',
   [STRING.FIELD_LABEL_SAMPLE_CAPTURES]: 'Sample images',
   [STRING.FIELD_LABEL_SAMPLING_METHOD]: 'Sampling method',
-  [STRING.FIELD_LABEL_SCORE]: 'Score',
+  [STRING.FIELD_LABEL_SCORE]: 'Prediction score',
   [STRING.FIELD_LABEL_SESSION]: 'Session',
   [STRING.FIELD_LABEL_SESSIONS]: 'Sessions',
   [STRING.FIELD_LABEL_SITE]: 'Site',
@@ -602,6 +605,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
     'A pipeline is a set of algorithms used for processing. A pipeline is picked from a list of algorithm bundle options when a processing job is defined.',
   [STRING.TOOLTIP_PROCESSING_SERVICE]:
     'A processing service is a group of pipelines used for processing captures.',
+  [STRING.TOOLTIP_SCORE]:
+    'This is a model derived prediction score, not a real-world probability. Think of it as a relative metric that will vary based model calibration and available training data.',
   [STRING.TOOLTIP_SESSION]:
     'A session is a fixed period of time of monitoring for one station. The period is typically one night.',
   [STRING.TOOLTIP_SITE]:
@@ -635,6 +640,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.MANAGE_ACCESS_FOR]: 'Manage access for {{user}}.',
   [STRING.NEW_ID]: 'New ID',
   [STRING.NOT_CONNECTED]: 'Not connected',
+  [STRING.NOT_VERIFIED]: 'Not verified',
   [STRING.OR]: 'Or',
   [STRING.PIPELINES]: 'Pipelines',
   [STRING.RECENT]: 'Recent',
@@ -644,10 +650,10 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.REMOVE_TAXA_LIST_TAXON]: 'Remove taxon',
   [STRING.RESULTS_MEMBERS]: '{{total}} member(s)',
   [STRING.RESULTS]: '{{total}} result(s)',
-  [STRING.SELECT]: 'Select',
   [STRING.SELECT_COLUMNS]: 'Select columns',
   [STRING.SELECT_PLACEHOLDER]: 'Select a value',
   [STRING.SELECT_TAXON_PLACEHOLDER]: 'Select a taxon',
+  [STRING.SELECT]: 'Select',
   [STRING.SET_PASSWORD_DETAILS]: 'Please set a new password for your acccount.',
   [STRING.SET_PASSWORD]: 'Set password',
   [STRING.SETTINGS]: 'Settings',
@@ -663,6 +669,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.USER_INFO]: 'User info',
   [STRING.VALUE_NOT_AVAILABLE]: 'n/a',
   [STRING.VERIFIED_BY]: 'Verified by\n{{name}}',
+  [STRING.VERIFIED]: 'Verified',
   [STRING.YOU]: 'You',
 }
 

From e5c97996326230de4bd51cb583c2283613fe9e5d Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 25 Mar 2026 12:44:27 +0100
Subject: [PATCH 03/26] feat: add more info to filter controls

---
 .../components/filtering/filter-control.tsx   | 39 +++++++++++--------
 .../filtering/filters/image-filter.tsx        |  2 +-
 .../filtering/filters/session-filter.tsx      |  2 +-
 .../capture-job/capture-job-dialog.tsx        |  2 +-
 ui/src/utils/useFilters.ts                    | 34 ++++++++++++++++
 5 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/filtering/filter-control.tsx b/ui/src/components/filtering/filter-control.tsx
index bdbb04b66..fa63b023f 100644
--- a/ui/src/components/filtering/filter-control.tsx
+++ b/ui/src/components/filtering/filter-control.tsx
@@ -79,9 +79,7 @@ export const FilterControl = ({
         <span className="text-muted-foreground body-overline-small font-bold pt-0.5">
           {filter.label}
         </span>
-        {filter.info ? (
-          <FilterInfo text={filter.info.text} to={filter.info.to} />
-        ) : null}
+        {filter.info ? <FilterInfo info={filter.info} /> : null}
       </div>
       <div className="flex items-center justify-between gap-2">
         <FilterComponent
@@ -112,30 +110,37 @@ export const FilterControl = ({
   )
 }
 
-export const FilterInfo = ({ text, to }: { text: string; to?: string }) => (
+export const FilterInfo = ({
+  info,
+}: {
+  info: {
+    title: string
+    text: string
+    to?: string
+  }
+}) => (
   <Tooltip.Provider delayDuration={0}>
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        <Button
-          aria-label={translate(STRING.INFO)}
-          className="text-muted-foreground"
-          size="icon"
-          variant="ghost"
-        >
+        <Button aria-label={translate(STRING.INFO)} size="icon" variant="ghost">
           <InfoIcon className="w-4 h-4" />
         </Button>
       </Tooltip.Trigger>
-      <Tooltip.Content side="bottom" className="p-4 space-y-4 max-w-xs">
-        <p className="whitespace-normal">{text}</p>
-        {to ? (
+      <Tooltip.Content
+        side="bottom"
+        className="flex flex-col gap-4 p-4 max-w-xs"
+      >
+        <p className="whitespace-normal">{info.text}</p>
+        {info.to ? (
           <Link
+            aria-label=""
             className={classNames(
-              buttonVariants({ size: 'small', variant: 'outline' }),
-              '!w-auto'
+              buttonVariants({ size: 'small', variant: 'ghost' }),
+              'self-end'
             )}
-            to={to}
+            to={info.to}
           >
-            <span>Configure</span>
+            <span>{info.title}</span>
             <ChevronRightIcon className="w-4 h-4" />
           </Link>
         ) : null}
diff --git a/ui/src/components/filtering/filters/image-filter.tsx b/ui/src/components/filtering/filters/image-filter.tsx
index ad0a88ebe..787bc7dfc 100644
--- a/ui/src/components/filtering/filters/image-filter.tsx
+++ b/ui/src/components/filtering/filters/image-filter.tsx
@@ -10,7 +10,7 @@ export const ImageFilter = ({ value }: FilterProps) => {
   })()
 
   return (
-    <div className="px-2 pt-0.5">
+    <div className="pt-0.5">
       <span className="text-muted-foreground">{label}</span>
     </div>
   )
diff --git a/ui/src/components/filtering/filters/session-filter.tsx b/ui/src/components/filtering/filters/session-filter.tsx
index a4c3a4a4f..03001f201 100644
--- a/ui/src/components/filtering/filters/session-filter.tsx
+++ b/ui/src/components/filtering/filters/session-filter.tsx
@@ -15,7 +15,7 @@ export const SessionFilter = ({ value }: FilterProps) => {
   })()
 
   return (
-    <div className="px-2">
+    <div className="pt-0.5">
       <span className="text-muted-foreground">{label}</span>
     </div>
   )
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx b/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx
index 3bb9bbb05..e330af474 100644
--- a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx
+++ b/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx
@@ -12,7 +12,7 @@ export const CaptureJobDialog = ({ id }: { id: string }) => {
   const [isOpen, setIsOpen] = useState(false)
   const { job, isLoading, isFetching, error } = useJobDetails(id, isOpen)
   const title = translate(STRING.ENTITY_DETAILS, {
-    type: _.capitalize(translate(STRING.ENTITY_TYPE_DEPLOYMENT)),
+    type: _.capitalize(translate(STRING.ENTITY_TYPE_JOB)),
   })
 
   return (
diff --git a/ui/src/utils/useFilters.ts b/ui/src/utils/useFilters.ts
index 39a49421e..fab2e9279 100644
--- a/ui/src/utils/useFilters.ts
+++ b/ui/src/utils/useFilters.ts
@@ -8,6 +8,7 @@ interface FilterConfig {
   label: string
   field: string
   info?: {
+    title: string
     text: string
     to?: string
   }
@@ -21,11 +22,17 @@ export const AVAILABLE_FILTERS = (projectId: string): FilterConfig[] => [
   {
     label: 'Include algorithm',
     field: 'algorithm',
+    info: {
+      title: translate(STRING.NAV_ITEM_ALGORITHMS),
+      text: translate(STRING.TOOLTIP_ALGORITHM),
+      to: APP_ROUTES.ALGORITHMS({ projectId }),
+    },
   },
   {
     label: translate(STRING.FIELD_LABEL_CAPTURE_SET),
     field: 'collection', // This is for viewing occurrences by capture set. @TODO: Can we update this key to "capture_set_id" to streamline?
     info: {
+      title: translate(STRING.NAV_ITEM_CAPTURE_SETS),
       text: translate(STRING.TOOLTIP_CAPTURE_SET),
       to: APP_ROUTES.CAPTURE_SETS({ projectId }),
     },
@@ -34,6 +41,7 @@ export const AVAILABLE_FILTERS = (projectId: string): FilterConfig[] => [
     label: translate(STRING.FIELD_LABEL_CAPTURE_SET),
     field: 'source_image_collection', // This is for viewing jobs by capture set. @TODO: Can we update this key to "capture_set_id" to streamline?
     info: {
+      title: translate(STRING.NAV_ITEM_CAPTURE_SETS),
       text: translate(STRING.TOOLTIP_CAPTURE_SET),
       to: APP_ROUTES.CAPTURE_SETS({ projectId }),
     },
@@ -42,6 +50,7 @@ export const AVAILABLE_FILTERS = (projectId: string): FilterConfig[] => [
     label: translate(STRING.FIELD_LABEL_CAPTURE_SET),
     field: 'collections', // This is for viewing captures by capture set. @TODO: Can we update this key to "capture_set_id" to streamline?
     info: {
+      title: translate(STRING.NAV_ITEM_CAPTURE_SETS),
       text: translate(STRING.TOOLTIP_CAPTURE_SET),
       to: APP_ROUTES.CAPTURE_SETS({ projectId }),
     },
@@ -49,6 +58,11 @@ export const AVAILABLE_FILTERS = (projectId: string): FilterConfig[] => [
   {
     label: 'Station',
     field: 'deployment',
+    info: {
+      title: translate(STRING.NAV_ITEM_DEPLOYMENTS),
+      text: translate(STRING.TOOLTIP_DEPLOYMENT),
+      to: APP_ROUTES.DEPLOYMENTS({ projectId }),
+    },
   },
   {
     label: 'End date',
@@ -91,18 +105,38 @@ export const AVAILABLE_FILTERS = (projectId: string): FilterConfig[] => [
   {
     label: translate(STRING.FIELD_LABEL_CAPTURE),
     field: 'detections__source_image', // This is for viewing occurrences by capture. @TODO: Can we update this key to "capture_id" to streamline?
+    info: {
+      title: translate(STRING.NAV_ITEM_CAPTURES),
+      text: translate(STRING.TOOLTIP_CAPTURE),
+      to: APP_ROUTES.CAPTURES({ projectId }),
+    },
   },
   {
     label: 'Session',
     field: 'event',
+    info: {
+      title: translate(STRING.NAV_ITEM_SESSIONS),
+      text: translate(STRING.TOOLTIP_SESSION),
+      to: APP_ROUTES.SESSIONS({ projectId }),
+    },
   },
   {
     label: 'Pipeline',
     field: 'pipeline',
+    info: {
+      title: translate(STRING.NAV_ITEM_PIPELINES),
+      text: translate(STRING.TOOLTIP_PIPELINE),
+      to: APP_ROUTES.PIPELINES({ projectId }),
+    },
   },
   {
     label: 'Exclude algorithm',
     field: 'not_algorithm',
+    info: {
+      title: translate(STRING.NAV_ITEM_ALGORITHMS),
+      text: translate(STRING.TOOLTIP_ALGORITHM),
+      to: APP_ROUTES.ALGORITHMS({ projectId }),
+    },
   },
   {
     label: 'Include tag',

From 46802e630b28813eb9ae1c97b546138ecd490390 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 25 Mar 2026 12:51:44 +0100
Subject: [PATCH 04/26] layout: tweak column order for pipeline table

---
 .../project/pipelines/pipelines-columns.tsx   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/pages/project/pipelines/pipelines-columns.tsx b/ui/src/pages/project/pipelines/pipelines-columns.tsx
index 61b1231a4..47287c5eb 100644
--- a/ui/src/pages/project/pipelines/pipelines-columns.tsx
+++ b/ui/src/pages/project/pipelines/pipelines-columns.tsx
@@ -32,16 +32,6 @@ export const columns: (
       </Link>
     ),
   },
-  {
-    id: 'description',
-    name: translate(STRING.FIELD_LABEL_DESCRIPTION),
-    renderCell: (item: Pipeline) => (
-      <BasicTableCell
-        style={{ width: '320px', whiteSpace: 'normal' }}
-        value={item.description}
-      />
-    ),
-  },
   {
     id: 'default',
     name: '',
@@ -54,6 +44,16 @@ export const columns: (
         <></>
       ),
   },
+  {
+    id: 'description',
+    name: translate(STRING.FIELD_LABEL_DESCRIPTION),
+    renderCell: (item: Pipeline) => (
+      <BasicTableCell
+        style={{ width: '320px', whiteSpace: 'normal' }}
+        value={item.description}
+      />
+    ),
+  },
   {
     id: 'processing-services-online',
     name: 'Processing services online',

From 55e83259c25d6028d44625b490c79b8716d06506 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 09:35:42 +0100
Subject: [PATCH 05/26] feat: add filter control tooltips and streamline UI

---
 .../filtering/default-filter-control.tsx      | 118 +++++++++---------
 .../components/filtering/filter-control.tsx   |  48 +------
 .../design-system/components/info-tooltip.tsx |  53 ++++++++
 .../components/input/input.module.scss        |  20 ---
 .../design-system/components/input/input.tsx  |   6 +-
 .../upload-images-dialog.tsx                  |  40 +++---
 .../pipelines/default-pipeline-badge.tsx      |  30 ++---
 ui/src/pages/project/sidebar/sidebar.tsx      |   2 +-
 .../session-details/playback/playback.tsx     |   4 +-
 ui/src/utils/language.ts                      |   2 +
 ui/src/utils/useFilters.ts                    |  80 +++++++-----
 11 files changed, 207 insertions(+), 196 deletions(-)
 create mode 100644 ui/src/design-system/components/info-tooltip.tsx

diff --git a/ui/src/components/filtering/default-filter-control.tsx b/ui/src/components/filtering/default-filter-control.tsx
index d35c09804..085f7eb25 100644
--- a/ui/src/components/filtering/default-filter-control.tsx
+++ b/ui/src/components/filtering/default-filter-control.tsx
@@ -1,13 +1,10 @@
-import {
-  FormActions,
-  FormRow,
-  FormSection,
-} from 'components/form/layout/layout'
+import classNames from 'classnames'
+import { FormRow } from 'components/form/layout/layout'
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
 import { ProjectDetails } from 'data-services/models/project-details'
 import { InputValue } from 'design-system/components/input/input'
 import { ChevronRightIcon, InfoIcon } from 'lucide-react'
-import { Button, buttonVariants, Popover, Switch } from 'nova-ui-kit'
+import { Button, buttonVariants, Switch, Tooltip } from 'nova-ui-kit'
 import { Link, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
@@ -30,7 +27,7 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => {
         <span className="text-muted-foreground body-overline-small font-bold pt-0.5">
           {filter.label}
         </span>
-        {project ? <DefaultFiltersPopover project={project} /> : null}
+        {project ? <DefaultFiltersTooltip project={project} /> : null}
       </div>
       <Switch
         checked={stringToBoolean(filter.value) ?? true}
@@ -46,61 +43,66 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => {
   )
 }
 
-export const DefaultFiltersPopover = ({
+export const DefaultFiltersTooltip = ({
   className,
   project,
 }: {
   className?: string
   project: ProjectDetails
 }) => (
-  <Popover.Root>
-    <Popover.Trigger asChild>
-      <Button
-        aria-label={translate(STRING.INFO)}
-        className={className}
-        size="icon"
-        variant="ghost"
-      >
-        <InfoIcon className="w-4 h-4" />
-      </Button>
-    </Popover.Trigger>
-    <Popover.Content className="p-0">
-      <FormSection
-        title={translate(STRING.NAV_ITEM_DEFAULT_FILTERS)}
-        description="Data is filtered by default based on global project configuration."
-      >
-        <FormRow>
-          <InputValue
-            label="Score threshold"
-            value={project.settings.scoreThreshold}
-          />
-        </FormRow>
-        <FormRow>
-          <InputValue
-            label="Include taxa"
-            value={project.settings.includeTaxa
-              .map((taxon) => taxon.name)
-              .join(', ')}
-          />
-          <InputValue
-            label="Exclude taxa"
-            value={project.settings.excludeTaxa
-              .map((taxon) => taxon.name)
-              .join(', ')}
-          />
-        </FormRow>
-      </FormSection>
-      {project.canUpdate ? (
-        <FormActions>
-          <Link
-            className={buttonVariants({ size: 'small', variant: 'outline' })}
-            to={APP_ROUTES.DEFAULT_FILTERS({ projectId: project.id })}
-          >
-            <span>Configure</span>
-            <ChevronRightIcon className="w-4 h-4" />
-          </Link>
-        </FormActions>
-      ) : null}
-    </Popover.Content>
-  </Popover.Root>
+  <Tooltip.Provider delayDuration={0}>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          aria-label={translate(STRING.INFO)}
+          className={className}
+          size="icon"
+          variant="ghost"
+        >
+          <InfoIcon className="w-4 h-4" />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content className="p-4 max-w-xs">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 border-b border-border pb-4">
+            <p className="body-small italic text-muted-foreground">
+              Data is filtered by default based on global project configuration.
+            </p>
+            <FormRow>
+              <InputValue
+                label="Score threshold"
+                value={project.settings.scoreThreshold}
+              />
+            </FormRow>
+            <FormRow>
+              <InputValue
+                label="Include taxa"
+                value={project.settings.includeTaxa
+                  .map((taxon) => taxon.name)
+                  .join(', ')}
+              />
+              <InputValue
+                label="Exclude taxa"
+                value={project.settings.excludeTaxa
+                  .map((taxon) => taxon.name)
+                  .join(', ')}
+              />
+            </FormRow>
+          </div>
+          {project.canUpdate ? (
+            <Link
+              className={classNames(
+                buttonVariants({ size: 'small', variant: 'ghost' }),
+                '!w-auto self-end'
+              )}
+              to={APP_ROUTES.DEFAULT_FILTERS({ projectId: project.id })}
+            >
+              <span>{translate(STRING.CONFIGURE)}</span>
+              <ChevronRightIcon className="w-4 h-4" />
+            </Link>
+          ) : null}
+        </div>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  </Tooltip.Provider>
 )
diff --git a/ui/src/components/filtering/filter-control.tsx b/ui/src/components/filtering/filter-control.tsx
index fa63b023f..d5000abf0 100644
--- a/ui/src/components/filtering/filter-control.tsx
+++ b/ui/src/components/filtering/filter-control.tsx
@@ -1,7 +1,6 @@
-import classNames from 'classnames'
-import { ChevronRightIcon, InfoIcon, XIcon } from 'lucide-react'
-import { Button, buttonVariants, Tooltip } from 'nova-ui-kit'
-import { Link } from 'react-router-dom'
+import { InfoTooltip } from 'design-system/components/info-tooltip'
+import { XIcon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 import { useFilters } from 'utils/useFilters'
 import { AlgorithmFilter, NotAlgorithmFilter } from './filters/algorithm-filter'
@@ -79,7 +78,7 @@ export const FilterControl = ({
         <span className="text-muted-foreground body-overline-small font-bold pt-0.5">
           {filter.label}
         </span>
-        {filter.info ? <FilterInfo info={filter.info} /> : null}
+        {filter.tooltip ? <InfoTooltip {...filter.tooltip} /> : null}
       </div>
       <div className="flex items-center justify-between gap-2">
         <FilterComponent
@@ -109,42 +108,3 @@ export const FilterControl = ({
     </div>
   )
 }
-
-export const FilterInfo = ({
-  info,
-}: {
-  info: {
-    title: string
-    text: string
-    to?: string
-  }
-}) => (
-  <Tooltip.Provider delayDuration={0}>
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button aria-label={translate(STRING.INFO)} size="icon" variant="ghost">
-          <InfoIcon className="w-4 h-4" />
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Content
-        side="bottom"
-        className="flex flex-col gap-4 p-4 max-w-xs"
-      >
-        <p className="whitespace-normal">{info.text}</p>
-        {info.to ? (
-          <Link
-            aria-label=""
-            className={classNames(
-              buttonVariants({ size: 'small', variant: 'ghost' }),
-              'self-end'
-            )}
-            to={info.to}
-          >
-            <span>{info.title}</span>
-            <ChevronRightIcon className="w-4 h-4" />
-          </Link>
-        ) : null}
-      </Tooltip.Content>
-    </Tooltip.Root>
-  </Tooltip.Provider>
-)
diff --git a/ui/src/design-system/components/info-tooltip.tsx b/ui/src/design-system/components/info-tooltip.tsx
new file mode 100644
index 000000000..3bb81df39
--- /dev/null
+++ b/ui/src/design-system/components/info-tooltip.tsx
@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import { ChevronRightIcon, InfoIcon } from 'lucide-react'
+import { Button, buttonVariants, Tooltip } from 'nova-ui-kit'
+import { Link } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
+
+export const InfoTooltip = (props: {
+  text: string
+  link?: {
+    text: string
+    to: string
+  }
+}) => (
+  <Tooltip.Provider delayDuration={0}>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button aria-label={translate(STRING.INFO)} size="icon" variant="ghost">
+          <InfoIcon className="w-4 h-4" />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom" className="p-4 max-w-xs">
+        <Info {...props} />
+      </Tooltip.Content>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+)
+
+export const Info = ({
+  link,
+  text,
+}: {
+  text: string
+  link?: {
+    text: string
+    to: string
+  }
+}) => (
+  <div className="flex flex-col gap-4">
+    <p className="body-small whitespace-normal">{text}</p>
+    {link ? (
+      <Link
+        className={classNames(
+          buttonVariants({ size: 'small', variant: 'ghost' }),
+          '!w-auto self-end'
+        )}
+        to={link.to}
+      >
+        <span>{link.text}</span>
+        <ChevronRightIcon className="w-4 h-4" />
+      </Link>
+    ) : null}
+  </div>
+)
diff --git a/ui/src/design-system/components/input/input.module.scss b/ui/src/design-system/components/input/input.module.scss
index 64c4c91ad..d9097e29c 100644
--- a/ui/src/design-system/components/input/input.module.scss
+++ b/ui/src/design-system/components/input/input.module.scss
@@ -12,14 +12,6 @@
   margin-bottom: 4px;
 }
 
-.label {
-  display: block;
-  @include paragraph-small();
-  font-weight: 600;
-  color: $color-neutral-700;
-  white-space: nowrap;
-}
-
 .error {
   display: block;
   @include paragraph-xx-small();
@@ -32,18 +24,6 @@
   }
 }
 
-.value {
-  display: block;
-  @include paragraph-small();
-  color: $color-neutral-300;
-  white-space: pre-wrap;
-
-  &.link {
-    color: $color-primary-1-600;
-    font-weight: 600;
-  }
-}
-
 .description {
   display: block;
   @include paragraph-small();
diff --git a/ui/src/design-system/components/input/input.tsx b/ui/src/design-system/components/input/input.tsx
index 9b8a283d2..9e45be6dc 100644
--- a/ui/src/design-system/components/input/input.tsx
+++ b/ui/src/design-system/components/input/input.tsx
@@ -57,7 +57,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className={styles.container}>
         <div className={styles.labelRow}>
-          <label className={styles.label} htmlFor={name}>
+          <label className="body-small font-semibold" htmlFor={name}>
             {label}
           </label>
           {hasError ? (
@@ -145,7 +145,7 @@ export const InputValue = ({
   return (
     <InputContent label={label}>
       {to ? (
-        <Link to={to} className={classNames(styles.value, styles.link)}>
+        <Link to={to} className="body-small text-primary font-semibold">
           {valueLabel}
         </Link>
       ) : (
@@ -174,7 +174,7 @@ export const InputContent = ({
   return (
     <div className={styles.container} style={style}>
       <div className={styles.labelRow}>
-        <span className={styles.label}>{label}</span>
+        <span className="body-small font-semibold">{label}</span>
         {hasError ? <span className={styles.error}>{error}</span> : undefined}
       </div>
       <div className={styles.content}>{children}</div>
diff --git a/ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx b/ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx
index ed904eaf0..2222c3226 100644
--- a/ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx
+++ b/ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx
@@ -339,26 +339,28 @@ const DefaultPipelineInfo = ({ project }: { project: ProjectDetails }) => (
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Content side="bottom" className="p-4 space-y-4 max-w-xs">
-        {project.settings.defaultProcessingPipeline ? (
-          <InputValue
-            label="Default processing pipeline"
-            value={project.settings.defaultProcessingPipeline?.name}
-          />
-        ) : (
-          <p className="whitespace-normal">
-            The project has no default processing pipeline configured.
-          </p>
-        )}
-        <Link
-          className={classNames(
-            buttonVariants({ size: 'small', variant: 'outline' }),
-            '!w-auto'
+        <div className="flex flex-col gap-4">
+          {project.settings.defaultProcessingPipeline ? (
+            <InputValue
+              label="Default processing pipeline"
+              value={project.settings.defaultProcessingPipeline?.name}
+            />
+          ) : (
+            <p className="body-small whitespace-normal">
+              The project has no default processing pipeline configured.
+            </p>
           )}
-          to={APP_ROUTES.PROCESSING({ projectId: project.id })}
-        >
-          <span>Configure</span>
-          <ChevronRightIcon className="w-4 h-4" />
-        </Link>
+          <Link
+            className={classNames(
+              buttonVariants({ size: 'small', variant: 'ghost' }),
+              '!w-auto self-end'
+            )}
+            to={APP_ROUTES.PROCESSING({ projectId: project.id })}
+          >
+            <span>{translate(STRING.CONFIGURE)}</span>
+            <ChevronRightIcon className="w-4 h-4" />
+          </Link>
+        </div>
       </Tooltip.Content>
     </Tooltip.Root>
   </Tooltip.Provider>
diff --git a/ui/src/pages/project/pipelines/default-pipeline-badge.tsx b/ui/src/pages/project/pipelines/default-pipeline-badge.tsx
index c8c7a32b5..c51fc825b 100644
--- a/ui/src/pages/project/pipelines/default-pipeline-badge.tsx
+++ b/ui/src/pages/project/pipelines/default-pipeline-badge.tsx
@@ -1,9 +1,8 @@
-import classNames from 'classnames'
 import { Badge } from 'design-system/components/badge/badge'
-import { ChevronRightIcon } from 'lucide-react'
-import { buttonVariants, Tooltip } from 'nova-ui-kit'
-import { Link } from 'react-router-dom'
+import { Info } from 'design-system/components/info-tooltip'
+import { Tooltip } from 'nova-ui-kit'
 import { APP_ROUTES } from 'utils/constants'
+import { STRING, translate } from 'utils/language'
 
 export const DefaultPipelineBadge = ({ projectId }: { projectId: string }) => (
   <Tooltip.Provider delayDuration={0}>
@@ -11,21 +10,14 @@ export const DefaultPipelineBadge = ({ projectId }: { projectId: string }) => (
       <Tooltip.Trigger>
         <Badge label="Default" />
       </Tooltip.Trigger>
-      <Tooltip.Content side="bottom" className="p-4 space-y-4 max-w-xs">
-        <p className="whitespace-normal">
-          This is the default pipeline used for processing images in this
-          project.
-        </p>
-        <Link
-          className={classNames(
-            buttonVariants({ size: 'small', variant: 'outline' }),
-            '!w-auto'
-          )}
-          to={APP_ROUTES.PROCESSING({ projectId: projectId })}
-        >
-          <span>Configure</span>
-          <ChevronRightIcon className="w-4 h-4" />
-        </Link>
+      <Tooltip.Content side="bottom" className="p-4 max-w-xs">
+        <Info
+          text="This is the default pipeline used for processing images in this project."
+          link={{
+            text: translate(STRING.CONFIGURE),
+            to: APP_ROUTES.PROCESSING({ projectId: projectId }),
+          }}
+        />
       </Tooltip.Content>
     </Tooltip.Root>
   </Tooltip.Provider>
diff --git a/ui/src/pages/project/sidebar/sidebar.tsx b/ui/src/pages/project/sidebar/sidebar.tsx
index 54fa02fbb..943e9ef37 100644
--- a/ui/src/pages/project/sidebar/sidebar.tsx
+++ b/ui/src/pages/project/sidebar/sidebar.tsx
@@ -131,7 +131,7 @@ export const DraftBadge = ({ project }: { project: ProjectDetails }) => (
             )}
             to={APP_ROUTES.GENERAL({ projectId: project.id })}
           >
-            <span>Configure</span>
+            <span>{translate(STRING.CONFIGURE)}</span>
             <ChevronRightIcon className="w-4 h-4" />
           </Link>
         ) : null}
diff --git a/ui/src/pages/session-details/playback/playback.tsx b/ui/src/pages/session-details/playback/playback.tsx
index 613747672..acbdacaf7 100644
--- a/ui/src/pages/session-details/playback/playback.tsx
+++ b/ui/src/pages/session-details/playback/playback.tsx
@@ -1,4 +1,4 @@
-import { DefaultFiltersPopover } from 'components/filtering/default-filter-control'
+import { DefaultFiltersTooltip } from 'components/filtering/default-filter-control'
 import { LicenseInfo } from 'components/license-info/license-info'
 import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
@@ -88,7 +88,7 @@ export const Playback = ({
                 theme={CheckboxTheme.Neutral}
               />
               {project ? (
-                <DefaultFiltersPopover
+                <DefaultFiltersTooltip
                   className="text-neutral-200 hover:bg-transparent"
                   project={project}
                 />
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index 32ba70153..00f15a267 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -270,6 +270,7 @@ export enum STRING {
   APPLY_ID,
   BACK_TO_LOGIN,
   CLOSE,
+  CONFIGURE,
   CONNECTED,
   CONNECTING,
   EXTERNAL_RESOURCES,
@@ -624,6 +625,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.APPLY_ID]: 'Apply ID',
   [STRING.BACK_TO_LOGIN]: 'Back to login',
   [STRING.CLOSE]: 'Close',
+  [STRING.CONFIGURE]: 'Configure',
   [STRING.CONNECTED]: 'Connected',
   [STRING.CONNECTING]: 'Connecting...',
   [STRING.EXTERNAL_RESOURCES]: 'External resources',
diff --git a/ui/src/utils/useFilters.ts b/ui/src/utils/useFilters.ts
index fab2e9279..656e5c6f0 100644
--- a/ui/src/utils/useFilters.ts
+++ b/ui/src/utils/useFilters.ts
@@ -7,10 +7,12 @@ import { SEARCH_PARAM_KEY_PAGE } from './usePagination'
 interface FilterConfig {
   label: string
   field: string
-  info?: {
-    title: string
+  tooltip?: {
     text: string
-    to?: string
+    link?: {
+      text: string
+      to: string
+    }
   }
   validate?: (
     value?: string,
@@ -22,46 +24,56 @@ export const AVAILABLE_FILTERS = (projectId: string): FilterConfig[] => [
   {
     label: 'Include algorithm',
     field: 'algorithm',
-    info: {
-      title: translate(STRING.NAV_ITEM_ALGORITHMS),
+    tooltip: {
       text: translate(STRING.TOOLTIP_ALGORITHM),
-      to: APP_ROUTES.ALGORITHMS({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_ALGORITHMS),
+        to: APP_ROUTES.ALGORITHMS({ projectId }),
+      },
     },
   },
   {
     label: translate(STRING.FIELD_LABEL_CAPTURE_SET),
     field: 'collection', // This is for viewing occurrences by capture set. @TODO: Can we update this key to "capture_set_id" to streamline?
-    info: {
-      title: translate(STRING.NAV_ITEM_CAPTURE_SETS),
+    tooltip: {
       text: translate(STRING.TOOLTIP_CAPTURE_SET),
-      to: APP_ROUTES.CAPTURE_SETS({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_CAPTURE_SETS),
+        to: APP_ROUTES.CAPTURE_SETS({ projectId }),
+      },
     },
   },
   {
     label: translate(STRING.FIELD_LABEL_CAPTURE_SET),
     field: 'source_image_collection', // This is for viewing jobs by capture set. @TODO: Can we update this key to "capture_set_id" to streamline?
-    info: {
-      title: translate(STRING.NAV_ITEM_CAPTURE_SETS),
+    tooltip: {
       text: translate(STRING.TOOLTIP_CAPTURE_SET),
-      to: APP_ROUTES.CAPTURE_SETS({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_CAPTURE_SETS),
+        to: APP_ROUTES.CAPTURE_SETS({ projectId }),
+      },
     },
   },
   {
     label: translate(STRING.FIELD_LABEL_CAPTURE_SET),
     field: 'collections', // This is for viewing captures by capture set. @TODO: Can we update this key to "capture_set_id" to streamline?
-    info: {
-      title: translate(STRING.NAV_ITEM_CAPTURE_SETS),
+    tooltip: {
       text: translate(STRING.TOOLTIP_CAPTURE_SET),
-      to: APP_ROUTES.CAPTURE_SETS({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_CAPTURE_SETS),
+        to: APP_ROUTES.CAPTURE_SETS({ projectId }),
+      },
     },
   },
   {
     label: 'Station',
     field: 'deployment',
-    info: {
-      title: translate(STRING.NAV_ITEM_DEPLOYMENTS),
+    tooltip: {
       text: translate(STRING.TOOLTIP_DEPLOYMENT),
-      to: APP_ROUTES.DEPLOYMENTS({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_DEPLOYMENTS),
+        to: APP_ROUTES.DEPLOYMENTS({ projectId }),
+      },
     },
   },
   {
@@ -105,37 +117,45 @@ export const AVAILABLE_FILTERS = (projectId: string): FilterConfig[] => [
   {
     label: translate(STRING.FIELD_LABEL_CAPTURE),
     field: 'detections__source_image', // This is for viewing occurrences by capture. @TODO: Can we update this key to "capture_id" to streamline?
-    info: {
-      title: translate(STRING.NAV_ITEM_CAPTURES),
+    tooltip: {
       text: translate(STRING.TOOLTIP_CAPTURE),
-      to: APP_ROUTES.CAPTURES({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_CAPTURES),
+        to: APP_ROUTES.CAPTURES({ projectId }),
+      },
     },
   },
   {
     label: 'Session',
     field: 'event',
-    info: {
-      title: translate(STRING.NAV_ITEM_SESSIONS),
+    tooltip: {
       text: translate(STRING.TOOLTIP_SESSION),
-      to: APP_ROUTES.SESSIONS({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_SESSIONS),
+        to: APP_ROUTES.SESSIONS({ projectId }),
+      },
     },
   },
   {
     label: 'Pipeline',
     field: 'pipeline',
-    info: {
-      title: translate(STRING.NAV_ITEM_PIPELINES),
+    tooltip: {
       text: translate(STRING.TOOLTIP_PIPELINE),
-      to: APP_ROUTES.PIPELINES({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_PIPELINES),
+        to: APP_ROUTES.PIPELINES({ projectId }),
+      },
     },
   },
   {
     label: 'Exclude algorithm',
     field: 'not_algorithm',
-    info: {
-      title: translate(STRING.NAV_ITEM_ALGORITHMS),
+    tooltip: {
       text: translate(STRING.TOOLTIP_ALGORITHM),
-      to: APP_ROUTES.ALGORITHMS({ projectId }),
+      link: {
+        text: translate(STRING.NAV_ITEM_ALGORITHMS),
+        to: APP_ROUTES.ALGORITHMS({ projectId }),
+      },
     },
   },
   {

From 23b7a3138f74041b26fc107c4b405d23c52afcaa Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 10:40:53 +0100
Subject: [PATCH 06/26] feat: add input content tooltips

---
 .../design-system/components/input/input.tsx  | 28 ++++++++++++++++---
 .../section-general/section-general.tsx       | 17 +++++++++++
 .../section-source-images.tsx                 | 10 +++++++
 .../deployment-details-info.tsx               | 17 +++++++++++
 .../job-details-form/job-details-form.tsx     | 19 +++++++++++++
 .../details-form/export-details-form.tsx      | 12 ++++++++
 6 files changed, 99 insertions(+), 4 deletions(-)

diff --git a/ui/src/design-system/components/input/input.tsx b/ui/src/design-system/components/input/input.tsx
index 9e45be6dc..c853bf760 100644
--- a/ui/src/design-system/components/input/input.tsx
+++ b/ui/src/design-system/components/input/input.tsx
@@ -14,6 +14,7 @@ import {
 import { Link } from 'react-router-dom'
 import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { STRING, translate } from 'utils/language'
+import { InfoTooltip } from '../info-tooltip'
 import { BasicTooltip } from '../tooltip/basic-tooltip'
 import styles from './input.module.scss'
 
@@ -121,10 +122,18 @@ export const InputValue = ({
   label,
   value,
   to,
+  tooltip,
 }: {
   label: string
   value?: string | number | Date
   to?: string
+  tooltip?: {
+    text: string
+    link?: {
+      text: string
+      to: string
+    }
+  }
 }) => {
   const valueLabel = useMemo(() => {
     if (value === undefined || value === '') {
@@ -143,7 +152,7 @@ export const InputValue = ({
   }, [value])
 
   return (
-    <InputContent label={label}>
+    <InputContent label={label} tooltip={tooltip}>
       {to ? (
         <Link to={to} className="body-small text-primary font-semibold">
           {valueLabel}
@@ -156,17 +165,25 @@ export const InputValue = ({
 }
 
 export const InputContent = ({
+  children,
   description,
   error,
   label,
   style,
-  children,
+  tooltip,
 }: {
+  children?: ReactNode
   description?: string
   error?: string
   label: string
   style?: CSSProperties
-  children?: ReactNode
+  tooltip?: {
+    text: string
+    link?: {
+      text: string
+      to: string
+    }
+  }
 }) => {
   const hasError = !!error?.length
   const hasDescription = !!description?.length
@@ -174,7 +191,10 @@ export const InputContent = ({
   return (
     <div className={styles.container} style={style}>
       <div className={styles.labelRow}>
-        <span className="body-small font-semibold">{label}</span>
+        <div className="flex items-center gap-1">
+          <span className="pt-0.5 body-small font-semibold">{label}</span>
+          {tooltip ? <InfoTooltip {...tooltip} /> : null}
+        </div>
         {hasError ? <span className={styles.error}>{error}</span> : undefined}
       </div>
       <div className={styles.content}>{children}</div>
diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx
index 5b2570dbd..1b4b15977 100644
--- a/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx
+++ b/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx
@@ -17,6 +17,8 @@ import _ from 'lodash'
 import { Button } from 'nova-ui-kit'
 import { useContext } from 'react'
 import { useForm } from 'react-hook-form'
+import { useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
 import { FormContext } from 'utils/formContext/formContext'
 import { isEmpty } from 'utils/isEmpty/isEmpty'
 import { STRING, translate } from 'utils/language'
@@ -41,6 +43,7 @@ export const SectionGeneral = ({
   deployment: DeploymentDetails
   onNext: () => void
 }) => {
+  const { projectId } = useParams()
   const { formSectionRef, formState, setFormSectionValues } =
     useContext(FormContext)
 
@@ -76,6 +79,13 @@ export const SectionGeneral = ({
                 description={config[field.name].description}
                 label={config[field.name].label}
                 error={fieldState.error?.message}
+                tooltip={{
+                  text: translate(STRING.TOOLTIP_SITE),
+                  link: {
+                    text: translate(STRING.NAV_ITEM_SITES),
+                    to: APP_ROUTES.SITES({ projectId: projectId as string }),
+                  },
+                }}
               >
                 <EntityPicker
                   collection={API_ROUTES.SITES}
@@ -94,6 +104,13 @@ export const SectionGeneral = ({
                 description={config[field.name].description}
                 label={config[field.name].label}
                 error={fieldState.error?.message}
+                tooltip={{
+                  text: translate(STRING.TOOLTIP_DEVICE),
+                  link: {
+                    text: translate(STRING.NAV_ITEM_DEVICES),
+                    to: APP_ROUTES.DEVICES({ projectId: projectId as string }),
+                  },
+                }}
               >
                 <EntityPicker
                   collection={API_ROUTES.DEVICES}
diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx
index 8e6bd753d..e2dd7cd24 100644
--- a/ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx
+++ b/ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx
@@ -17,6 +17,8 @@ import { Button } from 'nova-ui-kit'
 import { ConnectionStatus } from 'pages/project/storage/connection-status'
 import { useContext, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import { useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
 import { FormContext } from 'utils/formContext/formContext'
 import { isEmpty } from 'utils/isEmpty/isEmpty'
 import { STRING, translate } from 'utils/language'
@@ -37,6 +39,7 @@ export const SectionSourceImages = ({
   deployment: DeploymentDetails
   onBack: () => void
 }) => {
+  const { projectId } = useParams()
   const { formSectionRef, formState, setFormSectionValues } =
     useContext(FormContext)
 
@@ -69,6 +72,13 @@ export const SectionSourceImages = ({
                 description={config[field.name].description}
                 label={config[field.name].label}
                 error={fieldState.error?.message}
+                tooltip={{
+                  text: translate(STRING.TOOLTIP_STORAGE),
+                  link: {
+                    text: translate(STRING.NAV_ITEM_STORAGE),
+                    to: APP_ROUTES.STORAGE({ projectId: projectId as string }),
+                  },
+                }}
               >
                 <EntityPicker
                   collection={API_ROUTES.STORAGE}
diff --git a/ui/src/pages/deployment-details/deployment-details-info.tsx b/ui/src/pages/deployment-details/deployment-details-info.tsx
index e2dde0daf..dd934f480 100644
--- a/ui/src/pages/deployment-details/deployment-details-info.tsx
+++ b/ui/src/pages/deployment-details/deployment-details-info.tsx
@@ -7,6 +7,8 @@ import { MultiMarkerMap } from 'design-system/map/multi-marker-map/multi-marker-
 import { MarkerPosition } from 'design-system/map/types'
 import { Button } from 'nova-ui-kit'
 import { useMemo } from 'react'
+import { useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 import styles from './styles.module.scss'
 
@@ -19,6 +21,7 @@ export const DeploymentDetailsInfo = ({
   title: string
   onEditClick: () => void
 }) => {
+  const { projectId } = useParams()
   const markers = useMemo(
     () => [
       {
@@ -55,10 +58,24 @@ export const DeploymentDetailsInfo = ({
             <InputValue
               label={translate(STRING.FIELD_LABEL_SITE)}
               value={deployment.site?.name}
+              tooltip={{
+                text: translate(STRING.TOOLTIP_SITE),
+                link: {
+                  text: translate(STRING.NAV_ITEM_SITES),
+                  to: APP_ROUTES.SITES({ projectId: projectId as string }),
+                },
+              }}
             />
             <InputValue
               label={translate(STRING.FIELD_LABEL_DEVICE)}
               value={deployment.device?.name}
+              tooltip={{
+                text: translate(STRING.TOOLTIP_DEVICE),
+                link: {
+                  text: translate(STRING.NAV_ITEM_DEVICES),
+                  to: APP_ROUTES.DEVICES({ projectId: projectId as string }),
+                },
+              }}
             />
           </FormRow>
           {deployment.image && (
diff --git a/ui/src/pages/job-details/job-details-form/job-details-form.tsx b/ui/src/pages/job-details/job-details-form/job-details-form.tsx
index 2c86640fe..195777afa 100644
--- a/ui/src/pages/job-details/job-details-form/job-details-form.tsx
+++ b/ui/src/pages/job-details/job-details-form/job-details-form.tsx
@@ -15,6 +15,7 @@ import { InputContent } from 'design-system/components/input/input'
 import { EntityPicker } from 'design-system/components/select/entity-picker'
 import { useForm } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 import { useFormError } from 'utils/useFormError'
 
@@ -131,6 +132,15 @@ export const JobDetailsForm = ({
                     : config[field.name].label
                 }
                 error={fieldState.error?.message}
+                tooltip={{
+                  text: translate(STRING.TOOLTIP_CAPTURE_SET),
+                  link: {
+                    text: translate(STRING.NAV_ITEM_CAPTURE_SETS),
+                    to: APP_ROUTES.CAPTURE_SETS({
+                      projectId: projectId as string,
+                    }),
+                  },
+                }}
               >
                 <EntityPicker
                   collection={API_ROUTES.CAPTURE_SETS}
@@ -153,6 +163,15 @@ export const JobDetailsForm = ({
                     : config[field.name].label
                 }
                 error={fieldState.error?.message}
+                tooltip={{
+                  text: translate(STRING.TOOLTIP_PIPELINE),
+                  link: {
+                    text: translate(STRING.NAV_ITEM_PIPELINES),
+                    to: APP_ROUTES.PIPELINES({
+                      projectId: projectId as string,
+                    }),
+                  },
+                }}
               >
                 <EntityPicker
                   collection={API_ROUTES.PIPELINES}
diff --git a/ui/src/pages/project/entities/details-form/export-details-form.tsx b/ui/src/pages/project/entities/details-form/export-details-form.tsx
index 1127bc450..55a625471 100644
--- a/ui/src/pages/project/entities/details-form/export-details-form.tsx
+++ b/ui/src/pages/project/entities/details-form/export-details-form.tsx
@@ -12,6 +12,8 @@ import { InputContent } from 'design-system/components/input/input'
 import { EntityPicker } from 'design-system/components/select/entity-picker'
 import { Select } from 'nova-ui-kit'
 import { useForm } from 'react-hook-form'
+import { useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 import { useFormError } from 'utils/useFormError'
 import { DetailsFormProps, FormValues } from './types'
@@ -39,6 +41,7 @@ export const ExportDetailsForm = ({
   isSuccess,
   onSubmit,
 }: DetailsFormProps) => {
+  const { projectId } = useParams()
   const {
     control,
     handleSubmit,
@@ -100,6 +103,15 @@ export const ExportDetailsForm = ({
                   : config[field.name].label
               }
               error={fieldState.error?.message}
+              tooltip={{
+                text: translate(STRING.TOOLTIP_CAPTURE_SET),
+                link: {
+                  text: translate(STRING.NAV_ITEM_CAPTURE_SETS),
+                  to: APP_ROUTES.CAPTURE_SETS({
+                    projectId: projectId as string,
+                  }),
+                },
+              }}
             >
               <EntityPicker
                 collection={API_ROUTES.CAPTURE_SETS}

From f5010cf389257be7f1ecb0112316ece21402759e Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 11:05:54 +0100
Subject: [PATCH 07/26] layout: streamline sort control order

---
 .../table/column-settings/column-settings.tsx          |  2 +-
 ui/src/pages/captures/captures.tsx                     | 10 +++++-----
 ui/src/pages/deployments/deployments.tsx               |  2 +-
 ui/src/pages/occurrences/occurrences.tsx               | 10 +++++-----
 ui/src/pages/taxa-list-details/taxa-list-details.tsx   |  6 +++---
 ui/src/pages/taxa-lists/taxa-lists.tsx                 | 10 +++++-----
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/ui/src/design-system/components/table/column-settings/column-settings.tsx b/ui/src/design-system/components/table/column-settings/column-settings.tsx
index dac4c1030..bccb270cd 100644
--- a/ui/src/design-system/components/table/column-settings/column-settings.tsx
+++ b/ui/src/design-system/components/table/column-settings/column-settings.tsx
@@ -23,7 +23,7 @@ export const ColumnSettings = ({
           aria-label={translate(STRING.TABLE_COLUMNS)}
           className="shrink-0"
           size="icon"
-          variant="ghost"
+          variant="outline"
         >
           <Columns3CogIcon className="w-4 h-4" />
         </Button>
diff --git a/ui/src/pages/captures/captures.tsx b/ui/src/pages/captures/captures.tsx
index cef7983f7..3664284ea 100644
--- a/ui/src/pages/captures/captures.tsx
+++ b/ui/src/pages/captures/captures.tsx
@@ -89,17 +89,17 @@ export const Captures = () => {
             value={selectedView}
             onValueChange={setSelectedView}
           />
-          <SortControl
-            columns={columns(projectId as string)}
-            setSort={setSort}
-            sort={sort}
-          />
           {showUpload ? (
             <UploadImagesDialog
               isOpen={isUploadOpen}
               setIsOpen={setIsUploadOpen}
             />
           ) : null}
+          <SortControl
+            columns={columns(projectId as string)}
+            setSort={setSort}
+            sort={sort}
+          />
           <ColumnSettings
             columns={columns(projectId as string)}
             columnSettings={columnSettings}
diff --git a/ui/src/pages/deployments/deployments.tsx b/ui/src/pages/deployments/deployments.tsx
index b76c61780..da5df2e57 100644
--- a/ui/src/pages/deployments/deployments.tsx
+++ b/ui/src/pages/deployments/deployments.tsx
@@ -47,12 +47,12 @@ export const Deployments = () => {
         isFetching={isFetching}
         tooltip={translate(STRING.TOOLTIP_DEPLOYMENT)}
       >
+        {canCreate ? <NewDeploymentDialog /> : null}
         <SortControl
           columns={columns(projectId as string)}
           setSort={setSort}
           sort={sort}
         />
-        {canCreate ? <NewDeploymentDialog /> : null}
         <ColumnSettings
           columns={columns(projectId as string)}
           columnSettings={columnSettings}
diff --git a/ui/src/pages/occurrences/occurrences.tsx b/ui/src/pages/occurrences/occurrences.tsx
index a82eb0558..b531626ab 100644
--- a/ui/src/pages/occurrences/occurrences.tsx
+++ b/ui/src/pages/occurrences/occurrences.tsx
@@ -144,11 +144,6 @@ export const Occurrences = () => {
               value={selectedView}
               onValueChange={setSelectedView}
             />
-            <SortControl
-              columns={columns(projectId as string)}
-              setSort={setSort}
-              sort={sort}
-            />
             <Link
               className={buttonVariants({ size: 'small', variant: 'outline' })}
               to={APP_ROUTES.EXPORTS({ projectId: projectId as string })}
@@ -156,6 +151,11 @@ export const Occurrences = () => {
               <DownloadIcon className="w-4 h-4" />
               <span>Export </span>
             </Link>
+            <SortControl
+              columns={columns(projectId as string)}
+              setSort={setSort}
+              sort={sort}
+            />
             <ColumnSettings
               columns={columns(projectId as string)}
               columnSettings={columnSettings}
diff --git a/ui/src/pages/taxa-list-details/taxa-list-details.tsx b/ui/src/pages/taxa-list-details/taxa-list-details.tsx
index 172fb61a5..93fb6f825 100644
--- a/ui/src/pages/taxa-list-details/taxa-list-details.tsx
+++ b/ui/src/pages/taxa-list-details/taxa-list-details.tsx
@@ -59,6 +59,9 @@ export const TaxaListDetails = () => {
         })}
         title={taxaList?.name ?? `${translate(STRING.LOADING_DATA)}...`}
       >
+        {taxaList?.canUpdate ? (
+          <AddTaxaListTaxonPopover taxaListId={id as string} />
+        ) : null}
         <SortControl
           columns={columns({
             canUpdate: taxaList?.canUpdate,
@@ -68,9 +71,6 @@ export const TaxaListDetails = () => {
           setSort={setSort}
           sort={sort}
         />
-        {taxaList?.canUpdate ? (
-          <AddTaxaListTaxonPopover taxaListId={id as string} />
-        ) : null}
       </PageHeader>
       <Table
         columns={columns({
diff --git a/ui/src/pages/taxa-lists/taxa-lists.tsx b/ui/src/pages/taxa-lists/taxa-lists.tsx
index fe9f41e22..0b1626061 100644
--- a/ui/src/pages/taxa-lists/taxa-lists.tsx
+++ b/ui/src/pages/taxa-lists/taxa-lists.tsx
@@ -35,11 +35,6 @@ export const TaxaLists = () => {
         isLoading={isLoading}
         isFetching={isFetching}
       >
-        <SortControl
-          columns={columns(projectId as string)}
-          setSort={setSort}
-          sort={sort}
-        />
         {canCreate && (
           <NewEntityDialog
             collection={API_ROUTES.TAXA_LISTS}
@@ -47,6 +42,11 @@ export const TaxaLists = () => {
             type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
           />
         )}
+        <SortControl
+          columns={columns(projectId as string)}
+          setSort={setSort}
+          sort={sort}
+        />
       </PageHeader>
       <Table
         columns={columns(projectId as string)}

From 240c9a507a51e12233b4a3492bc2c568eb9041ae Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 11:06:33 +0100
Subject: [PATCH 08/26] fix: hide pipeline stages from detail view

---
 ui/src/pages/pipeline-details/pipeline-details-dialog.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/ui/src/pages/pipeline-details/pipeline-details-dialog.tsx b/ui/src/pages/pipeline-details/pipeline-details-dialog.tsx
index 9377cfa47..c346d55da 100644
--- a/ui/src/pages/pipeline-details/pipeline-details-dialog.tsx
+++ b/ui/src/pages/pipeline-details/pipeline-details-dialog.tsx
@@ -9,7 +9,6 @@ import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 import { PipelineAlgorithms } from './pipeline-algorithms'
-import { PipelineStages } from './pipeline-stages'
 import styles from './styles.module.scss'
 
 export const PipelineDetailsDialog = ({ id }: { id: string }) => {
@@ -83,11 +82,6 @@ const PipelineDetailsContent = ({ pipeline }: { pipeline: Pipeline }) => (
         />
       </FormRow>
     </FormSection>
-    {pipeline.stages.length > 0 && (
-      <FormSection title={translate(STRING.STAGES)}>
-        <PipelineStages pipeline={pipeline} />
-      </FormSection>
-    )}
     {pipeline.algorithms.length > 0 && (
       <FormSection title={translate(STRING.ALGORITHMS)}>
         <div className={styles.tableContainer}>

From e0956a611cd87d1d617a4590b828f8c5a41f3249 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 11:08:27 +0100
Subject: [PATCH 09/26] feat: add algorithm description to table view

---
 ui/src/pages/project/algorithms/algorithms-columns.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ui/src/pages/project/algorithms/algorithms-columns.tsx b/ui/src/pages/project/algorithms/algorithms-columns.tsx
index c9d260bf0..d9299292c 100644
--- a/ui/src/pages/project/algorithms/algorithms-columns.tsx
+++ b/ui/src/pages/project/algorithms/algorithms-columns.tsx
@@ -33,6 +33,16 @@ export const columns: (projectId: string) => TableColumn<Algorithm>[] = (
     sortField: 'task_type',
     renderCell: (item: Algorithm) => <BasicTableCell value={item.taskType} />,
   },
+  {
+    id: 'description',
+    name: translate(STRING.FIELD_LABEL_DESCRIPTION),
+    renderCell: (item: Algorithm) => (
+      <BasicTableCell
+        style={{ width: '320px', whiteSpace: 'normal' }}
+        value={item.description}
+      />
+    ),
+  },
   {
     id: 'created-at',
     name: translate(STRING.FIELD_LABEL_CREATED_AT),

From c1574111ca9d323b932df069b85b0866b712814b Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 11:11:15 +0100
Subject: [PATCH 10/26] fix: pass project ID with processing service details
 request

---
 .../processing-services/useProcessingServiceDetails.ts     | 7 ++++---
 .../processing-service-details-dialog.tsx                  | 6 ++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts b/ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts
index bda9b3c78..a437e229f 100644
--- a/ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts
+++ b/ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts
@@ -10,7 +10,8 @@ const convertServerRecord = (record: ServerProcessingService) =>
   new ProcessingService(record)
 
 export const useProcessingServiceDetails = (
-  processingServiceId: string
+  id: string,
+  projectId: string
 ): {
   processingService?: ProcessingService
   isLoading: boolean
@@ -19,8 +20,8 @@ export const useProcessingServiceDetails = (
 } => {
   const { data, isLoading, isFetching, error } =
     useAuthorizedQuery<ProcessingService>({
-      queryKey: [API_ROUTES.PROCESSING_SERVICES, processingServiceId],
-      url: `${API_URL}/${API_ROUTES.PROCESSING_SERVICES}/${processingServiceId}`,
+      queryKey: [API_ROUTES.PROCESSING_SERVICES, id],
+      url: `${API_URL}/${API_ROUTES.PROCESSING_SERVICES}/${id}/?project_id=${projectId}`,
     })
 
   const processingService = useMemo(
diff --git a/ui/src/pages/processing-service-details/processing-service-details-dialog.tsx b/ui/src/pages/processing-service-details/processing-service-details-dialog.tsx
index 1f8567bd4..7f4d97f84 100644
--- a/ui/src/pages/processing-service-details/processing-service-details-dialog.tsx
+++ b/ui/src/pages/processing-service-details/processing-service-details-dialog.tsx
@@ -14,8 +14,10 @@ import styles from './styles.module.scss'
 export const ProcessingServiceDetailsDialog = ({ id }: { id: string }) => {
   const navigate = useNavigate()
   const { projectId } = useParams()
-  const { processingService, isLoading, error } =
-    useProcessingServiceDetails(id)
+  const { processingService, isLoading, error } = useProcessingServiceDetails(
+    id,
+    projectId as string
+  )
 
   return (
     <Dialog.Root

From 37f733c52af8afd53b87130ebb23436c1beb7c03 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 11:30:32 +0100
Subject: [PATCH 11/26] layout: cleanup processing views

---
 .../algorithm-details-dialog.tsx              | 87 ++++++++++---------
 .../pipeline-details-dialog.tsx               |  8 +-
 .../processing-service-details-dialog.tsx     | 15 ++--
 ui/src/pages/project/pipelines/pipelines.tsx  | 19 +++-
 .../processing-services-columns.tsx           |  9 --
 5 files changed, 76 insertions(+), 62 deletions(-)

diff --git a/ui/src/pages/algorithm-details/algorithm-details-dialog.tsx b/ui/src/pages/algorithm-details/algorithm-details-dialog.tsx
index b5543aeb8..d8507dd3f 100644
--- a/ui/src/pages/algorithm-details/algorithm-details-dialog.tsx
+++ b/ui/src/pages/algorithm-details/algorithm-details-dialog.tsx
@@ -58,28 +58,29 @@ const AlgorithmDetailsContent = ({ algorithm }: { algorithm: Algorithm }) => (
           value={algorithm.id}
         />
         <InputValue
-          label={translate(STRING.FIELD_LABEL_NAME)}
-          value={algorithm.name}
+          label={translate(STRING.FIELD_LABEL_VERSION)}
+          value={algorithm.version}
         />
       </FormRow>
       <FormRow>
         <InputValue
-          label={translate(STRING.FIELD_LABEL_VERSION)}
-          value={algorithm.version}
+          label={translate(STRING.FIELD_LABEL_NAME)}
+          value={algorithm.name}
         />
         <InputValue
-          label={translate(STRING.FIELD_LABEL_TASK_TYPE)}
-          value={algorithm.taskType}
+          label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
+          value={algorithm.description}
         />
       </FormRow>
       <FormRow>
         <InputValue
-          label={translate(STRING.FIELD_LABEL_CATEGORY_COUNT)}
-          value={algorithm.categoryCount}
+          label={translate(STRING.FIELD_LABEL_TASK_TYPE)}
+          value={algorithm.taskType}
         />
+
         <InputValue
-          label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
-          value={algorithm.description}
+          label={translate(STRING.FIELD_LABEL_CATEGORY_COUNT)}
+          value={algorithm.categoryCount}
         />
       </FormRow>
       <FormRow>
@@ -93,37 +94,39 @@ const AlgorithmDetailsContent = ({ algorithm }: { algorithm: Algorithm }) => (
         />
       </FormRow>
     </FormSection>
-    <FormSection title={translate(STRING.EXTERNAL_RESOURCES)}>
-      <div className="grid grid-cols-2 gap-4">
-        {algorithm.uri && (
-          <a
-            className={buttonVariants({
-              size: 'small',
-              variant: 'outline',
-            })}
-            href={algorithm.uri}
-            rel="noreferrer"
-            target="_blank"
-          >
-            <span>{translate(STRING.FIELD_LABEL_ALGORITHM_URI)}</span>
-            <ExternalLinkIcon className="w-4 h-4" />
-          </a>
-        )}
-        {algorithm.categoryMapURI && (
-          <a
-            className={buttonVariants({
-              size: 'small',
-              variant: 'outline',
-            })}
-            href={algorithm.categoryMapURI}
-            rel="noreferrer"
-            target="_blank"
-          >
-            <span>{translate(STRING.FIELD_LABEL_CATEGORY_MAP_DETAILS)}</span>
-            <ExternalLinkIcon className="w-4 h-4" />
-          </a>
-        )}
-      </div>
-    </FormSection>
+    {algorithm.uri || algorithm.categoryMapURI ? (
+      <FormSection title={translate(STRING.EXTERNAL_RESOURCES)}>
+        <div className="flex flex-col items-start gap-3">
+          {algorithm.uri && (
+            <a
+              className={buttonVariants({
+                size: 'small',
+                variant: 'outline',
+              })}
+              href={algorithm.uri}
+              rel="noreferrer"
+              target="_blank"
+            >
+              <span>{translate(STRING.FIELD_LABEL_ALGORITHM_URI)}</span>
+              <ExternalLinkIcon className="w-4 h-4" />
+            </a>
+          )}
+          {algorithm.categoryMapURI && (
+            <a
+              className={buttonVariants({
+                size: 'small',
+                variant: 'outline',
+              })}
+              href={algorithm.categoryMapURI}
+              rel="noreferrer"
+              target="_blank"
+            >
+              <span>{translate(STRING.FIELD_LABEL_CATEGORY_MAP_DETAILS)}</span>
+              <ExternalLinkIcon className="w-4 h-4" />
+            </a>
+          )}
+        </div>
+      </FormSection>
+    ) : null}
   </>
 )
diff --git a/ui/src/pages/pipeline-details/pipeline-details-dialog.tsx b/ui/src/pages/pipeline-details/pipeline-details-dialog.tsx
index c346d55da..36e129a07 100644
--- a/ui/src/pages/pipeline-details/pipeline-details-dialog.tsx
+++ b/ui/src/pages/pipeline-details/pipeline-details-dialog.tsx
@@ -57,14 +57,14 @@ const PipelineDetailsContent = ({ pipeline }: { pipeline: Pipeline }) => (
           value={pipeline.id}
         />
         <InputValue
-          label={translate(STRING.FIELD_LABEL_NAME)}
-          value={pipeline.name}
+          label={translate(STRING.FIELD_LABEL_VERSION)}
+          value={pipeline.versionLabel}
         />
       </FormRow>
       <FormRow>
         <InputValue
-          label={translate(STRING.FIELD_LABEL_VERSION)}
-          value={pipeline.versionLabel}
+          label={translate(STRING.FIELD_LABEL_NAME)}
+          value={pipeline.name}
         />
         <InputValue
           label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
diff --git a/ui/src/pages/processing-service-details/processing-service-details-dialog.tsx b/ui/src/pages/processing-service-details/processing-service-details-dialog.tsx
index 7f4d97f84..3aafebce7 100644
--- a/ui/src/pages/processing-service-details/processing-service-details-dialog.tsx
+++ b/ui/src/pages/processing-service-details/processing-service-details-dialog.tsx
@@ -69,22 +69,27 @@ const ProcessingServiceDetailsContent = ({
           label={translate(STRING.FIELD_LABEL_ID)}
           value={processingService.id}
         />
+      </FormRow>
+      <FormRow>
         <InputValue
           label={translate(STRING.FIELD_LABEL_NAME)}
           value={processingService.name}
         />
-      </FormRow>
-      <FormRow>
         <InputValue
           label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
           value={processingService.description}
         />
+      </FormRow>
+      <FormRow>
+        <InputValue
+          label={translate(STRING.FIELD_LABEL_ENDPOINT)}
+          value={processingService.endpointUrl}
+        />
         <InputValue
-          label={translate(STRING.FIELD_LABEL_LAST_CHECKED)}
-          value={processingService.lastChecked}
+          label={translate(STRING.FIELD_LABEL_NUM_PIPELINES_REGISTERED)}
+          value={processingService.numPiplinesAdded}
         />
       </FormRow>
-
       <FormRow>
         <InputValue
           label={translate(STRING.FIELD_LABEL_CREATED_AT)}
diff --git a/ui/src/pages/project/pipelines/pipelines.tsx b/ui/src/pages/project/pipelines/pipelines.tsx
index 1821bd834..b50333b69 100644
--- a/ui/src/pages/project/pipelines/pipelines.tsx
+++ b/ui/src/pages/project/pipelines/pipelines.tsx
@@ -2,17 +2,26 @@ import { usePipelines } from 'data-services/hooks/pipelines/usePipelines'
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
 import { PageHeader } from 'design-system/components/page-header/page-header'
 import { PaginationBar } from 'design-system/components/pagination-bar/pagination-bar'
+import { ColumnSettings } from 'design-system/components/table/column-settings/column-settings'
 import { Table } from 'design-system/components/table/table/table'
 import { TableSortSettings } from 'design-system/components/table/types'
 import { PipelineDetailsDialog } from 'pages/pipeline-details/pipeline-details-dialog'
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { STRING, translate } from 'utils/language'
+import { useColumnSettings } from 'utils/useColumnSettings'
 import { usePagination } from 'utils/usePagination'
 import { columns } from './pipelines-columns'
 
 export const Pipelines = () => {
   const { projectId, id } = useParams()
+  const { columnSettings, setColumnSettings } = useColumnSettings('pipelines', {
+    id: true,
+    name: true,
+    description: true,
+    'created-at': true,
+    'updated-at': true,
+  })
   const [sort, setSort] = useState<TableSortSettings | undefined>({
     field: 'id',
     order: 'asc',
@@ -35,12 +44,18 @@ export const Pipelines = () => {
         isLoading={isLoading}
         isFetching={isFetching}
         tooltip={translate(STRING.TOOLTIP_PIPELINE)}
-      />
+      >
+        <ColumnSettings
+          columns={columns(projectId as string)}
+          columnSettings={columnSettings}
+          onColumnSettingsChange={setColumnSettings}
+        />
+      </PageHeader>
       <Table
         columns={columns(
           projectId as string,
           project?.settings.defaultProcessingPipeline?.id
-        )}
+        ).filter((column) => !!columnSettings[column.id])}
         error={error}
         isLoading={isLoading}
         items={pipelines}
diff --git a/ui/src/pages/project/processing-services/processing-services-columns.tsx b/ui/src/pages/project/processing-services/processing-services-columns.tsx
index c33e6e40c..0da7d2467 100644
--- a/ui/src/pages/project/processing-services/processing-services-columns.tsx
+++ b/ui/src/pages/project/processing-services/processing-services-columns.tsx
@@ -40,14 +40,6 @@ export const columns: (
       </Link>
     ),
   },
-  {
-    id: 'endpoint',
-    name: translate(STRING.FIELD_LABEL_ENDPOINT),
-    sortField: 'endpoint',
-    renderCell: (item: ProcessingService) => (
-      <BasicTableCell value={item.endpointUrl} />
-    ),
-  },
   {
     id: 'status',
     name: 'Status',
@@ -62,7 +54,6 @@ export const columns: (
   {
     id: 'num-pipelines-added',
     name: translate(STRING.FIELD_LABEL_NUM_PIPELINES_REGISTERED),
-    sortField: 'num_PIPELINES_REGISTERED',
     renderCell: (item: ProcessingService) => (
       <BasicTableCell value={item.numPiplinesAdded} />
     ),

From 1b198b73e8d019b151e0d85d6ebf3a2291235408 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 12:46:38 +0100
Subject: [PATCH 12/26] style: add more explicit navigation links for
 occurrences

---
 .../blueprint-collection.module.scss          | 13 ++-----
 .../blueprint-collection.tsx                  | 32 +++++-----------
 ui/src/data-services/models/capture.ts        | 27 +++++++++-----
 .../session-details/playback/frame/frame.tsx  | 37 ++++++++++---------
 ui/src/utils/language.ts                      |  4 ++
 5 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/ui/src/components/blueprint-collection/blueprint-collection.module.scss b/ui/src/components/blueprint-collection/blueprint-collection.module.scss
index a532fdeb2..4a0812dc6 100644
--- a/ui/src/components/blueprint-collection/blueprint-collection.module.scss
+++ b/ui/src/components/blueprint-collection/blueprint-collection.module.scss
@@ -36,15 +36,10 @@
   align-items: center;
   max-width: 100%;
 
-  .blueprintImage {
-    position: relative;
-    margin-bottom: 8px;
-
-    img {
-      max-width: 100%;
-      height: inherit;
-      vertical-align: middle;
-    }
+  img {
+    max-width: 100%;
+    height: inherit;
+    vertical-align: middle;
   }
 
   .blueprintInfo {
diff --git a/ui/src/components/blueprint-collection/blueprint-collection.tsx b/ui/src/components/blueprint-collection/blueprint-collection.tsx
index fee6b85a3..a31022e38 100644
--- a/ui/src/components/blueprint-collection/blueprint-collection.tsx
+++ b/ui/src/components/blueprint-collection/blueprint-collection.tsx
@@ -1,10 +1,10 @@
 import classNames from 'classnames'
 import { LicenseInfo } from 'components/license-info/license-info'
-import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
-import { EyeIcon } from 'lucide-react'
+import { ChevronRightIcon } from 'lucide-react'
 import { buttonVariants } from 'nova-ui-kit'
 import { ReactNode, useState } from 'react'
 import { Link } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
 import styles from './blueprint-collection.module.scss'
 
 export interface BlueprintItem {
@@ -57,7 +57,7 @@ export const BlueprintItem = ({
           {item.timeLabel}
         </span>
       </div>
-      <div className={styles.blueprintImage}>
+      <div className="flex flex-col items-center gap-2">
         <img
           src={item.image.src}
           alt=""
@@ -71,27 +71,15 @@ export const BlueprintItem = ({
           }}
         />
         {item.to ? (
-          <BasicTooltip asChild content="Show in session capture">
-            <Link
-              to={item.to}
-              className={classNames(
-                buttonVariants({ size: 'icon', variant: 'outline' }),
-                'flex w-8 h-8 absolute right-2 bottom-2 invisible group-hover:visible'
-              )}
-            >
-              <EyeIcon className="w-4 h-4" />
-            </Link>
-          </BasicTooltip>
+          <Link
+            className={buttonVariants({ size: 'small', variant: 'ghost' })}
+            to={item.to}
+          >
+            <span>{translate(STRING.VIEW_IN_CONTEXT)}</span>
+            <ChevronRightIcon className="w-4 h-4" />
+          </Link>
         ) : null}
       </div>
-      <span
-        className={classNames(
-          styles.blueprintLabel,
-          'body-small text-foreground'
-        )}
-      >
-        {item.label}
-      </span>
     </div>
   )
 }
diff --git a/ui/src/data-services/models/capture.ts b/ui/src/data-services/models/capture.ts
index 4e8534775..c2f80bdec 100644
--- a/ui/src/data-services/models/capture.ts
+++ b/ui/src/data-services/models/capture.ts
@@ -1,5 +1,6 @@
 import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
+import { STRING, translate } from 'utils/language'
 import { UserPermission } from 'utils/user/types'
 export type ServerCapture = any // TODO: Update this type
 
@@ -15,20 +16,15 @@ export type CaptureDetection = {
   bbox: number[]
   id: string
   label: string
-  score: number
-  occurrenceId?: string
   occurrence?: DetectionOccurrence
+  occurrenceId?: string
   occurrenceMeetsCriteria: boolean
+  score: number
+  scoreLabel: string
 }
 
 const getDetectionLabel = (detection: CaptureDetection) => {
   if (detection.occurrence?.determination) {
-    const score = getDetectionScore(detection)
-
-    if (score) {
-      return `${detection.occurrence.determination.name} (${score.toFixed(2)})`
-    }
-
     return detection.occurrence.determination.name
   }
 
@@ -39,12 +35,24 @@ const getDetectionScore = (detection: CaptureDetection) => {
   // This score label is the confidence of the best & most recent classification of the detection's occurrence
   // There will also be a score for the localization of the detection as well.
   const occurrence: DetectionOccurrence | undefined = detection.occurrence
+
   if (occurrence && occurrence.determination_score) {
     return occurrence.determination_score
   }
+
   return 0
 }
 
+const getDetectionScoreLabel = (detection: CaptureDetection) => {
+  const score = getDetectionScore(detection)
+
+  if (score === 1) {
+    return translate(STRING.VERIFIED)
+  }
+
+  return score.toFixed(2)
+}
+
 export class Capture {
   protected readonly _capture: ServerCapture
   private readonly _detections: CaptureDetection[] = []
@@ -59,11 +67,12 @@ export class Capture {
             bbox: detection.bbox,
             id: `${detection.id}`,
             label: getDetectionLabel(detection),
-            score: getDetectionScore(detection),
             occurrenceId: detection.occurrence
               ? `${detection.occurrence.id}`
               : undefined,
             occurrenceMeetsCriteria: detection.occurrence_meets_criteria,
+            score: getDetectionScore(detection),
+            scoreLabel: getDetectionScoreLabel(detection),
           }
         }
       )
diff --git a/ui/src/pages/session-details/playback/frame/frame.tsx b/ui/src/pages/session-details/playback/frame/frame.tsx
index 843d3362a..c5b2c0f9c 100644
--- a/ui/src/pages/session-details/playback/frame/frame.tsx
+++ b/ui/src/pages/session-details/playback/frame/frame.tsx
@@ -3,8 +3,8 @@ import { useOccurrenceDetails } from 'data-services/hooks/occurrences/useOccurre
 import { CaptureDetection } from 'data-services/models/capture'
 import * as Dialog from 'design-system/components/dialog/dialog'
 import { LoadingSpinner } from 'design-system/components/loading-spinner/loading-spinner'
-import { InfoIcon } from 'lucide-react'
-import { Button, Tooltip } from 'nova-ui-kit'
+import { ExternalLinkIcon } from 'lucide-react'
+import { Tooltip } from 'nova-ui-kit'
 import {
   OccurrenceDetails,
   TABS,
@@ -239,26 +239,29 @@ const FrameDetections = ({
                   />
                 </Tooltip.Trigger>
                 <Tooltip.Content
-                  className="p-1 z-[1]"
+                  className="p-2 z-[1]"
                   collisionBoundary={containerRef?.current}
                   side="bottom"
                 >
-                  <div className="flex items-center gap-2">
-                    <span className="pl-2 body-sm pt-0.5">
+                  <div className="flex flex-col gap-1">
+                    <span className="body-base font-medium">
                       {detection.label}
                     </span>
-                    <Button
-                      aria-label={translate(STRING.INFO)}
-                      className="h-8 w-8"
-                      disabled={!detection.occurrenceId}
-                      onClick={() =>
-                        setActiveOccurrence(detection.occurrenceId)
-                      }
-                      size="icon"
-                      variant="ghost"
-                    >
-                      <InfoIcon className="w-4 h-4" />
-                    </Button>
+                    <div className="flex items-center justify-between gap-4">
+                      <span className="pt-0.5 body-small">
+                        ({detection.scoreLabel})
+                      </span>
+                      <button
+                        className="flex items-center gap-1 text-primary font-semibold"
+                        disabled={!detection.occurrenceId}
+                        onClick={() =>
+                          setActiveOccurrence(detection.occurrenceId)
+                        }
+                      >
+                        <span className="pt-0.5">{translate(STRING.VIEW)}</span>
+                        <ExternalLinkIcon className="w-4 h-4" />
+                      </button>
+                    </div>
                   </div>
                 </Tooltip.Content>
               </Tooltip.Root>
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index 00f15a267..f7edff689 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -317,6 +317,8 @@ export enum STRING {
   VALUE_NOT_AVAILABLE,
   VERIFIED_BY,
   VERIFIED,
+  VIEW,
+  VIEW_IN_CONTEXT,
   YOU,
 }
 
@@ -643,6 +645,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.NEW_ID]: 'New ID',
   [STRING.NOT_CONNECTED]: 'Not connected',
   [STRING.NOT_VERIFIED]: 'Not verified',
+  [STRING.VIEW]: 'View in context',
+  [STRING.VIEW_IN_CONTEXT]: 'View in context',
   [STRING.OR]: 'Or',
   [STRING.PIPELINES]: 'Pipelines',
   [STRING.RECENT]: 'Recent',

From 779230e1440d96351f854b656e00a77a225032d5 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 12:47:36 +0100
Subject: [PATCH 13/26] fix: bring back taxa icon

---
 .../design-system/components/navigation/navigation-bar-icon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/design-system/components/navigation/navigation-bar-icon.tsx b/ui/src/design-system/components/navigation/navigation-bar-icon.tsx
index a73ac9306..d6ae9d9f7 100644
--- a/ui/src/design-system/components/navigation/navigation-bar-icon.tsx
+++ b/ui/src/design-system/components/navigation/navigation-bar-icon.tsx
@@ -16,7 +16,7 @@ const ICON_MAP: { [id: string]: FunctionComponent } = {
   occurrences: Occurrences,
   project: Project,
   sessions: Sessions,
-  species: Taxa,
+  taxa: Taxa,
 }
 
 export const NavigationBarIcon = ({

From 8fbccae6a7da38c085ec4b866c5cffaa7acc5789 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 26 Mar 2026 12:48:06 +0100
Subject: [PATCH 14/26] fix: typo

---
 ui/src/utils/language.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index f7edff689..b8b0af7f3 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -645,7 +645,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.NEW_ID]: 'New ID',
   [STRING.NOT_CONNECTED]: 'Not connected',
   [STRING.NOT_VERIFIED]: 'Not verified',
-  [STRING.VIEW]: 'View in context',
+  [STRING.VIEW]: 'View',
   [STRING.VIEW_IN_CONTEXT]: 'View in context',
   [STRING.OR]: 'Or',
   [STRING.PIPELINES]: 'Pipelines',

From 1fcab18a5e2f833d978088cba94a6f6ca947296a Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 27 Mar 2026 16:28:24 +0100
Subject: [PATCH 15/26] feat: make action columns sticky

---
 .../table-header/table-header.module.scss     | 18 ++++++-
 .../table/table-header/table-header.tsx       |  4 +-
 .../components/table/table/table.module.scss  | 22 +++++++-
 .../components/table/table/table.tsx          | 53 +++++++++++++------
 .../design-system/components/table/types.ts   |  5 +-
 ui/src/pages/captures/capture-columns.tsx     | 21 +++-----
 .../pages/deployments/deployment-columns.tsx  |  5 +-
 ui/src/pages/jobs/jobs-columns.tsx            |  5 +-
 .../capture-sets/capture-set-columns.tsx      |  5 +-
 .../project/entities/entities-columns.tsx     |  5 +-
 .../pages/project/entities/styles.module.scss |  2 +-
 .../pages/project/exports/exports-columns.tsx | 21 +++-----
 .../processing-services-columns.tsx           |  5 +-
 .../pages/project/storage/storage-columns.tsx |  5 +-
 ui/src/pages/project/team/team-columns.tsx    |  7 +--
 .../taxa-list-details-columns.tsx             |  5 +-
 ui/src/pages/taxa-lists/taxa-list-columns.tsx |  5 +-
 17 files changed, 106 insertions(+), 87 deletions(-)

diff --git a/ui/src/design-system/components/table/table-header/table-header.module.scss b/ui/src/design-system/components/table/table-header/table-header.module.scss
index 807d136f7..228c77800 100644
--- a/ui/src/design-system/components/table/table-header/table-header.module.scss
+++ b/ui/src/design-system/components/table/table-header/table-header.module.scss
@@ -10,8 +10,22 @@
   background-color: $color-neutral-50;
   text-align: left;
 
-  &.active {
-    border-bottom-color: $color-neutral-400;
+  &.sticky {
+    position: sticky;
+    right: 0;
+    background-color: $color-neutral-50;
+    border-bottom: none;
+    z-index: 1;
+
+    > ::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 100%;
+      border-right: 1px solid $color-neutral-100;
+    }
   }
 }
 
diff --git a/ui/src/design-system/components/table/table-header/table-header.tsx b/ui/src/design-system/components/table/table-header/table-header.tsx
index b9556703e..e1c2e5af9 100644
--- a/ui/src/design-system/components/table/table-header/table-header.tsx
+++ b/ui/src/design-system/components/table/table-header/table-header.tsx
@@ -43,7 +43,9 @@ const BasicTableHeader = <T,>({
       textAlign: column.styles?.textAlign,
       width: column.styles?.width,
     }}
-    className={styles.tableHeader}
+    className={classNames(styles.tableHeader, {
+      [styles.sticky]: column.sticky,
+    })}
   >
     <BasicTooltip asChild content={column.tooltip}>
       <div
diff --git a/ui/src/design-system/components/table/table/table.module.scss b/ui/src/design-system/components/table/table/table.module.scss
index 47180e8da..aad73df40 100644
--- a/ui/src/design-system/components/table/table/table.module.scss
+++ b/ui/src/design-system/components/table/table/table.module.scss
@@ -73,7 +73,9 @@
     }
 
     tr:not(:last-child) {
-      border-bottom: 1px solid $color-neutral-100;
+      td {
+        border-bottom: 1px solid $color-neutral-100;
+      }
     }
   }
 
@@ -84,5 +86,23 @@
     a {
       width: 100%;
     }
+
+    &.sticky {
+      position: sticky;
+      right: 0;
+      background-color: $color-neutral-50;
+      border-bottom: none !important;
+      z-index: 1;
+
+      > ::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 100%;
+        border-right: 1px solid $color-neutral-100;
+      }
+    }
   }
 }
diff --git a/ui/src/design-system/components/table/table/table.tsx b/ui/src/design-system/components/table/table/table.tsx
index 545dedc78..d754e2598 100644
--- a/ui/src/design-system/components/table/table/table.tsx
+++ b/ui/src/design-system/components/table/table/table.tsx
@@ -103,21 +103,35 @@ export const Table = <T extends { id: string }>({
                 </div>
               </th>
             )}
-            {columns.map((column) => (
-              <TableHeader
-                key={column.id}
-                column={column}
-                sortable={sortable}
-                sortSettings={sortSettings}
-                visuallyHidden={column.visuallyHidden}
-                onSortClick={() => onSortClick(column)}
-              />
-            ))}
+            {columns
+              .filter((column) => !column.sticky)
+              .map((column) => (
+                <TableHeader
+                  key={column.id}
+                  column={column}
+                  sortable={sortable}
+                  sortSettings={sortSettings}
+                  visuallyHidden={column.visuallyHidden}
+                  onSortClick={() => onSortClick(column)}
+                />
+              ))}
             <th
               aria-hidden="true"
               className={tableHeaderStyles.tableHeader}
               style={{ width: '100%' }}
             />
+            {columns
+              .filter((column) => column.sticky)
+              .map((column) => (
+                <TableHeader
+                  key={column.id}
+                  column={column}
+                  sortable={sortable}
+                  sortSettings={sortSettings}
+                  visuallyHidden={column.visuallyHidden}
+                  onSortClick={() => onSortClick(column)}
+                />
+              ))}
           </tr>
         </thead>
         <tbody>
@@ -139,12 +153,21 @@ export const Table = <T extends { id: string }>({
                   </BasicTableCell>
                 </td>
               )}
-              {columns.map((column, columnIndex) => (
-                <td key={column.id}>
-                  {column.renderCell(item, rowIndex, columnIndex)}
-                </td>
-              ))}
+              {columns
+                .filter((column) => !column.sticky)
+                .map((column, columnIndex) => (
+                  <td key={column.id}>
+                    {column.renderCell(item, rowIndex, columnIndex)}
+                  </td>
+                ))}
               <td aria-hidden="true" />
+              {columns
+                .filter((column) => column.sticky)
+                .map((column, columnIndex) => (
+                  <td key={column.id} className={styles.sticky}>
+                    {column.renderCell(item, rowIndex, columnIndex)}
+                  </td>
+                ))}
             </tr>
           ))}
         </tbody>
diff --git a/ui/src/design-system/components/table/types.ts b/ui/src/design-system/components/table/types.ts
index 79ce3ba1a..88abb1834 100644
--- a/ui/src/design-system/components/table/types.ts
+++ b/ui/src/design-system/components/table/types.ts
@@ -15,15 +15,16 @@ export enum TextAlign {
 export interface TableColumn<T> {
   id: string
   name: string
-  tooltip?: string
+  renderCell: (item: T, rowIndex: number, columnIndex: number) => JSX.Element
   sortField?: string
+  sticky?: boolean
   styles?: {
     textAlign?: TextAlign
     padding?: string
     width?: string | number
   }
+  tooltip?: string
   visuallyHidden?: boolean
-  renderCell: (item: T, rowIndex: number, columnIndex: number) => JSX.Element
 }
 
 // TODO: This type is no longer used for tables only and should be extracted
diff --git a/ui/src/pages/captures/capture-columns.tsx b/ui/src/pages/captures/capture-columns.tsx
index dd78e1cf2..83ae6d9bd 100644
--- a/ui/src/pages/captures/capture-columns.tsx
+++ b/ui/src/pages/captures/capture-columns.tsx
@@ -175,24 +175,17 @@ export const columns: (projectId: string) => TableColumn<Capture>[] = (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
-    renderCell: (item: Capture) => {
-      if (!item.canDelete) {
-        return <></>
-      }
-
-      return (
-        <div className="flex items-center justify-end gap-2 p-4">
+    sticky: true,
+    renderCell: (item: Capture) => (
+      <div className="flex items-center justify-end gap-2 p-4">
+        {item.canDelete ? (
           <DeleteEntityDialog
             collection={API_ROUTES.CAPTURES}
             id={item.id}
             type="capture"
           />
-        </div>
-      )
-    },
+        ) : null}
+      </div>
+    ),
   },
 ]
diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx
index d8ce0697b..4649b1942 100644
--- a/ui/src/pages/deployments/deployment-columns.tsx
+++ b/ui/src/pages/deployments/deployment-columns.tsx
@@ -213,10 +213,7 @@ export const columns: (projectId: string) => TableColumn<Deployment>[] = (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: Deployment) => (
       <div className={styles.deploymentActions}>
         {item.canDelete && (
diff --git a/ui/src/pages/jobs/jobs-columns.tsx b/ui/src/pages/jobs/jobs-columns.tsx
index c79363286..6a992f5ce 100644
--- a/ui/src/pages/jobs/jobs-columns.tsx
+++ b/ui/src/pages/jobs/jobs-columns.tsx
@@ -136,10 +136,7 @@ export const columns: (projectId: string) => TableColumn<Job>[] = (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: Job) => (
       <div className={styles.jobActions}>
         {item.canQueue && <QueueJob jobId={item.id} />}
diff --git a/ui/src/pages/project/capture-sets/capture-set-columns.tsx b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
index 9b8e6e3b7..1c1e6accc 100644
--- a/ui/src/pages/project/capture-sets/capture-set-columns.tsx
+++ b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
@@ -157,10 +157,7 @@ export const columns: (projectId: string) => TableColumn<CaptureSet>[] = (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: CaptureSet) => (
       <div className={styles.entityActions}>
         {item.canPopulate && <PopulateCaptureSet captureSet={item} />}
diff --git a/ui/src/pages/project/entities/entities-columns.tsx b/ui/src/pages/project/entities/entities-columns.tsx
index 88d86772d..f4a9534fb 100644
--- a/ui/src/pages/project/entities/entities-columns.tsx
+++ b/ui/src/pages/project/entities/entities-columns.tsx
@@ -48,10 +48,7 @@ export const columns: (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: Entity) => (
       <div className={styles.entityActions}>
         {item.canUpdate && (
diff --git a/ui/src/pages/project/entities/styles.module.scss b/ui/src/pages/project/entities/styles.module.scss
index 9e2918a4d..45b34ddee 100644
--- a/ui/src/pages/project/entities/styles.module.scss
+++ b/ui/src/pages/project/entities/styles.module.scss
@@ -4,7 +4,7 @@
 .entityActions {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: 8px;
   padding: 16px;
 }
diff --git a/ui/src/pages/project/exports/exports-columns.tsx b/ui/src/pages/project/exports/exports-columns.tsx
index e93244ffd..c07aedc55 100644
--- a/ui/src/pages/project/exports/exports-columns.tsx
+++ b/ui/src/pages/project/exports/exports-columns.tsx
@@ -88,24 +88,17 @@ export const columns: (projectId: string) => TableColumn<Export>[] = (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
-    renderCell: (item: Export) => {
-      if (!item.canDelete) {
-        return <></>
-      }
-
-      return (
-        <div className="flex items-center justify-end gap-2 p-4">
+    sticky: true,
+    renderCell: (item: Export) => (
+      <div className="flex items-center justify-end gap-2 p-4">
+        {item.canDelete ? (
           <DeleteEntityDialog
             collection={API_ROUTES.EXPORTS}
             id={item.id}
             type="export"
           />
-        </div>
-      )
-    },
+        ) : null}
+      </div>
+    ),
   },
 ]
diff --git a/ui/src/pages/project/processing-services/processing-services-columns.tsx b/ui/src/pages/project/processing-services/processing-services-columns.tsx
index 0da7d2467..ead4c693a 100644
--- a/ui/src/pages/project/processing-services/processing-services-columns.tsx
+++ b/ui/src/pages/project/processing-services/processing-services-columns.tsx
@@ -77,10 +77,7 @@ export const columns: (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: ProcessingService) => (
       <div className={styles.entityActions}>
         {canCreate && <PopulateProcessingService processingService={item} />}
diff --git a/ui/src/pages/project/storage/storage-columns.tsx b/ui/src/pages/project/storage/storage-columns.tsx
index fd8cf7935..228cb5246 100644
--- a/ui/src/pages/project/storage/storage-columns.tsx
+++ b/ui/src/pages/project/storage/storage-columns.tsx
@@ -69,10 +69,7 @@ export const columns: (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: StorageSource) => (
       <div className={styles.entityActions}>
         {item.canUpdate && (
diff --git a/ui/src/pages/project/team/team-columns.tsx b/ui/src/pages/project/team/team-columns.tsx
index 8dbf045cd..d84e7296a 100644
--- a/ui/src/pages/project/team/team-columns.tsx
+++ b/ui/src/pages/project/team/team-columns.tsx
@@ -80,12 +80,9 @@ export const columns: (userId?: string) => TableColumn<Member>[] = (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: Member) => (
-      <div className="p-4 flex items-center justify-end gap-2">
+      <div className="flex items-center justify-end p-4 gap-2">
         {item.userId === userId ? (
           item.canDelete ? (
             <LeaveTeamDialog member={item} />
diff --git a/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx b/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
index 777b1031d..314edd3e1 100644
--- a/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
+++ b/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
@@ -71,10 +71,7 @@ export const columns: (params: {
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: Species) => (
       <div className="flex items-center justify-end gap-2 p-4">
         {canUpdate ? (
diff --git a/ui/src/pages/taxa-lists/taxa-list-columns.tsx b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
index 4f9d7e618..21015db9c 100644
--- a/ui/src/pages/taxa-lists/taxa-list-columns.tsx
+++ b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
@@ -76,10 +76,7 @@ export const columns: (projectId: string) => TableColumn<TaxaList>[] = (
   {
     id: 'actions',
     name: '',
-    styles: {
-      padding: '16px',
-      width: '100%',
-    },
+    sticky: true,
     renderCell: (item: TaxaList) => (
       <div className="flex items-center justify-end gap-2 p-4">
         {item.canUpdate ? (

From 429fa7ba8db893b17b9ac052f97ba7b260217550 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Mon, 30 Mar 2026 10:48:38 +0200
Subject: [PATCH 16/26] feat: conditionally hide action columns

---
 ui/src/pages/captures/capture-columns.tsx     | 44 +++++++-----
 ui/src/pages/captures/captures.tsx            | 18 ++---
 .../pages/deployments/deployment-columns.tsx  | 44 +++++++-----
 ui/src/pages/deployments/deployments.tsx      | 14 ++--
 ui/src/pages/jobs/jobs-columns.tsx            | 48 +++++++------
 ui/src/pages/jobs/jobs.tsx                    | 14 ++--
 .../pipeline-details/pipeline-algorithms.tsx  |  8 ++-
 .../processing-service-pipelines.tsx          |  8 ++-
 .../project/algorithms/algorithms-columns.tsx |  6 +-
 .../pages/project/algorithms/algorithms.tsx   |  2 +-
 .../capture-sets/capture-set-columns.tsx      | 61 ++++++++++-------
 .../project/capture-sets/capture-sets.tsx     | 17 +++--
 .../project/entities/entities-columns.tsx     | 63 +++++++++--------
 ui/src/pages/project/entities/entities.tsx    |  2 +-
 .../pages/project/exports/exports-columns.tsx | 44 +++++++-----
 ui/src/pages/project/exports/exports.tsx      |  5 +-
 .../processing-services-columns.tsx           | 68 ++++++++++---------
 .../processing-services.tsx                   |  5 +-
 .../pages/project/storage/storage-columns.tsx | 58 +++++++++-------
 ui/src/pages/project/storage/storage.tsx      |  2 +-
 ui/src/pages/project/team/team-columns.tsx    | 50 ++++++++------
 ui/src/pages/project/team/team.tsx            |  5 +-
 ui/src/pages/sessions/session-columns.tsx     |  6 +-
 ui/src/pages/sessions/sessions.tsx            | 11 ++-
 .../taxa-list-details-columns.tsx             | 42 +++++++-----
 .../taxa-list-details/taxa-list-details.tsx   | 21 ++----
 ui/src/pages/taxa-lists/taxa-list-columns.tsx | 66 ++++++++++--------
 ui/src/pages/taxa-lists/taxa-lists.tsx        | 12 ++--
 28 files changed, 417 insertions(+), 327 deletions(-)

diff --git a/ui/src/pages/captures/capture-columns.tsx b/ui/src/pages/captures/capture-columns.tsx
index 83ae6d9bd..3cd220144 100644
--- a/ui/src/pages/captures/capture-columns.tsx
+++ b/ui/src/pages/captures/capture-columns.tsx
@@ -14,9 +14,13 @@ import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 
-export const columns: (projectId: string) => TableColumn<Capture>[] = (
+export const columns = ({
+  projectId,
+  showActions,
+}: {
   projectId: string
-) => [
+  showActions?: boolean
+}): TableColumn<Capture>[] => [
   {
     id: 'thumbnail',
     name: translate(STRING.FIELD_LABEL_THUMBNAIL),
@@ -172,20 +176,24 @@ export const columns: (projectId: string) => TableColumn<Capture>[] = (
     },
     renderCell: (item: Capture) => <BasicTableCell value={item.numTaxa} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: Capture) => (
-      <div className="flex items-center justify-end gap-2 p-4">
-        {item.canDelete ? (
-          <DeleteEntityDialog
-            collection={API_ROUTES.CAPTURES}
-            id={item.id}
-            type="capture"
-          />
-        ) : null}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: Capture) => (
+            <div className="flex items-center justify-end gap-2 p-4">
+              {item.canDelete ? (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.CAPTURES}
+                  id={item.id}
+                  type="capture"
+                />
+              ) : null}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/captures/captures.tsx b/ui/src/pages/captures/captures.tsx
index 3664284ea..1f22dc1e6 100644
--- a/ui/src/pages/captures/captures.tsx
+++ b/ui/src/pages/captures/captures.tsx
@@ -54,7 +54,11 @@ export const Captures = () => {
       filters,
       withCounts: countColumnVisible || sortByCountActive, // Only fetch counts if needed since counts will slow down the response
     })
-  const showUpload = userPermissions?.includes(UserPermission.Create)
+  const canCreate = userPermissions?.includes(UserPermission.Create)
+  const tableColumns = columns({
+    projectId: projectId as string,
+    showActions: canCreate,
+  })
 
   return (
     <div className="flex flex-col gap-6 md:flex-row">
@@ -89,26 +93,22 @@ export const Captures = () => {
             value={selectedView}
             onValueChange={setSelectedView}
           />
-          {showUpload ? (
+          {canCreate ? (
             <UploadImagesDialog
               isOpen={isUploadOpen}
               setIsOpen={setIsUploadOpen}
             />
           ) : null}
-          <SortControl
-            columns={columns(projectId as string)}
-            setSort={setSort}
-            sort={sort}
-          />
+          <SortControl columns={tableColumns} setSort={setSort} sort={sort} />
           <ColumnSettings
-            columns={columns(projectId as string)}
+            columns={tableColumns}
             columnSettings={columnSettings}
             onColumnSettingsChange={setColumnSettings}
           />
         </PageHeader>
         {selectedView === 'table' && (
           <Table
-            columns={columns(projectId as string).filter(
+            columns={tableColumns.filter(
               (column) => column.id === 'actions' || !!columnSettings[column.id]
             )}
             error={error}
diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx
index 4649b1942..8531ba853 100644
--- a/ui/src/pages/deployments/deployment-columns.tsx
+++ b/ui/src/pages/deployments/deployment-columns.tsx
@@ -17,9 +17,13 @@ import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 import styles from './deployments.module.scss'
 
-export const columns: (projectId: string) => TableColumn<Deployment>[] = (
+export const columns = ({
+  projectId,
+  showActions,
+}: {
   projectId: string
-) => [
+  showActions?: boolean
+}): TableColumn<Deployment>[] => [
   {
     id: 'snapshot',
     name: translate(STRING.FIELD_LABEL_IMAGE),
@@ -210,20 +214,24 @@ export const columns: (projectId: string) => TableColumn<Deployment>[] = (
     sortField: 'updated_at',
     renderCell: (item: Deployment) => <DateTableCell date={item.updatedAt} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: Deployment) => (
-      <div className={styles.deploymentActions}>
-        {item.canDelete && (
-          <DeleteEntityDialog
-            collection={API_ROUTES.DEPLOYMENTS}
-            id={item.id}
-            type={translate(STRING.ENTITY_TYPE_DEPLOYMENT)}
-          />
-        )}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: Deployment) => (
+            <div className={styles.deploymentActions}>
+              {item.canDelete && (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.DEPLOYMENTS}
+                  id={item.id}
+                  type={translate(STRING.ENTITY_TYPE_DEPLOYMENT)}
+                />
+              )}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/deployments/deployments.tsx b/ui/src/pages/deployments/deployments.tsx
index da5df2e57..79c91419b 100644
--- a/ui/src/pages/deployments/deployments.tsx
+++ b/ui/src/pages/deployments/deployments.tsx
@@ -35,6 +35,10 @@ export const Deployments = () => {
       sort,
     })
   const canCreate = userPermissions?.includes(UserPermission.Create)
+  const tableColumns = columns({
+    projectId: projectId as string,
+    showActions: canCreate,
+  })
 
   return (
     <>
@@ -48,19 +52,15 @@ export const Deployments = () => {
         tooltip={translate(STRING.TOOLTIP_DEPLOYMENT)}
       >
         {canCreate ? <NewDeploymentDialog /> : null}
-        <SortControl
-          columns={columns(projectId as string)}
-          setSort={setSort}
-          sort={sort}
-        />
+        <SortControl columns={tableColumns} setSort={setSort} sort={sort} />
         <ColumnSettings
-          columns={columns(projectId as string)}
+          columns={tableColumns}
           columnSettings={columnSettings}
           onColumnSettingsChange={setColumnSettings}
         />
       </PageHeader>
       <Table
-        columns={columns(projectId as string).filter(
+        columns={tableColumns.filter(
           (column) => column.id === 'actions' || !!columnSettings[column.id]
         )}
         error={error}
diff --git a/ui/src/pages/jobs/jobs-columns.tsx b/ui/src/pages/jobs/jobs-columns.tsx
index 6a992f5ce..ce64a1acf 100644
--- a/ui/src/pages/jobs/jobs-columns.tsx
+++ b/ui/src/pages/jobs/jobs-columns.tsx
@@ -13,9 +13,13 @@ import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 import styles from './jobs.module.scss'
 
-export const columns: (projectId: string) => TableColumn<Job>[] = (
+export const columns = ({
+  projectId,
+  showActions,
+}: {
   projectId: string
-) => [
+  showActions?: boolean
+}): TableColumn<Job>[] => [
   {
     id: 'name',
     name: translate(STRING.FIELD_LABEL_NAME),
@@ -133,22 +137,26 @@ export const columns: (projectId: string) => TableColumn<Job>[] = (
     sortField: 'finished_at',
     renderCell: (item: Job) => <DateTableCell date={item.finishedAt} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: Job) => (
-      <div className={styles.jobActions}>
-        {item.canQueue && <QueueJob jobId={item.id} />}
-        {item.canCancel && <CancelJob jobId={item.id} />}
-        {item.canDelete && (
-          <DeleteEntityDialog
-            collection={API_ROUTES.JOBS}
-            id={item.id}
-            type={translate(STRING.ENTITY_TYPE_JOB)}
-          />
-        )}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: Job) => (
+            <div className={styles.jobActions}>
+              {item.canQueue && <QueueJob jobId={item.id} />}
+              {item.canCancel && <CancelJob jobId={item.id} />}
+              {item.canDelete && (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.JOBS}
+                  id={item.id}
+                  type={translate(STRING.ENTITY_TYPE_JOB)}
+                />
+              )}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/jobs/jobs.tsx b/ui/src/pages/jobs/jobs.tsx
index 60871540d..2e6fcbd88 100644
--- a/ui/src/pages/jobs/jobs.tsx
+++ b/ui/src/pages/jobs/jobs.tsx
@@ -45,6 +45,10 @@ export const Jobs = () => {
       filters,
     })
   const canCreate = userPermissions?.includes(UserPermission.Create)
+  const tableColumns = columns({
+    projectId: projectId as string,
+    showActions: canCreate,
+  })
 
   return (
     <div className="flex flex-col gap-6 md:flex-row">
@@ -67,20 +71,16 @@ export const Jobs = () => {
           title={translate(STRING.NAV_ITEM_JOBS)}
           tooltip={translate(STRING.TOOLTIP_JOB)}
         >
-          <SortControl
-            columns={columns(projectId as string)}
-            setSort={setSort}
-            sort={sort}
-          />
+          <SortControl columns={tableColumns} setSort={setSort} sort={sort} />
           {canCreate ? <NewJobDialog /> : null}
           <ColumnSettings
-            columns={columns(projectId as string)}
+            columns={tableColumns}
             columnSettings={columnSettings}
             onColumnSettingsChange={setColumnSettings}
           />
         </PageHeader>
         <Table
-          columns={columns(projectId as string).filter(
+          columns={tableColumns.filter(
             (column) => column.id === 'actions' || !!columnSettings[column.id]
           )}
           error={error}
diff --git a/ui/src/pages/pipeline-details/pipeline-algorithms.tsx b/ui/src/pages/pipeline-details/pipeline-algorithms.tsx
index f31c1fe30..dc765b0fe 100644
--- a/ui/src/pages/pipeline-details/pipeline-algorithms.tsx
+++ b/ui/src/pages/pipeline-details/pipeline-algorithms.tsx
@@ -10,9 +10,11 @@ import { Link, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 
-export const columns: (projectId: string) => TableColumn<Algorithm>[] = (
+export const columns = ({
+  projectId,
+}: {
   projectId: string
-) => [
+}): TableColumn<Algorithm>[] => [
   {
     id: 'name',
     name: translate(STRING.FIELD_LABEL_NAME),
@@ -50,7 +52,7 @@ export const PipelineAlgorithms = ({ pipeline }: { pipeline: Pipeline }) => {
     <Table
       backgroundTheme={TableBackgroundTheme.White}
       items={pipeline.algorithms}
-      columns={columns(projectId as string)}
+      columns={columns({ projectId: projectId as string })}
     />
   )
 }
diff --git a/ui/src/pages/processing-service-details/processing-service-pipelines.tsx b/ui/src/pages/processing-service-details/processing-service-pipelines.tsx
index 208817224..8cefeb1ef 100644
--- a/ui/src/pages/processing-service-details/processing-service-pipelines.tsx
+++ b/ui/src/pages/processing-service-details/processing-service-pipelines.tsx
@@ -10,9 +10,11 @@ import { Link, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 
-export const columns: (projectId: string) => TableColumn<Pipeline>[] = (
+export const columns = ({
+  projectId,
+}: {
   projectId: string
-) => [
+}): TableColumn<Pipeline>[] => [
   {
     id: 'name',
     name: translate(STRING.FIELD_LABEL_NAME),
@@ -54,7 +56,7 @@ export const ProcessingServicePipelines = ({
     <Table
       backgroundTheme={TableBackgroundTheme.White}
       items={processingService.pipelines}
-      columns={columns(projectId as string)}
+      columns={columns({ projectId: projectId as string })}
     />
   )
 }
diff --git a/ui/src/pages/project/algorithms/algorithms-columns.tsx b/ui/src/pages/project/algorithms/algorithms-columns.tsx
index d9299292c..72b82a7a3 100644
--- a/ui/src/pages/project/algorithms/algorithms-columns.tsx
+++ b/ui/src/pages/project/algorithms/algorithms-columns.tsx
@@ -6,9 +6,11 @@ import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 
-export const columns: (projectId: string) => TableColumn<Algorithm>[] = (
+export const columns = ({
+  projectId,
+}: {
   projectId: string
-) => [
+}): TableColumn<Algorithm>[] => [
   {
     id: 'id',
     name: translate(STRING.FIELD_LABEL_ID),
diff --git a/ui/src/pages/project/algorithms/algorithms.tsx b/ui/src/pages/project/algorithms/algorithms.tsx
index 348135b0b..8c03439d8 100644
--- a/ui/src/pages/project/algorithms/algorithms.tsx
+++ b/ui/src/pages/project/algorithms/algorithms.tsx
@@ -35,7 +35,7 @@ export const Algorithms = () => {
         tooltip={translate(STRING.TOOLTIP_ALGORITHM)}
       />
       <Table
-        columns={columns(projectId as string)}
+        columns={columns({ projectId: projectId as string })}
         error={error}
         isLoading={isLoading}
         items={algorithms}
diff --git a/ui/src/pages/project/capture-sets/capture-set-columns.tsx b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
index 1c1e6accc..90f3e4dab 100644
--- a/ui/src/pages/project/capture-sets/capture-set-columns.tsx
+++ b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
@@ -18,9 +18,13 @@ import { STRING, translate } from 'utils/language'
 import { SERVER_SAMPLING_METHODS } from './constants'
 import { PopulateCaptureSet } from './populate-capture-set'
 
-export const columns: (projectId: string) => TableColumn<CaptureSet>[] = (
+export const columns = ({
+  projectId,
+  showActions,
+}: {
   projectId: string
-) => [
+  showActions?: boolean
+}): TableColumn<CaptureSet>[] => [
   {
     id: 'id',
     name: translate(STRING.FIELD_LABEL_ID),
@@ -154,28 +158,33 @@ export const columns: (projectId: string) => TableColumn<CaptureSet>[] = (
     sortField: 'updated_at',
     renderCell: (item: CaptureSet) => <DateTableCell date={item.updatedAt} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: CaptureSet) => (
-      <div className={styles.entityActions}>
-        {item.canPopulate && <PopulateCaptureSet captureSet={item} />}
-        {item.canUpdate && SERVER_SAMPLING_METHODS.includes(item.method) && (
-          <UpdateEntityDialog
-            collection={API_ROUTES.CAPTURE_SETS}
-            entity={item}
-            type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
-          />
-        )}
-        {item.canDelete && (
-          <DeleteEntityDialog
-            collection={API_ROUTES.CAPTURE_SETS}
-            id={item.id}
-            type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
-          />
-        )}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: CaptureSet) => (
+            <div className={styles.entityActions}>
+              {item.canPopulate && <PopulateCaptureSet captureSet={item} />}
+              {item.canUpdate &&
+                SERVER_SAMPLING_METHODS.includes(item.method) && (
+                  <UpdateEntityDialog
+                    collection={API_ROUTES.CAPTURE_SETS}
+                    entity={item}
+                    type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
+                  />
+                )}
+              {item.canDelete && (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.CAPTURE_SETS}
+                  id={item.id}
+                  type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
+                />
+              )}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/project/capture-sets/capture-sets.tsx b/ui/src/pages/project/capture-sets/capture-sets.tsx
index 355aece1c..ab661f1eb 100644
--- a/ui/src/pages/project/capture-sets/capture-sets.tsx
+++ b/ui/src/pages/project/capture-sets/capture-sets.tsx
@@ -48,6 +48,10 @@ export const CaptureSets = () => {
       poll
     )
   const canCreate = userPermissions?.includes(UserPermission.Create)
+  const tableColumns = columns({
+    projectId: projectId as string,
+    showActions: canCreate,
+  })
 
   useEffect(() => {
     // If any capture set has a job in progress, we want to poll the endpoint so we can show job updates
@@ -76,20 +80,15 @@ export const CaptureSets = () => {
           />
         )}
         <ColumnSettings
-          columns={columns(projectId as string)}
+          columns={tableColumns}
           columnSettings={columnSettings}
           onColumnSettingsChange={setColumnSettings}
         />
       </PageHeader>
       <Table
-        columns={columns(projectId as string).filter((column) => {
-          // Always show action column
-          if (column.id === 'actions') {
-            return true
-          }
-
-          return !!columnSettings[column.id]
-        })}
+        columns={tableColumns.filter(
+          (column) => column.id === 'actions' || !!columnSettings[column.id]
+        )}
         error={error}
         isLoading={isLoading}
         items={captureSets}
diff --git a/ui/src/pages/project/entities/entities-columns.tsx b/ui/src/pages/project/entities/entities-columns.tsx
index f4a9534fb..b2f408bd6 100644
--- a/ui/src/pages/project/entities/entities-columns.tsx
+++ b/ui/src/pages/project/entities/entities-columns.tsx
@@ -7,10 +7,15 @@ import { DeleteEntityDialog } from './delete-entity-dialog'
 import { UpdateEntityDialog } from './entity-details-dialog'
 import styles from './styles.module.scss'
 
-export const columns: (
-  collection: string,
+export const columns = ({
+  collection,
+  type,
+  showActions,
+}: {
+  collection: string
   type: string
-) => TableColumn<Entity>[] = (collection: string, type: string) => [
+  showActions?: boolean
+}): TableColumn<Entity>[] => [
   {
     id: 'id',
     name: translate(STRING.FIELD_LABEL_ID),
@@ -45,28 +50,32 @@ export const columns: (
     sortField: 'updated_at',
     renderCell: (item: Entity) => <DateTableCell date={item.updatedAt} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: Entity) => (
-      <div className={styles.entityActions}>
-        {item.canUpdate && (
-          <UpdateEntityDialog
-            collection={collection}
-            entity={item}
-            type={type}
-            isCompact
-          />
-        )}
-        {item.canDelete && (
-          <DeleteEntityDialog
-            collection={collection}
-            id={item.id}
-            type={type}
-          />
-        )}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: Entity) => (
+            <div className={styles.entityActions}>
+              {item.canUpdate && (
+                <UpdateEntityDialog
+                  collection={collection}
+                  entity={item}
+                  type={type}
+                  isCompact
+                />
+              )}
+              {item.canDelete && (
+                <DeleteEntityDialog
+                  collection={collection}
+                  id={item.id}
+                  type={type}
+                />
+              )}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/project/entities/entities.tsx b/ui/src/pages/project/entities/entities.tsx
index 8f491c148..6d2c300fa 100644
--- a/ui/src/pages/project/entities/entities.tsx
+++ b/ui/src/pages/project/entities/entities.tsx
@@ -52,7 +52,7 @@ export const Entities = ({
         )}
       </PageHeader>
       <Table
-        columns={columns(collection, type)}
+        columns={columns({ collection, type, showActions: canCreate })}
         error={error}
         isLoading={isLoading}
         items={entities}
diff --git a/ui/src/pages/project/exports/exports-columns.tsx b/ui/src/pages/project/exports/exports-columns.tsx
index c07aedc55..77baf74e9 100644
--- a/ui/src/pages/project/exports/exports-columns.tsx
+++ b/ui/src/pages/project/exports/exports-columns.tsx
@@ -17,9 +17,13 @@ import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 import { DeleteEntityDialog } from '../entities/delete-entity-dialog'
 
-export const columns: (projectId: string) => TableColumn<Export>[] = (
+export const columns = ({
+  projectId,
+  showActions,
+}: {
   projectId: string
-) => [
+  showActions?: boolean
+}): TableColumn<Export>[] => [
   {
     id: 'name',
     sortField: 'format',
@@ -85,20 +89,24 @@ export const columns: (projectId: string) => TableColumn<Export>[] = (
     sortField: 'updated_at',
     renderCell: (item: Export) => <DateTableCell date={item.updatedAt} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: Export) => (
-      <div className="flex items-center justify-end gap-2 p-4">
-        {item.canDelete ? (
-          <DeleteEntityDialog
-            collection={API_ROUTES.EXPORTS}
-            id={item.id}
-            type="export"
-          />
-        ) : null}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: Export) => (
+            <div className="flex items-center justify-end gap-2 p-4">
+              {item.canDelete ? (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.EXPORTS}
+                  id={item.id}
+                  type="export"
+                />
+              ) : null}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/project/exports/exports.tsx b/ui/src/pages/project/exports/exports.tsx
index bbd97a085..52a864707 100644
--- a/ui/src/pages/project/exports/exports.tsx
+++ b/ui/src/pages/project/exports/exports.tsx
@@ -72,7 +72,10 @@ export const Exports = () => {
         </EmptyState>
       ) : (
         <Table
-          columns={columns(projectId as string)}
+          columns={columns({
+            projectId: projectId as string,
+            showActions: canCreate,
+          })}
           error={error}
           isLoading={isLoading}
           items={exports}
diff --git a/ui/src/pages/project/processing-services/processing-services-columns.tsx b/ui/src/pages/project/processing-services/processing-services-columns.tsx
index ead4c693a..328ea9c86 100644
--- a/ui/src/pages/project/processing-services/processing-services-columns.tsx
+++ b/ui/src/pages/project/processing-services/processing-services-columns.tsx
@@ -12,13 +12,13 @@ import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 import { PopulateProcessingService } from './processing-services-actions'
 
-export const columns: (
-  projectId: string,
-  canCreate?: boolean
-) => TableColumn<ProcessingService>[] = (
-  projectId: string,
-  canCreate?: boolean
-) => [
+export const columns = ({
+  projectId,
+  showActions,
+}: {
+  projectId: string
+  showActions?: boolean
+}): TableColumn<ProcessingService>[] => [
   {
     id: 'id',
     sortField: 'id',
@@ -74,28 +74,34 @@ export const columns: (
       <DateTableCell date={item.updatedAt} />
     ),
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: ProcessingService) => (
-      <div className={styles.entityActions}>
-        {canCreate && <PopulateProcessingService processingService={item} />}
-        {item.canUpdate && (
-          <UpdateEntityDialog
-            collection={API_ROUTES.PROCESSING_SERVICES}
-            entity={item}
-            type="service"
-          />
-        )}
-        {item.canDelete && (
-          <DeleteEntityDialog
-            collection={API_ROUTES.PROCESSING_SERVICES}
-            id={item.id}
-            type="service"
-          />
-        )}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: ProcessingService) => (
+            <div className={styles.entityActions}>
+              {item.canUpdate && (
+                <>
+                  <PopulateProcessingService processingService={item} />
+                  <UpdateEntityDialog
+                    collection={API_ROUTES.PROCESSING_SERVICES}
+                    entity={item}
+                    type="service"
+                  />
+                </>
+              )}
+              {item.canDelete && (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.PROCESSING_SERVICES}
+                  id={item.id}
+                  type="service"
+                />
+              )}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/project/processing-services/processing-services.tsx b/ui/src/pages/project/processing-services/processing-services.tsx
index 220ea1741..ac5759f94 100644
--- a/ui/src/pages/project/processing-services/processing-services.tsx
+++ b/ui/src/pages/project/processing-services/processing-services.tsx
@@ -54,7 +54,10 @@ export const ProcessingServices = () => {
       <Table
         items={items}
         isLoading={isLoading}
-        columns={columns(projectId as string, canCreate)}
+        columns={columns({
+          projectId: projectId as string,
+          showActions: canCreate,
+        })}
         sortable
         sortSettings={sort}
         onSortSettingsChange={setSort}
diff --git a/ui/src/pages/project/storage/storage-columns.tsx b/ui/src/pages/project/storage/storage-columns.tsx
index 228cb5246..1ebfe52d7 100644
--- a/ui/src/pages/project/storage/storage-columns.tsx
+++ b/ui/src/pages/project/storage/storage-columns.tsx
@@ -8,9 +8,11 @@ import { UpdateEntityDialog } from 'pages/project/entities/entity-details-dialog
 import styles from 'pages/project/entities/styles.module.scss'
 import { STRING, translate } from 'utils/language'
 
-export const columns: (
-  projectId: string
-) => TableColumn<StorageSource>[] = () => [
+export const columns = ({
+  showActions,
+}: {
+  showActions?: boolean
+}): TableColumn<StorageSource>[] => [
   {
     id: 'name',
     name: translate(STRING.FIELD_LABEL_NAME),
@@ -66,27 +68,31 @@ export const columns: (
       <DateTableCell date={item.updatedAt} />
     ),
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: StorageSource) => (
-      <div className={styles.entityActions}>
-        {item.canUpdate && (
-          <UpdateEntityDialog
-            collection={API_ROUTES.STORAGE}
-            entity={item}
-            type="storage"
-          />
-        )}
-        {item.canDelete && (
-          <DeleteEntityDialog
-            collection={API_ROUTES.STORAGE}
-            id={item.id}
-            type="storage"
-          />
-        )}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: StorageSource) => (
+            <div className={styles.entityActions}>
+              {item.canUpdate && (
+                <UpdateEntityDialog
+                  collection={API_ROUTES.STORAGE}
+                  entity={item}
+                  type="storage"
+                />
+              )}
+              {item.canDelete && (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.STORAGE}
+                  id={item.id}
+                  type="storage"
+                />
+              )}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/project/storage/storage.tsx b/ui/src/pages/project/storage/storage.tsx
index ecbc27517..896dc633d 100644
--- a/ui/src/pages/project/storage/storage.tsx
+++ b/ui/src/pages/project/storage/storage.tsx
@@ -43,7 +43,7 @@ export const Storage = () => {
         )}
       </PageHeader>
       <Table
-        columns={columns(projectId as string)}
+        columns={columns({ showActions: canCreate })}
         error={error}
         isLoading={isLoading}
         items={items}
diff --git a/ui/src/pages/project/team/team-columns.tsx b/ui/src/pages/project/team/team-columns.tsx
index d84e7296a..19a33ac08 100644
--- a/ui/src/pages/project/team/team-columns.tsx
+++ b/ui/src/pages/project/team/team-columns.tsx
@@ -11,9 +11,13 @@ import { LeaveTeamDialog } from './leave-team-dialog'
 import { ManageAccessDialog } from './manage-access-dialog'
 import { RemoveMemberDialog } from './remove-member-dialog'
 
-export const columns: (userId?: string) => TableColumn<Member>[] = (
+export const columns = ({
+  userId,
+  showActions,
+}: {
   userId?: string
-) => [
+  showActions?: boolean
+}): TableColumn<Member>[] => [
   {
     id: 'user',
     sortField: 'name',
@@ -77,23 +81,27 @@ export const columns: (userId?: string) => TableColumn<Member>[] = (
     sortField: 'updated_at',
     renderCell: (item: Member) => <DateTableCell date={item.updatedAt} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: Member) => (
-      <div className="flex items-center justify-end p-4 gap-2">
-        {item.userId === userId ? (
-          item.canDelete ? (
-            <LeaveTeamDialog member={item} />
-          ) : null
-        ) : (
-          <>
-            {item.canUpdate ? <ManageAccessDialog member={item} /> : null}
-            {item.canDelete ? <RemoveMemberDialog member={item} /> : null}
-          </>
-        )}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: Member) => (
+            <div className="flex items-center justify-end p-4 gap-2">
+              {item.userId === userId ? (
+                item.canDelete ? (
+                  <LeaveTeamDialog member={item} />
+                ) : null
+              ) : (
+                <>
+                  {item.canUpdate ? <ManageAccessDialog member={item} /> : null}
+                  {item.canDelete ? <RemoveMemberDialog member={item} /> : null}
+                </>
+              )}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/project/team/team.tsx b/ui/src/pages/project/team/team.tsx
index 310bb8991..25fadb813 100644
--- a/ui/src/pages/project/team/team.tsx
+++ b/ui/src/pages/project/team/team.tsx
@@ -72,7 +72,10 @@ export const Team = () => {
         {canCreate ? <AddMemberDialog /> : null}
       </PageHeader>
       <Table
-        columns={columns(userInfo?.id)}
+        columns={columns({
+          userId: userInfo?.id,
+          showActions: true,
+        })}
         error={error}
         isLoading={isLoading}
         items={members}
diff --git a/ui/src/pages/sessions/session-columns.tsx b/ui/src/pages/sessions/session-columns.tsx
index f64a47f88..6520e6aa6 100644
--- a/ui/src/pages/sessions/session-columns.tsx
+++ b/ui/src/pages/sessions/session-columns.tsx
@@ -13,9 +13,11 @@ import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 
-export const columns: (projectId: string) => TableColumn<Session>[] = (
+export const columns = ({
+  projectId,
+}: {
   projectId: string
-) => [
+}): TableColumn<Session>[] => [
   {
     id: 'snapshots',
     name: translate(STRING.FIELD_LABEL_SNAPSHOTS),
diff --git a/ui/src/pages/sessions/sessions.tsx b/ui/src/pages/sessions/sessions.tsx
index 5eb774ce0..a47242cbf 100644
--- a/ui/src/pages/sessions/sessions.tsx
+++ b/ui/src/pages/sessions/sessions.tsx
@@ -44,6 +44,7 @@ export const Sessions = () => {
     filters,
   })
   const { selectedView, setSelectedView } = useSelectedView('table')
+  const tableColumns = columns({ projectId: projectId as string })
 
   return (
     <>
@@ -77,13 +78,9 @@ export const Sessions = () => {
               value={selectedView}
               onValueChange={setSelectedView}
             />
-            <SortControl
-              columns={columns(projectId as string)}
-              setSort={setSort}
-              sort={sort}
-            />
+            <SortControl columns={tableColumns} setSort={setSort} sort={sort} />
             <ColumnSettings
-              columns={columns(projectId as string)}
+              columns={tableColumns}
               columnSettings={columnSettings}
               onColumnSettingsChange={setColumnSettings}
             />
@@ -93,7 +90,7 @@ export const Sessions = () => {
               error={error}
               items={sessions}
               isLoading={isLoading}
-              columns={columns(projectId as string).filter(
+              columns={tableColumns.filter(
                 (column) => !!columnSettings[column.id]
               )}
               sortable
diff --git a/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx b/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
index 314edd3e1..d5dffdf52 100644
--- a/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
+++ b/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
@@ -13,11 +13,15 @@ import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 import { RemoveTaxaListTaxonDialog } from './remove-taxa-list-taxon/remove-taxa-list-taxon-dialog'
 
-export const columns: (params: {
-  canUpdate?: boolean
+export const columns = ({
+  projectId,
+  showActions,
+  taxaListId,
+}: {
   projectId: string
+  showActions?: boolean
   taxaListId: string
-}) => TableColumn<Species>[] = ({ canUpdate, projectId, taxaListId }) => [
+}): TableColumn<Species>[] => [
   {
     id: 'cover-image',
     name: translate(STRING.FIELD_LABEL_IMAGE),
@@ -68,19 +72,21 @@ export const columns: (params: {
     },
     renderCell: (item: Species) => <BasicTableCell value={item.rank} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: Species) => (
-      <div className="flex items-center justify-end gap-2 p-4">
-        {canUpdate ? (
-          <RemoveTaxaListTaxonDialog
-            taxaListId={taxaListId}
-            taxonId={item.id}
-          />
-        ) : null}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: Species) => (
+            <div className="flex items-center justify-end gap-2 p-4">
+              <RemoveTaxaListTaxonDialog
+                taxaListId={taxaListId}
+                taxonId={item.id}
+              />
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/taxa-list-details/taxa-list-details.tsx b/ui/src/pages/taxa-list-details/taxa-list-details.tsx
index 93fb6f825..ffcbe4d2e 100644
--- a/ui/src/pages/taxa-list-details/taxa-list-details.tsx
+++ b/ui/src/pages/taxa-list-details/taxa-list-details.tsx
@@ -48,6 +48,11 @@ export const TaxaListDetails = () => {
       setDetailBreadcrumb(undefined)
     }
   }, [taxaList, setDetailBreadcrumb])
+  const tableColumns = columns({
+    projectId: projectId as string,
+    showActions: taxaList?.canUpdate,
+    taxaListId: id as string,
+  })
 
   return (
     <>
@@ -62,22 +67,10 @@ export const TaxaListDetails = () => {
         {taxaList?.canUpdate ? (
           <AddTaxaListTaxonPopover taxaListId={id as string} />
         ) : null}
-        <SortControl
-          columns={columns({
-            canUpdate: taxaList?.canUpdate,
-            projectId: projectId as string,
-            taxaListId: id as string,
-          })}
-          setSort={setSort}
-          sort={sort}
-        />
+        <SortControl columns={tableColumns} setSort={setSort} sort={sort} />
       </PageHeader>
       <Table
-        columns={columns({
-          canUpdate: taxaList?.canUpdate,
-          projectId: projectId as string,
-          taxaListId: id as string,
-        })}
+        columns={tableColumns}
         error={error}
         isLoading={isLoading}
         items={species}
diff --git a/ui/src/pages/taxa-lists/taxa-list-columns.tsx b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
index 21015db9c..09f7e8e40 100644
--- a/ui/src/pages/taxa-lists/taxa-list-columns.tsx
+++ b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
@@ -15,9 +15,13 @@ import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 import { AddTaxaListTaxonPopover } from '../taxa-list-details/add-taxa-list-taxon/add-taxa-list-taxon-popover'
 
-export const columns: (projectId: string) => TableColumn<TaxaList>[] = (
+export const columns = ({
+  projectId,
+  showActions,
+}: {
   projectId: string
-) => [
+  showActions?: boolean
+}): TableColumn<TaxaList>[] => [
   {
     id: 'name',
     name: translate(STRING.FIELD_LABEL_NAME),
@@ -73,31 +77,35 @@ export const columns: (projectId: string) => TableColumn<TaxaList>[] = (
     sortField: 'updated_at',
     renderCell: (item: TaxaList) => <DateTableCell date={item.updatedAt} />,
   },
-  {
-    id: 'actions',
-    name: '',
-    sticky: true,
-    renderCell: (item: TaxaList) => (
-      <div className="flex items-center justify-end gap-2 p-4">
-        {item.canUpdate ? (
-          <AddTaxaListTaxonPopover taxaListId={item.id} />
-        ) : null}
-        {item.canUpdate ? (
-          <UpdateEntityDialog
-            collection={API_ROUTES.TAXA_LISTS}
-            entity={item}
-            isCompact
-            type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
-          />
-        ) : null}
-        {item.canDelete ? (
-          <DeleteEntityDialog
-            collection={API_ROUTES.TAXA_LISTS}
-            id={item.id}
-            type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
-          />
-        ) : null}
-      </div>
-    ),
-  },
+  ...(showActions
+    ? [
+        {
+          id: 'actions',
+          name: '',
+          sticky: true,
+          renderCell: (item: TaxaList) => (
+            <div className="flex items-center justify-end gap-2 p-4">
+              {item.canUpdate ? (
+                <AddTaxaListTaxonPopover taxaListId={item.id} />
+              ) : null}
+              {item.canUpdate ? (
+                <UpdateEntityDialog
+                  collection={API_ROUTES.TAXA_LISTS}
+                  entity={item}
+                  isCompact
+                  type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
+                />
+              ) : null}
+              {item.canDelete ? (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.TAXA_LISTS}
+                  id={item.id}
+                  type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
+                />
+              ) : null}
+            </div>
+          ),
+        },
+      ]
+    : []),
 ]
diff --git a/ui/src/pages/taxa-lists/taxa-lists.tsx b/ui/src/pages/taxa-lists/taxa-lists.tsx
index 0b1626061..548b5f9c8 100644
--- a/ui/src/pages/taxa-lists/taxa-lists.tsx
+++ b/ui/src/pages/taxa-lists/taxa-lists.tsx
@@ -26,6 +26,10 @@ export const TaxaLists = () => {
       sort,
     })
   const canCreate = userPermissions?.includes(UserPermission.Create)
+  const tableColumns = columns({
+    projectId: projectId as string,
+    showActions: canCreate,
+  })
 
   return (
     <>
@@ -42,14 +46,10 @@ export const TaxaLists = () => {
             type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
           />
         )}
-        <SortControl
-          columns={columns(projectId as string)}
-          setSort={setSort}
-          sort={sort}
-        />
+        <SortControl columns={tableColumns} setSort={setSort} sort={sort} />
       </PageHeader>
       <Table
-        columns={columns(projectId as string)}
+        columns={tableColumns}
         error={error}
         isLoading={!id && isLoading}
         items={taxaLists}

From 431dd52d28ad4c50163b09fd81943c43da84f1b5 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Mon, 30 Mar 2026 10:53:52 +0200
Subject: [PATCH 17/26] chore: tweak order of actions

---
 ui/src/pages/jobs/jobs-columns.tsx               |  4 ++--
 .../project/capture-sets/capture-set-columns.tsx | 16 ++++++++--------
 .../pages/project/entities/entities-columns.tsx  | 14 +++++++-------
 .../processing-services-columns.tsx              | 16 ++++++++--------
 ui/src/pages/project/storage/storage-columns.tsx | 12 ++++++------
 ui/src/pages/project/team/team-columns.tsx       |  2 +-
 ui/src/pages/taxa-lists/taxa-list-columns.tsx    | 16 ++++++++--------
 7 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/ui/src/pages/jobs/jobs-columns.tsx b/ui/src/pages/jobs/jobs-columns.tsx
index ce64a1acf..665fcb049 100644
--- a/ui/src/pages/jobs/jobs-columns.tsx
+++ b/ui/src/pages/jobs/jobs-columns.tsx
@@ -145,8 +145,6 @@ export const columns = ({
           sticky: true,
           renderCell: (item: Job) => (
             <div className={styles.jobActions}>
-              {item.canQueue && <QueueJob jobId={item.id} />}
-              {item.canCancel && <CancelJob jobId={item.id} />}
               {item.canDelete && (
                 <DeleteEntityDialog
                   collection={API_ROUTES.JOBS}
@@ -154,6 +152,8 @@ export const columns = ({
                   type={translate(STRING.ENTITY_TYPE_JOB)}
                 />
               )}
+              {item.canCancel && <CancelJob jobId={item.id} />}
+              {item.canQueue && <QueueJob jobId={item.id} />}
             </div>
           ),
         },
diff --git a/ui/src/pages/project/capture-sets/capture-set-columns.tsx b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
index 90f3e4dab..9b5bbb34b 100644
--- a/ui/src/pages/project/capture-sets/capture-set-columns.tsx
+++ b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
@@ -166,7 +166,13 @@ export const columns = ({
           sticky: true,
           renderCell: (item: CaptureSet) => (
             <div className={styles.entityActions}>
-              {item.canPopulate && <PopulateCaptureSet captureSet={item} />}
+              {item.canDelete && (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.CAPTURE_SETS}
+                  id={item.id}
+                  type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
+                />
+              )}
               {item.canUpdate &&
                 SERVER_SAMPLING_METHODS.includes(item.method) && (
                   <UpdateEntityDialog
@@ -175,13 +181,7 @@ export const columns = ({
                     type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
                   />
                 )}
-              {item.canDelete && (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.CAPTURE_SETS}
-                  id={item.id}
-                  type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
-                />
-              )}
+              {item.canPopulate && <PopulateCaptureSet captureSet={item} />}
             </div>
           ),
         },
diff --git a/ui/src/pages/project/entities/entities-columns.tsx b/ui/src/pages/project/entities/entities-columns.tsx
index b2f408bd6..775afe202 100644
--- a/ui/src/pages/project/entities/entities-columns.tsx
+++ b/ui/src/pages/project/entities/entities-columns.tsx
@@ -58,19 +58,19 @@ export const columns = ({
           sticky: true,
           renderCell: (item: Entity) => (
             <div className={styles.entityActions}>
-              {item.canUpdate && (
-                <UpdateEntityDialog
+              {item.canDelete && (
+                <DeleteEntityDialog
                   collection={collection}
-                  entity={item}
+                  id={item.id}
                   type={type}
-                  isCompact
                 />
               )}
-              {item.canDelete && (
-                <DeleteEntityDialog
+              {item.canUpdate && (
+                <UpdateEntityDialog
                   collection={collection}
-                  id={item.id}
+                  entity={item}
                   type={type}
+                  isCompact
                 />
               )}
             </div>
diff --git a/ui/src/pages/project/processing-services/processing-services-columns.tsx b/ui/src/pages/project/processing-services/processing-services-columns.tsx
index 328ea9c86..cf38a2749 100644
--- a/ui/src/pages/project/processing-services/processing-services-columns.tsx
+++ b/ui/src/pages/project/processing-services/processing-services-columns.tsx
@@ -82,23 +82,23 @@ export const columns = ({
           sticky: true,
           renderCell: (item: ProcessingService) => (
             <div className={styles.entityActions}>
+              {item.canDelete && (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.PROCESSING_SERVICES}
+                  id={item.id}
+                  type="service"
+                />
+              )}
               {item.canUpdate && (
                 <>
-                  <PopulateProcessingService processingService={item} />
                   <UpdateEntityDialog
                     collection={API_ROUTES.PROCESSING_SERVICES}
                     entity={item}
                     type="service"
                   />
+                  <PopulateProcessingService processingService={item} />
                 </>
               )}
-              {item.canDelete && (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.PROCESSING_SERVICES}
-                  id={item.id}
-                  type="service"
-                />
-              )}
             </div>
           ),
         },
diff --git a/ui/src/pages/project/storage/storage-columns.tsx b/ui/src/pages/project/storage/storage-columns.tsx
index 1ebfe52d7..cb602e258 100644
--- a/ui/src/pages/project/storage/storage-columns.tsx
+++ b/ui/src/pages/project/storage/storage-columns.tsx
@@ -76,17 +76,17 @@ export const columns = ({
           sticky: true,
           renderCell: (item: StorageSource) => (
             <div className={styles.entityActions}>
-              {item.canUpdate && (
-                <UpdateEntityDialog
+              {item.canDelete && (
+                <DeleteEntityDialog
                   collection={API_ROUTES.STORAGE}
-                  entity={item}
+                  id={item.id}
                   type="storage"
                 />
               )}
-              {item.canDelete && (
-                <DeleteEntityDialog
+              {item.canUpdate && (
+                <UpdateEntityDialog
                   collection={API_ROUTES.STORAGE}
-                  id={item.id}
+                  entity={item}
                   type="storage"
                 />
               )}
diff --git a/ui/src/pages/project/team/team-columns.tsx b/ui/src/pages/project/team/team-columns.tsx
index 19a33ac08..b33e68919 100644
--- a/ui/src/pages/project/team/team-columns.tsx
+++ b/ui/src/pages/project/team/team-columns.tsx
@@ -95,8 +95,8 @@ export const columns = ({
                 ) : null
               ) : (
                 <>
-                  {item.canUpdate ? <ManageAccessDialog member={item} /> : null}
                   {item.canDelete ? <RemoveMemberDialog member={item} /> : null}
+                  {item.canUpdate ? <ManageAccessDialog member={item} /> : null}
                 </>
               )}
             </div>
diff --git a/ui/src/pages/taxa-lists/taxa-list-columns.tsx b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
index 09f7e8e40..e7d43e5c1 100644
--- a/ui/src/pages/taxa-lists/taxa-list-columns.tsx
+++ b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
@@ -85,8 +85,12 @@ export const columns = ({
           sticky: true,
           renderCell: (item: TaxaList) => (
             <div className="flex items-center justify-end gap-2 p-4">
-              {item.canUpdate ? (
-                <AddTaxaListTaxonPopover taxaListId={item.id} />
+              {item.canDelete ? (
+                <DeleteEntityDialog
+                  collection={API_ROUTES.TAXA_LISTS}
+                  id={item.id}
+                  type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
+                />
               ) : null}
               {item.canUpdate ? (
                 <UpdateEntityDialog
@@ -96,12 +100,8 @@ export const columns = ({
                   type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
                 />
               ) : null}
-              {item.canDelete ? (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.TAXA_LISTS}
-                  id={item.id}
-                  type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
-                />
+              {item.canUpdate ? (
+                <AddTaxaListTaxonPopover taxaListId={item.id} />
               ) : null}
             </div>
           ),

From 2505a1cb6d84e5ee070dedb9706cc8d0269c758e Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Mon, 30 Mar 2026 11:47:30 +0200
Subject: [PATCH 18/26] layout: use compact action buttons

---
 ui/package.json                               |  2 +-
 .../components/tooltip/basic-tooltip.tsx      | 12 ++++---
 .../capture-sets/populate-capture-set.tsx     | 21 ++++++++----
 .../processing-services-actions.tsx           | 19 +++++++----
 .../pages/project/team/leave-team-dialog.tsx  | 19 +++++++----
 .../project/team/manage-access-dialog.tsx     | 18 ++++++++---
 ui/src/pages/project/team/team-columns.tsx    |  2 +-
 .../add-taxa-list-taxon-popover.tsx           | 32 ++++++++++++++-----
 .../remove-taxa-list-taxon-dialog.tsx         | 21 ++++++------
 ui/src/pages/taxa-lists/taxa-list-columns.tsx |  2 +-
 ui/yarn.lock                                  | 10 +++---
 11 files changed, 103 insertions(+), 55 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index c7db5adae..b0ef85d78 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -29,7 +29,7 @@
     "leaflet": "^1.9.3",
     "lodash": "^4.17.21",
     "lucide-react": "^1.0.1",
-    "nova-ui-kit": "^1.1.33",
+    "nova-ui-kit": "^1.1.34",
     "plotly.js": "^2.25.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/ui/src/design-system/components/tooltip/basic-tooltip.tsx b/ui/src/design-system/components/tooltip/basic-tooltip.tsx
index 6f9c3e47f..ff730b7d1 100644
--- a/ui/src/design-system/components/tooltip/basic-tooltip.tsx
+++ b/ui/src/design-system/components/tooltip/basic-tooltip.tsx
@@ -26,11 +26,13 @@ export const BasicTooltip = ({
         <Tooltip.Trigger asChild={asChild} onClick={onTriggerClick}>
           {children}
         </Tooltip.Trigger>
-        <Tooltip.Content className="max-w-xs" side="bottom" align={align}>
-          <span className="block text-center whitespace-break-spaces">
-            {content}
-          </span>
-        </Tooltip.Content>
+        <Tooltip.Portal>
+          <Tooltip.Content className="max-w-xs" side="bottom" align={align}>
+            <span className="block text-center whitespace-break-spaces">
+              {content}
+            </span>
+          </Tooltip.Content>
+        </Tooltip.Portal>
       </Tooltip.Root>
     </Tooltip.Provider>
   )
diff --git a/ui/src/pages/project/capture-sets/populate-capture-set.tsx b/ui/src/pages/project/capture-sets/populate-capture-set.tsx
index 4edb20657..af3c38919 100644
--- a/ui/src/pages/project/capture-sets/populate-capture-set.tsx
+++ b/ui/src/pages/project/capture-sets/populate-capture-set.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import { usePopulateCaptureSet } from 'data-services/hooks/capture-sets/usePopulateCaptureSet'
 import { CaptureSet } from 'data-services/models/capture-set'
 import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
-import { AlertCircleIcon, Loader2 } from 'lucide-react'
+import { AlertCircleIcon, Loader2, RefreshCcwIcon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 
@@ -17,19 +17,26 @@ export const PopulateCaptureSet = ({
     <BasicTooltip
       asChild
       content={
-        error ? 'Could not populate the capture set, please retry.' : undefined
+        error
+          ? 'Could not populate the capture set, please retry.'
+          : translate(STRING.POPULATE)
       }
     >
       <Button
+        aria-label={translate(STRING.POPULATE)}
         className={classNames({ 'text-destructive': error })}
         disabled={isLoading}
         onClick={() => populateCaptureSet(captureSet.id)}
-        size="small"
-        variant="outline"
+        size="icon"
+        variant="ghost"
       >
-        {error ? <AlertCircleIcon className="w-4 h-4" /> : null}
-        <span>{translate(STRING.POPULATE)}</span>
-        {isLoading ? <Loader2 className="w-4 h-4 ml-2 animate-spin" /> : null}
+        {error ? (
+          <AlertCircleIcon className="w-4 h-4" />
+        ) : isLoading ? (
+          <Loader2 className="w-4 h-4 ml-2 animate-spin" />
+        ) : (
+          <RefreshCcwIcon className="w-4 h-4" />
+        )}
       </Button>
     </BasicTooltip>
   )
diff --git a/ui/src/pages/project/processing-services/processing-services-actions.tsx b/ui/src/pages/project/processing-services/processing-services-actions.tsx
index d14262e1e..16680e9a8 100644
--- a/ui/src/pages/project/processing-services/processing-services-actions.tsx
+++ b/ui/src/pages/project/processing-services/processing-services-actions.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import { usePopulateProcessingService } from 'data-services/hooks/processing-services/usePopulateProcessingService'
 import { ProcessingService } from 'data-services/models/processing-service'
 import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
-import { AlertCircleIcon, Loader2 } from 'lucide-react'
+import { AlertCircleIcon, Loader2, RefreshCcwIcon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 
@@ -20,19 +20,24 @@ export const PopulateProcessingService = ({
       content={
         error
           ? 'Could not register the pipelines, please check the endpoint URL.'
-          : undefined
+          : translate(STRING.REGISTER_PIPELINES)
       }
     >
       <Button
+        aria-label={translate(STRING.REGISTER_PIPELINES)}
         className={classNames({ 'text-destructive': error })}
         disabled={isLoading}
         onClick={() => populateProcessingService(processingService.id)}
-        size="small"
-        variant="outline"
+        size="icon"
+        variant="ghost"
       >
-        {error ? <AlertCircleIcon className="w-4 h-4" /> : null}
-        <span>{translate(STRING.REGISTER_PIPELINES)}</span>
-        {isLoading ? <Loader2 className="w-4 h-4 ml-2 animate-spin" /> : null}
+        {error ? (
+          <AlertCircleIcon className="w-4 h-4" />
+        ) : isLoading ? (
+          <Loader2 className="w-4 h-4 ml-2 animate-spin" />
+        ) : (
+          <RefreshCcwIcon className="w-4 h-4" />
+        )}
       </Button>
     </BasicTooltip>
   )
diff --git a/ui/src/pages/project/team/leave-team-dialog.tsx b/ui/src/pages/project/team/leave-team-dialog.tsx
index 0d2e6ae52..a956fa7fb 100644
--- a/ui/src/pages/project/team/leave-team-dialog.tsx
+++ b/ui/src/pages/project/team/leave-team-dialog.tsx
@@ -2,7 +2,8 @@ import { FormError, FormSection } from 'components/form/layout/layout'
 import { useRemoveMember } from 'data-services/hooks/team/useRemoveMember'
 import { Member } from 'data-services/models/member'
 import * as Dialog from 'design-system/components/dialog/dialog'
-import { CheckIcon, Loader2Icon } from 'lucide-react'
+import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
+import { CheckIcon, Loader2Icon, LogOutIcon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
 import { useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
@@ -22,11 +23,17 @@ export const LeaveTeamDialog = ({ member }: { member: Member }) => {
 
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Trigger asChild>
-        <Button size="small" variant="outline">
-          <span>{translate(STRING.LEAVE_TEAM)}</span>
-        </Button>
-      </Dialog.Trigger>
+      <BasicTooltip asChild content={translate(STRING.LEAVE_TEAM)}>
+        <Dialog.Trigger asChild>
+          <Button
+            aria-label={translate(STRING.LEAVE_TEAM)}
+            size="icon"
+            variant="ghost"
+          >
+            <LogOutIcon className="w-4 h-4" />
+          </Button>
+        </Dialog.Trigger>
+      </BasicTooltip>
       <Dialog.Content ariaCloselabel={translate(STRING.CLOSE)} isCompact>
         {errorMessage && (
           <FormError
diff --git a/ui/src/pages/project/team/manage-access-dialog.tsx b/ui/src/pages/project/team/manage-access-dialog.tsx
index 76ef5f35d..d3c73dfb6 100644
--- a/ui/src/pages/project/team/manage-access-dialog.tsx
+++ b/ui/src/pages/project/team/manage-access-dialog.tsx
@@ -9,6 +9,8 @@ import { Member } from 'data-services/models/member'
 import { SaveButton } from 'design-system/components/button/save-button'
 import * as Dialog from 'design-system/components/dialog/dialog'
 import { InputContent } from 'design-system/components/input/input'
+import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
+import { SettingsIcon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
@@ -31,11 +33,17 @@ export const ManageAccessDialog = ({ member }: { member: Member }) => {
 
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Trigger asChild>
-        <Button size="small" variant="outline">
-          <span>{translate(STRING.MANAGE_ACCESS)}</span>
-        </Button>
-      </Dialog.Trigger>
+      <BasicTooltip asChild content={translate(STRING.MANAGE_ACCESS)}>
+        <Dialog.Trigger asChild>
+          <Button
+            aria-label={translate(STRING.MANAGE_ACCESS)}
+            size="icon"
+            variant="ghost"
+          >
+            <SettingsIcon className="w-4 h-4" />
+          </Button>
+        </Dialog.Trigger>
+      </BasicTooltip>
       <Dialog.Content ariaCloselabel={translate(STRING.CLOSE)} isCompact>
         {errorMessage && (
           <FormError
diff --git a/ui/src/pages/project/team/team-columns.tsx b/ui/src/pages/project/team/team-columns.tsx
index b33e68919..cd9d20940 100644
--- a/ui/src/pages/project/team/team-columns.tsx
+++ b/ui/src/pages/project/team/team-columns.tsx
@@ -88,7 +88,7 @@ export const columns = ({
           name: '',
           sticky: true,
           renderCell: (item: Member) => (
-            <div className="flex items-center justify-end p-4 gap-2">
+            <div className="flex items-center justify-start p-4 gap-2">
               {item.userId === userId ? (
                 item.canDelete ? (
                   <LeaveTeamDialog member={item} />
diff --git a/ui/src/pages/taxa-list-details/add-taxa-list-taxon/add-taxa-list-taxon-popover.tsx b/ui/src/pages/taxa-list-details/add-taxa-list-taxon/add-taxa-list-taxon-popover.tsx
index 4066a85c2..f4ed2ba03 100644
--- a/ui/src/pages/taxa-list-details/add-taxa-list-taxon/add-taxa-list-taxon-popover.tsx
+++ b/ui/src/pages/taxa-list-details/add-taxa-list-taxon/add-taxa-list-taxon-popover.tsx
@@ -1,3 +1,4 @@
+import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
 import { PlusIcon } from 'lucide-react'
 import { Button, Popover } from 'nova-ui-kit'
 import { useState } from 'react'
@@ -5,15 +6,28 @@ import { STRING, translate } from 'utils/language'
 import { AddTaxaListTaxon } from './add-taxa-list-taxon'
 
 export const AddTaxaListTaxonPopover = ({
+  compact,
   taxaListId,
 }: {
+  compact?: boolean
   taxaListId: string
 }) => {
   const [open, setOpen] = useState(false)
+  const buttonLabel = translate(STRING.ENTITY_ADD, {
+    type: translate(STRING.ENTITY_TYPE_TAXON),
+  })
 
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>
+      {compact ? (
+        <BasicTooltip asChild content={buttonLabel}>
+          <Popover.Trigger asChild>
+            <Button aria-label={buttonLabel} size="icon" variant="ghost">
+              <PlusIcon className="w-4 h-4" />
+            </Button>
+          </Popover.Trigger>
+        </BasicTooltip>
+      ) : (
         <Button size="small" variant="outline">
           <PlusIcon className="w-4 h-4" />
           <span>
@@ -22,13 +36,15 @@ export const AddTaxaListTaxonPopover = ({
             })}
           </span>
         </Button>
-      </Popover.Trigger>
-      <Popover.Content align="end" className="p-0 w-72">
-        <AddTaxaListTaxon
-          onCancel={() => setOpen(false)}
-          taxaListId={taxaListId}
-        />
-      </Popover.Content>
+      )}
+      <Popover.Portal>
+        <Popover.Content align="end" className="p-0 w-72">
+          <AddTaxaListTaxon
+            onCancel={() => setOpen(false)}
+            taxaListId={taxaListId}
+          />
+        </Popover.Content>
+      </Popover.Portal>
     </Popover.Root>
   )
 }
diff --git a/ui/src/pages/taxa-list-details/remove-taxa-list-taxon/remove-taxa-list-taxon-dialog.tsx b/ui/src/pages/taxa-list-details/remove-taxa-list-taxon/remove-taxa-list-taxon-dialog.tsx
index b5e628c86..080bb0530 100644
--- a/ui/src/pages/taxa-list-details/remove-taxa-list-taxon/remove-taxa-list-taxon-dialog.tsx
+++ b/ui/src/pages/taxa-list-details/remove-taxa-list-taxon/remove-taxa-list-taxon-dialog.tsx
@@ -1,6 +1,7 @@
 import { FormError, FormSection } from 'components/form/layout/layout'
 import { useRemoveTaxaListTaxon } from 'data-services/hooks/taxa-lists/useRemoveTaxaListTaxon'
 import * as Dialog from 'design-system/components/dialog/dialog'
+import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
 import { CheckIcon, Loader2Icon, XIcon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
 import { useState } from 'react'
@@ -23,15 +24,17 @@ export const RemoveTaxaListTaxonDialog = ({
 
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Trigger asChild>
-        <Button
-          aria-label={translate(STRING.REMOVE_TAXA_LIST_TAXON)}
-          size="icon"
-          variant="ghost"
-        >
-          <XIcon className="w-4 h-4" />
-        </Button>
-      </Dialog.Trigger>
+      <BasicTooltip asChild content={translate(STRING.REMOVE_TAXA_LIST_TAXON)}>
+        <Dialog.Trigger asChild>
+          <Button
+            aria-label={translate(STRING.REMOVE_TAXA_LIST_TAXON)}
+            size="icon"
+            variant="ghost"
+          >
+            <XIcon className="w-4 h-4" />
+          </Button>
+        </Dialog.Trigger>
+      </BasicTooltip>
       <Dialog.Content ariaCloselabel={translate(STRING.CLOSE)} isCompact>
         {errorMessage && (
           <FormError
diff --git a/ui/src/pages/taxa-lists/taxa-list-columns.tsx b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
index e7d43e5c1..45a8b6577 100644
--- a/ui/src/pages/taxa-lists/taxa-list-columns.tsx
+++ b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
@@ -101,7 +101,7 @@ export const columns = ({
                 />
               ) : null}
               {item.canUpdate ? (
-                <AddTaxaListTaxonPopover taxaListId={item.id} />
+                <AddTaxaListTaxonPopover compact taxaListId={item.id} />
               ) : null}
             </div>
           ),
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 511a2b742..f97a98451 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -5118,7 +5118,7 @@ __metadata:
     leaflet: "npm:^1.9.3"
     lodash: "npm:^4.17.21"
     lucide-react: "npm:^1.0.1"
-    nova-ui-kit: "npm:^1.1.33"
+    nova-ui-kit: "npm:^1.1.34"
     plotly.js: "npm:^2.25.2"
     postcss: "npm:^8.4.47"
     prettier: "npm:2.8.4"
@@ -10509,9 +10509,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nova-ui-kit@npm:^1.1.33":
-  version: 1.1.33
-  resolution: "nova-ui-kit@npm:1.1.33"
+"nova-ui-kit@npm:^1.1.34":
+  version: 1.1.34
+  resolution: "nova-ui-kit@npm:1.1.34"
   dependencies:
     "@radix-ui/react-checkbox": "npm:^1.1.4"
     "@radix-ui/react-collapsible": "npm:^1.1.1"
@@ -10531,7 +10531,7 @@ __metadata:
     react-dom: "npm:^18.3.1"
     tailwind-merge: "npm:^2.5.4"
     tailwindcss-animate: "npm:^1.0.7"
-  checksum: a29d22052a4f83a6b997e6bb66f4226625b7dbd05faf4f03824af8b353cf75e7a25ffbe06aafe91b8d3cf6e51b5febba1f013cce3c60faae669278c7f4ccbae2
+  checksum: 4b3341ebebc715c79b5172870b30b33f65381bbf8d2acdcdda292e7be662592e32d188e9e33efd650c548211e45bef62efbb6af2ba464fb1eae37a31a02512db
   languageName: node
   linkType: hard
 

From 61e1694c6f79c59c8e5c086e1fe6ba1a1ab26eb7 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Mon, 30 Mar 2026 11:54:56 +0200
Subject: [PATCH 19/26] layout: streamline delete form layout

---
 .../form/delete-form/delete-form.tsx          | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/form/delete-form/delete-form.tsx b/ui/src/components/form/delete-form/delete-form.tsx
index f161dddaa..abe386bf9 100644
--- a/ui/src/components/form/delete-form/delete-form.tsx
+++ b/ui/src/components/form/delete-form/delete-form.tsx
@@ -2,7 +2,7 @@ import { CheckIcon, Loader2Icon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 import { parseServerError } from 'utils/parseServerError/parseServerError'
-import { FormError } from '../layout/layout'
+import { FormError, FormSection } from '../layout/layout'
 
 export const DeleteForm = ({
   type,
@@ -23,17 +23,12 @@ export const DeleteForm = ({
 
   return (
     <>
-      {errorMessage ? (
-        <FormError message={errorMessage} style={{ padding: '8px 16px' }} />
-      ) : null}
-      <div className="grid gap-4 px-4 py-6">
-        <span className="body-overline-small font-semibold text-muted-foreground">
-          {translate(STRING.ENTITY_DELETE, { type })}
-        </span>
-        <span className="body-small">
-          {translate(STRING.MESSAGE_DELETE_CONFIRM, { type })}
-        </span>
-        <div className="grid grid-cols-2 gap-4">
+      {errorMessage && <FormError message={errorMessage} />}
+      <FormSection
+        title={translate(STRING.ENTITY_DELETE, { type })}
+        description={translate(STRING.MESSAGE_DELETE_CONFIRM, { type })}
+      >
+        <div className="flex justify-end gap-4">
           <Button onClick={onCancel} size="small" variant="outline">
             <span>{translate(STRING.CANCEL)}</span>
           </Button>
@@ -53,7 +48,7 @@ export const DeleteForm = ({
             ) : null}
           </Button>
         </div>
-      </div>
+      </FormSection>
     </>
   )
 }

From 0972e93441fc24d1489f78fd2a1529992e4d8dd6 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Tue, 31 Mar 2026 11:05:58 +0200
Subject: [PATCH 20/26] feat: add more tooltips

---
 ui/src/data-services/models/species.ts                |  6 ++----
 ui/src/pages/captures/capture-columns.tsx             |  3 +++
 ui/src/pages/deployments/deployment-columns.tsx       | 11 +++++++++--
 ui/src/pages/jobs/jobs-columns.tsx                    |  4 ++++
 ui/src/pages/occurrences/occurrence-columns.tsx       |  2 ++
 .../project/capture-sets/capture-set-columns.tsx      |  4 ++++
 ui/src/pages/sessions/session-columns.tsx             |  3 +++
 ui/src/pages/species-details/species-details.tsx      |  9 ++++++++-
 ui/src/pages/species/species-columns.tsx              |  4 +---
 ui/src/utils/useFilters.ts                            |  1 +
 10 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/ui/src/data-services/models/species.ts b/ui/src/data-services/models/species.ts
index 082144af4..e507eca4f 100644
--- a/ui/src/data-services/models/species.ts
+++ b/ui/src/data-services/models/species.ts
@@ -64,14 +64,12 @@ export class Species extends Taxon {
       : undefined
   }
 
-  get lastSeenLabel() {
+  get lastSeen() {
     if (!this._species.last_detected) {
       return undefined
     }
 
-    const date = new Date(this._species.last_detected)
-
-    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
+    return new Date(this._species.last_detected)
   }
 
   get numDetections(): number {
diff --git a/ui/src/pages/captures/capture-columns.tsx b/ui/src/pages/captures/capture-columns.tsx
index 3cd220144..c7c4164b2 100644
--- a/ui/src/pages/captures/capture-columns.tsx
+++ b/ui/src/pages/captures/capture-columns.tsx
@@ -80,6 +80,7 @@ export const columns = ({
   {
     id: 'deployment',
     name: translate(STRING.FIELD_LABEL_DEPLOYMENT),
+    tooltip: translate(STRING.TOOLTIP_DEPLOYMENT),
     sortField: 'deployment__name',
     renderCell: (item: Capture) => {
       if (!item.deploymentId) {
@@ -104,6 +105,7 @@ export const columns = ({
   {
     id: 'session',
     name: translate(STRING.FIELD_LABEL_SESSION),
+    tooltip: translate(STRING.TOOLTIP_SESSION),
     sortField: 'event__start',
     renderCell: (item: Capture) => {
       if (!item.sessionId) {
@@ -152,6 +154,7 @@ export const columns = ({
   {
     id: 'occurrences',
     name: translate(STRING.FIELD_LABEL_OCCURRENCES),
+    tooltip: translate(STRING.TOOLTIP_OCCURRENCE),
     sortField: 'occurrences_count',
     styles: {
       textAlign: TextAlign.Right,
diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx
index 8531ba853..55f1d5156 100644
--- a/ui/src/pages/deployments/deployment-columns.tsx
+++ b/ui/src/pages/deployments/deployment-columns.tsx
@@ -63,13 +63,15 @@ export const columns = ({
   {
     id: 'device',
     name: translate(STRING.FIELD_LABEL_DEVICE),
+    tooltip: translate(STRING.TOOLTIP_DEVICE),
     renderCell: (item: Deployment) => (
       <BasicTableCell value={item.device?.name} />
     ),
   },
   {
-    id: 'research-site',
-    name: translate(STRING.FIELD_LABEL_RESEARCH_SITE),
+    id: 'site',
+    name: translate(STRING.FIELD_LABEL_SITE),
+    tooltip: translate(STRING.TOOLTIP_SITE),
     renderCell: (item: Deployment) => (
       <BasicTableCell value={item.researchSite?.name} />
     ),
@@ -77,6 +79,7 @@ export const columns = ({
   {
     id: 'status',
     name: 'Latest job status',
+    tooltip: translate(STRING.TOOLTIP_STATUS),
     renderCell: (item: Deployment) => {
       if (!item.currentJob) {
         return <></>
@@ -94,6 +97,7 @@ export const columns = ({
   {
     id: 'jobs',
     name: translate(STRING.FIELD_LABEL_JOBS),
+    tooltip: translate(STRING.TOOLTIP_JOB),
     styles: {
       textAlign: TextAlign.Right,
     },
@@ -111,6 +115,7 @@ export const columns = ({
   {
     id: 'captures',
     name: translate(STRING.FIELD_LABEL_CAPTURES),
+    tooltip: translate(STRING.TOOLTIP_CAPTURE),
     sortField: 'captures_count',
     styles: {
       textAlign: TextAlign.Right,
@@ -129,6 +134,7 @@ export const columns = ({
   {
     id: 'sessions',
     name: translate(STRING.FIELD_LABEL_SESSIONS),
+    tooltip: translate(STRING.TOOLTIP_SESSION),
     sortField: 'events_count',
     styles: {
       textAlign: TextAlign.Right,
@@ -147,6 +153,7 @@ export const columns = ({
   {
     id: 'occurrences',
     name: translate(STRING.FIELD_LABEL_OCCURRENCES),
+    tooltip: translate(STRING.TOOLTIP_OCCURRENCE),
     sortField: 'occurrences_count',
     styles: {
       textAlign: TextAlign.Right,
diff --git a/ui/src/pages/jobs/jobs-columns.tsx b/ui/src/pages/jobs/jobs-columns.tsx
index 665fcb049..ccea44044 100644
--- a/ui/src/pages/jobs/jobs-columns.tsx
+++ b/ui/src/pages/jobs/jobs-columns.tsx
@@ -57,6 +57,7 @@ export const columns = ({
     id: 'deployment',
     sortField: 'deployment',
     name: translate(STRING.FIELD_LABEL_DEPLOYMENT),
+    tooltip: translate(STRING.TOOLTIP_DEPLOYMENT),
     renderCell: (item: Job) =>
       item.deployment ? (
         <Link
@@ -78,11 +79,13 @@ export const columns = ({
     id: 'pipeline',
     sortField: 'pipeline',
     name: translate(STRING.FIELD_LABEL_PIPELINE),
+    tooltip: translate(STRING.TOOLTIP_PIPELINE),
     renderCell: (item: Job) => <BasicTableCell value={item.pipeline?.name} />,
   },
   {
     id: 'source-image',
     name: translate(STRING.FIELD_LABEL_CAPTURE),
+    tooltip: translate(STRING.TOOLTIP_CAPTURE),
     renderCell: (item: Job) =>
       item.sourceImage?.sessionId ? (
         <Link
@@ -109,6 +112,7 @@ export const columns = ({
     id: 'source-image-collection',
     sortField: 'source_image_collection',
     name: translate(STRING.FIELD_LABEL_CAPTURE_SET),
+    tooltip: translate(STRING.TOOLTIP_CAPTURE_SET),
     renderCell: (item: Job) => (
       <BasicTableCell value={item.sourceImages?.name} />
     ),
diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx
index 2091b730a..333eb3d56 100644
--- a/ui/src/pages/occurrences/occurrence-columns.tsx
+++ b/ui/src/pages/occurrences/occurrence-columns.tsx
@@ -92,6 +92,7 @@ export const columns: (
   {
     id: 'deployment',
     name: translate(STRING.FIELD_LABEL_DEPLOYMENT),
+    tooltip: translate(STRING.TOOLTIP_DEPLOYMENT),
     sortField: 'deployment',
     renderCell: (item: Occurrence) => {
       if (!item.deploymentId) {
@@ -116,6 +117,7 @@ export const columns: (
   {
     id: 'session',
     name: translate(STRING.FIELD_LABEL_SESSION),
+    tooltip: translate(STRING.TOOLTIP_SESSION),
     sortField: 'event',
     renderCell: (item: Occurrence) => {
       if (!item.sessionId) {
diff --git a/ui/src/pages/project/capture-sets/capture-set-columns.tsx b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
index 9b5bbb34b..84994e2cd 100644
--- a/ui/src/pages/project/capture-sets/capture-set-columns.tsx
+++ b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
@@ -50,6 +50,7 @@ export const columns = ({
   {
     id: 'status',
     name: 'Latest job status',
+    tooltip: translate(STRING.TOOLTIP_STATUS),
     renderCell: (item: CaptureSet) => {
       if (!item.currentJob) {
         return <></>
@@ -67,6 +68,7 @@ export const columns = ({
   {
     id: 'jobs',
     name: translate(STRING.FIELD_LABEL_JOBS),
+    tooltip: translate(STRING.TOOLTIP_JOB),
     styles: {
       textAlign: TextAlign.Right,
     },
@@ -84,6 +86,7 @@ export const columns = ({
   {
     id: 'captures',
     name: 'Captures',
+    tooltip: translate(STRING.TOOLTIP_CAPTURE),
     sortField: 'source_images_count',
     styles: {
       textAlign: TextAlign.Right,
@@ -122,6 +125,7 @@ export const columns = ({
   {
     id: 'occurrences',
     name: translate(STRING.FIELD_LABEL_OCCURRENCES),
+    tooltip: translate(STRING.TOOLTIP_OCCURRENCE),
     sortField: 'occurrences_count',
     styles: {
       textAlign: TextAlign.Right,
diff --git a/ui/src/pages/sessions/session-columns.tsx b/ui/src/pages/sessions/session-columns.tsx
index 6520e6aa6..8ebb104b8 100644
--- a/ui/src/pages/sessions/session-columns.tsx
+++ b/ui/src/pages/sessions/session-columns.tsx
@@ -53,6 +53,7 @@ export const columns = ({
   {
     id: 'deployment',
     name: translate(STRING.FIELD_LABEL_DEPLOYMENT),
+    tooltip: translate(STRING.TOOLTIP_DEPLOYMENT),
     sortField: 'deployment',
     renderCell: (item: Session) => (
       <Link
@@ -95,6 +96,7 @@ export const columns = ({
   {
     id: 'captures',
     name: translate(STRING.FIELD_LABEL_CAPTURES),
+    tooltip: translate(STRING.TOOLTIP_CAPTURE),
     sortField: 'captures_count',
     styles: {
       textAlign: TextAlign.Right,
@@ -104,6 +106,7 @@ export const columns = ({
   {
     id: 'occurrences',
     name: translate(STRING.FIELD_LABEL_OCCURRENCES),
+    tooltip: translate(STRING.TOOLTIP_OCCURRENCE),
     sortField: 'occurrences_count',
     styles: {
       textAlign: TextAlign.Right,
diff --git a/ui/src/pages/species-details/species-details.tsx b/ui/src/pages/species-details/species-details.tsx
index 2c8c8a56b..b599b8642 100644
--- a/ui/src/pages/species-details/species-details.tsx
+++ b/ui/src/pages/species-details/species-details.tsx
@@ -16,6 +16,7 @@ import { buttonVariants, TaxonDetails } from 'nova-ui-kit'
 import { Helmet } from 'react-helmet-async'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
+import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 import { UserPermission } from 'utils/user/types'
@@ -121,7 +122,13 @@ export const SpeciesDetails = ({
                   </InfoBlockField>
                 ) : null}
                 <InfoBlockField label="Last seen">
-                  <InfoBlockFieldValue value={species.lastSeenLabel} />
+                  <InfoBlockFieldValue
+                    value={
+                      species.lastSeen
+                        ? getFormatedDateTimeString({ date: species.lastSeen })
+                        : undefined
+                    }
+                  />
                 </InfoBlockField>
                 {hasChildren ? (
                   <InfoBlockField label="Child taxa">
diff --git a/ui/src/pages/species/species-columns.tsx b/ui/src/pages/species/species-columns.tsx
index 0e0a7cfa3..49bf330ad 100644
--- a/ui/src/pages/species/species-columns.tsx
+++ b/ui/src/pages/species/species-columns.tsx
@@ -75,9 +75,7 @@ export const columns: (project: {
     id: 'last-seen',
     sortField: 'last_detected',
     name: 'Last seen',
-    renderCell: (item: Species) => (
-      <BasicTableCell value={item.lastSeenLabel} />
-    ),
+    renderCell: (item: Species) => <DateTableCell date={item.lastSeen} />,
   },
   {
     id: 'occurrences',
diff --git a/ui/src/utils/useFilters.ts b/ui/src/utils/useFilters.ts
index 656e5c6f0..393ac9490 100644
--- a/ui/src/utils/useFilters.ts
+++ b/ui/src/utils/useFilters.ts
@@ -185,6 +185,7 @@ export const AVAILABLE_FILTERS = (projectId: string): FilterConfig[] => [
   {
     label: 'Status',
     field: 'status',
+    tooltip: { text: translate(STRING.TOOLTIP_STATUS) },
   },
   {
     label: 'Type',

From 853e44d935a519942a3e57bb7bd0593d1c56f812 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Tue, 31 Mar 2026 11:32:35 +0200
Subject: [PATCH 21/26] copy: tweak copy after feedback

---
 .../blueprint-collection/blueprint-collection.tsx    |  2 +-
 .../pages/session-details/playback/frame/frame.tsx   |  6 ++----
 ui/src/utils/language.ts                             | 12 +++++-------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/blueprint-collection/blueprint-collection.tsx b/ui/src/components/blueprint-collection/blueprint-collection.tsx
index a31022e38..c12c3d7f5 100644
--- a/ui/src/components/blueprint-collection/blueprint-collection.tsx
+++ b/ui/src/components/blueprint-collection/blueprint-collection.tsx
@@ -75,7 +75,7 @@ export const BlueprintItem = ({
             className={buttonVariants({ size: 'small', variant: 'ghost' })}
             to={item.to}
           >
-            <span>{translate(STRING.VIEW_IN_CONTEXT)}</span>
+            <span>{translate(STRING.VIEW_IN_SESSION)}</span>
             <ChevronRightIcon className="w-4 h-4" />
           </Link>
         ) : null}
diff --git a/ui/src/pages/session-details/playback/frame/frame.tsx b/ui/src/pages/session-details/playback/frame/frame.tsx
index c5b2c0f9c..d1738adb5 100644
--- a/ui/src/pages/session-details/playback/frame/frame.tsx
+++ b/ui/src/pages/session-details/playback/frame/frame.tsx
@@ -3,7 +3,6 @@ import { useOccurrenceDetails } from 'data-services/hooks/occurrences/useOccurre
 import { CaptureDetection } from 'data-services/models/capture'
 import * as Dialog from 'design-system/components/dialog/dialog'
 import { LoadingSpinner } from 'design-system/components/loading-spinner/loading-spinner'
-import { ExternalLinkIcon } from 'lucide-react'
 import { Tooltip } from 'nova-ui-kit'
 import {
   OccurrenceDetails,
@@ -248,7 +247,7 @@ const FrameDetections = ({
                       {detection.label}
                     </span>
                     <div className="flex items-center justify-between gap-4">
-                      <span className="pt-0.5 body-small">
+                      <span className="body-small">
                         ({detection.scoreLabel})
                       </span>
                       <button
@@ -258,8 +257,7 @@ const FrameDetections = ({
                           setActiveOccurrence(detection.occurrenceId)
                         }
                       >
-                        <span className="pt-0.5">{translate(STRING.VIEW)}</span>
-                        <ExternalLinkIcon className="w-4 h-4" />
+                        <span>{translate(STRING.DETAILS)}</span>
                       </button>
                     </div>
                   </div>
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index b8b0af7f3..59dea8e68 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -131,7 +131,6 @@ export enum STRING {
   FIELD_LABEL_PROCESS,
   FIELD_LABEL_PROJECT,
   FIELD_LABEL_RECORDS_EXPORTED,
-  FIELD_LABEL_RESEARCH_SITE,
   FIELD_LABEL_RESOLUTION,
   FIELD_LABEL_RESULT,
   FIELD_LABEL_ROLE,
@@ -273,6 +272,7 @@ export enum STRING {
   CONFIGURE,
   CONNECTED,
   CONNECTING,
+  DETAILS,
   EXTERNAL_RESOURCES,
   FORGOT_PASSWORD_DETAILS,
   FORGOT_PASSWORD,
@@ -317,8 +317,7 @@ export enum STRING {
   VALUE_NOT_AVAILABLE,
   VERIFIED_BY,
   VERIFIED,
-  VIEW,
-  VIEW_IN_CONTEXT,
+  VIEW_IN_SESSION,
   YOU,
 }
 
@@ -433,13 +432,12 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_PROCESS]: 'Process',
   [STRING.FIELD_LABEL_PROJECT]: 'Project',
   [STRING.FIELD_LABEL_RECORDS_EXPORTED]: 'Records exported',
-  [STRING.FIELD_LABEL_RESEARCH_SITE]: 'Research site',
   [STRING.FIELD_LABEL_RESOLUTION]: 'Resolution',
   [STRING.FIELD_LABEL_RESULT]: 'Result',
   [STRING.FIELD_LABEL_ROLE]: 'Role',
   [STRING.FIELD_LABEL_SAMPLE_CAPTURES]: 'Sample images',
   [STRING.FIELD_LABEL_SAMPLING_METHOD]: 'Sampling method',
-  [STRING.FIELD_LABEL_SCORE]: 'Prediction score',
+  [STRING.FIELD_LABEL_SCORE]: 'Score',
   [STRING.FIELD_LABEL_SESSION]: 'Session',
   [STRING.FIELD_LABEL_SESSIONS]: 'Sessions',
   [STRING.FIELD_LABEL_SITE]: 'Site',
@@ -630,6 +628,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.CONFIGURE]: 'Configure',
   [STRING.CONNECTED]: 'Connected',
   [STRING.CONNECTING]: 'Connecting...',
+  [STRING.DETAILS]: 'Details',
   [STRING.EXTERNAL_RESOURCES]: 'External resources',
   [STRING.FORGOT_PASSWORD_DETAILS]: `No worries, we'll send you reset instructions.`,
   [STRING.FORGOT_PASSWORD]: 'Forgot password?',
@@ -645,8 +644,6 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.NEW_ID]: 'New ID',
   [STRING.NOT_CONNECTED]: 'Not connected',
   [STRING.NOT_VERIFIED]: 'Not verified',
-  [STRING.VIEW]: 'View',
-  [STRING.VIEW_IN_CONTEXT]: 'View in context',
   [STRING.OR]: 'Or',
   [STRING.PIPELINES]: 'Pipelines',
   [STRING.RECENT]: 'Recent',
@@ -676,6 +673,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.VALUE_NOT_AVAILABLE]: 'n/a',
   [STRING.VERIFIED_BY]: 'Verified by\n{{name}}',
   [STRING.VERIFIED]: 'Verified',
+  [STRING.VIEW_IN_SESSION]: 'View in session',
   [STRING.YOU]: 'You',
 }
 

From 10d21230353be97d28a57dd2252db278130c9622 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Tue, 31 Mar 2026 11:33:23 +0200
Subject: [PATCH 22/26] feat: add column settings to algorithm table and bring
 back category count column

---
 .../project/algorithms/algorithms-columns.tsx | 20 +++++++++++-----
 .../pages/project/algorithms/algorithms.tsx   | 23 +++++++++++++++++--
 ui/src/pages/project/pipelines/pipelines.tsx  |  2 --
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/ui/src/pages/project/algorithms/algorithms-columns.tsx b/ui/src/pages/project/algorithms/algorithms-columns.tsx
index 72b82a7a3..b9240b7ff 100644
--- a/ui/src/pages/project/algorithms/algorithms-columns.tsx
+++ b/ui/src/pages/project/algorithms/algorithms-columns.tsx
@@ -29,12 +29,6 @@ export const columns = ({
       </Link>
     ),
   },
-  {
-    id: 'task-type',
-    name: 'Task type',
-    sortField: 'task_type',
-    renderCell: (item: Algorithm) => <BasicTableCell value={item.taskType} />,
-  },
   {
     id: 'description',
     name: translate(STRING.FIELD_LABEL_DESCRIPTION),
@@ -45,6 +39,20 @@ export const columns = ({
       />
     ),
   },
+  {
+    id: 'task-type',
+    name: 'Task type',
+    sortField: 'task_type',
+    renderCell: (item: Algorithm) => <BasicTableCell value={item.taskType} />,
+  },
+  {
+    id: 'category-count',
+    name: translate(STRING.FIELD_LABEL_CATEGORY_COUNT),
+    sortField: 'category_count',
+    renderCell: (item: Algorithm) => (
+      <BasicTableCell value={item.categoryCount} />
+    ),
+  },
   {
     id: 'created-at',
     name: translate(STRING.FIELD_LABEL_CREATED_AT),
diff --git a/ui/src/pages/project/algorithms/algorithms.tsx b/ui/src/pages/project/algorithms/algorithms.tsx
index 8c03439d8..c20b31bf4 100644
--- a/ui/src/pages/project/algorithms/algorithms.tsx
+++ b/ui/src/pages/project/algorithms/algorithms.tsx
@@ -1,17 +1,29 @@
 import { useAlgorithms } from 'data-services/hooks/algorithm/useAlgorithms'
 import { PageHeader } from 'design-system/components/page-header/page-header'
 import { PaginationBar } from 'design-system/components/pagination-bar/pagination-bar'
+import { ColumnSettings } from 'design-system/components/table/column-settings/column-settings'
 import { Table } from 'design-system/components/table/table/table'
 import { TableSortSettings } from 'design-system/components/table/types'
 import { AlgorithmDetailsDialog } from 'pages/algorithm-details/algorithm-details-dialog'
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { STRING, translate } from 'utils/language'
+import { useColumnSettings } from 'utils/useColumnSettings'
 import { usePagination } from 'utils/usePagination'
 import { columns } from './algorithms-columns'
 
 export const Algorithms = () => {
   const { projectId, id } = useParams()
+  const { columnSettings, setColumnSettings } = useColumnSettings(
+    'algorithms',
+    {
+      id: true,
+      name: true,
+      description: true,
+      'task-type': true,
+      'category-count': true,
+    }
+  )
   const [sort, setSort] = useState<TableSortSettings | undefined>({
     field: 'id',
     order: 'asc',
@@ -22,6 +34,7 @@ export const Algorithms = () => {
     pagination,
     sort,
   })
+  const tableColumns = columns({ projectId: projectId as string })
 
   return (
     <>
@@ -33,9 +46,15 @@ export const Algorithms = () => {
         isLoading={isLoading}
         isFetching={isFetching}
         tooltip={translate(STRING.TOOLTIP_ALGORITHM)}
-      />
+      >
+        <ColumnSettings
+          columns={tableColumns}
+          columnSettings={columnSettings}
+          onColumnSettingsChange={setColumnSettings}
+        />
+      </PageHeader>
       <Table
-        columns={columns({ projectId: projectId as string })}
+        columns={tableColumns.filter((column) => !!columnSettings[column.id])}
         error={error}
         isLoading={isLoading}
         items={algorithms}
diff --git a/ui/src/pages/project/pipelines/pipelines.tsx b/ui/src/pages/project/pipelines/pipelines.tsx
index b50333b69..f52f0c535 100644
--- a/ui/src/pages/project/pipelines/pipelines.tsx
+++ b/ui/src/pages/project/pipelines/pipelines.tsx
@@ -19,8 +19,6 @@ export const Pipelines = () => {
     id: true,
     name: true,
     description: true,
-    'created-at': true,
-    'updated-at': true,
   })
   const [sort, setSort] = useState<TableSortSettings | undefined>({
     field: 'id',

From df94b0ed663ccfc5870feff478e2bcc732efb451 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Tue, 31 Mar 2026 12:18:30 +0200
Subject: [PATCH 23/26] chore: extract occurrence actions to a reusable
 component

---
 .../pages/occurrences/occurrence-actions.tsx  | 144 ++++++------------
 .../pages/occurrences/occurrence-columns.tsx  |  41 +----
 .../pages/occurrences/occurrence-gallery.tsx  |  81 +++-------
 .../pages/occurrences/occurrences-actions.tsx | 112 ++++++++++++++
 ui/src/pages/occurrences/occurrences.tsx      |   4 +-
 5 files changed, 187 insertions(+), 195 deletions(-)
 create mode 100644 ui/src/pages/occurrences/occurrences-actions.tsx

diff --git a/ui/src/pages/occurrences/occurrence-actions.tsx b/ui/src/pages/occurrences/occurrence-actions.tsx
index d574cdadc..cde155cea 100644
--- a/ui/src/pages/occurrences/occurrence-actions.tsx
+++ b/ui/src/pages/occurrences/occurrence-actions.tsx
@@ -1,112 +1,66 @@
-import { IdentificationFieldValues } from 'data-services/hooks/identifications/types'
-import { useCreateIdentifications } from 'data-services/hooks/identifications/useCreateIdentifications'
 import { Occurrence } from 'data-services/models/occurrence'
 import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
-import { AlertCircleIcon, CheckIcon, Loader2Icon } from 'lucide-react'
-import { Button } from 'nova-ui-kit'
+import { IdentificationScore } from 'nova-ui-kit'
+import { Agree } from 'pages/occurrence-details/agree/agree'
 import { IdQuickActions } from 'pages/occurrence-details/id-quick-actions/id-quick-actions'
 import { SuggestIdPopover } from 'pages/occurrence-details/suggest-id/suggest-id-popover'
-import { useMemo } from 'react'
 import { STRING, translate } from 'utils/language'
 import { UserPermission } from 'utils/user/types'
 import { useUserInfo } from 'utils/user/userInfoContext'
 
 export const OccurrenceActions = ({
-  occurrences = [],
+  item,
+  showScore,
+  showActions,
 }: {
-  occurrences?: Occurrence[]
+  item: Occurrence
+  showActions?: boolean
+  showScore?: boolean
 }) => {
   const { userInfo } = useUserInfo()
-
-  const allAgreed = !occurrences.some((occurrence) => {
-    const agreed = userInfo ? occurrence.userAgreed(userInfo.id) : false
-
-    return !agreed
-  })
-
-  const canUpdate = occurrences[0]?.userPermissions.includes(
-    UserPermission.Update
-  )
-
-  if (!canUpdate) {
-    return null
-  }
+  const canUpdate = item.userPermissions.includes(UserPermission.Update)
+  const agreed = userInfo ? item.userAgreed(userInfo.id) : false
 
   return (
-    <div className="flex items-center justify-center gap-2">
-      <Agree allAgreed={allAgreed} occurrences={occurrences} />
-      <SuggestIdPopover
-        occurrenceIds={occurrences.map((occurrence) => occurrence.id)}
-      />
-      <IdQuickActions
-        occurrenceIds={occurrences.map((occurrence) => occurrence.id)}
-        occurrenceTaxa={occurrences.map(
-          (occurrence) => occurrence.determinationTaxon
-        )}
-      />
+    <div className="flex flex-wrap items-center justify-start gap-2">
+      {showScore && item.determinationScore !== undefined ? (
+        <BasicTooltip
+          content={
+            item.determinationVerified
+              ? translate(STRING.VERIFIED_BY, {
+                  name: item.determinationVerifiedBy?.name,
+                })
+              : translate(STRING.MACHINE_PREDICTION_SCORE, {
+                  score: `${item.determinationScore}`,
+                })
+          }
+        >
+          <IdentificationScore
+            confirmed={item.determinationVerified}
+            confidenceScore={item.determinationScore}
+          />
+        </BasicTooltip>
+      ) : null}
+      {showActions && canUpdate ? (
+        <>
+          <Agree
+            agreed={agreed}
+            agreeWith={{
+              identificationId: item.determinationIdentificationId,
+              predictionId: item.determinationPredictionId,
+            }}
+            applied
+            compact
+            occurrenceId={item.id}
+            taxonId={item.determinationTaxon.id}
+          />
+          <SuggestIdPopover occurrenceIds={[item.id]} />
+          <IdQuickActions
+            occurrenceIds={[item.id]}
+            occurrenceTaxa={[item.determinationTaxon]}
+          />
+        </>
+      ) : null}
     </div>
   )
 }
-
-const Agree = ({
-  occurrences = [],
-  allAgreed,
-}: {
-  occurrences?: Occurrence[]
-  allAgreed: boolean
-}) => {
-  const { userInfo } = useUserInfo()
-
-  const occurrenceIds = occurrences.map((occurrence) => occurrence.id)
-
-  const agreeParams: IdentificationFieldValues[] = useMemo(
-    () =>
-      occurrences
-        .filter((occurrences) => {
-          const agreed = userInfo?.id
-            ? userInfo.id === occurrences.determinationVerifiedBy?.id
-            : false
-
-          return !agreed
-        })
-        .map((occurrence) => ({
-          agreeWith: {
-            identificationId: occurrence.determinationIdentificationId,
-            predictionId: occurrence.determinationPredictionId,
-          },
-          occurrenceId: occurrence.id,
-          taxonId: occurrence.determinationTaxon.id,
-        })),
-    [occurrences]
-  )
-
-  const { createIdentifications, isLoading, isSuccess, error } =
-    useCreateIdentifications(occurrenceIds)
-
-  if (isSuccess || allAgreed) {
-    return (
-      <Button disabled size="small" variant="outline">
-        <CheckIcon className="w-4 h-4 " />
-        <span>{translate(STRING.CONFIRMED)}</span>
-      </Button>
-    )
-  }
-
-  return (
-    <BasicTooltip content={error}>
-      <Button
-        size="small"
-        variant="outline"
-        onClick={() => createIdentifications(agreeParams)}
-      >
-        {error ? (
-          <AlertCircleIcon className="w-4 h-4 mr-2 text-destructive" />
-        ) : null}
-        <span>{translate(STRING.CONFIRM)}</span>
-        {isLoading ? (
-          <Loader2Icon className="w-4 h-4 ml-2 animate-spin" />
-        ) : null}
-      </Button>
-    </BasicTooltip>
-  )
-}
diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx
index 333eb3d56..b16e12883 100644
--- a/ui/src/pages/occurrences/occurrence-columns.tsx
+++ b/ui/src/pages/occurrences/occurrence-columns.tsx
@@ -10,24 +10,17 @@ import {
   TextAlign,
 } from 'design-system/components/table/types'
 import { TaxonDetails } from 'nova-ui-kit'
-import { Agree } from 'pages/occurrence-details/agree/agree'
-import { IdQuickActions } from 'pages/occurrence-details/id-quick-actions/id-quick-actions'
-import { SuggestIdPopover } from 'pages/occurrence-details/suggest-id/suggest-id-popover'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
-import { UserPermission } from 'utils/user/types'
-import { useUserInfo } from 'utils/user/userInfoContext'
+import { OccurrenceActions } from './occurrence-actions'
 import styles from './occurrences.module.scss'
 
 export const columns: (
   projectId: string,
   showQuickActions?: boolean
-) => TableColumn<Occurrence>[] = (
-  projectId: string,
-  showQuickActions?: boolean
-) => [
+) => TableColumn<Occurrence>[] = (projectId: string, showActions?: boolean) => [
   {
     id: 'snapshots',
     name: translate(STRING.FIELD_LABEL_SNAPSHOTS),
@@ -61,7 +54,7 @@ export const columns: (
         id={item.id}
         item={item}
         projectId={projectId}
-        showQuickActions={showQuickActions}
+        showActions={showActions}
       />
     ),
   },
@@ -176,14 +169,13 @@ const TaxonCell = ({
   id,
   item,
   projectId,
-  showQuickActions,
+  showActions,
 }: {
   id?: string
   item: Occurrence
   projectId: string
-  showQuickActions?: boolean
+  showActions?: boolean
 }) => {
-  const { userInfo } = useUserInfo()
   const detailsRoute = getAppRoute({
     to: APP_ROUTES.OCCURRENCE_DETAILS({
       projectId,
@@ -191,8 +183,6 @@ const TaxonCell = ({
     }),
     keepSearchParams: true,
   })
-  const canUpdate = item.userPermissions.includes(UserPermission.Update)
-  const agreed = userInfo ? item.userAgreed(userInfo.id) : false
 
   return (
     <div id={id} className={styles.taxonCell}>
@@ -201,26 +191,7 @@ const TaxonCell = ({
           <Link to={detailsRoute}>
             <TaxonDetails compact taxon={item.determinationTaxon} />
           </Link>
-          {showQuickActions && canUpdate && (
-            <div className={styles.taxonActions}>
-              <Agree
-                agreed={agreed}
-                agreeWith={{
-                  identificationId: item.determinationIdentificationId,
-                  predictionId: item.determinationPredictionId,
-                }}
-                applied
-                compact
-                occurrenceId={item.id}
-                taxonId={item.determinationTaxon.id}
-              />
-              <SuggestIdPopover occurrenceIds={[item.id]} />
-              <IdQuickActions
-                occurrenceIds={[item.id]}
-                occurrenceTaxa={[item.determinationTaxon]}
-              />
-            </div>
-          )}
+          <OccurrenceActions item={item} showActions={showActions} />
         </div>
       </BasicTableCell>
     </div>
diff --git a/ui/src/pages/occurrences/occurrence-gallery.tsx b/ui/src/pages/occurrences/occurrence-gallery.tsx
index 3ba1906ad..ed1461804 100644
--- a/ui/src/pages/occurrences/occurrence-gallery.tsx
+++ b/ui/src/pages/occurrences/occurrence-gallery.tsx
@@ -6,18 +6,13 @@ import { Occurrence } from 'data-services/models/occurrence'
 import { Taxon } from 'data-services/models/taxa'
 import cardStyles from 'design-system/components/card/card.module.scss'
 import { LoadingSpinner } from 'design-system/components/loading-spinner/loading-spinner'
-import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
 import { CheckIcon, ImageIcon } from 'lucide-react'
-import { Button, IdentificationScore } from 'nova-ui-kit'
-import { Agree } from 'pages/occurrence-details/agree/agree'
-import { IdQuickActions } from 'pages/occurrence-details/id-quick-actions/id-quick-actions'
-import { SuggestIdPopover } from 'pages/occurrence-details/suggest-id/suggest-id-popover'
+import { Button } from 'nova-ui-kit'
 import { Link, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
-import { UserPermission } from 'utils/user/types'
-import { useUserInfo } from 'utils/user/userInfoContext'
+import { OccurrenceActions } from './occurrence-actions'
 
 export const isGenusOrBelow = (taxon: Taxon) =>
   taxon.rank === 'GENUS' ||
@@ -41,7 +36,6 @@ export const OccurrenceGallery = ({
 }) => {
   const isSelecting = selectedItems?.length > 0
   const { projectId } = useParams()
-  const { userInfo } = useUserInfo()
 
   if (isLoading) {
     return (
@@ -76,8 +70,6 @@ export const OccurrenceGallery = ({
             keepSearchParams: true,
           })
           const image = item.images[0]
-          const canUpdate = item.userPermissions.includes(UserPermission.Update)
-          const agreed = userInfo ? item.userAgreed(userInfo.id) : false
           const checked = selectedItems.includes(item.id)
           const onCheckedToggle = () => {
             onSelectedItemsChange?.(
@@ -140,60 +132,23 @@ export const OccurrenceGallery = ({
                 ) : null}
               </div>
               <div className="grow flex flex-col justify-between gap-2 p-4">
-                <div className="flex items-center gap-2">
-                  <Link to={detailsRoute}>
-                    <span
-                      className={classNames(
-                        'body-base font-medium text-primary',
-                        {
-                          italic: isGenusOrBelow(item.determinationTaxon),
-                        }
-                      )}
-                    >
-                      {item.determinationTaxon.name}
-                    </span>
-                  </Link>
-                </div>
-                <div className="flex flex-wrap items-center justify-start gap-2">
-                  {item.determinationScore !== undefined ? (
-                    <BasicTooltip
-                      content={
-                        item.determinationVerified
-                          ? translate(STRING.VERIFIED_BY, {
-                              name: item.determinationVerifiedBy?.name,
-                            })
-                          : translate(STRING.MACHINE_PREDICTION_SCORE, {
-                              score: `${item.determinationScore}`,
-                            })
+                <Link to={detailsRoute}>
+                  <span
+                    className={classNames(
+                      'body-base font-medium text-primary',
+                      {
+                        italic: isGenusOrBelow(item.determinationTaxon),
                       }
-                    >
-                      <IdentificationScore
-                        confirmed={item.determinationVerified}
-                        confidenceScore={item.determinationScore}
-                      />
-                    </BasicTooltip>
-                  ) : null}
-                  {!isSelecting && canUpdate && (
-                    <>
-                      <Agree
-                        agreed={agreed}
-                        agreeWith={{
-                          identificationId: item.determinationIdentificationId,
-                          predictionId: item.determinationPredictionId,
-                        }}
-                        applied
-                        compact
-                        occurrenceId={item.id}
-                        taxonId={item.determinationTaxon.id}
-                      />
-                      <SuggestIdPopover occurrenceIds={[item.id]} />
-                      <IdQuickActions
-                        occurrenceIds={[item.id]}
-                        occurrenceTaxa={[item.determinationTaxon]}
-                      />
-                    </>
-                  )}
-                </div>
+                    )}
+                  >
+                    {item.determinationTaxon.name}
+                  </span>
+                </Link>
+                <OccurrenceActions
+                  item={item}
+                  showActions={!isSelecting}
+                  showScore
+                />
               </div>
             </div>
           )
diff --git a/ui/src/pages/occurrences/occurrences-actions.tsx b/ui/src/pages/occurrences/occurrences-actions.tsx
new file mode 100644
index 000000000..5614e8aaf
--- /dev/null
+++ b/ui/src/pages/occurrences/occurrences-actions.tsx
@@ -0,0 +1,112 @@
+import { IdentificationFieldValues } from 'data-services/hooks/identifications/types'
+import { useCreateIdentifications } from 'data-services/hooks/identifications/useCreateIdentifications'
+import { Occurrence } from 'data-services/models/occurrence'
+import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
+import { AlertCircleIcon, CheckIcon, Loader2Icon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
+import { IdQuickActions } from 'pages/occurrence-details/id-quick-actions/id-quick-actions'
+import { SuggestIdPopover } from 'pages/occurrence-details/suggest-id/suggest-id-popover'
+import { useMemo } from 'react'
+import { STRING, translate } from 'utils/language'
+import { UserPermission } from 'utils/user/types'
+import { useUserInfo } from 'utils/user/userInfoContext'
+
+export const OccurrencesActions = ({
+  occurrences = [],
+}: {
+  occurrences?: Occurrence[]
+}) => {
+  const { userInfo } = useUserInfo()
+
+  const allAgreed = !occurrences.some((occurrence) => {
+    const agreed = userInfo ? occurrence.userAgreed(userInfo.id) : false
+
+    return !agreed
+  })
+
+  const canUpdate = occurrences[0]?.userPermissions.includes(
+    UserPermission.Update
+  )
+
+  if (!canUpdate) {
+    return null
+  }
+
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <Agree allAgreed={allAgreed} occurrences={occurrences} />
+      <SuggestIdPopover
+        occurrenceIds={occurrences.map((occurrence) => occurrence.id)}
+      />
+      <IdQuickActions
+        occurrenceIds={occurrences.map((occurrence) => occurrence.id)}
+        occurrenceTaxa={occurrences.map(
+          (occurrence) => occurrence.determinationTaxon
+        )}
+      />
+    </div>
+  )
+}
+
+const Agree = ({
+  occurrences = [],
+  allAgreed,
+}: {
+  occurrences?: Occurrence[]
+  allAgreed: boolean
+}) => {
+  const { userInfo } = useUserInfo()
+
+  const occurrenceIds = occurrences.map((occurrence) => occurrence.id)
+
+  const agreeParams: IdentificationFieldValues[] = useMemo(
+    () =>
+      occurrences
+        .filter((occurrences) => {
+          const agreed = userInfo?.id
+            ? userInfo.id === occurrences.determinationVerifiedBy?.id
+            : false
+
+          return !agreed
+        })
+        .map((occurrence) => ({
+          agreeWith: {
+            identificationId: occurrence.determinationIdentificationId,
+            predictionId: occurrence.determinationPredictionId,
+          },
+          occurrenceId: occurrence.id,
+          taxonId: occurrence.determinationTaxon.id,
+        })),
+    [occurrences]
+  )
+
+  const { createIdentifications, isLoading, isSuccess, error } =
+    useCreateIdentifications(occurrenceIds)
+
+  if (isSuccess || allAgreed) {
+    return (
+      <Button disabled size="small" variant="outline">
+        <CheckIcon className="w-4 h-4 " />
+        <span>{translate(STRING.CONFIRMED)}</span>
+      </Button>
+    )
+  }
+
+  return (
+    <BasicTooltip content={error}>
+      <Button
+        size="small"
+        variant="outline"
+        onClick={() => createIdentifications(agreeParams)}
+      >
+        {error ? (
+          <AlertCircleIcon className="w-4 h-4 mr-2 text-destructive" />
+        ) : null}
+        <span>{translate(STRING.CONFIRM)}</span>
+        {isLoading ? (
+          <Loader2Icon className="w-4 h-4 ml-2 animate-spin" />
+        ) : null}
+      </Button>
+    </BasicTooltip>
+  )
+}
diff --git a/ui/src/pages/occurrences/occurrences.tsx b/ui/src/pages/occurrences/occurrences.tsx
index b531626ab..5a50ba09a 100644
--- a/ui/src/pages/occurrences/occurrences.tsx
+++ b/ui/src/pages/occurrences/occurrences.tsx
@@ -33,10 +33,10 @@ import { usePagination } from 'utils/usePagination'
 import { useUser } from 'utils/user/userContext'
 import { useSelectedView } from 'utils/useSelectedView'
 import { useSort } from 'utils/useSort'
-import { OccurrenceActions } from './occurrence-actions'
 import { columns } from './occurrence-columns'
 import { OccurrenceGallery } from './occurrence-gallery'
 import { OccurrenceNavigation } from './occurrence-navigation'
+import { OccurrencesActions } from './occurrences-actions'
 
 export const Occurrences = () => {
   const { user } = useUser()
@@ -204,7 +204,7 @@ export const Occurrences = () => {
             )}
             onClear={() => setSelectedItems([])}
           >
-            <OccurrenceActions
+            <OccurrencesActions
               occurrences={occurrences?.filter((occurrence) =>
                 selectedItems.includes(occurrence.id)
               )}

From 8394afd610132447db39426c14c754fa4d55122c Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Tue, 31 Mar 2026 12:37:21 +0200
Subject: [PATCH 24/26] layout: prepare occurrence content in session detail
 view to include more actions

---
 .../session-details/playback/frame/frame.tsx  | 35 +++++++++----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/ui/src/pages/session-details/playback/frame/frame.tsx b/ui/src/pages/session-details/playback/frame/frame.tsx
index d1738adb5..4ea564673 100644
--- a/ui/src/pages/session-details/playback/frame/frame.tsx
+++ b/ui/src/pages/session-details/playback/frame/frame.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { DeterminationScore } from 'components/determination-score'
 import { useOccurrenceDetails } from 'data-services/hooks/occurrences/useOccurrenceDetails'
 import { CaptureDetection } from 'data-services/models/capture'
 import * as Dialog from 'design-system/components/dialog/dialog'
@@ -238,28 +239,24 @@ const FrameDetections = ({
                   />
                 </Tooltip.Trigger>
                 <Tooltip.Content
-                  className="p-2 z-[1]"
+                  className="p-4 z-[1]"
                   collisionBoundary={containerRef?.current}
                   side="bottom"
                 >
-                  <div className="flex flex-col gap-1">
-                    <span className="body-base font-medium">
-                      {detection.label}
-                    </span>
-                    <div className="flex items-center justify-between gap-4">
-                      <span className="body-small">
-                        ({detection.scoreLabel})
-                      </span>
-                      <button
-                        className="flex items-center gap-1 text-primary font-semibold"
-                        disabled={!detection.occurrenceId}
-                        onClick={() =>
-                          setActiveOccurrence(detection.occurrenceId)
-                        }
-                      >
-                        <span>{translate(STRING.DETAILS)}</span>
-                      </button>
-                    </div>
+                  <div className="flex flex-col items-start gap-2">
+                    <button
+                      className="body-base text-primary font-medium"
+                      disabled={!detection.occurrenceId}
+                      onClick={() =>
+                        setActiveOccurrence(detection.occurrenceId)
+                      }
+                    >
+                      <span>{detection.label}</span>
+                    </button>
+                    <DeterminationScore
+                      score={detection.score}
+                      scoreLabel={detection.scoreLabel}
+                    />
                   </div>
                 </Tooltip.Content>
               </Tooltip.Root>

From 4b8e07e4fddeac78cb22595603d0a0562c816e3f Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 1 Apr 2026 22:25:31 +0200
Subject: [PATCH 25/26] layout: apply floating toolbar layout to action columns

---
 .../table-header/table-header.module.scss     | 18 ------
 .../table/table-header/table-header.tsx       |  4 +-
 .../components/table/table/table.module.scss  | 37 ++++++-----
 ui/src/design-system/components/toolbar.tsx   |  9 +++
 ui/src/pages/captures/capture-columns.tsx     | 39 +++++-------
 ui/src/pages/captures/captures.tsx            |  5 +-
 .../pages/deployments/deployment-columns.tsx  | 40 +++++-------
 ui/src/pages/deployments/deployments.tsx      |  5 +-
 .../job-details/job-actions/cancel-job.tsx    | 31 +++++++++-
 .../job-details/job-actions/queue-job.tsx     | 33 ++++++++--
 ui/src/pages/jobs/jobs-columns.tsx            | 44 ++++++-------
 ui/src/pages/jobs/jobs.tsx                    |  5 +-
 .../pages/occurrences/occurrence-columns.tsx  | 11 ++--
 ui/src/pages/occurrences/occurrences.tsx      | 19 +++---
 .../capture-sets/capture-set-columns.tsx      | 57 ++++++++---------
 .../project/capture-sets/capture-sets.tsx     |  5 +-
 .../project/entities/entities-columns.tsx     | 56 ++++++++---------
 ui/src/pages/project/entities/entities.tsx    |  2 +-
 .../pages/project/entities/styles.module.scss |  8 ---
 .../pages/project/exports/exports-columns.tsx | 39 +++++-------
 ui/src/pages/project/exports/exports.tsx      |  5 +-
 .../processing-services-columns.tsx           | 60 ++++++++----------
 .../processing-services.tsx                   |  5 +-
 .../pages/project/storage/storage-columns.tsx | 58 ++++++++---------
 ui/src/pages/project/storage/storage.tsx      |  2 +-
 ui/src/pages/project/team/team-columns.tsx    | 45 ++++++--------
 ui/src/pages/project/team/team.tsx            |  5 +-
 .../taxa-list-details-columns.tsx             | 30 ++++-----
 .../taxa-list-details/taxa-list-details.tsx   |  1 -
 ui/src/pages/taxa-lists/taxa-list-columns.tsx | 62 +++++++++----------
 ui/src/pages/taxa-lists/taxa-lists.tsx        |  5 +-
 ui/tailwind.config.js                         | 10 ++-
 32 files changed, 356 insertions(+), 399 deletions(-)
 create mode 100644 ui/src/design-system/components/toolbar.tsx

diff --git a/ui/src/design-system/components/table/table-header/table-header.module.scss b/ui/src/design-system/components/table/table-header/table-header.module.scss
index 228c77800..ccd642ec8 100644
--- a/ui/src/design-system/components/table/table-header/table-header.module.scss
+++ b/ui/src/design-system/components/table/table-header/table-header.module.scss
@@ -9,24 +9,6 @@
   border-bottom: 2px solid $color-neutral-100;
   background-color: $color-neutral-50;
   text-align: left;
-
-  &.sticky {
-    position: sticky;
-    right: 0;
-    background-color: $color-neutral-50;
-    border-bottom: none;
-    z-index: 1;
-
-    > ::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 0;
-      height: 100%;
-      border-right: 1px solid $color-neutral-100;
-    }
-  }
 }
 
 .content {
diff --git a/ui/src/design-system/components/table/table-header/table-header.tsx b/ui/src/design-system/components/table/table-header/table-header.tsx
index e1c2e5af9..b9556703e 100644
--- a/ui/src/design-system/components/table/table-header/table-header.tsx
+++ b/ui/src/design-system/components/table/table-header/table-header.tsx
@@ -43,9 +43,7 @@ const BasicTableHeader = <T,>({
       textAlign: column.styles?.textAlign,
       width: column.styles?.width,
     }}
-    className={classNames(styles.tableHeader, {
-      [styles.sticky]: column.sticky,
-    })}
+    className={styles.tableHeader}
   >
     <BasicTooltip asChild content={column.tooltip}>
       <div
diff --git a/ui/src/design-system/components/table/table/table.module.scss b/ui/src/design-system/components/table/table/table.module.scss
index aad73df40..caf029913 100644
--- a/ui/src/design-system/components/table/table/table.module.scss
+++ b/ui/src/design-system/components/table/table/table.module.scss
@@ -86,22 +86,29 @@
     a {
       width: 100%;
     }
+  }
+}
+
+@media (hover: hover) {
+  .tableContainer {
+    tbody {
+      tr:hover {
+        background-color: $color-neutral-50;
+
+        td {
+          &.sticky {
+            opacity: 1;
+          }
+        }
+      }
 
-    &.sticky {
-      position: sticky;
-      right: 0;
-      background-color: $color-neutral-50;
-      border-bottom: none !important;
-      z-index: 1;
-
-      > ::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 0;
-        height: 100%;
-        border-right: 1px solid $color-neutral-100;
+      td {
+        &.sticky {
+          position: sticky;
+          right: 0;
+          z-index: 1;
+          opacity: 0;
+        }
       }
     }
   }
diff --git a/ui/src/design-system/components/toolbar.tsx b/ui/src/design-system/components/toolbar.tsx
new file mode 100644
index 000000000..016dcf2a8
--- /dev/null
+++ b/ui/src/design-system/components/toolbar.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export const Toolbar = ({ children }: { children: ReactNode }) => (
+  <div className="flex items-center justify-end px-4">
+    <div className="w-min flex items-center justify-center gap-1 p-1 bg-background rounded-full hover-device:shadow-toolbar">
+      {children}
+    </div>
+  </div>
+)
diff --git a/ui/src/pages/captures/capture-columns.tsx b/ui/src/pages/captures/capture-columns.tsx
index c7c4164b2..8e5960fda 100644
--- a/ui/src/pages/captures/capture-columns.tsx
+++ b/ui/src/pages/captures/capture-columns.tsx
@@ -8,6 +8,7 @@ import {
   TableColumn,
   TextAlign,
 } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
@@ -16,10 +17,8 @@ import { STRING, translate } from 'utils/language'
 
 export const columns = ({
   projectId,
-  showActions,
 }: {
   projectId: string
-  showActions?: boolean
 }): TableColumn<Capture>[] => [
   {
     id: 'thumbnail',
@@ -179,24 +178,20 @@ export const columns = ({
     },
     renderCell: (item: Capture) => <BasicTableCell value={item.numTaxa} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: Capture) => (
-            <div className="flex items-center justify-end gap-2 p-4">
-              {item.canDelete ? (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.CAPTURES}
-                  id={item.id}
-                  type="capture"
-                />
-              ) : null}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: Capture) => (
+      <Toolbar>
+        {item.canDelete ? (
+          <DeleteEntityDialog
+            collection={API_ROUTES.CAPTURES}
+            id={item.id}
+            type="capture"
+          />
+        ) : null}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/captures/captures.tsx b/ui/src/pages/captures/captures.tsx
index 1f22dc1e6..69617230d 100644
--- a/ui/src/pages/captures/captures.tsx
+++ b/ui/src/pages/captures/captures.tsx
@@ -55,10 +55,7 @@ export const Captures = () => {
       withCounts: countColumnVisible || sortByCountActive, // Only fetch counts if needed since counts will slow down the response
     })
   const canCreate = userPermissions?.includes(UserPermission.Create)
-  const tableColumns = columns({
-    projectId: projectId as string,
-    showActions: canCreate,
-  })
+  const tableColumns = columns({ projectId: projectId as string })
 
   return (
     <div className="flex flex-col gap-6 md:flex-row">
diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx
index 55f1d5156..e8067d812 100644
--- a/ui/src/pages/deployments/deployment-columns.tsx
+++ b/ui/src/pages/deployments/deployment-columns.tsx
@@ -10,19 +10,17 @@ import {
   TableColumn,
   TextAlign,
 } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
-import styles from './deployments.module.scss'
 
 export const columns = ({
   projectId,
-  showActions,
 }: {
   projectId: string
-  showActions?: boolean
 }): TableColumn<Deployment>[] => [
   {
     id: 'snapshot',
@@ -221,24 +219,20 @@ export const columns = ({
     sortField: 'updated_at',
     renderCell: (item: Deployment) => <DateTableCell date={item.updatedAt} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: Deployment) => (
-            <div className={styles.deploymentActions}>
-              {item.canDelete && (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.DEPLOYMENTS}
-                  id={item.id}
-                  type={translate(STRING.ENTITY_TYPE_DEPLOYMENT)}
-                />
-              )}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: Deployment) => (
+      <Toolbar>
+        {item.canDelete && (
+          <DeleteEntityDialog
+            collection={API_ROUTES.DEPLOYMENTS}
+            id={item.id}
+            type={translate(STRING.ENTITY_TYPE_DEPLOYMENT)}
+          />
+        )}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/deployments/deployments.tsx b/ui/src/pages/deployments/deployments.tsx
index 79c91419b..3dc52d850 100644
--- a/ui/src/pages/deployments/deployments.tsx
+++ b/ui/src/pages/deployments/deployments.tsx
@@ -35,10 +35,7 @@ export const Deployments = () => {
       sort,
     })
   const canCreate = userPermissions?.includes(UserPermission.Create)
-  const tableColumns = columns({
-    projectId: projectId as string,
-    showActions: canCreate,
-  })
+  const tableColumns = columns({ projectId: projectId as string })
 
   return (
     <>
diff --git a/ui/src/pages/job-details/job-actions/cancel-job.tsx b/ui/src/pages/job-details/job-actions/cancel-job.tsx
index a45866f3e..d9a8a5f04 100644
--- a/ui/src/pages/job-details/job-actions/cancel-job.tsx
+++ b/ui/src/pages/job-details/job-actions/cancel-job.tsx
@@ -1,12 +1,37 @@
 import { useCancelJob } from 'data-services/hooks/jobs/useCancelJob'
-import { CheckIcon, Loader2Icon } from 'lucide-react'
+import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
+import { BanIcon, CheckIcon, Loader2Icon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 
-export const CancelJob = ({ jobId }: { jobId: string }) => {
+export const CancelJob = ({
+  compact,
+  jobId,
+}: {
+  compact?: boolean
+  jobId: string
+}) => {
   const { cancelJob, isLoading, isSuccess } = useCancelJob()
 
-  return (
+  return compact ? (
+    <BasicTooltip content={translate(STRING.CANCEL)}>
+      <Button
+        aria-label={translate(STRING.CANCEL)}
+        disabled={isLoading || isSuccess}
+        onClick={() => cancelJob(jobId)}
+        size="icon"
+        variant="ghost"
+      >
+        {isSuccess ? (
+          <CheckIcon className="w-4 h-4" />
+        ) : isLoading ? (
+          <Loader2Icon className="w-4 h-4 animate-spin" />
+        ) : (
+          <BanIcon className="w-4 h-4" />
+        )}
+      </Button>
+    </BasicTooltip>
+  ) : (
     <Button
       disabled={isLoading || isSuccess}
       onClick={() => cancelJob(jobId)}
diff --git a/ui/src/pages/job-details/job-actions/queue-job.tsx b/ui/src/pages/job-details/job-actions/queue-job.tsx
index f370a918c..858f7a47c 100644
--- a/ui/src/pages/job-details/job-actions/queue-job.tsx
+++ b/ui/src/pages/job-details/job-actions/queue-job.tsx
@@ -1,17 +1,42 @@
 import { useQueueJob } from 'data-services/hooks/jobs/useQueueJob'
-import { CheckIcon, Loader2Icon } from 'lucide-react'
+import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
+import { CheckIcon, Loader2Icon, PlayIcon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 
-export const QueueJob = ({ jobId }: { jobId: string }) => {
+export const QueueJob = ({
+  compact,
+  jobId,
+}: {
+  compact?: boolean
+  jobId: string
+}) => {
   const { queueJob, isLoading, isSuccess } = useQueueJob()
 
-  return (
+  return compact ? (
+    <BasicTooltip content={translate(STRING.START)}>
+      <Button
+        aria-label={translate(STRING.START)}
+        disabled={isLoading || isSuccess}
+        onClick={() => queueJob(jobId)}
+        size="icon"
+        variant="ghost"
+      >
+        {isSuccess ? (
+          <CheckIcon className="w-4 h-4" />
+        ) : isLoading ? (
+          <Loader2Icon className="w-4 h-4 animate-spin" />
+        ) : (
+          <PlayIcon className="w-4 h-4" />
+        )}
+      </Button>
+    </BasicTooltip>
+  ) : (
     <Button
       disabled={isLoading || isSuccess}
       onClick={() => queueJob(jobId)}
       size="small"
-      variant="outline"
+      variant="ghost"
     >
       <span>{translate(STRING.START)}</span>
       {isSuccess ? (
diff --git a/ui/src/pages/jobs/jobs-columns.tsx b/ui/src/pages/jobs/jobs-columns.tsx
index ccea44044..d19485a28 100644
--- a/ui/src/pages/jobs/jobs-columns.tsx
+++ b/ui/src/pages/jobs/jobs-columns.tsx
@@ -4,6 +4,7 @@ import { BasicTableCell } from 'design-system/components/table/basic-table-cell/
 import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell'
 import { StatusTableCell } from 'design-system/components/table/status-table-cell/status-table-cell'
 import { CellTheme, TableColumn } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { CancelJob } from 'pages/job-details/job-actions/cancel-job'
 import { QueueJob } from 'pages/job-details/job-actions/queue-job'
 import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog'
@@ -11,14 +12,11 @@ import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
-import styles from './jobs.module.scss'
 
 export const columns = ({
   projectId,
-  showActions,
 }: {
   projectId: string
-  showActions?: boolean
 }): TableColumn<Job>[] => [
   {
     id: 'name',
@@ -141,26 +139,22 @@ export const columns = ({
     sortField: 'finished_at',
     renderCell: (item: Job) => <DateTableCell date={item.finishedAt} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: Job) => (
-            <div className={styles.jobActions}>
-              {item.canDelete && (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.JOBS}
-                  id={item.id}
-                  type={translate(STRING.ENTITY_TYPE_JOB)}
-                />
-              )}
-              {item.canCancel && <CancelJob jobId={item.id} />}
-              {item.canQueue && <QueueJob jobId={item.id} />}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: Job) => (
+      <Toolbar>
+        {item.canQueue && <QueueJob compact jobId={item.id} />}
+        {item.canCancel && <CancelJob compact jobId={item.id} />}
+        {item.canDelete && (
+          <DeleteEntityDialog
+            collection={API_ROUTES.JOBS}
+            id={item.id}
+            type={translate(STRING.ENTITY_TYPE_JOB)}
+          />
+        )}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/jobs/jobs.tsx b/ui/src/pages/jobs/jobs.tsx
index 2e6fcbd88..c001cb859 100644
--- a/ui/src/pages/jobs/jobs.tsx
+++ b/ui/src/pages/jobs/jobs.tsx
@@ -45,10 +45,7 @@ export const Jobs = () => {
       filters,
     })
   const canCreate = userPermissions?.includes(UserPermission.Create)
-  const tableColumns = columns({
-    projectId: projectId as string,
-    showActions: canCreate,
-  })
+  const tableColumns = columns({ projectId: projectId as string })
 
   return (
     <div className="flex flex-col gap-6 md:flex-row">
diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx
index b16e12883..4e3c26414 100644
--- a/ui/src/pages/occurrences/occurrence-columns.tsx
+++ b/ui/src/pages/occurrences/occurrence-columns.tsx
@@ -17,10 +17,13 @@ import { STRING, translate } from 'utils/language'
 import { OccurrenceActions } from './occurrence-actions'
 import styles from './occurrences.module.scss'
 
-export const columns: (
-  projectId: string,
-  showQuickActions?: boolean
-) => TableColumn<Occurrence>[] = (projectId: string, showActions?: boolean) => [
+export const columns = ({
+  projectId,
+  showActions,
+}: {
+  projectId: string
+  showActions?: boolean
+}): TableColumn<Occurrence>[] => [
   {
     id: 'snapshots',
     name: translate(STRING.FIELD_LABEL_SNAPSHOTS),
diff --git a/ui/src/pages/occurrences/occurrences.tsx b/ui/src/pages/occurrences/occurrences.tsx
index 5a50ba09a..9a1071a3c 100644
--- a/ui/src/pages/occurrences/occurrences.tsx
+++ b/ui/src/pages/occurrences/occurrences.tsx
@@ -73,6 +73,10 @@ export const Occurrences = () => {
   )
   const { selectedView, setSelectedView } = useSelectedView('table')
   const { taxaLists = [] } = useTaxaLists({ projectId: projectId as string })
+  const tableColumns = columns({
+    projectId: projectId as string,
+    showActions: selectedItems.length === 0,
+  })
 
   useEffect(() => {
     document.getElementById('app')?.scrollTo({ top: 0 })
@@ -151,23 +155,18 @@ export const Occurrences = () => {
               <DownloadIcon className="w-4 h-4" />
               <span>Export </span>
             </Link>
-            <SortControl
-              columns={columns(projectId as string)}
-              setSort={setSort}
-              sort={sort}
-            />
+            <SortControl columns={tableColumns} setSort={setSort} sort={sort} />
             <ColumnSettings
-              columns={columns(projectId as string)}
+              columns={tableColumns}
               columnSettings={columnSettings}
               onColumnSettingsChange={setColumnSettings}
             />
           </PageHeader>
           {selectedView === 'table' && (
             <Table
-              columns={columns(
-                projectId as string,
-                selectedItems.length === 0
-              ).filter((column) => !!columnSettings[column.id])}
+              columns={tableColumns.filter(
+                (column) => !!columnSettings[column.id]
+              )}
               error={error}
               isLoading={!id && isLoading}
               items={occurrences}
diff --git a/ui/src/pages/project/capture-sets/capture-set-columns.tsx b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
index 84994e2cd..d85d07568 100644
--- a/ui/src/pages/project/capture-sets/capture-set-columns.tsx
+++ b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
@@ -8,9 +8,9 @@ import {
   TableColumn,
   TextAlign,
 } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog'
 import { UpdateEntityDialog } from 'pages/project/entities/entity-details-dialog'
-import styles from 'pages/project/entities/styles.module.scss'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
@@ -20,10 +20,8 @@ import { PopulateCaptureSet } from './populate-capture-set'
 
 export const columns = ({
   projectId,
-  showActions,
 }: {
   projectId: string
-  showActions?: boolean
 }): TableColumn<CaptureSet>[] => [
   {
     id: 'id',
@@ -162,33 +160,28 @@ export const columns = ({
     sortField: 'updated_at',
     renderCell: (item: CaptureSet) => <DateTableCell date={item.updatedAt} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: CaptureSet) => (
-            <div className={styles.entityActions}>
-              {item.canDelete && (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.CAPTURE_SETS}
-                  id={item.id}
-                  type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
-                />
-              )}
-              {item.canUpdate &&
-                SERVER_SAMPLING_METHODS.includes(item.method) && (
-                  <UpdateEntityDialog
-                    collection={API_ROUTES.CAPTURE_SETS}
-                    entity={item}
-                    type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
-                  />
-                )}
-              {item.canPopulate && <PopulateCaptureSet captureSet={item} />}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: CaptureSet) => (
+      <Toolbar>
+        {item.canPopulate && <PopulateCaptureSet captureSet={item} />}
+        {item.canUpdate && SERVER_SAMPLING_METHODS.includes(item.method) && (
+          <UpdateEntityDialog
+            collection={API_ROUTES.CAPTURE_SETS}
+            entity={item}
+            type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
+          />
+        )}
+        {item.canDelete && (
+          <DeleteEntityDialog
+            collection={API_ROUTES.CAPTURE_SETS}
+            id={item.id}
+            type={translate(STRING.ENTITY_TYPE_CAPTURE_SET)}
+          />
+        )}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/project/capture-sets/capture-sets.tsx b/ui/src/pages/project/capture-sets/capture-sets.tsx
index ab661f1eb..6112b4146 100644
--- a/ui/src/pages/project/capture-sets/capture-sets.tsx
+++ b/ui/src/pages/project/capture-sets/capture-sets.tsx
@@ -48,10 +48,7 @@ export const CaptureSets = () => {
       poll
     )
   const canCreate = userPermissions?.includes(UserPermission.Create)
-  const tableColumns = columns({
-    projectId: projectId as string,
-    showActions: canCreate,
-  })
+  const tableColumns = columns({ projectId: projectId as string })
 
   useEffect(() => {
     // If any capture set has a job in progress, we want to poll the endpoint so we can show job updates
diff --git a/ui/src/pages/project/entities/entities-columns.tsx b/ui/src/pages/project/entities/entities-columns.tsx
index 775afe202..d483ea74b 100644
--- a/ui/src/pages/project/entities/entities-columns.tsx
+++ b/ui/src/pages/project/entities/entities-columns.tsx
@@ -2,19 +2,17 @@ import { Entity } from 'data-services/models/entity'
 import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell'
 import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell'
 import { TableColumn } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { STRING, translate } from 'utils/language'
 import { DeleteEntityDialog } from './delete-entity-dialog'
 import { UpdateEntityDialog } from './entity-details-dialog'
-import styles from './styles.module.scss'
 
 export const columns = ({
   collection,
   type,
-  showActions,
 }: {
   collection: string
   type: string
-  showActions?: boolean
 }): TableColumn<Entity>[] => [
   {
     id: 'id',
@@ -50,32 +48,28 @@ export const columns = ({
     sortField: 'updated_at',
     renderCell: (item: Entity) => <DateTableCell date={item.updatedAt} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: Entity) => (
-            <div className={styles.entityActions}>
-              {item.canDelete && (
-                <DeleteEntityDialog
-                  collection={collection}
-                  id={item.id}
-                  type={type}
-                />
-              )}
-              {item.canUpdate && (
-                <UpdateEntityDialog
-                  collection={collection}
-                  entity={item}
-                  type={type}
-                  isCompact
-                />
-              )}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: Entity) => (
+      <Toolbar>
+        {item.canDelete && (
+          <DeleteEntityDialog
+            collection={collection}
+            id={item.id}
+            type={type}
+          />
+        )}
+        {item.canUpdate && (
+          <UpdateEntityDialog
+            collection={collection}
+            entity={item}
+            type={type}
+            isCompact
+          />
+        )}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/project/entities/entities.tsx b/ui/src/pages/project/entities/entities.tsx
index 6d2c300fa..643c086ea 100644
--- a/ui/src/pages/project/entities/entities.tsx
+++ b/ui/src/pages/project/entities/entities.tsx
@@ -52,7 +52,7 @@ export const Entities = ({
         )}
       </PageHeader>
       <Table
-        columns={columns({ collection, type, showActions: canCreate })}
+        columns={columns({ collection, type })}
         error={error}
         isLoading={isLoading}
         items={entities}
diff --git a/ui/src/pages/project/entities/styles.module.scss b/ui/src/pages/project/entities/styles.module.scss
index 45b34ddee..b345f5856 100644
--- a/ui/src/pages/project/entities/styles.module.scss
+++ b/ui/src/pages/project/entities/styles.module.scss
@@ -1,14 +1,6 @@
 @import 'src/design-system/variables/colors.scss';
 @import 'src/design-system/variables/typography.scss';
 
-.entityActions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  padding: 16px;
-}
-
 .dialogContent {
   width: 720px;
   max-width: 100%;
diff --git a/ui/src/pages/project/exports/exports-columns.tsx b/ui/src/pages/project/exports/exports-columns.tsx
index 77baf74e9..f52657eed 100644
--- a/ui/src/pages/project/exports/exports-columns.tsx
+++ b/ui/src/pages/project/exports/exports-columns.tsx
@@ -10,6 +10,7 @@ import {
   TableColumn,
   TextAlign,
 } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { DownloadIcon } from 'lucide-react'
 import { buttonVariants } from 'nova-ui-kit'
 import { Link } from 'react-router-dom'
@@ -19,10 +20,8 @@ import { DeleteEntityDialog } from '../entities/delete-entity-dialog'
 
 export const columns = ({
   projectId,
-  showActions,
 }: {
   projectId: string
-  showActions?: boolean
 }): TableColumn<Export>[] => [
   {
     id: 'name',
@@ -89,24 +88,20 @@ export const columns = ({
     sortField: 'updated_at',
     renderCell: (item: Export) => <DateTableCell date={item.updatedAt} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: Export) => (
-            <div className="flex items-center justify-end gap-2 p-4">
-              {item.canDelete ? (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.EXPORTS}
-                  id={item.id}
-                  type="export"
-                />
-              ) : null}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: Export) => (
+      <Toolbar>
+        {item.canDelete ? (
+          <DeleteEntityDialog
+            collection={API_ROUTES.EXPORTS}
+            id={item.id}
+            type="export"
+          />
+        ) : null}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/project/exports/exports.tsx b/ui/src/pages/project/exports/exports.tsx
index 52a864707..f5ee552d7 100644
--- a/ui/src/pages/project/exports/exports.tsx
+++ b/ui/src/pages/project/exports/exports.tsx
@@ -72,10 +72,7 @@ export const Exports = () => {
         </EmptyState>
       ) : (
         <Table
-          columns={columns({
-            projectId: projectId as string,
-            showActions: canCreate,
-          })}
+          columns={columns({ projectId: projectId as string })}
           error={error}
           isLoading={isLoading}
           items={exports}
diff --git a/ui/src/pages/project/processing-services/processing-services-columns.tsx b/ui/src/pages/project/processing-services/processing-services-columns.tsx
index cf38a2749..03702091e 100644
--- a/ui/src/pages/project/processing-services/processing-services-columns.tsx
+++ b/ui/src/pages/project/processing-services/processing-services-columns.tsx
@@ -4,9 +4,9 @@ import { BasicTableCell } from 'design-system/components/table/basic-table-cell/
 import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell'
 import { StatusTableCell } from 'design-system/components/table/status-table-cell/status-table-cell'
 import { CellTheme, TableColumn } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog'
 import { UpdateEntityDialog } from 'pages/project/entities/entity-details-dialog'
-import styles from 'pages/project/entities/styles.module.scss'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
@@ -14,10 +14,8 @@ import { PopulateProcessingService } from './processing-services-actions'
 
 export const columns = ({
   projectId,
-  showActions,
 }: {
   projectId: string
-  showActions?: boolean
 }): TableColumn<ProcessingService>[] => [
   {
     id: 'id',
@@ -74,34 +72,30 @@ export const columns = ({
       <DateTableCell date={item.updatedAt} />
     ),
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: ProcessingService) => (
-            <div className={styles.entityActions}>
-              {item.canDelete && (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.PROCESSING_SERVICES}
-                  id={item.id}
-                  type="service"
-                />
-              )}
-              {item.canUpdate && (
-                <>
-                  <UpdateEntityDialog
-                    collection={API_ROUTES.PROCESSING_SERVICES}
-                    entity={item}
-                    type="service"
-                  />
-                  <PopulateProcessingService processingService={item} />
-                </>
-              )}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: ProcessingService) => (
+      <Toolbar>
+        {item.canUpdate && (
+          <>
+            <PopulateProcessingService processingService={item} />
+            <UpdateEntityDialog
+              collection={API_ROUTES.PROCESSING_SERVICES}
+              entity={item}
+              type="service"
+            />
+          </>
+        )}
+        {item.canDelete && (
+          <DeleteEntityDialog
+            collection={API_ROUTES.PROCESSING_SERVICES}
+            id={item.id}
+            type="service"
+          />
+        )}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/project/processing-services/processing-services.tsx b/ui/src/pages/project/processing-services/processing-services.tsx
index ac5759f94..e6b55bd8b 100644
--- a/ui/src/pages/project/processing-services/processing-services.tsx
+++ b/ui/src/pages/project/processing-services/processing-services.tsx
@@ -54,10 +54,7 @@ export const ProcessingServices = () => {
       <Table
         items={items}
         isLoading={isLoading}
-        columns={columns({
-          projectId: projectId as string,
-          showActions: canCreate,
-        })}
+        columns={columns({ projectId: projectId as string })}
         sortable
         sortSettings={sort}
         onSortSettingsChange={setSort}
diff --git a/ui/src/pages/project/storage/storage-columns.tsx b/ui/src/pages/project/storage/storage-columns.tsx
index cb602e258..d63cf508d 100644
--- a/ui/src/pages/project/storage/storage-columns.tsx
+++ b/ui/src/pages/project/storage/storage-columns.tsx
@@ -3,16 +3,12 @@ import { StorageSource } from 'data-services/models/storage'
 import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell'
 import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell'
 import { TableColumn, TextAlign } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog'
 import { UpdateEntityDialog } from 'pages/project/entities/entity-details-dialog'
-import styles from 'pages/project/entities/styles.module.scss'
 import { STRING, translate } from 'utils/language'
 
-export const columns = ({
-  showActions,
-}: {
-  showActions?: boolean
-}): TableColumn<StorageSource>[] => [
+export const columns = (): TableColumn<StorageSource>[] => [
   {
     id: 'name',
     name: translate(STRING.FIELD_LABEL_NAME),
@@ -68,31 +64,27 @@ export const columns = ({
       <DateTableCell date={item.updatedAt} />
     ),
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: StorageSource) => (
-            <div className={styles.entityActions}>
-              {item.canDelete && (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.STORAGE}
-                  id={item.id}
-                  type="storage"
-                />
-              )}
-              {item.canUpdate && (
-                <UpdateEntityDialog
-                  collection={API_ROUTES.STORAGE}
-                  entity={item}
-                  type="storage"
-                />
-              )}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: StorageSource) => (
+      <Toolbar>
+        {item.canUpdate && (
+          <UpdateEntityDialog
+            collection={API_ROUTES.STORAGE}
+            entity={item}
+            type="storage"
+          />
+        )}
+        {item.canDelete && (
+          <DeleteEntityDialog
+            collection={API_ROUTES.STORAGE}
+            id={item.id}
+            type="storage"
+          />
+        )}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/project/storage/storage.tsx b/ui/src/pages/project/storage/storage.tsx
index 896dc633d..019809b8b 100644
--- a/ui/src/pages/project/storage/storage.tsx
+++ b/ui/src/pages/project/storage/storage.tsx
@@ -43,7 +43,7 @@ export const Storage = () => {
         )}
       </PageHeader>
       <Table
-        columns={columns({ showActions: canCreate })}
+        columns={columns()}
         error={error}
         isLoading={isLoading}
         items={items}
diff --git a/ui/src/pages/project/team/team-columns.tsx b/ui/src/pages/project/team/team-columns.tsx
index cd9d20940..520f4254e 100644
--- a/ui/src/pages/project/team/team-columns.tsx
+++ b/ui/src/pages/project/team/team-columns.tsx
@@ -3,6 +3,7 @@ import { Badge } from 'design-system/components/badge/badge'
 import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell'
 import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell'
 import { TableColumn } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
 import { InfoIcon, UserIcon } from 'lucide-react'
 import { Button } from 'nova-ui-kit'
@@ -13,10 +14,8 @@ import { RemoveMemberDialog } from './remove-member-dialog'
 
 export const columns = ({
   userId,
-  showActions,
 }: {
   userId?: string
-  showActions?: boolean
 }): TableColumn<Member>[] => [
   {
     id: 'user',
@@ -81,27 +80,23 @@ export const columns = ({
     sortField: 'updated_at',
     renderCell: (item: Member) => <DateTableCell date={item.updatedAt} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: Member) => (
-            <div className="flex items-center justify-start p-4 gap-2">
-              {item.userId === userId ? (
-                item.canDelete ? (
-                  <LeaveTeamDialog member={item} />
-                ) : null
-              ) : (
-                <>
-                  {item.canDelete ? <RemoveMemberDialog member={item} /> : null}
-                  {item.canUpdate ? <ManageAccessDialog member={item} /> : null}
-                </>
-              )}
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: Member) => (
+      <Toolbar>
+        {item.userId === userId ? (
+          item.canDelete ? (
+            <LeaveTeamDialog member={item} />
+          ) : null
+        ) : (
+          <>
+            {item.canUpdate ? <ManageAccessDialog member={item} /> : null}
+            {item.canDelete ? <RemoveMemberDialog member={item} /> : null}
+          </>
+        )}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/project/team/team.tsx b/ui/src/pages/project/team/team.tsx
index 25fadb813..6885a6065 100644
--- a/ui/src/pages/project/team/team.tsx
+++ b/ui/src/pages/project/team/team.tsx
@@ -72,10 +72,7 @@ export const Team = () => {
         {canCreate ? <AddMemberDialog /> : null}
       </PageHeader>
       <Table
-        columns={columns({
-          userId: userInfo?.id,
-          showActions: true,
-        })}
+        columns={columns({ userId: userInfo?.id })}
         error={error}
         isLoading={isLoading}
         items={members}
diff --git a/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx b/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
index d5dffdf52..6b515e1f8 100644
--- a/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
+++ b/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
@@ -6,6 +6,7 @@ import {
   TableColumn,
   TextAlign,
 } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { TaxonDetails } from 'nova-ui-kit'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
@@ -15,11 +16,9 @@ import { RemoveTaxaListTaxonDialog } from './remove-taxa-list-taxon/remove-taxa-
 
 export const columns = ({
   projectId,
-  showActions,
   taxaListId,
 }: {
   projectId: string
-  showActions?: boolean
   taxaListId: string
 }): TableColumn<Species>[] => [
   {
@@ -72,21 +71,14 @@ export const columns = ({
     },
     renderCell: (item: Species) => <BasicTableCell value={item.rank} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: Species) => (
-            <div className="flex items-center justify-end gap-2 p-4">
-              <RemoveTaxaListTaxonDialog
-                taxaListId={taxaListId}
-                taxonId={item.id}
-              />
-            </div>
-          ),
-        },
-      ]
-    : []),
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: Species) => (
+      <Toolbar>
+        <RemoveTaxaListTaxonDialog taxaListId={taxaListId} taxonId={item.id} />
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/taxa-list-details/taxa-list-details.tsx b/ui/src/pages/taxa-list-details/taxa-list-details.tsx
index ffcbe4d2e..01f909dc5 100644
--- a/ui/src/pages/taxa-list-details/taxa-list-details.tsx
+++ b/ui/src/pages/taxa-list-details/taxa-list-details.tsx
@@ -50,7 +50,6 @@ export const TaxaListDetails = () => {
   }, [taxaList, setDetailBreadcrumb])
   const tableColumns = columns({
     projectId: projectId as string,
-    showActions: taxaList?.canUpdate,
     taxaListId: id as string,
   })
 
diff --git a/ui/src/pages/taxa-lists/taxa-list-columns.tsx b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
index 45a8b6577..e230ddd93 100644
--- a/ui/src/pages/taxa-lists/taxa-list-columns.tsx
+++ b/ui/src/pages/taxa-lists/taxa-list-columns.tsx
@@ -7,6 +7,7 @@ import {
   TableColumn,
   TextAlign,
 } from 'design-system/components/table/types'
+import { Toolbar } from 'design-system/components/toolbar'
 import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog'
 import { UpdateEntityDialog } from 'pages/project/entities/entity-details-dialog'
 import { Link } from 'react-router-dom'
@@ -17,10 +18,8 @@ import { AddTaxaListTaxonPopover } from '../taxa-list-details/add-taxa-list-taxo
 
 export const columns = ({
   projectId,
-  showActions,
 }: {
   projectId: string
-  showActions?: boolean
 }): TableColumn<TaxaList>[] => [
   {
     id: 'name',
@@ -77,35 +76,32 @@ export const columns = ({
     sortField: 'updated_at',
     renderCell: (item: TaxaList) => <DateTableCell date={item.updatedAt} />,
   },
-  ...(showActions
-    ? [
-        {
-          id: 'actions',
-          name: '',
-          sticky: true,
-          renderCell: (item: TaxaList) => (
-            <div className="flex items-center justify-end gap-2 p-4">
-              {item.canDelete ? (
-                <DeleteEntityDialog
-                  collection={API_ROUTES.TAXA_LISTS}
-                  id={item.id}
-                  type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
-                />
-              ) : null}
-              {item.canUpdate ? (
-                <UpdateEntityDialog
-                  collection={API_ROUTES.TAXA_LISTS}
-                  entity={item}
-                  isCompact
-                  type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
-                />
-              ) : null}
-              {item.canUpdate ? (
-                <AddTaxaListTaxonPopover compact taxaListId={item.id} />
-              ) : null}
-            </div>
-          ),
-        },
-      ]
-    : []),
+
+  {
+    id: 'actions',
+    name: '',
+    sticky: true,
+    renderCell: (item: TaxaList) => (
+      <Toolbar>
+        {item.canUpdate ? (
+          <AddTaxaListTaxonPopover compact taxaListId={item.id} />
+        ) : null}
+        {item.canUpdate ? (
+          <UpdateEntityDialog
+            collection={API_ROUTES.TAXA_LISTS}
+            entity={item}
+            isCompact
+            type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
+          />
+        ) : null}
+        {item.canDelete ? (
+          <DeleteEntityDialog
+            collection={API_ROUTES.TAXA_LISTS}
+            id={item.id}
+            type={translate(STRING.ENTITY_TYPE_TAXA_LIST)}
+          />
+        ) : null}
+      </Toolbar>
+    ),
+  },
 ]
diff --git a/ui/src/pages/taxa-lists/taxa-lists.tsx b/ui/src/pages/taxa-lists/taxa-lists.tsx
index 548b5f9c8..acf37724e 100644
--- a/ui/src/pages/taxa-lists/taxa-lists.tsx
+++ b/ui/src/pages/taxa-lists/taxa-lists.tsx
@@ -26,10 +26,7 @@ export const TaxaLists = () => {
       sort,
     })
   const canCreate = userPermissions?.includes(UserPermission.Create)
-  const tableColumns = columns({
-    projectId: projectId as string,
-    showActions: canCreate,
-  })
+  const tableColumns = columns({ projectId: projectId as string })
 
   return (
     <>
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index d3222203e..8952801fe 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -1,4 +1,5 @@
 import { CONSTANTS } from 'nova-ui-kit'
+import plugin from 'tailwindcss/plugin'
 import { BREAKPOINTS } from './src/components/constants'
 
 /** @type {import('tailwindcss').Config} */
@@ -15,7 +16,14 @@ module.exports = {
     extend: {
       backgroundImage: CONSTANTS.GRADIENTS,
       colors: CONSTANTS.COLOR_THEME,
+      boxShadow: {
+        toolbar: '0px 4px 16px rgba(0, 0, 0, 0.1)',
+      },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addVariant }) {
+      addVariant('hover-device', '@media (hover: hover)')
+    }),
+  ],
 }

From 476abf7b76f428a401ff26f551987205440c9af3 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 2 Apr 2026 11:04:58 +0200
Subject: [PATCH 26/26] fix: cleanup

---
 .../filtering/default-filter-control.tsx      | 108 +++++++++---------
 .../filters/verification-status-filter.tsx    |  11 +-
 .../useProcessingServiceDetails.ts            |   2 +-
 .../table-header/table-header.module.scss     |   4 +
 .../table/table-header/table-header.tsx       |   9 +-
 .../components/table/table/table.module.scss  |   3 +-
 .../components/table/table/table.tsx          |  56 +++------
 .../algorithm-details-dialog.tsx              |   1 -
 .../pages/occurrences/occurrences-actions.tsx |   9 +-
 .../capture-sets/populate-capture-set.tsx     |   2 +-
 .../project/entities/entities-columns.tsx     |  14 +--
 .../pipelines/default-pipeline-badge.tsx      |   4 +-
 ui/src/pages/project/pipelines/pipelines.tsx  |   1 +
 .../processing-services-actions.tsx           |   2 +-
 .../processing-services-columns.tsx           |   2 +-
 .../session-details/playback/frame/frame.tsx  |   5 +-
 .../taxa-list-details-columns.tsx             |   9 +-
 .../taxa-list-details/taxa-list-details.tsx   |   1 +
 ui/src/utils/language.ts                      |  10 +-
 19 files changed, 128 insertions(+), 125 deletions(-)

diff --git a/ui/src/components/filtering/default-filter-control.tsx b/ui/src/components/filtering/default-filter-control.tsx
index 085f7eb25..b9204bcf2 100644
--- a/ui/src/components/filtering/default-filter-control.tsx
+++ b/ui/src/components/filtering/default-filter-control.tsx
@@ -4,7 +4,7 @@ import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetail
 import { ProjectDetails } from 'data-services/models/project-details'
 import { InputValue } from 'design-system/components/input/input'
 import { ChevronRightIcon, InfoIcon } from 'lucide-react'
-import { Button, buttonVariants, Switch, Tooltip } from 'nova-ui-kit'
+import { Button, buttonVariants, Popover, Switch } from 'nova-ui-kit'
 import { Link, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
@@ -50,59 +50,57 @@ export const DefaultFiltersTooltip = ({
   className?: string
   project: ProjectDetails
 }) => (
-  <Tooltip.Provider delayDuration={0}>
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button
-          aria-label={translate(STRING.INFO)}
-          className={className}
-          size="icon"
-          variant="ghost"
-        >
-          <InfoIcon className="w-4 h-4" />
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Content className="p-4 max-w-xs">
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-4 border-b border-border pb-4">
-            <p className="body-small italic text-muted-foreground">
-              Data is filtered by default based on global project configuration.
-            </p>
-            <FormRow>
-              <InputValue
-                label="Score threshold"
-                value={project.settings.scoreThreshold}
-              />
-            </FormRow>
-            <FormRow>
-              <InputValue
-                label="Include taxa"
-                value={project.settings.includeTaxa
-                  .map((taxon) => taxon.name)
-                  .join(', ')}
-              />
-              <InputValue
-                label="Exclude taxa"
-                value={project.settings.excludeTaxa
-                  .map((taxon) => taxon.name)
-                  .join(', ')}
-              />
-            </FormRow>
-          </div>
-          {project.canUpdate ? (
-            <Link
-              className={classNames(
-                buttonVariants({ size: 'small', variant: 'ghost' }),
-                '!w-auto self-end'
-              )}
-              to={APP_ROUTES.DEFAULT_FILTERS({ projectId: project.id })}
-            >
-              <span>{translate(STRING.CONFIGURE)}</span>
-              <ChevronRightIcon className="w-4 h-4" />
-            </Link>
-          ) : null}
+  <Popover.Root>
+    <Popover.Trigger asChild>
+      <Button
+        aria-label={translate(STRING.INFO)}
+        className={className}
+        size="icon"
+        variant="ghost"
+      >
+        <InfoIcon className="w-4 h-4" />
+      </Button>
+    </Popover.Trigger>
+    <Popover.Content className="p-4 max-w-xs">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 border-b border-border pb-4">
+          <p className="body-small italic text-muted-foreground">
+            {translate(STRING.MESSAGE_DEFAULT_FILTERS)}
+          </p>
+          <FormRow>
+            <InputValue
+              label="Score threshold"
+              value={project.settings.scoreThreshold}
+            />
+          </FormRow>
+          <FormRow>
+            <InputValue
+              label="Include taxa"
+              value={project.settings.includeTaxa
+                .map((taxon) => taxon.name)
+                .join(', ')}
+            />
+            <InputValue
+              label="Exclude taxa"
+              value={project.settings.excludeTaxa
+                .map((taxon) => taxon.name)
+                .join(', ')}
+            />
+          </FormRow>
         </div>
-      </Tooltip.Content>
-    </Tooltip.Root>
-  </Tooltip.Provider>
+        {project.canUpdate ? (
+          <Link
+            className={classNames(
+              buttonVariants({ size: 'small', variant: 'ghost' }),
+              '!w-auto self-end'
+            )}
+            to={APP_ROUTES.DEFAULT_FILTERS({ projectId: project.id })}
+          >
+            <span>{translate(STRING.CONFIGURE)}</span>
+            <ChevronRightIcon className="w-4 h-4" />
+          </Link>
+        ) : null}
+      </div>
+    </Popover.Content>
+  </Popover.Root>
 )
diff --git a/ui/src/components/filtering/filters/verification-status-filter.tsx b/ui/src/components/filtering/filters/verification-status-filter.tsx
index e87681f48..bea7bd7e3 100644
--- a/ui/src/components/filtering/filters/verification-status-filter.tsx
+++ b/ui/src/components/filtering/filters/verification-status-filter.tsx
@@ -3,16 +3,15 @@ import { STRING, translate } from 'utils/language'
 import { booleanToString, stringToBoolean } from '../utils'
 import { FilterProps } from './types'
 
-const OPTIONS = [
-  { value: true, label: translate(STRING.VERIFIED) },
-  { value: false, label: translate(STRING.NOT_VERIFIED) },
-]
-
 export const VerificationStatusFilter = ({
   value: string,
   onAdd,
 }: FilterProps) => {
   const value = stringToBoolean(string)
+  const options = [
+    { value: true, label: translate(STRING.VERIFIED) },
+    { value: false, label: translate(STRING.NOT_VERIFIED) },
+  ]
 
   return (
     <Select.Root value={booleanToString(value)} onValueChange={onAdd}>
@@ -20,7 +19,7 @@ export const VerificationStatusFilter = ({
         <Select.Value placeholder={translate(STRING.SELECT_PLACEHOLDER)} />
       </Select.Trigger>
       <Select.Content>
-        {OPTIONS.map((option) => (
+        {options.map((option) => (
           <Select.Item
             key={booleanToString(option.value)}
             value={booleanToString(option.value)}
diff --git a/ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts b/ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts
index a437e229f..fffe614cd 100644
--- a/ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts
+++ b/ui/src/data-services/hooks/processing-services/useProcessingServiceDetails.ts
@@ -20,7 +20,7 @@ export const useProcessingServiceDetails = (
 } => {
   const { data, isLoading, isFetching, error } =
     useAuthorizedQuery<ProcessingService>({
-      queryKey: [API_ROUTES.PROCESSING_SERVICES, id],
+      queryKey: [API_ROUTES.PROCESSING_SERVICES, id, projectId],
       url: `${API_URL}/${API_ROUTES.PROCESSING_SERVICES}/${id}/?project_id=${projectId}`,
     })
 
diff --git a/ui/src/design-system/components/table/table-header/table-header.module.scss b/ui/src/design-system/components/table/table-header/table-header.module.scss
index ccd642ec8..87873e9ef 100644
--- a/ui/src/design-system/components/table/table-header/table-header.module.scss
+++ b/ui/src/design-system/components/table/table-header/table-header.module.scss
@@ -9,6 +9,10 @@
   border-bottom: 2px solid $color-neutral-100;
   background-color: $color-neutral-50;
   text-align: left;
+
+  &.sticky {
+    width: 100%;
+  }
 }
 
 .content {
diff --git a/ui/src/design-system/components/table/table-header/table-header.tsx b/ui/src/design-system/components/table/table-header/table-header.tsx
index b9556703e..96be775b3 100644
--- a/ui/src/design-system/components/table/table-header/table-header.tsx
+++ b/ui/src/design-system/components/table/table-header/table-header.tsx
@@ -6,10 +6,10 @@ import styles from './table-header.module.scss'
 
 interface TableHeaderProps<T> {
   column: TableColumn<T>
+  onSortClick: () => void
   sortable?: boolean
   sortSettings?: TableSortSettings
   visuallyHidden?: boolean
-  onSortClick: () => void
 }
 
 export const TableHeader = <T,>({
@@ -43,7 +43,9 @@ const BasicTableHeader = <T,>({
       textAlign: column.styles?.textAlign,
       width: column.styles?.width,
     }}
-    className={styles.tableHeader}
+    className={classNames(styles.tableHeader, {
+      [styles.sticky]: column.sticky,
+    })}
   >
     <BasicTooltip asChild content={column.tooltip}>
       <div
@@ -67,9 +69,9 @@ const BasicTableHeader = <T,>({
 
 const SortableTableHeader = <T,>({
   column,
+  onSortClick,
   sortSettings,
   visuallyHidden,
-  onSortClick,
 }: TableHeaderProps<T>) => {
   const sortActive = sortSettings?.field === column.sortField
 
@@ -87,6 +89,7 @@ const SortableTableHeader = <T,>({
       style={{ textAlign: column.styles?.textAlign }}
       className={classNames(styles.tableHeader, {
         [styles.active]: sortActive,
+        [styles.sticky]: column.sticky,
       })}
     >
       <BasicTooltip asChild content={column.tooltip}>
diff --git a/ui/src/design-system/components/table/table/table.module.scss b/ui/src/design-system/components/table/table/table.module.scss
index caf029913..aeb9bcc1c 100644
--- a/ui/src/design-system/components/table/table/table.module.scss
+++ b/ui/src/design-system/components/table/table/table.module.scss
@@ -92,7 +92,8 @@
 @media (hover: hover) {
   .tableContainer {
     tbody {
-      tr:hover {
+      tr:hover,
+      tr:focus-within {
         background-color: $color-neutral-50;
 
         td {
diff --git a/ui/src/design-system/components/table/table/table.tsx b/ui/src/design-system/components/table/table/table.tsx
index d754e2598..d72a0f0ca 100644
--- a/ui/src/design-system/components/table/table/table.tsx
+++ b/ui/src/design-system/components/table/table/table.tsx
@@ -103,35 +103,21 @@ export const Table = <T extends { id: string }>({
                 </div>
               </th>
             )}
-            {columns
-              .filter((column) => !column.sticky)
-              .map((column) => (
-                <TableHeader
-                  key={column.id}
-                  column={column}
-                  sortable={sortable}
-                  sortSettings={sortSettings}
-                  visuallyHidden={column.visuallyHidden}
-                  onSortClick={() => onSortClick(column)}
-                />
-              ))}
+            {columns.map((column) => (
+              <TableHeader
+                key={column.id}
+                column={column}
+                onSortClick={() => onSortClick(column)}
+                sortable={sortable}
+                sortSettings={sortSettings}
+                visuallyHidden={column.visuallyHidden}
+              />
+            ))}
             <th
               aria-hidden="true"
               className={tableHeaderStyles.tableHeader}
               style={{ width: '100%' }}
             />
-            {columns
-              .filter((column) => column.sticky)
-              .map((column) => (
-                <TableHeader
-                  key={column.id}
-                  column={column}
-                  sortable={sortable}
-                  sortSettings={sortSettings}
-                  visuallyHidden={column.visuallyHidden}
-                  onSortClick={() => onSortClick(column)}
-                />
-              ))}
           </tr>
         </thead>
         <tbody>
@@ -153,21 +139,15 @@ export const Table = <T extends { id: string }>({
                   </BasicTableCell>
                 </td>
               )}
-              {columns
-                .filter((column) => !column.sticky)
-                .map((column, columnIndex) => (
-                  <td key={column.id}>
-                    {column.renderCell(item, rowIndex, columnIndex)}
-                  </td>
-                ))}
+              {columns.map((column, columnIndex) => (
+                <td
+                  key={column.id}
+                  className={classNames({ [styles.sticky]: column.sticky })}
+                >
+                  {column.renderCell(item, rowIndex, columnIndex)}
+                </td>
+              ))}
               <td aria-hidden="true" />
-              {columns
-                .filter((column) => column.sticky)
-                .map((column, columnIndex) => (
-                  <td key={column.id} className={styles.sticky}>
-                    {column.renderCell(item, rowIndex, columnIndex)}
-                  </td>
-                ))}
             </tr>
           ))}
         </tbody>
diff --git a/ui/src/pages/algorithm-details/algorithm-details-dialog.tsx b/ui/src/pages/algorithm-details/algorithm-details-dialog.tsx
index d8507dd3f..406d0283e 100644
--- a/ui/src/pages/algorithm-details/algorithm-details-dialog.tsx
+++ b/ui/src/pages/algorithm-details/algorithm-details-dialog.tsx
@@ -77,7 +77,6 @@ const AlgorithmDetailsContent = ({ algorithm }: { algorithm: Algorithm }) => (
           label={translate(STRING.FIELD_LABEL_TASK_TYPE)}
           value={algorithm.taskType}
         />
-
         <InputValue
           label={translate(STRING.FIELD_LABEL_CATEGORY_COUNT)}
           value={algorithm.categoryCount}
diff --git a/ui/src/pages/occurrences/occurrences-actions.tsx b/ui/src/pages/occurrences/occurrences-actions.tsx
index 5614e8aaf..12e515ed6 100644
--- a/ui/src/pages/occurrences/occurrences-actions.tsx
+++ b/ui/src/pages/occurrences/occurrences-actions.tsx
@@ -24,8 +24,8 @@ export const OccurrencesActions = ({
     return !agreed
   })
 
-  const canUpdate = occurrences[0]?.userPermissions.includes(
-    UserPermission.Update
+  const canUpdate = !occurrences.some(
+    ({ userPermissions }) => !userPermissions.includes(UserPermission.Update)
   )
 
   if (!canUpdate) {
@@ -77,7 +77,7 @@ const Agree = ({
           occurrenceId: occurrence.id,
           taxonId: occurrence.determinationTaxon.id,
         })),
-    [occurrences]
+    [occurrences, userInfo?.id]
   )
 
   const { createIdentifications, isLoading, isSuccess, error } =
@@ -95,9 +95,10 @@ const Agree = ({
   return (
     <BasicTooltip content={error}>
       <Button
+        disabled={isLoading}
+        onClick={() => createIdentifications(agreeParams)}
         size="small"
         variant="outline"
-        onClick={() => createIdentifications(agreeParams)}
       >
         {error ? (
           <AlertCircleIcon className="w-4 h-4 mr-2 text-destructive" />
diff --git a/ui/src/pages/project/capture-sets/populate-capture-set.tsx b/ui/src/pages/project/capture-sets/populate-capture-set.tsx
index af3c38919..d486036de 100644
--- a/ui/src/pages/project/capture-sets/populate-capture-set.tsx
+++ b/ui/src/pages/project/capture-sets/populate-capture-set.tsx
@@ -33,7 +33,7 @@ export const PopulateCaptureSet = ({
         {error ? (
           <AlertCircleIcon className="w-4 h-4" />
         ) : isLoading ? (
-          <Loader2 className="w-4 h-4 ml-2 animate-spin" />
+          <Loader2 className="w-4 h-4 animate-spin" />
         ) : (
           <RefreshCcwIcon className="w-4 h-4" />
         )}
diff --git a/ui/src/pages/project/entities/entities-columns.tsx b/ui/src/pages/project/entities/entities-columns.tsx
index d483ea74b..8eeea6723 100644
--- a/ui/src/pages/project/entities/entities-columns.tsx
+++ b/ui/src/pages/project/entities/entities-columns.tsx
@@ -54,13 +54,6 @@ export const columns = ({
     sticky: true,
     renderCell: (item: Entity) => (
       <Toolbar>
-        {item.canDelete && (
-          <DeleteEntityDialog
-            collection={collection}
-            id={item.id}
-            type={type}
-          />
-        )}
         {item.canUpdate && (
           <UpdateEntityDialog
             collection={collection}
@@ -69,6 +62,13 @@ export const columns = ({
             isCompact
           />
         )}
+        {item.canDelete && (
+          <DeleteEntityDialog
+            collection={collection}
+            id={item.id}
+            type={type}
+          />
+        )}
       </Toolbar>
     ),
   },
diff --git a/ui/src/pages/project/pipelines/default-pipeline-badge.tsx b/ui/src/pages/project/pipelines/default-pipeline-badge.tsx
index c51fc825b..27e37d8e4 100644
--- a/ui/src/pages/project/pipelines/default-pipeline-badge.tsx
+++ b/ui/src/pages/project/pipelines/default-pipeline-badge.tsx
@@ -8,11 +8,11 @@ export const DefaultPipelineBadge = ({ projectId }: { projectId: string }) => (
   <Tooltip.Provider delayDuration={0}>
     <Tooltip.Root>
       <Tooltip.Trigger>
-        <Badge label="Default" />
+        <Badge label={translate(STRING.DEFAULT)} />
       </Tooltip.Trigger>
       <Tooltip.Content side="bottom" className="p-4 max-w-xs">
         <Info
-          text="This is the default pipeline used for processing images in this project."
+          text={translate(STRING.MESSAGE_DEFAULT_PIPELINE)}
           link={{
             text: translate(STRING.CONFIGURE),
             to: APP_ROUTES.PROCESSING({ projectId: projectId }),
diff --git a/ui/src/pages/project/pipelines/pipelines.tsx b/ui/src/pages/project/pipelines/pipelines.tsx
index f52f0c535..bdcc17e39 100644
--- a/ui/src/pages/project/pipelines/pipelines.tsx
+++ b/ui/src/pages/project/pipelines/pipelines.tsx
@@ -18,6 +18,7 @@ export const Pipelines = () => {
   const { columnSettings, setColumnSettings } = useColumnSettings('pipelines', {
     id: true,
     name: true,
+    default: true,
     description: true,
   })
   const [sort, setSort] = useState<TableSortSettings | undefined>({
diff --git a/ui/src/pages/project/processing-services/processing-services-actions.tsx b/ui/src/pages/project/processing-services/processing-services-actions.tsx
index 16680e9a8..b5a4d6a5b 100644
--- a/ui/src/pages/project/processing-services/processing-services-actions.tsx
+++ b/ui/src/pages/project/processing-services/processing-services-actions.tsx
@@ -34,7 +34,7 @@ export const PopulateProcessingService = ({
         {error ? (
           <AlertCircleIcon className="w-4 h-4" />
         ) : isLoading ? (
-          <Loader2 className="w-4 h-4 ml-2 animate-spin" />
+          <Loader2 className="w-4 h-4 animate-spin" />
         ) : (
           <RefreshCcwIcon className="w-4 h-4" />
         )}
diff --git a/ui/src/pages/project/processing-services/processing-services-columns.tsx b/ui/src/pages/project/processing-services/processing-services-columns.tsx
index cdb99593b..f70dff544 100644
--- a/ui/src/pages/project/processing-services/processing-services-columns.tsx
+++ b/ui/src/pages/project/processing-services/processing-services-columns.tsx
@@ -1,4 +1,3 @@
-import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { API_ROUTES } from 'data-services/constants'
 import { ProcessingService } from 'data-services/models/processing-service'
 import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell'
@@ -10,6 +9,7 @@ import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog'
 import { UpdateEntityDialog } from 'pages/project/entities/entity-details-dialog'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
+import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { STRING, translate } from 'utils/language'
 import { PopulateProcessingService } from './processing-services-actions'
 
diff --git a/ui/src/pages/session-details/playback/frame/frame.tsx b/ui/src/pages/session-details/playback/frame/frame.tsx
index 4ea564673..6266e3778 100644
--- a/ui/src/pages/session-details/playback/frame/frame.tsx
+++ b/ui/src/pages/session-details/playback/frame/frame.tsx
@@ -239,11 +239,11 @@ const FrameDetections = ({
                   />
                 </Tooltip.Trigger>
                 <Tooltip.Content
-                  className="p-4 z-[1]"
+                  className="p-3 z-[1]"
                   collisionBoundary={containerRef?.current}
                   side="bottom"
                 >
-                  <div className="flex flex-col items-start gap-2">
+                  <div className="flex flex-col items-start gap-1">
                     <button
                       className="body-base text-primary font-medium"
                       disabled={!detection.occurrenceId}
@@ -256,6 +256,7 @@ const FrameDetections = ({
                     <DeterminationScore
                       score={detection.score}
                       scoreLabel={detection.scoreLabel}
+                      verified={detection.score === 1}
                     />
                   </div>
                 </Tooltip.Content>
diff --git a/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx b/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
index 6b515e1f8..5ed40f1b3 100644
--- a/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
+++ b/ui/src/pages/taxa-list-details/taxa-list-details-columns.tsx
@@ -15,9 +15,11 @@ import { STRING, translate } from 'utils/language'
 import { RemoveTaxaListTaxonDialog } from './remove-taxa-list-taxon/remove-taxa-list-taxon-dialog'
 
 export const columns = ({
+  canUpdate,
   projectId,
   taxaListId,
 }: {
+  canUpdate?: boolean
   projectId: string
   taxaListId: string
 }): TableColumn<Species>[] => [
@@ -77,7 +79,12 @@ export const columns = ({
     sticky: true,
     renderCell: (item: Species) => (
       <Toolbar>
-        <RemoveTaxaListTaxonDialog taxaListId={taxaListId} taxonId={item.id} />
+        {canUpdate ? (
+          <RemoveTaxaListTaxonDialog
+            taxaListId={taxaListId}
+            taxonId={item.id}
+          />
+        ) : null}
       </Toolbar>
     ),
   },
diff --git a/ui/src/pages/taxa-list-details/taxa-list-details.tsx b/ui/src/pages/taxa-list-details/taxa-list-details.tsx
index 01f909dc5..ca346eeef 100644
--- a/ui/src/pages/taxa-list-details/taxa-list-details.tsx
+++ b/ui/src/pages/taxa-list-details/taxa-list-details.tsx
@@ -49,6 +49,7 @@ export const TaxaListDetails = () => {
     }
   }, [taxaList, setDetailBreadcrumb])
   const tableColumns = columns({
+    canUpdate: taxaList?.canUpdate,
     projectId: projectId as string,
     taxaListId: id as string,
   })
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index b9a53667a..9f955f0fa 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -173,6 +173,8 @@ export enum STRING {
   MESSAGE_CHANGE_PASSWORD,
   MESSAGE_COULD_NOT_SAVE,
   MESSAGE_DATA_SOURCE_NOT_CONFIGURED,
+  MESSAGE_DEFAULT_FILTERS,
+  MESSAGE_DEFAULT_PIPELINE,
   MESSAGE_DELETE_CONFIRM,
   MESSAGE_DRAFTS,
   MESSAGE_HAS_ACCOUNT,
@@ -272,6 +274,7 @@ export enum STRING {
   CONFIGURE,
   CONNECTED,
   CONNECTING,
+  DEFAULT,
   DETAILS,
   EXTERNAL_RESOURCES,
   FORGOT_PASSWORD_DETAILS,
@@ -503,6 +506,10 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.MESSAGE_COULD_NOT_SAVE]: 'Could not save',
   [STRING.MESSAGE_DATA_SOURCE_NOT_CONFIGURED]:
     'A data source must be configured and saved before syncing captures.',
+  [STRING.MESSAGE_DEFAULT_FILTERS]:
+    'Data is filtered by default based on global project configuration.',
+  [STRING.MESSAGE_DEFAULT_PIPELINE]:
+    'This is the default pipeline used for processing images in this project.',
   [STRING.MESSAGE_DELETE_CONFIRM]:
     'Are you sure you want to delete this {{type}}?',
   [STRING.MESSAGE_DRAFTS]: 'Drafts are private and limited to one user.',
@@ -607,7 +614,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.TOOLTIP_PROCESSING_SERVICE]:
     'A processing service is a group of pipelines used for processing captures.',
   [STRING.TOOLTIP_SCORE]:
-    'This is a model derived prediction score, not a real-world probability. Think of it as a relative metric that will vary based model calibration and available training data.',
+    'This is a model derived prediction score, not a real-world probability. Think of it as a relative metric that will vary based on model calibration and available training data.',
   [STRING.TOOLTIP_SESSION]:
     'A session is a fixed period of time of monitoring for one station. The period is typically one night.',
   [STRING.TOOLTIP_SITE]:
@@ -628,6 +635,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.CONFIGURE]: 'Configure',
   [STRING.CONNECTED]: 'Connected',
   [STRING.CONNECTING]: 'Connecting...',
+  [STRING.DEFAULT]: 'Default',
   [STRING.DETAILS]: 'Details',
   [STRING.EXTERNAL_RESOURCES]: 'External resources',
   [STRING.FORGOT_PASSWORD_DETAILS]: `No worries, we'll send you reset instructions.`,