diff --git a/.gitignore b/.gitignore
index e52d566..e580969 100644
--- a/.gitignore
+++ b/.gitignore
@@ -97,5 +97,8 @@ docs/~*
 files/~*
 output/*
 SOA Workbench Wishlist.docx
+NCT01750580_limited.json
+CLAUDE.md
+edit-column-collapse.html
 
 # End of file
diff --git a/src/soa_builder/web/app.py b/src/soa_builder/web/app.py
index 667a1ff..56bf8a1 100644
--- a/src/soa_builder/web/app.py
+++ b/src/soa_builder/web/app.py
@@ -56,6 +56,7 @@
     _migrate_timing_add_member_of_timeline,
     _migrate_instances_add_member_of_timeline,
     _migrate_matrix_cells_add_instance_id,
+    _migrate_activity_concept_add_href,
 )
 from .routers import activities as activities_router
 from .routers import arms as arms_router
@@ -150,6 +151,7 @@ def _configure_logging():
 
 
 # Database migration steps
+_migrate_activity_concept_add_href()
 _migrate_matrix_cells_add_instance_id()
 _migrate_instances_add_member_of_timeline()
 _migrate_timing_add_member_of_timeline()
@@ -1961,6 +1963,118 @@ def _matrix_arrays(soa_id: int):
     return instance_headers, rows
 
 
+def _fetch_enriched_instances(soa_id: int):
+    """Return enriched instance data with all header information for XLSX export."""
+    conn = _connect()
+    cur = conn.cursor()
+    cur.execute(
+        """
+        SELECT i.id,i.name,i.instance_uid,i.label,i.member_of_timeline,
+        v.name AS encounter_name,v.label AS encounter_label,
+        e.name AS epoch_name,e.epoch_label as epoch_label,
+        tm.window_label,tm.label AS timing_label,tm.name AS timing_name,tm.value AS study_day
+        FROM instances i
+        LEFT JOIN visit v ON v.encounter_uid = i.encounter_uid AND v.soa_id = i.soa_id
+        LEFT JOIN epoch e ON e.epoch_uid = i.epoch_uid AND e.soa_id = i.soa_id
+        LEFT JOIN timing tm ON tm.id = v.scheduledAtId AND tm.soa_id = v.soa_id
+        WHERE i.soa_id=?
+        ORDER BY COALESCE(i.member_of_timeline, 'zzz'), LENGTH(i.instance_uid), i.instance_uid
+        """,
+        (soa_id,),
+    )
+    instances = [
+        {
+            "id": r[0],
+            "name": r[1],
+            "instance_uid": r[2],
+            "label": r[3],
+            "member_of_timeline": r[4],
+            "encounter_name": r[5],
+            "encounter_label": r[6],
+            "epoch_name": r[7],
+            "epoch_label": r[8],
+            "window_label": r[9],
+            "timing_label": r[10],
+            "timing_name": r[11],
+            "study_day": r[12],
+        }
+        for r in cur.fetchall()
+    ]
+    conn.close()
+    return instances
+
+
+def _add_header_rows_to_worksheet(worksheet, enriched_instances):
+    """Add header rows to a worksheet with instance metadata."""
+    # Insert 6 rows at the top for header rows
+    worksheet.insert_rows(1, 6)
+
+    # Build header rows
+    # Row 1: Epoch (with merged cells for consecutive same values)
+    worksheet.cell(1, 1, "")
+    worksheet.cell(1, 2, "Epoch:")
+    col_idx = 3
+    epoch_groups = []  # Track (value, start_col, end_col) for merging
+    prev_epoch = None
+    start_col = 3
+    for i, inst in enumerate(enriched_instances):
+        epoch_val = inst.get("epoch_label") or inst.get("epoch_name") or ""
+        if prev_epoch is None:
+            prev_epoch = epoch_val
+            start_col = col_idx
+        elif prev_epoch != epoch_val:
+            epoch_groups.append((prev_epoch, start_col, col_idx - 1))
+            prev_epoch = epoch_val
+            start_col = col_idx
+        col_idx += 1
+    # Add last group
+    if prev_epoch is not None:
+        epoch_groups.append((prev_epoch, start_col, col_idx - 1))
+
+    # Write and merge epoch cells
+    for epoch_val, start, end in epoch_groups:
+        worksheet.cell(1, start, epoch_val)
+        if start != end:
+            worksheet.merge_cells(
+                start_row=1, start_column=start, end_row=1, end_column=end
+            )
+
+    # Row 2: Encounter
+    worksheet.cell(2, 1, "")
+    worksheet.cell(2, 2, "Encounter:")
+    for i, inst in enumerate(enriched_instances):
+        encounter_val = inst.get("encounter_label") or inst.get("encounter_name") or ""
+        worksheet.cell(2, i + 3, encounter_val)
+
+    # Row 3: Instance (ScheduledActivityInstance)
+    worksheet.cell(3, 1, "")
+    worksheet.cell(3, 2, "Instance:")
+    for i, inst in enumerate(enriched_instances):
+        instance_val = inst.get("label") or inst.get("name") or ""
+        worksheet.cell(3, i + 3, instance_val)
+
+    # Row 4: Study Day
+    worksheet.cell(4, 1, "")
+    worksheet.cell(4, 2, "Study Day:")
+    for i, inst in enumerate(enriched_instances):
+        study_day_val = inst.get("study_day") or ""
+        worksheet.cell(4, i + 3, study_day_val)
+
+    # Row 5: Timing
+    worksheet.cell(5, 1, "")
+    worksheet.cell(5, 2, "Timing:")
+    for i, inst in enumerate(enriched_instances):
+        timing_val = inst.get("timing_label") or inst.get("timing_name") or ""
+        worksheet.cell(5, i + 3, timing_val)
+
+    # Row 6: Visit Window
+    worksheet.cell(6, 1, "")
+    worksheet.cell(6, 2, "Visit Window:")
+    for i, inst in enumerate(enriched_instances):
+        window_val = inst.get("window_label") or ""
+        worksheet.cell(6, i + 3, window_val)
+
+
 # API endpoint for creating new Study/SOA
 @app.post("/soa")
 def create_soa(payload: SOACreate):
@@ -2722,13 +2836,108 @@ def export_xlsx(soa_id: int, left: Optional[int] = None, right: Optional[int] =
         except Exception as e:
             # Provide an error sheet to highlight issue rather than failing entire export
             concept_diff_df = pd.DataFrame([[str(e)]], columns=["ConceptDiffError"])
+    # Fetch enriched instances for header rows
+    enriched_instances = _fetch_enriched_instances(soa_id)
+
+    # Fetch timelines
+    conn_tl = _connect()
+    cur_tl = conn_tl.cursor()
+    cur_tl.execute(
+        """
+        SELECT schedule_timeline_uid,name,main_timeline
+        FROM schedule_timelines
+        WHERE soa_id=?
+        ORDER BY main_timeline DESC, name
+        """,
+        (soa_id,),
+    )
+    timelines = [
+        {
+            "schedule_timeline_uid": r[0],
+            "name": r[1],
+            "main_timeline": bool(r[2]),
+        }
+        for r in cur_tl.fetchall()
+    ]
+    conn_tl.close()
+
+    # Group enriched instances by timeline
+    instances_by_timeline = {}
+    for inst in enriched_instances:
+        timeline_key = inst.get("member_of_timeline") or "unassigned"
+        if timeline_key not in instances_by_timeline:
+            instances_by_timeline[timeline_key] = []
+        instances_by_timeline[timeline_key].append(inst)
+
     with pd.ExcelWriter(bio, engine="openpyxl") as writer:
         study_df.to_excel(writer, index=False, sheet_name="Study")
-        df.to_excel(writer, index=False, sheet_name="SoA")
         mapping_df.to_excel(writer, index=False, sheet_name="ConceptMappings")
         audit_df.to_excel(writer, index=False, sheet_name="RollbackAudit")
         if concept_diff_df is not None:
             concept_diff_df.to_excel(writer, index=False, sheet_name="ConceptDiff")
+
+        # Create a worksheet for each timeline
+        if timelines:
+            for timeline in timelines:
+                timeline_uid = timeline["schedule_timeline_uid"]
+                timeline_name = timeline["name"]
+                timeline_instances = instances_by_timeline.get(timeline_uid, [])
+
+                if not timeline_instances:
+                    continue
+
+                # Build matrix data for this timeline
+                cell_lookup = {
+                    (c["instance_id"], c["activity_id"]): c.get("status", "")
+                    for c in cells
+                    if c.get("instance_id") is not None
+                    and c.get("activity_id") is not None
+                }
+
+                # Build instance headers for this timeline
+                instance_headers_tl = [inst["name"] for inst in timeline_instances]
+
+                # Build rows for this timeline
+                rows_tl = []
+                for a in activities:
+                    row = [a["name"]]
+                    for inst in timeline_instances:
+                        row.append(cell_lookup.get((inst["id"], a["id"]), ""))
+                    rows_tl.append(row)
+
+                # Create DataFrame for this timeline
+                df_tl = pd.DataFrame(
+                    rows_tl, columns=["Activity"] + instance_headers_tl
+                )
+
+                # Add concepts columns
+                if len(concepts_strings) == len(df_tl):
+                    df_tl.insert(1, "Concepts", concepts_strings)
+                    df_tl["Concept UIDs"] = concept_titles_strings
+
+                # Sanitize sheet name (max 31 chars, no special chars)
+                sheet_name = f"SoA - {timeline_name}"[:31]
+                sheet_name = (
+                    sheet_name.replace("/", "-")
+                    .replace("\\", "-")
+                    .replace("*", "-")
+                    .replace("?", "-")
+                    .replace(":", "-")
+                    .replace("[", "-")
+                    .replace("]", "-")
+                )
+
+                # Write to Excel
+                df_tl.to_excel(writer, index=False, sheet_name=sheet_name)
+
+                # Add header rows
+                worksheet_tl = writer.sheets[sheet_name]
+                _add_header_rows_to_worksheet(worksheet_tl, timeline_instances)
+        else:
+            # No timelines, create single SoA sheet as before
+            df.to_excel(writer, index=False, sheet_name="SoA")
+            worksheet = writer.sheets["SoA"]
+            _add_header_rows_to_worksheet(worksheet, enriched_instances)
     bio.seek(0)
     # Dynamic filename pattern: studyid_version.xlsx
     # Determine study_id and version context
@@ -3116,9 +3325,6 @@ def delete_activity(soa_id: int, activity_id: int):
     return {"deleted_activity_id": activity_id}
 
 
-# API endpoint for deleting an Epoch    <- moved to routers/epochs.py
-
-
 @app.get("/", response_class=HTMLResponse)
 def ui_index(request: Request):
     """Render home page for the SoA Workbench."""
@@ -3280,38 +3486,6 @@ def ui_update_meta(
     )
 
 
-# Helper to fetch element audit rows with legacy-safe columns   -> Deprecated (Moved to audits.py, audits.html)
-"""
-def _fetch_element_audits(soa_id: int):
-    conn_ea = _connect()
-    cur_ea = conn_ea.cursor()
-    cur_ea.execute("PRAGMA table_info(element_audit)")
-    cols = [row[1] for row in cur_ea.fetchall()]
-    want = [
-        "id",
-        "element_id",
-        "action",
-        "before_json",
-        "after_json",
-        "performed_at",
-    ]
-    available = [c for c in want if c in cols]
-    element_audits = []
-    if available:
-        select_sql = f"SELECT {', '.join(available)} FROM element_audit WHERE soa_id=? ORDER BY id DESC"
-        cur_ea.execute(select_sql, (soa_id,))
-        for r in cur_ea.fetchall():
-            item = {}
-            for i, c in enumerate(available):
-                item[c] = r[i]
-            for k in want:
-                item.setdefault(k, None)
-            element_audits.append(item)
-    conn_ea.close()
-    return element_audits
-"""
-
-
 # UI endpoint for rendering SOA edit page
 @app.get("/ui/soa/{soa_id}/edit", response_class=HTMLResponse)
 def ui_edit(request: Request, soa_id: int):
@@ -3582,51 +3756,16 @@ def ui_edit(request: Request, soa_id: int):
     cur_inst = conn_inst.cursor()
     cur_inst.execute(
         """
-        SELECT i.id,
-               i.name,
-               i.instance_uid,
-               i.label,
-               i.member_of_timeline,
-               (SELECT t.name
-                  FROM schedule_timelines t
-                 WHERE t.schedule_timeline_uid = i.member_of_timeline
-                   AND t.soa_id = i.soa_id) AS timeline_name,
-               (SELECT v.name
-                  FROM visit v
-                 WHERE v.encounter_uid = i.encounter_uid
-                   AND v.soa_id = i.soa_id) AS encounter_name,
-               (SELECT e.name
-                  FROM epoch e
-                 WHERE e.epoch_uid = i.epoch_uid
-                   AND e.soa_id = i.soa_id) AS epoch_name,
-               (SELECT tm.window_label
-                  FROM visit v
-                  JOIN timing tm
-                    ON tm.id = v.scheduledAtId
-                   AND tm.soa_id = v.soa_id
-                 WHERE v.encounter_uid = i.encounter_uid
-                   AND v.soa_id = i.soa_id
-                 LIMIT 1) AS window_label,
-                 (SELECT tm.label
-                  FROM visit v
-                  JOIN timing tm
-                    ON tm.id = v.scheduledAtId
-                   AND tm.soa_id = v.soa_id
-                 WHERE v.encounter_uid = i.encounter_uid
-                   AND v.soa_id = i.soa_id
-                 LIMIT 1) AS timing_label,
-                 (SELECT tm.value
-                  FROM visit v
-                  JOIN timing tm
-                    ON tm.id = v.scheduledAtId
-                   AND tm.soa_id = v.soa_id
-                 WHERE v.encounter_uid = i.encounter_uid
-                   AND v.soa_id = i.soa_id
-                 LIMIT 1) AS study_day
+        SELECT i.id,i.name,i.instance_uid,i.label,i.member_of_timeline,st.name AS timeline_name,st.label AS timeline_label,
+        v.name AS encounter_name,v.label AS encounter_label,e.name AS epoch_name,e.epoch_label as epoch_label,tm.window_label,tm.label AS timing_label,tm.name AS timing_name,tm.value AS study_day
         FROM instances i
-        WHERE soa_id=?
-        ORDER BY member_of_timeline, length(instance_uid), instance_uid
-        """,
+        LEFT JOIN schedule_timelines st ON st.schedule_timeline_uid = i.member_of_timeline AND st.soa_id = i.soa_id
+        LEFT JOIN visit v ON v.encounter_uid = i.encounter_uid AND v.soa_id = i.soa_id
+        LEFT JOIN epoch e ON e.epoch_uid = i.epoch_uid AND e.soa_id = i.soa_id
+        LEFT JOIN timing tm ON tm.id = v.scheduledAtId AND tm.soa_id = v.soa_id
+        WHERE i.soa_id=?
+        ORDER BY COALESCE(i.member_of_timeline, 'zzz'), LENGTH(i.instance_uid), i.instance_uid
+            """,
         (soa_id,),
     )
     instances = [
@@ -3637,11 +3776,15 @@ def ui_edit(request: Request, soa_id: int):
             "label": r[3],
             "member_of_timeline": r[4],
             "timeline_name": r[5],
-            "encounter_name": r[6],
-            "epoch_name": r[7],
-            "window_label": r[8],
-            "timing_label": r[9],
-            "study_day": iso_duration_to_days(r[10]),
+            "timeline_label": r[6],
+            "encounter_name": r[7],
+            "encounter_label": r[8],
+            "epoch_name": r[9],
+            "epoch_label": r[10],
+            "window_label": r[11],
+            "timing_label": r[12],
+            "timing_name": r[13],
+            "study_day": iso_duration_to_days(r[14]),
         }
         for r in cur_inst.fetchall()
     ]
diff --git a/src/soa_builder/web/initialize_database.py b/src/soa_builder/web/initialize_database.py
index aa178f0..2e7e08f 100644
--- a/src/soa_builder/web/initialize_database.py
+++ b/src/soa_builder/web/initialize_database.py
@@ -31,7 +31,8 @@ def _init_db():
             concept_title TEXT,
             concept_uid TEXT,    -- immutable BiomedicalConcept_N identifier unique within an SOA
             activity_uid TEXT,   -- joins to the activity table using this uid unique within an SOA
-            soa_id INT
+            soa_id INT,
+            href TEXT               -- stores the API address where the BC exists; codeSystem & codeSystemVersion
         )"""
     )
 
diff --git a/src/soa_builder/web/migrate_database.py b/src/soa_builder/web/migrate_database.py
index 6bf4195..ae7eaa9 100644
--- a/src/soa_builder/web/migrate_database.py
+++ b/src/soa_builder/web/migrate_database.py
@@ -979,3 +979,19 @@ def _migrate_matrix_cells_add_instance_id():
         conn.close()
     except Exception as e:
         logger.warning("matrix_cells instance_id migration failed: %s", e)
+
+
+def _migrate_activity_concept_add_href():
+    """Add href column to store the API URI from which codeSystem and codeSystemVersion USDM properties can be derived"""
+    try:
+        conn = _connect()
+        cur = conn.cursor()
+        cur.execute("PRAGMA table_info(activity_concept)")
+        cols = {r[1] for r in cur.fetchall()}
+        if "href" not in cols:
+            cur.execute("ALTER TABLE activity_concept ADD COLUMN href TEXT")
+            conn.commit()
+            logger.info("Added href column to the activity_concept table")
+        conn.close()
+    except Exception as e:
+        logger.warning("activity_concept href migration failed: %s", e)
diff --git a/src/soa_builder/web/routers/instances.py b/src/soa_builder/web/routers/instances.py
index fcb63af..712575d 100644
--- a/src/soa_builder/web/routers/instances.py
+++ b/src/soa_builder/web/routers/instances.py
@@ -1,8 +1,8 @@
 import logging
 import os
-from typing import Optional
+from typing import Optional, List
 
-from fastapi import APIRouter, HTTPException, Request, Form
+from fastapi import APIRouter, HTTPException, Request, Form, Body
 from fastapi.responses import JSONResponse, HTMLResponse, RedirectResponse
 from fastapi.templating import Jinja2Templates
 
@@ -420,3 +420,47 @@ def delete_instance(soa_id: int, instance_id: int):
 def ui_del_instance(request: Request, soa_id: int, instance_id: int):
     delete_instance(soa_id, instance_id)
     return RedirectResponse(url=f"/ui/soa/{int(soa_id)}/instances", status_code=303)
+
+
+# API endpoint to reorder instances
+@router.post("/soa/{soa_id}/instances/reorder", response_class=JSONResponse)
+def reorder_instances_api(
+    soa_id: int,
+    order: List[int] = Body(..., embed=True),  # JSON body: {"order":[...]}
+):
+    if not soa_exists(soa_id):
+        raise HTTPException(404, "SOA not found")
+    if not order:
+        raise HTTPException(400, "Order list required")
+
+    conn = _connect()
+    cur = conn.cursor()
+    cur.execute(
+        "SELECT id,name FROM instances WHERE soa_id=? ORDER BY order_index", (soa_id,)
+    )
+    rows = cur.fetchall()
+    old_order = [r[0] for r in rows]  # IDs for API response
+    id_to_name = {r[0]: r[1] for r in rows}
+    old_order_names = [r[1] for r in rows]  # Names for audit
+
+    cur.execute("SELECT id,name FROM instances WHERE soa_id=?", (soa_id,))
+    existing = {r[0] for r in cur.fetchall()}
+    if set(order) - existing:
+        conn.close()
+        raise HTTPException(400, "Order contains invalid instance id")
+
+    for idx, instance_id in enumerate(order, start=1):
+        cur.execute("UPDATE instances SET order_index=? WHERE id=?", (idx, instance_id))
+    conn.commit()
+    conn.close()
+
+    new_order_names = [id_to_name.get(iid, str(iid)) for iid in order]
+
+    _record_instance_audit(
+        soa_id,
+        "reorder",
+        instance_id=None,
+        before={"old_order": old_order_names},
+        after={"new_order": new_order_names},
+    )
+    return JSONResponse({"ok": True, "old_order": old_order, "new_order": order})
diff --git a/src/soa_builder/web/templates/arms.html b/src/soa_builder/web/templates/arms.html
index a963c64..a15dddf 100644
--- a/src/soa_builder/web/templates/arms.html
+++ b/src/soa_builder/web/templates/arms.html
@@ -2,6 +2,12 @@
 {% block content %}
 <h2>Arms for SoA {{ soa_id }}</h2>
 
+<div style="margin-bottom:12px;">
+    <a href="/ui/soa/{{ soa_id }}/edit" style="background:#455a64;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px;font-size:0.9em;display:inline-block;">
+        ← Return to Edit Page
+    </a>
+</div>
+
 <div style="margin-bottom:12px">
     <form method="post" action="/ui/soa/{{ soa_id }}/arms/create" style="display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;">
         <div style="display:flex;flex-direction:column;gap:2px;">
@@ -40,7 +46,7 @@ <h2>Arms for SoA {{ soa_id }}</h2>
 
 <table id="arms-table" style="width:100%;font-size:0.85em;border-collapse:collapse;">
     <tr style="background:#eee;">
-        <th style="text-align:left;padding:4px;">UID</th>
+        <th style="text-align:left;padding:4px;">id</th>
         <th style="text-align:left;padding:4px;">Name</th>
         <th style="text-align:left;padding:4px;">Label</th>
         <th style="text-align:left;padding:4px;">Description</th>
diff --git a/src/soa_builder/web/templates/concepts_cell.html b/src/soa_builder/web/templates/concepts_cell.html
index 4ed37ca..bdf2cc7 100644
--- a/src/soa_builder/web/templates/concepts_cell.html
+++ b/src/soa_builder/web/templates/concepts_cell.html
@@ -1,7 +1,9 @@
 {# Partial for concepts cell in matrix (add/remove only; concepts immutable) #}
-<td class="concepts-cell" id="concepts-cell-{{ activity_id }}" style="vertical-align:top;">
+{% set concept_count = selected_list | length %}
+{% set cell_id_suffix = timeline_context ~ '-' ~ activity_id if timeline_context is defined else 'soa-' ~ soa_id ~ '-act-' ~ activity_id %}
+<td class="concepts-cell" id="concepts-cell-{{ cell_id_suffix }}" style="vertical-align:top;">
   {% if edit %}
-    <form hx-post="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts" hx-target="#concepts-cell-{{ activity_id }}" hx-swap="outerHTML" style="margin:0;">
+    <form hx-post="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts" hx-target="#concepts-cell-{{ cell_id_suffix }}" hx-swap="outerHTML" style="margin:0;">
       <div style="margin-bottom:4px;">
         <input type="text" class="concept-search-inline" placeholder="Filter concepts..." style="width:200px;padding:2px 4px;font-size:0.6em;" />
       </div>
@@ -9,15 +11,15 @@
         {% for c in concepts %}
           <option value="{{ c.code }}" {% if c.code in selected_codes %}selected{% endif %}>{{ c.title }}</option>
         {% endfor %}
-      </select>
+      </select> 
       <div style="margin-top:4px;display:flex;gap:6px;">
         <button type="submit" class="small-btn" style="font-size:0.6em;">Save</button>
-        <button type="button" class="refresh-btn" hx-get="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts_cell" hx-target="#concepts-cell-{{ activity_id }}" hx-swap="outerHTML" style="font-size:0.6em;">Cancel</button>
+        <button type="button" class="refresh-btn" hx-get="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts_cell" hx-target="#concepts-cell-{{ cell_id_suffix }}" hx-swap="outerHTML" style="font-size:0.6em;">Cancel</button>
       </div>
     </form>
     <script>
       (function(){
-        const root = document.getElementById('concepts-cell-{{ activity_id }}');
+        const root = document.getElementById('concepts-cell-{{ cell_id_suffix }}');
         if(!root) return;
         const search = root.querySelector('.concept-search-inline');
         const select = root.querySelector('.concept-select-inline');
@@ -32,36 +34,111 @@
       })();
     </script>
   {% else %}
-    <div style="max-width:320px;">
+  <div style="max-width:320px;">
+    
+    <!-- Clickable header -->
+    <div class="concepts-toggle"
+      onclick="toggleConcepts('{{ cell_id_suffix }}')">
+      <span class="concepts-label">Concepts</span>
+      {% if concept_count > 0 %}
+        <span class="concept-count-pill">{{ concept_count }}</span>
+      {% endif %}
+      <span class="concepts-arrow">▸</span>
+    </div>
+
+    <!-- Collapsible content -->
+    <div class="concepts-content" id="concepts-content-{{ cell_id_suffix }}" style="display:none;margin-top:4px;">
       {% if selected_list %}
-        <div style="display:block;">
         {% for ac in selected_list %}
           <div class="concept-line" style="display:flex;align-items:center;justify-content:space-between;background:#eef;color:#224;margin:2px 0;padding:2px 5px;border-radius:3px;font-size:0.6em;">
             <span class="concept-title" title="{{ ac.code }}" style="flex:1;">{{ ac.title }}</span>
-            <form hx-post="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts/remove" hx-target="#concepts-cell-{{ activity_id }}" hx-swap="outerHTML" style="margin:0;">
+            <form hx-post="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts/remove"
+                  hx-target="#concepts-cell-{{ cell_id_suffix }}"
+                  hx-swap="outerHTML"
+                  style="margin:0;">
               <input type="hidden" name="concept_code" value="{{ ac.code }}" />
               <button type="submit" style="border:none;background:transparent;color:#900;font-weight:bold;cursor:pointer;padding:0 4px;" title="Remove">×</button>
             </form>
           </div>
         {% endfor %}
-        </div>
       {% else %}
         <div class="no-concepts" style="color:#888;font-size:0.6em;">–</div>
       {% endif %}
-      <div style="margin-top:4px;display:flex;align-items:center;gap:4px;">
-        <form hx-post="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts/add" hx-target="#concepts-cell-{{ activity_id }}" hx-swap="outerHTML" style="display:flex;align-items:center;gap:4px;margin:0;">
-          <select name="concept_code" style="font-size:0.6em;max-width:160px;">
-            <option value="" disabled selected>Add concept...</option>
-            {% for c in concepts %}
-              {% if c.code not in selected_codes %}
-                <option value="{{ c.code }}">{{ c.title }}</option>
-              {% endif %}
-            {% endfor %}
-          </select>
-          <button type="submit" style="font-size:0.55em;">+</button>
-        </form>
-        <button type="button" class="edit-concepts-btn" hx-get="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts_cell?edit=1" hx-target="#concepts-cell-{{ activity_id }}" hx-swap="outerHTML" style="background:#455a64;color:#fff;border:none;padding:2px 5px;cursor:pointer;font-size:0.55em;border-radius:3px;" title="Bulk select concepts">Bulk</button>
-      </div>
     </div>
-  {% endif %}
+
+    <!-- Add + Bulk controls stay visible -->
+    <div style="margin-top:4px;display:flex;align-items:center;gap:4px;">
+      <form hx-post="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts/add"
+            hx-target="#concepts-cell-{{ cell_id_suffix }}"
+            hx-swap="outerHTML"
+            style="display:flex;align-items:center;gap:4px;margin:0;">
+        <select name="concept_code" style="font-size:0.6em;max-width:160px;">
+          <option value="" disabled selected>Add concept...</option>
+          {% for c in concepts %}
+            {% if c.code not in selected_codes %}
+              <option value="{{ c.code }}">{{ c.title }}</option>
+            {% endif %}
+          {% endfor %}
+        </select>
+        <button type="submit" style="font-size:0.55em;">+</button>
+      </form>
+
+      <button type="button"
+              class="edit-concepts-btn"
+              hx-get="/ui/soa/{{ soa_id }}/activity/{{ activity_id }}/concepts_cell?edit=1"
+              hx-target="#concepts-cell-{{ cell_id_suffix }}"
+              hx-swap="outerHTML"
+              style="background:#455a64;color:#fff;border:none;padding:2px 5px;cursor:pointer;font-size:0.55em;border-radius:3px;"
+              title="Bulk select concepts">
+        Bulk
+      </button>
+    </div>
+
+  </div>
+{% endif %}
+
 </td>
+<style>
+.concepts-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.65em;
+  color: #1976d2;
+  user-select: none;
+}
+
+.concept-count-pill {
+  background: #1976d2;
+  color: white;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: 999px;
+  line-height: 1.4;
+  min-width: 18px;
+  text-align: center;
+}
+
+.concepts-arrow {
+  margin-left: auto;
+  font-size: 0.75em;
+}
+</style>
+
+<script>
+function toggleConcepts(cellIdSuffix) {
+  const content = document.getElementById("concepts-content-" + cellIdSuffix);
+  if (!content) return;
+
+  const header = content.previousElementSibling;
+  const arrow = header.querySelector(".concepts-arrow");
+
+  const open = content.style.display === "block";
+  content.style.display = open ? "none" : "block";
+
+  arrow.textContent = open ? "▸" : "▾";
+}
+</script>
\ No newline at end of file
diff --git a/src/soa_builder/web/templates/edit.html b/src/soa_builder/web/templates/edit.html
index 7564683..373e648 100644
--- a/src/soa_builder/web/templates/edit.html
+++ b/src/soa_builder/web/templates/edit.html
@@ -205,54 +205,80 @@ <h2>Editing SoA {{ soa_id }}</h2>
     color: #fff;
   }
 </style>
- {% if timelines and timelines|length > 0 %}
- <div class="timeline-selector">
-  <strong>Select Timeline:</strong>
-  {% for tl in timelines %}
-    <button 
-      class="timeline-btn {% if tl.schedule_timeline_uid == default_timeline %}active{% endif %}" 
-      data-timeline="{{ tl.schedule_timeline_uid }}"
-      onclick="switchTimeline('{{ tl.schedule_timeline_uid }}')"
-    >
-      {{ tl.name }}{% if tl.main_timeline %} (Main){% endif %}
-    </button>
-  {% endfor %}
- </div>
- {% endif %}
-
- <!-- Matrix Container shown/hidden based on timeline selection -->
+{% if timelines and timelines|length > 0 %}
+<div class="timeline-selector">
+<strong>Select Timeline:</strong>
+{% for tl in timelines %}
+  <button 
+    class="timeline-btn {% if tl.schedule_timeline_uid == default_timeline %}active{% endif %}" 
+    data-timeline="{{ tl.schedule_timeline_uid }}"
+    onclick="switchTimeline('{{ tl.schedule_timeline_uid }}')"
+  >
+    {{ tl.name }}{% if tl.main_timeline %} (Main){% endif %}
+  </button>
+{% endfor %}
+</div>
+{% endif %}
 
+<!-- Matrix Container shown/hidden based on timeline selection -->
 {% for timeline_uid, timeline_instances in instances_by_timeline.items() %}
 <div class="matrix-container" 
-     data-timeline="{{ timeline_uid }}"
-     {% if timeline_uid == default_timeline %}style="display: block;"{% else %}style="display: none;"{% endif %}>
+    data-timeline="{{ timeline_uid }}"
+    {% if timeline_uid == default_timeline %}style="display: block;"{% else %}style="display: none;"{% endif %}>
   
   <h3>Matrix: {% if timeline_instances and timeline_instances[0].timeline_name %}{{ timeline_instances[0].timeline_name }}{% else %}{{ timeline_uid }}{% endif %}</h3>
   
   {% if timeline_instances|length == 0 %}
     <p style="color:#666;font-style:italic;">No scheduled activity instances for this timeline.</p>
   {% else %}
-
+<!-- display matrix -->
 <table class="matrix">
-
+  <!-- Epoch row -->
   <tr class="matrix-epoch-row">
     <th></th>
     <th style="text-align:right;font-size:0.50em;">Epoch:-></th>
+    {% set prev_epoch = namespace(value=None, count=0) %}
     {% for inst in timeline_instances %}
-    <th style="text-align:center;font-size:0.50em;">
-      {% if inst.epoch_name %}{{ inst.epoch_name }}{% endif %}
-    </th>
+      {% set current_epoch = inst.epoch_label if inst.epoch_label else inst.epoch_name %}
+      {% if prev_epoch.value == current_epoch %}
+        {# Same as previous, increment count but don't output #}
+        {% set prev_epoch.count = prev_epoch.count + 1 %}
+      {% else %}
+        {# Different epoch, output previous if exists #}
+        {% if prev_epoch.value is not none %}
+          <th style="text-align:center;font-size:0.50em;" colspan="{{ prev_epoch.count }}">{{ prev_epoch.value }}</th>
+        {% endif %}
+        {# Start tracking new epoch #}
+        {% set prev_epoch.value = current_epoch %}
+        {% set prev_epoch.count = 1 %}
+      {% endif %}
+      {# On last iteration, output the accumulated cell #}
+      {% if loop.last %}
+        <th style="text-align:center;font-size:0.50em;" colspan="{{ prev_epoch.count }}">{{ prev_epoch.value }}</th>
+      {% endif %}
     {% endfor %}
   </tr>
+  <!-- Encounter row -->
   <tr class="matrix-encounter-row">
     <th></th>
-    <th style="text-align:right;font-size:0.50em;">Encounter Name:-></th>
+    <th style="text-align:right;font-size:0.50em;">Encounter:-></th>
     {% for inst in timeline_instances %}
     <th style="text-align:center;font-size:0.50em;">
-      {% if inst.encounter_name %}{{ inst.encounter_name }}{% endif %}
+      {% if inst.encounter_label %}{{ inst.encounter_label }}{% else %}{{ inst.encounter_name }}{% endif %}
+    </th>
+    {% endfor %}
+  </tr>
+  <!-- ScheduleActivityInstance row -->
+  <tr class="matrix-instance-row">
+    <th></th>
+    <th style="text-align:right;font-size:0.50em;">Instance:-></th>
+    {% for inst in timeline_instances %}
+    <th style="min-width: 70px; vertical-align: top; text-align:center;" data-instance-id="{{ inst.id }}" data-visit-id="{{ inst.id }}">
+      <div style="color: #1976d2;" {%if inst.label %}title="Scheduled Activity Instance: {{ inst.label }}"{% endif %}>{% if inst.label %}{{ inst.label }}{% else %}{{ inst.name }}{% endif %}</div>
     </th>
     {% endfor %}
   </tr>
+  <!-- Study Day row -->
   <tr class="matrix-study-day-row">
     <th></th>
     <th style="text-align:right;font-size:0.50em;">Study Day:-></th>
@@ -262,16 +288,17 @@ <h3>Matrix: {% if timeline_instances and timeline_instances[0].timeline_name %}{
     </th>
     {% endfor %}
   </tr>
+  <!-- Timing row -->
   <tr class="matrix-timing-label-row">
     <th></th>
-    <th style="text-align:right;font-size:0.50em;">Timing Label:-></th>
+    <th style="text-align:right;font-size:0.50em;">Timing:-></th>
     {% for inst in timeline_instances %}
     <th style="text-align:center;font-size:0.50em;">
-      {% if inst.timing_label %}{{ inst.timing_label }}{% endif %}
+      {% if inst.timing_label %}{{ inst.timing_label }}{% else %}{{ inst.timing_name }}{% endif %}
     </th>
     {% endfor %}
   </tr>
-  
+  <!-- Visit Window row -->
   <tr class="matrix-visit-window-row">
     <th></th>
     <th style="text-align:right;font-size:0.50em;">Visit Window:-></th>
@@ -284,10 +311,9 @@ <h3>Matrix: {% if timeline_instances and timeline_instances[0].timeline_name %}{
   <tr>
     <th>Activity</th>
     <th>Concepts</th>
+    <!-- Empty headers for instance columns -->
     {% for inst in timeline_instances %}
-    <th style="min-width: 70px; vertical-align: top;" data-instance-id="{{ inst.id }}" data-visit-id="{{ inst.id }}">
-      <div style="color: #1976d2;" {%if inst.label %}title="Scheduled Activity Instance: {{ inst.label }}"{% endif %}>{{ inst.name }}</div>
-    </th>
+    <th style="min-width: 70px;"></th>
     {% endfor %}
   </tr>
   {% for a in activities %}
@@ -297,14 +323,19 @@ <h3>Matrix: {% if timeline_instances and timeline_instances[0].timeline_name %}{
     {% set selected_list = concepts_list %}
     {% set selected_codes = concepts_list | map(attribute='code') | list %}
     {% set activity_id = a.id %}
+    {% set timeline_context = timeline_uid %}
     {% include 'concepts_cell.html' %}
     {% for inst in timeline_instances %}
       {% set raw_status = cell_map.get((inst.id, a.id), '') %}
       {% set display = 'X' if raw_status == 'X' else '' %}
-      <td data-instance-id="{{ inst.id }}" data-visit-id="{{ inst.id }}" 
-      hx-post="/ui/soa/{{ soa_id }}/toggle_cell" 
-      hx-vals='{"instance_id": {{ inst.id }}, "activity_id": {{ a.id }} }' 
-      hx-swap="outerHTML" class="cell">{{ display }}
+      <td 
+        data-instance-id="{{ inst.id }}" 
+        data-visit-id="{{ inst.id }}" 
+        hx-post="/ui/soa/{{ soa_id }}/toggle_cell" 
+        hx-vals='{"instance_id": {{ inst.id }}, "activity_id": {{ a.id }} }' 
+        hx-swap="outerHTML" 
+        class="cell">
+        {{ display }}
       </td>
     {% endfor %}
   </tr>
@@ -313,6 +344,7 @@ <h3>Matrix: {% if timeline_instances and timeline_instances[0].timeline_name %}{
 {% endif %}
 </div>
 {% endfor %}
+<!-- Export XLSX report for SoA -->
 <p><a href="/soa/{{ soa_id }}/normalized" target="_blank">Generate Normalized Summary (JSON)</a></p>
 <div class="export-buttons">
   <a
@@ -323,6 +355,7 @@ <h3>Matrix: {% if timeline_instances and timeline_instances[0].timeline_name %}{
     title="Download Excel workbook"
   >⬇ XLSX</a>
 </div>
+<!-- CSS styles -->
 <style>
   .delete-btn { background:#c62828; color:#fff; border:none; padding:0 6px; cursor:pointer; }
   .delete-btn:hover { background:#b71c1c; }
diff --git a/src/soa_builder/web/templates/edit_backup.html b/src/soa_builder/web/templates/edit_backup.html
deleted file mode 100644
index e9bfa37..0000000
--- a/src/soa_builder/web/templates/edit_backup.html
+++ /dev/null
@@ -1,642 +0,0 @@
-{% extends 'base.html' %}
-{% block content %}
-<h2>Editing SoA {{ soa_id }}</h2>
-<div class="study-meta" style="background:#f5f5f5;padding:8px 10px;border:1px solid #ddd;border-radius:4px;margin-bottom:12px;font-size:0.8em;">
-  <strong>Study Metadata</strong>
-  <form method="post" action="/ui/soa/{{ soa_id }}/update_meta" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px;margin-top:6px;align-items:start;">
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label for="study_id">Study ID *</label>
-      <input id="study_id" name="study_id" value="{{ study_id or '' }}" placeholder="Unique Study ID" required />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label for="study_label">Label</label>
-      <input id="study_label" name="study_label" value="{{ study_label or '' }}" placeholder="Short Label" />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;grid-column:1/-1;">
-      <label for="study_description">Description</label>
-      <textarea id="study_description" name="study_description" rows="3" placeholder="Study Description">{{ study_description or '' }}</textarea>
-    </div>
-    <div style="grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
-      <button type="submit" style="background:#1976d2;color:#fff;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;">Update Metadata</button>
-      <small style="color:#555;">Study ID must be unique and cannot be cleared once set. Other fields may be left blank to clear.</small>
-    </div>
-  </form>
-</div>
-<div class="freeze-bar" style="margin-bottom:12px;display:flex;flex-direction:column;gap:6px;">
-  <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
-    <form hx-post="/ui/soa/{{ soa_id }}/freeze" hx-target="#freeze-feedback" hx-swap="innerHTML" style="display:flex;align-items:center;gap:4px;">
-      <input name="version_label" placeholder="Version label (optional)" style="font-size:0.75em;padding:2px 4px;" />
-      <button type="submit" style="background:#6a1b9a;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:0.75em;">Freeze</button>
-    </form>
-    <div id="freeze-feedback" style="font-size:0.65em;color:#c62828;"></div>
-    <div style="font-size:0.6em;color:#444;">
-      Count: {{ freeze_count }}
-      {% if last_frozen_at %} • Last: <span title="{{ last_frozen_at }}">{{ last_frozen_at }}</span>{% endif %}
-    </div>
-  </div>
-  {% if freezes %}
-    <div class="freeze-list" style="font-size:0.65em;display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
-      <strong>Versions:</strong>
-      {% for f in freezes %}
-        <div style="display:flex;align-items:center;gap:3px;">
-          <span style="background:#eee;padding:2px 6px;border-radius:3px;color:#333;">{{ f.version_label }}</span>
-          <button hx-get="/ui/soa/{{ soa_id }}/freeze/{{ f.id }}/view" hx-target="#modal-host" hx-swap="innerHTML" style="background:#455a64;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">View</button>
-        </div>
-      {% endfor %}
-    </div>
-    <div style="font-size:0.6em;margin-top:4px;">
-      <button hx-get="/ui/soa/{{ soa_id }}/rollback_audit" hx-target="#modal-host" hx-swap="innerHTML" style="background:#37474f;color:#fff;border:none;padding:3px 8px;border-radius:4px;cursor:pointer;">Rollback Audit Log</button>
-  <button hx-get="/ui/soa/{{ soa_id }}/reorder_audit" hx-target="#modal-host" hx-swap="innerHTML" style="background:#546e7a;color:#fff;border:none;padding:3px 8px;border-radius:4px;cursor:pointer;">Reorder Audit Log</button>
-  <a href="/soa/{{ soa_id }}/rollback_audit/export/xlsx" style="background:#1976d2;color:#fff;text-decoration:none;padding:3px 8px;border-radius:4px;">Rollback Audit XLSX</a>
-  <a href="/soa/{{ soa_id }}/reorder_audit/export/xlsx" style="background:#00796b;color:#fff;text-decoration:none;padding:3px 8px;border-radius:4px;">Reorder Audit XLSX</a>
-  <a href="/soa/{{ soa_id }}/reorder_audit/export/csv" style="background:#00838f;color:#fff;text-decoration:none;padding:3px 8px;border-radius:4px;">Reorder CSV</a>
-    </div>
-    <div class="freeze-diff" style="font-size:0.65em;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;">
-      <strong>Diff:</strong>
-      <select id="diff-left" name="left" style="font-size:0.7em;">
-        {% for f in freezes %}<option value="{{ f.id }}">{{ f.version_label }}</option>{% endfor %}
-      </select>
-      <select id="diff-right" name="right" style="font-size:0.7em;">
-        {% for f in freezes %}<option value="{{ f.id }}">{{ f.version_label }}</option>{% endfor %}
-      </select>
-      <button hx-get="/ui/soa/{{ soa_id }}/freeze/diff" hx-include="#diff-left,#diff-right" hx-target="#modal-host" hx-swap="innerHTML" style="background:#2e7d32;color:#fff;border:none;padding:2px 8px;border-radius:3px;cursor:pointer;">Compare</button>
-    </div>
-  {% else %}
-    <div style="font-size:0.6em;color:#777;">No versions frozen yet.</div>
-  {% endif %}
-</div>
-<div id="modal-host"></div>
-<div class="concepts-global-refresh" style="margin:4px 0 12px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
-  <form hx-post="/ui/soa/{{ soa_id }}/concepts_refresh" style="display:inline;">
-    <button type="submit" style="background:#455a64;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:0.8em;">↻ Refresh Biomedical Concepts</button>
-  </form>
-  <div style="font-size:0.7em;color:#444;">
-    Last fetch:
-    {% if concepts_last_fetch_relative %}
-      <span title="{{ concepts_last_fetch_iso }}">{{ concepts_last_fetch_relative }}</span>
-    {% else %}
-      <span>n/a</span>
-    {% endif %}
-  </div>
-  <small style="color:#555;">(forces remote re-fetch & cache reset)</small>
-</div>
-<div class="flex">
-  <div>
-    <details id="visits-section" open class="collapsible">
-      <summary>Visits/Encounters ({{ visits|length }}) <span class="hint">(drag to reorder)</span></summary>
-      <ul id="visits-list" class="drag-list">
-        {% for v in visits %}
-        <li class="drag-item" draggable="true" data-id="{{ v.id }}">
-          <span class="ord">{{ v.order_index }}</span>. <strong>{{ v.name }}</strong>
-          <span class="visit-actions">
-          {% if epochs %}
-          <form method="post" action="/ui/soa/{{ soa_id }}/set_visit_epoch" style="display:inline;margin-left:6px;">
-            <input type="hidden" name="visit_id" value="{{ v.id }}" />
-            <select name="epoch_id" style="font-size:0.65em;" onchange="this.form.submit()">
-              <option value="" {% if not v.epoch_id %}selected{% endif %}>-- Select Epoch --</option>
-              {% for e in epochs %}
-                <option value="{{ e.id }}" {% if v.epoch_id == e.id %}selected{% endif %}>{{ e.name }}</option>
-              {% endfor %}
-            </select>
-          </form>
-          {% endif %}
-          {% if timings %}
-          <form method="post" action="/ui/soa/{{ soa_id }}/set_timing" style="display:inline;margin-left:6px;">
-            <input type="hidden" name="visit_id" value="{{ v.id }}" />
-            <select name="timing_id" style="font-size:0.65em;" onchange="this.form.submit()">
-              <option value="" {% if not v.scheduledAtId %}selected{% endif %}>-- Select Scheduled at Timing --</option>
-              {% for t in timings %}
-                <option value="{{ t.id }}" {% if (v.scheduledAtId|string) == (t.id|string) %}selected{% endif %}>{{ t.name }}</option>
-              {% endfor %}
-            </select>
-          </form>
-          {% endif %}
-          {% if transition_rules %}
-          <form method="post" action="/ui/soa/{{ soa_id }}/set_visit_transition_start_rule" style="display:inline;margin-left:6px;">
-            <input type="hidden" name="visit_id" value="{{ v.id }}" />
-            <select name="visit_transition_start_rule_uid" style="font-size:0.65em;" onchange="this.form.submit()">
-              <option value="" {% if not v.transitionStartRule %}selected{% endif %}>-- Select Transition START Rule --</option>
-              {% for tr in transition_rules %}
-              <option value="{{ tr.transition_rule_uid }}" {% if (v.transitionStartRule|string) == (tr.transition_rule_uid|string) %}selected{% endif %}>{{ tr.name }}</option>
-              {% endfor %}
-            </select>
-          </form>
-          <form method="post" action="/ui/soa/{{ soa_id }}/set_visit_transition_end_rule" style="display:inline;margin-left:6px;">
-            <input type="hidden" name="visit_id" value="{{ v.id }}" />
-            <select name="visit_transition_end_rule_uid" style="font-size:0.65em;" onchange="this.form.submit()">
-              <option value="" {% if not v.transitionEndRule %}selected{% endif %}>-- Select Transition END Rule --</option>
-              {% for tr in transition_rules %}
-              <option value="{{ tr.transition_rule_uid }}" {% if (v.transitionEndRule|string) == (tr.transition_rule_uid|string) %}selected{% endif %}>{{ tr.name }}</option>
-              {% endfor %}
-            </select>
-          </form>
-          {% endif %}
-          
-            <form method="post" action="/ui/soa/{{ soa_id }}/update_visit" style="display:inline;font-size:0.6em;">
-              <input type="hidden" name="visit_id" value="{{ v.id }}" />
-              <input name="label" value="{{ v.label or '' }}" placeholder="Label (opt)" style="width:100px;" />
-              <input name="description" value="{{ v.description or '' }}" placeholder="Description (optional)" style="width:160px;" />
-              <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-            </form>
-            <form method="post" action="/ui/soa/{{ soa_id }}/delete_visit" style="display:inline;">
-              <input type="hidden" name="visit_id" value="{{ v.id }}" />
-              <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
-                Delete
-              </button>
-            </form>
-          </span>
-        </li>
-        {% endfor %}
-      </ul>
-      <form method="post" action="/ui/soa/{{ soa_id }}/add_visit" style="margin-top:6px;">
-        <input name="name" placeholder="Visit Name" required />
-        <input name="label" placeholder="Label (optional)" />
-        <input name="description" placeholder="Description (optional)" />
-        {% if epochs %}
-          <select name="epoch_id" style="font-size:0.7em;">
-            <option value="">Epoch (optional)</option>
-            {% for e in epochs %}<option value="{{ e.id }}">E{{ e.epoch_seq }} {{ e.name }}{% if e.epoch_label %} - {{ e.epoch_label }}{% endif %}</option>{% endfor %}
-          </select>
-        {% endif %}
-        <button>Add Visit</button>
-      </form>
-    </details>
-    <details id="activities-section" open class="collapsible">
-      <summary>Activities ({{ activities|length }}) <span class="hint">(drag to reorder)</span></summary>
-      <ul id="activities-list" class="drag-list">
-        {% for a in activities %}
-        <li class="drag-item" draggable="true" data-id="{{ a.id }}">
-          <span class="ord">{{ a.order_index }}</span>. <strong>{{ a.name }}</strong>
-          <span class="activity-actions">
-            <form method="post" action="/soa/{{ soa_id }}/activities/{{ a.id }}/update" style="display:inline;font-size:0.6em;">
-              <input type="hidden" name="activity_id" value="{{ a.id }}" />
-              <input name="name" value="{{ a.name }}" placeholder="Name" style="width:110px;" />
-              <input name="label" value="{{ a.label or '' }}" placeholder="Label (opt)" style="width:100px;" />
-              <input name="description" value="{{ a.description or '' }}" placeholder="Desc (opt)" style="width:160px;" />
-              <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-            </form>
-            <form hx-post="/ui/soa/{{ soa_id }}/delete_activity" hx-confirm="Delete activity '{{ a.name }}' and its cells?" style="display:inline">
-              <input type="hidden" name="activity_id" value="{{ a.id }}" />
-              <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
-                Delete
-              </button>
-            </form>
-          </span>
-        </li>
-        {% endfor %}
-      </ul>
-      <form method="post" action="/soa/{{ soa_id }}/activities/add" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;">
-        <input name="name" placeholder="Activity Name" required style="flex:1;min-width:120px;" />
-        <input name="label" placeholder="Label (optional)" style="flex:1;min-width:110px;" />
-        <input name="description" placeholder="Description (optional)" style="flex:2;min-width:160px;" />
-        <button>Add Activity</button>
-      </form>
-    </details>
-  
-    <details id="epochs-section" open class="collapsible">
-      <summary>Epochs ({{ epochs|length }}) <span class="hint">(drag to reorder)</span></summary>
-      <ul id="epochs-list" class="drag-list">
-        {% for e in epochs %}
-        <li class="drag-item" draggable="false" data-id="{{ e.id }}" title="{{ e.epoch_description or '' }}">
-          <span class="ord">{{ e.order_index }}</span>. <strong>{{ e.name }}</strong> 
-          <span class="epochs-actions">
-            <form method="post" action="/ui/soa/{{ soa_id }}/update_epoch" style="display:inline;margin-left:6px;font-size:0.6em;">
-              <input type="hidden" name="epoch_id" value="{{ e.id }}" />
-              <input name="name" value="{{ e.name }}" placeholder="Name" style="width:90px;" />
-              <input name="epoch_label" value="{{ e.epoch_label or '' }}" placeholder="Label" style="width:70px;" />
-              <input name="epoch_description" value="{{ e.epoch_description or '' }}" placeholder="Desc" style="width:120px;" />
-              <select name="epoch_type_submission_value" style="font-size:0.65em;">
-                <option value="">-- Select Epoch Type (C99079) --</option>
-                {% for opt in epoch_type_options or [] %}
-                  <option value="{{ opt }}" {% if e.epoch_type_submission_value == opt %}selected{% endif %}>{{ opt }}</option>
-                {% endfor %}
-              </select>
-              <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-            </form>
-            <form hx-post="/ui/soa/{{ soa_id }}/delete_epoch" hx-confirm="Delete epoch '{{ e.name }}'?" style="display:inline">
-              <input type="hidden" name="epoch_id" value="{{ e.id }}" />
-              <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
-                Delete
-              </button>
-            </form>
-          </span>
-        </li>
-        {% endfor %}
-      </ul>
-      <form method="post" action="/ui/soa/{{ soa_id }}/add_epoch" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;">
-        <input name="name" placeholder="Epoch Name" required style="flex:1;min-width:120px;" />
-        <input name="epoch_label" placeholder="Label (optional)" style="flex:1;min-width:110px;" />
-        <input name="epoch_description" placeholder="Description (optional)" style="flex:2;min-width:160px;" />
-        <select name="epoch_type_submission_value" style="font-size:0.7em;min-width:140px;">
-          <option value="">-- Select Epoch Type (C99079)--</option>
-          {% for opt in epoch_type_options or [] %}
-            <option value="{{ opt }}">{{ opt }}</option>
-          {% endfor %}
-        </select>
-        <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Epoch</button>
-      </form>
-    </details>
-    <details id="elements-section" open class="collapsible">
-      <summary>Elements ({{ elements|length }}) <span class="hint">(drag to reorder)</span></summary>
-      <ul id="elements-list" class="drag-list">
-        {% for el in elements %}
-        <li class="drag-item" draggable="false" data-id="{{ el.id }}" title="{{ el.description or '' }}">
-          <span class="ord">{{ el.order_index }}</span>. <strong>{% if el.label %}{{ el.label }}{% else %}{{ el.name }}{% endif %}</strong>
-          <span class="element-actions">
-            {% if transition_rules %}
-            <form method="post" action="/ui/soa/{{ soa_id }}/set_element_transition_start_rule" style="display:inline;margin-left:6px;">
-              <input type="hidden" name="element_id" value="{{ el.id }}" />
-              <select name="element_transition_start_rule_uid" style="font-size:0.65em;" onchange="this.form.submit()">
-                <option value="" {% if not el.testrl %}selected{% endif %}>-- Select Transition START Rule --</option>
-                {% for tr in transition_rules %}
-                <option value="{{ tr.transition_rule_uid }}" {% if (el.testrl|string) == (tr.transition_rule_uid|string) %}selected{% endif %}>{{ tr.name }}</option>
-                {% endfor %}
-              </select>
-            </form>
-            <form method="post" action="/ui/soa/{{ soa_id }}/set_element_transition_end_rule" style="display:inline;margin-left:6px;">
-              <input type="hidden" name="element_id" value="{{ el.id }}" />
-              <select name="element_transition_end_rule_uid" style="font-size:0.65em;" onchange="this.form.submit()">
-                <option value="" {% if not el.teenrl %}selected{% endif %}>-- Select Transition END Rule --</option>
-                {% for tr in transition_rules %}
-                <option value="{{ tr.transition_rule_uid }}" {% if (el.teenrl|string) == (tr.transition_rule_uid|string) %}selected{% endif %}>{{ tr.name }}</option>
-                {% endfor %}
-              </select>
-            </form>
-            {% endif %}
-            <form method="post" action="/ui/soa/{{ soa_id }}/update_element" style="display:inline;font-size:0.6em;">
-              <input type="hidden" name="element_id" value="{{ el.id }}" />
-              <input name="name" value="{{ el.name }}" placeholder="Name" style="width:90px;" />
-              <input name="label" value="{{ el.label or '' }}" placeholder="Label" style="width:70px;" />
-              <input name="description" value="{{ el.description or '' }}" placeholder="Desc" style="width:120px;" />
-              <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-            </form>
-            <form method="post" action="/ui/soa/{{ soa_id }}/delete_element" style="display:inline;">
-              <input type="hidden" name="element_id" value="{{ el.id }}" />
-              <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
-                  Delete
-              </button>
-            </form>
-          </span>
-        </li>
-        {% endfor %}
-      </ul>
-      <form method="post" action="/ui/soa/{{ soa_id }}/add_element" style="margin-top:6px;">
-        <input name="name" placeholder="Element Name" required />
-        <input name="label" placeholder="Label (optional)" />
-        <input name="description" placeholder="Description (optional)" />
-        
-        <button>Add Element</button>
-      </form>
-    </details>
-    <details id="arms-section" open class="collapsible">
-      <summary>Arms ({{ arms|length }}) <span class="hint">(drag to reorder)</span></summary>
-      <ul id="arms-list" class="drag-list">
-        {% for arm in arms %}
-        <li class="drag-item" draggable="true" data-id="{{ arm.id }}" title="{{ arm.description or '' }}">
-          <span class="ord">{{ arm.order_index }}</span>. <strong>{% if arm.label %}{{ arm.label }}{% else %}{{ arm.name }}{% endif %}</strong>
-          <span class="arm-actions">
-            <form method="post" action="/ui/soa/{{ soa_id }}/update_arm" style="display:inline;margin-left:6px;font-size:0.6em;">
-              <input type="hidden" name="arm_id" value="{{ arm.id }}" />
-              <input name="name" value="{{ arm.name }}" placeholder="Name" style="width:90px;" />
-              <input name="label" value="{{ arm.label or '' }}" placeholder="Label" style="width:70px;" />
-              <input name="description" value="{{ arm.description or '' }}" placeholder="Desc" style="width:120px;" />
-              {# Type selection from protocol terminology C174222 #}
-              {% if protocol_terminology_C174222 %}
-              <select name="arm-type" style="width:200px;" title="Type">
-                <option value="">-- Select Epoch Type (C174222) --</option>
-                {% for opt in protocol_terminology_C174222 %}
-                  {% set text = (opt.cdisc_submission_value or '') %}
-                  {% set td = (arm.type_display or '') %}
-                  <option value="{{ text }}" {% if td|trim|lower == text|trim|lower and td != '' %}selected{% endif %}>{{ text }}</option>
-                {% endfor %}
-              </select>
-              {% endif %}
-              {# Type selection from ddf terminology C188727 #}
-              {% if ddf_terminology_C188727 %}
-              <select name="data-origin-type" style="width:200px;" title="Data Origin Type">
-                <option value="">-- Select Arm DataOriginType (C18872) --</option>
-                {% for ddf_opt in ddf_terminology_C188727 %}
-                  {% set text = (ddf_opt.cdisc_submission_value or '') %}
-                  {% set td = (arm.data_origin_type_display or '') %}
-                  <option value="{{ text }}" {% if td|trim|lower == text|trim|lower and td != '' %}selected{% endif %}>{{ text }}</option>
-                {% endfor %}
-              </select>
-              {% endif %}
-              <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-            </form>
-            <form hx-post="/ui/soa/{{ soa_id }}/delete_arm" hx-confirm="Delete arm '{{ arm.name }}'?" style="display:inline">
-              <input type="hidden" name="arm_id" value="{{ arm.id }}" />
-              <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
-                Delete
-              </button>
-            </form>
-          </span>
-        </li>
-        {% endfor %}
-      </ul>
-      <form method="post" action="/ui/soa/{{ soa_id }}/add_arm" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;">
-        <input name="name" placeholder="Arm Name" required style="flex:1;min-width:120px;" />
-        <input name="label" placeholder="Label" style="flex:1;min-width:90px;" />
-        <input name="description" placeholder="Description" style="flex:2;min-width:160px;" />
-        {% if protocol_terminology_C174222 %}
-        <select name="arm-type" style="width:200px;" title="Type">
-          <option value="">Type</option>
-          {% for opt in protocol_terminology_C174222 %}
-            {% set text = (opt.cdisc_submission_value or '') %}
-            <option value="{{ text }}">{{ text }}</option>
-          {% endfor %}
-        </select>
-        {% endif %}
-        {% if ddf_terminology_C188727 %}
-        <select name="data-origin-type" style="width:200px;" title="Data Origin Type">
-          <option value="">DataOriginType</option>
-          {% for ddf_opt in ddf_terminology_C188727 %}
-            {% set text = (ddf_opt.cdisc_submission_value or '') %}
-            <option value="{{ text }}">{{ text }}</option>
-          {% endfor %}
-        </select>
-        {% endif %}
-        <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Arm (auto StudyArm_N)</button>
-      </form>
-    </details>
-    <details id="study-cells-section" class="collapsible">
-      <summary>Study Cells ({{ study_cells|length }})</summary>
-      <form method="post" action="/ui/soa/{{ soa_id }}/add_study_cell" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;align-items:start;margin-top:6px;">
-        <div style="display:flex;flex-direction:column;gap:2px;">
-          <label for="arm_uid">Arm</label>
-          <select id="arm_uid" name="arm_uid" required>
-            {% for arm in arms %}
-              {% if arm.arm_uid %}<option value="{{ arm.arm_uid }}">{{ arm.arm_uid }} — {{ arm.name }}</option>{% endif %}
-            {% endfor %}
-          </select>
-        </div>
-        <div style="display:flex;flex-direction:column;gap:2px;">
-          <label for="epoch_uid">Epoch</label>
-          <select id="epoch_uid" name="epoch_uid" required>
-            {% for e in epochs %}
-              {% set val = e.epoch_uid or ('StudyEpoch_' ~ (e.epoch_seq or e.id)) %}
-              <option value="{{ val }}">{{ val }} — {{ e.name }}</option>
-            {% endfor %}
-          </select>
-        </div>
-        <div style="display:flex;flex-direction:column;gap:2px;grid-column:1/-1;">
-          <label for="element_uids">Elements</label>
-          <select id="element_uids" name="element_uids" multiple size="6" required>
-            {% for el in elements %}
-              {% if el.element_id %}<option value="{{ el.element_id }}">{{ el.element_id }} — {{ el.name }}</option>{% endif %}
-            {% endfor %}
-          </select>
-          <small>Select one or more elements (Cmd/Ctrl+Click).</small>
-        </div>
-        <div style="grid-column:1/-1;">
-          <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Study Cell(s)</button>
-        </div>
-      </form>
-      <div style="margin-top:8px;">
-        <table style="width:100%;font-size:0.8em;border-collapse:collapse;">
-          <tr style="background:#eee;">
-            <th style="text-align:left;padding:4px;">UID</th>
-            <th style="text-align:left;padding:4px;">Arm</th>
-            <th style="text-align:left;padding:4px;">Epoch</th>
-            <th style="text-align:left;padding:4px;">Element</th>
-            <th style="text-align:left;padding:4px;">Actions</th>
-          </tr>
-          {% for sc in study_cells %}
-            <tr>
-              <td style="padding:4px;">{{ sc.study_cell_uid }}</td>
-              <td style="padding:4px;">
-                {% set arm_match = arms | selectattr('arm_uid', 'equalto', sc.arm_uid) | list %}
-                {% if arm_match and arm_match[0] and arm_match[0].name %}
-                  {{ arm_match[0].name }}
-                {% else %}
-                  {{ sc.arm_uid }}
-                {% endif %}
-              </td>
-              <td style="padding:4px;">{{ sc.epoch_name or sc.epoch_uid }}</td>
-              <td style="padding:4px;">{{ sc.element_name or sc.element_uid }}</td>
-              <td style="padding:4px;">
-                <form method="post" action="/ui/soa/{{ soa_id }}/delete_study_cell" style="display:inline;">
-                  <input type="hidden" name="study_cell_id" value="{{ sc.id }}" />
-                  <button class="delete-btn">✕</button>
-                </form>
-              </td>
-            </tr>
-          {% else %}
-            <tr><td colspan="5" style="padding:6px;color:#777;">No study cells yet.</td></tr>
-          {% endfor %}
-        </table>
-      </div>
-    </details>
-    <details id="transition-rules-section" class="collapsible">
-      <summary>Transition Rules ({{ transition_rules|length }})</summary>
-      <ul id="transition-rule-list" class="drag-list">
-        {% for rule in transition_rules %}
-        <li class="drag-item" draggable="false" data-id="{{ rule.transition_rule_uid }}" title="{{ rule.name or '' }}">
-          <span class="ord">{{ rule.order_index }}</span>. <strong>{% if rule.label %}{{ rule.label }}{% else %}{{ rule.name }}{% endif %}</strong>
-          <span class="transition-rule-actions">
-            <form method="post" action="/ui/soa/{{ soa_id }}/update_transition_rule" style="display:inline;margin-left:6px;font-size:0.6em;">
-              <input type="hidden" name="transition_rule_uid" value="{{ rule.transition_rule_uid }}" />
-              <input name="name" value="{{ rule.name }}" placeholder="Name" style="width:90px;" />
-              <input name="label" value="{{ rule.label or '' }}" placeholder="Label" style="width:70px;" />
-              <input name="description" value="{{ rule.description or '' }}" placeholder="Desc" style="width:120px;" />
-              <input name="text" value="{{ rule.text or '' }}" placeholder="Rule text" style="width:160px;" />
-              <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-            </form>
-            <form hx-post="/ui/soa/{{ soa_id }}/delete_transition_rule" hx-target="#transition-rule-list" hx-swap="outerHTML" hx-confirm="Delete transition rule '{{ rule.name }}'?" style="display:inline">
-              <input type="hidden" name="transition_rule_uid" value="{{ rule.transition_rule_uid }}" />
-              <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
-                Delete
-              </button>
-            </form>
-          </span>
-        </li>
-        {% endfor %}
-      </ul>
-      <form method="post" action="/ui/soa/{{ soa_id }}/add_transition_rule" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;">
-        <input name="name" placeholder="Transition Rule Name" required style="flex:1;min-width:120px;" />
-        <input name="label" placeholder="Transition Rule Label" style="flex:1;min-width:110px;" />
-        <input name="description" placeholder="Transition Rule Description" style="flex:2;min-width:160px;" />
-        <input name="text" placeholder="Transition Rule text" required style="flex:2;min-width:160px;" />
-        <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Transition Rule</button>
-      </form>
-    </details>
-  </div>
-  
-</div>
-<hr />
-<h3>Matrix</h3>
-<table class="matrix">
-  <tr>
-    <th>Activity</th>
-    <th>Concepts</th>
-    {% for v in visits %}
-      <th style="min-width:70px;" data-visit-id="{{ v.id }}">
-        <div>{{ v.name }}</div>
-        <div style="font-size:0.65em;color:#555;line-height:1.1;">Encounter: {{ v.name }}</div>
-        {% if v.epoch_id %}
-          {% set ep = (epochs | selectattr('id','equalto', v.epoch_id) | list) %}
-          {% if ep and ep[0] %}<div style="font-size:0.6em;color:#2e7d32;line-height:1.1;">Epoch: {{ ep[0].name }}</div>{% endif %}
-        {% endif %}
-      </th>
-    {% endfor %}
-  </tr>
-  {% for a in activities %}
-  <tr data-activity-id="{{ a.id }}">
-    <td>{{ a.name }}</td>
-  {% set concepts_list = activity_concepts.get(a.id, []) %}
-  {% set selected_list = concepts_list %}
-  {% set selected_codes = concepts_list | map(attribute='code') | list %}
-  {% set activity_id = a.id %}
-  {% include 'concepts_cell.html' %}
-    {% for v in visits %}
-      {% set raw_status = cell_map.get((v.id, a.id), '') %}
-      {% set display = 'X' if raw_status == 'X' else '' %}
-      <td data-visit-id="{{ v.id }}" hx-post="/ui/soa/{{ soa_id }}/toggle_cell" hx-vals='{"visit_id": {{ v.id }}, "activity_id": {{ a.id }} }' hx-swap="outerHTML" class="cell">{{ display }}</td>
-    {% endfor %}
-  </tr>
-  {% endfor %}
-</table>
-<p><a href="/soa/{{ soa_id }}/normalized" target="_blank">Generate Normalized Summary (JSON)</a></p>
-<div class="export-buttons">
-  <a class="btn" href="/soa/{{ soa_id }}/export/xlsx" title="Download Excel workbook">⬇ XLSX</a>
-</div>
-<style>
-  .delete-btn { background:#c62828; color:#fff; border:none; padding:0 6px; cursor:pointer; }
-  .delete-btn:hover { background:#b71c1c; }
-  .export-buttons { margin-top:8px; }
-  .export-buttons .btn { display:inline-block; margin-right:10px; background:#1976d2; color:#fff; padding:4px 10px; text-decoration:none; border-radius:3px; font-size:0.9em; }
-  .export-buttons .btn:hover { background:#125aa0; }
-  .small-btn { background:#2e7d32; color:#fff; border:none; padding:2px 8px; margin-top:4px; cursor:pointer; font-size:0.75em; }
-  .small-btn:hover { background:#1b5e20; }
-  /* Removed per-activity concept editor styles */
-  details.collapsible { border:1px solid #ddd; padding:6px 8px; border-radius:4px; background:#fafafa; }
-  details.collapsible summary { cursor:pointer; font-weight:600; }
-  details.collapsible[open] { background:#fdfdfd; }
-  .drag-list { list-style:none; margin:0; padding:0; }
-  .drag-item { padding:3px 4px; margin:2px 0; background:#fff; border:1px solid #e0e0e0; border-radius:3px; cursor:grab; display:flex; align-items:center; gap:4px; }
-  .drag-item.dragging { opacity:0.5; }
-  .drag-item.over { border-color:#1976d2; background:#e3f2fd; }
-  .drag-item form { margin-left:0; }
-  .visit-actions { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
-  .activity-actions { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
-  .epochs-actions { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
-  .element-actions { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
-  .arm-actions { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
-  .transition-rule-actions { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
-  .hint { font-weight:400; font-size:0.7em; color:#666; }
-</style>
-<script>
-// --- Collapse state persistence ---
-function persistSection(sectionId){
-  const el = document.getElementById(sectionId);
-  if(!el) return;
-  el.addEventListener('toggle', ()=>{
-    localStorage.setItem('soa_collapse_'+sectionId, el.open ? '1':'0');
-  });
-  const saved = localStorage.getItem('soa_collapse_'+sectionId);
-  if(saved === '0') el.open = false;
-}
-persistSection('visits-section');
-persistSection('activities-section');
-persistSection('epochs-section');
-persistSection('elements-section');
-persistSection('arms-section');
-persistSection('activity-audit-section');
-persistSection('arm-audit-section');
-persistSection('epoch-audit-section');
-persistSection('study-cells-section');
-persistSection('study-cell-audit-section');
-persistSection('transition-rules-section');
-
-// --- Drag & drop reorder utility ---
-function enableDragList(listId, submitUrl, ordSelector='.ord', kind=null){
-  const list = document.getElementById(listId);
-  if(!list) return;
-  let dragEl=null;
-  list.addEventListener('dragstart', e=>{
-    const li = e.target.closest('.drag-item');
-    if(!li) return;
-    dragEl = li;
-    li.classList.add('dragging');
-    e.dataTransfer.effectAllowed='move';
-  });
-  list.addEventListener('dragend', e=>{
-    if(dragEl){ dragEl.classList.remove('dragging'); dragEl=null; updateOrder(); }
-  });
-  list.addEventListener('dragover', e=>{
-    e.preventDefault();
-    const after = getDragAfterElement(list, e.clientY);
-    const dragging = list.querySelector('.drag-item.dragging');
-    if(!dragging) return;
-    if(after == null){ list.appendChild(dragging); }
-    else { list.insertBefore(dragging, after); }
-  });
-  function getDragAfterElement(container, y){
-    const els = [...container.querySelectorAll('.drag-item:not(.dragging)')];
-    return els.reduce((closest, child)=>{
-      const box = child.getBoundingClientRect();
-      const offset = y - box.top - box.height/2;
-      if(offset < 0 && offset > closest.offset){
-        return {offset: offset, element: child};
-      } else { return closest; }
-    }, {offset: Number.NEGATIVE_INFINITY}).element;
-  }
-  function updateOrder(){
-    const ids = [...list.querySelectorAll('.drag-item')].map(li=>li.dataset.id);
-    // Update displayed ordinal
-    [...list.querySelectorAll('.drag-item')].forEach((li,i)=>{
-      const ord = li.querySelector(ordSelector); if(ord) ord.textContent = i+1; });
-    fetch(submitUrl, {method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body: new URLSearchParams({order: ids.join(',')})})
-      .then(r=>{ if(!r.ok){ console.warn('Reorder failed'); } else {
-          if(kind==='visit'){ reorderMatrixVisits(ids.map(x=>parseInt(x))); }
-          if(kind==='activity'){ reorderMatrixActivities(ids.map(x=>parseInt(x))); }
-        }}).catch(err=>console.error(err));
-  }
-}
-//enableDragList('epochs-list', '/ui/soa/{{ soa_id }}/reorder_epochs', '.ord', 'epoch');
-enableDragList('visits-list', '/ui/soa/{{ soa_id }}/reorder_visits', '.ord', 'visit');
-enableDragList('activities-list', '/ui/soa/{{ soa_id }}/reorder_activities', '.ord', 'activity');
-//enableDragList('elements-list', '/ui/soa/{{ soa_id }}/reorder_elements', '.ord', 'element');
-//enableDragList('arms-list', '/ui/soa/{{ soa_id }}/reorder_arms', '.ord', 'arm');
-// NOTE: kind === 'epoch' intentionally has no corresponding reorderMatrixEpochs call.
-// Epochs are a higher-level grouping that does not alter matrix axes (columns are visits, rows are activities).
-// We still record reorder audit events for epochs, but no DOM matrix reflow is required.
-
-function reorderMatrixVisits(newOrder){
-  const table = document.querySelector('table.matrix'); if(!table) return;
-  const headerRow = table.querySelector('tr'); if(!headerRow) return;
-  const fixedCols = 2; // Activity + Concepts
-  // Collect existing visit headers
-  const visitHeaders = Array.from(headerRow.querySelectorAll('th[data-visit-id]'));
-  const headerMap = {}; visitHeaders.forEach(th=>headerMap[parseInt(th.dataset.visitId)]=th);
-  // Append in new order after fixed columns
-  visitHeaders.forEach(th=>th.remove());
-  newOrder.forEach(id=>{
-    const th = headerMap[id]; if(th) headerRow.appendChild(th);
-  });
-  // Reorder each activity row's cells
-  const bodyRows = Array.from(table.querySelectorAll('tr[data-activity-id]'));
-  bodyRows.forEach(tr=>{
-    const cells = Array.from(tr.querySelectorAll('td[data-visit-id]'));
-    const cellMap = {}; cells.forEach(td=>cellMap[parseInt(td.dataset.visitId)]=td);
-    cells.forEach(td=>td.remove());
-    newOrder.forEach(id=>{ const td = cellMap[id]; if(td) tr.appendChild(td); });
-  });
-}
-
-function reorderMatrixActivities(newOrder){
-  const table = document.querySelector('table.matrix'); if(!table) return;
-  const rows = Array.from(table.querySelectorAll('tr[data-activity-id]'));
-  const map = {}; rows.forEach(r=>map[parseInt(r.dataset.activityId)]=r);
-  // Insert rows in order after header
-  const header = table.querySelector('tr');
-  newOrder.forEach(id=>{ const row = map[id]; if(row) table.appendChild(row); });
-}
-
-function refreshConcepts(){
-  fetch('/ui/soa/{{ soa_id }}/concepts_refresh', {method:'POST'})
-    .then(()=>window.location='/ui/soa/{{ soa_id }}/edit');
-}
-// Per-activity concept multi-select removed.
-</script>
-{% endblock %}
diff --git a/src/soa_builder/web/templates/elements.html b/src/soa_builder/web/templates/elements.html
index 9b71e96..d1f56e6 100644
--- a/src/soa_builder/web/templates/elements.html
+++ b/src/soa_builder/web/templates/elements.html
@@ -2,6 +2,12 @@
 {% block content %}
 <h2>Elements for SoA {{ soa_id }}</h2>
 
+<div style="margin-bottom:12px;">
+    <a href="/ui/soa/{{ soa_id }}/edit" style="background:#455a64;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px;font-size:0.9em;display:inline-block;">
+        ← Return to Edit Page
+    </a>
+</div>
+
 <div style="margin-bottom:12px">
   <form method="post" action="/ui/soa/{{ soa_id }}/elements/create" style="display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;">
     <div style="display:flex;flex-direction:column;gap:2px;">
@@ -40,7 +46,7 @@ <h2>Elements for SoA {{ soa_id }}</h2>
 
 <table id="elements-table" style="width:100%;font-size:0.85em;border-collapse:collapse;">
     <tr style="background:#eee;">
-        <th style="text-align:left;padding:4px;">UID</th>
+        <th style="text-align:left;padding:4px;">id</th>
         <th style="text-align:left;padding:4px;">Name</th>
         <th style="text-align:left;padding:4px;">Label</th>
         <th style="text-align:left;padding:4px;">Description</th>
diff --git a/src/soa_builder/web/templates/encounters.html b/src/soa_builder/web/templates/encounters.html
index 5229fbd..0c526d4 100644
--- a/src/soa_builder/web/templates/encounters.html
+++ b/src/soa_builder/web/templates/encounters.html
@@ -2,6 +2,12 @@
 {% block content %}
 <h2>Encounters for SoA {{ soa_id }}</h2>
 
+<div style="margin-bottom:12px;">
+    <a href="/ui/soa/{{ soa_id }}/edit" style="background:#455a64;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px;font-size:0.9em;display:inline-block;">
+        ← Return to Edit Page
+    </a>
+</div>
+
 <div style="margin-bottom:12px">
     <form method="post" action="/ui/soa/{{ soa_id }}/visits/create" style="display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;">
         <div style="display:flex;flex-direction:column;gap:2px;">
@@ -85,7 +91,7 @@ <h2>Encounters for SoA {{ soa_id }}</h2>
 
 <table style="width:100%;font-size:0.85em;border-collapse:collapse;">
     <tr style="background:#eee;">
-        <th style="text-align:left;padding:4px;">UID</th>
+        <th style="text-align:left;padding:4px;">id</th>
         <th style="text-align:left;padding:4px;">Name</th>
         <th style="text-align:left;padding:4px;">Label</th>
         <th style="text-align:left;padding:4px;">Description</th>
diff --git a/src/soa_builder/web/templates/epochs.html b/src/soa_builder/web/templates/epochs.html
index 453be17..7ca1648 100644
--- a/src/soa_builder/web/templates/epochs.html
+++ b/src/soa_builder/web/templates/epochs.html
@@ -2,6 +2,12 @@
 {% block content %}
 <h2>Epochs for SoA {{ soa_id }}</h2>
 
+<div style="margin-bottom:12px;">
+    <a href="/ui/soa/{{ soa_id }}/edit" style="background:#455a64;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px;font-size:0.9em;display:inline-block;">
+        ← Return to Edit Page
+    </a>
+</div>
+
 <div style="margin-bottom:12px">
     <form method="post" action="/ui/soa/{{ soa_id }}/epochs/create" style="display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;">
         <div style="display:flex;flex-direction:column;gap:2px;">
@@ -31,7 +37,7 @@ <h2>Epochs for SoA {{ soa_id }}</h2>
 
 <table id="epochs-table" style="width:100%;font-size:0.85em;border-collapse:collapse;">
     <tr style="background:#eee;">
-        <th style="text-align:left;padding:4px;">UID</th>
+        <th style="text-align:left;padding:4px;">id</th>
         <th style="text-align:left;padding:4px;">Order</th>
         <th style="text-align:left;padding:4px;">Name</th>
         <th style="text-align:left;padding:4px;">Label</th>
@@ -39,7 +45,14 @@ <h2>Epochs for SoA {{ soa_id }}</h2>
         <th style="text-align:left;padding:4px;">Type</th>
         <th style="text-align:left;padding:4px;">Save</th>
         <th style="text-align:left;padding:4px;">Delete</th>
-        <th style="text-align:left;padding:4px;">Reorder</th>
+        <th style="text-align:left;padding:4px;">
+            <button type="button"
+                    id="save-epoch-order-btn"
+                    data-soa-id="{{ soa_id }}"
+                    style="background:#1976d2;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;font-size:0.85em;">
+                Save Order
+            </button>
+        </th>
     </tr>
     {% for e in epochs %}
     <tr data-epoch-id="{{ e.id }}">
@@ -79,15 +92,6 @@ <h2>Epochs for SoA {{ soa_id }}</h2>
     {% endfor %}
 </table>
 
-<div style="margin-top:8px;">
-    <button type="button"
-            id="save-epoch-order-btn"
-            data-soa-id="{{ soa_id }}"
-            style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">
-        Save Epoch Order
-    </button>
-</div>
-
 <script>
 document.addEventListener('DOMContentLoaded', function () {
     var btn = document.getElementById('save-epoch-order-btn');
diff --git a/src/soa_builder/web/templates/instances.html b/src/soa_builder/web/templates/instances.html
index ae6f9bd..0d376f2 100644
--- a/src/soa_builder/web/templates/instances.html
+++ b/src/soa_builder/web/templates/instances.html
@@ -3,6 +3,12 @@
 
 <h2>Scheduled Activity Instances for SoA {{ soa_id }}</h2>
 
+<div style="margin-bottom:12px;">
+    <a href="/ui/soa/{{ soa_id }}/edit" style="background:#455a64;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px;font-size:0.9em;display:inline-block;">
+        ← Return to Edit Page
+    </a>
+</div>
+
 <div style="margin-bottom:2px;">
     <form method="post" action="/ui/soa/{{ soa_id }}/instances/create" style="display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;">
         <div style="display: flex;flex-direction: column;gap: 2px;">
@@ -65,9 +71,10 @@ <h2>Scheduled Activity Instances for SoA {{ soa_id }}</h2>
     </form>
 </div>
 
-<table style="width:100%;font-size:0.85em;border-collapse:collapse;">
+<table id="instances-table" style="width:100%;font-size:0.85em;border-collapse:collapse;">
     <tr style="background:#eee;">
-        <th style="text-align:left;padding:4px;">UID</th>
+        <th style="text-align:left;padding:4px;">id</th>
+        <th style="text-align:left;padding:4px;">Order</th>
         <th style="text-align:left;padding:4px;">Name</th>
         <th style="text-align:left;padding:4px;">Label</th>
         <th style="text-align:left;padding:4px;">Description</th>
@@ -78,12 +85,21 @@ <h2>Scheduled Activity Instances for SoA {{ soa_id }}</h2>
         <th style="text-align:left;padding:4px;">Encounter</th>
         <th style="text-align:left;padding:4px;">Member of Timeline</th>
         <th style="text-align:left;padding:4px;">Save</th>
-        <th style="text-align:left;padding:4px;">Delete Instance</th>
+        <th style="text-align:left;padding:4px;">Delete</th>
+        <th style="text-align:left;padding:4px;">
+            <button type="button"
+                    id="save-instance-order-btn"
+                    data-soa-id="{{ soa_id }}"
+                    style="background:#1976d2;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;font-size:0.85em;">
+                Save Order
+            </button>
+        </th>
     </tr>
     {% for i in instances or [] %}
-  <tr>
+  <tr data-instance-id="{{ i.id }}">
     <form method="post" action="/ui/soa/{{ soa_id }}/instances/{{ i.id }}/update">
       <td style="padding:4px;white-space:nowrap;"><strong>{{ i.instance_uid }}</strong></td>
+      <td style="padding:4px;white-space:nowrap;"><strong>{{ i.order_index }}</strong></td>
       <td style="padding:4px;"><input name="name" value="{{ i.name or '' }}" placeholder="Name" /></td>
       <td style="padding:4px;"><input name="label" value="{{ i.label or '' }}" placeholder="Label" /></td>
       <td style="padding:4px;"><input name="description" value="{{ i.description or '' }}" placeholder="Description" /></td>
@@ -127,13 +143,80 @@ <h2>Scheduled Activity Instances for SoA {{ soa_id }}</h2>
     </form>
     <td style="padding:4px;">
       <form method="post" action="/ui/soa/{{ soa_id }}/instances/{{ i.id }}/delete">
-        <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">✕</button>
+        <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
+        Delete
+        </button>
       </form>
     </td>
+    <td style="padding:4px;white-space:nowrap;">
+      <button type="button" onclick="moveInstanceRow(this, -1)">↑</button>
+      <button type="button" onclick="moveInstanceRow(this, 1)">↓</button>
+    </td>
   </tr>
     {% else %}
-    <tr><td colspan="12" style="padding:6px;color:#777;">No instances yet.</td></tr>
+    <tr><td colspan="13" style="padding:6px;color:#777;">No instances yet.</td></tr>
     {% endfor %}
 </table>
 
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    var btn = document.getElementById('save-instance-order-btn');
+    if (btn) {
+        btn.addEventListener('click', function () {
+            var soaId = btn.getAttribute('data-soa-id');
+            saveInstanceOrder(soaId);
+        });
+    }
+});
+
+function moveInstanceRow(button, dir) {
+    var row = button.closest('tr');
+    if (!row) return;
+    var table = document.getElementById('instances-table');
+    if (!table) return;
+    var tbody = table.tBodies[0] || table;
+
+    if (dir < 0) {
+        var prev = row.previousElementSibling;
+        if (prev && prev.querySelector && prev.querySelector('td')) {
+            tbody.insertBefore(row, prev);
+        }
+    } else {
+        var next = row.nextElementSibling;
+        if (next) {
+            tbody.insertBefore(next, row);
+        }
+    }
+}
+
+function saveInstanceOrder(soaId) {
+    var rows = document.querySelectorAll('#instances-table tr[data-instance-id]');
+    var order = [];
+    for (var i = 0; i < rows.length; i++) {
+        var id = parseInt(rows[i].getAttribute('data-instance-id'), 10);
+        if (!isNaN(id)) {
+            order.push(id);
+        }
+    }
+
+    fetch('/soa/' + soaId + '/instances/reorder', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        },
+        body: JSON.stringify({ order: order })
+    }).then(function (response) {
+        if (response.ok) {
+            window.location.reload();
+            return;
+        }
+        return response.text().then(function (text) {
+            alert('Reorder failed: ' + (text || ('HTTP ' + response.status)));
+        });
+    }).catch(function (error) {
+        alert('Reorder failed: ' + error.message);
+    });
+}
+</script>
+
 {% endblock %}
\ No newline at end of file
diff --git a/src/soa_builder/web/templates/rules.html b/src/soa_builder/web/templates/rules.html
index fb562d3..1a8893e 100644
--- a/src/soa_builder/web/templates/rules.html
+++ b/src/soa_builder/web/templates/rules.html
@@ -2,6 +2,12 @@
 {% block content %}
 <h2>Transition Rules for SoA {{ soa_id }}</h2>
 
+<div style="margin-bottom:12px;">
+    <a href="/ui/soa/{{ soa_id }}/edit" style="background:#455a64;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px;font-size:0.9em;display:inline-block;">
+        ← Return to Edit Page
+    </a>
+</div>
+
 <div style="margin-bottom:12px">
     <form method="post" action="/ui/soa/{{ soa_id }}/rules/create" style="display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;width:100%;">
         <div style="display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;">
@@ -26,7 +32,7 @@ <h2>Transition Rules for SoA {{ soa_id }}</h2>
 
 <table id="rules-table" style="width:100%;font-size:0.85em;border-collapse:collapse;">
     <tr style="background:#eee;">
-        <th style="text-align:left;padding:4px;">UID</th>
+        <th style="text-align:left;padding:4px;">id</th>
         <th style="text-align:left;padding:4px;">Name</th>
         <th style="text-align:left;padding:4px;">Label</th>
         <th style="text-align:left;padding:4px;">Description</th>
diff --git a/src/soa_builder/web/templates/schedule_timelines.html b/src/soa_builder/web/templates/schedule_timelines.html
index 12895e6..7c35f75 100644
--- a/src/soa_builder/web/templates/schedule_timelines.html
+++ b/src/soa_builder/web/templates/schedule_timelines.html
@@ -2,6 +2,12 @@
 {% block content %}
 <h2>Schedule Timelines for SoA {{ soa_id }}</h2>
 
+<div style="margin-bottom:12px;">
+    <a href="/ui/soa/{{ soa_id }}/edit" style="background:#455a64;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px;font-size:0.9em;display:inline-block;">
+        ← Return to Edit Page
+    </a>
+</div>
+
 <div style="margin-bottom:2px;">
     <form method="post" action="/ui/soa/{{ soa_id }}/schedule_timelines/create" style="display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;">
         <div style="display: flex;flex-direction: column;gap: 2px;">
@@ -47,7 +53,7 @@ <h2>Schedule Timelines for SoA {{ soa_id }}</h2>
 
 <table style="width:100%;font-size:0.85em;border-collapse:collapse;">
     <tr style="background:#eee;">
-        <th style="text-align:left;padding:4px;">UID</th>
+        <th style="text-align:left;padding:4px;">id</th>
         <th style="text-align:left;padding:4px;">Name</th>
         <th style="text-align:left;padding:4px;">Label</th>
         <th style="text-align:left;padding:4px;">Description</th>
diff --git a/src/soa_builder/web/templates/timings.html b/src/soa_builder/web/templates/timings.html
index a47eceb..c4c015b 100644
--- a/src/soa_builder/web/templates/timings.html
+++ b/src/soa_builder/web/templates/timings.html
@@ -2,6 +2,12 @@
 {% block content %}
 <h2>Timings for SoA {{ soa_id }}</h2>
 
+<div style="margin-bottom:12px;">
+    <a href="/ui/soa/{{ soa_id }}/edit" style="background:#455a64;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px;font-size:0.9em;display:inline-block;">
+        ← Return to Edit Page
+    </a>
+</div>
+
 <div style="margin-bottom:12px;">
   <form method="post" action="/ui/soa/{{ soa_id }}/timings/create" style="display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;">
     <div style="display:flex;flex-direction:column;gap:2px;">
@@ -87,7 +93,7 @@ <h2>Timings for SoA {{ soa_id }}</h2>
 
 <table style="width:100%;font-size:0.85em;border-collapse:collapse;">
   <tr style="background:#eee;">
-    <th style="text-align:left;padding:4px;">UID</th>
+    <th style="text-align:left;padding:4px;">id</th>
     <th style="text-align:left;padding:4px;">Name</th>
     <th style="text-align:left;padding:4px;">Label</th>
     <th style="text-align:left;padding:4px;">Description</th>