diff --git a/src/soa_builder/web/app.py b/src/soa_builder/web/app.py
index 57eb17d..dc3685f 100644
--- a/src/soa_builder/web/app.py
+++ b/src/soa_builder/web/app.py
@@ -96,6 +96,10 @@
     load_epoch_type_map,
     table_has_columns as _table_has_columns,
     iso_duration_to_days,
+    get_encounter_id,
+    get_epoch_uid,
+    get_schedule_timeline,
+    get_scheduled_activity_instance,
 )
 
 # Audit functions
@@ -3855,6 +3859,12 @@ def ui_edit(request: Request, soa_id: int):
     if not default_timeline and "unassigned" in instances_by_timeline:
         default_timeline = "unassigned"
 
+    instances_crud = instances_router.list_instances(soa_id)
+    encounter_options = get_encounter_id(soa_id)
+    epoch_options = get_epoch_uid(soa_id)
+    schedule_timelines_options = get_schedule_timeline(soa_id)
+    instance_options = get_scheduled_activity_instance(soa_id)
+
     return templates.TemplateResponse(
         request,
         "edit.html",
@@ -3862,6 +3872,11 @@ def ui_edit(request: Request, soa_id: int):
             "soa_id": soa_id,
             "epochs": epochs,
             "instances": instances,
+            "instances_crud": instances_crud,
+            "encounter_options": encounter_options,
+            "epoch_options": epoch_options,
+            "schedule_timelines_options": schedule_timelines_options,
+            "instance_options": instance_options,
             "activities": activities_page,
             "elements": elements,
             "arms": arms_enriched,
diff --git a/src/soa_builder/web/routers/instances.py b/src/soa_builder/web/routers/instances.py
index 97742b4..1cef88b 100644
--- a/src/soa_builder/web/routers/instances.py
+++ b/src/soa_builder/web/routers/instances.py
@@ -15,6 +15,7 @@
     get_epoch_uid,
     get_schedule_timeline,
     get_scheduled_activity_instance,
+    redirect_url_from_referer as _redirect_url,
 )
 
 router = APIRouter()
@@ -216,7 +217,9 @@ def ui_create_instance(
         member_of_timeline=member_of_timeline,
     )
     create_instance(soa_id, payload)
-    return RedirectResponse(url=f"/ui/soa/{int(soa_id)}/instances", status_code=303)
+    return RedirectResponse(
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/instances"), status_code=303
+    )
 
 
 # API endpoint to update a timeline instance in an SOA
@@ -388,7 +391,9 @@ def ui_update_instance(
         member_of_timeline=member_of_timeline,
     )
     update_instance(soa_id, instance_id, payload)
-    return RedirectResponse(url=f"/ui/soa/{int(soa_id)}/instances", status_code=303)
+    return RedirectResponse(
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/instances"), status_code=303
+    )
 
 
 # API endpoint to delete a timeline instance
@@ -438,7 +443,9 @@ def delete_instance(soa_id: int, instance_id: int):
 @router.post("/ui/soa/{soa_id}/instances/{instance_id}/delete")
 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)
+    return RedirectResponse(
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/instances"), status_code=303
+    )
 
 
 # API endpoint to reorder instances
diff --git a/src/soa_builder/web/routers/schedule_timelines.py b/src/soa_builder/web/routers/schedule_timelines.py
index d46830a..47d2e9c 100644
--- a/src/soa_builder/web/routers/schedule_timelines.py
+++ b/src/soa_builder/web/routers/schedule_timelines.py
@@ -9,7 +9,17 @@
 from ..audit import _record_schedule_timeline_audit
 from ..db import _connect
 from ..schemas import ScheduleTimelineUpdate, ScheduleTimelineCreate
-from ..utils import soa_exists, get_scheduled_activity_instance
+from ..utils import (
+    soa_exists,
+    get_scheduled_activity_instance,
+    get_schedule_timeline,
+    get_encounter_id,
+    get_epoch_uid,
+    get_study_timing_type,
+    redirect_url_from_referer as _redirect_url,
+)
+from .instances import list_instances
+from .timings import list_timings
 
 
 router = APIRouter()
@@ -121,6 +131,87 @@ def ui_list_schedule_timelines(request: Request, soa_id: int):
     )
 
 
+# UI combined study timing page (schedule timelines + instances + timings)
+@router.get("/ui/soa/{soa_id}/study_timing", response_class=HTMLResponse)
+def ui_study_timing(request: Request, soa_id: int):
+    if not soa_exists(soa_id):
+        raise HTTPException(404, "SOA not found")
+
+    # Schedule timelines data
+    schedule_timelines = list_schedule_timelines(soa_id)
+    instance_options = get_scheduled_activity_instance(soa_id)
+
+    # Instances data
+    instances = list_instances(soa_id)
+    encounter_options = get_encounter_id(soa_id)
+    epoch_options = get_epoch_uid(soa_id)
+    schedule_timelines_options = get_schedule_timeline(soa_id)
+
+    # Timings data (with code_uid -> submission_value decoding)
+    timings = list_timings(soa_id)
+    try:
+        sv_to_code = get_study_timing_type("C201264")
+    except Exception:
+        sv_to_code = {}
+    try:
+        sv_to_code_rtf = get_study_timing_type("C201265")
+    except Exception:
+        sv_to_code_rtf = {}
+    code_to_sv = {v: k for k, v in (sv_to_code or {}).items()}
+    code_to_sv_rtf = {v: k for k, v in (sv_to_code_rtf or {}).items()}
+    conn = _connect()
+    cur = conn.cursor()
+    cur.execute("SELECT code_uid, code FROM code WHERE soa_id=?", (soa_id,))
+    code_uid_to_code = {r[0]: r[1] for r in cur.fetchall() if r[0]}
+    cur.execute(
+        "SELECT study_id, study_label, study_description, name, created_at FROM soa WHERE id=?",
+        (soa_id,),
+    )
+    meta_row = cur.fetchone()
+    conn.close()
+    for t in timings:
+        sv = None
+        cu = t.get("type")
+        if cu and cu in code_uid_to_code:
+            sv = code_to_sv.get(str(code_uid_to_code.get(cu)))
+        t["type_submission_value"] = sv
+        rtf_sv = None
+        rtf_cu = t.get("relative_to_from")
+        if rtf_cu and rtf_cu in code_uid_to_code:
+            rtf_sv = code_to_sv_rtf.get(str(code_uid_to_code.get(rtf_cu)))
+        t["relative_to_from_submission_value"] = rtf_sv
+    timing_type_options = sorted(sv_to_code.keys()) if sv_to_code else []
+    relative_to_from_options = sorted(sv_to_code_rtf.keys()) if sv_to_code_rtf else []
+
+    study_id, study_label, study_description, study_name, study_created_at = meta_row
+    study_meta = {
+        "study_id": study_id,
+        "study_label": study_label,
+        "study_description": study_description,
+        "study_name": study_name,
+        "study_created_at": study_created_at,
+    }
+
+    return templates.TemplateResponse(
+        request,
+        "study_timing.html",
+        {
+            "request": request,
+            "soa_id": soa_id,
+            "schedule_timelines": schedule_timelines,
+            "instances": instances,
+            "timings": timings,
+            "instance_options": instance_options,
+            "encounter_options": encounter_options,
+            "epoch_options": epoch_options,
+            "schedule_timelines_options": schedule_timelines_options,
+            "timing_type_options": timing_type_options,
+            "relative_to_from_options": relative_to_from_options,
+            **study_meta,
+        },
+    )
+
+
 # API endpoint for creating a schedule timeline in an SOA
 @router.post(
     "/soa/{soa_id}/schedule_timelines",
@@ -229,7 +320,8 @@ def ui_create_schedule_timeline(
     )
     create_schedule_timeline(soa_id, payload)
     return RedirectResponse(
-        url=f"/ui/soa/{int(soa_id)}/schedule_timelines", status_code=303
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/schedule_timelines"),
+        status_code=303,
     )
 
 
@@ -387,7 +479,8 @@ def ui_update_schedule_timeline(
     )
     update_schedule_timeline(soa_id, schedule_timeline_id, payload)
     return RedirectResponse(
-        url=f"/ui/soa/{int(soa_id)}/schedule_timelines", status_code=303
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/schedule_timelines"),
+        status_code=303,
     )
 
 
@@ -451,5 +544,6 @@ def ui_delete_schedule_timeline(
 ):
     delete_schedule_timeline(soa_id, schedule_timeline_id)
     return RedirectResponse(
-        url=f"/ui/soa/{int(soa_id)}/schedule_timelines", status_code=303
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/schedule_timelines"),
+        status_code=303,
     )
diff --git a/src/soa_builder/web/routers/timings.py b/src/soa_builder/web/routers/timings.py
index f2474fc..0aa6040 100644
--- a/src/soa_builder/web/routers/timings.py
+++ b/src/soa_builder/web/routers/timings.py
@@ -18,6 +18,7 @@
     get_schedule_timeline,
     get_study_timing_type,
     get_next_code_uid as _get_next_code_uid,
+    redirect_url_from_referer as _redirect_url,
 )
 
 router = APIRouter()
@@ -332,7 +333,9 @@ def ui_create_timing(
         msgs = "; ".join(e["msg"] for e in exc.errors())
         raise HTTPException(400, f"Validation error: {msgs}")
     create_timing(soa_id, payload)
-    return RedirectResponse(url=f"/ui/soa/{int(soa_id)}/timings", status_code=303)
+    return RedirectResponse(
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/timings"), status_code=303
+    )
 
 
 @router.get("/soa/{soa_id}/timing_audit", response_class=JSONResponse)
@@ -668,7 +671,9 @@ def ui_update_timing(
         msgs = "; ".join(e["msg"] for e in exc.errors())
         raise HTTPException(400, f"Validation error: {msgs}")
     update_timing(soa_id, timing_id, payload)
-    return RedirectResponse(url=f"/ui/soa/{int(soa_id)}/timings", status_code=303)
+    return RedirectResponse(
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/timings"), status_code=303
+    )
 
 
 # API endpoint to delete a timing
@@ -719,4 +724,6 @@ def delete_timing(soa_id: int, timing_id: int):
 @router.post("/ui/soa/{soa_id}/timings/{timing_id}/delete")
 def ui_delete_timing(request: Request, soa_id: int, timing_id: int):
     delete_timing(soa_id, timing_id)
-    return RedirectResponse(url=f"/ui/soa/{int(soa_id)}/timings", status_code=303)
+    return RedirectResponse(
+        url=_redirect_url(request, f"/ui/soa/{int(soa_id)}/timings"), status_code=303
+    )
diff --git a/src/soa_builder/web/templates/_instances_section.html b/src/soa_builder/web/templates/_instances_section.html
new file mode 100644
index 0000000..38d7c29
--- /dev/null
+++ b/src/soa_builder/web/templates/_instances_section.html
@@ -0,0 +1,219 @@
+<h2>Scheduled Activity Instances for Study: {% if study_label %}{{ study_label }}{% else %}{{ study_name }}{% endif %}</h2>
+
+{% if not hide_return_link %}
+<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>
+{% endif %}
+
+<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;">
+            <label><strong>Name *</strong></label>
+            <input name="name" placeholder="Instance Name" required />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Label</strong></label>
+            <input name="label" placeholder="Label (optional)" />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Description</strong></label>
+            <input name="description" placeholder="Description (Optional)" />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Next Instance (default condition)</strong></label>
+            <select name="default_condition_uid">
+                <option value="">-- Select Activity Instance --</option>
+                {% for name, instance_uid in (instance_options or {}).items() %}
+                    <option value="{{ instance_uid }}">{{ name }}: [{{ instance_uid }}]</option>
+                {% endfor %}
+            </select>
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Epoch ID</strong></label>
+            <select name="epoch_uid">
+                <option value="">-- Select epoch --</option>
+                {% for name, epoch_uid in (epoch_options or {}).items() %}
+                    <option value="{{ epoch_uid }}">{{ name }}: [{{ epoch_uid }}]</option>
+                {% endfor %}
+            </select>
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Timeline ID</strong></label>
+            <input name="timeline_id" placeholder="Timeline ID (Optional)" />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Timeline Exit ID</strong></label>
+            <input name="timeline_exit_id" placeholder="Timeline Exit ID" />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Encounter</strong></label>
+            <select name="encounter_uid">
+                <option value="">-- Select encounter --</option>
+                {% for name, enc_uid in (encounter_options or {}).items() %}
+                    <option value="{{ enc_uid }}">{{ name }}: [{{ enc_uid }}]</option>
+                {% endfor %}
+            </select>
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Member of Timeline</strong></label>
+            <select name="member_of_timeline">
+                <option value="">-- Select Timeline --</option>
+                {% for name, schedule_timeline_uid in (schedule_timelines_options or {}).items() %}
+                    <option value="{{ schedule_timeline_uid }}">{{ name }}: [{{ schedule_timeline_uid }}]</option>
+                {% endfor %}
+            </select>
+        </div>
+        <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Instance</button>
+    </form>
+</div>
+
+<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;">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>
+        <th style="text-align:left;padding:4px;">Next Instance (default condition)</th>
+        <th style="text-align:left;padding:4px;">Epoch</th>
+        <th style="text-align:left;padding:4px;">Timeline ID</th>
+        <th style="text-align:left;padding:4px;">Timeline Exit ID</th>
+        <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</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 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>
+      <td style="padding:4px;">
+        <select name="default_condition_uid">
+            <option value="">-- Select Activity Instance --</option>
+            {% for name, instance_uid in (instance_options or {}).items() %}
+                <option value="{{ instance_uid }}" {% if (i.default_condition_uid or '') == instance_uid %}selected{% endif %}>{{ name }}</option>
+            {% endfor %}
+        </select>
+      </td>
+      <td style="padding:4px;">
+        <select name="epoch_uid">
+            <option value="">-- Select Epoch --</option>
+            {% for name, epoch_uid in (epoch_options or {}).items() %}
+                <option value="{{ epoch_uid }}" {%if i.epoch_uid == epoch_uid %}selected{% endif %}>{{ name }}</option>
+            {% endfor %}
+        </select>
+    </td>
+      <td style="padding:4px;"><input name="timeline_id" value="{{ i.timeline_id or '' }}" placeholder="Timeline ID" /></td>
+      <td style="padding:4px;"><input name="timeline_exit_id" value="{{ i.timeline_exit_id or '' }}" placeholder="Timeline Exit ID" /></td>
+      <td style="padding:4px;">
+        <select name="encounter_uid">
+            <option value="">-- Select Encounter --</option>
+            {% for name, enc_uid in (encounter_options or {}).items() %}
+                <option value="{{ enc_uid }}" {% if i.encounter_uid == enc_uid %}selected{% endif %}>{{ name }}</option>
+            {% endfor %}
+        </select>
+      </td>
+      <td style="padding: 4px;">
+        <select name="member_of_timeline">
+            <option value="">-- Select Timeline --</option>
+            {% for name, schedule_timeline_uid in (schedule_timelines_options or {}).items() %}
+                <option value="{{ schedule_timeline_uid }}" {% if (i.member_of_timeline or '') == schedule_timeline_uid %}selected{% endif %}>{{ name }}</option>
+            {% endfor %}
+        </select>
+      </td>
+      <td style="padding:4px;">
+        <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
+      </td>
+    </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;">
+        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="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>
diff --git a/src/soa_builder/web/templates/_schedule_timelines_section.html b/src/soa_builder/web/templates/_schedule_timelines_section.html
new file mode 100644
index 0000000..0e3ece4
--- /dev/null
+++ b/src/soa_builder/web/templates/_schedule_timelines_section.html
@@ -0,0 +1,107 @@
+<h2>Schedule Timelines for Study: {% if study_label %}{{ study_label }}{% else %}{{ study_name }}{% endif %}</h2>
+
+{% if not hide_return_link %}
+<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>
+{% endif %}
+
+<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;">
+            <label><strong>Name *</strong></label>
+            <input name="name" placeholder="Schedule Timeline Name" required />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Label</strong></label>
+            <input name="label" placeholder="Label (optional)" />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Description</strong></label>
+            <input name="description" placeholder="Description (Optional)" />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Main Timeline</strong></label>
+            <label style="display:flex;align-items: center;gap: 6px;">
+                <input type="checkbox" name="main_timeline" value="1" />
+                <span>Main timeline?</span>
+            </label>
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Entry Condition</strong></label>
+            <input name="entry_condition" placeholder="Entry Condition (Optional)" />
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Entry ID</strong></label>
+            <select name="entry_id">
+                <option value="">-- Select Activity Instance --</option>
+                {% for name, instance_uid in (instance_options or {}).items() %}
+                    <option value="{{ instance_uid }}">{{ name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+        <div style="display: flex;flex-direction: column;gap:2px;">
+            <label><strong>Exit ID</strong></label>
+            <input name="exit_id" placeholder="Exit ID (Optional)" />
+        </div>
+        <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Schedule Timeline</button>
+    </form>
+</div>
+
+
+<table style="width:100%;font-size:0.85em;border-collapse:collapse;">
+    <tr style="background:#eee;">
+        <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>
+        <th style="text-align:left;padding:4px;">Main Timeline</th>
+        <th style="text-align:left;padding:4px;">Entry Condition</th>
+        <th style="text-align:left;padding:4px;">Entry ID</th>
+        <th style="text-align:left;padding:4px;">Exit ID</th>
+        <th style="text-align:left;padding:4px;">Save</th>
+        <th style="text-align:left;padding:4px;">Delete</th>
+    </tr>
+    {% for st in schedule_timelines %}
+    <tr>
+        <form method="post" action="/ui/soa/{{ soa_id }}/schedule_timelines/{{ st.id }}/update">
+            <td style="padding:4px;white-space:nowrap;"><strong>{{ st.schedule_timeline_uid }}</strong></td>
+            <td style="padding:4px;"><input name="name" value="{{ st.name }}" required /></td>
+            <td style="padding:4px;"><input name="label" value="{{ st.label or '' }}" placeholder="Label" /></td>
+            <td style="padding:4px;"><input name="description" value="{{ st.description or '' }}" placeholder="Description" /></td>
+            <td style="padding:4px;">
+                <label style="display:flex;align-items:center;gap:6px;">
+                <input type="checkbox" name="main_timeline" value="1" {% if st.main_timeline %}checked{% endif %} />
+                <span>Main</span>
+                </label>
+            </td>
+            <td style="padding:4px;"><input name="entry_condition" value="{{ st.entry_condition or ''}}" placeholder="Entry Condition" /></td>
+            <td style="padding:4px;">
+                <select name="entry_id">
+                    <option value="">-- Select Activity Instance --</option>
+                    {% for name, instance_uid in (instance_options or {}).items() %}
+                        <option value="{{ instance_uid }}" {% if (st.entry_id or '') == instance_uid %}selected{% endif %}>{{ name }}</option>
+                    {% endfor %}
+                </select>
+            </td>
+            <td style="padding:4px;"><input name="exit_id" value="{{ st.exit_id or '' }}" placeholder="Exit ID" /></td>
+            <td style="padding:4px;">
+                <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
+            </td>
+        </form>
+        <td style="padding:4px;">
+            <form method="post" action="/ui/soa/{{ soa_id }}/schedule_timelines/{{ st.id }}/delete">
+                <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
+                    Delete
+                </button>
+            </form>
+        </td>
+    </tr>
+    {% else %}
+    <tr>
+        <td colspan="10" style="padding:6px;color:#777;">No schedule timelines yet.</td>
+    </tr>
+    {% endfor %}
+</table>
diff --git a/src/soa_builder/web/templates/_timings_section.html b/src/soa_builder/web/templates/_timings_section.html
new file mode 100644
index 0000000..c6d55cb
--- /dev/null
+++ b/src/soa_builder/web/templates/_timings_section.html
@@ -0,0 +1,208 @@
+<h2 title="Timing definitions should be read as 'the &lt;Timing.relativeFromScheduledInstance&gt; node is &lt;Timing.value&gt; &lt;Timing.type of before or after&gt; the &lt;Timing.relativeToScheduledInstance&gt; node.'">Timings for Study: {% if study_label %}{{ study_label }}{% else %}{{ study_name }}{% endif %}</h2>
+
+{% if not hide_return_link %}
+<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>
+{% endif %}
+
+<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;">
+      <label><strong>Name *</strong></label>
+      <input name="name" placeholder="Timing Name" required />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Label</strong></label>
+      <input name="label" placeholder="Label (optional)" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Description</strong></label>
+      <input name="description" placeholder="Description (optional)" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Relative From Schedule Instance</strong></label>
+      <select name="relative_from_schedule_instance">
+        <option value="">-- Select Activity Instance --</option>
+        {% for name, instance_uid in (instance_options or {}).items() %}
+          <option value="{{ instance_uid }}">{{ name }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Value</strong></label>
+      <input name="value" placeholder="e.g. P7D (optional)" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, P2W, PT8H, -P2D" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Value Label</strong></label>
+      <input name="value_label" placeholder="Value Label (optional)" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Type</strong></label>
+      <select name="type_submission_value">
+        <option value="">(none)</option>
+        {% for sv in timing_type_options or [] %}
+          <option value="{{ sv }}">{{ sv }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Relative To Schedule Instance</strong></label>
+      <select name="relative_to_schedule_instance">
+        <option value="">-- Select Activity Instance --</option>
+        {% for name, instance_uid in (instance_options or {}).items() %}
+          <option value="{{ instance_uid }}">{{ name }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Window Lower</strong></label>
+      <input name="window_lower" placeholder="e.g. -P2D (optional)" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, -P2D, PT8H" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Window Upper</strong></label>
+      <input name="window_upper" placeholder="e.g. P3D (optional)" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, P3D, PT8H" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Window Label</strong></label>
+      <input name="window_label" placeholder="Window (optional)" />
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Member of Timeline</strong></label>
+      <select name="member_of_timeline">
+        <option value="">-- Select Timeline --</option>
+        {% for name, schedule_timeline_uid in (schedule_timelines_options or {}).items() %}
+          <option value="{{ schedule_timeline_uid }}">{{ name }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:2px;">
+      <label><strong>Relative To/From</strong></label>
+      <select name="relative_to_from_submission_value">
+        <option value="">(none)</option>
+        {% for sv in relative_to_from_options or [] %}
+          <option value="{{ sv }}">{{ sv }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Timing</button>
+  </form>
+</div>
+
+<table style="width:100%;font-size:0.85em;border-collapse:collapse;">
+  <tr style="background:#eee;">
+    <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>
+    <th style="text-align:left;padding:4px;">Rel From Instance</th>
+    <th style="text-align:left;padding:4px;">Value</th>
+    <th style="text-align:left;padding:4px;">Value Label</th>
+    <th style="text-align:left;padding:4px;">Type</th>
+    <th style="text-align:left;padding:4px;">Rel To Instance</th>
+    <th style="text-align:left;padding:4px;">Window Lower</th>
+    <th style="text-align:left;padding:4px;">Window Upper</th>
+    <th style="text-align:left;padding:4px;">Window Label</th>
+    <th style="text-align:left;padding:4px;">Member of Timeline</th>
+    <th style="text-align:left;padding:4px;">Rel To/From</th>
+    <th style="text-align:left;padding:4px;">Save</th>
+    <th style="text-align:left;padding:4px;">Delete</th>
+  </tr>
+  {% for t in timings %}
+  <tr>
+    <form method="post" action="/ui/soa/{{ soa_id }}/timings/{{ t.id }}/update">
+      <td style="padding:4px;white-space:nowrap;"><strong>{{ t.timing_uid }}</strong></td>
+      <td style="padding:4px;"><input name="name" value="{{ t.name }}" required /></td>
+      <td style="padding:4px;"><input name="label" value="{{ t.label or '' }}" placeholder="Label" /></td>
+      <td style="padding:4px;"><input name="description" value="{{ t.description or '' }}" placeholder="Description" /></td>
+      <td style="padding: 4px;">
+        <select name="relative_from_schedule_instance">
+          <option value="">-- Select Activity Instance --</option>
+          {% for name, instance_uid in (instance_options or {}).items() %}
+            <option value="{{ instance_uid }}" {% if t.relative_from_schedule_instance == instance_uid %}selected{% endif %}>{{ name }}</option>
+          {% endfor %}
+        </select>
+      </td>
+      <td style="padding: 4px;"><input name="value" value="{{ t.value or '' }}" placeholder="e.g. P7D" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, P2W, PT8H, -P2D" /></td>
+      <td style="padding: 4px;"><input name="value_label" value="{{ t.value_label or '' }}" placeholder="Value Label" /></td>
+      <td style="padding:4px;">
+        <select name="type_submission_value">
+          <option value="">(none)</option>
+          {% for sv in timing_type_options or [] %}
+            <option value="{{ sv }}" {% if t.type_submission_value == sv %}selected{% endif %}>{{ sv }}</option>
+          {% endfor %}
+        </select>
+      </td>
+      <td style="padding: 4px;">
+        <select name="relative_to_schedule_instance">
+          <option value="">-- Select Activity Instance --</option>
+          {% for name, instance_uid in (instance_options or {}).items() %}
+            <option value="{{ instance_uid }}" {% if t.relative_to_schedule_instance == instance_uid %}selected{% endif %}>{{ name }}</option>
+          {% endfor %}
+        </select>
+      </td>
+      <td style="padding: 4px;"><input name="window_lower" value="{{ t.window_lower or '' }}" placeholder="e.g. -P2D" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, -P2D, PT8H" /></td>
+      <td style="padding: 4px;"><input name="window_upper" value="{{ t.window_upper or '' }}" placeholder="e.g. P3D" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, P3D, PT8H" /></td>
+      <td style="padding: 4px;"><input name="window_label" value="{{ t.window_label or '' }}" placeholder="Window Label" /></td>
+      <td style="padding: 4px;">
+        <select name="member_of_timeline">
+          <option value="">-- Select Timeline --</option>
+          {% for name, schedule_timeline_uid in (schedule_timelines_options or {}).items() %}
+            <option value="{{ schedule_timeline_uid }}" {% if (t.member_of_timeline or '') == schedule_timeline_uid %}selected{% endif %}>{{ name }}</option>
+          {% endfor %}
+        </select>
+      </td>
+      <td style="padding: 4px;">
+        <select name="relative_to_from_submission_value">
+          <option value="">(none)</option>
+          {% for sv in relative_to_from_options or [] %}
+            <option value="{{ sv }}" {% if t.relative_to_from_submission_value == sv %}selected{% endif %}>{{ sv }}</option>
+          {% endfor %}
+        </select>
+      </td>
+      <td style="padding:4px;">
+        <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
+      </td>
+    </form>
+    <td style="padding:4px;">
+      <form method="post" action="/ui/soa/{{ soa_id }}/timings/{{ t.id }}/delete">
+        <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
+          Delete
+        </button>
+      </form>
+    </td>
+  </tr>
+  {% else %}
+  <tr><td colspan="16" style="padding:6px;color:#777;">No timings yet.</td></tr>
+  {% endfor %}
+</table>
+
+<script>
+// If any window field has a value, all three are required
+function enforceWindowGroup(form) {
+  var wl = form.querySelector('[name="window_lower"]');
+  var wu = form.querySelector('[name="window_upper"]');
+  var wlab = form.querySelector('[name="window_label"]');
+  if (!wl || !wu || !wlab) return;
+  var anyFilled = wl.value.trim() || wu.value.trim() || wlab.value.trim();
+  var msg = anyFilled ? 'All three window fields (Lower, Upper, Label) are required when any is provided.' : '';
+  [wl, wu, wlab].forEach(function(el) {
+    if (anyFilled && !el.value.trim()) {
+      el.setCustomValidity(msg);
+      el.required = true;
+    } else {
+      el.setCustomValidity('');
+      el.required = !!anyFilled;
+    }
+  });
+}
+document.querySelectorAll('form').forEach(function(form) {
+  ['window_lower', 'window_upper', 'window_label'].forEach(function(n) {
+    var el = form.querySelector('[name="' + n + '"]');
+    if (el) el.addEventListener('input', function() { enforceWindowGroup(form); });
+  });
+  enforceWindowGroup(form);
+});
+</script>
diff --git a/src/soa_builder/web/templates/base.html b/src/soa_builder/web/templates/base.html
index b29210a..cd95642 100644
--- a/src/soa_builder/web/templates/base.html
+++ b/src/soa_builder/web/templates/base.html
@@ -11,9 +11,7 @@
       <a href="/">Home</a>
       {% if soa_id %}
         <a href="/ui/soa/{{ soa_id }}/activities">Activities</a>
-        <a href="/ui/soa/{{ soa_id }}/schedule_timelines">Schedule Timelines</a>
-        <a href="/ui/soa/{{ soa_id }}/timings">Study Timing</a>
-        <a href="/ui/soa/{{ soa_id }}/instances">Scheduled Activity Instances</a>
+        <a href="/ui/soa/{{ soa_id }}/study_timing">Study Timing</a>
         <a href="/ui/soa/{{ soa_id }}/epochs">Epochs</a>
         <a href="/ui/soa/{{ soa_id }}/arms">Arms</a>
         <a href="/ui/soa/{{ soa_id }}/study_cells">Study Cells</a>
diff --git a/src/soa_builder/web/templates/edit.html b/src/soa_builder/web/templates/edit.html
index 30bc2f0..2e51fe9 100644
--- a/src/soa_builder/web/templates/edit.html
+++ b/src/soa_builder/web/templates/edit.html
@@ -82,7 +82,14 @@ <h2>Editing SoA for {% if study_label %}{{ study_label }}{% else %}{{ study_id }
 </div>
 <div class="flex">
   <div>
-    
+
+    {% with instances=instances_crud, study_name=study_name, hide_return_link=true %}
+    <details id="edit-instances-section" open class="collapsible">
+      <summary>Scheduled Activity Instances ({{ instances_crud|length }})</summary>
+      {% include '_instances_section.html' %}
+    </details>
+    {% endwith %}
+
     <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">
@@ -370,6 +377,7 @@ <h3>Matrix: {% if timeline_instances and timeline_instances[0].timeline_name %}{
   const saved = localStorage.getItem('soa_collapse_'+sectionId);
   if(saved === '0') el.open = false;
 }
+persistSection('edit-instances-section');
 persistSection('activities-section');
 persistSection('study-cells-section');
 persistSection('transition-rules-section');
diff --git a/src/soa_builder/web/templates/instances.html b/src/soa_builder/web/templates/instances.html
index c167d46..be4d9a5 100644
--- a/src/soa_builder/web/templates/instances.html
+++ b/src/soa_builder/web/templates/instances.html
@@ -1,222 +1,4 @@
 {% extends 'base.html' %}
 {% block content %}
-
-<h2>Scheduled Activity Instances for Study: {% if study_label %}{{ study_label }}{% else %}{{ study_name }}{% endif %}</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;">
-            <label><strong>Name *</strong></label>
-            <input name="name" placeholder="Instance Name" required />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Label</strong></label>
-            <input name="label" placeholder="Label (optional)" />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Description</strong></label>
-            <input name="description" placeholder="Description (Optional)" />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Next Instance (default condition)</strong></label>
-            <select name="default_condition_uid">
-                <option value="">-- Select Activity Instance --</option>
-                {% for name, instance_uid in (instance_options or {}).items() %}
-                    <option value="{{ instance_uid }}">{{ name }}: [{{ instance_uid }}]</option>
-                {% endfor %}
-            </select>
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Epoch ID</strong></label>
-            <select name="epoch_uid">
-                <option value="">-- Select epoch --</option>
-                {% for name, epoch_uid in (epoch_options or {}).items() %}
-                    <option value="{{ epoch_uid }}">{{ name }}: [{{ epoch_uid }}]</option>
-                {% endfor %}
-            </select>
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Timeline ID</strong></label>
-            <input name="timeline_id" placeholder="Timeline ID (Optional)" />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Timeline Exit ID</strong></label>
-            <input name="timeline_exit_id" placeholder="Timeline Exit ID" />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Encounter</strong></label>
-            <select name="encounter_uid">
-                <option value="">-- Select encounter --</option>
-                {% for name, enc_uid in (encounter_options or {}).items() %}
-                    <option value="{{ enc_uid }}">{{ name }}: [{{ enc_uid }}]</option>
-                {% endfor %}
-            </select>
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Member of Timeline</strong></label>
-            <select name="member_of_timeline">
-                <option value="">-- Select Timeline --</option>
-                {% for name, schedule_timeline_uid in (schedule_timelines_options or {}).items() %}
-                    <option value="{{ schedule_timeline_uid }}">{{ name }}: [{{ schedule_timeline_uid }}]</option>
-                {% endfor %}
-            </select>
-        </div>
-        <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Instance</button>
-    </form>
-</div>
-
-<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;">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>
-        <th style="text-align:left;padding:4px;">Next Instance (default condition)</th>
-        <th style="text-align:left;padding:4px;">Epoch</th>
-        <th style="text-align:left;padding:4px;">Timeline ID</th>
-        <th style="text-align:left;padding:4px;">Timeline Exit ID</th>
-        <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</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 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>
-      <td style="padding:4px;">
-        <select name="default_condition_uid">
-            <option value="">-- Select Activity Instance --</option>
-            {% for name, instance_uid in (instance_options or {}).items() %}
-                <option value="{{ instance_uid }}" {% if (i.default_condition_uid or '') == instance_uid %}selected{% endif %}>{{ name }}</option>
-            {% endfor %}
-        </select>
-      </td>
-      <td style="padding:4px;">
-        <select name="epoch_uid">
-            <option value="">-- Select Epoch --</option>
-            {% for name, epoch_uid in (epoch_options or {}).items() %}
-                <option value="{{ epoch_uid }}" {%if i.epoch_uid == epoch_uid %}selected{% endif %}>{{ name }}</option>
-            {% endfor %}
-        </select>
-    </td>   
-      <td style="padding:4px;"><input name="timeline_id" value="{{ i.timeline_id or '' }}" placeholder="Timeline ID" /></td>
-      <td style="padding:4px;"><input name="timeline_exit_id" value="{{ i.timeline_exit_id or '' }}" placeholder="Timeline Exit ID" /></td>
-      <td style="padding:4px;">
-        <select name="encounter_uid">
-            <option value="">-- Select Encounter --</option>
-            {% for name, enc_uid in (encounter_options or {}).items() %}
-                <option value="{{ enc_uid }}" {% if i.encounter_uid == enc_uid %}selected{% endif %}>{{ name }}</option>
-            {% endfor %}
-        </select>
-      </td>
-      <td style="padding: 4px;">
-        <select name="member_of_timeline">
-            <option value="">-- Select Timeline --</option>
-            {% for name, schedule_timeline_uid in (schedule_timelines_options or {}).items() %}
-                <option value="{{ schedule_timeline_uid }}" {% if (i.member_of_timeline or '') == schedule_timeline_uid %}selected{% endif %}>{{ name }}</option>
-            {% endfor %}
-        </select>
-      </td>
-      <td style="padding:4px;">
-        <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-      </td>
-    </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;">
-        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="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
+{% include '_instances_section.html' %}
+{% endblock %}
diff --git a/src/soa_builder/web/templates/schedule_timelines.html b/src/soa_builder/web/templates/schedule_timelines.html
index 3bc65b4..d06aabf 100644
--- a/src/soa_builder/web/templates/schedule_timelines.html
+++ b/src/soa_builder/web/templates/schedule_timelines.html
@@ -1,110 +1,4 @@
 {% extends 'base.html' %}
 {% block content %}
-<h2>Schedule Timelines for Study: {% if study_label %}{{ study_label }}{% else %}{{ study_name }}{% endif %}</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;">
-            <label><strong>Name *</strong></label>
-            <input name="name" placeholder="Schedule Timeline Name" required />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Label</strong></label>
-            <input name="label" placeholder="Label (optional)" />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Description</strong></label>
-            <input name="description" placeholder="Description (Optional)" />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Main Timeline</strong></label>
-            <label style="display:flex;align-items: center;gap: 6px;">
-                <input type="checkbox" name="main_timeline" value="0" />
-                <span>Main timeline?</span>
-            </label>
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Entry Condition</strong></label>
-            <input name="entry_condition" placeholder="Entry Condition (Optional)" />
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Entry ID</strong></label>
-            <select name="entry_id">
-                <option value="">-- Select Activity Instance --</option>
-                {% for name, instance_uid in (instance_options or {}).items() %}
-                    <option value="{{ instance_uid }}">{{ name }}</option>
-                {% endfor %}
-            </select>
-        </div>
-        <div style="display: flex;flex-direction: column;gap:2px;">
-            <label><strong>Exit ID</strong></label>
-            <input name="exit_id" placeholder="Exit ID (Optional)" />
-        </div>
-        <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Schedule Timeline</button>
-    </form>
-</div>
-
-
-<table style="width:100%;font-size:0.85em;border-collapse:collapse;">
-    <tr style="background:#eee;">
-        <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>
-        <th style="text-align:left;padding:4px;">Main Timeline</th>
-        <th style="text-align:left;padding:4px;">Entry Condition</th>
-        <th style="text-align:left;padding:4px;">Entry ID</th>
-        <th style="text-align:left;padding:4px;">Exit ID</th>
-        <th style="text-align:left;padding:4px;">Save</th>
-        <th style="text-align:left;padding:4px;">Delete</th>
-    </tr>
-    {% for st in schedule_timelines %}
-    <tr>
-        <form method="post" action="/ui/soa/{{ soa_id }}/schedule_timelines/{{ st.id }}/update">
-            <td style="padding:4px;white-space:nowrap;"><strong>{{ st.schedule_timeline_uid }}</strong></td>
-            <td style="padding:4px;"><input name="name" value="{{ st.name }}" required /></td>
-            <td style="padding:4px;"><input name="label" value="{{ st.label or '' }}" placeholder="Label" /></td>
-            <td style="padding:4px;"><input name="description" value="{{ st.description or '' }}" placeholder="Description" /></td>
-            <td style="padding:4px;">
-                <label style="display:flex;align-items:center;gap:6px;">
-                <input type="checkbox" name="main_timeline" value="1" {% if st.main_timeline %}checked{% endif %} />
-                <span>Main</span>
-                </label>
-            </td>
-            <td style="padding:4px;"><input name="entry_condition" value="{{ st.entry_condition or ''}}" placeholder="Entry Condition" /></td>
-            <td style="padding:4px;">
-                <select name="entry_id">
-                    <option value="">-- Select Activity Instance --</option>
-                    {% for name, instance_uid in (instance_options or {}).items() %}
-                        <option value="{{ instance_uid }}" {% if (st.entry_id or '') == instance_uid %}selected{% endif %}>{{ name }}</option>
-                    {% endfor %}
-                </select>
-            </td>
-            <td style="padding:4px;"><input name="exit_id" value="{{ st.exit_id or '' }}" placeholder="Exit ID" /></td>
-            <td style="padding:4px;">
-                <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-            </td>
-        </form>
-        <td style="padding:4px;">
-            <form method="post" action="/ui/soa/{{ soa_id }}/schedule_timelines/{{ st.id }}/delete">
-                <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
-                    Delete
-                </button>
-            </form>
-        </td>
-    </tr>
-    {% else %}
-    <tr>
-        <td colspan="10" style="padding:6px;color:#777;">No instances yet.</td>
-    </tr>
-    {% endfor %}
-</table>
-
-
-{% endblock %}
\ No newline at end of file
+{% include '_schedule_timelines_section.html' %}
+{% endblock %}
diff --git a/src/soa_builder/web/templates/study_timing.html b/src/soa_builder/web/templates/study_timing.html
new file mode 100644
index 0000000..b66d156
--- /dev/null
+++ b/src/soa_builder/web/templates/study_timing.html
@@ -0,0 +1,48 @@
+{% extends 'base.html' %}
+{% block content %}
+<h2>Study Timing for Study: {% if study_label %}{{ study_label }}{% else %}{{ study_name }}{% endif %}</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>
+
+{% set hide_return_link = true %}
+
+<details id="study-timing-schedule-timelines" open class="collapsible">
+  <summary>Schedule Timelines</summary>
+  {% include '_schedule_timelines_section.html' %}
+</details>
+
+<details id="study-timing-instances" open class="collapsible">
+  <summary>Scheduled Activity Instances</summary>
+  {% include '_instances_section.html' %}
+</details>
+
+<details id="study-timing-timings" open class="collapsible">
+  <summary>Timings</summary>
+  {% include '_timings_section.html' %}
+</details>
+
+<style>
+  details.collapsible { border:1px solid #ddd; padding:6px 8px; border-radius:4px; background:#fafafa; margin-bottom:12px; }
+  details.collapsible summary { cursor:pointer; font-weight:600; font-size:1.1em; }
+  details.collapsible[open] { background:#fdfdfd; }
+</style>
+
+<script>
+function persistSection(sectionId) {
+  var el = document.getElementById(sectionId);
+  if (!el) return;
+  el.addEventListener('toggle', function () {
+    localStorage.setItem('soa_collapse_' + sectionId, el.open ? '1' : '0');
+  });
+  var saved = localStorage.getItem('soa_collapse_' + sectionId);
+  if (saved === '0') el.open = false;
+}
+persistSection('study-timing-schedule-timelines');
+persistSection('study-timing-instances');
+persistSection('study-timing-timings');
+</script>
+{% endblock %}
diff --git a/src/soa_builder/web/templates/timings.html b/src/soa_builder/web/templates/timings.html
index 6e2813a..7923dcb 100644
--- a/src/soa_builder/web/templates/timings.html
+++ b/src/soa_builder/web/templates/timings.html
@@ -1,209 +1,4 @@
 {% extends 'base.html' %}
 {% block content %}
-<h2 title="Timing definitions should be read as 'the <Timing.relativeFromScheduledInstance> node is <Timing.value> <Timing.type of before or after> the <Timing.relativeToScheduledInstance> node.'">Timings for Study: {% if study_label %}{{ study_label }}{% else %}{{ study_name }}{% endif %}</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;">
-      <label><strong>Name *</strong></label>
-      <input name="name" placeholder="Timing Name" required />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Label</strong></label>
-      <input name="label" placeholder="Label (optional)" />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Description</strong></label>
-      <input name="description" placeholder="Description (optional)" />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Relative From Schedule Instance</strong></label>
-      <select name="relative_from_schedule_instance">
-        <option value="">-- Select Activity Instance --</option>
-        {% for name, instance_uid in (instance_options or {}).items() %}
-          <option value="{{ instance_uid }}">{{ name }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Value</strong></label>
-      <input name="value" placeholder="e.g. P7D (optional)" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, P2W, PT8H, -P2D" />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Value Label</strong></label>
-      <input name="value_label" placeholder="Value Label (optional)" />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Type</strong></label>
-      <select name="type_submission_value">
-        <option value="">(none)</option>
-        {% for sv in timing_type_options or [] %}
-          <option value="{{ sv }}">{{ sv }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Relative To Schedule Instance</strong></label>
-      <select name="relative_to_schedule_instance">
-        <option value="">-- Select Activity Instance --</option>
-        {% for name, instance_uid in (instance_options or {}).items() %}
-          <option value="{{ instance_uid }}">{{ name }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Window Lower</strong></label>
-      <input name="window_lower" placeholder="e.g. -P2D (optional)" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, -P2D, PT8H" />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Window Upper</strong></label>
-      <input name="window_upper" placeholder="e.g. P3D (optional)" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, P3D, PT8H" />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Window Label</strong></label>
-      <input name="window_label" placeholder="Window (optional)" />
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Member of Timeline</strong></label>
-      <select name="member_of_timeline">
-        <option value="">-- Select Timeline --</option>
-        {% for name, schedule_timeline_uid in (schedule_timelines_options or {}).items() %}
-          <option value="{{ schedule_timeline_uid }}">{{ name }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div style="display:flex;flex-direction:column;gap:2px;">
-      <label><strong>Relative To/From</strong></label>
-      <select name="relative_to_from_submission_value">
-        <option value="">(none)</option>
-        {% for sv in relative_to_from_options or [] %}
-          <option value="{{ sv }}">{{ sv }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <button style="background:#1976d2;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;">Add Timing</button>
-  </form>
-</div>
-
-<table style="width:100%;font-size:0.85em;border-collapse:collapse;">
-  <tr style="background:#eee;">
-    <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>
-    <th style="text-align:left;padding:4px;">Rel From Instance</th>
-    <th style="text-align:left;padding:4px;">Value</th>
-    <th style="text-align:left;padding:4px;">Value Label</th>
-    <th style="text-align:left;padding:4px;">Type</th>
-    <th style="text-align:left;padding:4px;">Rel To Instance</th>
-    <th style="text-align:left;padding:4px;">Window Lower</th>
-    <th style="text-align:left;padding:4px;">Window Upper</th>
-    <th style="text-align:left;padding:4px;">Window Label</th>
-    <th style="text-align:left;padding:4px;">Member of Timeline</th>
-    <th style="text-align:left;padding:4px;">Rel To/From</th>
-    <th style="text-align:left;padding:4px;">Save</th>
-    <th style="text-align:left;padding:4px;">Delete</th>
-  </tr>
-  {% for t in timings %}
-  <tr>
-    <form method="post" action="/ui/soa/{{ soa_id }}/timings/{{ t.id }}/update">
-      <td style="padding:4px;white-space:nowrap;"><strong>{{ t.timing_uid }}</strong></td>
-      <td style="padding:4px;"><input name="name" value="{{ t.name }}" required /></td>
-      <td style="padding:4px;"><input name="label" value="{{ t.label or '' }}" placeholder="Label" /></td>
-      <td style="padding:4px;"><input name="description" value="{{ t.description or '' }}" placeholder="Description" /></td>
-      <td style="padding: 4px;">
-        <select name="relative_from_schedule_instance">
-          <option value="">-- Select Activity Instance --</option>
-          {% for name, instance_uid in (instance_options or {}).items() %}
-            <option value="{{ instance_uid }}" {% if t.relative_from_schedule_instance == instance_uid %}selected{% endif %}>{{ name }}</option>
-          {% endfor %}
-        </select>
-      </td>
-      <td style="padding: 4px;"><input name="value" value="{{ t.value or '' }}" placeholder="e.g. P7D" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, P2W, PT8H, -P2D" /></td>
-      <td style="padding: 4px;"><input name="value_label" value="{{ t.value_label or '' }}" placeholder="Value Label" /></td>
-      <td style="padding:4px;">
-        <select name="type_submission_value">
-          <option value="">(none)</option>
-          {% for sv in timing_type_options or [] %}
-            <option value="{{ sv }}" {% if t.type_submission_value == sv %}selected{% endif %}>{{ sv }}</option>
-          {% endfor %}
-        </select>
-      </td>
-      <td style="padding: 4px;">
-        <select name="relative_to_schedule_instance">
-          <option value="">-- Select Activity Instance --</option>
-          {% for name, instance_uid in (instance_options or {}).items() %}
-            <option value="{{ instance_uid }}" {% if t.relative_to_schedule_instance == instance_uid %}selected{% endif %}>{{ name }}</option>
-          {% endfor %}
-        </select>
-      </td>
-      <td style="padding: 4px;"><input name="window_lower" value="{{ t.window_lower or '' }}" placeholder="e.g. -P2D" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, -P2D, PT8H" /></td>
-      <td style="padding: 4px;"><input name="window_upper" value="{{ t.window_upper or '' }}" placeholder="e.g. P3D" pattern="-?P-?(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?" title="ISO 8601 duration, e.g. P1D, P3D, PT8H" /></td>
-      <td style="padding: 4px;"><input name="window_label" value="{{ t.window_label or '' }}" placeholder="Window Label" /></td>
-      <td style="padding: 4px;">
-        <select name="member_of_timeline">
-          <option value="">-- Select Timeline --</option>
-          {% for name, schedule_timeline_uid in (schedule_timelines_options or {}).items() %}
-            <option value="{{ schedule_timeline_uid }}" {% if (t.member_of_timeline or '') == schedule_timeline_uid %}selected{% endif %}>{{ name }}</option>
-          {% endfor %}
-        </select>
-      </td>
-      <td style="padding: 4px;">
-        <select name="relative_to_from_submission_value">
-          <option value="">(none)</option>
-          {% for sv in relative_to_from_options or [] %}
-            <option value="{{ sv }}" {% if t.relative_to_from_submission_value == sv %}selected{% endif %}>{{ sv }}</option>
-          {% endfor %}
-        </select>
-      </td>
-      <td style="padding:4px;">
-        <button style="background:#607d8b;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">Save</button>
-      </td>
-    </form>
-    <td style="padding:4px;">
-      <form method="post" action="/ui/soa/{{ soa_id }}/timings/{{ t.id }}/delete">
-        <button style="background:#c62828;color:#fff;border:none;padding:2px 6px;border-radius:3px;cursor:pointer;">
-          Delete
-        </button>
-      </form>
-    </td>
-  </tr>
-  {% else %}
-  <tr><td colspan="16" style="padding:6px;color:#777;">No timings yet.</td></tr>
-  {% endfor %}
-</table>
-
-<script>
-// If any window field has a value, all three are required
-function enforceWindowGroup(form) {
-  var wl = form.querySelector('[name="window_lower"]');
-  var wu = form.querySelector('[name="window_upper"]');
-  var wlab = form.querySelector('[name="window_label"]');
-  if (!wl || !wu || !wlab) return;
-  var anyFilled = wl.value.trim() || wu.value.trim() || wlab.value.trim();
-  var msg = anyFilled ? 'All three window fields (Lower, Upper, Label) are required when any is provided.' : '';
-  [wl, wu, wlab].forEach(function(el) {
-    if (anyFilled && !el.value.trim()) {
-      el.setCustomValidity(msg);
-      el.required = true;
-    } else {
-      el.setCustomValidity('');
-      el.required = !!anyFilled;
-    }
-  });
-}
-document.querySelectorAll('form').forEach(function(form) {
-  ['window_lower', 'window_upper', 'window_label'].forEach(function(n) {
-    var el = form.querySelector('[name="' + n + '"]');
-    if (el) el.addEventListener('input', function() { enforceWindowGroup(form); });
-  });
-  enforceWindowGroup(form);
-});
-</script>
+{% include '_timings_section.html' %}
 {% endblock %}
diff --git a/src/soa_builder/web/utils.py b/src/soa_builder/web/utils.py
index b6fdf8b..2a60580 100644
--- a/src/soa_builder/web/utils.py
+++ b/src/soa_builder/web/utils.py
@@ -3,6 +3,8 @@
 import re
 import requests
 import time
+from urllib.parse import urlparse, urlunparse
+from fastapi import Request
 from .db import _connect
 
 _epoch_type_cache: dict[str, Any] = {
@@ -57,6 +59,17 @@
 """
 
 
+def redirect_url_from_referer(request: Request, fallback: str) -> str:
+    """Return the Referer URL if it's a same-origin /ui/ path, else fallback."""
+    referer = request.headers.get("referer", "")
+    if referer:
+        parsed = urlparse(referer)
+        base = urlparse(str(request.base_url))
+        if parsed.netloc == base.netloc and parsed.path.startswith("/ui/"):
+            return urlunparse(("", "", parsed.path, "", parsed.query, parsed.fragment))
+    return fallback
+
+
 def iso_duration_to_days(iso_duration: str) -> float:
     """
     Convert an ISO-8601 duration (e.g. 'P1D', 'P2W', 'P1Y2M3D', 'P1DT12H')
diff --git a/tests/test_routers_study_timing.py b/tests/test_routers_study_timing.py
new file mode 100644
index 0000000..c12cca1
--- /dev/null
+++ b/tests/test_routers_study_timing.py
@@ -0,0 +1,61 @@
+"""Tests for the combined study timing UI route."""
+
+from fastapi.testclient import TestClient
+
+from soa_builder.web.app import app
+
+client = TestClient(app)
+
+
+def test_ui_study_timing_200():
+    """GET /ui/soa/{soa_id}/study_timing returns 200 HTML for a valid SoA."""
+    r = client.post("/soa", json={"name": "Study Timing 200 Test"})
+    soa_id = r.json()["id"]
+
+    resp = client.get(f"/ui/soa/{soa_id}/study_timing")
+    assert resp.status_code == 200
+    assert "text/html" in resp.headers.get("content-type", "")
+
+
+def test_ui_study_timing_contains_all_sections():
+    """Response HTML includes all three section containers."""
+    r = client.post("/soa", json={"name": "Study Timing Sections Test"})
+    soa_id = r.json()["id"]
+
+    resp = client.get(f"/ui/soa/{soa_id}/study_timing")
+    assert resp.status_code == 200
+    assert "study-timing-schedule-timelines" in resp.text
+    assert "study-timing-instances" in resp.text
+    assert "study-timing-timings" in resp.text
+
+
+def test_ui_study_timing_404_nonexistent_soa():
+    """GET /ui/soa/999999/study_timing returns 404 for nonexistent SoA."""
+    resp = client.get("/ui/soa/999999/study_timing")
+    assert resp.status_code == 404
+
+
+def test_ui_study_timing_with_data():
+    """Created entities appear in the rendered page."""
+    r = client.post("/soa", json={"name": "Study Timing Data Test"})
+    soa_id = r.json()["id"]
+
+    # Create one of each entity via API
+    client.post(
+        f"/soa/{soa_id}/schedule_timelines",
+        json={"name": "My Test Timeline"},
+    )
+    client.post(
+        f"/soa/{soa_id}/instances",
+        json={"name": "My Test Instance"},
+    )
+    client.post(
+        f"/soa/{soa_id}/timings",
+        json={"name": "My Test Timing"},
+    )
+
+    resp = client.get(f"/ui/soa/{soa_id}/study_timing")
+    assert resp.status_code == 200
+    assert "My Test Timeline" in resp.text
+    assert "My Test Instance" in resp.text
+    assert "My Test Timing" in resp.text