diff --git a/src/lib/components/schedule/schedule-action-modals/backfill-schedule-modal.svelte b/src/lib/components/schedule/schedule-action-modals/backfill-schedule-modal.svelte
new file mode 100644
index 0000000000..fa1156be3e
--- /dev/null
+++ b/src/lib/components/schedule/schedule-action-modals/backfill-schedule-modal.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import { addHours, isBefore, startOfDay } from 'date-fns';
+  import { utcToZonedTime } from 'date-fns-tz';
+
+  import DatePicker from '$lib/holocene/date-picker.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Modal from '$lib/holocene/modal.svelte';
+  import RadioCard from '$lib/holocene/radio-input/radio-card.svelte';
+  import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
+  import TimePicker from '$lib/holocene/time-picker.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    actionPending,
+    clearConfirmationModalActionTimeout,
+    closeConfirmationModal,
+    confirmationModal,
+    serverError,
+    submitBackfillSchedule,
+  } from '$lib/stores/schedules';
+  import type { OverlapPolicy } from '$lib/types/schedule';
+  import { getIdentity } from '$lib/utilities/core-context';
+
+  import { getOverlapPolicyContent } from '../constants';
+  import { dateAndTimeToTimestamp } from '../utilities/date';
+
+  interface Props {
+    scheduleOverlapPolicy?: OverlapPolicy;
+    scheduleId: string;
+    namespace: string;
+    timezoneName?: string;
+  }
+
+  const overlapPolicyContent = getOverlapPolicyContent();
+  const identity = getIdentity();
+
+  let { scheduleOverlapPolicy, scheduleId, namespace, timezoneName }: Props =
+    $props();
+
+  // svelte-ignore state_referenced_locally
+  const timezone = timezoneName || 'UTC';
+
+  // svelte-ignore state_referenced_locally
+  let selectedOverlapPolicy = writable<OverlapPolicy>(
+    scheduleOverlapPolicy ?? 'Skip',
+  );
+
+  const zonedNow = utcToZonedTime(new Date(), timezone);
+  const anHourAhead = addHours(zonedNow, 1);
+
+  let startDate = $state(startOfDay(zonedNow));
+  let startHour = $state(zonedNow.getHours().toString());
+  let startMinute = $state(zonedNow.getMinutes().toString());
+  let startSecond = $state(zonedNow.getSeconds().toString());
+
+  let endDate = $state(startOfDay(anHourAhead));
+  let endHour = $state(anHourAhead.getHours().toString());
+  let endMinute = $state(anHourAhead.getMinutes().toString());
+  let endSecond = $state(anHourAhead.getSeconds().toString());
+
+  const startTimestamp = $derived(
+    dateAndTimeToTimestamp(
+      startDate,
+      startHour,
+      startMinute,
+      startSecond,
+      timezone,
+    ),
+  );
+  const endTimestamp = $derived(
+    dateAndTimeToTimestamp(endDate, endHour, endMinute, endSecond, timezone),
+  );
+  const invalidEndTime = $derived(endTimestamp <= startTimestamp);
+
+  $effect(() => {
+    return () => clearConfirmationModalActionTimeout('backfill');
+  });
+</script>
+
+<Modal
+  id="backfill-schedule-modal"
+  large
+  open={$confirmationModal === 'backfill'}
+  confirmType="primary"
+  confirmText={translate('schedules.schedule')}
+  cancelText={translate('common.cancel')}
+  loading={$actionPending}
+  error={$serverError}
+  confirmDisabled={invalidEndTime}
+  on:confirmModal={() =>
+    submitBackfillSchedule(
+      {
+        startTime: startTimestamp,
+        endTime: endTimestamp,
+        overlapPolicy: $selectedOverlapPolicy,
+      },
+      {
+        identity,
+        scheduleId,
+        namespace,
+      },
+    )}
+  on:cancelModal={() => {
+    closeConfirmationModal('backfill');
+  }}
+>
+  <h3 slot="title">
+    {translate('schedules.schedule')}
+    {translate('schedules.backfill')}
+  </h3>
+  <div slot="content">
+    <div class="flex flex-col gap-2 p-2">
+      <DatePicker
+        id="backfill-start-date"
+        label={translate('common.start')}
+        onDateChange={(d) => (startDate = startOfDay(d))}
+        selected={startDate}
+        todayLabel={translate('common.today')}
+        closeLabel={translate('common.close')}
+        clearLabel={translate('common.clear-input-button-label')}
+      />
+      <TimePicker
+        idPrefix="backfill-start-"
+        bind:hour={startHour}
+        bind:minute={startMinute}
+        bind:second={startSecond}
+        twelveHourClock={false}
+      />
+      <DatePicker
+        id="backfill-end-date"
+        label={translate('common.end')}
+        onDateChange={(d) => (endDate = startOfDay(d))}
+        selected={endDate}
+        todayLabel={translate('common.today')}
+        closeLabel={translate('common.close')}
+        clearLabel={translate('common.clear-input-button-label')}
+        isAllowed={(d) => !isBefore(d, startDate)}
+      />
+      <TimePicker
+        idPrefix="backfill-end-"
+        bind:hour={endHour}
+        bind:minute={endMinute}
+        bind:second={endSecond}
+        twelveHourClock={false}
+        error={invalidEndTime}
+      />
+      {#if invalidEndTime}
+        <span class="text-xs text-danger" role="alert">
+          {translate('schedules.backfill-end-before-start')}
+        </span>
+      {/if}
+      <div class="flex w-full flex-row items-center gap-2">
+        <Icon name="clock" aria-hidden="true" />
+        <span class="text-xs font-normal text-slate-500"
+          >{translate('common.based-on-time-preface')}
+          {timezone === 'UTC'
+            ? translate('common.universal-standard-time')
+            : timezone}
+        </span>
+      </div>
+    </div>
+
+    <hr tabindex="-1" aria-hidden="true" class="my-4 w-full border-subtle" />
+
+    <RadioGroup name="overlap-policy" group={selectedOverlapPolicy}>
+      {#each Object.entries(overlapPolicyContent) as [value, content] (value)}
+        <RadioCard
+          id="overlap-policy-{value}"
+          value={value as OverlapPolicy}
+          label={[
+            content.label,
+            value === scheduleOverlapPolicy &&
+              translate('schedules.overlap-schedule-policy-suffix'),
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          description={content.description}
+          labelContainerClass="border-transparent p-0"
+        />
+      {/each}
+    </RadioGroup>
+  </div>
+</Modal>
diff --git a/src/lib/components/schedule/schedule-action-modals/pause-schedule-modal.svelte b/src/lib/components/schedule/schedule-action-modals/pause-schedule-modal.svelte
new file mode 100644
index 0000000000..5df41565e2
--- /dev/null
+++ b/src/lib/components/schedule/schedule-action-modals/pause-schedule-modal.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import Input from '$lib/holocene/input/input.svelte';
+  import Modal from '$lib/holocene/modal.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    actionPending,
+    clearConfirmationModalActionTimeout,
+    closeConfirmationModal,
+    confirmationModal,
+    serverError,
+    submitPauseSchedule,
+  } from '$lib/stores/schedules';
+  import { getIdentity } from '$lib/utilities/core-context';
+
+  interface Props {
+    isSchedulePaused?: boolean;
+    scheduleId: string;
+    namespace: string;
+  }
+
+  const identity = getIdentity();
+
+  let { isSchedulePaused, scheduleId, namespace }: Props = $props();
+
+  let reason = $state('');
+
+  $effect(() => {
+    return () => clearConfirmationModalActionTimeout('pause');
+  });
+</script>
+
+<Modal
+  id="pause-schedule-modal"
+  open={$confirmationModal === 'pause'}
+  confirmType="primary"
+  confirmText={isSchedulePaused
+    ? translate('schedules.unpause')
+    : translate('schedules.pause')}
+  cancelText={translate('common.cancel')}
+  confirmDisabled={!reason}
+  loading={$actionPending}
+  error={$serverError}
+  on:cancelModal={() => closeConfirmationModal('pause')}
+  on:confirmModal={() =>
+    submitPauseSchedule(reason, {
+      identity,
+      scheduleId,
+      namespace,
+      isPaused: isSchedulePaused,
+    })}
+>
+  <h3 slot="title">
+    {isSchedulePaused
+      ? translate('schedules.unpause-modal-title')
+      : translate('schedules.pause-modal-title')}
+  </h3>
+  <div slot="content">
+    <p>
+      {isSchedulePaused
+        ? translate('schedules.unpause-modal-confirmation', {
+            schedule: scheduleId,
+          })
+        : translate('schedules.pause-modal-confirmation', {
+            schedule: scheduleId,
+          })}
+    </p>
+    <p class="my-4">
+      {isSchedulePaused
+        ? translate('schedules.unpause-reason')
+        : translate('schedules.pause-reason')}
+    </p>
+    <Input
+      id="pause-reason"
+      bind:value={reason}
+      placeholder={translate('common.reason')}
+      label={translate('common.reason')}
+      labelHidden
+    />
+  </div>
+</Modal>
diff --git a/src/lib/components/schedule/schedule-action-modals/schedule-action-modals.svelte b/src/lib/components/schedule/schedule-action-modals/schedule-action-modals.svelte
new file mode 100644
index 0000000000..af33993105
--- /dev/null
+++ b/src/lib/components/schedule/schedule-action-modals/schedule-action-modals.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { confirmationModal } from '$lib/stores/schedules';
+  import type { DescribeFullSchedule } from '$lib/types/schedule';
+
+  import { parseOverlapPolicy } from '../utilities/get-form-schedule-defaults';
+
+  import BackfillScheduleModal from './backfill-schedule-modal.svelte';
+  import DeleteScheduleModal from './delete-schedule-modal.svelte';
+  import PauseScheduleModal from './pause-schedule-modal.svelte';
+  import TriggerScheduleModal from './trigger-schedule-modal.svelte';
+
+  interface Props {
+    schedule: DescribeFullSchedule;
+    namespace: string;
+    scheduleId: string;
+  }
+
+  let { schedule, namespace, scheduleId }: Props = $props();
+
+  // We are conditionally remndering each modal in order to reset modal state on open/close
+  const scheduleOverlapPolicy = $derived(
+    parseOverlapPolicy(schedule?.schedule?.policies?.overlapPolicy),
+  );
+</script>
+
+{#if $confirmationModal === 'pause'}
+  <PauseScheduleModal
+    {scheduleId}
+    {namespace}
+    isSchedulePaused={schedule?.schedule?.state?.paused}
+  />
+{:else if $confirmationModal === 'trigger'}
+  <TriggerScheduleModal {scheduleId} {namespace} {scheduleOverlapPolicy} />
+{:else if $confirmationModal === 'backfill'}
+  <BackfillScheduleModal
+    {scheduleId}
+    {namespace}
+    {scheduleOverlapPolicy}
+    timezoneName={schedule?.schedule?.spec?.timezoneName}
+  />
+{:else if $confirmationModal === 'delete'}
+  <DeleteScheduleModal {scheduleId} {namespace} />
+{/if}
diff --git a/src/lib/components/schedule/schedule-action-modals/trigger-schedule-modal.svelte b/src/lib/components/schedule/schedule-action-modals/trigger-schedule-modal.svelte
new file mode 100644
index 0000000000..f891919259
--- /dev/null
+++ b/src/lib/components/schedule/schedule-action-modals/trigger-schedule-modal.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import Modal from '$lib/holocene/modal.svelte';
+  import RadioCard from '$lib/holocene/radio-input/radio-card.svelte';
+  import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    actionPending,
+    clearConfirmationModalActionTimeout,
+    closeConfirmationModal,
+    confirmationModal,
+    serverError,
+    submitTriggerImmediatelySchedule,
+  } from '$lib/stores/schedules';
+  import type { OverlapPolicy } from '$lib/types/schedule';
+  import { getIdentity } from '$lib/utilities/core-context';
+
+  import { getOverlapPolicyContent } from '../constants';
+
+  interface Props {
+    scheduleId: string;
+    namespace: string;
+    scheduleOverlapPolicy: OverlapPolicy;
+  }
+
+  const overlapPolicyContent = getOverlapPolicyContent();
+  const identity = getIdentity();
+
+  let { scheduleId, namespace, scheduleOverlapPolicy }: Props = $props();
+
+  let selectedOverlapPolicy = writable<OverlapPolicy>('AllowAll');
+
+  $effect(() => {
+    return () => clearConfirmationModalActionTimeout('trigger');
+  });
+</script>
+
+<Modal
+  id="trigger-schedule-modal"
+  large
+  open={$confirmationModal === 'trigger'}
+  confirmType="primary"
+  confirmText={translate('schedules.trigger')}
+  cancelText={translate('common.cancel')}
+  loading={$actionPending}
+  error={$serverError}
+  on:confirmModal={() =>
+    submitTriggerImmediatelySchedule($selectedOverlapPolicy, {
+      identity,
+      scheduleId,
+      namespace,
+    })}
+  on:cancelModal={() => {
+    closeConfirmationModal('trigger');
+  }}
+>
+  <h3 slot="title">
+    {translate('schedules.trigger-modal-title')}
+  </h3>
+  <div slot="content">
+    <RadioGroup name="overlap-policy" group={selectedOverlapPolicy}>
+      {#each Object.entries(overlapPolicyContent) as [value, content] (value)}
+        <RadioCard
+          id="overlap-policy-{value}"
+          value={value as OverlapPolicy}
+          label={[
+            content.label,
+            value === scheduleOverlapPolicy &&
+              translate('schedules.overlap-schedule-policy-suffix'),
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          description={content.description}
+          labelContainerClass="border-transparent p-0"
+        />
+      {/each}
+    </RadioGroup>
+  </div>
+</Modal>
diff --git a/src/lib/components/schedule/schedule-advanced-settings.svelte b/src/lib/components/schedule/schedule-advanced-settings.svelte
deleted file mode 100644
index 195facaa51..0000000000
--- a/src/lib/components/schedule/schedule-advanced-settings.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts">
-  import Accordion from '$lib/holocene/accordion/accordion.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import { formatDuration } from '$lib/utilities/format-time';
-
-  import ScheduleNotes from './schedule-notes.svelte';
-
-  import type { SchedulePolicies, ScheduleSpec, ScheduleState } from '$types';
-
-  type Props = {
-    spec: ScheduleSpec;
-    state: ScheduleState;
-    policies: SchedulePolicies;
-    notes?: string;
-  };
-
-  const { spec, state, policies, notes = '' }: Props = $props();
-</script>
-
-<ScheduleNotes {notes} />
-<Accordion title={translate('schedules.advanced-settings')}>
-  <ul class="settings-list">
-    <li>
-      {translate('schedules.start-time')}
-      <span> {spec?.startTime ?? translate('common.none')}</span>
-    </li>
-    <li>
-      {translate('schedules.end-time')}
-      <span>{spec?.endTime ?? translate('common.none')} </span>
-    </li>
-    <li>
-      {translate('schedules.jitter')}
-      <span>{spec?.jitter ?? translate('common.none')} </span>
-    </li>
-
-    <li>
-      {translate('schedules.exclusion-calendar')}
-      <span> {spec?.excludeCalendar?.[0] ?? translate('common.none')}</span>
-    </li>
-    {#if state?.limitedActions}
-      <li>
-        {translate('schedules.remaining-actions')}
-        <span>{state?.remainingActions ?? translate('common.none')} </span>
-      </li>
-    {/if}
-    <li>
-      {translate('schedules.overlap-policy')}
-      <span>{policies?.overlapPolicy ?? translate('common.none')} </span>
-    </li>
-    <li>
-      {translate('schedules.catchup-window')}
-      <span
-        >{policies?.catchupWindow != null
-          ? formatDuration(policies.catchupWindow.toString())
-          : translate('common.none')}
-      </span>
-    </li>
-    {#if policies?.pauseOnFailure != null}
-      <li>
-        {translate('schedules.pause-on-failure')}
-        <span
-          >{policies.pauseOnFailure
-            ? translate('common.true')
-            : translate('common.false')}</span
-        >
-      </li>
-    {/if}
-    {#if policies?.keepOriginalWorkflowId != null}
-      <li>
-        {translate('schedules.keep-original-workflow-id')}
-        <span
-          >{policies.keepOriginalWorkflowId
-            ? translate('common.true')
-            : translate('common.false')}</span
-        >
-      </li>
-    {/if}
-  </ul>
-</Accordion>
-
-<style lang="postcss">
-  .settings-list {
-    @apply w-full;
-
-    li {
-      @apply flex flex-wrap items-center gap-2 border-b py-2 last-of-type:border-b-0;
-
-      span {
-        @apply surface-subtle select-all rounded-sm p-1 leading-4;
-      }
-    }
-  }
-</style>
diff --git a/src/lib/components/schedule/schedule-error.svelte b/src/lib/components/schedule/schedule-error.svelte
deleted file mode 100644
index aac7d46a49..0000000000
--- a/src/lib/components/schedule/schedule-error.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  import Alert from '$lib/holocene/alert.svelte';
-  import { translate } from '$lib/i18n/translate';
-
-  let { error = '' }: { error?: string } = $props();
-</script>
-
-<Alert intent="error">
-  <p>{translate('schedules.error-title')}</p>
-  <p>
-    {error}
-  </p>
-</Alert>
diff --git a/src/lib/components/schedule/schedule-frequency-panel.svelte b/src/lib/components/schedule/schedule-frequency-panel.svelte
deleted file mode 100644
index 1ea37e7ef4..0000000000
--- a/src/lib/components/schedule/schedule-frequency-panel.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import Panel from '$lib/components/panel.svelte';
-  import Button from '$lib/holocene/button.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
-  import { translate } from '$lib/i18n/translate';
-
-  import ScheduleFrequency from './schedule-frequency.svelte';
-
-  import type { ScheduleSpec } from '$types';
-
-  interface Props {
-    spec: ScheduleSpec;
-  }
-
-  let { spec }: Props = $props();
-
-  const hasCronString = $derived(
-    spec?.structuredCalendar?.length > 0 &&
-      !!spec?.structuredCalendar[0].comment,
-  );
-
-  let viewFullSpec = $state(false);
-</script>
-
-<Panel>
-  <div class="mb-4 flex items-center justify-between gap-4">
-    <h2>
-      {hasCronString
-        ? translate('schedules.cron-string')
-        : translate('schedules.schedule-spec')}
-    </h2>
-    <Button
-      size="xs"
-      variant="ghost"
-      on:click={() => (viewFullSpec = !viewFullSpec)}
-    >
-      {viewFullSpec
-        ? translate('schedules.hide-full-spec')
-        : translate('schedules.view-full-spec')}
-    </Button>
-  </div>
-  <ScheduleFrequency {spec} />
-  {#if viewFullSpec}
-    <CodeBlock language="json" content={JSON.stringify(spec, null, 2)} />
-  {/if}
-</Panel>
diff --git a/src/lib/components/schedule/schedule-notes.svelte b/src/lib/components/schedule/schedule-notes.svelte
deleted file mode 100644
index a133f50bfd..0000000000
--- a/src/lib/components/schedule/schedule-notes.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import { translate } from '$lib/i18n/translate';
-
-  let { notes = '' }: { notes?: string } = $props();
-</script>
-
-<div>
-  <h2 class="mb-4">{translate('common.notes')}</h2>
-  <p>{notes}</p>
-</div>
diff --git a/src/lib/components/schedule/schedule-recent-runs.svelte b/src/lib/components/schedule/schedule-recent-runs.svelte
deleted file mode 100644
index fb0fe471b5..0000000000
--- a/src/lib/components/schedule/schedule-recent-runs.svelte
+++ /dev/null
@@ -1,94 +0,0 @@
-<script lang="ts">
-  import Panel from '$lib/components/panel.svelte';
-  import Timestamp from '$lib/components/timestamp.svelte';
-  import EmptyState from '$lib/holocene/empty-state.svelte';
-  import Link from '$lib/holocene/link.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import { fetchWorkflowForSchedule } from '$lib/services/workflow-service';
-  import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
-  import {
-    routeForWorkflow,
-    routeForWorkflowsWithQuery,
-  } from '$lib/utilities/route-for';
-
-  import WorkflowStatus from '../workflow-status.svelte';
-
-  import type { ScheduleActionResult } from '$types';
-
-  type Props = {
-    recentRuns?: ScheduleActionResult[];
-    namespace: string;
-    workflowQuery: string;
-  };
-
-  let { recentRuns = [], namespace, workflowQuery }: Props = $props();
-
-  const sortRecentRuns = (recentRuns: ScheduleActionResult[]) => {
-    return (
-      recentRuns
-        ?.sort(
-          (a, b) =>
-            new Date(b.actualTime as string).getTime() -
-            new Date(a.actualTime as string).getTime(),
-        )
-        ?.slice(0, 5) ?? []
-    );
-  };
-</script>
-
-<Panel class="w-full">
-  <div class="flex justify-between">
-    <h2 class="mb-4">{translate('schedules.recent-runs')}</h2>
-    <Link
-      href={routeForWorkflowsWithQuery({
-        namespace,
-        query: workflowQuery,
-      })}
-      icon="filter"
-    >
-      {translate('common.view-all-runs')}
-    </Link>
-  </div>
-  {#each sortRecentRuns(recentRuns) as run, i (`${run?.startWorkflowResult?.workflowId ?? i}:${run?.startWorkflowResult?.runId ?? i + 1}`)}
-    {#await fetchWorkflowForSchedule({ namespace, workflowId: decodeURIForSvelte(run.startWorkflowResult.workflowId), runId: run.startWorkflowResult.runId }, fetch) then workflow}
-      <div class="row">
-        <div class="w-28">
-          <WorkflowStatus status={workflow.status} />
-        </div>
-        <div class="mx-2 w-auto break-words">
-          <Link
-            href={routeForWorkflow({
-              workflow: run.startWorkflowResult.workflowId,
-              run: run.startWorkflowResult.runId,
-              namespace,
-            })}
-          >
-            {run.startWorkflowResult.workflowId}
-          </Link>
-        </div>
-        <div class="ml-auto">
-          <Timestamp as="p" dateTime={run.actualTime} />
-        </div>
-      </div>
-    {:catch}
-      <div class="row">
-        <div class="w-28"></div>
-        <div class="w-96">
-          {run.startWorkflowResult.workflowId}
-        </div>
-        <div class="ml-auto">
-          <Timestamp as="p" dateTime={run.actualTime} />
-        </div>
-      </div>
-    {/await}
-  {/each}
-  {#if !recentRuns.length}
-    <EmptyState title={translate('schedules.recent-runs-empty-state-title')} />
-  {/if}
-</Panel>
-
-<style lang="postcss">
-  .row {
-    @apply my-1 inline-flex w-full items-center border-b border-subtle py-1;
-  }
-</style>
diff --git a/src/lib/components/schedule/schedule-upcoming-runs.svelte b/src/lib/components/schedule/schedule-upcoming-runs.svelte
deleted file mode 100644
index ba55bf7729..0000000000
--- a/src/lib/components/schedule/schedule-upcoming-runs.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-  import Panel from '$lib/components/panel.svelte';
-  import Timestamp from '$lib/components/timestamp.svelte';
-  import EmptyState from '$lib/holocene/empty-state.svelte';
-  import { translate } from '$lib/i18n/translate';
-
-  import type { Timestamp as ITimestamp } from '$types';
-
-  let { futureRuns = [] }: { futureRuns?: ITimestamp[] } = $props();
-</script>
-
-<Panel class="w-full">
-  <h2 class="mb-4">{translate('schedules.upcoming-runs')}</h2>
-  {#each futureRuns.slice(0, 5) as run}
-    <div class="row">
-      <Timestamp as="p" dateTime={run} />
-    </div>
-  {:else}
-    <EmptyState
-      title={translate('schedules.upcoming-runs-empty-state-title')}
-    />
-  {/each}
-</Panel>
-
-<style lang="postcss">
-  .row {
-    @apply my-1 inline-flex h-10 w-full justify-start border-b border-subtle py-1;
-  }
-</style>
diff --git a/src/lib/components/schedule/schedule-view/advanced-settings-card.svelte b/src/lib/components/schedule/schedule-view/advanced-settings-card.svelte
new file mode 100644
index 0000000000..f6c4571e88
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/advanced-settings-card.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { timestamp } from '$lib/components/timestamp.svelte';
+  import Accordion from '$lib/holocene/accordion/accordion.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { formatDuration } from '$lib/utilities/format-time';
+  import { fromScreamingEnum } from '$lib/utilities/screaming-enums';
+
+  import { summarizeScheduleSpec } from '../utilities/summarize';
+
+  import type { DescribeFullSchedule } from '$types/schedule';
+
+  type Props = {
+    schedule: DescribeFullSchedule;
+  };
+  let { schedule }: Props = $props();
+
+  const spec = $derived(schedule?.schedule?.spec);
+  const state = $derived(schedule?.schedule?.state);
+  const policies = $derived(schedule?.schedule?.policies);
+  const notes = $derived(schedule?.schedule?.state?.notes);
+</script>
+
+<Accordion title={translate('schedules.advanced-settings')} open>
+  <dl class="grid grid-cols-2 gap-4 text-sm">
+    <div>
+      <dt class="text-secondary">{translate('common.start-date')}</dt>
+      <dd>
+        {spec?.startTime
+          ? $timestamp(spec.startTime)
+          : translate('common.none')}
+      </dd>
+    </div>
+
+    <div>
+      <dt class="text-secondary">{translate('common.end-date')}</dt>
+      <dd>
+        {spec?.endTime ? $timestamp(spec.endTime) : translate('common.never')}
+      </dd>
+    </div>
+
+    <div>
+      <dt class="text-secondary">{translate('common.timezone-label')}</dt>
+      <dd>
+        {spec?.timezoneName || 'UTC'}
+      </dd>
+    </div>
+
+    <div>
+      <dt class="text-secondary">{translate('schedules.jitter')}</dt>
+      <dd>
+        {spec?.jitter && spec.jitter !== '0s'
+          ? String(spec.jitter)
+          : translate('common.none')}
+      </dd>
+    </div>
+
+    <div>
+      <dt class="text-secondary">{translate('schedules.overlap-policy')}</dt>
+      <dd>
+        {String(
+          fromScreamingEnum(policies?.overlapPolicy, 'ScheduleOverlapPolicy') ??
+            translate('common.none'),
+        )}
+      </dd>
+    </div>
+
+    <div>
+      <dt class="text-secondary">
+        {translate('schedules.catchup-window-policy')}
+      </dt>
+      <dd>
+        {policies?.catchupWindow != null
+          ? formatDuration(policies.catchupWindow.toString())
+          : translate('common.none')}
+      </dd>
+    </div>
+
+    <div>
+      <dt class="text-secondary">
+        {translate('schedules.pause-on-failure')}
+      </dt>
+      <dd>
+        {policies?.pauseOnFailure
+          ? translate('common.true')
+          : translate('common.false')}
+      </dd>
+    </div>
+
+    <div>
+      <dt class="text-secondary">
+        {translate('schedules.exclusion-calendar')}
+      </dt>
+      <dd>
+        {#if spec?.excludeStructuredCalendar}
+          <ul>
+            {#each summarizeScheduleSpec( { structuredCalendar: spec.excludeStructuredCalendar, timezoneName: spec.timezoneName }, ) as summary (summary)}
+              <li>{summary}</li>
+            {:else}
+              <li>{translate('common.none')}</li>
+            {/each}
+          </ul>
+        {:else}
+          {translate('common.none')}
+        {/if}
+      </dd>
+    </div>
+
+    {#if state.limitedActions}
+      <div>
+        <dt class="text-secondary">
+          {translate('schedules.remaining-actions')}
+        </dt>
+        <dd>
+          {state?.remainingActions?.toString() ?? translate('common.none')}
+        </dd>
+      </div>
+    {/if}
+
+    {#if policies?.keepOriginalWorkflowId != null}
+      <div>
+        <dt class="text-secondary">
+          {translate('schedules.keep-original-workflow-id')}
+        </dt>
+        <dd>
+          {policies?.keepOriginalWorkflowId
+            ? translate('common.true')
+            : translate('common.false')}
+        </dd>
+      </div>
+    {/if}
+
+    <div class="col-span-full">
+      <dt class="text-secondary">
+        {translate('common.notes')}
+      </dt>
+      <dd>
+        {notes ?? translate('common.none')}
+      </dd>
+    </div>
+  </dl>
+</Accordion>
diff --git a/src/lib/components/schedule/schedule-search-attributes.svelte b/src/lib/components/schedule/schedule-view/custom-search-attributes-card.svelte
similarity index 82%
rename from src/lib/components/schedule/schedule-search-attributes.svelte
rename to src/lib/components/schedule/schedule-view/custom-search-attributes-card.svelte
index 5a2b6ed6eb..a3ae3ae654 100644
--- a/src/lib/components/schedule/schedule-search-attributes.svelte
+++ b/src/lib/components/schedule/schedule-view/custom-search-attributes-card.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
   import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import { translate } from '$lib/i18n/translate';
-  import type { SearchAttribute } from '$lib/types';
+  import type { DescribeScheduleResponse } from '$lib/types';
   import { parsePayloadAttributes } from '$lib/utilities/decode-payload';
   import { payloadToString } from '$lib/utilities/payload-to-string';
   import { pluralize } from '$lib/utilities/pluralize';
 
-  let { searchAttributes }: { searchAttributes: SearchAttribute } = $props();
+  type Props = {
+    schedule: DescribeScheduleResponse;
+  };
+  let { schedule }: Props = $props();
+
+  const searchAttributes = $derived(schedule?.searchAttributes ?? {});
 
   const decodedSearchAttributes = $derived(
     parsePayloadAttributes({ searchAttributes }),
@@ -26,7 +31,7 @@
 >
   {#if searchAttributeCount}
     <ul class="w-full">
-      {#each Object.entries(indexedFields) as [searchAttrName, searchAttrValue]}
+      {#each Object.entries(indexedFields) as [searchAttrName, searchAttrValue] (`${searchAttrName}-${searchAttrValue}`)}
         {@const value = payloadToString(searchAttrValue)}
         <li
           class="flex flex-wrap items-center gap-2 border-b py-2 last-of-type:border-b-0"
diff --git a/src/lib/components/schedule/schedule-view/schedule-spec-card.svelte b/src/lib/components/schedule/schedule-view/schedule-spec-card.svelte
new file mode 100644
index 0000000000..e4a319034b
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/schedule-spec-card.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import Panel from '$lib/components/panel.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { DescribeFullSchedule } from '$lib/types/schedule';
+
+  import { getFormSpecFromSpec } from '../utilities/get-form-spec';
+  import { getScheduleSpecSummary } from '../utilities/summarize';
+
+  interface Props {
+    schedule: DescribeFullSchedule;
+  }
+
+  let { schedule }: Props = $props();
+
+  let isFullSpecVisible = $state(false);
+
+  const specs = $derived(getFormSpecFromSpec(schedule?.schedule?.spec));
+</script>
+
+<Panel class="flex w-full flex-col gap-4 border-subtle p-6" as="section">
+  <header class="mb-1 flex items-center justify-between">
+    <h2 class="text-2xl font-medium">
+      {translate('schedules.schedule-specs')}
+    </h2>
+    <Button
+      variant="ghost"
+      size="sm"
+      trailingIcon="code"
+      on:click={() => (isFullSpecVisible = !isFullSpecVisible)}
+    >
+      {isFullSpecVisible
+        ? translate('schedules.hide-full-spec')
+        : translate('schedules.view-full-spec')}
+    </Button>
+  </header>
+
+  <p class="text-xs text-secondary">
+    {translate('schedules.schedule-specs-description')}
+  </p>
+
+  <ul class="flex flex-col gap-4 text-sm">
+    {#each specs as spec (spec)}
+      <li>
+        {getScheduleSpecSummary(spec)}
+      </li>
+    {/each}
+  </ul>
+
+  {#if isFullSpecVisible}
+    <CodeBlock
+      maxHeight={300}
+      language="json"
+      content={JSON.stringify(schedule?.schedule?.spec, null, 2)}
+    />
+  {/if}
+</Panel>
diff --git a/src/lib/components/schedule/schedule-view/schedule-view-error.svelte b/src/lib/components/schedule/schedule-view/schedule-view-error.svelte
new file mode 100644
index 0000000000..7516712eaa
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/schedule-view-error.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Alert from '$lib/holocene/alert.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { routeForSchedules } from '$lib/utilities/route-for';
+
+  interface Props {
+    namespace: string;
+    scheduleId: string;
+    errorMessage?: string;
+  }
+
+  let { namespace, scheduleId, errorMessage }: Props = $props();
+</script>
+
+<header class="mb-8">
+  <div class="relative flex flex-col gap-1">
+    <Link href={routeForSchedules({ namespace })} icon="chevron-left">
+      {translate('schedules.back-to-schedules')}
+    </Link>
+    <h1 class="mt-8 select-all" data-testid="schedule-name">
+      {scheduleId}
+    </h1>
+    <p class="text-sm">
+      {namespace}
+    </p>
+  </div>
+</header>
+<Alert intent="error">
+  <p>{translate('schedules.error-title')}</p>
+  <p>
+    {errorMessage}
+  </p>
+</Alert>
diff --git a/src/lib/components/schedule/schedule-view/schedule-view-loading.svelte b/src/lib/components/schedule/schedule-view/schedule-view-loading.svelte
new file mode 100644
index 0000000000..c3e794dac8
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/schedule-view-loading.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Link from '$lib/holocene/link.svelte';
+  import Loading from '$lib/holocene/loading.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { routeForSchedules } from '$lib/utilities/route-for';
+
+  interface Props {
+    namespace: string;
+    scheduleId: string;
+  }
+
+  let { namespace, scheduleId }: Props = $props();
+</script>
+
+<header class="mb-8">
+  <div class="relative flex flex-col gap-4">
+    <Link href={routeForSchedules({ namespace })} icon="chevron-left">
+      {translate('schedules.back-to-schedules')}
+    </Link>
+    <h1 class="select-all" data-testid="schedule-name">
+      {scheduleId}
+    </h1>
+  </div>
+</header>
+<Loading />
diff --git a/src/lib/components/schedule/schedule-view/schedule-view.svelte b/src/lib/components/schedule/schedule-view/schedule-view.svelte
new file mode 100644
index 0000000000..0a2f07251e
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/schedule-view.svelte
@@ -0,0 +1,233 @@
+<script lang="ts">
+  import CodecServerErrorBanner from '$lib/components/codec-server-error-banner.svelte';
+  import StatusCounts from '$lib/components/status-counts.svelte';
+  import { timestamp } from '$lib/components/timestamp.svelte';
+  import WorkflowStatus from '$lib/components/workflow-status.svelte';
+  import Alert from '$lib/holocene/alert.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon';
+  import Link from '$lib/holocene/link.svelte';
+  import MenuItem from '$lib/holocene/menu/menu-item.svelte';
+  import SplitButton from '$lib/holocene/split-button.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { coreUserStore } from '$lib/stores/core-user';
+  import {
+    openConfirmationModal,
+    refreshCurrentScheduleFetch,
+  } from '$lib/stores/schedules';
+  import {
+    workflowCount,
+    refresh as workflowRefresh,
+  } from '$lib/stores/workflows';
+  import type { DescribeFullSchedule } from '$lib/types/schedule';
+  import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
+  import {
+    routeForScheduleEdit,
+    routeForSchedules,
+    routeForWorkflowsWithQuery,
+  } from '$lib/utilities/route-for';
+  import { writeActionsAreAllowed } from '$lib/utilities/write-actions-are-allowed';
+
+  import ScheduleActionModals from '../schedule-action-modals/schedule-action-modals.svelte';
+
+  import AdvancedSettingsCard from './advanced-settings-card.svelte';
+  import CustomSearchAttributesCard from './custom-search-attributes-card.svelte';
+  import ScheduleSpecCard from './schedule-spec-card.svelte';
+  import WorkflowInputCard from './workflow-input-card.svelte';
+  import WorkflowRunsCard from './workflow-runs-card.svelte';
+
+  interface Props {
+    schedule: DescribeFullSchedule;
+    namespace: string;
+    scheduleId: string;
+  }
+
+  let { schedule, namespace, scheduleId }: Props = $props();
+
+  const workflowQuery = $derived(`TemporalScheduledById="${scheduleId}"`);
+
+  const coreUser = coreUserStore();
+  const editDisabled = $derived(
+    $coreUser.namespaceWriteDisabled(namespace) || !writeActionsAreAllowed(),
+  );
+
+  const { copy, copied } = copyToClipboard();
+</script>
+
+<header class="mb-2 flex flex-col gap-4">
+  <Link href={routeForSchedules({ namespace })} icon="chevron-left">
+    {translate('schedules.back-to-schedules')}
+  </Link>
+  <div class="flex items-start justify-between">
+    <div class="flex flex-col gap-2">
+      <h1
+        class="flex select-all flex-wrap items-center gap-2 text-3xl"
+        data-testid="schedule-name"
+      >
+        <WorkflowStatus
+          status={schedule?.schedule.state.paused ? 'Paused' : 'Running'}
+        />
+        {scheduleId}
+      </h1>
+
+      <dl class="contents">
+        <div class="flex items-center gap-2">
+          <dt class="text-sm font-medium text-secondary">Workflow Type</dt>
+          <dd class="inline-flex items-center gap-1">
+            {schedule?.schedule?.action?.startWorkflow?.workflowType?.name}
+            <div class="flex items-center gap-2">
+              <Link
+                class="block p-1"
+                href={routeForWorkflowsWithQuery({
+                  namespace,
+                  query: [
+                    `WorkflowType="${
+                      schedule?.schedule?.action?.startWorkflow?.workflowType
+                        ?.name
+                    }"`,
+                    `TemporalScheduledById="${scheduleId}"`,
+                  ].join(' AND '),
+                })}
+              >
+                <Icon
+                  name="filter"
+                  title="Filter scheduled workflows by this type"
+                  class="h-4 w-4"
+                />
+              </Link>
+              <button
+                class="p-1 text-secondary"
+                onclick={(e) => {
+                  copy(
+                    e,
+                    schedule?.schedule?.action?.startWorkflow?.workflowType
+                      ?.name,
+                  );
+                }}
+              >
+                <Icon
+                  title={$copied
+                    ? translate('common.copy-success-icon-title')
+                    : translate('common.copy-icon-title')}
+                  name={$copied ? 'checkmark' : 'copy'}
+                  class="h-4 w-4"
+                />
+              </button>
+            </div>
+          </dd>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <dt class="text-sm font-medium text-secondary">Created</dt>
+          <dd>
+            {$timestamp(schedule?.info?.createTime)}
+          </dd>
+        </div>
+
+        {#if schedule?.info.updateTime}
+          <div class="flex items-center gap-2">
+            <dt class="text-sm font-medium text-secondary">Last Updated</dt>
+            <dd>
+              {$timestamp(schedule?.info?.updateTime)}
+            </dd>
+          </div>
+        {/if}
+      </dl>
+    </div>
+
+    <SplitButton
+      position="right"
+      label={schedule?.schedule?.state?.paused
+        ? translate('schedules.unpause')
+        : translate('schedules.pause')}
+      menuLabel={translate('schedules.schedule-actions')}
+      id="schedule-actions"
+      disabled={editDisabled}
+      on:click={() => openConfirmationModal('pause')}
+    >
+      <MenuItem
+        data-testid="trigger-schedule"
+        onclick={() => openConfirmationModal('trigger')}
+      >
+        {translate('schedules.trigger')}
+      </MenuItem>
+      <MenuItem
+        data-testid="backfill-schedule"
+        onclick={() => openConfirmationModal('backfill')}
+      >
+        {translate('schedules.backfill')}
+      </MenuItem>
+      <MenuItem
+        data-testid="edit-schedule"
+        href={routeForScheduleEdit({ namespace, scheduleId })}
+      >
+        {translate('common.edit')}
+      </MenuItem>
+      <MenuItem
+        data-testid="delete-schedule"
+        destructive
+        onclick={() => openConfirmationModal('delete')}
+      >
+        {translate('common.delete')}
+      </MenuItem>
+    </SplitButton>
+  </div>
+
+  <dl class="flex flex-col gap-2">
+    <dt class="text-sm font-medium text-secondary">Total Workflows</dt>
+    <dd class="flex flex-wrap items-center gap-2">
+      <span class="font-mono" data-testid="workflow-count"
+        >{$workflowCount.count.toLocaleString()}
+      </span>
+      <Button
+        size="xs"
+        variant="ghost"
+        leadingIcon="retry"
+        on:click={() => {
+          refreshCurrentScheduleFetch({ namespace, scheduleId });
+          $workflowRefresh = Date.now();
+        }}
+      >
+        {#if $workflowCount.newCount > 0}
+          +{$workflowCount.newCount.toLocaleString()}
+        {/if}
+      </Button>
+      <StatusCounts class="p-0" staticQuery={workflowQuery} />
+    </dd>
+  </dl>
+</header>
+<CodecServerErrorBanner />
+<div class="flex flex-col gap-4 pb-24">
+  {#if schedule?.info?.invalidScheduleError}
+    <div class="w-full xl:w-1/2">
+      <Alert intent="error">
+        <p>{translate('schedules.error-title')}</p>
+        <p>
+          {schedule?.info?.invalidScheduleError}
+        </p>
+      </Alert>
+    </div>
+  {/if}
+  <div class="flex flex-col gap-4 xl:flex-row">
+    <div class="flex w-full flex-col items-start gap-4 xl:w-2/3">
+      <WorkflowRunsCard
+        {namespace}
+        {schedule}
+        {workflowQuery}
+        openTriggerConfirmationModal={() => openConfirmationModal('trigger')}
+        openBackfillConfirmationModal={() => openConfirmationModal('backfill')}
+      />
+      <AdvancedSettingsCard {schedule} />
+      <CustomSearchAttributesCard {schedule} />
+    </div>
+
+    <div class="flex w-full flex-col gap-4 xl:w-1/3">
+      <WorkflowInputCard
+        {scheduleId}
+        input={schedule?.schedule?.action?.startWorkflow?.input}
+      />
+      <ScheduleSpecCard {schedule} />
+    </div>
+  </div>
+</div>
+<ScheduleActionModals {schedule} {namespace} {scheduleId} />
diff --git a/src/lib/components/schedule/schedule-input.svelte b/src/lib/components/schedule/schedule-view/workflow-input-card.svelte
similarity index 58%
rename from src/lib/components/schedule/schedule-input.svelte
rename to src/lib/components/schedule/schedule-view/workflow-input-card.svelte
index 33729b176c..d74190c128 100644
--- a/src/lib/components/schedule/schedule-input.svelte
+++ b/src/lib/components/schedule/schedule-view/workflow-input-card.svelte
@@ -4,18 +4,23 @@
   import { translate } from '$lib/i18n/translate';
   import type { Payloads } from '$lib/types';
 
-  let { input, scheduleId }: { input: Payloads; scheduleId: string } = $props();
+  interface Props {
+    input: Payloads;
+    scheduleId: string;
+  }
+
+  let { input, scheduleId }: Props = $props();
 </script>
 
-<Panel>
+<Panel class="flex w-full flex-col gap-4 border-subtle p-6" as="section">
   <InputAndResultsPayload
-    title={translate('schedules.schedule-input')}
+    title={translate('schedules.workflow-input')}
     content={input}
     payloadDownloadFilenameData={{ scheduleId, type: 'input' }}
   >
     {#snippet titleSnippet()}
-      <h2>
-        {translate('schedules.schedule-input')}
+      <h2 class="mb-[0.75rem] text-2xl font-medium">
+        {translate('schedules.workflow-input')}
       </h2>
     {/snippet}
   </InputAndResultsPayload>
diff --git a/src/lib/components/schedule/schedule-view/workflow-runs-card.svelte b/src/lib/components/schedule/schedule-view/workflow-runs-card.svelte
new file mode 100644
index 0000000000..9924506b78
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/workflow-runs-card.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import Panel from '$lib/components/panel.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import PillContainer from '$lib/holocene/pill-container/pill-container.svelte';
+  import Pill from '$lib/holocene/pill-container/pill.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { DescribeFullSchedule } from '$lib/types/schedule';
+  import { routeForWorkflowsWithQuery } from '$lib/utilities/route-for';
+
+  import WorkflowRunsRecent from './workflow-runs-recent.svelte';
+  import WorkflowRunsUpcoming from './workflow-runs-upcoming.svelte';
+
+  interface Props {
+    namespace: string;
+    schedule: DescribeFullSchedule;
+    workflowQuery: string;
+    openBackfillConfirmationModal: () => void;
+    openTriggerConfirmationModal: () => void;
+  }
+
+  const {
+    schedule,
+    namespace,
+    workflowQuery,
+    openBackfillConfirmationModal,
+    openTriggerConfirmationModal,
+  }: Props = $props();
+
+  const recentRuns = $derived(schedule?.info?.recentActions);
+
+  type View = 'recent' | 'upcoming';
+  let view: View = $derived(recentRuns?.length ? 'recent' : 'upcoming');
+
+  function handleViewClick(nextView: View) {
+    view = nextView;
+  }
+</script>
+
+<Panel class="flex w-full flex-col gap-4 border-subtle p-6" as="section">
+  <header class="mb-1 flex items-center justify-between">
+    <h2 class="text-2xl font-medium">{translate('schedules.workflow-runs')}</h2>
+    <Link
+      href={routeForWorkflowsWithQuery({
+        namespace,
+        query: workflowQuery,
+      })}
+    >
+      {translate('common.view-all-runs')}
+    </Link>
+  </header>
+
+  <PillContainer class="mr-auto flex flex-row p-1">
+    <Pill
+      active={view === 'recent'}
+      onClick={() => handleViewClick('recent')}
+      id="recent">Recent Runs</Pill
+    >
+    <Pill
+      active={view === 'upcoming'}
+      onClick={() => handleViewClick('upcoming')}
+      id="upcoming">Upcoming Runs</Pill
+    >
+  </PillContainer>
+
+  {#if view === 'recent'}
+    <WorkflowRunsRecent
+      {schedule}
+      {namespace}
+      {openBackfillConfirmationModal}
+      {openTriggerConfirmationModal}
+    />
+  {:else}
+    <WorkflowRunsUpcoming
+      {schedule}
+      {workflowQuery}
+      {openBackfillConfirmationModal}
+      {openTriggerConfirmationModal}
+    />
+  {/if}
+</Panel>
diff --git a/src/lib/components/schedule/schedule-view/workflow-runs-empty.svelte b/src/lib/components/schedule/schedule-view/workflow-runs-empty.svelte
new file mode 100644
index 0000000000..0299c9787d
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/workflow-runs-empty.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import { translate } from '$lib/i18n/translate';
+  interface Props {
+    class?: string;
+    title?: string;
+    description?: string;
+    openTriggerConfirmationModal: () => void;
+    openBackfillConfirmationModal: () => void;
+  }
+
+  const {
+    class: className,
+    openBackfillConfirmationModal,
+    openTriggerConfirmationModal,
+    title,
+    description,
+  }: Props = $props();
+</script>
+
+<div class={twMerge('flex flex-col items-center gap-4', className)}>
+  <Icon name="heartbeat" width={80} height={80} class="text-blue-400" />
+  {#if title}
+    <p class="text-center text-base font-medium">{title}</p>
+  {/if}
+  {#if description}
+    <p class="text-center text-sm font-medium">
+      {description}
+    </p>
+  {/if}
+
+  <div class="flex flex-col items-center gap-4 sm:flex-row">
+    <Button
+      size="sm"
+      leadingIcon="play"
+      on:click={openTriggerConfirmationModal}
+      variant="ghost"
+      class="border border-subtle"
+    >
+      {translate('schedules.trigger-now')}
+    </Button>
+    <Button
+      size="sm"
+      leadingIcon="retry"
+      on:click={openBackfillConfirmationModal}
+      variant="ghost"
+      class="border border-subtle"
+    >
+      {translate('schedules.backfill-schedule')}
+    </Button>
+  </div>
+</div>
diff --git a/src/lib/components/schedule/schedule-view/workflow-runs-recent.svelte b/src/lib/components/schedule/schedule-view/workflow-runs-recent.svelte
new file mode 100644
index 0000000000..b34db92fb9
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/workflow-runs-recent.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  import { timestamp } from '$lib/components/timestamp.svelte';
+  import WorkflowStatus from '$lib/components/workflow-status.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { DescribeFullSchedule } from '$lib/types/schedule';
+  import { getMilliseconds } from '$lib/utilities/format-time';
+  import { routeForWorkflow } from '$lib/utilities/route-for';
+  import { toWorkflowStatusReadable } from '$lib/utilities/screaming-enums';
+
+  import WorkflowRunsEmpty from './workflow-runs-empty.svelte';
+
+  interface Props {
+    class?: string;
+    namespace: string;
+    schedule: DescribeFullSchedule;
+    openBackfillConfirmationModal: () => void;
+    openTriggerConfirmationModal: () => void;
+  }
+
+  const {
+    class: className,
+    namespace,
+    schedule,
+    openBackfillConfirmationModal,
+    openTriggerConfirmationModal,
+  }: Props = $props();
+
+  const sortedRecentRuns = $derived.by(() => {
+    const runs = schedule?.info?.recentActions ?? [];
+    return runs
+      .filter(Boolean)
+      .sort(
+        (a, b) => getMilliseconds(a.actualTime) - getMilliseconds(b.actualTime),
+      )
+      .slice(0, 5);
+  });
+</script>
+
+{#if !sortedRecentRuns.length}
+  <WorkflowRunsEmpty
+    class={className}
+    title={translate('schedules.workflow-runs-empty-state-recent-title')}
+    description={translate(
+      'schedules.workflow-runs-empty-state-recent-description',
+    )}
+    {openBackfillConfirmationModal}
+    {openTriggerConfirmationModal}
+  />
+{:else}
+  <ul class={twMerge('flex flex-col gap-2', className)}>
+    {#each sortedRecentRuns as run, i (run?.startWorkflowResult?.runId ?? i)}
+      <li
+        class="grid grid-cols-[max-content_1fr] gap-x-2 gap-y-1 border-b border-subtle py-2 sm:grid-cols-[minmax(max-content,7rem)_1fr_max-content]"
+      >
+        <div class="col-start-1 row-start-1 flex items-center">
+          <WorkflowStatus
+            status={toWorkflowStatusReadable(run.startWorkflowStatus)}
+          />
+        </div>
+
+        <div
+          class="col-span-2 row-start-2 flex justify-center sm:col-span-1 sm:col-start-2 sm:row-start-1 sm:justify-start"
+        >
+          <Link
+            href={routeForWorkflow({
+              workflow: run.startWorkflowResult.workflowId,
+              run: run.startWorkflowResult.runId,
+              namespace,
+            })}
+          >
+            {run.startWorkflowResult.workflowId}
+          </Link>
+        </div>
+
+        <p
+          class="col-start-2 row-start-1 flex items-center justify-end text-end font-mono sm:col-start-3"
+        >
+          {$timestamp(run.actualTime)}
+        </p>
+      </li>
+    {/each}
+  </ul>
+{/if}
diff --git a/src/lib/components/schedule/schedule-view/workflow-runs-upcoming.svelte b/src/lib/components/schedule/schedule-view/workflow-runs-upcoming.svelte
new file mode 100644
index 0000000000..ad1389d891
--- /dev/null
+++ b/src/lib/components/schedule/schedule-view/workflow-runs-upcoming.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  import { timestamp } from '$lib/components/timestamp.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { DescribeFullSchedule } from '$lib/types/schedule';
+  import { getMilliseconds } from '$lib/utilities/format-time';
+
+  import WorkflowRunsEmpty from './workflow-runs-empty.svelte';
+
+  interface Props {
+    class?: string;
+    schedule: DescribeFullSchedule;
+    workflowQuery: string;
+    openBackfillConfirmationModal: () => void;
+    openTriggerConfirmationModal: () => void;
+  }
+
+  const {
+    class: className,
+    schedule,
+    openBackfillConfirmationModal,
+    openTriggerConfirmationModal,
+  }: Props = $props();
+
+  const sortedUpcomingRuns = $derived.by(() => {
+    const runs = schedule?.info?.futureActionTimes ?? [];
+    return runs
+      .filter(Boolean)
+      .sort((a, b) => getMilliseconds(a) - getMilliseconds(b))
+      .slice(0, 5);
+  });
+</script>
+
+{#if !sortedUpcomingRuns.length}
+  <WorkflowRunsEmpty
+    title={translate('schedules.workflow-runs-empty-state-upcoming-title')}
+    description={translate(
+      'schedules.workflow-runs-empty-state-upcoming-description',
+    )}
+    {openBackfillConfirmationModal}
+    {openTriggerConfirmationModal}
+  />
+{:else}
+  <ul class={twMerge('flex flex-col gap-2', className)}>
+    {#each sortedUpcomingRuns as run (run)}
+      <li class="gap-y-1 border-b border-subtle py-2 font-mono">
+        {$timestamp(run)}
+      </li>
+    {/each}
+  </ul>
+{/if}
diff --git a/src/lib/components/schedule/schedule-frequency.svelte b/src/lib/components/schedule/schedules-list/schedule-frequency.svelte
similarity index 54%
rename from src/lib/components/schedule/schedule-frequency.svelte
rename to src/lib/components/schedule/schedules-list/schedule-frequency.svelte
index 4536f34a40..e0e3c5c5a0 100644
--- a/src/lib/components/schedule/schedule-frequency.svelte
+++ b/src/lib/components/schedule/schedules-list/schedule-frequency.svelte
@@ -2,7 +2,8 @@
   import { type ClassNameValue, twMerge } from 'tailwind-merge';
 
   import { translate } from '$lib/i18n/translate';
-  import { getScheduleSpecLabel } from '$lib/utilities/schedule-spec-label';
+
+  import { summarizeScheduleSpec } from '../utilities/summarize';
 
   import type { ScheduleSpec } from '$types';
 
@@ -14,23 +15,19 @@
   let { spec, class: className = '' }: Props = $props();
 
   const timezoneName = $derived(spec?.timezoneName ?? 'UTC');
-  const cronString = $derived(
-    spec?.structuredCalendar?.length > 0 &&
-      !!spec?.structuredCalendar[0].comment
-      ? spec?.structuredCalendar[0].comment
-      : '',
-  );
 </script>
 
 <div class={twMerge('flex flex-col', className)}>
   <div class="flex flex-col gap-2">
-    {#if cronString}
-      <p>{cronString}</p>
-    {:else}
-      <p>{getScheduleSpecLabel(spec, timezoneName)}</p>
-    {/if}
+    <ul>
+      {#each summarizeScheduleSpec(spec) as summary (summary)}
+        <li>{summary}</li>
+      {:else}
+        <li>{translate('common.none')}</li>
+      {/each}
+    </ul>
   </div>
   <p class="text-secondary">
-    {@html translate('common.timezone', { timezone: timezoneName })}
+    {translate('common.timezone', { timezone: timezoneName })}
   </p>
 </div>
diff --git a/src/lib/components/schedule/schedules-table-row.svelte b/src/lib/components/schedule/schedules-list/schedules-table-row.svelte
similarity index 100%
rename from src/lib/components/schedule/schedules-table-row.svelte
rename to src/lib/components/schedule/schedules-list/schedules-table-row.svelte
diff --git a/src/lib/components/schedule/utilities/get-form-schedule-defaults.ts b/src/lib/components/schedule/utilities/get-form-schedule-defaults.ts
index e5b21fb022..1ef6ffd830 100644
--- a/src/lib/components/schedule/utilities/get-form-schedule-defaults.ts
+++ b/src/lib/components/schedule/utilities/get-form-schedule-defaults.ts
@@ -144,7 +144,7 @@ export function getFormScheduleDefaults(
       String(spec?.startTime || new Date().toISOString()),
       spec?.timezoneName || 'UTC',
     ),
-    jitter: Number(parseDuration(String(spec?.jitter ?? '')) || 0),
+    jitter: Number(parseDuration(spec?.jitter ?? '') || 0),
     ...getEndCondition(describeFullSchedule),
 
     overlapPolicy: parseOverlapPolicy(policies?.overlapPolicy),
diff --git a/src/lib/i18n/locales/en/schedules.ts b/src/lib/i18n/locales/en/schedules.ts
index 51d8520e5e..294d2806d5 100644
--- a/src/lib/i18n/locales/en/schedules.ts
+++ b/src/lib/i18n/locales/en/schedules.ts
@@ -271,28 +271,4 @@ export const Strings = {
   'add-another-spec': '+ Add another schedule spec',
   'run-time-based-on-timezone':
     'Based on the specified timezone ({{- timezoneName}})',
-  'schedule-input': 'Schedule Input',
-  'trigger-unspecified-title': 'Use Policy',
-  'trigger-unspecified-description': "Use the Schedule's overlap policy.",
-  'trigger-skip-title': 'Skip',
-  'trigger-skip-description':
-    'When the workflow completes, the next occurrence that is scheduled after that time is considered.',
-  'trigger-buffer-one-title': 'Buffer One',
-  'trigger-buffer-one-description':
-    'Start the workflow again as soon as the current workflow completes, but buffer only one start. If another start is scheduled to happen while the workflow is running, and a workflow is already buffered, only the first workflow starts after the running workflow completes.',
-  'trigger-buffer-all-title': 'Buffer All',
-  'trigger-buffer-all-description':
-    'Buffer any number of workflow starts to happen sequentially, beginning immediately after the running workflow completes.',
-  'trigger-cancel-other-title': 'Cancel Other',
-  'trigger-cancel-other-description':
-    'If another workflow is running, cancel it. After the previous workflow completes cancellation, start the new workflow.',
-  'trigger-terminate-other-title': 'Terminate Other',
-  'trigger-terminate-other-description':
-    'If another workflow is running, terminate it and start the new workflow immediately.',
-  'trigger-allow-all-title': 'Allow All',
-  'trigger-allow-all-description':
-    "Start any number of concurrent workflows. Last completion result and last failure aren't available because the workflows aren't sequential.",
-  'catchup-window': 'Catchup Window',
-  'crow-view-example-description':
-    'Temporal Workflow Schedule Cron strings follow this format:',
 } as const;
diff --git a/src/lib/pages/schedule-view.svelte b/src/lib/pages/schedule-view.svelte
index 5fef2a453e..ea2516b967 100644
--- a/src/lib/pages/schedule-view.svelte
+++ b/src/lib/pages/schedule-view.svelte
@@ -1,619 +1,33 @@
 <script lang="ts">
-  import { writable } from 'svelte/store';
+  import { page } from '$app/state';
 
-  import { addDays, addHours, startOfDay } from 'date-fns';
-  import { onDestroy } from 'svelte';
-
-  import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
-
-  import CodecServerErrorBanner from '$lib/components/codec-server-error-banner.svelte';
-  import ScheduleAdvancedSettings from '$lib/components/schedule/schedule-advanced-settings.svelte';
-  import ScheduleError from '$lib/components/schedule/schedule-error.svelte';
-  import ScheduleFrequencyPanel from '$lib/components/schedule/schedule-frequency-panel.svelte';
-  import ScheduleInput from '$lib/components/schedule/schedule-input.svelte';
-  import ScheduleRecentRuns from '$lib/components/schedule/schedule-recent-runs.svelte';
-  import ScheduleSearchAttributes from '$lib/components/schedule/schedule-search-attributes.svelte';
-  import ScheduleUpcomingRuns from '$lib/components/schedule/schedule-upcoming-runs.svelte';
-  import StatusCounts from '$lib/components/status-counts.svelte';
-  import Timestamp from '$lib/components/timestamp.svelte';
-  import WorkflowStatus from '$lib/components/workflow-status.svelte';
-  import Button from '$lib/holocene/button.svelte';
-  import DatePicker from '$lib/holocene/date-picker.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import Input from '$lib/holocene/input/input.svelte';
-  import Link from '$lib/holocene/link.svelte';
+  import ScheduleViewError from '$lib/components/schedule/schedule-view/schedule-view-error.svelte';
+  import ScheduleViewLoading from '$lib/components/schedule/schedule-view/schedule-view-loading.svelte';
+  import ScheduleView from '$lib/components/schedule/schedule-view/schedule-view.svelte';
   import Loading from '$lib/holocene/loading.svelte';
-  import MenuItem from '$lib/holocene/menu/menu-item.svelte';
-  import Modal from '$lib/holocene/modal.svelte';
-  import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
-  import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
-  import SplitButton from '$lib/holocene/split-button.svelte';
-  import TimePicker from '$lib/holocene/time-picker.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import Translate from '$lib/i18n/translate.svelte';
   import {
-    backfillRequest,
-    deleteSchedule,
-    fetchSchedule,
-    pauseSchedule,
-    triggerImmediately,
-    unpauseSchedule,
-  } from '$lib/services/schedule-service';
-  import { coreUserStore } from '$lib/stores/core-user';
-  import { loading } from '$lib/stores/schedules';
-  import { refresh, workflowCount } from '$lib/stores/workflows';
-  import type { OverlapPolicy } from '$lib/types/schedule';
-  import { getIdentity } from '$lib/utilities/core-context';
+    currentScheduleFetch,
+    loading,
+    refreshCurrentScheduleFetch,
+  } from '$lib/stores/schedules';
   import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
-  import { getUTCString } from '$lib/utilities/format-date';
-  import {
-    routeForScheduleEdit,
-    routeForSchedules,
-  } from '$lib/utilities/route-for';
-  import { writeActionsAreAllowed } from '$lib/utilities/write-actions-are-allowed';
-
-  import type { DescribeScheduleResponse } from '$types';
-
-  let namespace = $page.params.namespace;
-  let scheduleId = $page.params.schedule;
-  let workflowQuery = `TemporalScheduledById="${scheduleId}"`;
-
-  const identity = getIdentity();
-
-  const parameters = {
-    namespace,
-    scheduleId: decodeURIForSvelte(scheduleId),
-  };
-
-  let scheduleFetch = fetchSchedule(parameters);
-
-  let pauseConfirmationModalOpen = false;
-  let triggerConfirmationModalOpen = false;
-  let backfillConfirmationModalOpen = false;
-  let deleteConfirmationModalOpen = false;
-  let reason = '';
-  let error = '';
-  let scheduleUpdating = false;
-  let overlapPolicy = writable<OverlapPolicy>('Unspecified');
-  let deleteTimeout: ReturnType<typeof setTimeout>;
-  let triggerTimeout: ReturnType<typeof setTimeout>;
-  let backfillTimeout: ReturnType<typeof setTimeout>;
-  let policies: { label: string; description: string; value: OverlapPolicy }[] =
-    [
-      {
-        description: translate('schedules.trigger-unspecified-description'),
-        label: translate('schedules.trigger-unspecified-title'),
-        value: 'Unspecified',
-      },
-      {
-        description: translate('schedules.trigger-buffer-all-description'),
-        label: translate('schedules.trigger-buffer-all-title'),
-        value: 'BufferAll',
-      },
-      {
-        description: translate('schedules.trigger-allow-all-description'),
-        label: translate('schedules.trigger-allow-all-title'),
-        value: 'AllowAll',
-      },
-      {
-        description: translate('schedules.trigger-skip-description'),
-        label: translate('schedules.trigger-skip-title'),
-        value: 'Skip',
-      },
-      {
-        description: translate('schedules.trigger-buffer-one-description'),
-        label: translate('schedules.trigger-buffer-one-title'),
-        value: 'BufferOne',
-      },
-      {
-        description: translate('schedules.trigger-cancel-other-description'),
-        label: translate('schedules.trigger-cancel-other-title'),
-        value: 'CancelOther',
-      },
-      {
-        description: translate('schedules.trigger-terminate-other-description'),
-        label: translate('schedules.trigger-terminate-other-title'),
-        value: 'TerminateOther',
-      },
-    ];
-
-  let coreUser = coreUserStore();
-  $: editDisabled =
-    $coreUser.namespaceWriteDisabled(namespace) || !writeActionsAreAllowed();
-
-  const handleDelete = async () => {
-    error = '';
-    try {
-      $loading = true;
-      await deleteSchedule({ identity, namespace, scheduleId });
-      deleteConfirmationModalOpen = false;
-      clearTimeout(deleteTimeout);
-      deleteTimeout = setTimeout(() => {
-        $loading = false;
-        goto(routeForSchedules({ namespace }));
-      }, 2000);
-      reason = '';
-    } catch (e) {
-      error = translate('schedules.delete-schedule-error', {
-        error: e?.message,
-      });
-      $loading = false;
-    }
-  };
-
-  const handlePause = async (schedule: DescribeScheduleResponse) => {
-    schedule?.schedule?.state?.paused
-      ? await unpauseSchedule({
-          identity,
-          namespace,
-          scheduleId,
-          reason,
-        })
-      : await pauseSchedule({
-          identity,
-          namespace,
-          scheduleId,
-          reason,
-        });
-    scheduleFetch = fetchSchedule(parameters);
-    reason = '';
-    pauseConfirmationModalOpen = false;
-  };
-
-  const closeTriggerModal = () => {
-    triggerConfirmationModalOpen = false;
-    $overlapPolicy = 'Unspecified';
-  };
-
-  const handleTriggerImmediately = async () => {
-    scheduleUpdating = true;
-    await triggerImmediately({
-      identity,
-      namespace,
-      scheduleId,
-      overlapPolicy: $overlapPolicy,
-    });
-    clearTimeout(triggerTimeout);
-    triggerTimeout = setTimeout(() => {
-      scheduleFetch = fetchSchedule(parameters);
-      closeTriggerModal();
-      scheduleUpdating = false;
-    }, 1000);
-  };
 
-  let viewMoreBackfillOptions = false;
-  let startDate = startOfDay(new Date());
-  let endDate = startOfDay(new Date());
+  const namespace = $derived(page.params.namespace);
+  const scheduleId = $derived(decodeURIForSvelte(page.params.schedule));
 
-  let startHour = '';
-  let startMinute = '';
-  let startSecond = '';
-  let endHour = '';
-  let endMinute = '';
-  let endSecond = '';
-
-  const onStartDateChange = (d: Date) => {
-    startDate = startOfDay(d);
-  };
-
-  const onEndDateChange = (d: Date) => {
-    endDate = startOfDay(d);
-  };
-
-  const updateDefaultBackfillTimes = () => {
-    const currentDate = new Date(Date.now());
-    const dateAnHourAhead = addHours(currentDate, 1);
-
-    startHour = currentDate.getUTCHours().toString();
-    startMinute = currentDate.getUTCMinutes().toString();
-    startSecond = currentDate.getUTCSeconds().toString();
-    endHour = dateAnHourAhead.getUTCHours().toString();
-    endMinute = dateAnHourAhead.getUTCMinutes().toString();
-    endSecond = dateAnHourAhead.getUTCSeconds().toString();
-
-    startDate = startOfDay(new Date());
-    endDate =
-      endHour < startHour
-        ? startOfDay(addDays(new Date(), 1))
-        : startOfDay(new Date());
-  };
-
-  $: backfillConfirmationModalOpen && updateDefaultBackfillTimes();
-
-  const closeBackfillModal = () => {
-    backfillConfirmationModalOpen = false;
-    viewMoreBackfillOptions = false;
-    $overlapPolicy = 'Unspecified';
-  };
-
-  const handleBackfill = async () => {
-    scheduleUpdating = true;
-
-    const startTime = getUTCString({
-      date: startDate,
-      hour: startHour,
-      minute: startMinute,
-      second: startSecond,
-    });
-    const endTime = getUTCString({
-      date: endDate,
-      hour: endHour,
-      minute: endMinute,
-      second: endSecond,
-    });
-
-    await backfillRequest({
-      identity,
-      namespace,
-      scheduleId,
-      overlapPolicy: $overlapPolicy,
-      startTime,
-      endTime,
-    });
-    clearTimeout(backfillTimeout);
-    backfillTimeout = setTimeout(() => {
-      scheduleFetch = fetchSchedule(parameters);
-      closeBackfillModal();
-      scheduleUpdating = false;
-    }, 1000);
-  };
-
-  const resetReason = () => {
-    reason = '';
-  };
-
-  onDestroy(() => {
-    clearTimeout(deleteTimeout);
-    clearTimeout(triggerTimeout);
-    clearTimeout(backfillTimeout);
+  $effect.pre(() => {
+    refreshCurrentScheduleFetch({ namespace, scheduleId });
   });
 </script>
 
-{#await scheduleFetch}
-  <header class="mb-8">
-    <div class="relative flex flex-col gap-4">
-      <Link href={routeForSchedules({ namespace })} icon="chevron-left">
-        {translate('schedules.back-to-schedules')}
-      </Link>
-      <h1 class="select-all" data-testid="schedule-name">
-        {scheduleId}
-      </h1>
-    </div>
-  </header>
-  <Loading />
-{:then schedule}
-  {#if $loading}
+{#await $currentScheduleFetch}
+  <ScheduleViewLoading {namespace} {scheduleId} />
+{:then currentSchedule}
+  {#if $loading || !currentSchedule}
     <Loading class="my-2" />
   {:else}
-    <header class="flex flex-row flex-wrap justify-between gap-4">
-      <div class="relative flex flex-col">
-        <Link href={routeForSchedules({ namespace })} icon="chevron-left">
-          {translate('schedules.back-to-schedules')}
-        </Link>
-        <h1 class="relative flex items-center">
-          <span class="select-all" data-testid="schedule-name">
-            {scheduleId}
-          </span>
-        </h1>
-        <div class="flex flex-wrap items-center gap-2 text-lg">
-          <WorkflowStatus
-            status={schedule?.schedule.state.paused ? 'Paused' : 'Running'}
-          />
-          <p>
-            {schedule?.schedule?.action?.startWorkflow?.workflowType?.name}
-          </p>
-        </div>
-        <Timestamp
-          as="p"
-          class="flex items-center gap-2 text-right text-sm"
-          dateTime={schedule?.info?.createTime}
-        >
-          {#snippet leading()}
-            Created
-          {/snippet}
-        </Timestamp>
-        {#if schedule?.info?.updateTime}
-          <Timestamp
-            as="p"
-            class="flex items-center gap-2 text-right text-sm"
-            dateTime={schedule?.info?.updateTime}
-          >
-            {#snippet leading()}
-              Last Updated
-            {/snippet}
-          </Timestamp>
-        {/if}
-      </div>
-      <SplitButton
-        position="right"
-        label={schedule?.schedule?.state?.paused
-          ? translate('schedules.unpause')
-          : translate('schedules.pause')}
-        menuLabel={translate('schedules.schedule-actions')}
-        id="schedule-actions"
-        disabled={editDisabled}
-        on:click={() => (pauseConfirmationModalOpen = true)}
-      >
-        <MenuItem
-          data-testid="trigger-schedule"
-          onclick={() => (triggerConfirmationModalOpen = true)}
-        >
-          {translate('schedules.trigger')}
-        </MenuItem>
-        <MenuItem
-          data-testid="backfill-schedule"
-          onclick={() => (backfillConfirmationModalOpen = true)}
-        >
-          {translate('schedules.backfill')}
-        </MenuItem>
-        <MenuItem
-          data-testid="edit-schedule"
-          href={routeForScheduleEdit({ namespace, scheduleId })}
-        >
-          {translate('common.edit')}
-        </MenuItem>
-        <MenuItem
-          data-testid="delete-schedule"
-          destructive
-          onclick={() => (deleteConfirmationModalOpen = true)}
-        >
-          {translate('common.delete')}
-        </MenuItem>
-      </SplitButton>
-    </header>
-    <CodecServerErrorBanner />
-    <div class="flex flex-col gap-4 pb-24">
-      {#if schedule?.info?.invalidScheduleError}
-        <div class="w-full xl:w-1/2">
-          <ScheduleError error={schedule?.info?.invalidScheduleError} />
-        </div>
-      {/if}
-      <div class="flex w-full flex-col gap-2 text-lg">
-        <div class="flex items-center gap-2">
-          <span data-testid="workflow-count"
-            >{$workflowCount.count.toLocaleString()}
-            <Translate
-              key="common.workflows-plural"
-              count={$workflowCount.count}
-            />
-          </span>
-          <Button
-            size="xs"
-            variant="ghost"
-            leadingIcon="retry"
-            on:click={() => {
-              scheduleFetch = fetchSchedule(parameters);
-              $refresh = Date.now();
-            }}
-          >
-            {#if $workflowCount.newCount > 0}
-              +{$workflowCount.newCount.toLocaleString()}
-            {/if}
-          </Button>
-        </div>
-        <StatusCounts staticQuery={workflowQuery} />
-      </div>
-      <div class="flex flex-col gap-4 xl:flex-row">
-        <div class="flex w-full flex-col items-start gap-4 xl:w-2/3">
-          <ScheduleRecentRuns
-            {namespace}
-            recentRuns={schedule?.info?.recentActions}
-            {workflowQuery}
-          />
-          <ScheduleUpcomingRuns
-            futureRuns={schedule?.info?.futureActionTimes}
-          />
-          <ScheduleAdvancedSettings
-            spec={schedule?.schedule?.spec}
-            state={schedule?.schedule?.state}
-            policies={schedule?.schedule?.policies}
-            notes={schedule?.schedule?.state?.notes}
-          />
-          <ScheduleSearchAttributes
-            searchAttributes={schedule?.searchAttributes ?? {}}
-          />
-        </div>
-        <div class="flex w-full flex-col gap-4 xl:w-1/3">
-          <ScheduleInput
-            {scheduleId}
-            input={schedule?.schedule?.action?.startWorkflow?.input}
-          />
-          <ScheduleFrequencyPanel spec={schedule?.schedule?.spec} />
-        </div>
-      </div>
-    </div>
-    <Modal
-      id="pause-schedule-modal"
-      bind:open={pauseConfirmationModalOpen}
-      confirmType="primary"
-      confirmText={schedule?.schedule.state.paused
-        ? translate('schedules.unpause')
-        : translate('schedules.pause')}
-      cancelText={translate('common.cancel')}
-      confirmDisabled={!reason}
-      on:confirmModal={() => handlePause(schedule)}
-      on:cancelModal={resetReason}
-    >
-      <h3 slot="title">
-        {schedule?.schedule.state.paused
-          ? translate('schedules.unpause-modal-title')
-          : translate('schedules.pause-modal-title')}
-      </h3>
-      <div slot="content">
-        <p>
-          {schedule?.schedule.state.paused
-            ? translate('schedules.unpause-modal-confirmation', {
-                schedule: scheduleId,
-              })
-            : translate('schedules.pause-modal-confirmation', {
-                schedule: scheduleId,
-              })}
-        </p>
-        <p class="my-4">
-          {schedule?.schedule.state.paused
-            ? translate('schedules.unpause-reason')
-            : translate('schedules.pause-reason')}
-        </p>
-        <Input
-          id="pause-reason"
-          bind:value={reason}
-          placeholder={translate('common.reason')}
-          label={translate('common.reason')}
-          labelHidden
-        />
-      </div>
-    </Modal>
-    <Modal
-      id="trigger-schedule-modal"
-      large
-      bind:open={triggerConfirmationModalOpen}
-      confirmType="primary"
-      confirmText={translate('schedules.trigger')}
-      cancelText={translate('common.cancel')}
-      loading={scheduleUpdating}
-      on:confirmModal={() => handleTriggerImmediately()}
-      on:cancelModal={closeTriggerModal}
-    >
-      <h3 slot="title">
-        {translate('schedules.trigger-modal-title')}
-      </h3>
-      <div slot="content">
-        <RadioGroup
-          group={overlapPolicy}
-          name="trigger-event-id"
-          class="h-auto overflow-auto"
-        >
-          {#each policies as policy}
-            <RadioInput
-              id={policy.value}
-              value={policy.value}
-              label={policy.label}
-              description={policy.description}
-            />
-          {/each}
-        </RadioGroup>
-      </div>
-    </Modal>
-    <Modal
-      id="backfill-schedule-modal"
-      large
-      bind:open={backfillConfirmationModalOpen}
-      confirmType="primary"
-      confirmText={translate('schedules.schedule')}
-      cancelText={translate('common.cancel')}
-      loading={scheduleUpdating}
-      on:confirmModal={() => handleBackfill()}
-      on:cancelModal={closeBackfillModal}
-    >
-      <h3 slot="title">
-        {translate('schedules.schedule')}
-        {translate('schedules.backfill')}
-      </h3>
-      <div slot="content" class="p-0">
-        <div class="flex flex-col gap-2 p-2">
-          <DatePicker
-            label={translate('common.start')}
-            onDateChange={onStartDateChange}
-            selected={startDate}
-            todayLabel={translate('common.today')}
-            closeLabel={translate('common.close')}
-            clearLabel={translate('common.clear-input-button-label')}
-          />
-          <TimePicker
-            bind:hour={startHour}
-            bind:minute={startMinute}
-            bind:second={startSecond}
-            twelveHourClock={false}
-          />
-          <DatePicker
-            label={translate('common.end')}
-            onDateChange={onEndDateChange}
-            selected={endDate}
-            todayLabel={translate('common.today')}
-            closeLabel={translate('common.close')}
-            clearLabel={translate('common.clear-input-button-label')}
-          />
-          <TimePicker
-            bind:hour={endHour}
-            bind:minute={endMinute}
-            bind:second={endSecond}
-            twelveHourClock={false}
-          />
-          <div class="flex w-full flex-row items-center gap-2">
-            <Icon name="clock" aria-hidden="true" />
-            <span class="text-xs font-normal text-slate-500"
-              >{translate('common.based-on-time-preface')} Universal Standard Time
-              (UTC)
-            </span>
-          </div>
-        </div>
-
-        <hr
-          tabindex="-1"
-          aria-hidden="true"
-          class="my-4 w-full border-subtle"
-        />
-
-        <div class="flex max-h-52 flex-col gap-2 overflow-auto">
-          <RadioGroup
-            group={overlapPolicy}
-            name="backfill-event-id"
-            class="h-auto overflow-auto"
-          >
-            {#each policies.slice(0, viewMoreBackfillOptions ? policies.length : 3) as policy}
-              <RadioInput
-                id={policy.value}
-                value={policy.value}
-                label={policy.label}
-                description={policy.description}
-              />
-            {/each}
-          </RadioGroup>
-          {#if !viewMoreBackfillOptions}
-            <Button
-              variant="ghost"
-              size="xs"
-              on:click={() => (viewMoreBackfillOptions = true)}
-              >{translate('schedules.more-options')}</Button
-            >
-          {/if}
-        </div>
-      </div>
-    </Modal>
-    <Modal
-      id="delete-schedule-modal"
-      bind:open={deleteConfirmationModalOpen}
-      bind:error
-      confirmType="destructive"
-      confirmText={translate('common.delete')}
-      cancelText={translate('common.cancel')}
-      on:confirmModal={handleDelete}
-      on:cancelModal={resetReason}
-    >
-      <h3 slot="title">{translate('schedules.delete-modal-title')}</h3>
-      <div slot="content">
-        <p>
-          {translate('schedules.delete-modal-confirmation', {
-            schedule: scheduleId,
-          })}
-        </p>
-      </div>
-    </Modal>
+    <ScheduleView schedule={currentSchedule} {namespace} {scheduleId} />
   {/if}
 {:catch error}
-  <header class="mb-8">
-    <div class="relative flex flex-col gap-1">
-      <Link href={routeForSchedules({ namespace })} icon="chevron-left">
-        {translate('schedules.back-to-schedules')}
-      </Link>
-      <h1 class="mt-8 select-all" data-testid="schedule-name">
-        {scheduleId}
-      </h1>
-      <p class="text-sm">
-        {namespace}
-      </p>
-    </div>
-  </header>
-  <ScheduleError error={error?.message} />
+  <ScheduleViewError {namespace} {scheduleId} errorMessage={error?.message} />
 {/await}
diff --git a/src/lib/pages/schedules.svelte b/src/lib/pages/schedules.svelte
index 5042c09b8e..aa1f1cec72 100644
--- a/src/lib/pages/schedules.svelte
+++ b/src/lib/pages/schedules.svelte
@@ -4,7 +4,7 @@
   import { page } from '$app/state';
 
   import CountRefreshButton from '$lib/components/count-refresh-button.svelte';
-  import SchedulesTableRow from '$lib/components/schedule/schedules-table-row.svelte';
+  import SchedulesTableRow from '$lib/components/schedule/schedules-list/schedules-table-row.svelte';
   import FilterBar from '$lib/components/search-attribute-filter/filter-bar.svelte';
   import { timestamp } from '$lib/components/timestamp.svelte';
   import ConfigurableTableHeadersDrawer from '$lib/components/workflow/configurable-table-headers-drawer/index.svelte';
diff --git a/src/lib/types/schedule.ts b/src/lib/types/schedule.ts
index 914ae8e746..f01ad577b6 100644
--- a/src/lib/types/schedule.ts
+++ b/src/lib/types/schedule.ts
@@ -1,13 +1,9 @@
 import type { temporal } from '@temporalio/proto';
 
-import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
-import type { SearchAttributesSchema } from '$lib/stores/search-attributes';
 import type {
-  CalendarSpec,
   DescribeScheduleResponse,
   Duration,
   IntervalSpec,
-  RangeSpec,
   Schedule,
   SchedulePolicies,
   ScheduleSpec,
@@ -40,7 +36,7 @@ export type ScheduleResponse = Override<
 
 export type DescribeFullSchedule = DescribeScheduleResponse & {
   schedule_id: string;
-  schedule?: Schedule;
+  schedule?: ScheduleResponse;
 };
 
 /**
@@ -101,67 +97,12 @@ export type ScheduleRequestBody = {
   schedule: ScheduleRequest;
 };
 
-export type FullSchedule = Schedule;
-export type FullScheduleSpec = ScheduleSpec;
-export type FullCalendarSpec = CalendarSpec;
-export type StructuredCalendars = StructuredCalendarSpec[];
 export type StructuredCalendar = StructuredCalendarSpec;
 export type ScheduleInterval = IntervalSpec;
-export type ScheduleRange = RangeSpec;
-
-export type SchedulePreset =
-  | 'existing'
-  | 'interval'
-  | 'week'
-  | 'month'
-  | 'string';
-
-export type ScheduleOffsetUnit = 'days' | 'hrs' | 'min' | 'sec';
-
-export type ScheduleActionParameters = {
-  identity?: string;
-  namespace: string;
-  name: string;
-  workflowType: string;
-  workflowId: string;
-  taskQueue: string;
-  input: string;
-  encoding: PayloadInputEncoding;
-  messageType?: string;
-  searchAttributes: SearchAttributesSchema;
-  workflowSearchAttributes?: SearchAttributesSchema;
-};
-
-export type ScheduleSpecParameters = {
-  dayOfWeek: string;
-  dayOfMonth: string;
-  month: string;
-  hour: string;
-  minute: string;
-  second: string;
-  phase: string;
-  cronString: string;
-  searchAttributes: SearchAttributesSchema;
-  workflowSearchAttributes?: SearchAttributesSchema;
-};
-
-// For UI Only
-export type SchedulePresetsParameters = {
-  preset: SchedulePreset;
-  days: string;
-  daysOfWeek: string[];
-  daysOfMonth: number[];
-  months: string[];
-};
-
-export type ScheduleParameters = ScheduleActionParameters &
-  ScheduleSpecParameters &
-  SchedulePresetsParameters;
 
 export type ScheduleStatus = 'Paused' | 'Running';
 
 export type OverlapPolicy =
-  | 'Unspecified'
   | 'Skip'
   | 'BufferOne'
   | 'BufferAll'
diff --git a/src/lib/utilities/schedule-spec-label.test.ts b/src/lib/utilities/schedule-spec-label.test.ts
deleted file mode 100644
index fd986762b5..0000000000
--- a/src/lib/utilities/schedule-spec-label.test.ts
+++ /dev/null
@@ -1,712 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import {
-  getCalendarSpecLabel,
-  getIntervalLabel,
-  getScheduleSpecLabel,
-} from './schedule-spec-label';
-
-describe('getIntervalLabel', () => {
-  it('should return empty string for zero interval', () => {
-    expect(getIntervalLabel({ interval: { seconds: '0', nanos: 0 } })).toBe('');
-  });
-
-  it('should return empty string for missing interval', () => {
-    expect(getIntervalLabel({})).toBe('');
-  });
-
-  it('should handle every 5 minutes', () => {
-    expect(getIntervalLabel({ interval: { seconds: '300', nanos: 0 } })).toBe(
-      'Every 5 minutes',
-    );
-  });
-
-  it('should handle every 10 minutes', () => {
-    expect(getIntervalLabel({ interval: { seconds: '600', nanos: 0 } })).toBe(
-      'Every 10 minutes',
-    );
-  });
-
-  it('should handle every 30 minutes', () => {
-    expect(getIntervalLabel({ interval: { seconds: '1800', nanos: 0 } })).toBe(
-      'Every 30 minutes',
-    );
-  });
-
-  it('should handle every hour', () => {
-    expect(getIntervalLabel({ interval: { seconds: '3600', nanos: 0 } })).toBe(
-      'Every 1 hour',
-    );
-  });
-
-  it('should handle every 5 hours', () => {
-    expect(getIntervalLabel({ interval: { seconds: '18000', nanos: 0 } })).toBe(
-      'Every 5 hours',
-    );
-  });
-
-  it('should handle every 12 hours', () => {
-    expect(getIntervalLabel({ interval: { seconds: '43200', nanos: 0 } })).toBe(
-      'Every 12 hours',
-    );
-  });
-
-  it('should handle every day', () => {
-    expect(getIntervalLabel({ interval: { seconds: '86400', nanos: 0 } })).toBe(
-      'Every 1 day',
-    );
-  });
-
-  it('should handle every 2 days', () => {
-    expect(
-      getIntervalLabel({ interval: { seconds: '172800', nanos: 0 } }),
-    ).toBe('Every 2 days');
-  });
-
-  it('should handle phase offset', () => {
-    expect(
-      getIntervalLabel({
-        interval: { seconds: '3600', nanos: 0 },
-        phase: { seconds: '1800', nanos: 0 },
-      }),
-    ).toBe('Every 1 hour, offset by 30 minutes');
-  });
-
-  it('should handle string format interval', () => {
-    expect(getIntervalLabel({ interval: '18000s', phase: '0s' })).toBe(
-      'Every 5 hours',
-    );
-  });
-
-  it('should handle string format with phase', () => {
-    expect(getIntervalLabel({ interval: '3600s', phase: '900s' })).toBe(
-      'Every 1 hour, offset by 15 minutes',
-    );
-  });
-
-  it('should handle numeric seconds field', () => {
-    expect(getIntervalLabel({ interval: { seconds: 300, nanos: 0 } })).toBe(
-      'Every 5 minutes',
-    );
-  });
-
-  it('should handle non-standard durations in seconds', () => {
-    expect(getIntervalLabel({ interval: { seconds: '45', nanos: 0 } })).toBe(
-      'Every 45 seconds',
-    );
-  });
-
-  it('should handle large interval of 7 days', () => {
-    expect(
-      getIntervalLabel({ interval: { seconds: '604800', nanos: 0 } }),
-    ).toBe('Every 7 days');
-  });
-
-  it('should handle large interval of 30 days', () => {
-    expect(
-      getIntervalLabel({ interval: { seconds: '2592000', nanos: 0 } }),
-    ).toBe('Every 30 days');
-  });
-
-  it('should handle mixed duration of days and hours', () => {
-    expect(getIntervalLabel({ interval: { seconds: '90000', nanos: 0 } })).toBe(
-      'Every 1 day, 1 hour',
-    );
-  });
-
-  it('should handle mixed duration of hours and minutes', () => {
-    expect(getIntervalLabel({ interval: { seconds: '5450', nanos: 0 } })).toBe(
-      'Every 1 hour, 30 minutes, 50 seconds',
-    );
-  });
-});
-
-describe('getCalendarSpecLabel', () => {
-  it('should return empty string for empty specs', () => {
-    expect(getCalendarSpecLabel([])).toBe('');
-  });
-
-  it('should return cron comment when present', () => {
-    expect(getCalendarSpecLabel([{ comment: '0 30 8 * * 1-5' }])).toBe(
-      '0 30 8 * * 1-5',
-    );
-  });
-
-  it('should handle every day at specific time', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          second: [{ start: 0, end: 0, step: 1 }],
-          minute: [{ start: 30, end: 30, step: 1 }],
-          hour: [{ start: 8, end: 8, step: 1 }],
-          dayOfMonth: [{ start: 1, end: 31, step: 1 }],
-          month: [{ start: 1, end: 12, step: 1 }],
-          dayOfWeek: [{ start: 0, end: 6, step: 1 }],
-        },
-      ]),
-    ).toBe('Every day at 8:30 AM UTC');
-  });
-
-  it('should handle every weekday at specific time', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          second: [{ start: 0, end: 0, step: 1 }],
-          minute: [{ start: 30, end: 30, step: 1 }],
-          hour: [{ start: 8, end: 8, step: 1 }],
-          dayOfMonth: [{ start: 1, end: 31, step: 1 }],
-          month: [{ start: 1, end: 12, step: 1 }],
-          dayOfWeek: [
-            { start: 1, end: 1, step: 1 },
-            { start: 2, end: 2, step: 1 },
-            { start: 3, end: 3, step: 1 },
-            { start: 4, end: 4, step: 1 },
-            { start: 5, end: 5, step: 1 },
-          ],
-        },
-      ]),
-    ).toBe('Every weekday at 8:30 AM UTC');
-  });
-
-  it('should handle weekdays with range shorthand', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 9 }],
-          dayOfWeek: [{ start: 1, end: 5, step: 1 }],
-        },
-      ]),
-    ).toBe('Every weekday at 9:00 AM UTC');
-  });
-
-  it('should handle every weekend at specific time', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 10 }],
-          dayOfWeek: [{ start: 0 }, { start: 6 }],
-        },
-      ]),
-    ).toBe('Every weekend at 10:00 AM UTC');
-  });
-
-  it('should handle specific days of the week', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 14 }],
-          dayOfWeek: [{ start: 1 }, { start: 3 }, { start: 5 }],
-        },
-      ]),
-    ).toBe('Every Monday, Wednesday, Friday at 2:00 PM UTC');
-  });
-
-  it('should handle monthly on specific day', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 8 }],
-          dayOfMonth: [{ start: 15 }],
-        },
-      ]),
-    ).toBe('Monthly on the 15th at 8:00 AM UTC');
-  });
-
-  it('should handle monthly on the 1st', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 1 }],
-        },
-      ]),
-    ).toBe('Monthly on the 1st at 12:00 AM UTC');
-  });
-
-  it('should handle every unique end of month for a year', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 31 }],
-          month: [
-            {
-              start: 1,
-              end: 1,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 28 }],
-          month: [
-            {
-              start: 2,
-              end: 2,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 31 }],
-          month: [
-            {
-              start: 3,
-              end: 3,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 30 }],
-          month: [
-            {
-              start: 4,
-              end: 4,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 31 }],
-          month: [
-            {
-              start: 5,
-              end: 5,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 30 }],
-          month: [
-            {
-              start: 6,
-              end: 6,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 31 }],
-          month: [
-            {
-              start: 7,
-              end: 7,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 31 }],
-          month: [
-            {
-              start: 8,
-              end: 8,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 30 }],
-          month: [
-            {
-              start: 9,
-              end: 9,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 31 }],
-          month: [
-            {
-              start: 10,
-              end: 10,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 30 }],
-          month: [
-            {
-              start: 11,
-              end: 11,
-              step: 1,
-            },
-          ],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-          dayOfMonth: [{ start: 31 }],
-          month: [
-            {
-              start: 12,
-              end: 12,
-              step: 1,
-            },
-          ],
-        },
-      ]),
-    ).toBe(
-      'Annually on January 31st at 12:00 AM UTC; Annually on February 28th at 12:00 AM UTC; Annually on March 31st at 12:00 AM UTC; Annually on April 30th at 12:00 AM UTC; Annually on May 31st at 12:00 AM UTC; Annually on June 30th at 12:00 AM UTC; Annually on July 31st at 12:00 AM UTC; Annually on August 31st at 12:00 AM UTC; Annually on September 30th at 12:00 AM UTC; Annually on October 31st at 12:00 AM UTC; Annually on November 30th at 12:00 AM UTC; Annually on December 31st at 12:00 AM UTC',
-    );
-  });
-
-  it('should handle annual schedule', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 9 }],
-          dayOfMonth: [{ start: 25 }],
-          month: [{ start: 12 }],
-        },
-      ]),
-    ).toBe('Annually on December 25th at 9:00 AM UTC');
-  });
-
-  it('should handle multiple times per day', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 9 }, { start: 17 }],
-        },
-      ]),
-    ).toBe('Every day at 9:00 AM and 5:00 PM UTC');
-  });
-
-  it('should handle midnight', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 0 }],
-        },
-      ]),
-    ).toBe('Every day at 12:00 AM UTC');
-  });
-
-  it('should handle noon', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 12 }],
-        },
-      ]),
-    ).toBe('Every day at 12:00 PM UTC');
-  });
-
-  it('should handle custom timezone', () => {
-    expect(
-      getCalendarSpecLabel(
-        [
-          {
-            minute: [{ start: 30 }],
-            hour: [{ start: 8 }],
-          },
-        ],
-        'America/New_York',
-      ),
-    ).toBe('Every day at 8:30 AM America/New_York');
-  });
-
-  it('should handle multiple calendar specs', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 9 }],
-          dayOfWeek: [{ start: 1, end: 5, step: 1 }],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 12 }],
-          dayOfWeek: [{ start: 0 }, { start: 6 }],
-        },
-      ]),
-    ).toBe('Every weekday at 9:00 AM UTC; Every weekend at 12:00 PM UTC');
-  });
-
-  it('should handle three times per day', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 8 }, { start: 12 }, { start: 18 }],
-        },
-      ]),
-    ).toBe('Every day at 8:00 AM, 12:00 PM, and 6:00 PM UTC');
-  });
-
-  it('should produce fallback for complex patterns', () => {
-    const label = getCalendarSpecLabel([
-      {
-        minute: [{ start: 0 }],
-        hour: [{ start: 9 }],
-        dayOfMonth: [{ start: 1 }, { start: 15 }],
-        month: [{ start: 3 }, { start: 6 }, { start: 9 }],
-        dayOfWeek: [{ start: 1 }],
-      },
-    ]);
-    expect(label).toContain('March');
-    expect(label).toContain('Monday');
-  });
-
-  it('should handle weekday mornings and weekend afternoons as separate specs', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 7 }],
-          dayOfWeek: [{ start: 1, end: 5, step: 1 }],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 14 }],
-          dayOfWeek: [{ start: 0 }, { start: 6 }],
-        },
-      ]),
-    ).toBe('Every weekday at 7:00 AM UTC; Every weekend at 2:00 PM UTC');
-  });
-
-  it('should handle quarterly schedule on the 1st', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 9 }],
-          dayOfMonth: [{ start: 1 }],
-          month: [{ start: 1 }],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 9 }],
-          dayOfMonth: [{ start: 1 }],
-          month: [{ start: 4 }],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 9 }],
-          dayOfMonth: [{ start: 1 }],
-          month: [{ start: 7 }],
-        },
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 9 }],
-          dayOfMonth: [{ start: 1 }],
-          month: [{ start: 10 }],
-        },
-      ]),
-    ).toBe(
-      'Annually on January 1st at 9:00 AM UTC; Annually on April 1st at 9:00 AM UTC; Annually on July 1st at 9:00 AM UTC; Annually on October 1st at 9:00 AM UTC',
-    );
-  });
-
-  it('should handle every other day via step', () => {
-    const label = getCalendarSpecLabel([
-      {
-        minute: [{ start: 0 }],
-        hour: [{ start: 6 }],
-        dayOfWeek: [{ start: 0, end: 6, step: 2 }],
-      },
-    ]);
-    expect(label).toBe(
-      'Every Sunday, Tuesday, Thursday, Saturday at 6:00 AM UTC',
-    );
-  });
-
-  it('should handle single day Sunday', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 8 }],
-          dayOfWeek: [{ start: 0 }],
-        },
-      ]),
-    ).toBe('Every Sunday at 8:00 AM UTC');
-  });
-
-  it('should handle four times per day on weekdays', () => {
-    expect(
-      getCalendarSpecLabel([
-        {
-          minute: [{ start: 0 }],
-          hour: [{ start: 6 }, { start: 10 }, { start: 14 }, { start: 18 }],
-          dayOfWeek: [{ start: 1, end: 5, step: 1 }],
-        },
-      ]),
-    ).toBe('Every weekday at 6:00 AM, 10:00 AM, 2:00 PM, and 6:00 PM UTC');
-  });
-
-  it('should handle bi-monthly on the 15th', () => {
-    const label = getCalendarSpecLabel([
-      {
-        minute: [{ start: 0 }],
-        hour: [{ start: 12 }],
-        dayOfMonth: [{ start: 15 }],
-        month: [{ start: 1, end: 12, step: 2 }],
-      },
-    ]);
-    expect(label).toContain('January');
-    expect(label).toContain('15th');
-    expect(label).toContain('12:00 PM');
-  });
-
-  it('should handle multiple days of month', () => {
-    const label = getCalendarSpecLabel([
-      {
-        minute: [{ start: 0 }],
-        hour: [{ start: 9 }],
-        dayOfMonth: [{ start: 1 }, { start: 15 }],
-      },
-    ]);
-    expect(label).toContain('1st');
-    expect(label).toContain('15th');
-  });
-});
-
-describe('getScheduleSpecLabel', () => {
-  it('should return empty string for empty spec', () => {
-    expect(getScheduleSpecLabel({})).toBe('');
-  });
-
-  it('should dispatch to calendar spec', () => {
-    expect(
-      getScheduleSpecLabel({
-        structuredCalendar: [
-          {
-            minute: [{ start: 30 }],
-            hour: [{ start: 8 }],
-            dayOfWeek: [{ start: 1, end: 5, step: 1 }],
-          },
-        ],
-      }),
-    ).toBe('Every weekday at 8:30 AM UTC');
-  });
-
-  it('should dispatch to interval spec', () => {
-    expect(
-      getScheduleSpecLabel({
-        interval: [{ interval: { seconds: '18000', nanos: 0 } }],
-      }),
-    ).toBe('Every 5 hours');
-  });
-
-  it('should handle both calendar and interval', () => {
-    expect(
-      getScheduleSpecLabel({
-        structuredCalendar: [
-          {
-            minute: [{ start: 0 }],
-            hour: [{ start: 9 }],
-          },
-        ],
-        interval: [{ interval: { seconds: '3600', nanos: 0 } }],
-      }),
-    ).toBe('Every day at 9:00 AM UTC; Every 1 hour');
-  });
-
-  it('should handle multiple intervals', () => {
-    expect(
-      getScheduleSpecLabel({
-        interval: [
-          { interval: { seconds: '3600', nanos: 0 } },
-          { interval: { seconds: '300', nanos: 0 } },
-        ],
-      }),
-    ).toBe('Every 1 hour; Every 5 minutes');
-  });
-
-  it('should pass timezone to calendar spec', () => {
-    expect(
-      getScheduleSpecLabel(
-        {
-          structuredCalendar: [
-            {
-              minute: [{ start: 0 }],
-              hour: [{ start: 17 }],
-            },
-          ],
-        },
-        'Europe/London',
-      ),
-    ).toBe('Every day at 5:00 PM Europe/London');
-  });
-
-  it('should handle calendar specs with intervals combined', () => {
-    expect(
-      getScheduleSpecLabel({
-        structuredCalendar: [
-          {
-            minute: [{ start: 0 }],
-            hour: [{ start: 9 }],
-            dayOfWeek: [{ start: 1, end: 5, step: 1 }],
-          },
-          {
-            minute: [{ start: 0 }],
-            hour: [{ start: 12 }],
-            dayOfWeek: [{ start: 0 }, { start: 6 }],
-          },
-        ],
-        interval: [{ interval: { seconds: '1800', nanos: 0 } }],
-      }),
-    ).toBe(
-      'Every weekday at 9:00 AM UTC; Every weekend at 12:00 PM UTC; Every 30 minutes',
-    );
-  });
-
-  it('should handle empty calendar with intervals', () => {
-    expect(
-      getScheduleSpecLabel({
-        structuredCalendar: [],
-        interval: [{ interval: { seconds: '7200', nanos: 0 } }],
-      }),
-    ).toBe('Every 2 hours');
-  });
-
-  it('should handle calendar with empty intervals', () => {
-    expect(
-      getScheduleSpecLabel({
-        structuredCalendar: [
-          {
-            minute: [{ start: 30 }],
-            hour: [{ start: 14 }],
-          },
-        ],
-        interval: [],
-      }),
-    ).toBe('Every day at 2:30 PM UTC');
-  });
-});
diff --git a/src/lib/utilities/schedule-spec-label.ts b/src/lib/utilities/schedule-spec-label.ts
deleted file mode 100644
index b4e064f598..0000000000
--- a/src/lib/utilities/schedule-spec-label.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-import type {
-  IntervalSpec,
-  RangeSpec,
-  StructuredCalendarSpec,
-} from '$lib/types';
-
-import { formatDuration } from './format-time';
-
-function toSecondsString(d: unknown): string {
-  if (d == null) return '';
-  if (typeof d === 'string') return d.endsWith('s') ? d : '';
-  if (typeof d === 'object' && 'seconds' in d) {
-    const obj = d as { seconds: string | number };
-    return `${obj.seconds}s`;
-  }
-  return '';
-}
-
-const DAY_NAMES = [
-  'Sunday',
-  'Monday',
-  'Tuesday',
-  'Wednesday',
-  'Thursday',
-  'Friday',
-  'Saturday',
-];
-
-const MONTH_NAMES = [
-  '',
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
-function expandRange(range: RangeSpec): number[] {
-  const start = range.start ?? 0;
-  const end = range.end ?? start;
-  const step = range.step && range.step > 0 ? range.step : 1;
-
-  if (end <= start) return [start];
-
-  const values: number[] = [];
-  for (let i = start; i <= end; i += step) {
-    values.push(i);
-  }
-  return values;
-}
-
-function expandRanges(ranges: RangeSpec[] | undefined | null): number[] {
-  if (!ranges || ranges.length === 0) return [];
-  const values = new Set<number>();
-  for (const range of ranges) {
-    for (const v of expandRange(range)) {
-      values.add(v);
-    }
-  }
-  return [...values].sort((a, b) => a - b);
-}
-
-function isFullRange(values: number[], min: number, max: number): boolean {
-  if (values.length === 0) return true;
-  if (values.length !== max - min + 1) return false;
-  return values.every((v, i) => v === min + i);
-}
-
-function isWeekdays(dayOfWeek: RangeSpec[] | undefined | null): boolean {
-  const values = expandRanges(dayOfWeek);
-  return (
-    values.length === 5 &&
-    values[0] === 1 &&
-    values[1] === 2 &&
-    values[2] === 3 &&
-    values[3] === 4 &&
-    values[4] === 5
-  );
-}
-
-function isWeekends(dayOfWeek: RangeSpec[] | undefined | null): boolean {
-  const values = expandRanges(dayOfWeek);
-  return (
-    (values.length === 2 && values[0] === 0 && values[1] === 6) ||
-    (values.length === 2 && values[0] === 6 && values[1] === 0)
-  );
-}
-
-function isAllDays(dayOfWeek: RangeSpec[] | undefined | null): boolean {
-  if (!dayOfWeek || dayOfWeek.length === 0) return true;
-  const values = expandRanges(dayOfWeek);
-  return isFullRange(values, 0, 6);
-}
-
-function isAllMonths(month: RangeSpec[] | undefined | null): boolean {
-  if (!month || month.length === 0) return true;
-  const values = expandRanges(month);
-  return isFullRange(values, 1, 12);
-}
-
-function isAllDaysOfMonth(dayOfMonth: RangeSpec[] | undefined | null): boolean {
-  if (!dayOfMonth || dayOfMonth.length === 0) return true;
-  const values = expandRanges(dayOfMonth);
-  return isFullRange(values, 1, 31);
-}
-
-function formatHour12(hour: number): { hour: number; period: string } {
-  if (hour === 0) return { hour: 12, period: 'AM' };
-  if (hour < 12) return { hour, period: 'AM' };
-  if (hour === 12) return { hour: 12, period: 'PM' };
-  return { hour: hour - 12, period: 'PM' };
-}
-
-function formatSingleTime(hour: number, minute: number): string {
-  const { hour: h, period } = formatHour12(hour);
-  const min = minute.toString().padStart(2, '0');
-  return `${h}:${min} ${period}`;
-}
-
-function formatTime(
-  hour: RangeSpec[] | undefined | null,
-  minute: RangeSpec[] | undefined | null,
-): string {
-  const hours = expandRanges(hour);
-  const minutes = expandRanges(minute);
-  const min = minutes.length === 1 ? minutes[0] : 0;
-
-  if (hours.length === 0) return '';
-
-  if (hours.length === 1) {
-    return formatSingleTime(hours[0], min);
-  }
-
-  if (hours.length === 2) {
-    return `${formatSingleTime(hours[0], min)} and ${formatSingleTime(hours[1], min)}`;
-  }
-
-  const times = hours.map((h) => formatSingleTime(h, min));
-  return `${times.slice(0, -1).join(', ')}, and ${times[times.length - 1]}`;
-}
-
-function getDayNames(dayOfWeek: RangeSpec[] | undefined | null): string {
-  const values = expandRanges(dayOfWeek);
-  return values.map((v) => DAY_NAMES[v] ?? `Day ${v}`).join(', ');
-}
-
-function ordinal(n: number): string {
-  const s = ['th', 'st', 'nd', 'rd'];
-  const v = n % 100;
-  return n + (s[(v - 20) % 10] || s[v] || s[0]);
-}
-
-function getSingleCalendarLabel(
-  spec: StructuredCalendarSpec,
-  timezone: string,
-): string {
-  const time = formatTime(spec.hour, spec.minute);
-  const timeWithTz = time ? `at ${time} ${timezone}` : '';
-  const allDays = isAllDays(spec.dayOfWeek);
-  const allMonths = isAllMonths(spec.month);
-  const allDaysOfMonth = isAllDaysOfMonth(spec.dayOfMonth);
-
-  if (isWeekdays(spec.dayOfWeek) && allMonths && allDaysOfMonth) {
-    return `Every weekday ${timeWithTz}`.trim();
-  }
-
-  if (isWeekends(spec.dayOfWeek) && allMonths && allDaysOfMonth) {
-    return `Every weekend ${timeWithTz}`.trim();
-  }
-
-  if (allDays && allMonths && allDaysOfMonth && time) {
-    return `Every day ${timeWithTz}`.trim();
-  }
-
-  const dayOfMonthValues = expandRanges(spec.dayOfMonth);
-  const monthValues = expandRanges(spec.month);
-
-  if (
-    !allMonths &&
-    monthValues.length === 1 &&
-    !allDaysOfMonth &&
-    dayOfMonthValues.length === 1
-  ) {
-    const monthName = MONTH_NAMES[monthValues[0]] ?? `Month ${monthValues[0]}`;
-    const day = ordinal(dayOfMonthValues[0]);
-    return `Annually on ${monthName} ${day} ${timeWithTz}`.trim();
-  }
-
-  if (
-    allMonths &&
-    !allDaysOfMonth &&
-    dayOfMonthValues.length === 1 &&
-    allDays
-  ) {
-    const day = ordinal(dayOfMonthValues[0]);
-    return `Monthly on the ${day} ${timeWithTz}`.trim();
-  }
-
-  if (!allDays && allMonths && allDaysOfMonth) {
-    const dayNames = getDayNames(spec.dayOfWeek);
-    return `Every ${dayNames} ${timeWithTz}`.trim();
-  }
-
-  if (allDays && allMonths && allDaysOfMonth && !time) {
-    return 'Every second';
-  }
-
-  const parts: string[] = [];
-  if (!allMonths) {
-    parts.push(
-      `In ${monthValues.map((m) => MONTH_NAMES[m] ?? `Month ${m}`).join(', ')}`,
-    );
-  }
-  if (!allDaysOfMonth) {
-    parts.push(`on the ${dayOfMonthValues.map((d) => ordinal(d)).join(', ')}`);
-  }
-  if (!allDays) {
-    parts.push(`on ${getDayNames(spec.dayOfWeek)}`);
-  }
-  if (time) {
-    parts.push(`at ${time} ${timezone}`);
-  }
-
-  return parts.join(' ').trim() || 'Custom schedule';
-}
-
-export function getIntervalLabel(spec: IntervalSpec): string {
-  const intervalStr = toSecondsString(spec.interval);
-  const label = formatDuration(intervalStr);
-  if (!label) return '';
-
-  const result = `Every ${label}`;
-
-  const phaseStr = toSecondsString(spec.phase);
-  const phaseLabel = formatDuration(phaseStr);
-  if (phaseLabel) return `${result}, offset by ${phaseLabel}`;
-
-  return result;
-}
-
-export function getCalendarSpecLabel(
-  specs: StructuredCalendarSpec[],
-  timezone = 'UTC',
-): string {
-  if (!specs || specs.length === 0) return '';
-
-  if (specs[0].comment) {
-    return specs[0].comment;
-  }
-
-  if (specs.length === 1) {
-    return getSingleCalendarLabel(specs[0], timezone);
-  }
-
-  return specs.map((spec) => getSingleCalendarLabel(spec, timezone)).join('; ');
-}
-
-export function getScheduleSpecLabel(
-  spec: {
-    structuredCalendar?: StructuredCalendarSpec[];
-    interval?: IntervalSpec[];
-  },
-  timezone = 'UTC',
-): string {
-  const parts: string[] = [];
-
-  if (spec.structuredCalendar && spec.structuredCalendar.length > 0) {
-    const label = getCalendarSpecLabel(spec.structuredCalendar, timezone);
-    if (label) parts.push(label);
-  }
-
-  if (spec.interval && spec.interval.length > 0) {
-    for (const interval of spec.interval) {
-      const label = getIntervalLabel(interval);
-      if (label) parts.push(label);
-    }
-  }
-
-  return parts.join('; ');
-}
diff --git a/tests/e2e/schedules.spec.ts b/tests/e2e/schedules.spec.ts
index 14a203967b..56f06d5f76 100644
--- a/tests/e2e/schedules.spec.ts
+++ b/tests/e2e/schedules.spec.ts
@@ -34,11 +34,32 @@ test.describe('Schedules Page', () => {
     await page
       .locator('#schedule-payload-input')
       .getByRole('textbox')
-      .fill('abc');
-    await page.getByRole('textbox', { name: 'hrs' }).fill('1');
+      .fill('"abc"');
+    await page.getByTestId('spec-type-0-button').click();
+    await page.getByRole('option', { name: 'Interval' }).click();
+    await page.getByLabel('Time Interval').fill('90');
     const createSchedule = page.getByRole('button', {
       name: 'Create Schedule',
     });
     await expect(createSchedule).toBeEnabled();
+    await createSchedule.click();
+
+    await expect(page).toHaveURL(/schedules$/);
+    const scheduleLink = page.getByRole('link', { name: /e2e-schedule-1/ });
+    await expect(scheduleLink).toBeVisible();
+    await scheduleLink.click();
+
+    await expect(page.getByTestId('schedule-name')).toContainText(
+      'e2e-schedule-1',
+    );
+    await expect(page.getByText('Every 90 minute(s)').first()).toBeVisible();
+
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('delete-schedule').click();
+    await page
+      .locator('#delete-schedule-modal')
+      .getByTestId('confirm-modal-button')
+      .click();
+    await expect(page).toHaveURL(/schedules$/);
   });
 });
diff --git a/tests/integration/schedule-actions.spec.ts b/tests/integration/schedule-actions.spec.ts
new file mode 100644
index 0000000000..709086056b
--- /dev/null
+++ b/tests/integration/schedule-actions.spec.ts
@@ -0,0 +1,159 @@
+import { expect, type Request, test } from '@playwright/test';
+
+import {
+  mockSchedule,
+  mockScheduleApi,
+  mockSchedulesApis,
+} from '~/test-utilities/mock-apis';
+
+const scheduleUrl = '/namespaces/default/schedules/test-schedule';
+
+const isPatchRequest = (request: Request) =>
+  request.method() === 'POST' &&
+  request.url().includes('/schedules/test-schedule/patch');
+
+test.describe('Schedule actions', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockSchedulesApis(page);
+    await mockScheduleApi(page);
+    await page.goto(scheduleUrl);
+    await expect(page.getByTestId('schedule-name')).toContainText(
+      'test-schedule',
+    );
+  });
+
+  test('trigger pre-selects Allow All and sends it', async ({ page }) => {
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('trigger-schedule').click();
+
+    const modal = page.locator('#trigger-schedule-modal');
+    await expect(modal).toBeVisible();
+    await expect(modal.locator('#overlap-policy-AllowAll')).toBeChecked();
+
+    const patchRequest = page.waitForRequest(isPatchRequest);
+    await modal.getByTestId('confirm-modal-button').click();
+    const body = (await patchRequest).postDataJSON();
+
+    expect(body.patch.triggerImmediately.overlapPolicy).toBe('AllowAll');
+  });
+
+  test('trigger modal resets its overlap policy when reopened', async ({
+    page,
+  }) => {
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('trigger-schedule').click();
+
+    const modal = page.locator('#trigger-schedule-modal');
+    await expect(modal).toBeVisible();
+    await modal.locator('#overlap-policy-Skip').check();
+    await expect(modal.locator('#overlap-policy-Skip')).toBeChecked();
+
+    await modal.getByTestId('cancel-modal-button').click();
+    await expect(modal).toBeHidden();
+
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('trigger-schedule').click();
+    await expect(modal).toBeVisible();
+    await expect(modal.locator('#overlap-policy-AllowAll')).toBeChecked();
+  });
+
+  test('action modals stay usable after a successful backfill', async ({
+    page,
+  }) => {
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('backfill-schedule').click();
+
+    const backfillModal = page.locator('#backfill-schedule-modal');
+    await expect(backfillModal).toBeVisible();
+
+    const patchRequest = page.waitForRequest(isPatchRequest);
+    await backfillModal.getByTestId('confirm-modal-button').click();
+    const body = (await patchRequest).postDataJSON();
+
+    expect(body.patch.backfillRequest).toHaveLength(1);
+    expect(body.patch.backfillRequest[0].startTime).toBeTruthy();
+    expect(body.patch.backfillRequest[0].endTime).toBeTruthy();
+
+    await expect(backfillModal).toBeHidden();
+
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('trigger-schedule').click();
+
+    const triggerModal = page.locator('#trigger-schedule-modal');
+    await expect(triggerModal).toBeVisible();
+    await expect(
+      triggerModal.getByTestId('confirm-modal-button'),
+    ).toBeEnabled();
+  });
+
+  test('backfill modal shows times based on the schedule timezone', async ({
+    page,
+  }) => {
+    await mockScheduleApi(page, {
+      ...mockSchedule,
+      schedule: {
+        ...mockSchedule.schedule,
+        spec: { ...mockSchedule.schedule.spec, timezoneName: 'Asia/Tokyo' },
+      },
+    });
+    await page.goto(scheduleUrl);
+    await expect(page.getByTestId('schedule-name')).toContainText(
+      'test-schedule',
+    );
+
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('backfill-schedule').click();
+
+    const modal = page.locator('#backfill-schedule-modal');
+    await expect(modal).toBeVisible();
+    await expect(modal.getByText('Based on Asia/Tokyo')).toBeVisible();
+  });
+
+  test('backfill rejects an end time before the start time', async ({
+    page,
+  }) => {
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('backfill-schedule').click();
+
+    const modal = page.locator('#backfill-schedule-modal');
+    await expect(modal).toBeVisible();
+    await expect(
+      modal.getByText('Based on Universal Standard Time (UTC)'),
+    ).toBeVisible();
+
+    const popup = modal.locator('.z-30');
+    await modal.locator('#backfill-start-date').click();
+    await popup.getByRole('button', { name: 'Next Month' }).click();
+    await popup.getByRole('button', { name: '15', exact: true }).click();
+
+    await expect(
+      modal.getByText('End time must be after the start time.'),
+    ).toBeVisible();
+    await expect(modal.getByTestId('confirm-modal-button')).toBeDisabled();
+
+    await modal.locator('#backfill-end-date').click();
+    await popup.getByRole('button', { name: 'Next Month' }).click();
+    await popup.getByRole('button', { name: '16', exact: true }).click();
+
+    await expect(
+      modal.getByText('End time must be after the start time.'),
+    ).toBeHidden();
+    await expect(modal.getByTestId('confirm-modal-button')).toBeEnabled();
+  });
+
+  test('delete confirms and issues a delete request', async ({ page }) => {
+    await page.getByLabel('Schedule Actions').click();
+    await page.getByTestId('delete-schedule').click();
+
+    const modal = page.locator('#delete-schedule-modal');
+    await expect(modal).toBeVisible();
+
+    const deleteRequest = page.waitForRequest(
+      (request) =>
+        request.method() === 'DELETE' &&
+        request.url().includes('/schedules/test-schedule'),
+    );
+    await modal.getByTestId('confirm-modal-button').click();
+    await deleteRequest;
+  });
+});