diff --git a/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderSectionNav.tsx b/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderSectionNav.tsx
index 6b5a0166f..07c5479f2 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderSectionNav.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderSectionNav.tsx
@@ -1,57 +1,46 @@
 'use client';
 
-import { Key } from '@op/ui/RAC';
-import { Tab, TabList, Tabs } from '@op/ui/Tabs';
-
 import { useTranslations } from '@/lib/i18n';
 
+import { SidebarNavItems } from './components/SidebarNavItems';
 import { useNavigationConfig } from './useNavigationConfig';
+import { usePhaseValidation } from './usePhaseValidation';
 import { useProcessNavigation } from './useProcessNavigation';
+import { useProcessPhases } from './useProcessPhases';
+import { useProcessBuilderValidation } from './validation/useProcessBuilderValidation';
 
 export const ProcessBuilderSidebar = ({
   instanceId,
+  decisionProfileId,
 }: {
   instanceId: string;
+  decisionProfileId?: string;
 }) => {
   const t = useTranslations();
   const navigationConfig = useNavigationConfig(instanceId);
-  const { visibleSections, currentSection, currentStep, setSection } =
-    useProcessNavigation(navigationConfig);
-
-  const handleSelectionChange = (key: Key) => {
-    setSection(String(key));
-  };
+  const { sections: validationSections } =
+    useProcessBuilderValidation(decisionProfileId);
+  const phases = useProcessPhases(instanceId, decisionProfileId);
+  const phaseValidation = usePhaseValidation(instanceId, decisionProfileId);
 
-  // Don't render sidebar for single-section steps
-  // These steps manage their own layout (e.g., template step with form builder)
-  if (visibleSections.length <= 1) {
-    return null;
-  }
+  const { visibleSections, currentSection, setSection } = useProcessNavigation(
+    navigationConfig,
+    phases,
+  );
 
   return (
-    <nav className="h-auto shrink-0 overflow-x-auto overflow-y-hidden p-0 py-4 md:sticky md:top-0 md:h-full md:w-64 md:overflow-x-hidden md:overflow-y-auto md:border-r md:p-8">
-      <Tabs
-        key={currentStep?.id}
-        orientation="vertical"
-        selectedKey={currentSection?.id}
-        onSelectionChange={handleSelectionChange}
-      >
-        <TabList
-          aria-label={t('Section navigation')}
-          className="scrollbar-none flex w-full gap-4 border-none md:flex-col md:gap-1"
-        >
-          {visibleSections.map((section) => (
-            <Tab
-              key={section.id}
-              id={section.id}
-              variant="pill"
-              className="cursor-pointer first:ml-4 last:mr-4 hover:bg-neutral-gray1 hover:text-charcoal focus-visible:outline-solid md:first:ml-0 md:last:mr-0 selected:text-charcoal md:selected:bg-neutral-offWhite"
-            >
-              {section.isDynamic ? section.labelKey : t(section.labelKey)}
-            </Tab>
-          ))}
-        </TabList>
-      </Tabs>
+    <nav
+      aria-label={t('Section navigation')}
+      className="hidden shrink-0 md:sticky md:top-0 md:flex md:h-full md:w-60 md:flex-col md:overflow-y-auto md:border-r md:p-4"
+    >
+      <SidebarNavItems
+        visibleSections={visibleSections}
+        phases={phases}
+        currentSectionId={currentSection?.id}
+        phaseValidation={phaseValidation}
+        validationSections={validationSections}
+        onSectionClick={setSection}
+      />
     </nav>
   );
 };
diff --git a/apps/app/src/components/decisions/ProcessBuilder/components/CornerDownRight.tsx b/apps/app/src/components/decisions/ProcessBuilder/components/CornerDownRight.tsx
new file mode 100644
index 000000000..4d65f65a9
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/components/CornerDownRight.tsx
@@ -0,0 +1,19 @@
+export function CornerDownRight({ className }: { className?: string }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M10 7.5H4C3.46957 7.5 2.96086 7.28929 2.58579 6.91421C2.21071 6.53914 2 6.03043 2 5.5V2"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/app/src/components/decisions/ProcessBuilder/components/SidebarNavItems.tsx b/apps/app/src/components/decisions/ProcessBuilder/components/SidebarNavItems.tsx
new file mode 100644
index 000000000..138dc467f
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/components/SidebarNavItems.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { cn } from '@op/ui/utils';
+
+import { useTranslations } from '@/lib/i18n';
+
+import {
+  type SectionId,
+  type SidebarItem,
+  isPhaseSection,
+  isSectionId,
+  phaseToSectionId,
+} from '../navigationConfig';
+import type { ProcessPhase } from '../useProcessPhases';
+import { CornerDownRight } from './CornerDownRight';
+
+type StaticSidebarItem = Extract<SidebarItem, { isDynamic?: false }>;
+
+interface SidebarNavItemsProps {
+  visibleSections: SidebarItem[];
+  phases: ProcessPhase[];
+  currentSectionId: string | undefined;
+  phaseValidation: Record<string, boolean>;
+  validationSections: Record<SectionId, boolean>;
+  onSectionClick: (sectionId: string) => void;
+}
+
+export function SidebarNavItems({
+  visibleSections,
+  phases,
+  currentSectionId,
+  phaseValidation,
+  validationSections,
+  onSectionClick,
+}: SidebarNavItemsProps) {
+  return (
+    <ul className="flex flex-col gap-1">
+      {visibleSections
+        .filter((section): section is StaticSidebarItem => !section.isDynamic)
+        .map((section) => (
+          <SectionItem
+            key={section.id}
+            section={section}
+            phases={phases}
+            currentSectionId={currentSectionId}
+            phaseValidation={phaseValidation}
+            validationSections={validationSections}
+            onSectionClick={onSectionClick}
+          />
+        ))}
+    </ul>
+  );
+}
+
+interface SectionItemProps {
+  section: StaticSidebarItem;
+  phases: ProcessPhase[];
+  currentSectionId: string | undefined;
+  phaseValidation: Record<string, boolean>;
+  validationSections: Record<SectionId, boolean>;
+  onSectionClick: (sectionId: string) => void;
+}
+
+function SectionItem({
+  section,
+  phases,
+  currentSectionId,
+  phaseValidation,
+  validationSections,
+  onSectionClick,
+}: SectionItemProps) {
+  const t = useTranslations();
+  const isActive = currentSectionId === section.id;
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => onSectionClick(section.id)}
+        className={cn(
+          'flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 text-left text-base transition-colors',
+          isActive
+            ? 'bg-primary-tealWhite text-primary'
+            : 'text-neutral-black hover:bg-neutral-gray1',
+        )}
+      >
+        {t(section.labelKey)}
+        {isSectionId(section.id) &&
+          validationSections[section.id] === false && (
+            <span className="size-1.5 shrink-0 rounded-full bg-primary-teal" />
+          )}
+      </button>
+      {section.id === 'phases' && phases.length > 0 && (
+        <ul className="mt-0.5 flex flex-col gap-0.5">
+          {phases.map((phase) => (
+            <PhaseItem
+              key={phase.phaseId}
+              phase={phase}
+              currentSectionId={currentSectionId}
+              phaseValidation={phaseValidation}
+              onSectionClick={onSectionClick}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+interface PhaseItemProps {
+  phase: ProcessPhase;
+  currentSectionId: string | undefined;
+  phaseValidation: Record<string, boolean>;
+  onSectionClick: (sectionId: string) => void;
+}
+
+function PhaseItem({
+  phase,
+  currentSectionId,
+  phaseValidation,
+  onSectionClick,
+}: PhaseItemProps) {
+  const t = useTranslations();
+  const phaseSectionId = phaseToSectionId(phase.phaseId);
+  const isActive =
+    currentSectionId !== undefined &&
+    isPhaseSection(currentSectionId) &&
+    currentSectionId === phaseSectionId;
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => onSectionClick(phaseSectionId)}
+        className={cn(
+          'flex w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-left text-sm transition-colors',
+          isActive
+            ? 'bg-primary-tealWhite text-primary'
+            : 'text-neutral-black hover:bg-neutral-gray1',
+        )}
+      >
+        <CornerDownRight className="shrink-0 opacity-50" />
+        <span className="truncate">{phase.name || t('Untitled phase')}</span>
+        {phaseValidation[phase.phaseId] === false && (
+          <span className="ml-auto size-1.5 shrink-0 rounded-full bg-primary-teal" />
+        )}
+      </button>
+    </li>
+  );
+}
diff --git a/apps/app/src/components/decisions/ProcessBuilder/contentRegistry.tsx b/apps/app/src/components/decisions/ProcessBuilder/contentRegistry.tsx
index 66fc2a764..2059025e1 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/contentRegistry.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/contentRegistry.tsx
@@ -2,8 +2,13 @@
 
 import { type ComponentType } from 'react';
 
-import type { StepId } from './navigationConfig';
+import {
+  type SectionId,
+  type StepId,
+  isPhaseSection,
+} from './navigationConfig';
 import OverviewSection from './stepContent/general/OverviewSection';
+import PhaseDetailSection from './stepContent/general/PhaseDetailSection';
 import PhasesSection from './stepContent/general/PhasesSection';
 import ProposalCategoriesSection from './stepContent/general/ProposalCategoriesSection';
 import ParticipantsSection from './stepContent/participants/ParticipantsSection';
@@ -52,3 +57,26 @@ export function getContentComponent(
   }
   return CONTENT_REGISTRY[stepId]?.[sectionId] ?? null;
 }
+
+// Flat section-to-component mapping for the unified sidebar
+const FLAT_CONTENT_REGISTRY: Record<string, SectionComponent> = {
+  overview: OverviewSection,
+  phases: PhasesSection,
+  proposalCategories: ProposalCategoriesSection,
+  templateEditor: TemplateEditorSection,
+  criteria: CriteriaSection,
+  roles: RolesSection,
+  participants: ParticipantsSection,
+};
+
+export function getContentComponentFlat(
+  sectionId: SectionId | string | undefined,
+): SectionComponent | null {
+  if (!sectionId) {
+    return null;
+  }
+  if (isPhaseSection(sectionId)) {
+    return PhaseDetailSection;
+  }
+  return FLAT_CONTENT_REGISTRY[sectionId] ?? null;
+}
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhaseDetailPage.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhaseDetailPage.tsx
new file mode 100644
index 000000000..c492c855d
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhaseDetailPage.tsx
@@ -0,0 +1,462 @@
+'use client';
+
+import { parseDate } from '@internationalized/date';
+import { trpc } from '@op/api/client';
+import type { PhaseDefinition, PhaseRules } from '@op/api/encoders';
+import { useDebouncedCallback } from '@op/hooks';
+import { Button } from '@op/ui/Button';
+import { DatePicker } from '@op/ui/DatePicker';
+import { Header2 } from '@op/ui/Header';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@op/ui/Modal';
+import { TextField } from '@op/ui/TextField';
+import { ToggleButton } from '@op/ui/ToggleButton';
+import { useQueryState } from 'nuqs';
+import { useRef, useState } from 'react';
+import { LuTrash2 } from 'react-icons/lu';
+
+import { useTranslations } from '@/lib/i18n';
+
+import { RichTextEditorWithToolbar } from '@/components/RichTextEditor/RichTextEditorWithToolbar';
+
+import { SaveStatusIndicator } from '../../components/SaveStatusIndicator';
+import { ToggleRow } from '../../components/ToggleRow';
+import type { SectionProps } from '../../contentRegistry';
+import { isPhaseSection, sectionIdToPhaseId } from '../../navigationConfig';
+import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
+
+const AUTOSAVE_DEBOUNCE_MS = 1000;
+
+export function PhaseDetailPage({
+  instanceId,
+  decisionProfileId,
+}: SectionProps) {
+  const [sectionParam, setSectionParam] = useQueryState('section', {
+    history: 'push',
+  });
+  const phaseId =
+    sectionParam && isPhaseSection(sectionParam)
+      ? sectionIdToPhaseId(sectionParam)
+      : null;
+
+  if (!phaseId) {
+    return null;
+  }
+
+  return (
+    <PhaseDetailForm
+      key={phaseId}
+      instanceId={instanceId}
+      decisionProfileId={decisionProfileId}
+      phaseId={phaseId}
+      onDelete={() => setSectionParam('phases')}
+    />
+  );
+}
+
+function PhaseDetailForm({
+  instanceId,
+  decisionProfileId,
+  phaseId,
+  onDelete,
+}: {
+  instanceId: string;
+  decisionProfileId: string;
+  phaseId: string;
+  onDelete: () => void;
+}) {
+  const t = useTranslations();
+  const [instance] = trpc.decision.getInstance.useSuspenseQuery({ instanceId });
+  const instancePhases = instance.instanceData?.phases;
+  const templatePhases = instance.process?.processSchema?.phases;
+  const isDraft = instance.status === 'draft';
+
+  const storePhases = useProcessBuilderStore(
+    (s) => s.instances[decisionProfileId]?.phases,
+  );
+  const setInstanceData = useProcessBuilderStore((s) => s.setInstanceData);
+  const setSaveStatus = useProcessBuilderStore((s) => s.setSaveStatus);
+  const markSaved = useProcessBuilderStore((s) => s.markSaved);
+  const saveState = useProcessBuilderStore((s) =>
+    s.getSaveState(decisionProfileId),
+  );
+
+  // Resolve the initial phase data (same priority as PhasesSectionContent)
+  const allPhases: PhaseDefinition[] = (() => {
+    const source =
+      !isDraft && storePhases?.length ? storePhases : instancePhases;
+    return (
+      source?.map((p) => ({
+        id: p.phaseId,
+        name: p.name ?? '',
+        description: p.description,
+        headline: p.headline,
+        additionalInfo: p.additionalInfo,
+        rules: p.rules ?? {},
+        startDate: p.startDate,
+        endDate: p.endDate,
+      })) ??
+      templatePhases ??
+      []
+    );
+  })();
+
+  const initialPhase = allPhases.find((p) => p.id === phaseId);
+  const [phase, setPhase] = useState<PhaseDefinition | undefined>(initialPhase);
+
+  const utils = trpc.useUtils();
+  const debouncedSaveRef = useRef<() => boolean>(null);
+  const updateInstance = trpc.decision.updateDecisionInstance.useMutation({
+    onSuccess: () => markSaved(decisionProfileId),
+    onError: () => setSaveStatus(decisionProfileId, 'error'),
+    onSettled: () => {
+      if (debouncedSaveRef.current?.()) {
+        return;
+      }
+      void utils.decision.getInstance.invalidate({ instanceId });
+    },
+  });
+
+  const debouncedSave = useDebouncedCallback(
+    (updatedPhase: PhaseDefinition) => {
+      setSaveStatus(decisionProfileId, 'saving');
+
+      // Build the full phases array with this phase updated
+      const phasesPayload = allPhases.map((p) => {
+        const source = p.id === phaseId ? updatedPhase : p;
+        return {
+          phaseId: source.id,
+          name: source.name,
+          description: source.description,
+          headline: source.headline,
+          additionalInfo: source.additionalInfo,
+          startDate: source.startDate,
+          endDate: source.endDate,
+          rules: source.rules,
+        };
+      });
+
+      setInstanceData(decisionProfileId, { phases: phasesPayload });
+
+      if (isDraft) {
+        updateInstance.mutate({ instanceId, phases: phasesPayload });
+      } else {
+        markSaved(decisionProfileId);
+      }
+    },
+    AUTOSAVE_DEBOUNCE_MS,
+  );
+  debouncedSaveRef.current = () => debouncedSave.isPending();
+
+  const updatePhase = (updates: Partial<PhaseDefinition>) => {
+    setPhase((prev) => {
+      if (!prev) {
+        return prev;
+      }
+      const updated = { ...prev, ...updates };
+      debouncedSave(updated);
+      return updated;
+    });
+  };
+
+  const updateRules = (updates: Partial<PhaseRules>) => {
+    if (!phase) {
+      return;
+    }
+    const newRules = { ...phase.rules, ...updates };
+    updatePhase({ rules: newRules });
+
+    // Optimistically update getInstance cache so useNavigationConfig reacts
+    utils.decision.getInstance.setData({ instanceId }, (old) => {
+      if (!old?.instanceData?.phases) {
+        return old;
+      }
+      return {
+        ...old,
+        instanceData: {
+          ...old.instanceData,
+          phases: old.instanceData.phases.map((p) =>
+            p.phaseId === phaseId ? { ...p, rules: newRules } : p,
+          ),
+        },
+      };
+    });
+  };
+
+  // Delete phase
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const confirmDelete = () => {
+    setSaveStatus(decisionProfileId, 'saving');
+    const remainingPhases = allPhases
+      .filter((p) => p.id !== phaseId)
+      .map((p) => ({
+        phaseId: p.id,
+        name: p.name,
+        description: p.description,
+        headline: p.headline,
+        additionalInfo: p.additionalInfo,
+        startDate: p.startDate,
+        endDate: p.endDate,
+        rules: p.rules,
+      }));
+
+    setInstanceData(decisionProfileId, { phases: remainingPhases });
+
+    if (isDraft) {
+      updateInstance.mutate(
+        { instanceId, phases: remainingPhases },
+        {
+          onSuccess: () => {
+            onDelete();
+          },
+        },
+      );
+    } else {
+      markSaved(decisionProfileId);
+      onDelete();
+    }
+  };
+
+  // Validation
+  const [touchedFields, setTouchedFields] = useState<Set<string>>(new Set());
+  const markTouched = (field: string) => {
+    setTouchedFields((prev) => new Set(prev).add(field));
+  };
+
+  const getErrors = () => {
+    if (!phase) {
+      return {};
+    }
+    const errors: Record<string, string> = {};
+    if (!phase.name?.trim()) {
+      errors.name = t('Phase name is required');
+    }
+    if (!phase.headline?.trim()) {
+      errors.headline = t('Headline is required');
+    }
+    if (!phase.description?.trim()) {
+      errors.description = t('Description is required');
+    }
+    if (!phase.endDate) {
+      errors.endDate = t('End date is required');
+    }
+    if (phase.startDate && phase.endDate) {
+      const startPart = phase.startDate.split('T')[0] ?? '';
+      const endPart = phase.endDate.split('T')[0] ?? '';
+      if (endPart.localeCompare(startPart) < 0) {
+        errors.endDate = t('End date must be on or after the start date');
+      }
+    }
+    return errors;
+  };
+
+  const errors = getErrors();
+  const getErrorMessage = (field: string) =>
+    touchedFields.has(field) ? errors[field] : undefined;
+
+  // Date helpers
+  const safeParseDateString = (dateStr: string | undefined) => {
+    if (!dateStr) {
+      return undefined;
+    }
+    try {
+      const datePart = dateStr.split('T')[0];
+      return datePart ? parseDate(datePart) : undefined;
+    } catch {
+      return undefined;
+    }
+  };
+
+  const formatDateValue = (date: {
+    year: number;
+    month: number;
+    day: number;
+  }) => {
+    return new Date(date.year, date.month - 1, date.day).toISOString();
+  };
+
+  if (!phase) {
+    return null;
+  }
+
+  return (
+    <div className="mx-auto w-full space-y-4 p-4 [scrollbar-gutter:stable] md:max-w-160 md:p-8">
+      <div className="flex items-center justify-between">
+        <Header2 className="font-serif text-title-sm">
+          {phase.name || t('Phases')}
+        </Header2>
+        <SaveStatusIndicator
+          status={saveState.status}
+          savedAt={saveState.savedAt}
+        />
+      </div>
+
+      <div className="space-y-4">
+        <TextField
+          label={t('Phase name')}
+          isRequired
+          value={phase.name ?? ''}
+          onChange={(value) => updatePhase({ name: value })}
+          onBlur={() => markTouched('name')}
+          errorMessage={getErrorMessage('name')}
+        />
+        <TextField
+          label={t('Headline')}
+          isRequired
+          value={phase.headline ?? ''}
+          onChange={(value) => updatePhase({ headline: value })}
+          onBlur={() => markTouched('headline')}
+          errorMessage={getErrorMessage('headline')}
+          description={t('This text appears as the header of the page.')}
+        />
+        <TextField
+          label={t('Description')}
+          isRequired
+          useTextArea
+          value={phase.description ?? ''}
+          onChange={(value) => updatePhase({ description: value })}
+          onBlur={() => markTouched('description')}
+          errorMessage={getErrorMessage('description')}
+          textareaProps={{ rows: 3 }}
+          description={t(
+            'This text appears below the headline on the phase page.',
+          )}
+        />
+        <div className="space-y-2">
+          <label className="block text-sm">{t('Additional information')}</label>
+          <RichTextEditorWithToolbar
+            content={phase.additionalInfo ?? ''}
+            onChange={(content) => updatePhase({ additionalInfo: content })}
+            toolbarPosition="bottom"
+            className="rounded-md border border-border"
+            editorClassName="min-h-24 p-3"
+          />
+          <p className="text-sm text-neutral-gray4">
+            {t(
+              'Any additional information will appear in a modal titled "About the process"',
+            )}
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-4">
+          <div className="flex-1">
+            <DatePicker
+              label={t('Start date')}
+              value={safeParseDateString(phase.startDate)}
+              maxValue={safeParseDateString(phase.endDate)}
+              onChange={(date) =>
+                updatePhase({ startDate: formatDateValue(date) })
+              }
+            />
+          </div>
+          <div className="flex-1" onBlur={() => markTouched('endDate')}>
+            <DatePicker
+              label={t('End date')}
+              isRequired
+              value={safeParseDateString(phase.endDate)}
+              minValue={safeParseDateString(phase.startDate)}
+              onChange={(date) => {
+                updatePhase({ endDate: formatDateValue(date) });
+                markTouched('endDate');
+              }}
+              errorMessage={getErrorMessage('endDate')}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Phase controls */}
+      <div className="space-y-6 rounded-lg border p-4">
+        <ToggleRow label={t('Enable proposal submission')}>
+          <ToggleButton
+            isSelected={phase.rules?.proposals?.submit ?? false}
+            onChange={(val) =>
+              updateRules({
+                proposals: { ...phase.rules?.proposals, submit: val },
+              })
+            }
+            size="small"
+          />
+        </ToggleRow>
+        <ToggleRow label={t('Enable proposal editing')}>
+          <ToggleButton
+            isSelected={phase.rules?.proposals?.edit ?? false}
+            onChange={(val) =>
+              updateRules({
+                proposals: { ...phase.rules?.proposals, edit: val },
+              })
+            }
+            size="small"
+          />
+        </ToggleRow>
+        <ToggleRow label={t('Enable proposal review')}>
+          <ToggleButton
+            isSelected={phase.rules?.proposals?.review ?? false}
+            onChange={(val) =>
+              updateRules({
+                proposals: { ...phase.rules?.proposals, review: val },
+              })
+            }
+            size="small"
+          />
+        </ToggleRow>
+        <ToggleRow label={t('Enable voting')}>
+          <ToggleButton
+            isSelected={phase.rules?.voting?.submit ?? false}
+            onChange={(val) =>
+              updateRules({
+                voting: { ...phase.rules?.voting, submit: val },
+              })
+            }
+            size="small"
+          />
+        </ToggleRow>
+      </div>
+
+      {/* Delete */}
+      <div className="border-t pt-4">
+        <Button
+          color="secondary"
+          className="text-functional-red"
+          onPress={() => setShowDeleteModal(true)}
+        >
+          <LuTrash2 className="size-4" />
+          {t('Delete phase')}
+        </Button>
+      </div>
+
+      <Modal
+        isDismissable
+        isOpen={showDeleteModal}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowDeleteModal(false);
+          }
+        }}
+      >
+        <ModalHeader>{t('Delete phase')}</ModalHeader>
+        <ModalBody>
+          <p>
+            {t(
+              'Are you sure you want to delete this phase? This action cannot be undone.',
+            )}
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            color="secondary"
+            className="w-full sm:w-fit"
+            onPress={() => setShowDeleteModal(false)}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            color="destructive"
+            className="w-full sm:w-fit"
+            onPress={confirmDelete}
+          >
+            {t('Delete')}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+}
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhaseDetailSection.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhaseDetailSection.tsx
new file mode 100644
index 000000000..7a8b0c2d5
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhaseDetailSection.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import { Skeleton } from '@op/ui/Skeleton';
+import { Suspense, useEffect, useState } from 'react';
+
+import type { SectionProps } from '../../contentRegistry';
+import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
+import { PhaseDetailPage } from './PhaseDetailPage';
+
+function PhaseDetailSkeleton() {
+  return (
+    <div className="mx-auto w-full max-w-160 space-y-4 p-4 md:p-8">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-7 w-32" />
+        <Skeleton className="h-5 w-20" />
+      </div>
+      <div className="space-y-4">
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-20 w-full" />
+        <Skeleton className="h-32 w-full" />
+        <div className="flex gap-4">
+          <Skeleton className="h-10 flex-1" />
+          <Skeleton className="h-10 flex-1" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function PhaseDetailSection(props: SectionProps) {
+  const [hasHydrated, setHasHydrated] = useState(() =>
+    useProcessBuilderStore.persist.hasHydrated(),
+  );
+
+  useEffect(() => {
+    const unsubscribe = useProcessBuilderStore.persist.onFinishHydration(() => {
+      setHasHydrated(true);
+    });
+
+    void useProcessBuilderStore.persist.rehydrate();
+
+    return unsubscribe;
+  }, []);
+
+  if (!hasHydrated) {
+    return <PhaseDetailSkeleton />;
+  }
+
+  return (
+    <Suspense fallback={<PhaseDetailSkeleton />}>
+      <PhaseDetailPage {...props} />
+    </Suspense>
+  );
+}
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
index 586bc221a..49e9a3b0c 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
@@ -1,44 +1,23 @@
 'use client';
 
-import { parseDate } from '@internationalized/date';
 import { trpc } from '@op/api/client';
-import { ProcessStatus } from '@op/api/encoders';
-import type { PhaseDefinition, PhaseRules } from '@op/api/encoders';
+import { type PhaseDefinition, ProcessStatus } from '@op/api/encoders';
 import { useDebouncedCallback } from '@op/hooks';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionHeader,
-  AccordionIndicator,
-  AccordionItem,
-  AccordionTrigger,
-} from '@op/ui/Accordion';
-import { AutoSizeInput } from '@op/ui/AutoSizeInput';
 import { Button } from '@op/ui/Button';
-import { DatePicker } from '@op/ui/DatePicker';
-import type { Key } from '@op/ui/RAC';
-import { DisclosureStateContext } from '@op/ui/RAC';
+import { Header2 } from '@op/ui/Header';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@op/ui/Modal';
 import { DragHandle, Sortable } from '@op/ui/Sortable';
-import { TextField } from '@op/ui/TextField';
-import { ToggleButton } from '@op/ui/ToggleButton';
 import { cn } from '@op/ui/utils';
-import { use, useEffect, useRef, useState } from 'react';
-import {
-  LuChevronRight,
-  LuCircleAlert,
-  LuGripVertical,
-  LuPlus,
-  LuTrash2,
-} from 'react-icons/lu';
+import { useQueryState } from 'nuqs';
+import { useRef, useState } from 'react';
+import { LuCheck, LuGripVertical, LuPlus, LuTrash2 } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
 
-import { ConfirmDeleteModal } from '@/components/ConfirmDeleteModal';
-import { RichTextEditorWithToolbar } from '@/components/RichTextEditor/RichTextEditorWithToolbar';
-import { SaveStatusIndicator } from '@/components/decisions/ProcessBuilder/components/SaveStatusIndicator';
-import { ToggleRow } from '@/components/decisions/ProcessBuilder/components/ToggleRow';
-import type { SectionProps } from '@/components/decisions/ProcessBuilder/contentRegistry';
-import { useProcessBuilderStore } from '@/components/decisions/ProcessBuilder/stores/useProcessBuilderStore';
+import { SaveStatusIndicator } from '../../components/SaveStatusIndicator';
+import type { SectionProps } from '../../contentRegistry';
+import { phaseToSectionId } from '../../navigationConfig';
+import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
 
 const AUTOSAVE_DEBOUNCE_MS = 1000;
 
@@ -51,7 +30,6 @@ export function PhasesSectionContent({
   const templatePhases = instance.process?.processSchema?.phases;
   const isDraft = instance.status === ProcessStatus.DRAFT;
 
-  // Store: used as a localStorage buffer for non-draft edits only
   const storePhases = useProcessBuilderStore(
     (s) => s.instances[decisionProfileId]?.phases,
   );
@@ -62,8 +40,6 @@ export function PhasesSectionContent({
     s.getSaveState(decisionProfileId),
   );
 
-  // Non-draft: prefer store (localStorage buffer) over API data.
-  // Draft: use API data (query cache kept fresh via onSettled invalidation).
   const initialPhases: PhaseDefinition[] = (() => {
     const source =
       !isDraft && storePhases?.length ? storePhases : instancePhases;
@@ -84,6 +60,8 @@ export function PhasesSectionContent({
   })();
   const [phases, setPhases] = useState<PhaseDefinition[]>(initialPhases);
   const t = useTranslations();
+  const [, setSectionParam] = useQueryState('section', { history: 'push' });
+  const setSection = (sectionId: string) => setSectionParam(sectionId);
 
   const utils = trpc.useUtils();
   const debouncedSaveRef = useRef<() => boolean>(null);
@@ -91,9 +69,6 @@ export function PhasesSectionContent({
     onSuccess: () => markSaved(decisionProfileId),
     onError: () => setSaveStatus(decisionProfileId, 'error'),
     onSettled: () => {
-      // Skip invalidation if another debounced save is pending — that save's
-      // onSettled will reconcile. This prevents a stale refetch from overwriting
-      // optimistic cache updates made between the two saves.
       if (debouncedSaveRef.current?.()) {
         return;
       }
@@ -101,11 +76,8 @@ export function PhasesSectionContent({
     },
   });
 
-  // Debounced save: draft persists to API, non-draft buffers in localStorage.
-  const debouncedSave = useDebouncedCallback((data: PhaseDefinition[]) => {
-    setSaveStatus(decisionProfileId, 'saving');
-
-    const phasesPayload = data.map((phase) => ({
+  const toPayload = (data: PhaseDefinition[]) =>
+    data.map((phase) => ({
       phaseId: phase.id,
       name: phase.name,
       description: phase.description,
@@ -116,7 +88,10 @@ export function PhasesSectionContent({
       rules: phase.rules,
     }));
 
-    // Always update the store so validation stays reactive
+  const debouncedSave = useDebouncedCallback((data: PhaseDefinition[]) => {
+    setSaveStatus(decisionProfileId, 'saving');
+
+    const phasesPayload = toPayload(data);
     setInstanceData(decisionProfileId, { phases: phasesPayload });
 
     if (isDraft) {
@@ -127,7 +102,6 @@ export function PhasesSectionContent({
   }, AUTOSAVE_DEBOUNCE_MS);
   debouncedSaveRef.current = () => debouncedSave.isPending();
 
-  // Update phases and trigger debounced save
   const updatePhases = (
     updater:
       | PhaseDefinition[]
@@ -140,550 +114,177 @@ export function PhasesSectionContent({
     });
   };
 
-  const updatePhase = (phaseId: string, updates: Partial<PhaseDefinition>) => {
-    updatePhases((prev) =>
-      prev.map((phase) =>
-        phase.id === phaseId ? { ...phase, ...updates } : phase,
-      ),
-    );
-  };
-
-  return (
-    <div className="mx-auto w-full space-y-4 p-4 [scrollbar-gutter:stable] md:max-w-160 md:p-8">
-      <div className="flex items-center justify-between">
-        <h2 className="font-serif text-title-sm">{t('Phases')}</h2>
-        <SaveStatusIndicator
-          status={saveState.status}
-          savedAt={saveState.savedAt}
-        />
-      </div>
-      <p className="text-neutral-charcoal">
-        {t('Define the phases of your decision-making process')}
-      </p>
-      <PhaseEditor
-        phases={phases}
-        setPhases={updatePhases}
-        updatePhase={updatePhase}
-        instanceId={instanceId}
-      />
-    </div>
-  );
-}
-
-export const PhaseEditor = ({
-  phases,
-  setPhases,
-  updatePhase,
-  instanceId,
-}: {
-  phases: PhaseDefinition[];
-  setPhases: (phases: PhaseDefinition[]) => void;
-  updatePhase: (phaseId: string, updates: Partial<PhaseDefinition>) => void;
-  instanceId: string;
-}) => {
-  const t = useTranslations();
-
-  // Safely parse a date string (ISO datetime or YYYY-MM-DD) to DateValue
-  const safeParseDateString = (dateStr: string | undefined) => {
-    if (!dateStr) {
-      return undefined;
-    }
-    try {
-      // Handle ISO datetime strings by extracting just the date part
-      const datePart = dateStr.split('T')[0];
-      return datePart ? parseDate(datePart) : undefined;
-    } catch {
-      return undefined;
-    }
-  };
-
-  // Format DateValue to ISO datetime string
-  const formatDateValue = (date: {
-    year: number;
-    month: number;
-    day: number;
-  }) => {
-    return new Date(date.year, date.month - 1, date.day).toISOString();
-  };
-
-  // Validation: track which fields have been blurred per phase
-  const [touchedFields, setTouchedFields] = useState<
-    Record<string, Set<string>>
-  >({});
-
-  const markTouched = (phaseId: string, fieldName: string) => {
-    setTouchedFields((prev) => {
-      const phaseSet = new Set(prev[phaseId]);
-      phaseSet.add(fieldName);
-      return { ...prev, [phaseId]: phaseSet };
-    });
-  };
-
-  // Compare the date portions of two ISO datetime strings.
-  // Returns negative if a < b, 0 if equal, positive if a > b.
-  const compareDateStrings = (a: string, b: string): number => {
-    const dateA = a.split('T')[0] ?? '';
-    const dateB = b.split('T')[0] ?? '';
-    return dateA.localeCompare(dateB);
-  };
-
-  const getPhaseErrors = (phase: PhaseDefinition) => {
-    const errors: Record<string, string> = {};
-    if (!phase.name?.trim()) {
-      errors.name = t('Phase name is required');
-    }
-    if (!phase.headline?.trim()) {
-      errors.headline = t('Headline is required');
-    }
-    if (!phase.description?.trim()) {
-      errors.description = t('Description is required');
-    }
-    if (!phase.endDate) {
-      errors.endDate = t('End date is required');
-    }
-    // Within-phase date validation: end date must be >= start date
-    if (
-      phase.startDate &&
-      phase.endDate &&
-      compareDateStrings(phase.endDate, phase.startDate) < 0
-    ) {
-      errors.endDate = t('End date must be on or after the start date');
-    }
-    return errors;
-  };
-
-  const getErrorMessage = (
-    phaseId: string,
-    field: string,
-    errors: Record<string, string>,
-  ) => {
-    return touchedFields[phaseId]?.has(field) ? errors[field] : undefined;
-  };
-
-  const phaseHasVisibleErrors = (phaseId: string) => {
-    const phase = phases.find((p) => p.id === phaseId);
-    if (!phase) {
-      return false;
-    }
-    const errors = getPhaseErrors(phase);
-    const touched = touchedFields[phaseId];
-    if (!touched) {
-      return false;
-    }
-    return Object.keys(errors).some((field) => touched.has(field));
-  };
-
-  const [expandedKeys, setExpandedKeys] = useState<Set<Key>>(new Set());
-  const [autoFocusPhaseId, setAutoFocusPhaseId] = useState<string | null>(null);
-  const [phaseToDelete, setPhaseToDelete] = useState<string | null>(null);
-
   const addPhase = () => {
     const newPhase: PhaseDefinition = {
       id: crypto.randomUUID().slice(0, 8),
       name: t('New phase'),
       rules: {},
     };
-    setPhases([...phases, newPhase]);
-    setExpandedKeys((prev) => new Set([...prev, newPhase.id]));
-    setAutoFocusPhaseId(newPhase.id);
+    const updated = [...phases, newPhase];
+    setPhases(updated);
+    // Immediately update store so navigation sees the new phase
+    setInstanceData(decisionProfileId, { phases: toPayload(updated) });
+    debouncedSave(updated);
+    setSection(phaseToSectionId(newPhase.id));
   };
 
+  const [phaseToDelete, setPhaseToDelete] = useState<string | null>(null);
+
   const confirmRemovePhase = () => {
     if (!phaseToDelete) {
       return;
     }
-    setPhases(phases.filter((p) => p.id !== phaseToDelete));
-    setTouchedFields((prev) => {
-      const next = { ...prev };
-      delete next[phaseToDelete];
-      return next;
-    });
+    const updated = phases.filter((p) => p.id !== phaseToDelete);
+    setPhases(updated);
+    // Immediately update store so navigation reflects the removal
+    setInstanceData(decisionProfileId, { phases: toPayload(updated) });
+    debouncedSave(updated);
     setPhaseToDelete(null);
   };
 
-  if (phases.length === 0) {
-    return (
-      <div className="space-y-4">
-        <div className="rounded-lg border border-dashed border-neutral-gray3 p-8 text-center">
-          <p className="text-neutral-gray4">{t('No phases defined')}</p>
-        </div>
-        <Button
-          color="ghost"
-          className="text-primary-teal hover:text-primary-tealBlack"
-          onPress={addPhase}
-        >
-          <LuPlus className="size-4" />
-          {t('Add phase')}
-        </Button>
-      </div>
+  /** Check if a phase has its required fields filled in */
+  const isPhaseConfigured = (phase: PhaseDefinition) => {
+    return !!(
+      phase.name?.trim() &&
+      phase.headline?.trim() &&
+      phase.description?.trim() &&
+      phase.endDate
     );
-  }
+  };
 
   return (
-    <div className="space-y-4">
-      <Accordion
-        allowsMultipleExpanded
-        variant="unstyled"
-        expandedKeys={expandedKeys}
-        onExpandedChange={setExpandedKeys}
-      >
-        <Sortable
-          items={phases}
-          onChange={setPhases}
-          dragTrigger="handle"
-          getItemLabel={(phase) => phase.name}
-          className="gap-2"
-          renderDragPreview={(items) => (
-            <PhaseDragPreview name={items[0]?.name} />
-          )}
-          renderDropIndicator={PhaseDropIndicator}
-        >
-          {(phase, { dragHandleProps, isDragging }) => {
-            const errors = getPhaseErrors(phase);
-            return (
-              <AccordionItem
-                id={phase.id}
-                className={cn(
-                  'rounded-lg border bg-white',
-                  isDragging && 'opacity-50',
-                )}
-              >
-                <AccordionHeader className="flex items-center gap-2 px-3 py-2">
+    <div className="mx-auto w-full space-y-4 p-4 [scrollbar-gutter:stable] md:max-w-160 md:p-8">
+      <div className="flex items-center justify-between">
+        <Header2 className="font-serif text-title-sm">{t('Phases')}</Header2>
+        <SaveStatusIndicator
+          status={saveState.status}
+          savedAt={saveState.savedAt}
+        />
+      </div>
+      <p className="text-neutral-charcoal">
+        {t('Define the phases of your decision-making process')}
+      </p>
+
+      {phases.length === 0 ? (
+        <div className="space-y-4">
+          <div className="rounded-lg border border-dashed border-neutral-gray3 p-8 text-center">
+            <p className="text-neutral-gray4">{t('No phases defined')}</p>
+          </div>
+          <Button
+            color="ghost"
+            className="text-primary-teal hover:text-primary-tealBlack"
+            onPress={addPhase}
+          >
+            <LuPlus className="size-4" />
+            {t('Add phase')}
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <Sortable
+            items={phases}
+            onChange={updatePhases}
+            dragTrigger="handle"
+            getItemLabel={(phase) => phase.name}
+            className="gap-2"
+            renderDragPreview={(items) => (
+              <PhaseDragPreview name={items[0]?.name} />
+            )}
+            renderDropIndicator={PhaseDropIndicator}
+          >
+            {(phase, { dragHandleProps, isDragging }) => {
+              const configured = isPhaseConfigured(phase);
+              return (
+                <div
+                  className={cn(
+                    'flex items-center gap-2 rounded-lg border bg-white px-3 py-3',
+                    isDragging && 'opacity-50',
+                  )}
+                >
                   <DragHandle {...dragHandleProps} />
-                  <AccordionTrigger className="flex cursor-pointer items-center">
-                    <AccordionIndicator />
-                  </AccordionTrigger>
-                  <AccordionTitleInput
-                    value={phase.name}
-                    onChange={(name) => updatePhase(phase.id, { name })}
-                    onBlur={() => markTouched(phase.id, 'name')}
-                    hasError={!!getErrorMessage(phase.id, 'name', errors)}
-                    aria-label={t('Phase name')}
-                    autoFocus={autoFocusPhaseId === phase.id}
-                    onAutoFocused={() => setAutoFocusPhaseId(null)}
-                  />
-                  {phaseHasVisibleErrors(phase.id) && <PhaseErrorIndicator />}
-                </AccordionHeader>
-                <AccordionContent>
-                  <hr />
-                  <div className="space-y-4 p-4">
-                    <TextField
-                      label={t('Headline')}
-                      isRequired
-                      value={phase.headline ?? ''}
-                      onChange={(value) =>
-                        updatePhase(phase.id, { headline: value })
-                      }
-                      onBlur={() => markTouched(phase.id, 'headline')}
-                      errorMessage={getErrorMessage(
-                        phase.id,
-                        'headline',
-                        errors,
-                      )}
-                      description={t(
-                        'This text appears as the header of the page.',
+                  <div className="flex flex-1 items-center justify-between gap-3">
+                    <div className="flex-1">
+                      <p className="font-serif text-title-sm">{phase.name}</p>
+                      {configured ? (
+                        <span className="flex items-center gap-1 text-sm text-primary-teal">
+                          <LuCheck className="size-3" />
+                          {t('Configured')}
+                        </span>
+                      ) : (
+                        <span className="text-sm text-neutral-gray4">
+                          {t('Not configured yet')}
+                        </span>
                       )}
-                    />
-                    <TextField
-                      label={t('Description')}
-                      isRequired
-                      useTextArea
-                      value={phase.description ?? ''}
-                      onChange={(value) =>
-                        updatePhase(phase.id, { description: value })
-                      }
-                      onBlur={() => markTouched(phase.id, 'description')}
-                      errorMessage={getErrorMessage(
-                        phase.id,
-                        'description',
-                        errors,
-                      )}
-                      textareaProps={{ rows: 3 }}
-                      description={t(
-                        'This text appears below the headline on the phase page.',
-                      )}
-                    />
-                    <div className="space-y-2">
-                      <label className="block text-sm">
-                        {t('Additional information')}
-                      </label>
-                      <RichTextEditorWithToolbar
-                        content={phase.additionalInfo ?? ''}
-                        onChange={(content) =>
-                          updatePhase(phase.id, { additionalInfo: content })
-                        }
-                        toolbarPosition="bottom"
-                        className="rounded-md border border-border"
-                        editorClassName="min-h-24 p-3"
-                      />
-                      <p className="text-sm text-neutral-gray4">
-                        {t(
-                          'Any additional information will appear in a modal titled "About the process"',
-                        )}
-                      </p>
                     </div>
-                    <div className="flex flex-wrap gap-4">
-                      <div className="flex-1">
-                        <DatePicker
-                          label={t('Start date')}
-                          value={safeParseDateString(phase.startDate)}
-                          maxValue={safeParseDateString(phase.endDate)}
-                          onChange={(date) =>
-                            updatePhase(phase.id, {
-                              startDate: formatDateValue(date),
-                            })
-                          }
-                        />
-                      </div>
-                      <div
-                        className="flex-1"
-                        onBlur={() => markTouched(phase.id, 'endDate')}
+                    <div className="flex shrink-0 items-center gap-3">
+                      <Button
+                        color="secondary"
+                        size="small"
+                        onPress={() => setSection(phaseToSectionId(phase.id))}
                       >
-                        <DatePicker
-                          label={t('End date')}
-                          isRequired
-                          value={safeParseDateString(phase.endDate)}
-                          minValue={safeParseDateString(phase.startDate)}
-                          onChange={(date) => {
-                            updatePhase(phase.id, {
-                              endDate: formatDateValue(date),
-                            });
-                            markTouched(phase.id, 'endDate');
-                          }}
-                          errorMessage={getErrorMessage(
-                            phase.id,
-                            'endDate',
-                            errors,
-                          )}
-                        />
-                      </div>
+                        {t('Configure')}
+                      </Button>
+                      <Button
+                        className="cursor-pointer p-1 text-neutral-gray4 hover:text-functional-red"
+                        onPress={() => setPhaseToDelete(phase.id)}
+                        aria-label={t('Delete phase?')}
+                      >
+                        <LuTrash2 className="size-4" />
+                      </Button>
                     </div>
                   </div>
-                  <PhaseControls
-                    phase={phase}
-                    instanceId={instanceId}
-                    onUpdate={(updates) => updatePhase(phase.id, updates)}
-                  />
-                  <div className="border-t p-4">
-                    <Button
-                      color="secondary"
-                      className="text-functional-red"
-                      onPress={() => setPhaseToDelete(phase.id)}
-                      isDisabled={phases.length <= 1}
-                    >
-                      <LuTrash2 className="size-4" />
-                      {t('Delete phase')}
-                    </Button>
-                  </div>
-                </AccordionContent>
-              </AccordionItem>
-            );
-          }}
-        </Sortable>
-      </Accordion>
-      <Button
-        color="secondary"
-        className="w-full text-primary-teal hover:text-primary-tealBlack"
-        onPress={addPhase}
-      >
-        <LuPlus className="size-4" />
-        {t('Add phase')}
-      </Button>
-      <ConfirmDeleteModal
-        isOpen={phaseToDelete !== null}
-        title={t('Delete phase')}
-        message={t(
-          'Are you sure you want to delete this phase? This action cannot be undone.',
-        )}
-        onConfirm={confirmRemovePhase}
-        onCancel={() => setPhaseToDelete(null)}
-      />
-    </div>
-  );
-};
-
-/** Controls for configuring phase behavior (proposals, voting) */
-const PhaseControls = ({
-  phase,
-  instanceId,
-  onUpdate,
-}: {
-  phase: PhaseDefinition;
-  instanceId: string;
-  onUpdate: (updates: Partial<PhaseDefinition>) => void;
-}) => {
-  const t = useTranslations();
-  const utils = trpc.useUtils();
-
-  const updateRules = (updates: Partial<PhaseRules>) => {
-    const newRules = { ...phase.rules, ...updates };
-    onUpdate({ rules: newRules });
-
-    // Optimistically update getInstance cache so useNavigationConfig reacts instantly
-    utils.decision.getInstance.setData({ instanceId }, (old) => {
-      if (!old?.instanceData?.phases) {
-        return old;
-      }
-      return {
-        ...old,
-        instanceData: {
-          ...old.instanceData,
-          phases: old.instanceData.phases.map((p) =>
-            p.phaseId === phase.id ? { ...p, rules: newRules } : p,
-          ),
-        },
-      };
-    });
-  };
+                </div>
+              );
+            }}
+          </Sortable>
+          <Button
+            color="secondary"
+            className="w-full text-primary-teal hover:text-primary-tealBlack"
+            onPress={addPhase}
+          >
+            <LuPlus className="size-4" />
+            {t('Add phase')}
+          </Button>
+        </div>
+      )}
 
-  return (
-    <div className="space-y-6 p-4">
-      <ToggleRow label={t('Enable proposal submission')}>
-        <ToggleButton
-          isSelected={phase.rules?.proposals?.submit ?? false}
-          onChange={(val) =>
-            updateRules({
-              proposals: {
-                ...phase.rules?.proposals,
-                submit: val,
-              },
-            })
-          }
-          size="small"
-        />
-      </ToggleRow>
-      <ToggleRow label={t('Enable proposal editing')}>
-        <ToggleButton
-          isSelected={phase.rules?.proposals?.edit ?? false}
-          onChange={(val) =>
-            updateRules({
-              proposals: {
-                ...phase.rules?.proposals,
-                edit: val,
-              },
-            })
-          }
-          size="small"
-        />
-      </ToggleRow>
-      <ToggleRow label={t('Enable proposal review')}>
-        <ToggleButton
-          isSelected={phase.rules?.proposals?.review ?? false}
-          onChange={(val) =>
-            updateRules({
-              proposals: {
-                ...phase.rules?.proposals,
-                review: val,
-              },
-            })
-          }
-          size="small"
-        />
-      </ToggleRow>
-      <ToggleRow label={t('Enable voting')}>
-        <ToggleButton
-          isSelected={phase.rules?.voting?.submit ?? false}
-          onChange={(val) =>
-            updateRules({
-              voting: {
-                ...phase.rules?.voting,
-                submit: val,
-              },
-            })
+      <Modal
+        isDismissable
+        isOpen={phaseToDelete !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPhaseToDelete(null);
           }
-          size="small"
-        />
-      </ToggleRow>
-    </div>
-  );
-};
-
-/** Input that is only editable when the accordion is expanded */
-const AccordionTitleInput = ({
-  value,
-  onChange,
-  onBlur,
-  hasError,
-  autoFocus,
-  onAutoFocused,
-  'aria-label': ariaLabel,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  onBlur?: () => void;
-  hasError?: boolean;
-  autoFocus?: boolean;
-  onAutoFocused?: () => void;
-  'aria-label'?: string;
-}) => {
-  const t = useTranslations();
-  const state = use(DisclosureStateContext);
-  const isExpanded = state?.isExpanded ?? false;
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (autoFocus && isExpanded && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-      onAutoFocused?.();
-    }
-  }, [autoFocus, isExpanded, onAutoFocused]);
-
-  if (!isExpanded) {
-    return (
-      <button
-        type="button"
-        className="w-full cursor-pointer rounded border border-transparent px-2 py-1 text-left font-serif text-title-sm"
-        onClick={() => state?.expand()}
+        }}
       >
-        {value}
-      </button>
-    );
-  }
-
-  return (
-    <div className="flex grow items-center justify-between gap-2">
-      <AutoSizeInput
-        inputRef={inputRef}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        className={cn(
-          'rounded border px-2 py-1 font-serif text-title-sm focus-within:bg-white',
-          hasError
-            ? 'border-functional-red bg-white'
-            : 'border-neutral-gray1 bg-neutral-gray1 focus-within:border-neutral-gray3',
-        )}
-        aria-label={ariaLabel ?? ''}
-      />
-      {hasError && (
-        <p className="text-functional-red">
-          {t('Add a label for this phase.')}
-        </p>
-      )}
+        <ModalHeader>{t('Delete phase?')}</ModalHeader>
+        <ModalBody>
+          <p>
+            {t(
+              'Are you sure you want to delete this phase? This action cannot be undone.',
+            )}
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            color="secondary"
+            className="w-full sm:w-fit"
+            onPress={() => setPhaseToDelete(null)}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            color="destructive"
+            className="w-full sm:w-fit"
+            onPress={confirmRemovePhase}
+          >
+            {t('Delete')}
+          </Button>
+        </ModalFooter>
+      </Modal>
     </div>
   );
-};
-
-/** Warning icon shown on collapsed accordion headers when a phase has validation errors */
-const PhaseErrorIndicator = () => {
-  const t = useTranslations();
-  const state = use(DisclosureStateContext);
-  const isExpanded = state?.isExpanded ?? false;
-
-  if (isExpanded) {
-    return null;
-  }
-
-  return (
-    <span
-      className="text-functional-red"
-      aria-label={t('This phase has validation errors')}
-    >
-      <LuCircleAlert className="size-4" />
-    </span>
-  );
-};
+}
 
 /** Element to show when a phase is being dragged */
 const PhaseDragPreview = ({ name }: { name?: string }) => {
@@ -692,7 +293,6 @@ const PhaseDragPreview = ({ name }: { name?: string }) => {
       <div className="p-1">
         <LuGripVertical size={16} />
       </div>
-      <LuChevronRight size={16} />
       <p className="px-2 py-1 font-serif text-title-sm">{name}</p>
     </div>
   );