diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
index 5f0a14f..ae0a9d4 100644
--- a/assets/scss/theme.scss
+++ b/assets/scss/theme.scss
@@ -4,6 +4,8 @@
 $border-radius: 0.15rem;
 $card-height: 100%;
 $primary: #32006e;
+$primary-hover: #421178;
+$primary-soft: #f1eeff;
 $secondary: #5f647a;
 $btn-font-weight: 600;
 
@@ -22,8 +24,36 @@ $tdei-cyan: #59c3c8;
 $purple-background-light: #f4f0fb;
 $purple-background-dark: #ddd2ee;
 $purple-background-medium: #ebe4f6;
-$text-navy: #1A1E3D;
-$text-secondary: #5A607B;
+$text-navy: #1a1e3d;
+$text-secondary: #5a607b;
+$text-disabled: #8a91ab;
+$surface-card: #ffffff;
+$surface-subtle: #fbfcff;
+$border-card: #e5e7f0;
+$border-subtle: #dfe2ef;
+$progress-border: #d9ddf0;
+$progress-track: #ebedf6;
+$progress-fill: #4e5fe0;
+$link-text: #5578d9;
+$hero-gradient-start: #eeeaff;
+$hero-gradient-end: #f9f4ff;
+$header-shadow: 0 0.1875rem 0.375rem rgba($black, 0.16);
+$status-warning-text: #8a6300;
+$status-warning-surface: #fffaf0;
+$status-warning-border: #ead9ad;
+$task-ready-mapping: #fde9aa;
+$task-ready-validation: #a8d8f8;
+$task-remap: #f8be90;
+$task-completed: #aae8cd;
+$status-completed-surface: #f6fcfa;
+$status-completed-border: #d4e4dd;
+$status-completed-text: #067a57;
+$status-in-progress-surface: #f4fbff;
+$status-in-progress-border: #c8e0ee;
+$status-in-progress-text: #1a74a8;
+$status-draft-surface: #fffcf5;
+$status-draft-border: #e9e1d3;
+$status-draft-text: #8f6c1a;
 $dropdown-active-bg: #e2f0f8;
 $danger-red: #c7393a;
 
diff --git a/components/AppPage.vue b/components/AppPage.vue
index 6aa4a25..5c93e6c 100644
--- a/components/AppPage.vue
+++ b/components/AppPage.vue
@@ -5,15 +5,20 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  fluid: {
-    type: Boolean,
-    default: false,
-  },
+interface Props {
+  fluid?: boolean;
+  padding?: 'default' | 'none' | 'sm';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fluid: false,
+  padding: 'default',
 });
 
 const classes = computed(() => ({
-  'py-4': true,
+  'py-0': props.padding === 'none',
+  'py-3': props.padding === 'sm',
+  'py-4': props.padding === 'default',
   'container-fluid': props.fluid === true,
   'container-lg': props.fluid === false,
 }));
diff --git a/components/AreaUnitToggle.vue b/components/AreaUnitToggle.vue
new file mode 100644
index 0000000..6500226
--- /dev/null
+++ b/components/AreaUnitToggle.vue
@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="area-unit-toggle"
+    :class="`area-unit-toggle-${size}`"
+    role="group"
+    :aria-label="label"
+  >
+    <button
+      v-for="option in AREA_UNIT_OPTIONS"
+      :key="option.value"
+      class="area-unit-toggle-option"
+      :class="{ 'area-unit-toggle-option-active': areaDisplayUnit === option.value }"
+      type="button"
+      :aria-pressed="areaDisplayUnit === option.value"
+      :disabled="disabled"
+      @click="areaDisplayUnit = option.value"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AREA_UNIT_OPTIONS, type AreaDisplayUnit } from '~/util/area';
+
+interface Props {
+  disabled?: boolean;
+  label: string;
+  size?: 'sm' | 'md';
+}
+
+withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'sm',
+});
+
+const areaDisplayUnit = defineModel<AreaDisplayUnit>({ required: true });
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/scss/theme.scss";
+
+.area-unit-toggle {
+  display: inline-flex;
+  padding: 0.15rem;
+  background: rgba($text-navy, 0.06);
+  border: 1px solid rgba($text-navy, 0.12);
+  border-radius: 0.45rem;
+}
+
+.area-unit-toggle-option {
+  min-width: 2.8rem;
+  padding: 0.3rem 0.45rem;
+  color: $secondary;
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  border-radius: 0.32rem;
+}
+
+.area-unit-toggle-md {
+  padding: 0.2rem;
+  border-radius: 0.55rem;
+}
+
+.area-unit-toggle-md .area-unit-toggle-option {
+  min-width: 3.25rem;
+  padding: 0.35rem 0.55rem;
+  font-size: 0.85rem;
+  border-radius: 0.4rem;
+}
+
+.area-unit-toggle-option:hover:not(:disabled),
+.area-unit-toggle-option:focus-visible {
+  color: $text-navy;
+}
+
+.area-unit-toggle-option:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba($primary, 0.16);
+}
+
+.area-unit-toggle-option-active {
+  color: $text-navy;
+  background: $white;
+  box-shadow: $box-shadow-sm;
+}
+</style>
diff --git a/components/project-wizard/RichTextEditor.vue b/components/project-wizard/RichTextEditor.vue
index 8e3b9eb..ddaee89 100644
--- a/components/project-wizard/RichTextEditor.vue
+++ b/components/project-wizard/RichTextEditor.vue
@@ -9,7 +9,7 @@
         v-for="tool in tools"
         :key="tool.id"
         class="btn btn-link project-wizard-rich-text-editor-tool"
-        :class="{ 'project-wizard-rich-text-editor-tool-active': isToolActive(tool.id) }"
+        :class="{ 'project-wizard-rich-text-editor-tool-active': tool.active }"
         type="button"
         :aria-label="tool.label"
         @mousedown.prevent
@@ -31,9 +31,9 @@
 </template>
 
 <script setup lang="ts">
+import type { Editor } from '@tiptap/core';
 import { EditorContent, useEditor } from '@tiptap/vue-3';
 import { Image } from '@tiptap/extension-image';
-import { Link } from '@tiptap/extension-link';
 import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table';
 import { StarterKit } from '@tiptap/starter-kit';
 
@@ -47,16 +47,9 @@ type RichTextToolId
     | 'table'
     | 'quote';
 
-interface Props {
-  modelValue: string;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<{
-  'update:modelValue': [value: string];
-}>();
+const model = defineModel<string>({ default: '' });
 
-const tools: Array<{ icon: string; id: RichTextToolId; label: string }> = [
+const TOOL_DEFINITIONS: Array<{ icon: string; id: RichTextToolId; label: string }> = [
   { id: 'bold', icon: 'format_bold', label: 'Bold' },
   { id: 'italic', icon: 'format_italic', label: 'Italic' },
   { id: 'link', icon: 'link', label: 'Link' },
@@ -64,39 +57,66 @@ const tools: Array<{ icon: string; id: RichTextToolId; label: string }> = [
   { id: 'numbered-list', icon: 'format_list_numbered', label: 'Numbered list' },
   { id: 'image', icon: 'image', label: 'Image' },
   { id: 'table', icon: 'table_rows', label: 'Table' },
-  { id: 'quote', icon: 'format_quote', label: 'Quote' },
+  { id: 'quote', icon: 'format_quote', label: 'Quote' }
 ];
+const ACTIVE_TOOL_NAMES: Partial<Record<RichTextToolId, string>> = {
+  'bold': 'bold',
+  'italic': 'italic',
+  'link': 'link',
+  'bullet-list': 'bulletList',
+  'numbered-list': 'orderedList',
+  'image': 'image',
+  'table': 'table',
+  'quote': 'blockquote'
+};
+const activeToolIds = ref<Set<RichTextToolId>>(new Set());
+const lastEditorModelValue = ref(model.value);
+const tools = computed(() =>
+  TOOL_DEFINITIONS.map(tool => ({
+    ...tool,
+    active: activeToolIds.value.has(tool.id)
+  }))
+);
 
 const editor = useEditor({
-  content: props.modelValue || '<p></p>',
+  content: model.value || '<p></p>',
+  editable: true,
   extensions: [
-    StarterKit,
-    Link.configure({
-      openOnClick: false,
-      autolink: true,
-      defaultProtocol: 'https',
+    StarterKit.configure({
+      link: {
+        openOnClick: false,
+        autolink: true,
+        defaultProtocol: 'https'
+      }
     }),
     Image,
     Table.configure({
-      resizable: false,
+      resizable: false
     }),
     TableRow,
     TableHeader,
-    TableCell,
+    TableCell
   ],
   editorProps: {
     attributes: {
-      class: 'project-wizard-rich-text-editor-surface project-wizard-rich-text-content',
-    },
+      class: 'project-wizard-rich-text-editor-surface project-wizard-rich-text-content'
+    }
   },
   onUpdate({ editor: currentEditor }) {
     const nextValue = currentEditor.isEmpty ? '' : currentEditor.getHTML();
-    emit('update:modelValue', nextValue);
+    lastEditorModelValue.value = nextValue;
+    model.value = nextValue;
+  },
+  onCreate({ editor: currentEditor }) {
+    updateActiveTools(currentEditor);
   },
+  onTransaction({ editor: currentEditor }) {
+    updateActiveTools(currentEditor);
+  }
 });
 
 watch(
-  () => props.modelValue,
+  model,
   (value) => {
     const currentEditor = editor.value;
 
@@ -106,37 +126,27 @@ watch(
 
     const nextValue = value || '<p></p>';
 
-    if (currentEditor.isFocused || currentEditor.getHTML() === nextValue) {
+    if (
+      value === lastEditorModelValue.value
+      || currentEditor.getHTML() === nextValue
+    ) {
       return;
     }
 
     currentEditor.commands.setContent(nextValue, { emitUpdate: false });
-  },
-);
-
-function isToolActive(toolId: RichTextToolId) {
-  const currentEditor = editor.value;
-
-  if (!currentEditor) {
-    return false;
+    lastEditorModelValue.value = value;
   }
+);
 
-  switch (toolId) {
-    case 'bold':
-      return currentEditor.isActive('bold');
-    case 'italic':
-      return currentEditor.isActive('italic');
-    case 'link':
-      return currentEditor.isActive('link');
-    case 'bullet-list':
-      return currentEditor.isActive('bulletList');
-    case 'numbered-list':
-      return currentEditor.isActive('orderedList');
-    case 'quote':
-      return currentEditor.isActive('blockquote');
-    default:
-      return false;
-  }
+function updateActiveTools(currentEditor: Editor) {
+  activeToolIds.value = new Set(
+    TOOL_DEFINITIONS
+      .filter(({ id }) => {
+        const activeToolName = ACTIVE_TOOL_NAMES[id];
+        return activeToolName ? currentEditor.isActive(activeToolName) : false;
+      })
+      .map(({ id }) => id)
+  );
 }
 
 function applyTool(toolId: RichTextToolId) {
diff --git a/components/project-wizard/steps/AreaOfInterestStep.vue b/components/project-wizard/steps/AreaOfInterestStep.vue
index c8df468..4ddf1d3 100644
--- a/components/project-wizard/steps/AreaOfInterestStep.vue
+++ b/components/project-wizard/steps/AreaOfInterestStep.vue
@@ -53,6 +53,15 @@
         </div>
       </div>
 
+      <div class="project-wizard-area-measurement">
+        <span>Area: <strong>{{ formattedArea }}</strong></span>
+        <area-unit-toggle
+          :model-value="areaDisplayUnit"
+          label="Area of interest display unit"
+          @update:model-value="onAreaDisplayUnitUpdate"
+        />
+      </div>
+
       <button
         class="btn btn-light project-wizard-area-download"
         type="button"
@@ -169,8 +178,11 @@ import uploadIcon from '~/assets/img/upload.svg';
 import warningIcon from '~/assets/img/warning.svg';
 
 import type { ProjectWizardAreaStepDefinition } from '~/types/project-wizard';
+import { formatArea, type AreaDisplayUnit } from '~/util/area';
 
 interface Props {
+  areaDisplayUnit: AreaDisplayUnit;
+  areaSquareKilometers: number;
   errorMessage: string;
   hasAoi: boolean;
   importedFileName: string;
@@ -181,14 +193,18 @@ interface Props {
 
 const props = defineProps<Props>();
 const emit = defineEmits<{
-  download: [];
-  draw: [];
-  reset: [];
-  upload: [file: File];
+  'download': [];
+  'draw': [];
+  'reset': [];
+  'upload': [file: File];
+  'update:area-display-unit': [unit: AreaDisplayUnit];
 }>();
 
 const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef');
 const isDraggingFile = ref(false);
+const formattedArea = computed(() =>
+  formatArea(props.areaSquareKilometers, props.areaDisplayUnit)
+);
 
 watch(
   () => props.importedFileName,
@@ -203,6 +219,10 @@ function openFilePicker() {
   fileInputRef.value?.click();
 }
 
+function onAreaDisplayUnitUpdate(unit: AreaDisplayUnit) {
+  emit('update:area-display-unit', unit);
+}
+
 function onFileInputChange(event: Event) {
   const input = event.target as HTMLInputElement;
   const file = input.files?.[0];
@@ -339,6 +359,14 @@ function onFileDrop(event: DragEvent) {
   border-radius: 0.55rem;
 }
 
+.project-wizard-area-measurement {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: #195747;
+  font-size: 0.88rem;
+}
+
 .project-wizard-area-captured-copy {
   min-width: 0;
   display: inline-flex;
@@ -502,5 +530,9 @@ function onFileDrop(event: DragEvent) {
   .project-wizard-area-download {
     justify-content: center;
   }
+
+  .project-wizard-area-measurement {
+    justify-content: space-between;
+  }
 }
 </style>
diff --git a/components/project-wizard/steps/ReviewStep.vue b/components/project-wizard/steps/ReviewStep.vue
index 15d8e18..af6d238 100644
--- a/components/project-wizard/steps/ReviewStep.vue
+++ b/components/project-wizard/steps/ReviewStep.vue
@@ -39,6 +39,11 @@
         <p>{{ summary.numberOfTasksLabel }}</p>
       </div>
 
+      <div class="project-wizard-review-item">
+        <h3>Area of Interest</h3>
+        <p>{{ summary.aoiAreaLabel }}</p>
+      </div>
+
       <div class="project-wizard-review-item">
         <h3>Lock Timeout</h3>
         <p>{{ summary.lockTimeoutLabel }}</p>
@@ -56,7 +61,7 @@
         <h3>Project Validators</h3>
         <div class="project-wizard-review-validator-list">
           <div
-            v-for="validator in summary.selectedValidators"
+            v-for="validator in displayValidators"
             :key="validator.authUid"
             class="project-wizard-review-validator"
           >
@@ -69,7 +74,7 @@
             </span>
             <span>{{ validator.displayName }}</span>
             <span class="project-wizard-review-validator-role">
-              {{ formatRole(validator.role) }}
+              {{ validator.roleLabel }}
             </span>
           </div>
         </div>
@@ -98,9 +103,16 @@ interface Props {
   summary: ProjectWizardReviewSummary;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
-function formatRole(role: WorkspaceRole) {
+const displayValidators = computed(() =>
+  props.summary.selectedValidators.map(validator => ({
+    ...validator,
+    roleLabel: formatRole(validator.role)
+  }))
+);
+
+function formatRole(role: WorkspaceRole): string {
   return role.charAt(0).toUpperCase() + role.slice(1);
 }
 </script>
@@ -136,7 +148,7 @@ function formatRole(role: WorkspaceRole) {
 
 .project-wizard-review-group {
   display: grid;
-  gap: 25px;
+  gap: 1.5625rem;
 }
 
 .project-wizard-review-item {
@@ -159,7 +171,7 @@ function formatRole(role: WorkspaceRole) {
 .project-wizard-review-item p {
   margin: 0;
   text-align: left;
-  font-family: Lato, var(--primary-font-family), sans-serif;
+  font-family: var(--primary-font-family);
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
@@ -174,13 +186,13 @@ function formatRole(role: WorkspaceRole) {
   align-items: center;
   gap: 0.35rem;
   text-align: left;
-  font-family: Lato, var(--primary-font-family), sans-serif;
+  font-family: var(--primary-font-family);
   font-size: 1.125rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.625rem;
   letter-spacing: 0;
-  color: #5a607b;
+  color: $text-secondary;
   opacity: 1;
 }
 
@@ -198,8 +210,8 @@ function formatRole(role: WorkspaceRole) {
   align-items: center;
   flex-wrap: wrap;
   gap: 0.55rem;
-  color: #5a607b;
-  font-family: Lato, var(--primary-font-family), sans-serif;
+  color: $text-secondary;
+  font-family: var(--primary-font-family);
   font-size: 1.125rem;
   font-style: normal;
   font-weight: 400;
diff --git a/components/project-wizard/steps/SettingsStep.vue b/components/project-wizard/steps/SettingsStep.vue
index 2fd21ab..00f976c 100644
--- a/components/project-wizard/steps/SettingsStep.vue
+++ b/components/project-wizard/steps/SettingsStep.vue
@@ -9,7 +9,7 @@
       <div class="project-wizard-settings-row">
         <div class="project-wizard-settings-copy">
           <h3 class="project-wizard-settings-heading">Lock Timeout</h3>
-          <p class="project-wizard-settings-text">Project will be locked for specific hours</p>
+          <p class="project-wizard-settings-text">Unlock tasks after the specified number of hours pass</p>
         </div>
 
         <div class="project-wizard-settings-lock-control">
@@ -25,10 +25,10 @@
           >
             <option
               v-for="hourOption in hourOptions"
-              :key="hourOption"
-              :value="hourOption"
+              :key="hourOption.value"
+              :value="hourOption.value"
             >
-              {{ String(hourOption).padStart(2, '0') }}
+              {{ hourOption.label }}
             </option>
           </select>
           <span class="project-wizard-settings-select-suffix">hours</span>
@@ -81,8 +81,7 @@
 
       <client-only fallback-tag="div">
         <project-wizard-rich-text-editor
-          :model-value="instructions"
-          @update:model-value="emit('update:instructions', $event)"
+          v-model="instructionsModel"
         />
       </client-only>
     </section>
@@ -107,7 +106,7 @@ interface Props {
   workspaceUsersLoading: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 const emit = defineEmits<{
   'add:validator': [user: ProjectWizardWorkspaceUser];
   'remove:validator': [userId: string];
@@ -119,7 +118,18 @@ const emit = defineEmits<{
 }>();
 
 const lockTimeoutId = 'project-wizard-settings-lock-timeout';
-const hourOptions = Array.from({ length: 24 }, (_, index) => index + 1);
+const hourOptions = Array.from({ length: 24 }, (_, index) => {
+  const value = index + 1;
+
+  return {
+    label: String(value).padStart(2, '0'),
+    value
+  };
+});
+const instructionsModel = computed({
+  get: () => props.instructions,
+  set: value => emit('update:instructions', value)
+});
 
 function onLockTimeoutChange(event: Event) {
   emit('update:lock-timeout-hours', Number((event.target as HTMLSelectElement).value));
@@ -135,7 +145,7 @@ function onReviewRequiredChange(event: Event) {
 
 .project-wizard-step-settings {
   display: grid;
-  gap: 30px;
+  gap: 1.875rem;
 }
 
 .project-wizard-step-header,
diff --git a/components/task-editor/MappingPanel.vue b/components/task-editor/MappingPanel.vue
new file mode 100644
index 0000000..4c46323
--- /dev/null
+++ b/components/task-editor/MappingPanel.vue
@@ -0,0 +1,36 @@
+<template>
+  <section class="task-editor-mapping-panel">
+    <h2>Ready to finish mapping?</h2>
+    <p>
+      Push your edits in Rapid before marking this task as done. You can skip the task to
+      release the lock without submitting it.
+    </p>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+@import "~/assets/scss/theme.scss";
+
+.task-editor-mapping-panel {
+  display: grid;
+  gap: 1rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba($text-navy, 0.1);
+}
+
+.task-editor-mapping-panel h2,
+.task-editor-mapping-panel p {
+  margin: 0;
+}
+
+.task-editor-mapping-panel h2 {
+  color: $text-navy;
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.task-editor-mapping-panel p {
+  color: $secondary;
+  line-height: 1.5;
+}
+</style>
diff --git a/components/task-editor/ReviewPanel.vue b/components/task-editor/ReviewPanel.vue
new file mode 100644
index 0000000..7a8ee27
--- /dev/null
+++ b/components/task-editor/ReviewPanel.vue
@@ -0,0 +1,213 @@
+<template>
+  <section class="task-editor-review-panel">
+    <fieldset class="task-editor-feedback-group">
+      <legend class="task-editor-feedback-legend">Review this mapping</legend>
+      <label
+        class="task-editor-feedback-option"
+        :class="{ 'task-editor-feedback-option-selected': reviewDecision === 'approve' }"
+      >
+        <input
+          v-model="reviewDecision"
+          class="visually-hidden"
+          type="radio"
+          name="task-editor-review-decision"
+          value="approve"
+        >
+        <span>Approve</span>
+      </label>
+      <label
+        class="task-editor-feedback-option"
+        :class="{ 'task-editor-feedback-option-selected': reviewDecision === 'remap' }"
+      >
+        <input
+          v-model="reviewDecision"
+          class="visually-hidden"
+          type="radio"
+          name="task-editor-review-decision"
+          value="remap"
+        >
+        <span>Request remap</span>
+      </label>
+    </fieldset>
+
+    <div
+      v-if="reviewDecision === 'remap'"
+      class="task-editor-feedback-fields"
+    >
+      <label
+        class="task-editor-field-label"
+        for="task-editor-feedback-reason"
+      >
+        Reason
+      </label>
+      <app-select
+        id="task-editor-feedback-reason"
+        v-model="feedbackReasonCategory"
+        class="task-editor-feedback-select"
+        :options="feedbackReasonOptions"
+        placeholder="Select a reason"
+        aria-label="Select a remap reason"
+      />
+
+      <label
+        class="task-editor-field-label"
+        for="task-editor-feedback-notes"
+      >
+        Notes
+      </label>
+      <textarea
+        id="task-editor-feedback-notes"
+        v-model="feedbackNotes"
+        class="form-control task-editor-field task-editor-feedback-notes"
+        rows="5"
+        placeholder="Describe what the mapper needs to fix"
+        required
+      />
+      <p class="task-editor-feedback-hint">
+        A reason and notes are required to request a remap.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type {
+  TaskFeedbackReasonOption,
+  TaskReviewDecision,
+} from '~/composables/useTaskEditorContext';
+import type { WorkspaceProjectTaskFeedbackReasonCategory } from '~/types/projects';
+
+interface Props {
+  feedbackReasonOptions: TaskFeedbackReasonOption[];
+}
+
+defineProps<Props>();
+
+const feedbackNotes = defineModel<string>('feedbackNotes', { required: true });
+const feedbackReasonCategory = defineModel<WorkspaceProjectTaskFeedbackReasonCategory | ''>(
+  'feedbackReasonCategory',
+  { required: true },
+);
+const reviewDecision = defineModel<TaskReviewDecision>('reviewDecision', { required: true });
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/scss/theme.scss";
+
+.task-editor-review-panel {
+  display: grid;
+  gap: 0.9rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba($text-navy, 0.1);
+}
+
+.task-editor-feedback-fields,
+.task-editor-feedback-group {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.task-editor-field-label,
+.task-editor-feedback-legend {
+  margin: 0;
+  color: $text-navy;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.task-editor-feedback-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.task-editor-feedback-legend {
+  flex: 0 0 100%;
+  margin-bottom: 0.25rem;
+  font-size: 1.2rem;
+}
+
+.task-editor-field {
+  color: $text-navy;
+  background: $white;
+  border-color: rgba($text-navy, 0.14);
+  border-radius: 0.85rem;
+}
+
+.task-editor-field:focus {
+  border-color: rgba($primary, 0.4);
+  box-shadow: 0 0 0 0.2rem rgba($primary, 0.12);
+}
+
+.task-editor-feedback-notes {
+  min-height: 7rem;
+  resize: vertical;
+}
+
+.task-editor-feedback-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0.55rem 1.25rem;
+  color: $text-navy;
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1;
+  background: $white;
+  border: 1px solid $text-navy;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.task-editor-feedback-option:hover {
+  background: rgba($text-navy, 0.05);
+}
+
+.task-editor-feedback-option:focus-within {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba($text-navy, 0.18);
+}
+
+.task-editor-feedback-option-selected {
+  color: $white;
+  background: $text-navy;
+  border-color: $text-navy;
+}
+
+.task-editor-feedback-option-selected:hover,
+.task-editor-feedback-option-selected:focus-within {
+  color: $white;
+  background: $text-navy;
+  border-color: $text-navy;
+}
+
+.task-editor-feedback-option > span {
+  white-space: nowrap;
+}
+
+.task-editor-feedback-select {
+  width: 100%;
+}
+
+.task-editor-feedback-hint {
+  margin: 0;
+  color: $secondary;
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+@include media-breakpoint-down(sm) {
+  .task-editor-feedback-group {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .task-editor-feedback-legend {
+    flex-basis: auto;
+  }
+}
+</style>
diff --git a/components/task-editor/Sidebar.vue b/components/task-editor/Sidebar.vue
new file mode 100644
index 0000000..34dca05
--- /dev/null
+++ b/components/task-editor/Sidebar.vue
@@ -0,0 +1,608 @@
+<template>
+  <aside
+    :id="sidebarId"
+    class="task-editor-sidebar"
+    :class="{ 'task-editor-sidebar-open': open }"
+    aria-label="Task editor details"
+  >
+    <button
+      class="task-editor-sidebar-handle"
+      type="button"
+      :aria-controls="sidebarId"
+      :aria-expanded="open"
+      :aria-label="open ? 'Hide task details panel' : 'Show task details panel'"
+      @click="emit('toggle')"
+    >
+      <app-icon
+        :variant="open ? 'chevron_right' : 'chevron_left'"
+        size="20"
+        no-margin
+      />
+    </button>
+
+    <div class="task-editor-sidebar-scroll">
+      <header class="task-editor-sidebar-hero">
+        <button
+          class="btn btn-link task-editor-back"
+          type="button"
+          @click="emit('back')"
+        >
+          <app-icon
+            variant="chevron_left"
+            size="20"
+            no-margin
+          />
+          Go back
+        </button>
+
+        <h1 class="task-editor-title">
+          {{ projectName }}
+        </h1>
+
+        <div class="task-editor-task-summary">
+          <strong>{{ taskLabel }}</strong>
+          <div class="task-editor-task-badges">
+            <span class="task-editor-status">{{ taskStatusLabel }}</span>
+            <span
+              v-if="lockTimeRemaining"
+              class="task-editor-lock-time"
+            >
+              <app-icon
+                variant="schedule"
+                size="17"
+                no-margin
+              />
+              {{ lockTimeRemaining }}
+            </span>
+          </div>
+        </div>
+
+        <p
+          v-if="editorLoadErrorMessage"
+          class="task-editor-load-error"
+          role="alert"
+        >
+          {{ editorLoadErrorMessage }}
+        </p>
+      </header>
+
+      <b-tabs
+        class="task-editor-tabs"
+        content-class="task-editor-tab-content"
+        nav-class="task-editor-tab-list"
+        no-fade
+        no-nav-style
+      >
+        <b-tab
+          id="task-editor-completion-panel"
+          button-id="task-editor-completion-tab"
+          class="task-editor-tab-panel"
+          title="Completion"
+          title-link-class="task-editor-tab"
+        >
+          <div class="task-editor-info-card">
+            <span class="task-editor-info-icon">
+              <app-icon
+                variant="info"
+                size="22"
+                no-margin
+              />
+            </span>
+            <div>
+              <h2>Task status</h2>
+              <p>{{ taskStatusHelpText }}</p>
+            </div>
+          </div>
+
+          <task-editor-review-panel
+            v-if="reviewTask"
+            v-model:feedback-notes="feedbackNotes"
+            v-model:feedback-reason-category="feedbackReasonCategory"
+            v-model:review-decision="reviewDecision"
+            :feedback-reason-options="feedbackReasonOptions"
+          />
+          <task-editor-mapping-panel v-else />
+        </b-tab>
+
+        <b-tab
+          id="task-editor-instructions-panel"
+          button-id="task-editor-instructions-tab"
+          class="task-editor-tab-panel task-editor-instructions"
+          title="Instructions"
+          title-link-class="task-editor-tab"
+        >
+          <div class="task-editor-section-heading">
+            <h2>Instructions</h2>
+          </div>
+          <workspace-project-details-rich-text-content
+            class="task-editor-rich-copy"
+            :html="instructions"
+          />
+        </b-tab>
+      </b-tabs>
+    </div>
+
+    <footer class="task-editor-sidebar-footer">
+      <section class="task-editor-actions">
+        <p
+          v-if="submitErrorMessage"
+          class="task-editor-submit-error"
+          aria-live="polite"
+        >
+          {{ submitErrorMessage }}
+        </p>
+
+        <div
+          v-if="showActionStatus"
+          class="task-editor-action-status"
+          :class="{ 'task-editor-action-status-blocked': actionStatusBlocked }"
+          aria-live="polite"
+        >
+          <app-icon
+            :variant="actionStatusBlocked ? 'info' : 'check_circle'"
+            size="18"
+            no-margin
+          />
+          <span>{{ actionStatusMessage }}</span>
+        </div>
+
+        <div class="task-editor-action-list">
+          <button
+            v-for="action in actions"
+            :key="action.id"
+            class="btn task-editor-action-button"
+            :class="`btn-${action.variant}`"
+            type="button"
+            :disabled="action.disabled"
+            @click="emit('action', action.id)"
+          >
+            {{ action.label }}
+          </button>
+        </div>
+      </section>
+    </footer>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import type {
+  TaskFeedbackReasonOption,
+  TaskReviewDecision,
+} from '~/composables/useTaskEditorContext';
+import type { WorkspaceProjectTaskFeedbackReasonCategory } from '~/types/projects';
+import type { TaskEditorAction, TaskEditorActionId } from '~/types/task-editor';
+
+interface Props {
+  actionStatusBlocked: boolean;
+  actionStatusMessage: string;
+  actions: TaskEditorAction[];
+  editorLoadErrorMessage: string;
+  feedbackReasonOptions: TaskFeedbackReasonOption[];
+  instructions: string;
+  lockTimeRemaining: string;
+  open: boolean;
+  projectName: string;
+  reviewTask: boolean;
+  showActionStatus: boolean;
+  sidebarId: string;
+  submitErrorMessage: string;
+  taskLabel: string;
+  taskStatusHelpText: string;
+  taskStatusLabel: string;
+}
+
+defineProps<Props>();
+const emit = defineEmits<{
+  action: [actionId: TaskEditorActionId];
+  back: [];
+  toggle: [];
+}>();
+
+const feedbackNotes = defineModel<string>('feedbackNotes', { required: true });
+const feedbackReasonCategory = defineModel<WorkspaceProjectTaskFeedbackReasonCategory | ''>(
+  'feedbackReasonCategory',
+  { required: true },
+);
+const reviewDecision = defineModel<TaskReviewDecision>('reviewDecision', { required: true });
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/scss/theme.scss";
+
+.task-editor-sidebar {
+  min-height: 0;
+  position: relative;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  background: $white;
+  border: 0;
+  border-left: 1px solid rgba($text-navy, 0.1);
+  border-radius: 0;
+  box-shadow: -0.5rem 0 1.5rem rgba($text-navy, 0.08);
+  transition:
+    width 0.28s ease,
+    box-shadow 0.28s ease;
+}
+
+.task-editor-sidebar:not(.task-editor-sidebar-open) {
+  box-shadow: -0.2rem 0 1rem rgba($text-navy, 0.04);
+}
+
+.task-editor-load-error {
+  margin: 0.85rem 0 0;
+  padding: 0.75rem;
+  color: $danger-red;
+  font-size: 0.9rem;
+  line-height: 1.45;
+  background: rgba($white, 0.92);
+  border: 1px solid rgba($danger-red, 0.28);
+  border-radius: 0.75rem;
+}
+
+.task-editor-sidebar-scroll {
+  height: 100%;
+  display: grid;
+  align-content: start;
+  gap: 0;
+  padding: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  transition: opacity 0.16s ease;
+}
+
+.task-editor-sidebar:not(.task-editor-sidebar-open) .task-editor-sidebar-scroll,
+.task-editor-sidebar:not(.task-editor-sidebar-open) .task-editor-sidebar-footer {
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.task-editor-sidebar-footer {
+  position: sticky;
+  bottom: 0;
+  display: grid;
+  gap: 0;
+  padding: 1rem 1.75rem 1.25rem;
+  background: $white;
+  border-top: 1px solid rgba($text-navy, 0.1);
+}
+
+.task-editor-sidebar-handle {
+  position: absolute;
+  top: 2rem;
+  left: 0.9rem;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.35rem;
+  height: 3.15rem;
+  color: $text-navy;
+  background: $white;
+  border: 1px solid rgba($text-navy, 0.14);
+  border-radius: 0.65rem;
+  box-shadow: $box-shadow;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    left 0.28s ease,
+    transform 0.28s ease;
+}
+
+.task-editor-sidebar-handle:hover,
+.task-editor-sidebar-handle:focus-visible {
+  color: $white;
+  background: $primary;
+  box-shadow:
+    0 0 0 0.38rem rgba($primary, 0.2),
+    $box-shadow;
+}
+
+.task-editor-sidebar.task-editor-sidebar-open .task-editor-sidebar-handle {
+  left: 0;
+  transform: translateX(-50%);
+}
+
+.task-editor-sidebar:not(.task-editor-sidebar-open) .task-editor-sidebar-handle {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.task-editor-sidebar-hero {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.75rem;
+  background: $purple-background-light;
+}
+
+.task-editor-title {
+  margin: 0;
+  color: $text-navy;
+  font-family: var(--secondary-font-family);
+  font-size: 1.65rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.task-editor-task-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 1rem;
+  color: $secondary;
+  border-top: 1px dashed rgba($text-navy, 0.25);
+}
+
+.task-editor-task-badges {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.task-editor-status {
+  width: fit-content;
+  margin: 0;
+  padding: 0.35rem 0.6rem;
+  color: $primary;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  background: rgba($primary, 0.08);
+  border-radius: 999px;
+}
+
+.task-editor-lock-time {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.65rem;
+  color: $status-warning-text;
+  font-size: 0.82rem;
+  font-weight: 600;
+  background: $status-warning-surface;
+  border: 1px solid $status-warning-border;
+  border-radius: 999px;
+}
+
+.task-editor-tabs {
+  background: $white;
+}
+
+.task-editor-tabs :deep(.task-editor-tab-list) {
+  display: flex;
+  gap: 1.75rem;
+  margin: 0;
+  padding: 1.25rem 1.75rem 0;
+  list-style: none;
+  background: $white;
+  border-bottom: 0.25rem solid rgba($primary, 0.08);
+}
+
+.task-editor-tabs :deep(.task-editor-tab) {
+  position: relative;
+  padding: 0 0 0.75rem;
+  color: $secondary;
+  font-size: 1rem;
+  font-weight: 600;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.task-editor-tabs :deep(.task-editor-tab::after) {
+  position: absolute;
+  right: 0;
+  bottom: -0.25rem;
+  left: 0;
+  height: 0.25rem;
+  content: "";
+  background: transparent;
+}
+
+.task-editor-tabs :deep(.task-editor-tab:hover),
+.task-editor-tabs :deep(.task-editor-tab:focus-visible),
+.task-editor-tabs :deep(.task-editor-tab.active) {
+  color: $text-navy;
+}
+
+.task-editor-tabs :deep(.task-editor-tab.active::after) {
+  background: $text-navy;
+}
+
+.task-editor-tabs :deep(.task-editor-tab-panel) {
+  display: grid;
+  align-content: start;
+  gap: 1.75rem;
+  padding: 1.5rem 1.75rem 2rem;
+}
+
+.task-editor-tabs :deep(.task-editor-tab-panel:not(.active)) {
+  display: none;
+}
+
+.task-editor-info-card {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.85rem;
+  padding: 1rem;
+  background: $surface-subtle;
+  border: 1px solid rgba($text-navy, 0.1);
+  border-radius: 0.8rem;
+}
+
+.task-editor-info-card h2,
+.task-editor-info-card p {
+  margin: 0;
+}
+
+.task-editor-info-card h2 {
+  color: $text-navy;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.task-editor-info-card p {
+  margin-top: 0.25rem;
+  color: $secondary;
+  font-size: 0.93rem;
+  line-height: 1.45;
+}
+
+.task-editor-info-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  color: $secondary;
+  background: $purple-background-light;
+  border-radius: 50%;
+}
+
+.task-editor-section-heading {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.task-editor-section-heading h2 {
+  margin: 0;
+  color: $text-navy;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.task-editor-instructions {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.task-editor-rich-copy {
+  color: $secondary;
+  font-size: 1rem;
+  line-height: 1.55;
+}
+
+.task-editor-actions {
+  display: grid;
+  gap: 0.9rem;
+  position: relative;
+  z-index: 1;
+}
+
+.task-editor-submit-error {
+  margin: 0;
+  color: $danger-red;
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.task-editor-action-status {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0;
+  padding: 0.85rem 0.9rem;
+  color: $tdei-green;
+  font-size: 0.92rem;
+  line-height: 1.45;
+  background: rgba($white, 0.92);
+  border: 1px solid rgba($tdei-green, 0.24);
+  border-radius: 0.85rem;
+}
+
+.task-editor-action-status :deep(.material-icons) {
+  margin-top: 0;
+}
+
+.task-editor-action-status-blocked {
+  color: $text-navy;
+  background: $purple-background-medium;
+  border-color: rgba($primary, 0.18);
+}
+
+.task-editor-action-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.7rem;
+}
+
+.task-editor-action-button {
+  width: 100%;
+  min-height: 3.15rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 1rem;
+  font-weight: 700;
+  border-radius: 0.35rem;
+}
+
+.task-editor-action-button.btn-primary {
+  color: $white;
+  background: $primary;
+  border-color: $primary;
+}
+
+.task-editor-action-button.btn-outline-secondary {
+  color: $secondary;
+  background: $white;
+  border-color: rgba($text-navy, 0.16);
+}
+
+.task-editor-back {
+  width: fit-content;
+  min-height: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0;
+  color: $secondary;
+  font-weight: 700;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+}
+
+.task-editor-back:hover,
+.task-editor-back:focus-visible {
+  color: $primary;
+}
+
+@include media-breakpoint-down(sm) {
+  .task-editor-title {
+    font-size: 1.45rem;
+  }
+
+  .task-editor-sidebar-hero,
+  .task-editor-sidebar-footer {
+    padding-inline: 1rem;
+  }
+
+  .task-editor-tabs :deep(.task-editor-tab-list),
+  .task-editor-tabs :deep(.task-editor-tab-panel) {
+    padding-inline: 1rem;
+  }
+
+  .task-editor-task-summary {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .task-editor-task-badges {
+    justify-content: flex-start;
+  }
+
+  .task-editor-action-list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/components/workspace-project-details/AddContributorDialog.vue b/components/workspace-project-details/AddContributorDialog.vue
index f0f95ec..0825949 100644
--- a/components/workspace-project-details/AddContributorDialog.vue
+++ b/components/workspace-project-details/AddContributorDialog.vue
@@ -45,7 +45,7 @@
         </div>
 
         <p
-          v-else-if="filteredUsers.length === 0"
+          v-else-if="displayUsers.length === 0"
           class="project-detail-add-contributor-status"
         >
           No users match your search.
@@ -58,15 +58,15 @@
           aria-label="Available users"
         >
           <button
-            v-for="user in filteredUsers"
+            v-for="{ existing, initial, user } in displayUsers"
             :key="user.authUid"
             class="project-detail-add-contributor-user"
             :class="{
-              'project-detail-add-contributor-user-disabled': isExistingUser(user.authUid),
+              'project-detail-add-contributor-user-disabled': existing,
               'project-detail-add-contributor-user-selected': selectedUserId === user.authUid
             }"
             type="button"
-            :disabled="isExistingUser(user.authUid)"
+            :disabled="existing"
             :aria-pressed="selectedUserId === user.authUid"
             @click="selectUser(user.authUid)"
           >
@@ -74,7 +74,7 @@
               class="project-detail-add-contributor-avatar"
               aria-hidden="true"
             >
-              {{ getInitial(user.displayName) }}
+              {{ initial }}
             </span>
 
             <span class="project-detail-add-contributor-user-copy">
@@ -83,7 +83,7 @@
             </span>
 
             <span
-              v-if="isExistingUser(user.authUid)"
+              v-if="existing"
               class="project-detail-add-contributor-state"
             >
               Already added
@@ -167,12 +167,17 @@ const selectedRole = ref<WorkspaceProjectContributorRole>('contributor');
 const selectedUserId = ref('');
 
 const roleOptions: SelectOption[] = [
-  { label: 'Lead', value: 'lead' },
   { label: 'Validator', value: 'validator' },
   { label: 'Contributor', value: 'contributor' },
 ];
 
-const filteredUsers = computed(() => props.users.slice(0, 10));
+const displayUsers = computed(() =>
+  props.users.slice(0, 10).map(user => ({
+    existing: props.existingUserIds.includes(user.authUid),
+    initial: getInitial(user.displayName),
+    user,
+  })),
+);
 
 const canSubmit = computed(() =>
   selectedUserId.value.trim().length > 0,
diff --git a/components/workspace-project-details/ContributorsTab.vue b/components/workspace-project-details/ContributorsTab.vue
index b9f69f2..1e4bccb 100644
--- a/components/workspace-project-details/ContributorsTab.vue
+++ b/components/workspace-project-details/ContributorsTab.vue
@@ -89,7 +89,14 @@
 
           <div class="project-detail-contributors-role-cell">
             <div class="project-detail-contributors-role-actions">
+              <span
+                v-if="contributor.role === 'lead'"
+                class="project-detail-contributors-role-readonly"
+              >
+                Lead
+              </span>
               <app-select
+                v-else
                 :id="`project-detail-contributor-role-${contributor.id}`"
                 :model-value="localRoles[contributor.id] ?? contributor.role"
                 :aria-label="`Change role for ${contributor.name}`"
@@ -99,7 +106,7 @@
               />
 
               <button
-                v-if="props.canManage"
+                v-if="props.canManage && contributor.role !== 'lead'"
                 class="btn btn-outline-danger project-detail-contributors-delete"
                 type="button"
                 :disabled="props.updatingContributorId === contributor.id"
@@ -259,7 +266,6 @@ const roleOptions: SelectOption[] = [
 ];
 
 const rowRoleOptions: SelectOption[] = [
-  { label: 'Lead', value: 'lead' },
   { label: 'Validator', value: 'validator' },
   { label: 'Contributor', value: 'contributor' },
 ];
@@ -583,6 +589,19 @@ function openAddContributorDialog() {
   border-radius: 0.8rem;
 }
 
+.project-detail-contributors-role-readonly {
+  min-width: 12.5rem;
+  min-height: 2.75rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.7rem 0.9rem;
+  color: $text-secondary;
+  font-weight: 600;
+  background: $surface-card;
+  border: 1px solid $border-subtle;
+  border-radius: 0.8rem;
+}
+
 .project-detail-contributors-role-cell :deep(.tdei-select-menu) {
   min-width: 100%;
   max-height: 14rem;
diff --git a/components/workspace-project-details/ProjectMap.vue b/components/workspace-project-details/ProjectMap.vue
index 3964136..a082d3e 100644
--- a/components/workspace-project-details/ProjectMap.vue
+++ b/components/workspace-project-details/ProjectMap.vue
@@ -160,7 +160,7 @@ const emptyCollection: FeatureCollection = {
 const legendItems = [
   { label: 'Ready for mapping', color: '#fde9aa' },
   { label: 'Ready for validation', color: '#a8d8f8' },
-  { label: 'More mapping needed', color: '#f8be90' },
+  { label: 'More mapping required', color: '#f8be90' },
   { label: 'Completed', color: '#aae8cd' },
 ];
 
diff --git a/components/workspace-project-details/RichTextContent.vue b/components/workspace-project-details/RichTextContent.vue
index be4c0e7..45e6fd9 100644
--- a/components/workspace-project-details/RichTextContent.vue
+++ b/components/workspace-project-details/RichTextContent.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import DOMPurify from 'dompurify';
+import { sanitizeRichTextHtml } from '~/util/rich-text';
 
 interface Props {
   /** Raw HTML string, typically coming from an API response or a WYSIWYG editor. */
@@ -24,9 +24,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const safeHtml = computed(() =>
-  DOMPurify.sanitize(props.html, { USE_PROFILES: { html: true } })
-);
+const safeHtml = computed(() => sanitizeRichTextHtml(props.html));
 </script>
 
 <style lang="scss" scoped>
@@ -35,13 +33,13 @@ const safeHtml = computed(() =>
 .project-detail-rich-text {
   overflow-x: auto;
   color: $text-navy;
-  font-size: 16px;
-  line-height: 26px;
+  font-size: 1rem;
+  line-height: 1.625;
 }
 
 .project-detail-rich-text:deep(h3) {
   margin: 0 0 0.9rem;
-  color: #1a1e3d;
+  color: $text-navy;
   font-family: var(--secondary-font-family);
   font-size: 1.18rem;
   font-weight: 700;
@@ -66,7 +64,7 @@ const safeHtml = computed(() =>
 .project-detail-rich-text:deep(blockquote) {
   margin: 0 0 1.4rem;
   padding: 0.75rem 1rem;
-  color: #5a607b;
+  color: $text-secondary;
   background-color: rgba($primary, 0.04);
   border-left: 3px solid rgba($primary, 0.22);
 }
@@ -91,7 +89,7 @@ const safeHtml = computed(() =>
 }
 
 .project-detail-rich-text:deep(th) {
-  color: #1a1e3d;
+  color: $text-navy;
   font-weight: 700;
   background-color: rgba($primary, 0.06);
 }
@@ -102,7 +100,7 @@ const safeHtml = computed(() =>
 }
 
 .project-detail-rich-text:deep(a) {
-  color: #5578d9;
+  color: $link-text;
   text-decoration: none;
 }
 
diff --git a/components/workspace-project-details/TaskSetupPanel.vue b/components/workspace-project-details/TaskSetupPanel.vue
index 8665c3f..ab68f4f 100644
--- a/components/workspace-project-details/TaskSetupPanel.vue
+++ b/components/workspace-project-details/TaskSetupPanel.vue
@@ -15,7 +15,7 @@
         no-margin
       />
       <div>
-        <p>Set the task area between <strong>{{ formattedMinimumTaskArea }} km2</strong> to <strong>{{ formattedMaximumTaskArea }} km2</strong> and click generate tasks.</p>
+        <p>Set the task area between <strong>{{ formattedMinimumTaskArea }}</strong> and <strong>{{ formattedMaximumTaskArea }}</strong>, then click generate tasks.</p>
       </div>
     </section>
 
@@ -40,7 +40,15 @@
           class="project-task-setup-label"
           :for="rangeInputId"
         >Set task area</label>
-        <strong>{{ formattedTaskArea }} km2</strong>
+        <div class="project-task-setup-range-value">
+          <area-unit-toggle
+            :model-value="areaUnit"
+            label="Task area display unit"
+            size="md"
+            @update:model-value="selectAreaUnit"
+          />
+          <strong>{{ formattedTaskArea }}</strong>
+        </div>
       </div>
 
       <input
@@ -57,7 +65,7 @@
       >
 
       <p class="project-task-setup-range-copy">
-        Each task will be generated for <strong>{{ formattedTaskArea }} km2</strong>
+        Each task will be generated for <strong>{{ formattedTaskArea }}</strong>
       </p>
     </div>
 
@@ -78,7 +86,7 @@
             size="18"
             no-margin
           />
-          {{ generatedSummary ? 'Generate Again' : 'Generate Tasks' }}
+          <span>{{ taskGenerationActionLabel }}</span>
         </template>
       </button>
 
@@ -93,7 +101,7 @@
           size="18"
           no-margin
         />
-        Reset
+        <span>Reset</span>
       </button>
     </div>
 
@@ -109,7 +117,7 @@
       <div>
         <strong>Tasks created</strong>
         <p>This project will be created with <strong>{{ generatedSummary.totalTasks }} tasks</strong>.</p>
-        <p>The size of each task is approximately <strong>{{ formattedTaskArea }} km2</strong></p>
+        <p>The size of each task is approximately <strong>{{ formattedTaskArea }}</strong></p>
       </div>
     </section>
 
@@ -188,6 +196,7 @@ import type {
   ProjectWizardTaskGenerationSummary,
   ProjectWizardTaskSaveSummary,
 } from '~/types/project-wizard';
+import { formatArea } from '~/util/area';
 
 interface Props {
   /** Whether the Generate button should be enabled (AOI exists, no in-flight request, etc.). */
@@ -232,16 +241,20 @@ const emit = defineEmits<{
  * replace this with `useId()` (available in Vue 3.5+) to generate a unique ID per instance.
  */
 const rangeInputId = 'project-task-setup-range';
+const { areaUnit, selectAreaUnit } = useAreaDisplayUnit();
 
 /** Formatted strings for the min/max labels and current value display. */
 const formattedMinimumTaskArea = computed(() =>
-  formatSquareKilometers(props.minimumTaskAreaSquareKilometers),
+  formatArea(props.minimumTaskAreaSquareKilometers, areaUnit.value)
 );
 const formattedMaximumTaskArea = computed(() =>
-  formatSquareKilometers(props.maximumTaskAreaSquareKilometers),
+  formatArea(props.maximumTaskAreaSquareKilometers, areaUnit.value)
 );
 const formattedTaskArea = computed(() =>
-  formatSquareKilometers(props.taskAreaSquareKilometers),
+  formatArea(props.taskAreaSquareKilometers, areaUnit.value)
+);
+const taskGenerationActionLabel = computed(() =>
+  props.generatedSummary ? 'Generate Again' : 'Generate Tasks'
 );
 
 /**
@@ -260,14 +273,6 @@ const rangeProgressPercent = computed(() => {
   return ((props.taskAreaSquareKilometers - props.minimumTaskAreaSquareKilometers) / spread) * 100;
 });
 
-/** Format a raw km² number for display (e.g. 1.5 → "1.5", 1000 → "1,000"). */
-function formatSquareKilometers(value: number): string {
-  return new Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 2,
-    minimumFractionDigits: 0,
-  }).format(value);
-}
-
 /**
  * The range input uses a controlled pattern (`:value` binding + `@input` handler) rather
  * than `v-model` because the parent needs to normalise the value before accepting it.
@@ -382,6 +387,12 @@ function onTaskAreaInput(event: Event) {
   font-weight: 500;
 }
 
+.project-task-setup-range-value {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .project-task-setup-range-header strong {
   color: #56648d;
   font-size: 1rem;
@@ -467,6 +478,17 @@ function onTaskAreaInput(event: Event) {
   font-size: 1rem;
   font-weight: 500;
   border-radius: 0.6rem;
+  white-space: nowrap;
+}
+
+.project-task-setup-action :deep(.material-icons) {
+  flex: 0 0 auto;
+  margin-top: 0;
+  line-height: 1;
+}
+
+.project-task-setup-action > span {
+  line-height: 1.2;
 }
 
 .project-task-setup-action-generate {
@@ -566,5 +588,10 @@ function onTaskAreaInput(event: Event) {
     align-items: flex-start;
     flex-direction: column;
   }
+
+  .project-task-setup-range-value {
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 </style>
diff --git a/components/workspace-project-details/TasksTab.vue b/components/workspace-project-details/TasksTab.vue
index 31731f7..6e1e6bd 100644
--- a/components/workspace-project-details/TasksTab.vue
+++ b/components/workspace-project-details/TasksTab.vue
@@ -63,7 +63,7 @@
         class="project-detail-task-list"
       >
         <li
-          v-for="task in paginatedTasks"
+          v-for="{ statusLabel, task } in displayedTasks"
           :key="task.id"
           class="project-detail-task-item"
           :class="{ 'project-detail-task-item-selected': task.id === selectedTaskId }"
@@ -96,7 +96,7 @@
                 class="project-detail-task-status-swatch"
                 :class="`project-detail-task-status-${task.status}`"
               />
-              {{ formatTaskStatus(task) }}
+              {{ statusLabel }}
             </span>
           </div>
 
@@ -235,15 +235,15 @@ const statusOptions: SelectOption[] = [
   { label: 'All', value: 'all' },
   { label: 'Ready for mapping', value: 'ready_for_mapping' },
   { label: 'Ready for validation', value: 'ready_for_validation' },
-  { label: 'More mapping needed', value: 'needs_more_mapping' },
-  { label: 'Completed', value: 'completed' },
+  { label: 'More mapping required', value: 'needs_more_mapping' },
+  { label: 'Completed', value: 'completed' }
 ];
 
 const sortOptions: SelectOption[] = [
   { label: 'Latest', value: 'latest' },
   { label: 'Oldest', value: 'oldest' },
-  { label: 'Task ID A-Z', value: 'task_asc' },
-  { label: 'Task ID Z-A', value: 'task_desc' },
+  { label: 'Task # Low to High', value: 'task_asc' },
+  { label: 'Task # High to Low', value: 'task_desc' },
 ];
 
 /**
@@ -292,6 +292,12 @@ const { currentPage, totalPages, paginatedItems: paginatedTasks, visiblePaginati
   () => sortedTasks.value,
   () => pageSize
 );
+const displayedTasks = computed(() =>
+  paginatedTasks.value.map(task => ({
+    statusLabel: resolveWorkspaceProjectTaskStatusLabel(task, props.viewerProjectRole),
+    task,
+  })),
+);
 
 const paginationSummary = computed(() => {
   if (sortedTasks.value.length === 0) {
@@ -307,17 +313,13 @@ const paginationSummary = computed(() => {
 watch([searchQuery, selectedStatus, sortBy], () => {
   currentPage.value = 1;
 });
-
-function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
-  return resolveWorkspaceProjectTaskStatusLabel(task, props.viewerProjectRole);
-}
 </script>
 
 <style lang="scss" scoped>
 @import "~/assets/scss/theme.scss";
 
 .project-detail-card {
-  background: #ffffff;
+  background: $surface-card;
 }
 
 .project-detail-task-card {
@@ -330,7 +332,6 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   gap: 0.85rem;
   align-items: end;
   margin-bottom: 1rem;
-  margin-top: -10px;
 }
 
 .project-detail-task-search {
@@ -338,14 +339,14 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 }
 
 .project-detail-task-search .form-control {
-  border-radius: 6px;
+  border-radius: 0.375rem;
 }
 
 .project-detail-task-search-icon {
   position: absolute;
   right: 0.9rem;
   top: 50%;
-  color: #858cab;
+  color: $text-secondary;
   transform: translateY(-50%);
 }
 
@@ -355,14 +356,14 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 }
 
 .project-detail-task-filter span {
-  color: #1a1e3d;
+  color: $text-navy;
   font-size: 0.9rem;
   font-weight: 600;
 }
 
 .project-detail-card :deep(.tdei-select-toggle),
 .project-detail-card :deep(.tdei-select-menu) {
-  border-radius: 6px;
+  border-radius: 0.375rem;
 }
 
 .project-detail-task-list-wrap {
@@ -370,7 +371,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   display: grid;
   gap: 0;
   border: 1px solid rgba($text-navy, 0.08);
-  border-radius: 10px;
+  border-radius: 0.625rem;
   overflow: visible;
 }
 
@@ -383,11 +384,11 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 
 .project-detail-task-list-header {
   padding: 1rem 1.35rem 0.95rem;
-  color: #6e7490;
+  color: $text-secondary;
   font-size: 0.88rem;
   font-weight: 700;
-  background: #f7f8fc;
-  border-radius: 10px 10px 4px 4px;
+  background: $surface-subtle;
+  border-radius: 0.625rem 0.625rem 0.25rem 0.25rem;
 }
 
 .project-detail-task-list {
@@ -400,12 +401,12 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 .project-detail-task-item {
   align-items: center;
   padding: 1.1rem 1.35rem;
-  background: #ffffff;
+  background: $surface-card;
   border-top: 1px solid rgba($text-navy, 0.08);
 }
 
-.project-detail-task-item:nth-last-child(1) {
-  border-radius: 0px 0px 10px 10px;
+.project-detail-task-item:last-child {
+  border-radius: 0 0 0.625rem 0.625rem;
 }
 
 .project-detail-task-item-selected {
@@ -429,11 +430,11 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 
 .project-detail-task-select:hover strong,
 .project-detail-task-select:focus-visible strong {
-  color: #214d85;
+  color: $link-text;
 }
 
 .project-detail-task-cell-id strong {
-  color: #1a1e3d;
+  color: $text-navy;
   font-size: 0.95rem;
   font-weight: 700;
 }
@@ -451,30 +452,30 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   color: $text-navy;
   line-height: 1.35;
   font-weight: 500;
-  font-size: 15px;
+  font-size: 0.9375rem;
 }
 
 .project-detail-task-status-swatch {
   width: 0.95rem;
   height: 0.95rem;
   flex-shrink: 0;
-  border: 1px solid rgba(90, 96, 123, 0.12);
+  border: 1px solid rgba($text-secondary, 0.12);
 }
 
 .project-detail-task-status-ready_for_mapping {
-  background: #fde9aa;
+  background: $task-ready-mapping;
 }
 
 .project-detail-task-status-ready_for_validation {
-  background: #a8d8f8;
+  background: $task-ready-validation;
 }
 
 .project-detail-task-status-needs_more_mapping {
-  background: #f8be90;
+  background: $task-remap;
 }
 
 .project-detail-task-status-completed {
-  background: #aae8cd;
+  background: $task-completed;
 }
 
 .project-detail-task-value {
@@ -483,13 +484,13 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   line-height: 1.35;
   word-break: break-word;
   font-weight: 500;
-  font-size: 15px;
+  font-size: 0.9375rem;
 }
 
 .project-detail-task-mobile-label {
   display: none;
   margin-bottom: 0.28rem;
-  color: #6e7490;
+  color: $text-secondary;
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.03em;
@@ -499,7 +500,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 .project-detail-task-empty {
   margin: 0;
   padding: 1.25rem;
-  color: #5a607b;
+  color: $text-secondary;
   text-align: center;
 }
 
@@ -514,7 +515,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 
 .project-detail-task-footer p {
   margin: 0;
-  color: #5a607b;
+  color: $text-secondary;
   font-size: 0.95rem;
   flex: 0 1 auto;
 }
@@ -535,15 +536,15 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #59607a;
+  color: $text-secondary;
   background: transparent;
   border: 0;
   border-radius: 0.45rem;
 }
 
-.project-detail-task-pagination-active {
-  color: #ffffff !important;
-  background: $primary !important;
+.project-detail-task-pagination .project-detail-task-pagination-active {
+  color: $white;
+  background: $primary;
 }
 
 .project-detail-task-pagination-ellipsis {
@@ -551,7 +552,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #7b819c;
+  color: $text-secondary;
   font-size: 1rem;
 }
 
diff --git a/components/workspace-projects/ProjectCard.vue b/components/workspace-projects/ProjectCard.vue
index 2decf58..376ebd5 100644
--- a/components/workspace-projects/ProjectCard.vue
+++ b/components/workspace-projects/ProjectCard.vue
@@ -2,11 +2,8 @@
   <!--
     Project card — used in the grid view on the workspace projects page.
 
-    ACCESSIBILITY NOTE: The entire card is clickable but contains a nested action button.
-    We use Bootstrap's "stretched-link" technique: the <nuxt-link> gets `position: absolute; inset: 0`
-    (via the `project-card-link` class) making the whole card's surface area clickable,
-    while the action button sits above it using `position: relative; z-index: 1`.
-    This avoids the anti-pattern of putting @click on a non-interactive <article> element.
+    The entire card is clickable using a stretched <nuxt-link>. This avoids the anti-pattern
+    of putting @click on a non-interactive <article> element.
   -->
   <article class="project-card">
     <div class="project-card-top">
@@ -16,24 +13,6 @@
         :src="projectIcon"
         :alt="''"
       >
-
-      <!--
-        Three-dot action button. `position: relative` + `z-index: 1` lets it receive clicks
-        even though the stretched-link overlay sits beneath the whole card.
-        `@click.stop` prevents the card-level navigation from also firing.
-      -->
-      <button
-        class="project-card-menu btn btn-link"
-        type="button"
-        aria-label="Project actions"
-        @click.stop
-      >
-        <app-icon
-          variant="more_vert"
-          size="22"
-          no-margin
-        />
-      </button>
     </div>
 
     <div class="project-card-body">
@@ -55,21 +34,23 @@
       <workspace-projects-status-badge :status="project.status" />
 
       <!-- Task completion progress bar — values come from useProjectDisplay composable -->
-      <div class="project-progress-copy">
-        <strong>{{ taskSummary }}</strong>
-        <span>{{ progressPercent }}%</span>
-      </div>
-      <div
-        class="progress project-progress-bar"
-        role="progressbar"
-        :aria-valuenow="progressPercent"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      >
+      <div class="project-progress">
+        <div class="project-progress-copy">
+          <strong>{{ taskSummary }}</strong>
+          <span>{{ progressPercent }}%</span>
+        </div>
         <div
-          class="progress-bar"
-          :style="{ width: `${progressPercent}%` }"
-        />
+          class="progress project-progress-bar"
+          role="progressbar"
+          :aria-valuenow="progressPercent"
+          aria-valuemin="0"
+          aria-valuemax="100"
+        >
+          <div
+            class="progress-bar"
+            :style="{ width: `${progressPercent}%` }"
+          />
+        </div>
       </div>
     </div>
 
@@ -87,7 +68,7 @@
     <!--
       Stretched link: covers the full card area via `position: absolute; inset: 0`.
       Screen readers announce this as the card's navigation target.
-      Placed last in the DOM so the action button's z-index stacks above it without any hacks.
+      Placed last in the DOM so the card content remains the accessible link target.
     -->
     <nuxt-link
       :to="projectRoute"
@@ -129,10 +110,10 @@ const projectRoute = computed(
   flex-direction: column;
   height: 100%;
   cursor: pointer;
-  background-color: #ffffff;
-  box-shadow: 0px 3px 6px #0000000D;
-  border: 1px solid #E5E7F0;
-  border-radius: 10px;
+  background-color: $surface-card;
+  box-shadow: 0 0.1875rem 0.375rem rgba($black, 0.05);
+  border: 1px solid $border-card;
+  border-radius: 0.625rem;
   transition:
     transform 160ms ease,
     box-shadow 160ms ease,
@@ -144,7 +125,7 @@ const projectRoute = computed(
 .project-card:focus-within {
   border-color: rgba($text-navy, 0.18);
   box-shadow: 0 0.85rem 1.8rem rgba($text-navy, 0.12);
-  transform: translateY(-2px);
+  transform: translateY(-0.125rem);
 }
 
 /* Stretched-link overlay — makes the whole card surface clickable via the <nuxt-link>. */
@@ -159,16 +140,9 @@ const projectRoute = computed(
   color: transparent;
 }
 
-/* Keep the action button above the stretched-link overlay so it remains independently clickable. */
-.project-card-menu {
-  position: relative;
-  z-index: 1;
-}
-
 .project-card-top {
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
   padding: 1.2rem 1.2rem 0;
 }
 
@@ -179,18 +153,11 @@ const projectRoute = computed(
   flex-shrink: 0;
 }
 
-.project-card-menu {
-  padding: 0;
-  color: #8b92ab;
-  opacity: 1;
-  text-decoration: none;
-}
-
 .project-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: 20px;
+  gap: 1.25rem;
   padding: 0.9rem 1.2rem 1.3rem;
 }
 
@@ -198,7 +165,7 @@ const projectRoute = computed(
   display: -webkit-box;
   margin: 0;
   color: $text-navy;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 700;
   line-height: 1.5;
   overflow: hidden;
@@ -220,13 +187,18 @@ const projectRoute = computed(
   line-clamp: 3;
 }
 
+.project-progress {
+  display: grid;
+  gap: 0.625rem;
+}
+
 .project-progress-copy {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   color: $text-secondary;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .project-progress-copy strong {
@@ -235,12 +207,11 @@ const projectRoute = computed(
 
 .project-progress-bar {
   height: 0.35rem;
-  background-color: #EBEDF6;
-  margin-top: -10px;
+  background-color: $progress-track;
 }
 
 .project-progress-bar .progress-bar {
-  background-color: #4e5fe0;
+  background-color: $progress-fill;
   border-radius: 999px;
 }
 
@@ -265,7 +236,7 @@ const projectRoute = computed(
   display: block;
   min-width: 0;
   color: $text-navy;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   overflow-wrap: anywhere;
   word-break: break-word;
@@ -275,6 +246,6 @@ const projectRoute = computed(
   display: block;
   margin-bottom: 0.1rem;
   color: $text-secondary;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 </style>
diff --git a/components/workspace-projects/ProjectListRow.vue b/components/workspace-projects/ProjectListRow.vue
index cd7f3f3..4b87a9d 100644
--- a/components/workspace-projects/ProjectListRow.vue
+++ b/components/workspace-projects/ProjectListRow.vue
@@ -3,8 +3,7 @@
     Project list row — used in the list view on the workspace projects page.
 
     Same stretched-link technique as ProjectCard.vue:
-    The <nuxt-link> overlay (`project-list-link`) covers the entire row, while the action
-    button stays independently clickable via `position: relative; z-index: 1`.
+    The <nuxt-link> overlay (`project-list-link`) covers the entire row.
   -->
   <article class="project-list-row">
     <div class="project-list-title-cell">
@@ -46,22 +45,6 @@
       </div>
     </div>
 
-    <!-- Action button sits above the stretched-link overlay via z-index. -->
-    <div class="project-list-actions-cell">
-      <button
-        class="project-list-menu-button btn btn-link"
-        type="button"
-        aria-label="Project actions"
-        @click.stop
-      >
-        <app-icon
-          variant="more_vert"
-          size="22"
-          no-margin
-        />
-      </button>
-    </div>
-
     <!-- Stretched-link overlay: makes the full row surface navigate to the project detail page. -->
     <nuxt-link
       :to="projectRoute"
@@ -98,10 +81,10 @@ const projectRoute = computed(
   /* `position: relative` is required for the stretched-link overlay. */
   position: relative;
   display: grid;
-  grid-template-columns: minmax(0, 2.9fr) minmax(8.5rem, 1.1fr) minmax(12rem, 1.35fr) minmax(11rem, 1.2fr) minmax(15rem, 1.6fr) 2.25rem;
+  grid-template-columns: minmax(0, 2.9fr) minmax(8.5rem, 1.1fr) minmax(12rem, 1.35fr) minmax(11rem, 1.2fr) minmax(15rem, 1.6fr);
   gap: 1.5rem;
   align-items: start;
-  padding: 25px 10px;
+  padding: 1.5625rem 0.625rem;
   cursor: pointer;
   border-bottom: 1px solid rgba($text-navy, 0.08);
   transition: background-color 160ms ease;
@@ -125,15 +108,6 @@ const projectRoute = computed(
   color: transparent;
 }
 
-/* Action button stays above the stretched-link overlay and inherits its own padding/color. */
-.project-list-menu-button {
-  position: relative;
-  z-index: 1;
-  padding: 0;
-  color: #8b92ab;
-  text-decoration: none;
-}
-
 .project-list-title {
   margin: 0;
 }
@@ -146,7 +120,7 @@ const projectRoute = computed(
 .project-list-progress-cell {
   display: grid;
   align-content: start;
-  gap: 15px;
+  gap: 0.9375rem;
   padding-top: 0.05rem;
 }
 
@@ -159,25 +133,17 @@ const projectRoute = computed(
 
 .project-list-progress-bar {
   height: 0.36rem;
-  background-color: #e5e8f3;
+  background-color: $border-card;
 }
 
 .project-list-progress-bar .progress-bar {
-  background-color: #4e5fe0;
+  background-color: $progress-fill;
   border-radius: 999px;
 }
 
-.project-list-actions-cell {
-  display: flex;
-  justify-content: flex-end;
-  padding-top: 0.1rem;
-}
-
-/* Duplicate .project-list-menu-button declaration removed — merged with block above. */
-
 @include media-breakpoint-down(xl) {
   .project-list-row {
-    grid-template-columns: minmax(0, 2.2fr) minmax(8rem, 1fr) minmax(10rem, 1.2fr) minmax(9rem, 1fr) minmax(12rem, 1.35fr) 2rem;
+    grid-template-columns: minmax(0, 2.2fr) minmax(8rem, 1fr) minmax(10rem, 1.2fr) minmax(9rem, 1fr) minmax(12rem, 1.35fr);
     gap: 1.15rem;
   }
 }
@@ -193,10 +159,6 @@ const projectRoute = computed(
   .project-list-progress-cell {
     grid-column: 1 / -1;
   }
-
-  .project-list-actions-cell {
-    justify-content: flex-start;
-  }
 }
 
 @include media-breakpoint-down(sm) {
diff --git a/components/workspace-projects/StatusBadge.vue b/components/workspace-projects/StatusBadge.vue
index f78e73d..6667cab 100644
--- a/components/workspace-projects/StatusBadge.vue
+++ b/components/workspace-projects/StatusBadge.vue
@@ -67,10 +67,10 @@ const badgeClasses = computed(() => ({
   gap: 0.35rem;
   border: 1px solid currentColor;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 600;
   line-height: 1;
-  padding: 6px 10px;
+  padding: 0.375rem 0.625rem;
   white-space: nowrap;
   width: fit-content;
 }
@@ -91,20 +91,20 @@ const badgeClasses = computed(() => ({
 }
 
 .project-status-badge-completed {
-  background-color: #F6FCFA;
-  border-color: #D4E4DD;
-  color: #067A57;
+  background-color: $status-completed-surface;
+  border-color: $status-completed-border;
+  color: $status-completed-text;
 }
 
 .project-status-badge-in-progress {
-  background-color: #F4FBFF;
-  border-color: #C8E0EE;
-  color: #1A74A8;
+  background-color: $status-in-progress-surface;
+  border-color: $status-in-progress-border;
+  color: $status-in-progress-text;
 }
 
 .project-status-badge-draft {
-  background-color: #FFFCF5;
-  border-color: #e9e1d3;
-  color: #8F6C1A;
+  background-color: $status-draft-surface;
+  border-color: $status-draft-border;
+  color: $status-draft-text;
 }
 </style>
diff --git a/composables/useAreaDisplayUnit.ts b/composables/useAreaDisplayUnit.ts
new file mode 100644
index 0000000..5f02b14
--- /dev/null
+++ b/composables/useAreaDisplayUnit.ts
@@ -0,0 +1,47 @@
+import {
+  isAreaDisplayUnit,
+  isUnitedStatesLocale,
+  type AreaDisplayUnit,
+} from '~/util/area';
+
+const AREA_UNIT_PREFERENCE_KEY = 'task-area-display-unit';
+
+export function useAreaDisplayUnit() {
+  const areaUnit = ref<AreaDisplayUnit>('square_kilometers');
+
+  onMounted(() => {
+    let savedAreaUnit: string | null = null;
+
+    try {
+      savedAreaUnit = window.localStorage.getItem(AREA_UNIT_PREFERENCE_KEY);
+    }
+    catch {
+      // Storage can be unavailable in privacy-restricted browser contexts.
+    }
+
+    if (isAreaDisplayUnit(savedAreaUnit)) {
+      areaUnit.value = savedAreaUnit;
+      return;
+    }
+
+    if (isUnitedStatesLocale(window.navigator.language)) {
+      areaUnit.value = 'square_miles';
+    }
+  });
+
+  function selectAreaUnit(nextUnit: AreaDisplayUnit) {
+    areaUnit.value = nextUnit;
+
+    try {
+      window.localStorage.setItem(AREA_UNIT_PREFERENCE_KEY, nextUnit);
+    }
+    catch {
+      // The in-memory preference still applies for the current page.
+    }
+  }
+
+  return {
+    areaUnit,
+    selectAreaUnit,
+  };
+}
diff --git a/composables/useProjectEditMembers.ts b/composables/useProjectEditMembers.ts
index b706d93..71ebf60 100644
--- a/composables/useProjectEditMembers.ts
+++ b/composables/useProjectEditMembers.ts
@@ -20,7 +20,6 @@ export const PROJECT_MEMBER_ROLE_OPTIONS: Array<{
   label: string;
   value: WorkspaceProjectContributorRole;
 }> = [
-  { label: 'Lead', value: 'lead' },
   { label: 'Validator', value: 'validator' },
   { label: 'Contributor', value: 'contributor' },
 ];
@@ -152,13 +151,14 @@ export function useProjectEditMembers(options: {
   }
 
   function updateSearchResultRole(userId: string, nextRole: string | number | null) {
-    if (!isProjectContributorRole(nextRole)) return;
+    if (!isAssignableProjectRole(nextRole)) return;
     searchResultRoles.value = { ...searchResultRoles.value, [userId]: nextRole };
   }
 
   async function addMember(user: ProjectWizardWorkspaceUser) {
     if (selectedMemberIds.value.has(user.authUid)) return;
     const role = getSearchResultRole(user.authUid);
+    if (!isAssignableProjectRole(role)) return;
     mutatingMemberId.value = user.authUid;
     try {
       await workspaceProjectsClient.addWorkspaceProjectRole(options.workspaceId, options.projectId, {
@@ -206,11 +206,11 @@ export function useProjectEditMembers(options: {
   }
 
   async function updateMemberRole(member: EditableProjectMember, nextRole: string | number | null) {
-    if (!isProjectContributorRole(nextRole) || member.role === nextRole) return;
-    if (member.role === 'lead' && nextRole !== 'lead' && leadMemberCount.value <= 1) {
-      toast.error('At least one lead must remain on the project.');
-      return;
-    }
+    if (
+      member.role === 'lead'
+      || !isAssignableProjectRole(nextRole)
+      || member.role === nextRole
+    ) return;
 
     const previousMembers = editableMembers.value;
     editableMembers.value = editableMembers.value.map(candidate =>
@@ -269,12 +269,8 @@ export function useProjectEditMembers(options: {
     mutatingMemberId.value = null;
   }
 
-  function isRoleChangeLocked(member: EditableProjectMember) {
-    return member.role === 'lead' && leadMemberCount.value <= 1;
-  }
-
   function isMemberRemovalLocked(member: EditableProjectMember) {
-    return member.role === 'lead' && leadMemberCount.value <= 1;
+    return member.role === 'lead';
   }
 
   return {
@@ -282,7 +278,6 @@ export function useProjectEditMembers(options: {
     editableMembers,
     getSearchResultRole,
     isMemberRemovalLocked,
-    isRoleChangeLocked,
     leadMemberCount,
     memberRoleOptions: PROJECT_MEMBER_ROLE_OPTIONS,
     memberSearchLoading,
@@ -295,6 +290,8 @@ export function useProjectEditMembers(options: {
   };
 }
 
-function isProjectContributorRole(value: unknown): value is WorkspaceProjectContributorRole {
-  return value === 'lead' || value === 'validator' || value === 'contributor';
+function isAssignableProjectRole(
+  value: unknown,
+): value is Exclude<WorkspaceProjectContributorRole, 'lead'> {
+  return value === 'validator' || value === 'contributor';
 }
diff --git a/composables/useProjectRole.ts b/composables/useProjectRole.ts
index 2d72585..28f82ee 100644
--- a/composables/useProjectRole.ts
+++ b/composables/useProjectRole.ts
@@ -1,7 +1,33 @@
 import { workspaceProjectsClient } from '~/services/index';
+import type { MaybeRefOrGetter } from 'vue';
 import type { WorkspaceProjectContributorRole } from '~/types/projects';
 import type { WorkspaceRole } from '~/types/workspaces';
 
+/**
+ * Resolves workspace-level project permissions shared by project navigation and management routes.
+ * A TDEI POC is scoped to the owning project group, so callers must supply the roles for that
+ * project group rather than the user's roles from an unrelated group.
+ */
+export function useWorkspaceProjectPermissions(
+  workspaceRole: MaybeRefOrGetter<WorkspaceRole | undefined>,
+  myTdeiRoles: MaybeRefOrGetter<readonly string[]>,
+) {
+  const isWorkspaceLead = computed(() => toValue(workspaceRole) === 'lead');
+  const isPoc = computed(() => toValue(myTdeiRoles).includes('poc'));
+  const hasWorkspaceLeadPrivileges = computed(() =>
+    isWorkspaceLead.value || isPoc.value,
+  );
+
+  return {
+    canCreateProject: hasWorkspaceLeadPrivileges,
+    canDeleteProject: hasWorkspaceLeadPrivileges,
+    canEditProjectMetadata: hasWorkspaceLeadPrivileges,
+    canManageProjectLifecycle: hasWorkspaceLeadPrivileges,
+    isPoc,
+    isWorkspaceLead,
+  };
+}
+
 /**
  * Resolves the current user's effective role for a project.
  *
@@ -19,6 +45,7 @@ export function useProjectRole(
 ) {
   // Fetch the user's explicit project-level role. Returns null if none is assigned (404).
   const projectRole = ref<WorkspaceProjectContributorRole | null>(null);
+  const roleLoadError = ref<unknown>(null);
 
   /**
    * The effective role is the highest-privilege role the user holds.
@@ -61,7 +88,7 @@ export function useProjectRole(
   const isExplicitProjectLead = computed(() => projectRole.value === 'lead');
 
   const promise = (async () => {
-    if (currentUserId) {
+    if (currentUserId && workspaceRole !== 'lead') {
       try {
         projectRole.value = await workspaceProjectsClient.getWorkspaceProjectUserRole(
           workspaceId,
@@ -69,7 +96,8 @@ export function useProjectRole(
           currentUserId,
         );
       }
-      catch {
+      catch (error) {
+        roleLoadError.value = error;
         projectRole.value = null;
       }
     }
@@ -84,5 +112,6 @@ export function useProjectRole(
     canMap,
     canManageContributors,
     promise,
+    roleLoadError,
   };
 }
diff --git a/composables/useTaskEditorContext.ts b/composables/useTaskEditorContext.ts
new file mode 100644
index 0000000..529fd93
--- /dev/null
+++ b/composables/useTaskEditorContext.ts
@@ -0,0 +1,98 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type {
+  WorkspaceProjectTaskApiStatus,
+  WorkspaceProjectTaskFeedbackReasonCategory,
+  WorkspaceProjectTaskSubmitFeedback,
+} from '~/types/projects';
+
+export type TaskReviewDecision = 'approve' | 'remap';
+
+export interface TaskFeedbackReasonOption {
+  label: string;
+  value: WorkspaceProjectTaskFeedbackReasonCategory;
+}
+
+export const TASK_FEEDBACK_REASON_OPTIONS: TaskFeedbackReasonOption[] = [
+  { label: 'Incomplete Mapping', value: 'incomplete_mapping' },
+  { label: 'Data Quality Issue', value: 'data_quality_issue' },
+  { label: 'Wrong Area', value: 'wrong_area' },
+  { label: 'Other', value: 'other' },
+];
+
+export function useTaskEditorContext(
+  apiStatus: MaybeRefOrGetter<WorkspaceProjectTaskApiStatus>,
+) {
+  const reviewDecision = ref<TaskReviewDecision>('approve');
+  const feedbackNotes = ref('');
+  const feedbackReasonCategory = ref<WorkspaceProjectTaskFeedbackReasonCategory | ''>('');
+
+  const isReviewTask = computed(() => {
+    const status = toValue(apiStatus);
+    return status === 'to_review' || status === 'to_validate';
+  });
+  const isRemapTask = computed(() => {
+    const status = toValue(apiStatus);
+    return status === 'to_remap' || status === 'more_mapping_needed';
+  });
+  const taskStatusLabel = computed(() => {
+    if (isReviewTask.value) {
+      return 'TO REVIEW';
+    }
+
+    if (isRemapTask.value) {
+      return 'MORE MAPPING REQUIRED';
+    }
+
+    const status = toValue(apiStatus);
+    return status === 'completed' || status === 'done' ? 'COMPLETED' : 'TO MAP';
+  });
+  const taskStatusHelpText = computed(() => {
+    if (isReviewTask.value) {
+      return 'Approve the completed mapping or request a remap with clear feedback.';
+    }
+
+    if (isRemapTask.value) {
+      return 'Complete the additional mapping required, push your edits in Rapid, and submit the task again.';
+    }
+
+    return 'Complete the mapping in Rapid, push your edits, and submit when the task is ready.';
+  });
+  const trimmedFeedbackNotes = computed(() => feedbackNotes.value.trim());
+  const reviewFeedbackIsIncomplete = computed(() =>
+    isReviewTask.value
+    && reviewDecision.value === 'remap'
+    && (!feedbackReasonCategory.value || !trimmedFeedbackNotes.value),
+  );
+
+  function buildFeedbackPayload(): WorkspaceProjectTaskSubmitFeedback | undefined {
+    if (!isReviewTask.value || reviewDecision.value === 'approve') {
+      return undefined;
+    }
+
+    if (!feedbackReasonCategory.value) {
+      throw new Error('Select a feedback reason before requesting a remap.');
+    }
+
+    if (!trimmedFeedbackNotes.value) {
+      throw new Error('Add feedback notes before requesting a remap.');
+    }
+
+    return {
+      notes: trimmedFeedbackNotes.value,
+      reasonCategory: feedbackReasonCategory.value,
+    };
+  }
+
+  return {
+    buildFeedbackPayload,
+    feedbackNotes,
+    feedbackReasonCategory,
+    feedbackReasonOptions: TASK_FEEDBACK_REASON_OPTIONS,
+    isRemapTask,
+    isReviewTask,
+    reviewDecision,
+    reviewFeedbackIsIncomplete,
+    taskStatusHelpText,
+    taskStatusLabel,
+  };
+}
diff --git a/composables/useTaskEditorSubmission.ts b/composables/useTaskEditorSubmission.ts
new file mode 100644
index 0000000..5fc1c03
--- /dev/null
+++ b/composables/useTaskEditorSubmission.ts
@@ -0,0 +1,214 @@
+import type { MaybeRefOrGetter } from 'vue';
+import { resolveHttpErrorMessage } from '~/services/http';
+import { workspaceProjectsClient } from '~/services/index';
+import type { WorkspaceProjectTaskSubmitFeedback } from '~/types/projects';
+import type { TaskEditorAction } from '~/types/task-editor';
+
+interface UseTaskEditorSubmissionOptions {
+  buildFeedbackPayload: () => WorkspaceProjectTaskSubmitFeedback | undefined;
+  hasActiveEdits: MaybeRefOrGetter<boolean>;
+  isReviewTask: MaybeRefOrGetter<boolean>;
+  onFinished: (bypassUnsavedGuard: boolean) => Promise<void>;
+  pendingEditCount: MaybeRefOrGetter<number>;
+  projectId: string;
+  reviewFeedbackIsIncomplete: MaybeRefOrGetter<boolean>;
+  taskNumber: number;
+  workspaceId: number;
+}
+
+export function useTaskEditorSubmission(options: UseTaskEditorSubmissionOptions) {
+  const isSubmittingTask = ref(false);
+  const isSubmittingChangeset = ref(false);
+  const activeTaskAction = ref<'complete' | 'skip' | null>(null);
+  const submitErrorMessage = ref('');
+  const pendingChangesetId = ref<number | null>(null);
+  const uploadedChangesetId = ref(-1);
+
+  const completeTaskBlockedReason = computed(() => {
+    if (isSubmittingTask.value) {
+      return 'Task submission is in progress.';
+    }
+
+    if (isSubmittingChangeset.value && pendingChangesetId.value !== null) {
+      return `Attaching uploaded changeset #${pendingChangesetId.value} to this task.`;
+    }
+
+    if (toValue(options.hasActiveEdits)) {
+      const editCount = toValue(options.pendingEditCount);
+      const editLabel = editCount === 1 ? 'edit' : 'edits';
+      return `Push or discard your ${editCount} active ${editLabel} in Rapid before completing this task.`;
+    }
+
+    if (pendingChangesetId.value !== null) {
+      return `Uploaded changeset #${pendingChangesetId.value} has not been attached to this task yet. Please upload again before completing.`;
+    }
+
+    if (toValue(options.reviewFeedbackIsIncomplete)) {
+      return 'Select a reason and add notes before requesting a remap.';
+    }
+
+    return '';
+  });
+  const actions = computed<TaskEditorAction[]>(() => {
+    const allActionsBusy = isSubmittingTask.value
+      || isSubmittingChangeset.value
+      || activeTaskAction.value !== null;
+    const completeDisabled = allActionsBusy
+      || toValue(options.hasActiveEdits)
+      || pendingChangesetId.value !== null
+      || toValue(options.reviewFeedbackIsIncomplete);
+    const completeLabel = isSubmittingTask.value
+      ? 'Submitting...'
+      : toValue(options.isReviewTask)
+        ? 'Submit Review'
+        : 'I’m Done Mapping';
+
+    return [
+      {
+        id: 'skip',
+        label: activeTaskAction.value === 'skip' ? 'Skipping...' : 'Skip Task',
+        variant: 'outline-secondary',
+        disabled: allActionsBusy,
+      },
+      {
+        id: 'complete',
+        label: completeLabel,
+        variant: 'primary',
+        disabled: completeDisabled,
+      },
+    ];
+  });
+  const actionStatusMessage = computed(() => {
+    if (completeTaskBlockedReason.value) {
+      return completeTaskBlockedReason.value;
+    }
+
+    if (uploadedChangesetId.value > 0) {
+      return `Last uploaded changeset #${uploadedChangesetId.value} will be attached when you complete this task.`;
+    }
+
+    return toValue(options.isReviewTask)
+      ? 'Approve the mapping or request a remap with feedback.'
+      : 'Push your edits in Rapid, then complete this task.';
+  });
+  const showActionStatus = computed(() =>
+    Boolean(completeTaskBlockedReason.value) || uploadedChangesetId.value > 0,
+  );
+
+  async function submitTask() {
+    submitErrorMessage.value = '';
+
+    let feedback: WorkspaceProjectTaskSubmitFeedback | undefined;
+
+    try {
+      feedback = options.buildFeedbackPayload();
+    }
+    catch (error) {
+      submitErrorMessage.value = error instanceof Error
+        ? error.message
+        : 'Feedback validation failed.';
+      return;
+    }
+
+    isSubmittingTask.value = true;
+    activeTaskAction.value = 'complete';
+
+    try {
+      await workspaceProjectsClient.submitWorkspaceProjectTask(
+        options.workspaceId,
+        options.projectId,
+        options.taskNumber,
+        {
+          done: true,
+          feedback,
+        },
+      );
+      await options.onFinished(false);
+    }
+    catch (error) {
+      submitErrorMessage.value = await resolveTaskSubmitErrorMessage(error);
+    }
+    finally {
+      isSubmittingTask.value = false;
+      activeTaskAction.value = null;
+    }
+  }
+
+  const changesetAttachSequence = ref(0);
+
+  async function attachUploadedChangeset(osmChangesetId: number) {
+    const sequence = ++changesetAttachSequence.value;
+    pendingChangesetId.value = osmChangesetId;
+    isSubmittingChangeset.value = true;
+    submitErrorMessage.value = '';
+
+    try {
+      await workspaceProjectsClient.submitWorkspaceProjectTaskChangeset(
+        options.workspaceId,
+        options.projectId,
+        options.taskNumber,
+        osmChangesetId,
+      );
+      if (sequence !== changesetAttachSequence.value) {
+        return;
+      }
+      uploadedChangesetId.value = osmChangesetId;
+
+      if (pendingChangesetId.value === osmChangesetId) {
+        pendingChangesetId.value = null;
+      }
+    }
+    catch {
+      if (sequence !== changesetAttachSequence.value) {
+        return;
+      }
+      submitErrorMessage.value = `Uploaded changeset #${osmChangesetId} could not be attached to this task. Please upload again before completing.`;
+    }
+    finally {
+      if (sequence === changesetAttachSequence.value) {
+        isSubmittingChangeset.value = false;
+      }
+    }
+  }
+
+  async function releaseTask() {
+    submitErrorMessage.value = '';
+    activeTaskAction.value = 'skip';
+
+    try {
+      await workspaceProjectsClient.unlockWorkspaceProjectTask(
+        options.workspaceId,
+        options.projectId,
+        options.taskNumber,
+      );
+      await options.onFinished(true);
+    }
+    catch (error) {
+      submitErrorMessage.value = await resolveTaskSubmitErrorMessage(
+        error,
+        'Task could not be skipped. Please try again.'
+      );
+    }
+    finally {
+      activeTaskAction.value = null;
+    }
+  }
+
+  return {
+    actions,
+    actionStatusMessage,
+    attachUploadedChangeset,
+    completeTaskBlockedReason,
+    releaseTask,
+    showActionStatus,
+    submitErrorMessage,
+    submitTask,
+  };
+}
+
+async function resolveTaskSubmitErrorMessage(
+  error: unknown,
+  fallbackMessage = 'Task submission failed.'
+): Promise<string> {
+  return await resolveHttpErrorMessage(error, fallbackMessage);
+}
diff --git a/composables/useTaskLockCountdown.ts b/composables/useTaskLockCountdown.ts
new file mode 100644
index 0000000..061efaf
--- /dev/null
+++ b/composables/useTaskLockCountdown.ts
@@ -0,0 +1,56 @@
+import type { MaybeRefOrGetter } from 'vue';
+
+const LOCK_COUNTDOWN_REFRESH_MS = 60_000;
+
+export function useTaskLockCountdown(
+  expiresAt: MaybeRefOrGetter<string | undefined>,
+) {
+  const currentTime = ref(Date.now());
+  let countdownTimer: ReturnType<typeof setInterval> | null = null;
+
+  const timeRemaining = computed(() =>
+    formatTaskLockTimeRemaining(toValue(expiresAt), currentTime.value),
+  );
+
+  onMounted(() => {
+    countdownTimer = setInterval(() => {
+      currentTime.value = Date.now();
+    }, LOCK_COUNTDOWN_REFRESH_MS);
+  });
+
+  onBeforeUnmount(() => {
+    if (countdownTimer) {
+      clearInterval(countdownTimer);
+      countdownTimer = null;
+    }
+  });
+
+  return {
+    timeRemaining,
+  };
+}
+
+export function formatTaskLockTimeRemaining(
+  expiresAt: string | undefined,
+  currentTime: number,
+): string {
+  if (!expiresAt) {
+    return '';
+  }
+
+  const remainingMilliseconds = new Date(expiresAt).getTime() - currentTime;
+
+  if (!Number.isFinite(remainingMilliseconds) || remainingMilliseconds <= 0) {
+    return 'Lock expired';
+  }
+
+  const remainingMinutes = Math.ceil(remainingMilliseconds / 60_000);
+  const hours = Math.floor(remainingMinutes / 60);
+  const minutes = remainingMinutes % 60;
+
+  if (hours === 0) {
+    return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} left`;
+  }
+
+  return `${hours} ${hours === 1 ? 'hour' : 'hours'}, ${minutes} ${minutes === 1 ? 'minute' : 'minutes'} left`;
+}
diff --git a/docs/workspace-project-role-based-access.md b/docs/workspace-project-role-based-access.md
new file mode 100644
index 0000000..c027060
--- /dev/null
+++ b/docs/workspace-project-role-based-access.md
@@ -0,0 +1,75 @@
+# Workspace Projects and Tasking Manager Access
+
+This document explains who can manage workspace projects and work on project
+tasks.
+
+## Roles
+
+Access can come from three places:
+
+- **Project-group POC** — manages projects in workspaces owned by that TDEI
+  project group.
+- **Workspace role** — `lead`, `validator`, or `contributor`.
+- **Project role** — `lead`, `validator`, or `contributor` for one project.
+
+## Effective project role
+
+Task access is based on the user's effective project role:
+
+1. A workspace `lead` is always treated as a `lead`.
+2. Otherwise, the project role is used when one is assigned.
+3. If there is no project role, the workspace role is used.
+4. If neither role exists, the user has read-only access.
+
+For example, assigning a project `validator` role to a workspace
+`contributor` allows that user to validate tasks in that project.
+
+## Project permissions
+
+| Action | Project-group POC | Workspace lead | Project lead | Validator | Contributor |
+| --- | --- | --- | --- | --- | --- |
+| View projects | Yes | Yes | Yes | Yes | Yes |
+| Create a project | Yes | Yes | No | No | No |
+| Edit project details and settings | Yes | Yes | No | No | No |
+| Activate, close, or reset a project | Yes | Yes | No | No | No |
+| Delete a project | Yes | Yes | No | No | No |
+| Manage project contributors | Only if also a lead | Yes | Yes | No | No |
+| Map tasks | With a tasking role | Yes | Yes | Yes | Yes |
+| Validate tasks | With a lead or validator role | Yes | Yes | Yes | No |
+
+A POC who also has a workspace or project role receives the permissions from
+both roles.
+
+## Managing project contributors
+
+A workspace lead or project lead can:
+
+- add validators and contributors;
+- change a user between validator and contributor; and
+- remove validators and contributors.
+
+The project lead cannot be changed or removed through the current contributor
+management screen.
+
+## Task permissions
+
+| Task status | Lead | Validator | Contributor |
+| --- | --- | --- | --- |
+| Ready for mapping | Map | Map | Map |
+| More mapping required | Map | Map | Map |
+| Ready for validation | Validate | Validate | No action |
+| Completed | View only | View only | View only |
+
+The following rules also apply:
+
+- The project must be active before task work can start.
+- A user cannot validate their own mapping.
+- A task is locked when a user starts working on it.
+- Other users cannot work on a locked task.
+- The user who owns the lock can unlock the task.
+
+## Implementation
+
+The main permission rules are in
+`composables/useProjectRole.ts`. Project and task actions are guarded in
+`pages/workspace/[id]/projects/[projectId]/index.vue`.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 913ca14..852f65e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -82,6 +82,7 @@ export default defineNuxtConfig({
         'bootstrap-vue-next/components/BModal',
         'bootstrap-vue-next/components/BNavbar',
         'bootstrap-vue-next/components/BPopover',
+        'bootstrap-vue-next/components/BTabs',
         'bootstrap-vue-next/composables/useModal',
         'dayjs', // CJS
         'dayjs/plugin/relativeTime', // CJS
diff --git a/pages/workspace/[id]/projects/[projectId]/edit.vue b/pages/workspace/[id]/projects/[projectId]/edit.vue
index 39c4ff5..6ef4e2f 100644
--- a/pages/workspace/[id]/projects/[projectId]/edit.vue
+++ b/pages/workspace/[id]/projects/[projectId]/edit.vue
@@ -1,6 +1,7 @@
 <template>
   <app-page
     fluid
+    padding="sm"
     class="project-edit-page"
   >
     <section class="project-edit-shell">
@@ -127,8 +128,7 @@
 
               <client-only fallback-tag="div">
                 <project-wizard-rich-text-editor
-                  :model-value="form.instructions"
-                  @update:model-value="form.instructions = $event"
+                  v-model="form.instructions"
                 />
               </client-only>
             </section>
@@ -280,12 +280,19 @@
                   </div>
 
                   <div class="project-edit-member-actions">
+                    <span
+                      v-if="member.role === 'lead'"
+                      class="project-edit-member-role-readonly"
+                    >
+                      Lead
+                    </span>
                     <app-select
+                      v-else
                       :id="`project-edit-member-role-${member.id}`"
                       :model-value="member.role"
                       :options="memberRoleOptions"
                       :aria-label="`Change role for ${member.name}`"
-                      :disabled="isRoleChangeLocked(member) || mutatingMemberId === member.id"
+                      :disabled="mutatingMemberId === member.id"
                       @update:model-value="updateMemberRole(member, $event)"
                     />
 
@@ -326,7 +333,7 @@
               <div class="project-edit-settings-row">
                 <div class="project-edit-settings-copy">
                   <h2>Lock Timeout</h2>
-                  <p>Project will be locked for specific hours.</p>
+                  <p>Unlock tasks after the specified number of hours pass.</p>
                 </div>
 
                 <div class="project-edit-timeout-control">
@@ -471,7 +478,7 @@ import { toast } from 'vue3-toastify';
 import 'vue3-toastify/dist/index.css';
 import { useProjectEditActions } from '~/composables/useProjectEditActions';
 import { useProjectEditMembers } from '~/composables/useProjectEditMembers';
-import { workspaceProjectsClient, workspacesClient } from '~/services/index';
+import { tdeiUserClient, workspaceProjectsClient, workspacesClient } from '~/services/index';
 import { resolveHttpErrorMessage } from '~/services/http';
 import { validateProjectCustomImagery } from '~/services/project-custom-imagery';
 
@@ -516,7 +523,7 @@ const {
 const IMAGERY_VALIDATION_DEBOUNCE_MS = 300;
 const imagerySchemaUrl = import.meta.env.VITE_IMAGERY_SCHEMA;
 
-const sections: ProjectEditSection[] = [
+const BASE_SECTIONS: ProjectEditSection[] = [
   { id: 'details', label: 'Project details' },
   { id: 'instructions', label: 'Instructions' },
   { id: 'imagery', label: 'Imagery' },
@@ -527,7 +534,40 @@ const sections: ProjectEditSection[] = [
 
 const hourOptions = Array.from({ length: 24 }, (_, index) => index + 1);
 const workspace = await workspacesClient.getWorkspace(workspaceId);
+const myTdeiRoles = await tdeiUserClient.getMyRolesForProjectGroupById(
+  workspace.tdeiProjectGroupId
+);
+const { canEditProjectMetadata } = useWorkspaceProjectPermissions(
+  () => workspace.role,
+  myTdeiRoles
+);
+
+if (!canEditProjectMetadata.value) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Only workspace leads or project group POCs can edit this project.',
+  });
+}
+
 const project = ref(await loadProjectDetail());
+const currentUserIdForRole = workspaceProjectsClient.auth.subject || null;
+const {
+  canManageContributors,
+  promise: rolePromise,
+} = useProjectRole(
+  workspaceId,
+  projectId,
+  currentUserIdForRole,
+  workspace.role,
+);
+await rolePromise;
+
+const sections = computed(() =>
+  BASE_SECTIONS.filter(section =>
+    section.id !== 'team' || canManageContributors.value
+  )
+);
+
 const initialCustomImageryJson = formatCustomImagery(project.value.customImagery);
 const initialProjectContributors = await loadProjectContributors();
 const saving = ref(false);
@@ -543,7 +583,6 @@ const {
   editableMembers,
   getSearchResultRole,
   isMemberRemovalLocked,
-  isRoleChangeLocked,
   leadMemberCount,
   memberRoleOptions,
   memberSearchLoading,
@@ -568,25 +607,6 @@ const form = reactive({
   reviewRequired: project.value.reviewRequired,
 });
 
-const currentUserIdForRole = workspaceProjectsClient.auth.subject || null;
-const {
-  isProjectLead,
-  promise: rolePromise,
-} = useProjectRole(
-  workspaceId,
-  projectId,
-  currentUserIdForRole,
-  workspace.role,
-);
-await rolePromise;
-
-if (!isProjectLead.value) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Only project leads can edit this project.',
-  });
-}
-
 useHead({
   title: computed(() => `Edit ${project.value.name} | Projects`),
 });
@@ -594,7 +614,7 @@ useHead({
 const activeSection = computed<ProjectEditSectionId>(() => {
   const section = route.query.section;
 
-  if (typeof section === 'string' && sections.some(item => item.id === section)) {
+  if (typeof section === 'string' && sections.value.some(item => item.id === section)) {
     return section as ProjectEditSectionId;
   }
 
@@ -884,8 +904,6 @@ $project-edit-action-spacing: 1.5rem;
 
 .project-edit-page {
   height: calc(100vh - #{$navbar-height});
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
   overflow: hidden;
 }
 
@@ -1164,7 +1182,7 @@ $project-edit-action-spacing: 1.5rem;
 }
 
 .project-edit-search-results {
-  overflow: hidden;
+  overflow: visible;
 }
 
 .project-edit-members-list {
@@ -1186,6 +1204,18 @@ $project-edit-action-spacing: 1.5rem;
   border-bottom: 1px solid rgba($text-navy, 0.08);
 }
 
+.project-edit-search-result:first-child {
+  border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;
+}
+
+.project-edit-search-result:last-child {
+  border-radius: 0 0 calc(1rem - 1px) calc(1rem - 1px);
+}
+
+.project-edit-search-result:only-child {
+  border-radius: calc(1rem - 1px);
+}
+
 .project-edit-member-item {
   grid-template-columns: minmax(0, 1fr) auto;
   position: relative;
@@ -1237,6 +1267,19 @@ $project-edit-action-spacing: 1.5rem;
   justify-content: flex-end;
 }
 
+.project-edit-member-role-readonly {
+  min-width: 11rem;
+  min-height: 3rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.75rem 0.9rem;
+  color: $text-secondary;
+  font-weight: 600;
+  background: $surface-card;
+  border: 1px solid $border-subtle;
+  border-radius: 0.8rem;
+}
+
 .project-edit-member-copy {
   min-width: 0;
   display: grid;
@@ -1440,8 +1483,8 @@ $project-edit-action-spacing: 1.5rem;
   line-height: 1.5;
 }
 
-.project-edit-unavailable-copy {
-  color: #8a91ab !important;
+.project-edit-message-copy .project-edit-unavailable-copy {
+  color: $text-disabled;
 }
 
 .project-edit-action-block {
diff --git a/pages/workspace/[id]/projects/[projectId]/index.vue b/pages/workspace/[id]/projects/[projectId]/index.vue
index 6664e8d..95afeeb 100644
--- a/pages/workspace/[id]/projects/[projectId]/index.vue
+++ b/pages/workspace/[id]/projects/[projectId]/index.vue
@@ -1,6 +1,7 @@
 <template>
   <app-page
     fluid
+    padding="none"
     class="project-detail-page"
   >
     <div class="project-detail-layout">
@@ -11,6 +12,15 @@
         }"
       >
         <section class="project-detail-content">
+          <p
+            v-if="permissionLoadError"
+            class="alert alert-warning m-3"
+            role="alert"
+          >
+            Your project permissions could not be loaded. Task and project actions are
+            temporarily unavailable. Refresh the page to try again.
+          </p>
+
           <header class="project-detail-hero">
             <nav
               class="project-detail-breadcrumbs"
@@ -221,7 +231,7 @@
         :action-label="selectedTaskPrimaryActionLabel"
         :busy="selectedTaskActionBusy"
         :show-action-button="showSelectedTaskActionButton"
-        :status-label="formatTaskStatus(selectedTask)"
+        :status-label="selectedTaskStatusLabel"
         :task="selectedTask"
         @action="handleSelectedTaskAction"
         @close="clearSelectedTask"
@@ -251,8 +261,9 @@ import {
   PROJECT_WIZARD_TASK_AREA_MINIMUM,
   PROJECT_WIZARD_TASK_AREA_STEP,
 } from '~/services/project-wizard-tasks';
-import { workspaceProjectsClient, workspacesClient } from '~/services/index';
+import { tdeiUserClient, workspaceProjectsClient, workspacesClient } from '~/services/index';
 import { resolveHttpErrorMessage } from '~/services/http';
+import { isTaskSelfValidation } from '~/util/task-access';
 import { resolveWorkspaceProjectTaskStatusLabel } from '~/util/task-status';
 
 import type {
@@ -290,6 +301,20 @@ const BASE_TABS: ProjectDetailTabOption[] = [
 ];
 
 const workspace = await workspacesClient.getWorkspace(workspaceId);
+let projectGroupRolesLoadFailed = false;
+const myTdeiRoles = await tdeiUserClient.getMyRolesForProjectGroupById(
+  workspace.tdeiProjectGroupId,
+).catch(() => {
+  projectGroupRolesLoadFailed = true;
+  return [];
+});
+const {
+  canEditProjectMetadata,
+  canManageProjectLifecycle,
+} = useWorkspaceProjectPermissions(
+  () => workspace.role,
+  myTdeiRoles,
+);
 const project = ref(await loadProjectDetail());
 const projectAoi = ref(await loadProjectAoi());
 const projectTasks = ref<WorkspaceProjectTaskListItem[] | null>(await loadProjectTasks());
@@ -301,12 +326,11 @@ const projectGroupUsers = ref<ProjectWizardWorkspaceUser[]>([]);
 const currentUserIdForRole = workspaceProjectsClient.auth.subject || null;
 const {
   effectiveRole,
-  isProjectLead,
-  isExplicitProjectLead,
   canValidate,
   canMap,
   canManageContributors,
   promise: rolePromise,
+  roleLoadError,
 } = useProjectRole(
   workspaceId,
   projectId,
@@ -314,14 +338,18 @@ const {
   workspace.role,
 );
 await rolePromise;
+const permissionLoadError = computed(() =>
+  (projectGroupRolesLoadFailed && workspace.role !== 'lead')
+  || roleLoadError.value !== null,
+);
 
 /**
- * The Contributors tab is only visible to project leads.
+ * Project roles can be managed by workspace leads or project leads.
  * All other tabs are always visible.
  */
 const tabs = computed<ProjectDetailTabOption[]>(() => [
   ...BASE_TABS,
-  ...(isExplicitProjectLead.value ? [{ id: 'contributors' as WorkspaceProjectDetailTab, label: 'Contributors' }] : []),
+  ...(canManageContributors.value ? [{ id: 'contributors' as WorkspaceProjectDetailTab, label: 'Contributors' }] : []),
 ]);
 
 // The detail API does not expose separate rich-text fields for overview content yet,
@@ -446,6 +474,16 @@ const selectedTaskLockedByCurrentUser = computed(() =>
   Boolean(selectedTask.value?.lock?.user_id)
   && selectedTask.value?.lock?.user_id === currentUserId.value,
 );
+const selectedTaskStatusLabel = computed(() =>
+  selectedTask.value
+    ? resolveWorkspaceProjectTaskStatusLabel(selectedTask.value, effectiveRole.value)
+    : '',
+);
+const selectedTaskWasLastMappedByCurrentUser = computed(() =>
+  selectedTask.value
+    ? isTaskSelfValidation(selectedTask.value, currentUserId.value)
+    : false,
+);
 const showSelectedTaskBar = computed(() =>
   !showTaskSetup.value
   && Boolean(selectedTask.value),
@@ -475,6 +513,10 @@ const selectedTaskPrimaryActionLabel = computed(() => {
     return selectedTaskLockedByCurrentUser.value ? selectedTaskWorkActionLabel.value : 'Task Locked';
   }
 
+  if (selectedTaskWasLastMappedByCurrentUser.value) {
+    return 'Cannot Validate Own Mapping';
+  }
+
   return selectedTaskWorkActionLabel.value;
 });
 
@@ -497,6 +539,7 @@ const showSelectedTaskActionButton = computed(() => {
 const selectedTaskActionDisabled = computed(() =>
   !selectedTask.value
   || mutatingTaskNumber.value === selectedTask.value.taskNumber
+  || selectedTaskWasLastMappedByCurrentUser.value
   || (selectedTask.value.locked && !selectedTaskLockedByCurrentUser.value),
 );
 const selectedTaskActionBusy = computed(() =>
@@ -506,9 +549,9 @@ const selectedTaskActionBusy = computed(() =>
   ),
 );
 const showActivateProjectButton = computed(() =>
-  projectRequiresActivation.value && isProjectLead.value,
+  projectRequiresActivation.value && canManageProjectLifecycle.value,
 );
-const showProjectEditButton = computed(() => isProjectLead.value);
+const showProjectEditButton = computed(() => canEditProjectMetadata.value);
 
 let projectGroupUserSearchDebounce: ReturnType<typeof setTimeout> | undefined;
 let projectGroupUserSearchRequestId = 0;
@@ -606,6 +649,8 @@ async function handleSaveTasks() {
       return;
     }
 
+    // Keep the project summary in sync while the paginated task-list request reloads all tasks.
+    project.value.taskCount = result.taskCount;
     await refreshProjectTaskStateAfterSave();
     openTaskSaveSuccessDialog(result);
   }
@@ -627,6 +672,10 @@ function clearSelectedTask() {
 }
 
 async function openProjectEditPage() {
+  if (!canEditProjectMetadata.value) {
+    return;
+  }
+
   await navigateTo({
     path: `/workspace/${workspaceId}/projects/${projectId}/edit`,
   });
@@ -657,6 +706,10 @@ async function handleSelectedTaskAction() {
     return;
   }
 
+  if (isTaskSelfValidation(taskToOpen, currentUserId.value)) {
+    return;
+  }
+
   if (taskToOpen.locked) {
     if (!selectedTaskLockedByCurrentUser.value) {
       return;
@@ -675,6 +728,10 @@ async function handleSelectedTaskAction() {
 }
 
 async function handleActivateProject() {
+  if (!canManageProjectLifecycle.value) {
+    return;
+  }
+
   try {
     isActivatingProject.value = true;
 
@@ -771,6 +828,10 @@ async function loadProjectGroupUsers(searchText: string = '') {
 }
 
 function handleOpenAddContributorDialog() {
+  if (!canManageContributors.value) {
+    return;
+  }
+
   if (projectGroupUsersLoaded.value || projectGroupUsersLoading.value) {
     return;
   }
@@ -779,6 +840,10 @@ function handleOpenAddContributorDialog() {
 }
 
 function handleSearchAvailableUsers(value: string) {
+  if (!canManageContributors.value) {
+    return;
+  }
+
   projectGroupUserSearchQuery.value = value;
 
   if (projectGroupUserSearchDebounce) {
@@ -794,6 +859,12 @@ async function handleAddContributor(payload: {
   role: WorkspaceProjectContributor['role'];
   userId: string;
 }) {
+  // A project has one lead, established when the project is created. The add-contributor
+  // workflow may grant tasking roles but must never create another project lead.
+  if (!canManageContributors.value || payload.role === 'lead') {
+    return;
+  }
+
   if (projectContributors.value.some(contributor => contributor.id === payload.userId)) {
     return;
   }
@@ -813,6 +884,10 @@ async function handleAddContributor(payload: {
 }
 
 async function confirmRemoveContributor(contributor: WorkspaceProjectContributor) {
+  if (!canManageContributors.value || contributor.role === 'lead') {
+    return;
+  }
+
   const value = await create({
     title: 'Remove Contributor',
     body: `Remove ${contributor.name} from this project?`,
@@ -847,11 +922,20 @@ async function handleUpdateContributorRole(payload: {
   contributorId: string;
   role: WorkspaceProjectContributor['role'];
 }) {
+  if (!canManageContributors.value) {
+    return;
+  }
+
   const existingContributor = projectContributors.value.find(
     contributor => contributor.id === payload.contributorId,
   );
 
-  if (!existingContributor || existingContributor.role === payload.role) {
+  if (
+    !existingContributor
+    || existingContributor.role === 'lead'
+    || payload.role === 'lead'
+    || existingContributor.role === payload.role
+  ) {
     return;
   }
 
@@ -908,8 +992,7 @@ onBeforeUnmount(() => {
 });
 
 async function hydrateProjectDataFromApi() {
-  // Refresh the independent project, AOI, and task resources opportunistically so one
-  // failed request does not wipe out the rest of the page state.
+  // Refresh independent resources concurrently so one failure does not wipe out the rest.
   const [projectResult, aoiResult, tasksResult, contributorsResult] = await Promise.allSettled([
     workspaceProjectsClient.getWorkspaceProjectDetail(workspaceId, projectId),
     workspaceProjectsClient.getWorkspaceProjectAoi(workspaceId, projectId),
@@ -1035,10 +1118,6 @@ function openTaskLockErrorDialog(message: string) {
   };
 }
 
-function formatTaskStatus(task: Pick<WorkspaceProjectTaskListItem, 'locked' | 'status'>) {
-  return resolveWorkspaceProjectTaskStatusLabel(task, effectiveRole.value);
-}
-
 async function resolveTaskMutationErrorMessage(error: unknown, fallbackMessage: string) {
   return await resolveHttpErrorMessage(error, fallbackMessage);
 }
@@ -1076,7 +1155,6 @@ function escapeHtml(value: string) {
   display: flex;
   flex-direction: column;
   height: calc(100vh - #{$navbar-height});
-  padding: 0px 0px !important;
   overflow: hidden;
 }
 
@@ -1093,9 +1171,9 @@ function escapeHtml(value: string) {
   grid-template-columns: minmax(0, 50%) minmax(0, 50%);
   height: 100%;
   min-height: 0;
-  background: #ffffff;
+  background: $surface-card;
   border: 1px solid rgba($text-navy, 0.12);
-  border-radius: 0px;
+  border-radius: 0;
   overflow: hidden;
 }
 
@@ -1109,13 +1187,13 @@ function escapeHtml(value: string) {
   flex-direction: column;
   height: 100%;
   min-width: 0;
-  background: #ffffff;
+  background: $surface-card;
   overflow-y: auto;
 }
 
 .project-detail-hero {
   padding: 2.2rem 2.5rem 2rem;
-  background: transparent linear-gradient(283deg, #EEEAFF 0%, #F9F4FF 100%) 0% 0% no-repeat padding-box;
+  background: linear-gradient(283deg, $hero-gradient-start 0%, $hero-gradient-end 100%);
   border-bottom: 1px solid rgba($text-navy, 0.08);
 }
 
@@ -1124,8 +1202,8 @@ function escapeHtml(value: string) {
   flex-wrap: wrap;
   gap: 0.55rem;
   margin-bottom: 1.25rem;
-  color: #5A607B;
-  font-size: 14px;
+  color: $text-secondary;
+  font-size: 0.875rem;
   font-weight: 500;
 }
 
@@ -1142,10 +1220,9 @@ function escapeHtml(value: string) {
   max-width: 44rem;
   margin: 0;
   color: $text-navy;
-  font-size: 26px;
+  font-size: 1.625rem;
   font-weight: 600;
   line-height: 1.4;
-  // letter-spacing: -0.03em;
 }
 
 .project-detail-title-row {
@@ -1163,21 +1240,21 @@ function escapeHtml(value: string) {
 }
 
 .project-detail-edit-button {
-  width: 42px;
-  height: 42px;
+  width: 2.625rem;
+  height: 2.625rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #4d158d;
-  background: #f1eeff;
+  background: $primary-soft;
   border: 1px solid rgba(77, 21, 141, 0.28);
-  border-radius: 8px;
+  border-radius: 0.5rem;
   box-shadow: 0 0.4rem 1rem rgba(77, 21, 141, 0.08);
 }
 
 .project-detail-edit-button:hover:not(:disabled),
 .project-detail-edit-button:focus-visible:not(:disabled) {
-  color: #421178;
+  color: $primary-hover;
   background: rgba(255, 255, 255, 0.94);
   border-color: rgba(77, 21, 141, 0.42);
 }
@@ -1187,22 +1264,22 @@ function escapeHtml(value: string) {
 }
 
 .project-detail-activate-button {
-    height: 42px;
-    padding: 0px 15px;
-    flex-shrink: 0;
-    color: #ffffff;
-    font-size: 0.98rem;
-    font-weight: 600;
-    background: #32006e;
-    border: 1px solid #32006e;
-    border-radius: 8px;
+  height: 2.625rem;
+  padding: 0 0.9375rem;
+  flex-shrink: 0;
+  color: $white;
+  font-size: 0.98rem;
+  font-weight: 600;
+  background: $primary;
+  border: 1px solid $primary;
+  border-radius: 0.5rem;
 }
 
 .project-detail-activate-button:hover:not(:disabled),
 .project-detail-activate-button:focus-visible:not(:disabled) {
-  color: #ffffff;
-  background: #421178;
-  border-color: #421178;
+  color: $white;
+  background: $primary-hover;
+  border-color: $primary-hover;
 }
 
 .project-detail-activate-button:disabled {
@@ -1216,7 +1293,7 @@ function escapeHtml(value: string) {
   gap: 1rem;
   margin-top: 2.3rem;
   color: $text-secondary;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
 }
 
@@ -1226,15 +1303,15 @@ function escapeHtml(value: string) {
 }
 
 .project-detail-progress-bar {
-  height: 10px;
+  height: 0.625rem;
   margin-top: 0.55rem;
-  background: #fff;
-  border: 1px solid #D9DDF0;
-  border-radius: 20px;
+  background: $surface-card;
+  border: 1px solid $progress-border;
+  border-radius: 1.25rem;
 }
 
 .project-detail-progress-bar .progress-bar {
-  background: #4e5fe0;
+  background: $progress-fill;
   border-radius: 999px;
 }
 
@@ -1266,7 +1343,7 @@ function escapeHtml(value: string) {
   right: 0;
   bottom: -1px;
   height: 0.22rem;
-  background: #1a1e3d;
+  background: $text-navy;
   border-radius: 999px;
 }
 
@@ -1276,17 +1353,14 @@ function escapeHtml(value: string) {
 
 .project-detail-card,
 .project-detail-copy-card {
-  background: #ffffff;
-  // border: 1px solid rgba($text-navy, 0.1);
-  // border-radius: 1rem;
-  // box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08);
+  background: $surface-card;
 }
 
 .project-detail-summary-card {
-    padding: 20px;
-    border: 1px solid #DFE2EF;
-    border-radius: 1rem;
-    margin-bottom: 30px;
+  padding: 1.25rem;
+  border: 1px solid $border-subtle;
+  border-radius: 1rem;
+  margin-bottom: 1.875rem;
 }
 
 .project-detail-summary-grid {
@@ -1297,30 +1371,29 @@ function escapeHtml(value: string) {
 
 .project-detail-summary-item {
   display: flex;
-  gap: 15px;
+  gap: 0.9375rem;
 }
 
 .project-detail-summary-item span {
-  // color: $text-navy;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
-  min-width: 120px;
+  min-width: 7.5rem;
 }
 
 .project-detail-summary-item strong {
   color: $text-secondary;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 400;
 }
 
 .project-detail-copy-card {
-  margin-top: 0px;
+  margin-top: 0;
 }
 
 .project-detail-copy-card h2 {
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
   color: $text-navy;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 700;
   line-height: 1.2;
 }
@@ -1375,7 +1448,7 @@ function escapeHtml(value: string) {
   }
 
   .project-detail-title {
-    font-size: 2.2rem;
+    font-size: 1.5rem;
   }
 
   .project-detail-summary-grid {
diff --git a/pages/workspace/[id]/projects/[projectId]/tasks/[taskId]/editor.vue b/pages/workspace/[id]/projects/[projectId]/tasks/[taskId]/editor.vue
index e971ec3..710ce70 100644
--- a/pages/workspace/[id]/projects/[projectId]/tasks/[taskId]/editor.vue
+++ b/pages/workspace/[id]/projects/[projectId]/tasks/[taskId]/editor.vue
@@ -1,6 +1,7 @@
 <template>
   <app-page
     fluid
+    padding="none"
     class="task-editor-page"
   >
     <section
@@ -12,159 +13,36 @@
         class="task-editor-canvas"
       />
 
-      <aside
-        :id="taskEditorSidebarId"
-        class="task-editor-sidebar"
-        :class="{ 'task-editor-sidebar-open': isSidebarOpen }"
-        aria-label="Task editor details"
-      >
-        <button
-          class="task-editor-sidebar-handle"
-          type="button"
-          :aria-controls="taskEditorSidebarId"
-          :aria-expanded="isSidebarOpen"
-          :aria-label="isSidebarOpen ? 'Hide task details panel' : 'Show task details panel'"
-          @click="toggleSidebar"
-        >
-          <app-icon
-            :variant="isSidebarOpen ? 'chevron_right' : 'chevron_left'"
-            size="20"
-            no-margin
-          />
-        </button>
-
-        <div class="task-editor-sidebar-scroll">
-          <header class="task-editor-sidebar-hero">
-            <div class="task-editor-sidebar-topbar">
-              <p class="task-editor-kicker">
-                Rapid task editor
-              </p>
-
-              <button
-                class="btn btn-outline-secondary task-editor-back"
-                type="button"
-                @click="handleBackNavigation"
-              >
-                <app-icon
-                  variant="arrow_back"
-                  size="18"
-                  no-margin
-                />
-                Back to Tasks
-              </button>
-            </div>
-
-            <h1 class="task-editor-title">
-              {{ project.name }}
-              <span>#{{ project.id }}</span>
-            </h1>
-
-            <p
-              v-if="editorLoadErrorMessage"
-              class="task-editor-load-error"
-              role="alert"
-            >
-              {{ editorLoadErrorMessage }}
-            </p>
-          </header>
-
-          <section class="task-editor-sidebar-section task-editor-instructions">
-            <div class="task-editor-section-heading">
-              <span class="task-editor-meta-label">Task number</span>
-              <strong class="task-editor-meta-value">{{ task.label }}</strong>
-            </div>
-            <div class="task-editor-section-heading">
-              <h2>Instructions</h2>
-            </div>
-            <workspace-project-details-rich-text-content
-              class="task-editor-rich-copy"
-              :html="project.instructions"
-            />
-          </section>
-
-          <section class="task-editor-sidebar-section task-editor-feedback">
-            <div class="task-editor-feedback-fields">
-              <label
-                class="task-editor-field-label"
-                for="task-editor-feedback-notes"
-              >
-                Comments
-              </label>
-              <textarea
-                id="task-editor-feedback-notes"
-                v-model="feedbackNotes"
-                class="form-control task-editor-field task-editor-feedback-notes"
-                rows="4"
-                placeholder="Optional notes for task feedback"
-              />
-            </div>
-
-            <fieldset class="task-editor-feedback-group">
-              <legend class="task-editor-feedback-legend">Feedback reason</legend>
-              <label
-                v-for="option in feedbackReasonOptions"
-                :key="option.value"
-                class="task-editor-feedback-option"
-              >
-                <input
-                  v-model="feedbackReasonCategory"
-                  class="form-check-input"
-                  type="radio"
-                  name="task-editor-feedback-reason"
-                  :value="option.value"
-                >
-                <span>{{ option.label }}</span>
-              </label>
-            </fieldset>
-          </section>
-        </div>
-
-        <footer class="task-editor-sidebar-footer">
-          <section class="task-editor-sidebar-section task-editor-actions">
-            <p
-              v-if="submitErrorMessage"
-              class="task-editor-submit-error"
-            >
-              {{ submitErrorMessage }}
-            </p>
-
-            <div
-              v-if="completeTaskStatusMessage"
-              class="task-editor-action-status"
-              :class="{
-                'task-editor-action-status-blocked': Boolean(completeTaskBlockedReason)
-              }"
-            >
-              <app-icon
-                :variant="completeTaskBlockedReason ? 'info' : 'check_circle'"
-                size="18"
-                no-margin
-              />
-              <span>{{ completeTaskStatusMessage }}</span>
-            </div>
-
-            <div class="task-editor-action-list">
-              <button
-                v-for="action in taskActions"
-                :key="action.id"
-                class="btn task-editor-action-button"
-                :class="`btn-${action.variant}`"
-                type="button"
-                :disabled="isTaskActionDisabled(action.id)"
-                @click="handleTaskAction(action.id)"
-              >
-                {{ getTaskActionLabel(action.id, action.label) }}
-              </button>
-            </div>
-          </section>
-        </footer>
-      </aside>
+      <task-editor-sidebar
+        v-model:feedback-notes="feedbackNotes"
+        v-model:feedback-reason-category="feedbackReasonCategory"
+        v-model:review-decision="reviewDecision"
+        :action-status-blocked="isActionStatusBlocked"
+        :action-status-message="completeTaskStatusMessage"
+        :actions="taskActions"
+        :editor-load-error-message="editorLoadErrorMessage"
+        :feedback-reason-options="feedbackReasonOptions"
+        :instructions="project.instructions"
+        :lock-time-remaining="lockTimeRemaining"
+        :open="isSidebarOpen"
+        :project-name="project.name"
+        :review-task="isReviewTask"
+        :show-action-status="showActionStatus"
+        :sidebar-id="taskEditorSidebarId"
+        :submit-error-message="submitErrorMessage"
+        :task-label="task.label"
+        :task-status-help-text="taskStatusHelpText"
+        :task-status-label="taskStatusLabel"
+        @action="handleTaskAction"
+        @back="handleBackNavigation"
+        @toggle="toggleSidebar"
+      />
     </section>
 
     <app-confirmation-dialog
       :visible="showUnsavedEditsDialog"
       title="You have unsaved edits"
-      :message="`You have ${pendingEditCount} active ${pendingEditCount === 1 ? 'edit' : 'edits'} that will be discarded if you leave. Are you sure?`"
+      :message="unsavedEditsMessage"
       primary-action-label="Leave anyway"
       primary-variant="danger"
       secondary-action-label="Stay on page"
@@ -177,14 +55,12 @@
 
 <script setup lang="ts">
 import { rapid3Manager, rapidManager, workspaceProjectsClient } from '~/services/index';
-import { resolveHttpErrorMessage } from '~/services/http';
 import { WorkspaceProjectsClientError } from '~/services/projects';
 import type {
   WorkspaceProjectDetail,
   WorkspaceProjectTaskDetail,
-  WorkspaceProjectTaskFeedbackReasonCategory,
-  WorkspaceProjectTaskSubmitFeedback,
 } from '~/types/projects';
+import type { TaskEditorActionId } from '~/types/task-editor';
 import { shapeToCenter } from '~/util/geojson';
 
 const route = useRoute();
@@ -197,76 +73,64 @@ const pendingEditCount = ref(0);
 const isSidebarOpen = ref(true);
 const hasActiveEdits = computed(() => pendingEditCount.value > 0);
 const taskEditorSidebarId = 'task-editor-sidebar';
-const feedbackNotes = ref('');
-const feedbackReasonCategory = ref<WorkspaceProjectTaskFeedbackReasonCategory | ''>('');
-const isSubmittingTask = ref(false);
-const isSubmittingChangeset = ref(false);
-const activeTaskAction = ref<'complete' | 'skip' | null>(null);
-const submitErrorMessage = ref('');
 const editorLoadErrorMessage = ref('');
 const showUnsavedEditsDialog = ref(false);
 const pendingUnsavedAction = ref<'route' | 'skip' | null>(null);
-const pendingChangesetId = ref<number | null>(null);
-const uploadedChangesetId = ref(-1);
 const newApiUrl = import.meta.env.VITE_NEW_API_URL;
 let allowNextRouteLeave = false;
 let resolvePendingRouteLeave: ((shouldLeave: boolean) => void) | null = null;
 
-const taskActions = [
-  { id: 'complete', label: 'Completed Mapping', variant: 'primary' },
-  { id: 'skip', label: 'Skip This Task', variant: 'outline-secondary' },
-] as const;
-const feedbackReasonOptions: Array<{
-  label: string;
-  value: WorkspaceProjectTaskFeedbackReasonCategory;
-}> = [
-  { label: 'Incomplete Mapping', value: 'incomplete_mapping' },
-  { label: 'Data Quality Issue', value: 'data_quality_issue' },
-  { label: 'Wrong Area', value: 'wrong_area' },
-  { label: 'Other', value: 'other' },
-];
-const trimmedFeedbackNotes = computed(() => feedbackNotes.value.trim());
-const completeTaskBlockedReason = computed(() => {
-  if (isSubmittingTask.value) {
-    return 'Task submission is in progress.';
-  }
-
-  if (isSubmittingChangeset.value && pendingChangesetId.value !== null) {
-    return `Attaching uploaded changeset #${pendingChangesetId.value} to this task.`;
-  }
-
-  if (hasActiveEdits.value) {
-    const editLabel = pendingEditCount.value === 1 ? 'edit' : 'edits';
-    return `Push or discard your ${pendingEditCount.value} active ${editLabel} in Rapid before completing this task.`;
-  }
-
-  if (pendingChangesetId.value !== null) {
-    return `Uploaded changeset #${pendingChangesetId.value} has not been attached to this task yet. Please upload again before completing.`;
-  }
-
-  return '';
-});
-const completeTaskStatusMessage = computed(() => {
-  if (completeTaskBlockedReason.value) {
-    return completeTaskBlockedReason.value;
-  }
-
-  if (uploadedChangesetId.value > 0) {
-    return `Last uploaded changeset #${uploadedChangesetId.value} will be attached when you complete this task.`;
-  }
-
-  return 'Push your edits in Rapid, then complete this task.';
-});
-
 const [project, task] = await Promise.all([
   loadProjectDetail(),
   loadTaskDetail(),
 ]);
 
+const {
+  buildFeedbackPayload,
+  feedbackNotes,
+  feedbackReasonCategory,
+  feedbackReasonOptions,
+  isReviewTask,
+  reviewDecision,
+  reviewFeedbackIsIncomplete,
+  taskStatusHelpText,
+  taskStatusLabel,
+} = useTaskEditorContext(() => task.apiStatus);
+const { timeRemaining: lockTimeRemaining } = useTaskLockCountdown(
+  () => task.lock?.expires_at,
+);
+const {
+  actions: taskActions,
+  actionStatusMessage: completeTaskStatusMessage,
+  attachUploadedChangeset,
+  completeTaskBlockedReason,
+  releaseTask,
+  showActionStatus,
+  submitErrorMessage,
+  submitTask,
+} = useTaskEditorSubmission({
+  buildFeedbackPayload,
+  hasActiveEdits,
+  isReviewTask,
+  onFinished: finishTaskEditor,
+  pendingEditCount,
+  projectId,
+  reviewFeedbackIsIncomplete,
+  taskNumber: task.taskNumber,
+  workspaceId,
+});
+
 const backToTasksRoute = computed(() => ({
   path: `/workspace/${workspaceId}/projects/${projectId}`,
   query: { tab: 'tasks' },
 }));
+const isActionStatusBlocked = computed(() =>
+  Boolean(completeTaskBlockedReason.value),
+);
+const unsavedEditsMessage = computed(() => {
+  const editLabel = pendingEditCount.value === 1 ? 'edit' : 'edits';
+  return `You have ${pendingEditCount.value} active ${editLabel} that will be discarded if you leave. Are you sure?`;
+});
 
 useHead({
   title: `${project.name} | ${task.label} Editor`,
@@ -301,6 +165,8 @@ function handleBeforeUnload(event: BeforeUnloadEvent) {
 }
 
 let stopLoadedWatch: (() => void) | null = null;
+let stopStateChangeListener: (() => void) | null = null;
+let stopUploadResultListener: (() => void) | null = null;
 
 onMounted(() => {
   window.addEventListener('beforeunload', handleBeforeUnload);
@@ -309,18 +175,17 @@ onMounted(() => {
     isSidebarOpen.value = false;
   }
 
-  manager.onStateChange((state) => {
+  stopStateChangeListener = manager.onStateChange((state) => {
     pendingEditCount.value = normalizePendingEditCount(state);
   });
-  manager.onUploadResult((result) => {
+  stopUploadResultListener = manager.onUploadResult((result) => {
     const nextChangesetId = extractChangesetId(result);
 
     if (nextChangesetId === null) {
       console.warn('Rapid upload succeeded but no changeset ID was found in the result.', result);
       return;
     }
-    pendingChangesetId.value = nextChangesetId;
-    void submitLatestUploadedChangeset(nextChangesetId);
+    void attachUploadedChangeset(nextChangesetId);
   });
 
   // Rapid 2 and Rapid 3 both expose a global `Rapid` namespace. Even though this page
@@ -363,6 +228,8 @@ onMounted(() => {
 onBeforeUnmount(() => {
   window.removeEventListener('beforeunload', handleBeforeUnload);
   stopLoadedWatch?.();
+  stopStateChangeListener?.();
+  stopUploadResultListener?.();
 });
 
 async function loadProjectDetail(): Promise<WorkspaceProjectDetail> {
@@ -442,7 +309,7 @@ function confirmLeaveWithUnsavedEdits() {
     resolvePendingRouteLeave = null;
   }
   else if (action === 'skip') {
-    void skipTask();
+    void releaseTask();
   }
 }
 
@@ -453,13 +320,13 @@ function cancelLeaveWithUnsavedEdits() {
   resolvePendingRouteLeave = null;
 }
 
-function handleTaskAction(actionId: 'complete' | 'skip') {
+function handleTaskAction(actionId: TaskEditorActionId) {
   if (actionId === 'complete') {
     if (hasActiveEdits.value) {
       return;
     }
 
-    void submitCompletedMapping();
+    void submitTask();
     return;
   }
 
@@ -469,13 +336,24 @@ function handleTaskAction(actionId: 'complete' | 'skip') {
     return;
   }
 
-  void skipTask();
+  void releaseTask();
 }
 
 function toggleSidebar() {
   isSidebarOpen.value = !isSidebarOpen.value;
 }
 
+async function finishTaskEditor(bypassUnsavedGuard: boolean) {
+  allowNextRouteLeave = bypassUnsavedGuard;
+
+  try {
+    await navigateTo(backToTasksRoute.value);
+  }
+  finally {
+    allowNextRouteLeave = false;
+  }
+}
+
 function normalizePendingEditCount(state: unknown) {
   if (typeof state !== 'number' || Number.isNaN(state)) {
     return 0;
@@ -535,42 +413,6 @@ function normalizeChangesetId(value: unknown): number | null {
   return null;
 }
 
-function isTaskActionDisabled(actionId: typeof taskActions[number]['id']) {
-  if (isSubmittingTask.value || isSubmittingChangeset.value || activeTaskAction.value !== null) {
-    return true;
-  }
-
-  return actionId === 'complete'
-    ? hasActiveEdits.value || pendingChangesetId.value !== null
-    : false;
-}
-
-function getTaskActionLabel(actionId: typeof taskActions[number]['id'], fallback: string) {
-  if (actionId === 'complete' && isSubmittingTask.value) {
-    return 'Submitting...';
-  }
-
-  if (actionId === 'skip' && activeTaskAction.value === 'skip') {
-    return 'Skipping...';
-  }
-
-  return fallback;
-}
-
-function buildFeedbackPayload(): WorkspaceProjectTaskSubmitFeedback | undefined {
-  if (!trimmedFeedbackNotes.value && !feedbackReasonCategory.value) {
-    return undefined;
-  }
-
-  if (!trimmedFeedbackNotes.value) {
-    throw new Error('Feedback notes are required when sending feedback.');
-  }
-
-  return {
-    notes: trimmedFeedbackNotes.value,
-    reasonCategory: feedbackReasonCategory.value || undefined,
-  };
-}
 function generateInitialHash() {
   const center = shapeToCenter(task.geometry);
   const lat = center[0];
@@ -598,104 +440,6 @@ function syncTaskHash() {
   window.history.replaceState(window.history.state, '', nextUrl);
 }
 
-async function submitCompletedMapping() {
-  submitErrorMessage.value = '';
-
-  let feedback: WorkspaceProjectTaskSubmitFeedback | undefined;
-
-  try {
-    feedback = buildFeedbackPayload();
-  }
-  catch (error) {
-    submitErrorMessage.value = error instanceof Error
-      ? error.message
-      : 'Feedback validation failed.';
-    return;
-  }
-
-  isSubmittingTask.value = true;
-  activeTaskAction.value = 'complete';
-
-  try {
-    await workspaceProjectsClient.submitWorkspaceProjectTask(
-      workspaceId,
-      projectId,
-      task.taskNumber,
-      {
-        done: true,
-        feedback,
-      },
-    );
-
-    await navigateTo(backToTasksRoute.value);
-  }
-  catch (error) {
-    submitErrorMessage.value = await getTaskSubmitErrorMessage(error);
-  }
-  finally {
-    isSubmittingTask.value = false;
-    activeTaskAction.value = null;
-  }
-}
-
-async function submitLatestUploadedChangeset(osmChangesetId: number) {
-  isSubmittingChangeset.value = true;
-  submitErrorMessage.value = '';
-
-  try {
-    await workspaceProjectsClient.submitWorkspaceProjectTaskChangeset(
-      workspaceId,
-      projectId,
-      task.taskNumber,
-      osmChangesetId,
-    );
-
-    uploadedChangesetId.value = osmChangesetId;
-
-    if (pendingChangesetId.value === osmChangesetId) {
-      pendingChangesetId.value = null;
-    }
-  }
-  catch {
-    submitErrorMessage.value = `Uploaded changeset #${osmChangesetId} could not be attached to this task. Please upload again before completing.`;
-  }
-  finally {
-    isSubmittingChangeset.value = false;
-  }
-}
-
-async function skipTask() {
-  submitErrorMessage.value = '';
-  activeTaskAction.value = 'skip';
-
-  try {
-    await workspaceProjectsClient.unlockWorkspaceProjectTask(
-      workspaceId,
-      projectId,
-      task.taskNumber,
-    );
-
-    allowNextRouteLeave = true;
-
-    try {
-      await navigateTo(backToTasksRoute.value);
-    }
-    finally {
-      allowNextRouteLeave = false;
-    }
-  }
-  catch (error) {
-    submitErrorMessage.value = await getTaskSubmitErrorMessage(error);
-  }
-  finally {
-    activeTaskAction.value = null;
-  }
-}
-
-async function getTaskSubmitErrorMessage(error: unknown) {
-  return await resolveHttpErrorMessage(error, 'Task submission failed.');
-}
-
 async function mountEditor() {
   if (!editorContainer.value) {
     throw new Error('Rapid editor container is unavailable.');
@@ -718,20 +462,19 @@ function handleEditorLoadFailure(action: 'initialize' | 'switch', error: unknown
 
 .task-editor-page {
   height: 100%;
-  overflow: hidden;
   box-sizing: border-box;
-  padding: 0 !important;
+  overflow: hidden;
   background: $purple-background-light;
 }
 
 .task-editor-shell {
-  --task-editor-sidebar-width: min(29rem, 32vw);
+  --task-editor-sidebar-width: min(34rem, 32vw);
   --task-editor-sidebar-rail-width: 3.75rem;
   height: 100%;
   min-height: 0;
+  position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--task-editor-sidebar-width);
-  position: relative;
   overflow: hidden;
 }
 
@@ -739,12 +482,8 @@ function handleEditorLoadFailure(action: 'initialize' | 'switch', error: unknown
   grid-template-columns: minmax(0, 1fr) var(--task-editor-sidebar-rail-width);
 }
 
-.task-editor-canvas,
-.task-editor-sidebar {
-  min-height: 0;
-}
-
 .task-editor-canvas {
+  min-height: 0;
   height: 100%;
   overflow: hidden;
   background: $text-navy;
@@ -753,399 +492,17 @@ function handleEditorLoadFailure(action: 'initialize' | 'switch', error: unknown
   box-shadow: none;
 }
 
-.task-editor-sidebar {
-  position: relative;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  overflow: visible;
-  width: 100%;
-  height: 100%;
-  border: 1px solid rgba($text-navy, 0.08);
-  border-radius: 0;
-  border-left-color: rgba($text-navy, 0.1);
-  box-shadow: -0.6rem 0 2rem rgba($text-navy, 0.08);
-  transition:
-    width 0.28s ease,
-    box-shadow 0.28s ease;
-  background: $purple-background-light;
-}
-
-.task-editor-sidebar:not(.task-editor-sidebar-open) {
-  box-shadow: -0.2rem 0 1rem rgba($text-navy, 0.04);
-}
-
-.task-editor-load-error {
-  margin: 0.85rem 0 0;
-  padding: 0.75rem;
-  color: $danger-red;
-  font-size: 0.9rem;
-  line-height: 1.45;
-  background: rgba($white, 0.92);
-  border: 1px solid rgba($danger-red, 0.28);
-  border-radius: 0.75rem;
-}
-
-.task-editor-sidebar-scroll {
-  height: 100%;
-  display: grid;
-  align-content: start;
-  gap: 1rem;
-  padding: 1.15rem 1rem 1rem 1.05rem;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  transition: opacity 0.16s ease;
-}
-
-.task-editor-sidebar:not(.task-editor-sidebar-open) .task-editor-sidebar-scroll {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.task-editor-sidebar-footer {
-  position: sticky;
-  bottom: 0;
-  display: grid;
-  gap: 0.9rem;
-  padding: 0 1rem 1rem 1.05rem;
-  background: linear-gradient(180deg, rgba($purple-background-light, 0) 0%, rgba($purple-background-light, 0.96) 16%, $purple-background-light 100%);
-}
-
-.task-editor-sidebar:not(.task-editor-sidebar-open) .task-editor-sidebar-footer {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.task-editor-sidebar-handle {
-  position: absolute;
-  top: clamp(4.1rem, 9vh, 5.35rem);
-  left: 0.9rem;
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.35rem;
-  height: 3.15rem;
-  color: $white;
-  background: $primary;
-  border: 1px solid rgba($text-navy, 0.18);
-  border-radius: 0.8rem;
-  box-shadow:
-    0 0 0 0.22rem rgba($white, 0.92),
-    0 0.8rem 1.8rem rgba($text-navy, 0.22);
-  transition:
-    background-color 0.2s ease,
-    box-shadow 0.2s ease,
-    left 0.28s ease,
-    transform 0.28s ease;
-}
-
-.task-editor-sidebar-handle:hover,
-.task-editor-sidebar-handle:focus-visible {
-  color: $white;
-  background: $brand-accent;
-  box-shadow:
-    0 0 0 0.22rem rgba($white, 0.96),
-    0 0 0 0.38rem rgba($primary, 0.2),
-    0 0.95rem 2rem rgba($text-navy, 0.24);
-}
-
-.task-editor-sidebar.task-editor-sidebar-open .task-editor-sidebar-handle {
-  left: 0;
-  transform: translateX(-50%);
-}
-
-.task-editor-sidebar:not(.task-editor-sidebar-open) .task-editor-sidebar-handle {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.task-editor-kicker {
-  margin: 0;
-  color: $secondary;
-  font-size: 0.82rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.task-editor-title {
-  margin: 0;
-  color: $text-navy;
-  font-family: var(--secondary-font-family);
-  font-size: 1.8rem;
-  font-weight: 700;
-  line-height: 1.15;
-}
-
-.task-editor-title span {
-  font-weight: 800;
-}
-
-.task-editor-sidebar-hero {
-  display: grid;
-  gap: 0.8rem;
-  padding: 0.35rem 0.2rem 0;
-}
-
-.task-editor-sidebar-topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.task-editor-sidebar-section {
-  display: grid;
-  gap: 0.85rem;
-  padding: 1rem;
-  background: $white;
-  border: 1px solid rgba($text-navy, 0.08);
-  border-radius: 1.1rem;
-  box-shadow: 0 0.8rem 2rem rgba($text-navy, 0.05);
-}
-
-.task-editor-section-heading {
-  display: grid;
-  gap: 0.3rem;
-}
-
-.task-editor-section-heading h2 {
-  margin: 0;
-  color: $text-navy;
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.task-editor-section-heading span {
-  color: $secondary;
-  font-size: 0.88rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-}
-
-.task-editor-meta-label {
-  color: $secondary;
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.task-editor-meta-value {
-  color: $text-navy;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.task-editor-instructions,
-.task-editor-experiments {
-  display: grid;
-  gap: 0.85rem;
-}
-
-.task-editor-experiment-copy,
-.task-editor-experiment-note {
-  margin: 0;
-  color: $secondary;
-  font-size: 0.92rem;
-  line-height: 1.45;
-}
-
-.task-editor-rich-copy {
-  color: $secondary;
-  font-size: 1rem;
-  line-height: 1.55;
-}
-
-.task-editor-actions {
-  display: grid;
-  gap: 0.9rem;
-  position: relative;
-  z-index: 1;
-}
-
-.task-editor-feedback {
-  display: grid;
-  gap: 0.9rem;
-}
-
-.task-editor-feedback-fields,
-.task-editor-feedback-group {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.task-editor-field-label,
-.task-editor-feedback-legend {
-  margin: 0;
-  color: $text-navy;
-  font-size: 0.85rem;
-  font-weight: 700;
-}
-
-.task-editor-feedback-group {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-.task-editor-field {
-  color: $text-navy;
-  background: $white;
-  border-color: rgba($text-navy, 0.14);
-  border-radius: 0.85rem;
-}
-
-.task-editor-field:focus {
-  border-color: rgba($primary, 0.4);
-  box-shadow: 0 0 0 0.2rem rgba($primary, 0.12);
-}
-
-.task-editor-feedback-notes {
-  min-height: 7rem;
-  resize: vertical;
-}
-
-.task-editor-feedback-option {
-  display: flex;
-  align-items: center;
-  gap: 0.65rem;
-  padding: 0.65rem 0.75rem;
-  color: $secondary;
-  font-size: 0.95rem;
-  font-weight: 600;
-  background: $white;
-  border: 1px solid rgba($text-navy, 0.08);
-  border-radius: 0.85rem;
-}
-
-.task-editor-feedback-option .form-check-input {
-  margin: 0;
-  accent-color: $primary;
-}
-
-.task-editor-feedback-hint,
-.task-editor-submit-error {
-  margin: 0;
-  font-size: 0.9rem;
-  line-height: 1.45;
-}
-
-.task-editor-feedback-hint {
-  color: $secondary;
-}
-
-.task-editor-submit-error {
-  color: $danger-red;
-}
-
-.task-editor-action-status {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 0.6rem;
-  margin: 0;
-  padding: 0.85rem 0.9rem;
-  color: $tdei-green;
-  font-size: 0.92rem;
-  line-height: 1.45;
-  background: rgba($white, 0.92);
-  border: 1px solid rgba($tdei-green, 0.24);
-  border-radius: 0.85rem;
-}
-
-.task-editor-action-status :deep(.material-icons) {
-  margin-top: 0;
-}
-
-.task-editor-action-status-blocked {
-  color: $text-navy;
-  background: $purple-background-medium;
-  border-color: rgba($primary, 0.18);
-}
-
-.task-editor-action-list {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.7rem;
-}
-
-.task-editor-action-button {
-  width: 100%;
-  min-height: 3.15rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding-inline: 1rem;
-  font-weight: 700;
-  border-radius: 0.9rem;
-}
-
-.task-editor-action-button.btn-primary {
-  color: $white;
-  background: $primary;
-  border-color: $primary;
-}
-
-.task-editor-action-button.btn-outline-secondary {
-  color: $secondary;
-  border-color: rgba($text-navy, 0.16);
-  background: $white;
-}
-
-.task-editor-action-note {
-  margin: 0;
-  padding: 0.85rem 0.9rem;
-  color: $secondary;
-  font-size: 0.9rem;
-  line-height: 1.45;
-  background: $purple-background-medium;
-  border: 1px solid rgba($text-navy, 0.12);
-  border-radius: 0.85rem;
-}
-
-.task-editor-back {
-  width: fit-content;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  min-height: 2.4rem;
-  padding-inline: 0.9rem;
-  font-weight: 700;
-  color: $secondary;
-  background: $white;
-  border-color: rgba($text-navy, 0.15);
-  border-radius: 0.9rem;
-}
-
 @include media-breakpoint-down(lg) {
   .task-editor-shell {
-    --task-editor-sidebar-width: min(24rem, 36vw);
+    --task-editor-sidebar-width: min(28rem, 40vw);
     --task-editor-sidebar-rail-width: 3.5rem;
   }
 }
 
 @include media-breakpoint-down(sm) {
-  .task-editor-page {
-    padding: 0 !important;
-  }
-
   .task-editor-shell {
-    --task-editor-sidebar-width: min(19.5rem, 58vw);
+    --task-editor-sidebar-width: min(25rem, calc(100vw - 3.25rem));
     --task-editor-sidebar-rail-width: 3.25rem;
   }
-
-  .task-editor-title {
-    font-size: 1.45rem;
-  }
-
-  .task-editor-sidebar-topbar {
-    align-items: flex-start;
-    flex-direction: column;
-  }
 }
 </style>
diff --git a/pages/workspace/[id]/projects/create.vue b/pages/workspace/[id]/projects/create.vue
index 506604c..7dff7f2 100644
--- a/pages/workspace/[id]/projects/create.vue
+++ b/pages/workspace/[id]/projects/create.vue
@@ -1,6 +1,7 @@
 <template>
   <app-page
     fluid
+    padding="none"
     class="project-create-page"
   >
     <section
@@ -37,7 +38,7 @@
             <project-wizard-stepper
               :steps="steps"
               :current-index="currentStepIndex"
-              :selection-locked="Boolean(createdProject)"
+              :selection-locked="creationCompleted"
               @select="onSelectStep"
             />
 
@@ -71,8 +72,10 @@
                 <project-wizard-steps-area-of-interest-step
                   v-else-if="areaStep"
                   :step="areaStep"
+                  :area-display-unit="areaUnit"
+                  :area-square-kilometers="aoiAreaSquareKilometers"
                   :error-message="areaImportError"
-                  :has-aoi="Boolean(draft.area.aoi)"
+                  :has-aoi="hasAreaOfInterest"
                   :imported-file-name="draft.area.importedFileName"
                   :is-drawing="isAreaDrawMode"
                   :warning-message="areaWarningMessage"
@@ -80,6 +83,7 @@
                   @draw="startAreaDrawMode"
                   @reset="resetAreaOfInterest"
                   @upload="importAreaOfInterest"
+                  @update:area-display-unit="selectAreaUnit"
                 />
                 <project-wizard-steps-settings-step
                   v-else-if="settingsStep"
@@ -188,9 +192,10 @@
 </template>
 
 <script setup lang="ts">
-import { projectWizardClient, workspacesClient } from '~/services/index';
+import { projectWizardClient, tdeiUserClient, workspacesClient } from '~/services/index';
 import { resolveHttpErrorMessage } from '~/services/http';
 import { validateProjectCustomImagery } from '~/services/project-custom-imagery';
+import { calculateProjectWizardAoiAreaSquareKilometers } from '~/services/project-wizard-aoi';
 import { buildProjectWizardReviewSummary } from '~/services/project-wizard-review';
 
 import type {
@@ -214,6 +219,25 @@ if (!Number.isInteger(workspaceId) || workspaceId <= 0) {
 const workspace = await workspacesClient.getWorkspace(workspaceId).catch((error) => {
   throw createError({ statusCode: 500, statusMessage: 'Failed to load workspace.', data: error });
 });
+
+const myTdeiRoles = await tdeiUserClient.getMyRolesForProjectGroupById(
+  workspace.tdeiProjectGroupId
+).catch((error) => {
+  throw createError({ statusCode: 500, statusMessage: 'Failed to load TDEI project group roles.', data: error });
+});
+
+const { canCreateProject } = useWorkspaceProjectPermissions(
+  () => workspace.role,
+  myTdeiRoles
+);
+
+if (!canCreateProject.value) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Only workspace leads or project group POCs can create projects.',
+  });
+}
+
 const projectsRoute = `/workspace/${workspaceId}/projects`;
 const PROJECT_NAME_CHECK_DEBOUNCE_MS = 300;
 const IMAGERY_VALIDATION_DEBOUNCE_MS = 300;
@@ -280,6 +304,14 @@ const {
   currentStep,
   draft,
 });
+const { areaUnit, selectAreaUnit } = useAreaDisplayUnit();
+const creationCompleted = computed(() => createdProject.value !== null);
+const hasAreaOfInterest = computed(() => draft.area.aoi !== null);
+const aoiAreaSquareKilometers = computed(() =>
+  draft.area.aoi
+    ? calculateProjectWizardAoiAreaSquareKilometers(draft.area.aoi)
+    : 0
+);
 const {
   addValidator,
   filteredWorkspaceUsers,
@@ -302,7 +334,8 @@ const reviewSummary = computed(() =>
   buildProjectWizardReviewSummary(
     draft,
     selectedValidators.value,
-  ),
+    areaUnit.value
+  )
 );
 
 const detailsStepComplete = computed(() =>
@@ -681,9 +714,7 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
 
 .project-create-page {
   height: 100%;
-  padding: 0px 0px;
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
+  position: relative;
   overflow: hidden;
 }
 
@@ -692,11 +723,10 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   height: 100%;
-  background: #ffffff;
+  background: $surface-card;
   overflow: hidden;
   width: 100%;
-  top: 0px;
-  z-index: 9999;
+  top: 0;
 }
 
 .project-create-header {
@@ -706,9 +736,9 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 15px 40px;
-  background-color: #fff;
-  box-shadow: 0px 3px 6px #00000029;
+  padding: 0.9375rem 2.5rem;
+  background-color: $surface-card;
+  box-shadow: $header-shadow;
 }
 
 .project-create-header-copy {
@@ -721,7 +751,7 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   margin: 0;
   padding-right: 1.45rem;
   color: $text-navy;
-  font-size: 22px;
+  font-size: 1.375rem;
   font-weight: 600;
   line-height: 1.2;
   border-right: 1px solid rgba($text-navy, 0.15);
@@ -735,11 +765,11 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
 
 .project-create-workspace-label {
   color: $text-secondary;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .project-create-workspace-copy strong {
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
 }
 
@@ -766,7 +796,7 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   height: 100%;
-  background-color: #fff;
+  background-color: $surface-card;
   border: 1px solid rgba($text-navy, 0.1);
   box-shadow: 0 0.45rem 1.2rem rgba($text-navy, 0.08);
   overflow: hidden;
@@ -812,7 +842,7 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   gap: 1rem;
   padding: 1rem 1.4rem;
   border-top: 1px solid rgba($text-navy, 0.1);
-  background-color: #fff;
+  background-color: $surface-card;
 }
 
 .project-create-footer-actions {
@@ -866,6 +896,7 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   }
 
   .project-create-shell {
+    position: relative;
     height: auto;
     min-height: calc(100vh - #{$navbar-height} - 2rem);
   }
diff --git a/pages/workspace/[id]/projects/index.vue b/pages/workspace/[id]/projects/index.vue
index ca1d27c..b9d752a 100644
--- a/pages/workspace/[id]/projects/index.vue
+++ b/pages/workspace/[id]/projects/index.vue
@@ -75,19 +75,19 @@
               :src="option.icon"
               alt=""
               class="view-icon"
-            />
+            >
             <span class="visually-hidden">{{ option.label }}</span>
           </button>
         </div>
 
         <span
-          v-if="isWorkspaceLead"
+          v-if="canCreateProject"
           class="workspace-projects-toolbar-divider"
           aria-hidden="true"
         />
 
         <nuxt-link
-          v-if="isWorkspaceLead"
+          v-if="canCreateProject"
           :to="createProjectRoute"
           class="btn btn-primary workspace-projects-create-button"
         >
@@ -237,8 +237,16 @@ const [workspace, { items: projectGroups }] = await Promise.all([
   tdeiUserClient.getMyProjectGroups(1, '', 10000),
 ]);
 
-/** Only workspace leads are allowed to create new projects. */
-const isWorkspaceLead = computed(() => workspace.role === 'lead');
+const myTdeiRoles = computed(() =>
+  projectGroups.find(group =>
+    group.tdei_project_group_id === workspace.tdeiProjectGroupId,
+  )?.roles ?? [],
+);
+
+const { canCreateProject } = useWorkspaceProjectPermissions(
+  () => workspace.role,
+  myTdeiRoles,
+);
 
 const emptyProjectsResponse: WorkspaceProjectsResult = {
   results: [],
@@ -414,7 +422,7 @@ onBeforeUnmount(() => {
 .workspace-projects-filters {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 1.25rem;
   flex: 1;
   min-width: 0;
 }
@@ -483,17 +491,17 @@ onBeforeUnmount(() => {
   border: 0;
 }
 
-.workspace-projects-view-button i.material-icons{
-  margin-top: 0px;
+.workspace-projects-view-button i.material-icons {
+  margin-top: 0;
 }
 
 .workspace-projects-view-button .view-icon {
-    width: 16px;
-    height: 16px;
+  width: 1rem;
+  height: 1rem;
 }
 
 .workspace-projects-view-button-active {
-  background-color: #EBEDF6;
+  background-color: $progress-track;
 }
 
 .workspace-projects-toolbar-divider {
@@ -522,7 +530,7 @@ onBeforeUnmount(() => {
 .workspace-projects-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 25px 25px;
+  gap: 1.5625rem;
 }
 
 .workspace-projects-empty-state {
diff --git a/services/project-wizard-payload.ts b/services/project-wizard-payload.ts
index a8c1f0f..ee6b466 100644
--- a/services/project-wizard-payload.ts
+++ b/services/project-wizard-payload.ts
@@ -1,4 +1,4 @@
-import { sanitizeReviewHtml } from '~/services/project-wizard-review';
+import { sanitizeRichTextHtml } from '~/util/rich-text';
 
 import type {
   ProjectWizardCreatePayload,
@@ -31,7 +31,7 @@ export function buildProjectWizardCreatePayload(draft: ProjectWizardDraft): Proj
     name: draft.details.name.trim(),
     description: draft.details.description.trim() || null,
     custom_imagery: parseProjectWizardCustomImagery(draft.details.imageryUrl),
-    instructions: sanitizeReviewHtml(draft.settings.instructions).trim(),
+    instructions: sanitizeRichTextHtml(draft.settings.instructions).trim(),
     review_required: draft.settings.reviewRequired,
     lock_timeout_hours: draft.settings.lockTimeoutHours,
     aoi: draft.area.aoi.geometry,
diff --git a/services/project-wizard-review.ts b/services/project-wizard-review.ts
index b4dafe7..2520d9c 100644
--- a/services/project-wizard-review.ts
+++ b/services/project-wizard-review.ts
@@ -1,14 +1,14 @@
-import DOMPurify from 'dompurify';
-
 import { calculateProjectWizardAoiAreaSquareKilometers } from '~/services/project-wizard-aoi';
+import { formatArea, type AreaDisplayUnit } from '~/util/area';
+import { sanitizeRichTextHtml } from '~/util/rich-text';
 
 import type {
   ProjectWizardDraft,
-  ProjectWizardWorkspaceUser,
+  ProjectWizardWorkspaceUser
 } from '~/types/project-wizard';
 
 export interface ProjectWizardReviewSummary {
-  aoiAreaSquareKilometers: string;
+  aoiAreaLabel: string;
   hasImageryUrl: boolean;
   imageryStatusLabel: string;
   instructionsHtml: string;
@@ -24,9 +24,10 @@ export interface ProjectWizardReviewSummary {
 export function buildProjectWizardReviewSummary(
   draft: ProjectWizardDraft,
   selectedValidators: ProjectWizardWorkspaceUser[],
+  areaDisplayUnit: AreaDisplayUnit = 'square_kilometers'
 ): ProjectWizardReviewSummary {
   const hasImageryUrl = draft.details.imageryUrl.trim().length > 0;
-  const instructionsHtml = sanitizeReviewHtml(draft.settings.instructions);
+  const instructionsHtml = sanitizeRichTextHtml(draft.settings.instructions);
 
   return {
     projectName: draft.details.name.trim() || 'Not provided',
@@ -39,24 +40,11 @@ export function buildProjectWizardReviewSummary(
     selectedValidators,
     instructionsHtml,
     instructionsProvided: instructionsHtml.trim().length > 0,
-    aoiAreaSquareKilometers: draft.area.aoi
-      ? formatSquareKilometers(calculateProjectWizardAoiAreaSquareKilometers(draft.area.aoi))
-      : '0',
+    aoiAreaLabel: draft.area.aoi
+      ? formatArea(
+          calculateProjectWizardAoiAreaSquareKilometers(draft.area.aoi),
+          areaDisplayUnit
+        )
+      : formatArea(0, areaDisplayUnit)
   };
 }
-
-export function sanitizeReviewHtml(html: string): string {
-  if (!html.trim()) {
-    return '';
-  }
-
-  return typeof window !== 'undefined'
-    ? DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })
-    : html;
-}
-
-function formatSquareKilometers(value: number): string {
-  return new Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 2,
-  }).format(value);
-}
diff --git a/services/projects.ts b/services/projects.ts
index 8e06f3d..905776d 100644
--- a/services/projects.ts
+++ b/services/projects.ts
@@ -28,6 +28,8 @@ import type {
 import type { WorkspaceId } from '~/types/workspaces';
 
 const PAGE_SIZE_DEFAULT = 10;
+const TASK_PAGE_SIZE_MAXIMUM = 1000;
+const TASK_PAGE_REQUEST_CONCURRENCY = 4;
 const USE_MOCK_WORKSPACE_PROJECTS = import.meta.env.VITE_USE_MOCK_WORKSPACE_PROJECTS === 'true';
 
 function normalizeStatus(status: WorkspaceProjectApiItem['status']): WorkspaceProject['status'] {
@@ -47,15 +49,15 @@ function normalizeStatus(status: WorkspaceProjectApiItem['status']): WorkspacePr
 function normalizeTaskStatus(status: WorkspaceProjectTaskApiItem['status']): WorkspaceProjectTaskListItem['status'] {
   switch (status) {
     case 'to_validate':
+    case 'to_review':
       return 'ready_for_validation';
     case 'more_mapping_needed':
+    case 'to_remap':
       return 'needs_more_mapping';
     case 'done':
       return 'completed';
     case 'completed':
       return 'completed';
-    case 'to_review':
-      return 'ready_for_validation'
     case 'to_map':
     default:
       return 'ready_for_mapping';
@@ -149,6 +151,8 @@ function normalizeProjectTask(task: WorkspaceProjectTaskApiItem): WorkspaceProje
     updatedAt: formatProjectTaskDate(task.updated_at),
     lock: task.lock,
     locked: task.lock !== null,
+    lastMapperId: task.last_mapper?.user_id ?? null,
+    apiStatus: task.status,
   };
 }
 
@@ -330,18 +334,50 @@ export class WorkspaceProjectsClient extends BaseHttpClient implements ICancelab
 
   async getWorkspaceProjectTasks(
     workspaceId: WorkspaceId,
-    projectId: number | string,
+    projectId: number | string
   ): Promise<WorkspaceProjectTaskListItem[]> {
-    const params = new URLSearchParams({
-      page: '1',
-      page_size: '200',
-    });
-    const response = await this._get(
-      `workspaces/${workspaceId}/tasking/projects/${projectId}/tasks?${params.toString()}`,
+    const fetchPage = async (page: number): Promise<WorkspaceProjectTasksApiResponse> => {
+      const params = new URLSearchParams({
+        page: String(page),
+        page_size: String(TASK_PAGE_SIZE_MAXIMUM)
+      });
+      const response = await this._get(
+        `workspaces/${workspaceId}/tasking/projects/${projectId}/tasks?${params.toString()}`
+      );
+
+      return await response.json() as WorkspaceProjectTasksApiResponse;
+    };
+
+    const firstPage = await fetchPage(1);
+    const totalPages = Math.ceil(
+      firstPage.pagination.total / TASK_PAGE_SIZE_MAXIMUM
     );
-    const body = await response.json() as WorkspaceProjectTasksApiResponse;
+    const remainingPages: WorkspaceProjectTasksApiResponse[] = [];
+
+    // The UI filters and sorts the complete task collection locally. Fetch every API page in
+    // bounded batches so large projects do not exceed the API's page-size limit or create an
+    // unbounded burst of simultaneous requests.
+    for (
+      let firstPageInBatch = 2;
+      firstPageInBatch <= totalPages;
+      firstPageInBatch += TASK_PAGE_REQUEST_CONCURRENCY
+    ) {
+      const lastPageInBatch = Math.min(
+        totalPages,
+        firstPageInBatch + TASK_PAGE_REQUEST_CONCURRENCY - 1
+      );
+      const batch = await Promise.all(
+        Array.from(
+          { length: lastPageInBatch - firstPageInBatch + 1 },
+          (_, index) => fetchPage(firstPageInBatch + index)
+        )
+      );
+      remainingPages.push(...batch);
+    }
 
-    return body.tasks.map(normalizeProjectTask);
+    return [firstPage, ...remainingPages]
+      .flatMap(page => page.tasks)
+      .map(normalizeProjectTask);
   }
 
   async getWorkspaceProjectRoles(
diff --git a/services/rapid.ts b/services/rapid.ts
index 664d945..73cb273 100644
--- a/services/rapid.ts
+++ b/services/rapid.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref } from 'vue';
 import type { TdeiAuthStore } from '~/services/tdei';
 import type { ImagerySource } from '~/types/imagery';
 import { convertToRapidImagerySource } from '~/util/rapid-imagery';
@@ -32,8 +32,14 @@ export class RapidManager {
     this.rapidContext = null;
   }
 
-  onStateChange(callback: (state: any) => void) {
+  onStateChange(callback: (state: any) => void): () => void {
     this.#stateCallback = callback;
+
+    return () => {
+      if (this.#stateCallback === callback) {
+        this.#stateCallback = null;
+      }
+    };
   }
 
   #notifyStateChange(state: any) {
@@ -42,8 +48,14 @@ export class RapidManager {
     }
   }
 
-  onUploadResult(callback: (result: any) => void) {
+  onUploadResult(callback: (result: any) => void): () => void {
     this.#uploadCallback = callback;
+
+    return () => {
+      if (this.#uploadCallback === callback) {
+        this.#uploadCallback = null;
+      }
+    };
   }
 
   #notifyUploadResult(result: any) {
diff --git a/services/tdei.ts b/services/tdei.ts
index fac16dd..5a06284 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -525,6 +525,16 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     return pgs.find(p => p.tdei_project_group_id === projectGroupId)?.roles ?? [];
   }
 
+  /**
+   * The TDEI API does not expose a current-user role endpoint filtered by project-group ID.
+   * Load the user's complete membership list and select the owning project group locally.
+   */
+  async getMyRolesForProjectGroupById(projectGroupId: string): Promise<string[]> {
+    const response = await this._get(`project-group-roles/${this.#auth.subject}?page_size=10000&page_no=1&sort_by=name`);
+    const items = (await response.json() as TdeiProjectGroupApiResponse[]) ?? [];
+    return items.find(p => p.tdei_project_group_id === projectGroupId)?.roles ?? [];
+  }
+
   async getMyServices(projectGroupId: string, type: string = 'all'): Promise<TdeiService[]> {
     const response = await this._get(`service?tdei_project_group_id=${projectGroupId}&service_type=${type}`);
 
diff --git a/test/unit/components/RichTextEditor.test.ts b/test/unit/components/RichTextEditor.test.ts
new file mode 100644
index 0000000..68a79c1
--- /dev/null
+++ b/test/unit/components/RichTextEditor.test.ts
@@ -0,0 +1,102 @@
+import type { Editor } from '@tiptap/core';
+import { flushPromises, mount } from '@vue/test-utils';
+import { EditorContent } from '@tiptap/vue-3';
+import { describe, expect, it } from 'vitest';
+import RichTextEditor from '~/components/project-wizard/RichTextEditor.vue';
+
+describe('RichTextEditor', () => {
+  it('creates an editable surface and emits typed content', async () => {
+    const wrapper = mount(RichTextEditor, {
+      props: {
+        'modelValue': '',
+        'onUpdate:modelValue': value => wrapper.setProps({ modelValue: value }),
+      },
+      global: {
+        stubs: {
+          AppIcon: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    const editor = wrapper.findComponent(EditorContent).props('editor') as Editor;
+
+    expect(editor.isEditable).toBe(true);
+    expect(wrapper.get('[contenteditable="true"]').attributes('contenteditable')).toBe('true');
+
+    editor.commands.focus();
+    editor.commands.insertContent('Editable instructions');
+    await flushPromises();
+
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([
+      '<p>Editable instructions</p>',
+    ]);
+    expect(wrapper.get('[contenteditable="true"]').text()).toBe('Editable instructions');
+    wrapper.unmount();
+  });
+
+  it('preserves consecutive edits when the controlled parent echoes each update', async () => {
+    const wrapper = mount(RichTextEditor, {
+      props: {
+        'modelValue': '<p>Initial</p>',
+        'onUpdate:modelValue': value => wrapper.setProps({ modelValue: value }),
+      },
+      global: {
+        stubs: {
+          AppIcon: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    const editor = wrapper.findComponent(EditorContent).props('editor') as Editor;
+    editor.commands.focus('end');
+    editor.commands.insertContent(' first');
+    await flushPromises();
+    editor.commands.insertContent(' second');
+    await flushPromises();
+
+    expect(editor.getText()).toBe('Initial first second');
+
+    await wrapper.setProps({ modelValue: '<p>Replacement</p>' });
+    await flushPromises();
+
+    expect(editor.getText()).toBe('Replacement');
+    wrapper.unmount();
+  });
+
+  it('marks image and table toolbar buttons active for their selections', async () => {
+    const wrapper = mount(RichTextEditor, {
+      props: {
+        modelValue: ''
+      },
+      global: {
+        stubs: {
+          AppIcon: true
+        }
+      }
+    });
+
+    await flushPromises();
+
+    const editor = wrapper.findComponent(EditorContent).props('editor') as Editor;
+    const activeClass = 'project-wizard-rich-text-editor-tool-active';
+
+    editor.commands.setContent('<img src="https://example.com/image.png">');
+    editor.commands.setNodeSelection(0);
+    await flushPromises();
+
+    expect(wrapper.get('button[aria-label="Image"]').classes()).toContain(activeClass);
+
+    editor.commands.setContent(
+      '<table><tbody><tr><td><p>Cell</p></td></tr></tbody></table>'
+    );
+    editor.commands.setTextSelection(4);
+    await flushPromises();
+
+    expect(wrapper.get('button[aria-label="Table"]').classes()).toContain(activeClass);
+    wrapper.unmount();
+  });
+});
diff --git a/test/unit/composables/useProjectRole.test.ts b/test/unit/composables/useProjectRole.test.ts
new file mode 100644
index 0000000..c437fc3
--- /dev/null
+++ b/test/unit/composables/useProjectRole.test.ts
@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  useProjectRole,
+  useWorkspaceProjectPermissions,
+} from '~/composables/useProjectRole';
+
+const getWorkspaceProjectUserRole = vi.hoisted(() => vi.fn());
+
+vi.mock('~/services/index', () => ({
+  workspaceProjectsClient: {
+    getWorkspaceProjectUserRole,
+  },
+}));
+
+describe('useWorkspaceProjectPermissions', () => {
+  it('allows workspace leads and project-group POCs to create projects', () => {
+    expect(useWorkspaceProjectPermissions('lead', []).canCreateProject.value).toBe(true);
+    expect(useWorkspaceProjectPermissions('contributor', ['poc']).canCreateProject.value).toBe(true);
+    expect(useWorkspaceProjectPermissions('contributor', []).canCreateProject.value).toBe(false);
+  });
+});
+
+describe('useProjectRole', () => {
+  beforeEach(() => {
+    getWorkspaceProjectUserRole.mockReset();
+  });
+
+  it('uses the explicit project role to grant validation access', async () => {
+    getWorkspaceProjectUserRole.mockResolvedValue('validator');
+    const role = useProjectRole(1763, '39', 'user-1', 'contributor');
+
+    await role.promise;
+
+    expect(role.effectiveRole.value).toBe('validator');
+    expect(role.canValidate.value).toBe(true);
+    expect(role.canMap.value).toBe(true);
+    expect(role.roleLoadError.value).toBeNull();
+  });
+
+  it('keeps workspace lead precedence without making a redundant role request', async () => {
+    const role = useProjectRole(1763, '39', 'lead-1', 'lead');
+
+    await role.promise;
+
+    expect(getWorkspaceProjectUserRole).not.toHaveBeenCalled();
+    expect(role.effectiveRole.value).toBe('lead');
+    expect(role.canManageContributors.value).toBe(true);
+  });
+
+  it('exposes project-role request failures instead of silently treating them as no role', async () => {
+    const requestError = new Error('Role service unavailable');
+    getWorkspaceProjectUserRole.mockRejectedValue(requestError);
+    const role = useProjectRole(1763, '39', 'user-1', 'contributor');
+
+    await role.promise;
+
+    expect(role.roleLoadError.value).toBe(requestError);
+    expect(role.canValidate.value).toBe(false);
+  });
+});
diff --git a/test/unit/composables/useTaskEditorContext.test.ts b/test/unit/composables/useTaskEditorContext.test.ts
new file mode 100644
index 0000000..306c44d
--- /dev/null
+++ b/test/unit/composables/useTaskEditorContext.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useTaskEditorContext } from '~/composables/useTaskEditorContext';
+import type { WorkspaceProjectTaskApiStatus } from '~/types/projects';
+
+describe('useTaskEditorContext', () => {
+  it('derives mapper and validator presentation from the API task status', () => {
+    const status = ref<WorkspaceProjectTaskApiStatus>('to_map');
+    const context = useTaskEditorContext(status);
+
+    expect(context.isReviewTask.value).toBe(false);
+    expect(context.taskStatusLabel.value).toBe('TO MAP');
+
+    status.value = 'to_remap';
+    expect(context.taskStatusLabel.value).toBe('MORE MAPPING REQUIRED');
+
+    status.value = 'to_review';
+    expect(context.isReviewTask.value).toBe(true);
+    expect(context.taskStatusLabel.value).toBe('TO REVIEW');
+  });
+
+  it('requires a reason and notes only when requesting a remap', () => {
+    const context = useTaskEditorContext('to_review');
+
+    expect(context.buildFeedbackPayload()).toBeUndefined();
+
+    context.reviewDecision.value = 'remap';
+    expect(context.reviewFeedbackIsIncomplete.value).toBe(true);
+    expect(() => context.buildFeedbackPayload()).toThrow('Select a feedback reason');
+
+    context.feedbackReasonCategory.value = 'incomplete_mapping';
+    context.feedbackNotes.value = 'Map the missing buildings.';
+
+    expect(context.reviewFeedbackIsIncomplete.value).toBe(false);
+    expect(context.buildFeedbackPayload()).toEqual({
+      notes: 'Map the missing buildings.',
+      reasonCategory: 'incomplete_mapping',
+    });
+  });
+});
diff --git a/test/unit/composables/useTaskEditorSubmission.test.ts b/test/unit/composables/useTaskEditorSubmission.test.ts
new file mode 100644
index 0000000..0b8c760
--- /dev/null
+++ b/test/unit/composables/useTaskEditorSubmission.test.ts
@@ -0,0 +1,90 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { useTaskEditorSubmission } from '~/composables/useTaskEditorSubmission';
+
+const submitWorkspaceProjectTask = vi.hoisted(() => vi.fn());
+const submitWorkspaceProjectTaskChangeset = vi.hoisted(() => vi.fn());
+const unlockWorkspaceProjectTask = vi.hoisted(() => vi.fn());
+
+vi.mock('~/services/index', () => ({
+  workspaceProjectsClient: {
+    submitWorkspaceProjectTask,
+    submitWorkspaceProjectTaskChangeset,
+    unlockWorkspaceProjectTask,
+  },
+}));
+
+describe('useTaskEditorSubmission', () => {
+  beforeEach(() => {
+    submitWorkspaceProjectTask.mockReset();
+    submitWorkspaceProjectTaskChangeset.mockReset();
+    unlockWorkspaceProjectTask.mockReset();
+  });
+
+  it('submits mapper completion without validator feedback', async () => {
+    submitWorkspaceProjectTask.mockResolvedValue(undefined);
+    const onFinished = vi.fn().mockResolvedValue(undefined);
+    const submission = useTaskEditorSubmission({
+      buildFeedbackPayload: () => undefined,
+      hasActiveEdits: ref(false),
+      isReviewTask: ref(false),
+      onFinished,
+      pendingEditCount: ref(0),
+      projectId: '39',
+      reviewFeedbackIsIncomplete: ref(false),
+      taskNumber: 2,
+      workspaceId: 1763,
+    });
+
+    await submission.submitTask();
+
+    expect(submitWorkspaceProjectTask).toHaveBeenCalledWith(1763, '39', 2, {
+      done: true,
+      feedback: undefined,
+    });
+    expect(onFinished).toHaveBeenCalledWith(false);
+  });
+
+  it('releases the lock when the user skips a task', async () => {
+    unlockWorkspaceProjectTask.mockResolvedValue(undefined);
+    const onFinished = vi.fn().mockResolvedValue(undefined);
+    const submission = useTaskEditorSubmission({
+      buildFeedbackPayload: () => undefined,
+      hasActiveEdits: ref(false),
+      isReviewTask: ref(true),
+      onFinished,
+      pendingEditCount: ref(0),
+      projectId: '39',
+      reviewFeedbackIsIncomplete: ref(false),
+      taskNumber: 2,
+      workspaceId: 1763,
+    });
+
+    await submission.releaseTask();
+
+    expect(unlockWorkspaceProjectTask).toHaveBeenCalledWith(1763, '39', 2);
+    expect(onFinished).toHaveBeenCalledWith(true);
+  });
+
+  it('uses a skip-specific fallback when releasing the lock fails', async () => {
+    unlockWorkspaceProjectTask.mockRejectedValue(null);
+    const onFinished = vi.fn().mockResolvedValue(undefined);
+    const submission = useTaskEditorSubmission({
+      buildFeedbackPayload: () => undefined,
+      hasActiveEdits: ref(false),
+      isReviewTask: ref(false),
+      onFinished,
+      pendingEditCount: ref(0),
+      projectId: '39',
+      reviewFeedbackIsIncomplete: ref(false),
+      taskNumber: 2,
+      workspaceId: 1763
+    });
+
+    await submission.releaseTask();
+
+    expect(submission.submitErrorMessage.value)
+      .toBe('Task could not be skipped. Please try again.');
+    expect(onFinished).not.toHaveBeenCalled();
+  });
+});
diff --git a/test/unit/composables/useTaskLockCountdown.test.ts b/test/unit/composables/useTaskLockCountdown.test.ts
new file mode 100644
index 0000000..3f2b0d5
--- /dev/null
+++ b/test/unit/composables/useTaskLockCountdown.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { formatTaskLockTimeRemaining } from '~/composables/useTaskLockCountdown';
+
+describe('formatTaskLockTimeRemaining', () => {
+  const currentTime = Date.parse('2026-07-27T10:00:00Z');
+
+  it('formats the remaining lock duration', () => {
+    expect(
+      formatTaskLockTimeRemaining('2026-07-27T11:32:00Z', currentTime),
+    ).toBe('1 hour, 32 minutes left');
+  });
+
+  it('reports expired and missing locks', () => {
+    expect(
+      formatTaskLockTimeRemaining('2026-07-27T09:59:00Z', currentTime),
+    ).toBe('Lock expired');
+    expect(formatTaskLockTimeRemaining(undefined, currentTime)).toBe('');
+  });
+});
diff --git a/test/unit/services/projects.test.ts b/test/unit/services/projects.test.ts
new file mode 100644
index 0000000..d04a043
--- /dev/null
+++ b/test/unit/services/projects.test.ts
@@ -0,0 +1,100 @@
+import { http, HttpResponse } from 'msw';
+import { describe, expect, it } from 'vitest';
+import { WorkspaceProjectsClient } from '~/services/projects';
+import { server } from '../../mocks/server';
+import { TEST_API_BASE } from '../../mocks/fixtures';
+
+import type { TdeiClient } from '~/services/tdei';
+import type { WorkspaceProjectTaskApiItem } from '~/types/projects';
+
+const tdeiClient = {
+  tryRefreshAuth: async () => {},
+  auth: { complete: false, accessToken: '' },
+} as unknown as TdeiClient;
+
+function makeClient() {
+  return new WorkspaceProjectsClient(TEST_API_BASE, tdeiClient);
+}
+
+function makeTask(taskNumber: number): WorkspaceProjectTaskApiItem {
+  return {
+    id: 13_563 + taskNumber,
+    task_number: taskNumber,
+    status: 'to_map',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [],
+    },
+    area_sqkm: 0.001,
+    lock: null,
+    last_mapper: null,
+    created_at: '2026-07-23T09:07:38.988772Z',
+    updated_at: '2026-07-23T09:07:38.989055Z',
+  };
+}
+
+describe('WorkspaceProjectsClient.getWorkspaceProjectTasks', () => {
+  it('uses the maximum supported API page size', async () => {
+    const allTasks = Array.from({ length: 450 }, (_, index) => makeTask(index + 1));
+    let requestedPage = '';
+    let requestedPageSize = '';
+
+    server.use(
+      http.get(`${TEST_API_BASE}workspaces/1763/tasking/projects/39/tasks`, ({ request }) => {
+        const url = new URL(request.url);
+
+        requestedPage = url.searchParams.get('page') ?? '';
+        requestedPageSize = url.searchParams.get('page_size') ?? '';
+
+        return HttpResponse.json({
+          tasks: allTasks,
+          pagination: {
+            page: 1,
+            page_size: 1000,
+            total: allTasks.length,
+          },
+        });
+      }),
+    );
+
+    const tasks = await makeClient().getWorkspaceProjectTasks(1763, 39);
+
+    expect(requestedPage).toBe('1');
+    expect(requestedPageSize).toBe('1000');
+    expect(tasks).toHaveLength(450);
+    expect(tasks[0]).toMatchObject({ id: '13564', label: 'Task #1', taskNumber: 1 });
+    expect(tasks[449]).toMatchObject({ id: '14013', label: 'Task #450', taskNumber: 450 });
+  });
+
+  it('fetches and combines every API page when a project has more than 1000 tasks', async () => {
+    const allTasks = Array.from({ length: 1250 }, (_, index) => makeTask(index + 1));
+    const requestedPages: string[] = [];
+
+    server.use(
+      http.get(`${TEST_API_BASE}workspaces/1763/tasking/projects/39/tasks`, ({ request }) => {
+        const url = new URL(request.url);
+        const page = Number(url.searchParams.get('page'));
+        const pageSize = Number(url.searchParams.get('page_size'));
+        const pageStart = (page - 1) * pageSize;
+
+        requestedPages.push(url.searchParams.get('page') ?? '');
+
+        return HttpResponse.json({
+          tasks: allTasks.slice(pageStart, pageStart + pageSize),
+          pagination: {
+            page,
+            page_size: pageSize,
+            total: allTasks.length,
+          },
+        });
+      }),
+    );
+
+    const tasks = await makeClient().getWorkspaceProjectTasks(1763, 39);
+
+    expect(requestedPages).toEqual(['1', '2']);
+    expect(tasks).toHaveLength(1250);
+    expect(tasks[0]?.taskNumber).toBe(1);
+    expect(tasks[1249]?.taskNumber).toBe(1250);
+  });
+});
diff --git a/test/unit/services/rapid.test.ts b/test/unit/services/rapid.test.ts
new file mode 100644
index 0000000..1c78426
--- /dev/null
+++ b/test/unit/services/rapid.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it, vi } from 'vitest';
+import { RapidManager } from '~/services/rapid';
+
+import type { TdeiAuthStore } from '~/services/tdei';
+
+describe('RapidManager subscriptions', () => {
+  it('stops notifying page callbacks after their cleanup functions run', async () => {
+    let stableChangeHandler: (() => void) | undefined;
+    let uploadResultHandler: ((result: unknown) => void) | undefined;
+    const manager = new RapidManager(
+      '/rapid/',
+      'https://www.openstreetmap.org/',
+      { ok: true } as TdeiAuthStore,
+    );
+    manager.rapidContext = {
+      initAsync: vi.fn().mockResolvedValue(undefined),
+      services: {
+        osm: {
+          _oauth: {
+            authenticated: vi.fn(),
+            fetch: vi.fn(),
+          },
+          userDetails: vi.fn(),
+        },
+      },
+      systems: {
+        editor: {
+          changes: () => ({ created: [], deleted: [], modified: [{}] }),
+          on: (_event: string, handler: () => void) => {
+            stableChangeHandler = handler;
+          },
+        },
+        uploader: {
+          on: (_event: string, handler: (result: unknown) => void) => {
+            uploadResultHandler = handler;
+          },
+        },
+      },
+    };
+
+    const stateCallback = vi.fn();
+    const uploadCallback = vi.fn();
+    const stopStateChanges = manager.onStateChange(stateCallback);
+    const stopUploadResults = manager.onUploadResult(uploadCallback);
+
+    await manager.init(1763);
+    stableChangeHandler?.();
+    uploadResultHandler?.({ id: 123 });
+
+    expect(stateCallback).toHaveBeenCalledOnce();
+    expect(uploadCallback).toHaveBeenCalledOnce();
+
+    stopStateChanges();
+    stopUploadResults();
+    stableChangeHandler?.();
+    uploadResultHandler?.({ id: 456 });
+
+    expect(stateCallback).toHaveBeenCalledOnce();
+    expect(uploadCallback).toHaveBeenCalledOnce();
+  });
+});
diff --git a/test/unit/util/area.test.ts b/test/unit/util/area.test.ts
new file mode 100644
index 0000000..3f54766
--- /dev/null
+++ b/test/unit/util/area.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import {
+  formatArea,
+  isAreaDisplayUnit,
+  isUnitedStatesLocale,
+} from '~/util/area';
+
+describe('area utilities', () => {
+  it('formats square kilometres with the proper superscript unit', () => {
+    expect(formatArea(1, 'square_kilometers')).toBe('1 km²');
+  });
+
+  it('converts square kilometres to square miles for display', () => {
+    expect(formatArea(1, 'square_miles')).toBe('0.39 mi²');
+  });
+
+  it('validates supported display units', () => {
+    expect(isAreaDisplayUnit('square_miles')).toBe(true);
+    expect(isAreaDisplayUnit('acres')).toBe(false);
+  });
+
+  it('detects United States locales without throwing for invalid locales', () => {
+    expect(isUnitedStatesLocale('en-US')).toBe(true);
+    expect(isUnitedStatesLocale('en-GB')).toBe(false);
+    expect(isUnitedStatesLocale('not_a_locale')).toBe(false);
+  });
+});
diff --git a/test/unit/util/task-access.test.ts b/test/unit/util/task-access.test.ts
new file mode 100644
index 0000000..9a1865f
--- /dev/null
+++ b/test/unit/util/task-access.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { isTaskSelfValidation } from '~/util/task-access';
+
+describe('isTaskSelfValidation', () => {
+  it('blocks a validation task for the user who last mapped it', () => {
+    expect(isTaskSelfValidation({
+      lastMapperId: 'mapper-1',
+      status: 'ready_for_validation',
+    }, 'mapper-1')).toBe(true);
+  });
+
+  it('does not block mapping tasks or a different validator', () => {
+    expect(isTaskSelfValidation({
+      lastMapperId: 'mapper-1',
+      status: 'ready_for_mapping',
+    }, 'mapper-1')).toBe(false);
+    expect(isTaskSelfValidation({
+      lastMapperId: 'mapper-1',
+      status: 'ready_for_validation',
+    }, 'validator-2')).toBe(false);
+  });
+});
diff --git a/types/projects.ts b/types/projects.ts
index fa8554c..a269d50 100644
--- a/types/projects.ts
+++ b/types/projects.ts
@@ -22,7 +22,15 @@ export type WorkspaceProjectTaskStatus
     | 'completed';
 export type WorkspaceProjectContributorRole = WorkspaceRole;
 export type WorkspaceProjectContributorApiRole = WorkspaceRole;
-export type WorkspaceProjectTaskApiStatus = 'to_map' | 'to_validate' | 'more_mapping_needed' | 'done' | 'completed' | 'to_review';
+export type WorkspaceProjectTaskApiStatus
+  = | 'to_map'
+    | 'to_remap'
+    | 'to_review'
+    // Legacy values retained while older tasking responses are still in circulation.
+    | 'to_validate'
+    | 'more_mapping_needed'
+    | 'done'
+    | 'completed';
 export type WorkspaceProjectTaskFeedbackReasonCategory
   = | 'incomplete_mapping'
     | 'data_quality_issue'
@@ -152,6 +160,8 @@ export interface WorkspaceProjectTaskListItem {
   updatedAt: string;
   lock: WorkspaceProjectTaskApiLock | null;
   locked: boolean;
+  lastMapperId: string | null;
+  apiStatus: WorkspaceProjectTaskApiStatus;
 }
 
 export interface WorkspaceProjectTaskDetail extends WorkspaceProjectTaskListItem {
diff --git a/types/task-editor.ts b/types/task-editor.ts
new file mode 100644
index 0000000..673df06
--- /dev/null
+++ b/types/task-editor.ts
@@ -0,0 +1,8 @@
+export type TaskEditorActionId = 'complete' | 'skip';
+
+export interface TaskEditorAction {
+  disabled: boolean;
+  id: TaskEditorActionId;
+  label: string;
+  variant: 'outline-secondary' | 'primary';
+}
diff --git a/util/area.ts b/util/area.ts
new file mode 100644
index 0000000..2e9a831
--- /dev/null
+++ b/util/area.ts
@@ -0,0 +1,39 @@
+export type AreaDisplayUnit = 'square_kilometers' | 'square_miles';
+
+const SQUARE_MILES_PER_SQUARE_KILOMETER = 0.3861021585;
+
+export const AREA_UNIT_OPTIONS: ReadonlyArray<{
+  label: string;
+  value: AreaDisplayUnit;
+}> = [
+  { label: 'km²', value: 'square_kilometers' },
+  { label: 'mi²', value: 'square_miles' },
+];
+
+export function formatArea(
+  squareKilometers: number,
+  displayUnit: AreaDisplayUnit,
+): string {
+  const convertedValue = displayUnit === 'square_miles'
+    ? squareKilometers * SQUARE_MILES_PER_SQUARE_KILOMETER
+    : squareKilometers;
+  const formattedValue = new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 0,
+  }).format(convertedValue);
+
+  return `${formattedValue} ${displayUnit === 'square_miles' ? 'mi²' : 'km²'}`;
+}
+
+export function isAreaDisplayUnit(value: string | null): value is AreaDisplayUnit {
+  return value === 'square_kilometers' || value === 'square_miles';
+}
+
+export function isUnitedStatesLocale(locale: string): boolean {
+  try {
+    return new Intl.Locale(locale).maximize().region === 'US';
+  }
+  catch {
+    return false;
+  }
+}
diff --git a/util/rich-text.ts b/util/rich-text.ts
new file mode 100644
index 0000000..b6c60c8
--- /dev/null
+++ b/util/rich-text.ts
@@ -0,0 +1,14 @@
+import DOMPurify from 'dompurify';
+
+const RICH_TEXT_SANITIZE_OPTIONS = {
+  USE_PROFILES: { html: true }
+} as const;
+
+/** Sanitizes editor and API-provided rich text before it is rendered or submitted. */
+export function sanitizeRichTextHtml(html: string): string {
+  if (!html.trim()) {
+    return '';
+  }
+
+  return DOMPurify.sanitize(html, RICH_TEXT_SANITIZE_OPTIONS);
+}
diff --git a/util/task-access.ts b/util/task-access.ts
new file mode 100644
index 0000000..eebd35f
--- /dev/null
+++ b/util/task-access.ts
@@ -0,0 +1,15 @@
+import type { WorkspaceProjectTaskListItem } from '~/types/projects';
+
+type TaskValidationIdentity = Pick<
+  WorkspaceProjectTaskListItem,
+  'lastMapperId' | 'status'
+>;
+
+export function isTaskSelfValidation(
+  task: TaskValidationIdentity,
+  currentUserId: string | null,
+): boolean {
+  return task.status === 'ready_for_validation'
+    && currentUserId !== null
+    && task.lastMapperId === currentUserId;
+}
diff --git a/util/task-status.ts b/util/task-status.ts
index 8838a32..1b0ba2a 100644
--- a/util/task-status.ts
+++ b/util/task-status.ts
@@ -9,7 +9,7 @@ export function formatWorkspaceProjectTaskStatus(status: WorkspaceProjectTaskSta
     case 'ready_for_validation':
       return 'Ready for validation';
     case 'needs_more_mapping':
-      return 'More mapping needed';
+      return 'More mapping required';
     case 'completed':
       return 'Completed';
     case 'ready_for_mapping':
@@ -27,8 +27,9 @@ export function resolveWorkspaceProjectTaskStatusLabel(
       case 'ready_for_validation':
         return 'Validating';
       case 'ready_for_mapping':
-      case 'needs_more_mapping':
         return 'Mapping';
+      case 'needs_more_mapping':
+        return 'More mapping required';
       default:
         return viewerRole === 'lead' || viewerRole === 'validator'
           ? 'Validating'