diff --git a/src/lib/components/activity/activity-commands.svelte b/src/lib/components/activity/activity-commands.svelte
index e55044a081..d73c8ed945 100644
--- a/src/lib/components/activity/activity-commands.svelte
+++ b/src/lib/components/activity/activity-commands.svelte
@@ -57,7 +57,7 @@
   >
     <Button
       variant="secondary"
-      size="sm"
+      size="xs"
       leadingIcon={activity.paused ? 'play' : 'pause'}
       on:click={onPause}
     >
@@ -66,20 +66,20 @@
         : translate('workflows.pause')}
     </Button>
   </Tooltip>
-  <Tooltip bottomLeft width={200} text="Update this Activity Options.">
+  <Tooltip bottom width={200} text="Update this Activity Options">
     <Button
       variant="secondary"
-      size="sm"
+      size="xs"
       leadingIcon="pencil"
       on:click={onUpdate}
     >
       {translate('common.update')}
     </Button>
   </Tooltip>
-  <Tooltip bottom width={200} text="Reset this Activity.">
+  <Tooltip bottom width={200} text="Reset this Activity">
     <Button
       variant="secondary"
-      size="sm"
+      size="xs"
       leadingIcon="retry"
       on:click={onReset}
     >
diff --git a/src/lib/components/event/event-card.svelte b/src/lib/components/event/event-card.svelte
index a09931586f..9f3d84c6c4 100644
--- a/src/lib/components/event/event-card.svelte
+++ b/src/lib/components/event/event-card.svelte
@@ -1,46 +1,53 @@
 <script lang="ts">
+  import { cva } from 'class-variance-authority';
+  import { type ClassNameValue, twMerge as merge } from 'tailwind-merge';
+
   import { page } from '$app/state';
 
-  import Timestamp from '$lib/components/timestamp.svelte';
+  import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { EventLink as ELink } from '$lib/types';
   import { type Payload } from '$lib/types';
   import type { WorkflowEvent } from '$lib/types/events';
   import { getEventLinkHref } from '$lib/utilities/event-link-href';
-  import {
-    format,
-    spaceBetweenCapitalLetters,
-  } from '$lib/utilities/format-camel-case';
+  import { format } from '$lib/utilities/format-camel-case';
   import { formatAttributes } from '$lib/utilities/format-event-attributes';
+  import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
   import {
     displayLinkType,
     getCodeBlockValue,
     getStackTrace,
     shouldDisplayAsTime,
   } from '$lib/utilities/get-single-attribute-for-event';
-  import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type';
   import { routeForNamespace } from '$lib/utilities/route-for';
 
+  import Timestamp from '../timestamp.svelte';
+
   import EventDetailsLink from './event-details-link.svelte';
   import MetadataDecoder from './metadata-decoder.svelte';
   import PayloadDecoder from './payload-decoder.svelte';
 
-  let { event }: { event: WorkflowEvent } = $props();
+  interface Props {
+    event: WorkflowEvent;
+    nextEvent?: WorkflowEvent;
+    class?: ClassNameValue;
+  }
+
+  let { event, nextEvent, class: className = '' }: Props = $props();
 
-  const displayName = $derived(
-    isLocalActivityMarkerEvent(event)
-      ? translate('events.category.local-activity')
-      : spaceBetweenCapitalLetters(event.name),
-  );
   const attributes = $derived(formatAttributes(event));
   const fields = $derived(Object.entries(attributes));
   const payloadFields = $derived(
     fields.filter(
-      ([_key, value]) =>
-        typeof value === 'object' && Object.keys(value).length > 0,
+      ([key, value]) =>
+        typeof value === 'object' &&
+        Object.keys(value).length > 0 &&
+        key !== 'input' &&
+        key !== 'result',
     ),
   );
   const linkFields = $derived(
@@ -49,6 +56,16 @@
     ),
   );
 
+  const durationBetweenEvents = (
+    eventA: WorkflowEvent,
+    eventB: WorkflowEvent,
+  ) =>
+    formatDistanceAbbreviated({
+      start: eventA?.eventTime,
+      end: eventB?.eventTime,
+      includeMilliseconds: true,
+    });
+
   const hiddenDetailFields = $derived.by(() => {
     if (event.category === 'activity')
       return ['scheduledEventId', 'startedEventId', 'namespaceId'];
@@ -66,50 +83,91 @@
           (key === 'namespace' && page.params.namespace !== value)),
     ),
   );
+
+  const eventCategory = cva(
+    ['flex flex-1 flex-col overflow-hidden rounded-t-lg pb-2'],
+    {
+      variants: {
+        classification: {
+          Failed: 'bg-red-800',
+          Canceled: 'bg-orange-900/80',
+          TimedOut: 'bg-orange-700',
+          Completed: 'bg-green-700',
+          New: 'bg-blue-800/50',
+          Open: 'bg-blue-800/50',
+          Running: 'bg-blue-800/50',
+          Terminated: 'bg-gray-300',
+          Scheduled: 'bg-orange-900/50',
+          Initiated: 'bg-orange-900/50',
+          Started: 'bg-orange-900/60',
+          Fired: 'bg-orange-900/90',
+          Signaled: 'bg-orange-900/50',
+          CancelRequested: 'bg-orange-900/70',
+          Unspecified: 'bg-orange-900/60',
+        },
+      },
+    },
+  );
 </script>
 
 <div
-  class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
+  class={merge(
+    eventCategory({
+      classification: event.classification,
+    }),
+    className,
+  )}
 >
-  <div class="flex flex-wrap items-center justify-between gap-2">
-    <div class="flex items-center gap-2 text-base">
-      <p class="font-mono">{event.id}</p>
-      <p class="font-medium">
-        {displayName}
-      </p>
-    </div>
-    <Timestamp as="p" class="text-sm" dateTime={event.eventTime} />
-  </div>
-  <div class="flex flex-col gap-1 xl:flex-row">
-    <div class="flex w-full flex-col gap-1 xl:w-1/2">
-      {#if event?.links?.length}
-        {@render eventLinks(event.links)}
-      {/if}
-      {#if event?.userMetadata?.summary}
-        {@render eventSummary(event.userMetadata.summary)}
+  <div class="bg-slate-900/60 p-2 pb-1 text-left">
+    <div class="flex flex-col items-center justify-between lg:flex-row">
+      <div>
+        <p class="leading-tight">
+          <span class="font-mono">{event.id}</span>
+          <span class="font-medium">
+            {event.name}
+          </span>
+        </p>
+        <p class="text-xs text-white/70">
+          <Timestamp dateTime={event.eventTime} />
+        </p>
+      </div>
+      {#if nextEvent}
+        <Badge type="default" class="flex items-center gap-1">
+          <Icon name="clock" />
+          {durationBetweenEvents(event, nextEvent) || '0ms'}
+        </Badge>
       {/if}
-      {#each detailFields as [key, value] (key)}
-        {@render details(key, value)}
-      {/each}
-      {#each linkFields as [key, value] (key)}
-        {@render link(key, value)}
-      {/each}
     </div>
-    {#if payloadFields.length}
-      <div class="flex w-full flex-col gap-1 xl:w-1/2">
-        {#each payloadFields as [key, value] (key)}
-          {@render payloads(key, value)}
-        {/each}
-      </div>
+  </div>
+
+  <div class="grid grid-cols-1 gap-0.5 p-2 md:grid-cols-2 xl:grid-cols-1">
+    {#if event?.links?.length}
+      {@render eventLinks(event.links)}
+    {/if}
+    {#if event?.userMetadata?.summary}
+      {@render eventSummary(event.userMetadata.summary)}
     {/if}
+    {#each detailFields as [key, value] (key)}
+      {@render details(key, value)}
+    {/each}
+    {#each linkFields as [key, value] (key)}
+      {@render link(key, value)}
+    {/each}
   </div>
+  {#if payloadFields.length}
+    <div class="flex w-full flex-col gap-0.5 px-2">
+      {#each payloadFields as [key, value] (key)}
+        {@render payloads(key, value)}
+      {/each}
+    </div>
+  {/if}
 </div>
 
 {#snippet eventLink(link: ELink)}
   {@const href = getEventLinkHref(link)}
   {@const value = href.split('workflows/')?.[1] || href}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+  <div class="leading-tight">
+    <p class="text-sm text-white/70">
       {translate('nexus.link')}
     </p>
     <Copyable
@@ -117,15 +175,15 @@
       copySuccessIconTitle={translate('common.copy-success-icon-title')}
       content={value}
     >
-      <Link {href} class="whitespace-pre-line">{value}</Link>
+      <Link {href} class="whitespace-pre-line !text-white">{value}</Link>
     </Copyable>
   </div>
 {/snippet}
 
 {#snippet eventNamespaceLink(link: ELink)}
   {@const href = routeForNamespace({ namespace: link.workflowEvent.namespace })}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+  <div class="leading-tight">
+    <p class="text-sm text-white/70">
       {translate('nexus.link-namespace')}
     </p>
     <Copyable
@@ -133,7 +191,7 @@
       copySuccessIconTitle={translate('common.copy-success-icon-title')}
       content={link.workflowEvent.namespace}
     >
-      <Link {href} class="whitespace-pre-line"
+      <Link {href} class="whitespace-pre-line !text-white"
         >{link.workflowEvent.namespace}</Link
       >
     </Copyable>
@@ -148,8 +206,8 @@
 {/snippet}
 
 {#snippet eventSummary(value: Payload)}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">Summary</p>
+  <div class="leading-tight">
+    <p class="text-sm text-white/70">Summary</p>
     <p class="whitespace-pre-line">
       <MetadataDecoder
         {value}
@@ -165,8 +223,22 @@
 {#snippet payloads(key, value)}
   {@const codeBlockValue = getCodeBlockValue(value)}
   {@const stackTrace = getStackTrace(codeBlockValue)}
-  <div>
-    <p class="mb-1 min-w-56 text-sm text-secondary/80">
+  {#if stackTrace}
+    <div class="leading-tight">
+      <p class="mb-1 text-sm text-white/70">
+        {translate('workflows.call-stack-tab')}
+      </p>
+      <CodeBlock
+        content={stackTrace}
+        language="text"
+        maxHeight={320}
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      />
+    </div>
+  {/if}
+  <div class="leading-tight">
+    <p class="mb-1 text-sm text-white/70">
       {format(key)}
     </p>
     {#if value?.payloads}
@@ -174,7 +246,7 @@
         {#snippet children(decodedValue)}
           <CodeBlock
             content={decodedValue}
-            maxHeight={384}
+            maxHeight={320}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
           />
@@ -188,7 +260,7 @@
         {#snippet children(decodedValue)}
           <CodeBlock
             content={decodedValue}
-            maxHeight={384}
+            maxHeight={320}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
           />
@@ -199,7 +271,7 @@
         {#snippet children(decodedValue)}
           <CodeBlock
             content={decodedValue}
-            maxHeight={384}
+            maxHeight={320}
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
           />
@@ -207,25 +279,11 @@
       </PayloadDecoder>
     {/if}
   </div>
-  {#if stackTrace}
-    <div>
-      <p class="mb-1 min-w-56 text-sm text-secondary/80">
-        {translate('workflows.call-stack-tab')}
-      </p>
-      <CodeBlock
-        content={stackTrace}
-        language="text"
-        maxHeight={384}
-        copyIconTitle={translate('common.copy-icon-title')}
-        copySuccessIconTitle={translate('common.copy-success-icon-title')}
-      />
-    </div>
-  {/if}
 {/snippet}
 
 {#snippet link(key, value)}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+  <div class="leading-tight">
+    <p class="text-sm text-white/70">
       {format(key)}
     </p>
     <Copyable
@@ -237,15 +295,15 @@
         value={String(value)}
         {attributes}
         type={displayLinkType(key, attributes)}
-        class="whitespace-pre-line"
+        class="whitespace-pre-line break-all !text-white"
       />
     </Copyable>
   </div>
 {/snippet}
 
 {#snippet details(key, value)}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+  <div class="leading-tight">
+    <p class="text-sm text-white/70">
       {format(key)}
     </p>
     <p class="whitespace-pre-line break-all">
diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
index b638f7ed94..ef37a1f283 100644
--- a/src/lib/components/event/event-details-full.svelte
+++ b/src/lib/components/event/event-details-full.svelte
@@ -1,36 +1,217 @@
 <script lang="ts">
+  import { cva } from 'class-variance-authority';
+  import type { Snippet } from 'svelte';
+
+  import Badge from '$lib/holocene/badge.svelte';
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import type { WorkflowEvent } from '$lib/types/events';
+  import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
 
   import PendingActivityCard from '../workflow/pending-activity/pending-activity-card.svelte';
   import PendingNexusOperationCard from '../workflow/pending-nexus-operation/pending-nexus-operation-card.svelte';
+  import WorkflowStatus from '../workflow-status.svelte';
 
   import EventCard from './event-card.svelte';
+  import PayloadDecoder from './payload-decoder.svelte';
 
   let {
     group = undefined,
     event = undefined,
-  }: { group?: EventGroup; event?: WorkflowEvent } = $props();
+    height = undefined,
+    children = undefined,
+    headerActions = undefined,
+  }: {
+    group?: EventGroup;
+    event?: WorkflowEvent;
+    height?: number;
+    children?: Snippet;
+    headerActions?: Snippet;
+  } = $props();
 
   const pendingEvent = $derived(
     group?.pendingActivity || group?.pendingNexusOperation,
   );
-  const showEventGroup = $derived(
-    group && (group.eventList.length > 1 || pendingEvent),
+  const showEventGroup = $derived(group || pendingEvent);
+
+  const groupCategory = cva(['overflow-auto'], {
+    variants: {
+      category: {
+        workflow: 'bg-blue-600 text-white',
+        activity: 'bg-purple-600 text-white',
+        'child-workflow': 'bg-cyan-600  text-slate-900',
+        timer: 'bg-yellow-600 text-white',
+        signal: 'bg-pink-700 text-white',
+        update: 'bg-blue-600 text-white',
+        other: 'bg-slate-600 text-white',
+        nexus: 'bg-indigo-600 text-white',
+        'local-activity': 'bg-slate-600 text-white',
+        default: 'bg-purple-600 text-white',
+      },
+      classification: {
+        Failed: 'bg-red-800',
+        Canceled: 'bg-yellow-700',
+        TimedOut: 'bg-orange-700',
+        Terminated: 'bg-gray-300',
+      },
+    },
+  });
+
+  const title = $derived(
+    group ? group.displayName : event ? event.eventType : '',
+  );
+  const emptyValue = $derived(
+    group?.isPending ? 'Results will appear upon completion' : 'null',
   );
+  const hasInputOrResult = $derived(
+    group?.input !== undefined ||
+      group?.category === 'activity' ||
+      group?.category === 'nexus',
+  );
+  const duration = $derived(
+    formatDistanceAbbreviated({
+      start: group?.initialEvent?.eventTime,
+      end: group?.lastEvent?.eventTime,
+      includeMilliseconds: true,
+    }),
+  );
+  let status = $derived(group?.finalClassification || group?.classification);
+  const showHeader = $derived(group || pendingEvent);
+
+  $effect(() => {
+    if (group?.pendingActivity) {
+      if (group.pendingActivity.paused) {
+        status = translate('workflows.paused');
+      } else if (group.pendingActivity.attempt > 1) {
+        status = translate('events.event-classification.retrying');
+      } else {
+        status = translate('events.event-classification.pending');
+      }
+    }
+  });
 </script>
 
-{#if showEventGroup}
-  <div class="flex flex-col overflow-hidden">
+<div
+  class={groupCategory({
+    category: group ? group?.category : event?.category,
+    classification: group
+      ? group.finalClassification || group.classification
+      : event.classification,
+  })}
+  style="{height ? `min-height: ${height - 20}px;` : ''} {!height
+    ? 'max-height: 360px;'
+    : ''}"
+>
+  {#if showHeader}
+    {@render header()}
+  {/if}
+  <div class="flex flex-col gap-2" class:p-2={showEventGroup}>
+    {@render inputAndResults()}
+    {#if showEventGroup}
+      {@render eventCards()}
+    {/if}
+    {#if event && !hasInputOrResult}
+      <EventCard {event} class="rounded-t-none" />
+    {/if}
+    {@render children?.()}
+  </div>
+</div>
+
+{#snippet header()}
+  <div
+    class="flex h-full items-center justify-between bg-slate-900/50 text-sm text-white"
+  >
+    <div
+      class="flex h-full w-full flex-row flex-wrap items-start justify-between gap-2 px-2 py-2 text-sm md:items-center md:gap-4"
+    >
+      <div class="flex items-center gap-2">
+        {#if status}
+          <WorkflowStatus {status} class="h-6 p-2" />
+        {/if}
+        {#if group?.pendingActivity?.attempt}
+          <div class="flex items-center gap-1">
+            <Icon name="retry" />
+            {group.pendingActivity.attempt}
+          </div>
+        {/if}
+        <div class="flex flex-wrap">
+          {title}
+        </div>
+      </div>
+      {#if duration}
+        <Badge type="default" class="flex items-center gap-1 text-xs">
+          <Icon name="clock" />
+          {duration}
+        </Badge>
+      {/if}
+    </div>
+    <div class="flex items-center gap-4">
+      {@render headerActions?.()}
+    </div>
+  </div>
+{/snippet}
+
+{#snippet inputAndResults()}
+  {#if hasInputOrResult}
+    <div class="flex {!height ? 'flex-row' : 'flex-col'} items-start gap-2">
+      {#if (group?.category === 'activity' || group?.category === 'nexus') && !group.isPending}
+        <div class="flex w-full flex-col">
+          <p
+            class="rounded-t-lg bg-slate-900/60 px-2 py-1 text-base font-medium text-white"
+          >
+            Result
+          </p>
+          <PayloadDecoder value={group?.result} key="payloads">
+            {#snippet children(decodedValue)}
+              <CodeBlock
+                content={decodedValue ?? emptyValue}
+                maxHeight={height ? height / 2 : 240}
+                copyIconTitle={translate('common.copy-icon-title')}
+                copySuccessIconTitle={translate(
+                  'common.copy-success-icon-title',
+                )}
+              />
+            {/snippet}
+          </PayloadDecoder>
+        </div>
+      {/if}
+      {#if group?.input !== undefined}
+        <div class="flex w-full flex-col">
+          <p
+            class="rounded-t-lg bg-slate-900/60 px-2 py-1 text-base font-medium text-white"
+          >
+            Input
+          </p>
+          <PayloadDecoder value={group?.input} key="payloads">
+            {#snippet children(decodedValue)}
+              <CodeBlock
+                content={decodedValue}
+                maxHeight={height ? height / 2 : 240}
+                class="grow"
+                copyIconTitle={translate('common.copy-icon-title')}
+                copySuccessIconTitle={translate(
+                  'common.copy-success-icon-title',
+                )}
+              />
+            {/snippet}
+          </PayloadDecoder>
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet eventCards()}
+  <div class="flex flex-col gap-1 overflow-hidden text-white xl:flex-row">
+    <!-- {#each group.eventList as groupEvent, index}
+      <EventCard event={groupEvent} nextEvent={group.eventList[index + 1]} />
+    {/each} -->
     {#if group?.pendingActivity}
       <PendingActivityCard activity={group.pendingActivity} />
     {:else if group?.pendingNexusOperation}
       <PendingNexusOperationCard operation={group.pendingNexusOperation} />
     {/if}
-    {#each group.eventList as groupEvent}
-      <EventCard event={groupEvent} />
-    {/each}
   </div>
-{:else if event}
-  <EventCard {event} />
-{/if}
+{/snippet}
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index 63382f9224..cdd368d189 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cva } from 'class-variance-authority';
   import { onMount } from 'svelte';
   import { twMerge as merge } from 'tailwind-merge';
 
@@ -42,6 +43,8 @@
   import { routeForEventHistoryEvent } from '$lib/utilities/route-for';
   import { toTimeDifference } from '$lib/utilities/to-time-difference';
 
+  import { CategoryIcon } from '../lines-and-dots/constants';
+
   import EventDetailsFull from './event-details-full.svelte';
   import EventDetailsRow from './event-details-row.svelte';
   import EventLink from './event-link.svelte';
@@ -210,6 +213,26 @@
       });
     }
   });
+
+  const eventTypeStyle = cva(
+    ['whitespace-nowrap font-semibold md:text-base flex items-center gap-0.5'],
+    {
+      variants: {
+        category: {
+          workflow: 'text-blue-700 dark:text-blue-400',
+          activity: 'text-purple-600 dark:text-purple-500',
+          'child-workflow': 'text-cyan-600',
+          timer: 'text-yellow-600 dark:text-yellow-400',
+          signal: 'text-pink-600 dark:text-pink-400',
+          update: 'text-blue-600 dark:text-blue-400',
+          other: 'text-slate-700 dark:text-slate-300',
+          nexus: 'text-indigo-600 dark:text-indigo-400',
+          'local-activity': 'text-slate-700 dark:text-slate-300',
+          default: 'text-purple-600 dark:text-purple-500',
+        },
+      },
+    },
+  );
 </script>
 
 <tr
@@ -285,7 +308,8 @@
     </Tooltip>
   </td>
   <td class="truncate">
-    <p class="whitespace-nowrap font-semibold md:text-base">
+    <p class={eventTypeStyle({ category: event.category })}>
+      <Icon name={CategoryIcon[event.category]} class="mr-1 inline" />
       {displayName}
     </p>
   </td>
diff --git a/src/lib/components/event/event-summary-table.svelte b/src/lib/components/event/event-summary-table.svelte
index 3664d0b519..f9a73d819b 100644
--- a/src/lib/components/event/event-summary-table.svelte
+++ b/src/lib/components/event/event-summary-table.svelte
@@ -35,10 +35,9 @@
   export let updating = false;
   export let loading = false;
   export let compact = false;
-  export let minimized = true;
   export let hoveredEventId: string | undefined = undefined;
 
-  $: showGraph = !minimized && !compact;
+  $: showGraph = !compact;
 
   $: initialItem = $fullEventHistory?.[0];
 
@@ -74,10 +73,7 @@
 </script>
 
 <div class="flex">
-  <div
-    class="pt-9"
-    style="max-height: {minimized ? 'calc(100vh - 200px)' : '20000px'}"
-  >
+  <div class="pt-9" style="max-height: 20000px;">
     {#if showGraph}
       <HistoryGraph {groups} history={paginatedHistory(items)} />
     {/if}
@@ -90,7 +86,7 @@
     {updating}
     items={filteredForStatus(items)}
     let:visibleItems
-    maxHeight={minimized ? 'calc(100vh - 200px)' : '20000px'}
+    maxHeight="20000px"
   >
     <TableHeaderRow slot="headers" class="!h-8">
       {#each columns as column}
diff --git a/src/lib/components/event/event-summary.svelte b/src/lib/components/event/event-summary.svelte
index ff90a254d5..4f8e2639b8 100644
--- a/src/lib/components/event/event-summary.svelte
+++ b/src/lib/components/event/event-summary.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import EventSummaryTable from '$lib/components/event/event-summary-table.svelte';
-  import TabButton from '$lib/holocene/tab-buttons/tab-button.svelte';
-  import TabButtons from '$lib/holocene/tab-buttons/tab-buttons.svelte';
   import type { EventGroups } from '$lib/models/event-groups/event-groups';
-  import WorkflowHistoryJson from '$lib/pages/workflow-history-json.svelte';
-  import { eventFilterSort, eventViewType } from '$lib/stores/event-view';
+  import { eventFilterSort, historyViewType } from '$lib/stores/event-view';
   import { fullEventHistory } from '$lib/stores/events';
   import { eventCategoryFilter } from '$lib/stores/filters';
   import { workflowRun } from '$lib/stores/workflow-run';
@@ -17,15 +14,14 @@
 
   export let history: IterableEventWithPending[];
   export let groups: EventGroups;
-  export let minimized = true;
 
   $: ({ workflow } = $workflowRun);
   $: reverseSort = $eventFilterSort === 'descending';
   $: updating = !$fullEventHistory.length;
-  $: compact = $eventViewType === 'compact';
+  $: compact = $historyViewType === 'compact';
 
-  $: $eventCategoryFilter = $page.url?.searchParams?.get('category')
-    ? ($page.url?.searchParams
+  $: $eventCategoryFilter = page.url?.searchParams?.get('category')
+    ? (page.url?.searchParams
         ?.get('category')
         .split(',') as EventTypeCategory[])
     : undefined;
@@ -38,53 +34,8 @@
     : reverseSort
       ? [...pendingNexusOperations, ...pendingActivities, ...history]
       : [...history, ...pendingActivities, ...pendingNexusOperations];
-
-  const onAllClick = () => {
-    $eventViewType = 'feed';
-  };
-
-  const onCompactClick = () => {
-    $eventViewType = 'compact';
-  };
-
-  const onJSONClick = () => {
-    $eventViewType = 'json';
-  };
 </script>
 
-<div class="flex items-center justify-end gap-4 pt-4 lg:pt-8">
-  <div class="flex items-center gap-2 px-4">
-    <TabButtons>
-      <TabButton
-        active={$eventViewType === 'feed'}
-        data-testid="feed"
-        icon="feed"
-        class="h-10"
-        on:click={onAllClick}>All</TabButton
-      >
-      <TabButton
-        active={$eventViewType === 'compact'}
-        data-testid="compact"
-        icon="compact"
-        class="h-10"
-        on:click={onCompactClick}>Compact</TabButton
-      >
-      <TabButton
-        active={$eventViewType === 'json'}
-        data-testid="json"
-        icon="json"
-        class="h-10"
-        on:click={onJSONClick}>JSON</TabButton
-      >
-    </TabButtons>
-  </div>
+<div data-testid="event-summary-table">
+  <EventSummaryTable {updating} {items} {groups} {compact} />
 </div>
-{#if $eventViewType === 'json'}
-  <div class="border-t border-subtle px-4">
-    <WorkflowHistoryJson />
-  </div>
-{:else}
-  <div data-testid="event-summary-table">
-    <EventSummaryTable {updating} {items} {groups} {compact} {minimized} />
-  </div>
-{/if}
diff --git a/src/lib/components/event/pending-activity-summary-row.svelte b/src/lib/components/event/pending-activity-summary-row.svelte
index db519f171c..fe0b024580 100644
--- a/src/lib/components/event/pending-activity-summary-row.svelte
+++ b/src/lib/components/event/pending-activity-summary-row.svelte
@@ -109,7 +109,11 @@
     {/if}
   </td>
   <td class="">
-    <p class="truncate font-semibold md:text-base">Pending Activity</p>
+    <p
+      class="truncate font-semibold text-purple-600 md:text-base dark:text-purple-500"
+    >
+      Pending Activity
+    </p>
   </td>
   <td class="w-full overflow-hidden text-right font-normal xl:text-left">
     <div class="flex items-center gap-1">
diff --git a/src/lib/components/event/pending-nexus-summary-row.svelte b/src/lib/components/event/pending-nexus-summary-row.svelte
index ff4eb81c0f..7241af0892 100644
--- a/src/lib/components/event/pending-nexus-summary-row.svelte
+++ b/src/lib/components/event/pending-nexus-summary-row.svelte
@@ -106,7 +106,9 @@
   >
     <div class="flex">
       <div class="flex w-full items-center gap-2">
-        <p class="font-semibold md:text-base">
+        <p
+          class="font-semibold text-indigo-600 md:text-base dark:text-indigo-400"
+        >
           {translate('workflows.pending-nexus-operation')}
         </p>
         {#if event.attempt}
diff --git a/src/lib/components/lines-and-dots/constants.ts b/src/lib/components/lines-and-dots/constants.ts
index 265ee3c7d8..f340235183 100644
--- a/src/lib/components/lines-and-dots/constants.ts
+++ b/src/lib/components/lines-and-dots/constants.ts
@@ -29,9 +29,9 @@ export type GraphConfig = {
 const baseRadius = 6;
 
 export const TimelineConfig: GraphConfig = {
-  height: baseRadius * 5,
+  height: baseRadius * 4,
   gutter: baseRadius * 8,
-  radius: baseRadius * 2,
+  radius: baseRadius * 1.5,
   fontSizeRatio: baseRadius * 4,
 };
 
@@ -249,7 +249,7 @@ export const getCategoryColor = (type: EventTypeCategory): string => {
     case 'workflow':
       return '#059669';
     case 'child-workflow':
-      return '#67e4f9';
+      return '#0899b2';
     case 'update':
       return '#FF9B70';
     case 'nexus':
diff --git a/src/lib/components/lines-and-dots/event-type-filter.svelte b/src/lib/components/lines-and-dots/event-type-filter.svelte
index bf538fa514..81dfbb909e 100644
--- a/src/lib/components/lines-and-dots/event-type-filter.svelte
+++ b/src/lib/components/lines-and-dots/event-type-filter.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
 
-  import { page } from '$app/stores';
-
   import Checkbox from '$lib/holocene/checkbox.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import MenuButton from '$lib/holocene/menu/menu-button.svelte';
@@ -18,41 +16,30 @@
   import { clearActiveGroups } from '$lib/stores/active-events';
   import { eventViewType } from '$lib/stores/event-view';
   import { eventStatusFilter, eventTypeFilter } from '$lib/stores/filters';
-  import { temporalVersion } from '$lib/stores/versions';
-  import { nexusEnabled } from '$lib/utilities/nexus-enabled';
-  import { isVersionNewer } from '$lib/utilities/version-check';
 
   import { CategoryIcon } from './constants';
 
-  export let compact = false;
-  export let minimized = true;
+  type Props = {
+    compact: boolean;
+  };
+  let { compact }: Props = $props();
 
   let open = writable(false);
 
-  $: defaultOptions = compact
-    ? compactEventTypeOptions.map((o) => o.value)
-    : allEventTypeOptions.map((o) => o.value);
+  const defaultOptions = $derived(
+    compact
+      ? compactEventTypeOptions.map((o) => o.value)
+      : allEventTypeOptions.map((o) => o.value),
+  );
 
-  $: options = [
+  const options = $derived([
     ...(compact ? compactEventTypeOptions : allEventTypeOptions).map((o) => ({
       ...o,
       label: translate(o.label),
       icon: CategoryIcon[o.value],
       description: translate(o.description),
     })),
-  ];
-
-  $: {
-    if (isVersionNewer('1.21.0', $temporalVersion)) {
-      options = options.filter(({ value }) => value !== 'update');
-    }
-  }
-
-  $: {
-    if (!nexusEnabled($page.data.systemInfo?.capabilities)) {
-      options = options.filter(({ value }) => value !== 'nexus');
-    }
-  }
+  ]);
 
   const onOptionClick = ({ value }) => {
     clearActiveGroups();
@@ -61,7 +48,9 @@
       : [...$eventTypeFilter, value];
   };
 
-  $: filterActive = $eventTypeFilter.length < defaultOptions.length;
+  const filterActive = $derived(
+    $eventTypeFilter.length < defaultOptions.length,
+  );
 </script>
 
 <MenuContainer {open}>
@@ -79,7 +68,7 @@
   <Menu
     id="event-type-menu"
     keepOpen
-    position={minimized ? 'top-right' : 'right'}
+    position="right"
     class="w-[220px] md:w-[360px]"
   >
     <MenuItem
diff --git a/src/lib/components/lines-and-dots/history-view-toggle.svelte b/src/lib/components/lines-and-dots/history-view-toggle.svelte
new file mode 100644
index 0000000000..c274d1e8f2
--- /dev/null
+++ b/src/lib/components/lines-and-dots/history-view-toggle.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
+  import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { historyViewType } from '$lib/stores/event-view';
+</script>
+
+<div class="flex items-center gap-2">
+  <ToggleButtons>
+    <ToggleButton
+      active={$historyViewType === 'summary'}
+      data-testid="summary"
+      leadingIcon="lightning-bolt"
+      size="sm"
+      on:click={() => ($historyViewType = 'summary')}>Summary</ToggleButton
+    >
+    <ToggleButton
+      data-testid="timeline-view"
+      size="sm"
+      leadingIcon="timeline"
+      active={$historyViewType === 'timeline'}
+      on:click={() => ($historyViewType = 'timeline')}
+    >
+      {translate('workflows.timeline-tab')}
+    </ToggleButton>
+    <ToggleButton
+      data-testid="compact-view"
+      size="sm"
+      leadingIcon="compact"
+      active={$historyViewType === 'compact'}
+      on:click={() => ($historyViewType = 'compact')}
+    >
+      Compact
+    </ToggleButton>
+    <ToggleButton
+      data-testid="history-view"
+      size="sm"
+      leadingIcon="feed"
+      active={$historyViewType === 'history'}
+      on:click={() => ($historyViewType = 'history')}
+    >
+      All
+    </ToggleButton>
+    <ToggleButton
+      data-testid="json-view"
+      size="sm"
+      leadingIcon="json"
+      active={$historyViewType === 'json'}
+      on:click={() => ($historyViewType = 'json')}
+    >
+      JSON
+    </ToggleButton>
+    <ToggleButton
+      data-testid="relationship-view"
+      size="sm"
+      leadingIcon="relationship"
+      active={$historyViewType === 'relationship'}
+      on:click={() => ($historyViewType = 'relationship')}
+    >
+      {translate('workflows.relationships')}
+    </ToggleButton>
+    <ToggleButton
+      data-testid="workers-view"
+      size="sm"
+      leadingIcon="merge"
+      active={$historyViewType === 'workers'}
+      on:click={() => ($historyViewType = 'workers')}
+    >
+      Workers
+    </ToggleButton>
+  </ToggleButtons>
+</div>
diff --git a/src/lib/components/lines-and-dots/svg/box.svelte b/src/lib/components/lines-and-dots/svg/box.svelte
index 5152658a30..2e2d3a0d2d 100644
--- a/src/lib/components/lines-and-dots/svg/box.svelte
+++ b/src/lib/components/lines-and-dots/svg/box.svelte
@@ -15,7 +15,7 @@
 <style lang="postcss">
   .Failed,
   .Terminated {
-    stroke: #f55;
+    stroke: #ff4418;
     stroke-width: 3;
   }
 
@@ -41,6 +41,6 @@
   }
 
   .retry {
-    stroke: #f55;
+    stroke: #c71607;
   }
 </style>
diff --git a/src/lib/components/lines-and-dots/svg/dot.svelte b/src/lib/components/lines-and-dots/svg/dot.svelte
index 47152930a3..47c414c33c 100644
--- a/src/lib/components/lines-and-dots/svg/dot.svelte
+++ b/src/lib/components/lines-and-dots/svg/dot.svelte
@@ -17,15 +17,17 @@
 </script>
 
 <g>
-  <circle
+  <rect
     class="dot {category} {classification}"
     stroke-width={strokeWidth}
-    cx={x}
-    cy={y}
-    {r}
+    x={x - r}
+    y={y - r}
+    width={r * 2}
+    height={r * 2}
+    rx={r * 0.3}
   >
     <slot />
-  </circle>
+  </rect>
   {#if icon}
     <Icon
       name={icon}
diff --git a/src/lib/components/lines-and-dots/svg/event-details-overlay.svelte b/src/lib/components/lines-and-dots/svg/event-details-overlay.svelte
new file mode 100644
index 0000000000..11157cd8b6
--- /dev/null
+++ b/src/lib/components/lines-and-dots/svg/event-details-overlay.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import { page } from '$app/state';
+
+  import EventDetailsFull from '$lib/components/event/event-details-full.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import { clickoutside } from '$lib/holocene/outside-click';
+  import type { EventGroup } from '$lib/models/event-groups/event-groups';
+  import { isChildWorkflowExecutionStartedEvent } from '$lib/utilities/is-event-type';
+
+  import GraphWidget from './graph-widget.svelte';
+
+  type Props = {
+    group: EventGroup;
+    onClose: () => void;
+  };
+
+  let { group, onClose }: Props = $props();
+
+  const namespace = $derived(page.params.namespace);
+  const childWorkflowStartedEvent = $derived(
+    group && group.eventList.find(isChildWorkflowExecutionStartedEvent),
+  );
+
+  const MIN_WIDTH = 320;
+  const MAX_WIDTH = 900;
+  const MIN_HEIGHT = 200;
+  const MAX_HEIGHT = 800;
+
+  let width = $state(480);
+  let height = $state(400);
+  let isResizing = $state(false);
+  let startX = $state(0);
+  let startY = $state(0);
+  let startWidth = $state(0);
+  let startHeight = $state(0);
+  let handleRef: HTMLDivElement | null = $state(null);
+
+  const onResizeStart = (e: PointerEvent) => {
+    e.preventDefault();
+    isResizing = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    startWidth = width;
+    startHeight = height;
+    handleRef?.setPointerCapture(e.pointerId);
+  };
+
+  const onResizeMove = (e: PointerEvent) => {
+    if (!isResizing) return;
+    e.preventDefault();
+
+    const deltaX = startX - e.clientX;
+    const deltaY = e.clientY - startY;
+
+    width = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + deltaX));
+    height = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startHeight + deltaY));
+  };
+
+  const onResizeEnd = (e: PointerEvent) => {
+    if (!isResizing) return;
+    isResizing = false;
+    handleRef?.releasePointerCapture(e.pointerId);
+  };
+</script>
+
+<div
+  class="absolute right-4 top-4 z-50 flex flex-col overflow-hidden rounded-lg shadow-xl"
+  style="width: {width}px; height: {height}px;"
+  use:clickoutside={() => onClose()}
+  transition:fade={{ duration: 150 }}
+>
+  <div class="min-h-0 flex-1 overflow-auto">
+    {#key group}
+      <EventDetailsFull {group} event={group.initialEvent} {height}>
+        {#snippet headerActions()}
+          <Button
+            variant="ghost"
+            size="xs"
+            class="ml-1 h-10 w-10"
+            on:click={onClose}
+          >
+            <Icon name="close" class="text-white" />
+          </Button>
+        {/snippet}
+        {#if childWorkflowStartedEvent}
+          <div>
+            <div class="surface-primary">
+              {#key group.eventList.length}
+                <GraphWidget
+                  {namespace}
+                  workflowId={childWorkflowStartedEvent.attributes
+                    .workflowExecution.workflowId}
+                  runId={childWorkflowStartedEvent.attributes.workflowExecution
+                    .runId}
+                  viewportHeight={160}
+                  class="surface-primary overflow-x-hidden border-t border-subtle"
+                />
+              {/key}
+            </div>
+          </div>
+        {/if}
+      </EventDetailsFull>
+    {/key}
+  </div>
+
+  <div
+    bind:this={handleRef}
+    role="slider"
+    tabindex="0"
+    aria-label="Resize panel"
+    aria-valuenow={width}
+    class="flex h-5 shrink-0 cursor-nesw-resize items-center bg-slate-800"
+    style="touch-action: none; user-select: none;"
+    onpointerdown={onResizeStart}
+    onpointermove={onResizeMove}
+    onpointerup={onResizeEnd}
+    onpointercancel={onResizeEnd}
+  >
+    <svg
+      viewBox="0 0 10 10"
+      class="pointer-events-none ml-1 h-3 w-3 rotate-90 text-white/50"
+    >
+      <path
+        stroke="currentColor"
+        stroke-width="1.5"
+        fill="none"
+        d="M1 9L9 1M5 9L9 5M9 9L9 9"
+      />
+    </svg>
+  </div>
+</div>
diff --git a/src/lib/components/lines-and-dots/svg/group-details-row.svelte b/src/lib/components/lines-and-dots/svg/group-details-row.svelte
index 5e769a0727..597300d85b 100644
--- a/src/lib/components/lines-and-dots/svg/group-details-row.svelte
+++ b/src/lib/components/lines-and-dots/svg/group-details-row.svelte
@@ -1,113 +1,79 @@
 <script lang="ts">
+  import { fade } from 'svelte/transition';
+
   import { tick } from 'svelte';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import EventDetailsFull from '$lib/components/event/event-details-full.svelte';
-  import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
-  import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { activeGroupHeight, setActiveGroup } from '$lib/stores/active-events';
-  import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
   import { isChildWorkflowExecutionStartedEvent } from '$lib/utilities/is-event-type';
 
   import GraphWidget from './graph-widget.svelte';
 
-  export let group: EventGroup;
-  export let canvasWidth: number;
-  export let x = 0;
-  export let y: number;
+  type Props = {
+    group: EventGroup;
+    canvasWidth: number;
+    x?: number;
+    y: number;
+  };
+  let { group, canvasWidth, x = 0, y }: Props = $props();
+  let offsetHeight = $state(0);
 
-  let offsetHeight;
-  $: contentHeight = offsetHeight || 0;
+  const namespace = $derived(page.params.namespace);
+  let contentHeight = $derived(offsetHeight || 0);
+  const childWorkflowStartedEvent = $derived(
+    group && group.eventList.find(isChildWorkflowExecutionStartedEvent),
+  );
 
   const setActiveGroupHeight = (height) => {
     $activeGroupHeight = height;
   };
 
-  $: setActiveGroupHeight(contentHeight || 0);
-
-  $: status = group?.finalClassification || group?.classification;
-  $: ({ namespace } = $page.params);
-  $: width = canvasWidth;
-  $: title = group.displayName;
-
-  $: childWorkflowStartedEvent =
-    group && group.eventList.find(isChildWorkflowExecutionStartedEvent);
-
-  $: duration = formatDistanceAbbreviated({
-    start: group?.initialEvent?.eventTime,
-    end: group?.lastEvent?.eventTime,
-    includeMilliseconds: true,
+  $effect(() => {
+    setActiveGroupHeight(contentHeight);
   });
 
-  $: {
-    if (group?.pendingActivity) {
-      if (group.pendingActivity.paused) {
-        status = translate('workflows.paused');
-      } else if (group.pendingActivity.attempt > 1) {
-        status = translate('events.event-classification.retrying');
-      } else {
-        status = translate('events.event-classification.pending');
-      }
-    }
-  }
-
   const onDecode = async () => {
     await tick();
     contentHeight = offsetHeight;
   };
 </script>
 
-<g role="button" tabindex="0" class="relative z-50">
-  <foreignObject {x} {y} {width} height={contentHeight}>
+<g role="button" tabindex="0" class="relative z-50" in:fade>
+  <foreignObject {x} {y} width={canvasWidth} height={contentHeight}>
     <div bind:offsetHeight class="flex flex-col">
-      <div
-        class="relative flex h-full items-center justify-between bg-slate-50 text-sm dark:bg-slate-800"
-      >
-        <div class="flex h-full items-center gap-4 px-2">
-          {#if status}
-            <WorkflowStatus {status} />
-          {/if}
-          {title}
-          {#if duration}
-            <div class="flex items-center gap-1">
-              <Icon name="clock" />
-              {duration}
-            </div>
-          {/if}
-        </div>
-        <div class="flex items-center gap-4">
+      <EventDetailsFull {group} event={group.initialEvent}>
+        {#snippet headerActions()}
           <Button
             variant="ghost"
             size="xs"
             on:click={() => setActiveGroup(group)}
-            >{translate('common.close')} <Icon name="close" /></Button
+            ><Icon name="close" class="text-white" /></Button
           >
-        </div>
-      </div>
-      <div class="surface-primary">
-        <EventDetailsFull {group} event={group.initialEvent} />
-      </div>
-      {#if childWorkflowStartedEvent}
-        <div class="surface-primary p-4">
-          <div class="font-medium leading-4 text-secondary">Child Workflow</div>
-          {#key group.eventList.length}
-            <GraphWidget
-              {namespace}
-              workflowId={childWorkflowStartedEvent.attributes.workflowExecution
-                .workflowId}
-              runId={childWorkflowStartedEvent.attributes.workflowExecution
-                .runId}
-              viewportHeight={320}
-              class="surface-primary overflow-x-hidden border-t border-subtle"
-              onLoad={onDecode}
-            />
-          {/key}
-        </div>
-      {/if}
+        {/snippet}
+        {#if childWorkflowStartedEvent}
+          <div>
+            <div class="surface-primary">
+              {#key group.eventList.length}
+                <GraphWidget
+                  {namespace}
+                  workflowId={childWorkflowStartedEvent.attributes
+                    .workflowExecution.workflowId}
+                  runId={childWorkflowStartedEvent.attributes.workflowExecution
+                    .runId}
+                  viewportHeight={320}
+                  class="surface-primary overflow-x-hidden border-t border-subtle"
+                  onLoad={onDecode}
+                />
+              {/key}
+            </div>
+          </div>
+        {/if}
+      </EventDetailsFull>
     </div>
   </foreignObject>
 </g>
diff --git a/src/lib/components/lines-and-dots/svg/line.svelte b/src/lib/components/lines-and-dots/svg/line.svelte
index e3ed1ea396..94945542fc 100644
--- a/src/lib/components/lines-and-dots/svg/line.svelte
+++ b/src/lib/components/lines-and-dots/svg/line.svelte
@@ -49,7 +49,7 @@
     cursor: pointer;
     opacity: 1;
     outline: none;
-    stroke: #444ce7;
+    stroke: currentColor;
   }
 
   .none {
@@ -88,16 +88,20 @@
   }
 
   .child-workflow {
-    stroke: #67e4f9;
+    stroke: theme('colors.cyan.600');
   }
 
   .Completed {
     stroke: #1ff1a5;
   }
 
+  .ContinuedAsNew {
+    stroke: #e2d6fe;
+  }
+
   .Failed,
   .Terminated {
-    stroke: #f55;
+    stroke: #c71607;
   }
 
   .Signaled {
diff --git a/src/lib/components/lines-and-dots/svg/text.svelte b/src/lib/components/lines-and-dots/svg/text.svelte
index b673523937..5a8e77a6b3 100644
--- a/src/lib/components/lines-and-dots/svg/text.svelte
+++ b/src/lib/components/lines-and-dots/svg/text.svelte
@@ -101,7 +101,7 @@
   }
 
   text.child-workflow {
-    fill: #67e4f9;
+    fill: theme('colors.cyan.600');
   }
 
   text.workflow {
@@ -109,7 +109,7 @@
   }
 
   text.Failed {
-    fill: #f55;
+    fill: #ff4418;
   }
 
   text.none {
diff --git a/src/lib/components/lines-and-dots/svg/timeline-axis.svelte b/src/lib/components/lines-and-dots/svg/timeline-axis.svelte
index cb2112ab4a..f6d70fb40c 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-axis.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-axis.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Timestamp } from '$lib/types';
+  import type { WorkflowExecution } from '$lib/types/workflows';
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
 
   import { TimelineConfig } from '../constants';
@@ -11,6 +12,7 @@
   export let timelineHeight = 1000;
   export let startTime: string | Timestamp;
   export let duration: number;
+  export let workflow: WorkflowExecution;
 
   const { radius } = TimelineConfig;
   const ticks = 20;
@@ -23,6 +25,7 @@
   strokeWidth={radius / 2}
   startPoint={[x1, timelineHeight]}
   endPoint={[x1 + distance, timelineHeight]}
+  classification={workflow.status}
 />
 {#each Array(ticks) as _, i}
   {@const tickX = x1 + i * tickDistance}
@@ -32,6 +35,7 @@
       strokeWidth={0.5}
       startPoint={[tickX, 0]}
       endPoint={[tickX, timelineHeight]}
+      strokeDasharray="2"
     />
   {/if}
   {#if i !== 0}
diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
index 8d98516c56..94606472de 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Timestamp } from '@temporalio/common';
+  import { cva } from 'class-variance-authority';
   import { onMount } from 'svelte';
 
   import { page } from '$app/state';
@@ -30,23 +31,35 @@
   import Line from './line.svelte';
   import Text from './text.svelte';
 
-  export let y = 0;
-  export let group: EventGroup;
-  export let activeGroups: string[] = [];
-  export let startTime: string | Timestamp;
-  export let endTime: string | Date;
-  export let canvasWidth: number;
-  export let active = true;
-  export let readOnly = false;
+  type Props = {
+    y: number;
+    group: EventGroup;
+    startTime: string | Timestamp;
+    endTime: string | Date;
+    canvasWidth: number;
+    readOnly: boolean;
+  };
+
+  let {
+    y = 0,
+    group,
+    startTime,
+    endTime,
+    canvasWidth,
+    readOnly = false,
+  }: Props = $props();
 
   const { height, gutter, radius } = TimelineConfig;
 
-  $: timelineWidth = canvasWidth - 2 * gutter;
-  $: active = !activeGroups.length || activeGroups.includes(group.id);
-  $: pendingActivity = group?.pendingActivity;
-  $: pauseTime = pendingActivity && pendingActivity.pauseInfo?.pauseTime;
+  let hovering = $state(false);
 
-  let decodedLocalActivity: SummaryAttribute | undefined;
+  const timelineWidth = $derived(canvasWidth - 2 * gutter);
+  const pendingActivity = $derived(group?.pendingActivity);
+  const pauseTime = $derived(
+    pendingActivity && pendingActivity.pauseInfo?.pauseTime,
+  );
+
+  let decodedLocalActivity: SummaryAttribute | undefined = $state(undefined);
 
   onMount(async () => {
     const localActivityEvent = getLocalActivityMarkerEvent(group);
@@ -113,25 +126,84 @@
     return { points, textAnchor, textIndex, textPosition, backdrop };
   };
 
-  $: ({ points, textAnchor, textIndex, textPosition, backdrop } =
-    getDistancePointsAndPositions(endTime, timelineWidth, y));
+  const { points, textAnchor, textIndex, textPosition, backdrop } = $derived(
+    getDistancePointsAndPositions(endTime, timelineWidth, y),
+  );
 
   const onClick = () => {
     if (readOnly) return;
     setActiveGroup(group);
   };
 
-  $: activityTaskScheduled = group.eventList.find(isActivityTaskStartedEvent);
-  $: retried =
-    activityTaskScheduled && activityTaskScheduled.attributes?.attempt > 1;
-  $: pendingLine = group.isPending || !!pauseTime;
+  const onMouseEnter = () => {
+    if (readOnly) return;
+    hovering = true;
+  };
+
+  const onMouseLeave = () => {
+    if (readOnly) return;
+    hovering = false;
+  };
+
+  const activityTaskScheduled = $derived(
+    group.eventList.find(isActivityTaskStartedEvent),
+  );
+  const retried = $derived(
+    activityTaskScheduled && activityTaskScheduled.attributes?.attempt > 1,
+  );
+  const pendingLine = $derived(group.isPending || !!pauseTime);
+
+  const multiEventHoverWidth = $derived(
+    points.length >= 2 && points[points.length - 1] - points[0] + radius * 3,
+  );
+  const pendingHoverWidth = $derived(
+    group.isPending && canvasWidth - points[0] - radius * 1.5,
+  );
+  const singleEventHoverWidth = $derived(radius * 3);
+
+  const hoverWidth = $derived(
+    pendingHoverWidth || multiEventHoverWidth || singleEventHoverWidth,
+  );
+
+  const groupHover = cva(['h-full w-full rounded-full border-2'], {
+    variants: {
+      category: {
+        workflow: 'border-blue-700 bg-blue-800/80 ',
+        activity: 'border-purple-700 bg-purple-800/80 ',
+        'child-workflow': 'border-cyan-600  bg-cyan-600/80 ',
+        timer: 'border-yellow-700 bg-yellow-800/80',
+        signal: 'border-pink-700 bg-pink-800/80',
+        update: 'border-blue-700 bg-blue-800/80',
+        other: 'border-slate-700 bg-slate-800/80',
+        nexus: 'border-indigo-700 bg-indigo-800/80',
+        'local-activity': 'border-slate-700 bg-slate-800/80',
+        default: 'border-purple-700 bg-purple-900/80',
+      },
+    },
+  });
 </script>
 
+{#if hovering}
+  <foreignObject
+    x={points[0] - radius * 1.5}
+    y={y - radius * 1.5}
+    width={hoverWidth}
+    height={radius * 3}
+  >
+    <div
+      class={groupHover({
+        category: group ? group.category : 'default',
+      })}
+    ></div>
+  </foreignObject>
+{/if}
 <g
   role="button"
   tabindex="0"
-  on:click={onClick}
-  on:keypress={onClick}
+  onclick={onClick}
+  onkeypress={onClick}
+  onmouseenter={onMouseEnter}
+  onmouseleave={onMouseLeave}
   class="relative cursor-pointer"
   {height}
 >
diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
index f939a76024..b539ffe98b 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
-  import type {
-    EventGroup,
-    EventGroups,
-  } from '$lib/models/event-groups/event-groups';
-  import { activeGroupHeight, activeGroups } from '$lib/stores/active-events';
-  import { eventFilterSort } from '$lib/stores/event-view';
+  import type { EventGroups } from '$lib/models/event-groups/event-groups';
+  import { activeGroup, setActiveGroup } from '$lib/stores/active-events';
   import { fullEventHistory } from '$lib/stores/events';
   import { eventStatusFilter } from '$lib/stores/filters';
   import { timeFormat } from '$lib/stores/time-format';
@@ -16,7 +12,7 @@
   import { TimelineConfig } from '../constants';
   import EndTimeInterval from '../end-time-interval.svelte';
 
-  import GroupDetailsRow from './group-details-row.svelte';
+  import EventDetailsOverlay from './event-details-overlay.svelte';
   import Line from './line.svelte';
   import TimelineAxis from './timeline-axis.svelte';
   import TimelineGraphRow from './timeline-graph-row.svelte';
@@ -26,16 +22,14 @@
   export let y = 0;
   export let workflow: WorkflowExecution;
   export let groups: EventGroups;
-  export let viewportHeight: number | undefined;
+  export let viewportHeight: number | undefined = undefined;
   export let readOnly = false;
-  export let error: boolean = false;
 
   const { height, gutter, radius } = TimelineConfig;
 
   let canvasWidth = 0;
   let scrollY = 0;
 
-  $: expandedGroupHeight = readOnly ? 0 : $activeGroupHeight;
   $: filteredGroups = getFailedOrPendingGroups(groups, $eventStatusFilter);
   $: firstStartTime =
     $fullEventHistory[0]?.eventTime < workflow.executionTime
@@ -43,24 +37,15 @@
       : workflow.executionTime;
   $: startTime =
     (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime;
-  $: timelineHeight =
-    Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight;
+  $: timelineHeight = Math.max(
+    height * (filteredGroups.length + 2),
+    Math.min(360, viewportHeight || 360),
+  );
   $: canvasHeight = timelineHeight + 120;
 
   const handleScroll = (e) => {
     scrollY = e?.target?.scrollTop;
   };
-
-  $: activeGroupsHeightAboveGroup = (group: EventGroup) => {
-    const activeGroupIsAbove = $activeGroups?.filter((id) => {
-      if ($eventFilterSort === 'ascending')
-        return parseInt(id) < parseInt(group.id);
-      return parseInt(id) > parseInt(group.id);
-    });
-
-    if (!activeGroupIsAbove?.length) return 0;
-    return expandedGroupHeight;
-  };
 </script>
 
 <div
@@ -71,10 +56,7 @@
   on:scroll={handleScroll}
 >
   <EndTimeInterval {workflow} {startTime} let:endTime let:duration>
-    <div
-      class="pointer-events-none sticky top-[120px]"
-      class:invisible={!!$activeGroups.length}
-    >
+    <div class="pointer-events-none sticky top-[120px]">
       <div class="flex w-full justify-between text-xs">
         <p class="w-60 -translate-x-24 rotate-90">
           {formatDate(startTime, $timeFormat, { format: 'short' })}
@@ -91,17 +73,18 @@
       height={canvasHeight}
       width={canvasWidth}
       class="-mt-4"
-      class:error
     >
       <Line
         startPoint={[gutter, 0]}
         endPoint={[gutter, timelineHeight]}
         strokeWidth={radius / 2}
+        classification={workflow.status}
       />
       <Line
         startPoint={[canvasWidth - gutter, 0]}
         endPoint={[canvasWidth - gutter, timelineHeight]}
         strokeWidth={radius / 2}
+        classification={workflow.status}
       />
       <TimelineAxis
         x1={gutter - radius / 4}
@@ -109,16 +92,16 @@
         {timelineHeight}
         {startTime}
         {duration}
+        {workflow}
       />
       <WorkflowRow {workflow} y={height} length={canvasWidth} />
       {#each filteredGroups as group, index (group.id)}
-        {@const y = (index + 2) * height + activeGroupsHeightAboveGroup(group)}
+        {@const y = (index + 2) * height}
         {#if !viewportHeight || (y > scrollY - 2 * height && y < scrollY + viewportHeight * height)}
           {#key group.eventList.length}
             <TimelineGraphRow
               {y}
               {group}
-              activeGroups={$activeGroups}
               {canvasWidth}
               {startTime}
               {endTime}
@@ -126,16 +109,14 @@
             />
           {/key}
         {/if}
-        {#if !readOnly && $activeGroups.includes(group.id)}
-          <GroupDetailsRow y={y + 1.33 * radius} {group} {canvasWidth} />
-        {/if}
       {/each}
     </svg>
   </EndTimeInterval>
-</div>
 
-<style lang="postcss">
-  .error {
-    @apply bg-danger;
-  }
-</style>
+  {#if !readOnly && $activeGroup}
+    <EventDetailsOverlay
+      group={$activeGroup}
+      onClose={() => setActiveGroup($activeGroup)}
+    />
+  {/if}
+</div>
diff --git a/src/lib/components/lines-and-dots/workflow-error.svelte b/src/lib/components/lines-and-dots/workflow-error.svelte
index 2c6dcec7f7..8001b29dce 100644
--- a/src/lib/components/lines-and-dots/workflow-error.svelte
+++ b/src/lib/components/lines-and-dots/workflow-error.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-  import Timestamp from '$lib/components/timestamp.svelte';
-  import AccordionGroup from '$lib/holocene/accordion/accordion-group.svelte';
   import Alert from '$lib/holocene/alert.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { PendingWorkflowTaskInfo } from '$lib/types';
@@ -11,36 +8,25 @@
     WorkflowTaskTimedOutEvent,
   } from '$lib/types/events';
   import type { WorkflowTaskFailedCause } from '$lib/types/workflows';
-  import { spaceBetweenCapitalLetters } from '$lib/utilities/format-camel-case';
-  import {
-    getErrorCause,
-    isFailedTaskEvent,
-    isTimedOutTaskEvent,
-  } from '$lib/utilities/get-workflow-task-failed-event';
+  import { getErrorCause } from '$lib/utilities/get-workflow-task-failed-event';
 
-  import { CategoryIcon } from './constants';
-
-  import WorkflowErrorStackTrace from './workflow-error-stack-trace.svelte';
-  import WorkflowPendingTask from './workflow-pending-task.svelte';
+  import EventDetailsFull from '../event/event-details-full.svelte';
 
   interface Props {
     error: WorkflowTaskFailedEvent | WorkflowTaskTimedOutEvent;
     pendingTask: PendingWorkflowTaskInfo | undefined;
   }
 
-  let { error, pendingTask }: Props = $props();
+  // TODO: Add pending workflow task info display
+  let { error }: Props = $props();
 
   let cause: WorkflowTaskFailedCause = $derived(getErrorCause(error));
-  let failure = $derived(isFailedTaskEvent(error) && error.attributes?.failure);
-  let timeoutType = $derived(
-    isTimedOutTaskEvent(error) && error.attributes?.timeoutType,
-  );
 </script>
 
 {#if cause && cause !== 'ResetWorkflow'}
   <Alert
-    icon="warning"
-    intent="warning"
+    icon="error"
+    intent="error"
     title={translate(`typed-errors.${cause}.title`)}
   >
     <p>
@@ -55,37 +41,8 @@
         >.
       </p>
     {/if}
-    <div
-      class="mt-2 flex w-full flex-col gap-0 overflow-hidden border border-danger"
-    >
-      <div class="flex items-center justify-between gap-2 bg-danger px-2 py-2">
-        <div class="flex items-center gap-2">
-          {error.id}
-          <Icon name={CategoryIcon[error.category]} />
-          <span class="font-semibold text-danger"
-            >{spaceBetweenCapitalLetters(error?.name)}</span
-          >
-        </div>
-        <Timestamp dateTime={error?.eventTime} />
-      </div>
-      <div class="flex flex-col gap-2 bg-primary p-4">
-        {#if timeoutType}
-          <p>
-            <span class="mr-2 text-secondary">Timeout Type</span>
-            {timeoutType}
-          </p>
-        {/if}
-        {#if failure || pendingTask}
-          <AccordionGroup>
-            {#if failure}
-              <WorkflowErrorStackTrace {failure} />
-            {/if}
-            {#if pendingTask}
-              <WorkflowPendingTask {pendingTask} />
-            {/if}
-          </AccordionGroup>
-        {/if}
-      </div>
+    <div class="my-2">
+      <EventDetailsFull event={error} />
     </div>
   </Alert>
 {/if}
diff --git a/src/lib/components/workflow-actions.svelte b/src/lib/components/workflow-actions.svelte
index 023b47e38b..a41b224f9a 100644
--- a/src/lib/components/workflow-actions.svelte
+++ b/src/lib/components/workflow-actions.svelte
@@ -8,6 +8,7 @@
   import TerminateConfirmationModal from '$lib/components/workflow/client-actions/terminate-confirmation-modal.svelte';
   import UpdateConfirmationModal from '$lib/components/workflow/client-actions/update-confirmation-modal.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
   import { MenuDivider, MenuItem } from '$lib/holocene/menu';
   import MenuButton from '$lib/holocene/menu/menu-button.svelte';
   import MenuContainer from '$lib/holocene/menu/menu-container.svelte';
@@ -28,6 +29,8 @@
   import { workflowTerminateEnabled } from '$lib/utilities/workflow-terminate-enabled';
   import { workflowUpdateEnabled } from '$lib/utilities/workflow-update-enabled';
 
+  import DownloadEventHistoryModal from './workflow/download-event-history-modal.svelte';
+
   interface Props {
     workflow: WorkflowExecution;
     namespace: string;
@@ -45,6 +48,7 @@
   let resetConfirmationModalOpen = $state(false);
   let signalConfirmationModalOpen = $state(false);
   let updateConfirmationModalOpen = $state(false);
+  let showDownloadPrompt = $state(false);
 
   let coreUser = coreUserStore();
 
@@ -193,21 +197,12 @@
         {/each}
         {#if !workflowCreateDisabled($page)}
           <MenuDivider />
-          <MenuItem
-            onclick={() =>
-              goto(
-                routeForWorkflowStart({
-                  namespace,
-                  workflowId: workflow.id,
-                  runId: workflow.runId,
-                  taskQueue: workflow.taskQueue,
-                  workflowType: workflow.name,
-                }),
-              )}
-            data-testid="start-workflow-button"
-          >
-            {translate('workflows.start-workflow-like-this-one')}
-          </MenuItem>
+          {@render startWorkflowMenuItem()}
+          <MenuDivider />
+          {@render downloadMenuItem()}
+        {:else}
+          <MenuDivider />
+          {@render downloadMenuItem()}
         {/if}
       </Menu>
     </MenuContainer>
@@ -229,22 +224,7 @@
         {translate('workflows.more-actions')}
       </MenuButton>
       <Menu id="workflow-actions" position="right" class="w-[16rem]">
-        <MenuItem
-          onclick={() =>
-            goto(
-              routeForWorkflowStart({
-                namespace,
-                workflowId: workflow.id,
-                runId: workflow.runId,
-                taskQueue: workflow.taskQueue,
-                workflowType: workflow.name,
-              }),
-            )}
-          disabled={workflowCreateDisabled($page)}
-          data-testid="start-workflow-button"
-        >
-          {translate('workflows.start-workflow-like-this-one')}
-        </MenuItem>
+        {@render startWorkflowMenuItem()}
         {#if terminateEnabled && next}
           <MenuDivider />
           <MenuItem
@@ -255,6 +235,9 @@
             {translate('workflows.terminate-latest')}
           </MenuItem>
         {/if}
+        <MenuDivider />
+
+        {@render downloadMenuItem()}
       </Menu>
     </MenuContainer>
   {/if}
@@ -304,3 +287,41 @@
     bind:open={terminateConfirmationModalOpen}
   />
 {/if}
+
+<DownloadEventHistoryModal
+  bind:open={showDownloadPrompt}
+  {namespace}
+  workflowId={workflow.id}
+  runId={workflow.runId}
+/>
+
+{#snippet startWorkflowMenuItem()}
+  <MenuItem
+    onclick={() =>
+      goto(
+        routeForWorkflowStart({
+          namespace,
+          workflowId: workflow.id,
+          runId: workflow.runId,
+          taskQueue: workflow.taskQueue,
+          workflowType: workflow.name,
+        }),
+      )}
+    disabled={workflowCreateDisabled($page)}
+    data-testid="start-workflow-button"
+  >
+    <span class="flex w-full items-center justify-between gap-2">
+      {translate('workflows.start-workflow-like-this-one')}
+      <Icon name="lightning-bolt" />
+    </span>
+  </MenuItem>
+{/snippet}
+
+{#snippet downloadMenuItem()}
+  <MenuItem onclick={() => (showDownloadPrompt = true)} data-testid="download">
+    <span class="flex w-full items-center justify-between gap-2">
+      {translate('workflows.download-history')}
+      <Icon name="download" />
+    </span>
+  </MenuItem>
+{/snippet}
diff --git a/src/lib/components/workflow-status.svelte b/src/lib/components/workflow-status.svelte
index 83c171e1e8..9179199f82 100644
--- a/src/lib/components/workflow-status.svelte
+++ b/src/lib/components/workflow-status.svelte
@@ -26,7 +26,6 @@
   export let count: number | undefined = undefined;
   export let loading = false;
   export let newCount: number | undefined = undefined;
-  export let big = false;
   export let delayed = false;
   export let taskFailure = false;
 
@@ -64,7 +63,7 @@
           Completed: 'bg-green-200',
           Failed: 'bg-red-200',
           ContinuedAsNew: 'bg-purple-200',
-          Canceled: 'bg-slate-100',
+          Canceled: 'bg-yellow-200',
           Terminated: 'bg-yellow-200',
           Paused: 'bg-yellow-200',
           Unspecified: 'bg-slate-100',
@@ -73,7 +72,7 @@
           Open: 'bg-green-200',
           New: 'bg-blue-300',
           Initiated: 'bg-blue-300',
-          Fired: 'bg-pink-200',
+          Fired: 'bg-orange-200',
           CancelRequested: 'bg-yellow-200',
           Signaled: 'bg-pink-200',
           Pending: 'bg-purple-200',
@@ -97,10 +96,7 @@
   class="block"
 >
   <div
-    class={merge(
-      'relative flex items-center gap-0 text-center text-xs leading-4',
-      big && 'text-lg',
-    )}
+    class="relative flex items-center gap-0 text-center text-xs leading-4"
     data-testid={$$props['test-id']}
   >
     <span
@@ -109,7 +105,7 @@
           status,
         }),
         (newCount || delayed || taskFailure) && 'rounded-r-none',
-        big && 'h-8 px-4',
+        $$props.class || '',
       )}
     >
       {#if loading}
@@ -131,10 +127,11 @@
           }),
           'rounded-l-none',
           (newCount || taskFailure) && 'rounded-r-none',
-          big && 'h-8 px-2',
+          '[&:not(.text-lg)_svg]:px-0.5',
+          $$props.class || '',
         )}
       >
-        <Icon name="clock" class={merge(!big && 'px-0.5')} />
+        <Icon name="clock" />
       </span>
     {/if}
     {#if taskFailure}
@@ -144,21 +141,16 @@
           'bg-red-200 text-red-900 dark:bg-red-700 dark:text-white',
           'rounded-l-none',
           newCount && 'rounded-r-none',
-          big && 'h-8 px-2',
+          '[&:not(.text-lg)_svg]:px-0.5',
+          $$props.class || '',
         )}
       >
-        <Icon name="exclamation-octagon" class={merge(!big && 'px-0.5')} />
+        <Icon name="exclamation-octagon" />
       </span>
     {/if}
 
     {#if newCount}
-      <span
-        class={merge(
-          'font-base surface-primary rounded-r-sm px-1 py-0.5',
-          big && 'px-2',
-        )}
-        in:fade
-      >
+      <span class="font-base surface-primary rounded-r-sm px-1 py-0.5" in:fade>
         {#if newCount > 0}+{/if}{newCount}
       </span>
     {/if}
diff --git a/src/lib/components/workflow/event-history/event-history-card.svelte b/src/lib/components/workflow/event-history/event-history-card.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/lib/components/workflow/input-and-results-payload.svelte b/src/lib/components/workflow/input-and-results-payload.svelte
index 103cccd83d..9459b4769f 100644
--- a/src/lib/components/workflow/input-and-results-payload.svelte
+++ b/src/lib/components/workflow/input-and-results-payload.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { minimizeEventView } from '$lib/stores/event-view';
+  import { workflowRun } from '$lib/stores/workflow-run';
   import type { Payload } from '$lib/types';
   import type { PotentiallyDecodable } from '$lib/utilities/decode-payload';
   import {
@@ -11,9 +11,14 @@
 
   import PayloadDecoder from '../event/payload-decoder.svelte';
 
-  export let title: string;
-  export let content: string = '';
-  export let isRunning: boolean = false;
+  type Props = {
+    title: string;
+    content: string;
+  };
+  let { title, content = '' }: Props = $props();
+  let inline = $state(false);
+
+  const isRunning = $derived($workflowRun?.workflow?.isRunning ?? false);
 
   const parseContent = (c: string): PotentiallyDecodable | undefined => {
     try {
@@ -41,62 +46,62 @@
     }
   };
 
-  $: parsedContent = parseContent(content);
-  $: payloads = getPayloads(parsedContent);
-  $: payloadsSize = payloads.length;
+  const parsedContent = $derived(parseContent(content));
+  const payloads = $derived(getPayloads(parsedContent));
+  const payloadsSize = $derived(payloads.length);
 </script>
 
 <div class="flex w-full grow flex-col gap-2">
-  <h2 class="flex items-center gap-2">
+  <h3 class="flex items-center gap-2">
     {title}
-  </h2>
+  </h3>
   {#if content}
-    {#key $minimizeEventView}
-      {#if payloadsSize > 0}
-        <PayloadDecoder value={parsedContent} key="payloads">
-          {#snippet children(decodedValue)}
-            {#if payloadsSize > 1}
-              {#each parsePayloads(decodedValue) as decodedContent}
-                <CodeBlock
-                  content={stringifyWithBigInt(decodedContent)}
-                  copyIconTitle={translate('common.copy-icon-title')}
-                  copySuccessIconTitle={translate(
-                    'common.copy-success-icon-title',
-                  )}
-                  maxHeight={300}
-                />
-              {/each}
-            {:else}
+    {#if payloadsSize > 0}
+      <PayloadDecoder value={parsedContent} key="payloads">
+        {#snippet children(decodedValue)}
+          {#if payloadsSize > 1}
+            {#each parsePayloads(decodedValue) as decodedContent}
               <CodeBlock
-                content={decodedValue}
+                content={stringifyWithBigInt(decodedContent)}
                 copyIconTitle={translate('common.copy-icon-title')}
                 copySuccessIconTitle={translate(
                   'common.copy-success-icon-title',
                 )}
                 maxHeight={300}
+                {inline}
               />
-            {/if}
-          {/snippet}
-        </PayloadDecoder>
-      {:else}
-        <PayloadDecoder value={parseWithBigInt(content)}>
-          {#snippet children(decodedValue)}
+            {/each}
+          {:else}
             <CodeBlock
               content={decodedValue}
               copyIconTitle={translate('common.copy-icon-title')}
               copySuccessIconTitle={translate('common.copy-success-icon-title')}
               maxHeight={300}
+              {inline}
             />
-          {/snippet}
-        </PayloadDecoder>
-      {/if}
-    {/key}
+          {/if}
+        {/snippet}
+      </PayloadDecoder>
+    {:else}
+      <PayloadDecoder value={parseWithBigInt(content)}>
+        {#snippet children(decodedValue)}
+          <CodeBlock
+            content={decodedValue}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+            maxHeight={300}
+            {inline}
+          />
+        {/snippet}
+      </PayloadDecoder>
+    {/if}
   {:else}
     <CodeBlock
       content={isRunning ? 'Results will appear upon completion.' : 'null'}
       language="text"
       copyable={false}
       maxHeight={300}
+      {inline}
     />
   {/if}
 </div>
diff --git a/src/lib/components/workflow/input-and-results.svelte b/src/lib/components/workflow/input-and-results.svelte
index 9c8f5efa6d..4d329e7103 100644
--- a/src/lib/components/workflow/input-and-results.svelte
+++ b/src/lib/components/workflow/input-and-results.svelte
@@ -1,25 +1,28 @@
 <script lang="ts">
   import { translate } from '$lib/i18n/translate';
   import { fullEventHistory } from '$lib/stores/events';
-  import { workflowRun } from '$lib/stores/workflow-run';
   import { getWorkflowStartedCompletedAndTaskFailedEvents } from '$lib/utilities/get-started-completed-and-task-failed-events';
 
   import InputAndResultsPayload from './input-and-results-payload.svelte';
 
   $: workflowEvents =
     getWorkflowStartedCompletedAndTaskFailedEvents($fullEventHistory);
-  $: isRunning = $workflowRun.workflow.isRunning;
 </script>
 
-<div class="flex flex-col gap-4 lg:flex-row" data-testid="input-and-result">
-  <InputAndResultsPayload
-    title={translate('workflows.input')}
-    content={workflowEvents.input}
-    {isRunning}
-  />
-  <InputAndResultsPayload
-    title={translate('workflows.result')}
-    content={workflowEvents.results}
-    {isRunning}
-  />
+<div
+  class="flex flex-1 flex-col gap-4 lg:flex-row"
+  data-testid="input-and-result"
+>
+  <div class="w-full lg:w-1/2">
+    <InputAndResultsPayload
+      title={translate('workflows.input')}
+      content={workflowEvents.input}
+    />
+  </div>
+  <div class="w-full lg:w-1/2">
+    <InputAndResultsPayload
+      title={translate('workflows.result')}
+      content={workflowEvents.results}
+    />
+  </div>
 </div>
diff --git a/src/lib/components/workflow/metadata/workflow-current-details.svelte b/src/lib/components/workflow/metadata/workflow-current-details.svelte
index a8d3bb16b8..11260eb742 100644
--- a/src/lib/components/workflow/metadata/workflow-current-details.svelte
+++ b/src/lib/components/workflow/metadata/workflow-current-details.svelte
@@ -59,7 +59,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="flex h-full flex-1 flex-col border-l border-subtle">
-  <div class="surface-information w-full px-6 py-2">
+  <div class="surface-secondary w-full px-6 py-2">
     <div class="flex items-center justify-between">
       <h3>{translate('workflows.current-details')}</h3>
       <div class="flex flex-row items-center gap-2 lg:flex-col xl:flex-row">
@@ -89,13 +89,9 @@
       </div>
     </div>
   </div>
-  <div class="surface-background h-full">
+  <div class="surface-primary h-full">
     {#key currentDetails}
-      <Markdown
-        class="p-3"
-        overrideTheme="background"
-        content={currentDetails}
-      />
+      <Markdown class="p-3" overrideTheme="primary" content={currentDetails} />
     {/key}
   </div>
 </div>
diff --git a/src/lib/components/workflow/metadata/workflow-summary-and-details.svelte b/src/lib/components/workflow/metadata/workflow-summary-and-details.svelte
index 3e857215f2..2b8a18f77d 100644
--- a/src/lib/components/workflow/metadata/workflow-summary-and-details.svelte
+++ b/src/lib/components/workflow/metadata/workflow-summary-and-details.svelte
@@ -11,7 +11,7 @@
 
 <div class="flex h-full flex-1 flex-col bg-primary">
   <div>
-    <div class="surface-information w-full px-6 py-2">
+    <div class="surface-secondary w-full px-6 py-2">
       <h3 data-testid="user-metadata-summary-heading">
         {translate('workflows.summary')}
       </h3>
@@ -27,7 +27,7 @@
     {/if}
   </div>
   <div>
-    <div class="surface-information w-full px-6 py-2">
+    <div class="surface-secondary w-full px-6 py-2">
       <h3 data-testid="user-metadata-summary-heading">
         {translate('workflows.details')}
       </h3>
@@ -43,7 +43,7 @@
     {/if}
   </div>
   <div>
-    <div class="surface-information w-full px-6 py-2">
+    <div class="surface-secondary w-full px-6 py-2">
       <h3 data-testid="user-metadata-summary-heading">Events with Metadata</h3>
     </div>
     <div class="py-6">
diff --git a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
index 37ffc1ec95..ef551814b9 100644
--- a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
+++ b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+  import { cva } from 'class-variance-authority';
   import type { Snippet } from 'svelte';
 
   import { page } from '$app/state';
 
   import ActivityCommands from '$lib/components/activity/activity-commands.svelte';
   import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
-  import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
@@ -45,130 +45,138 @@
       page.params.namespace,
     ) && isRunning,
   );
+
+  const pendingStatus = cva(
+    ['flex flex-1 flex-col overflow-hidden rounded-t-lg pb-2 text-white'],
+    {
+      variants: {
+        status: {
+          retrying: 'bg-red-800',
+          pending: 'bg-slate-900/50',
+        },
+      },
+    },
+  );
 </script>
 
 <div
-  class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
+  class={pendingStatus({
+    status: activity.attempt > 1 ? 'retrying' : 'pending',
+  })}
 >
-  <div class="flex flex-1 flex-wrap justify-between gap-2">
-    <div class="flex flex-wrap items-center space-x-3">
-      <WorkflowStatus status={activity.paused ? 'Paused' : activity.state} />
-      <h4>{activity.activityType}</h4>
+  <div class="bg-slate-900/80 p-2 pb-1 text-left">
+    <div class="flex flex-col items-center justify-between lg:flex-row">
+      <p class="font-medium leading-tight">Pending Activity</p>
+      {#if showActivityCommands}
+        <ActivityCommands {activity} class="justify-end" />
+      {/if}
     </div>
-    {#if showActivityCommands}
-      <ActivityCommands {activity} class="justify-end" />
-    {/if}
   </div>
-  <div class="flex flex-1 flex-col gap-4 xl:flex-row">
-    <div class="flex w-full flex-col gap-1 xl:w-1/2">
-      {@render detail(translate('workflows.activity-id'), activity.activityId)}
-      {#if activity.paused && activity.pauseInfo}
-        {@render detail(
-          translate('activities.paused-by'),
-          activity.pauseInfo?.manual?.identity || '',
-        )}
-        {@render detail(
-          translate('activities.paused-since'),
-          formatDate(activity.pauseInfo?.pauseTime, $timeFormat, {
-            relative: $relativeTime,
-            format: $timestampFormat,
-          }),
-        )}
-        {@render detail(
-          translate('activities.pause-reason'),
-          activity.pauseInfo?.manual?.reason || '-',
-        )}
-      {/if}
-      {@render detail(translate('workflows.attempt'), attempts)}
-      {#if activity.scheduledTime}
-        {@const timeDifference = toTimeDifference({
-          date: activity.scheduledTime,
-          negativeDefault: '',
-        })}
-        {#if timeDifference}
-          {@render nextRetry(timeDifference)}
-        {/if}
-      {/if}
-      {#if activity.lastAttemptCompleteTime}
-        {@render detail(
-          translate('workflows.last-attempt-completed-time'),
-          formatDate(activity.lastAttemptCompleteTime, $timeFormat, {
-            relative: $relativeTime,
-            format: $timestampFormat,
-          }),
-        )}
+
+  <div class="grid grid-cols-1 gap-0.5 p-2 md:grid-cols-2 xl:grid-cols-1">
+    {@render detail(translate('workflows.activity-id'), activity.activityId)}
+    {#if activity.paused && activity.pauseInfo}
+      {@render detail(
+        translate('activities.paused-by'),
+        activity.pauseInfo?.manual?.identity || '',
+      )}
+      {@render detail(
+        translate('activities.paused-since'),
+        formatDate(activity.pauseInfo?.pauseTime, $timeFormat, {
+          relative: $relativeTime,
+        }),
+      )}
+      {@render detail(
+        translate('activities.pause-reason'),
+        activity.pauseInfo?.manual?.reason || '-',
+      )}
+    {/if}
+    {@render detail(translate('workflows.attempt'), attempts)}
+    {#if activity.scheduledTime}
+      {@const timeDifference = toTimeDifference({
+        date: activity.scheduledTime,
+        negativeDefault: '',
+      })}
+      {#if timeDifference}
+        {@render nextRetry(timeDifference)}
       {/if}
-      {#if activity.expirationTime}
-        {@render detail(
-          translate('workflows.retry-expiration'),
-          formatRetryExpiration(
-            activity.maximumAttempts,
-            formatDuration(
-              getDuration({
-                start: Date.now(),
-                end: activity.expirationTime,
-              }),
-            ),
+    {/if}
+    {#if activity.lastAttemptCompleteTime}
+      {@render detail(
+        translate('workflows.last-attempt-completed-time'),
+        formatDate(activity.lastAttemptCompleteTime, $timeFormat, {
+          relative: $relativeTime,
+        }),
+      )}
+    {/if}
+    {#if activity.expirationTime}
+      {@render detail(
+        translate('workflows.retry-expiration'),
+        formatRetryExpiration(
+          activity.maximumAttempts,
+          formatDuration(
+            getDuration({
+              start: Date.now(),
+              end: activity.expirationTime,
+            }),
           ),
-        )}
-      {/if}
-      {#if activity.lastHeartbeatTime}
-        {@render detail(
-          translate('workflows.last-heartbeat'),
-          formatDate(activity.lastHeartbeatTime, $timeFormat, {
-            relative: $relativeTime,
-            format: $timestampFormat,
-          }),
-        )}
-      {/if}
-      {#if activity.lastStartedTime}
+        ),
+      )}
+    {/if}
+    {#if activity.lastHeartbeatTime}
+      {@render detail(
+        translate('workflows.last-heartbeat'),
+        formatDate(activity.lastHeartbeatTime, $timeFormat, {
+          relative: $relativeTime,
+        }),
+      )}
+    {/if}
+    {#if activity.lastStartedTime}
+      {@render detail(
+        translate('workflows.last-started-time'),
+        formatDate(activity.lastStartedTime, $timeFormat, {
+          relative: $relativeTime,
+        }),
+      )}
+    {/if}
+    {#if activity.lastWorkerIdentity}
+      {@render detail(
+        translate('workflows.last-worker-identity'),
+        activity.lastWorkerIdentity,
+      )}
+    {/if}
+    {#if activity.priority}
+      {#if activity.priority.priorityKey}
         {@render detail(
-          translate('workflows.last-started-time'),
-          formatDate(activity.lastStartedTime, $timeFormat, {
-            relative: $relativeTime,
-            format: $timestampFormat,
-          }),
+          translate('workflows.priority'),
+          activity.priority.priorityKey,
         )}
       {/if}
-      {#if activity.lastWorkerIdentity}
+      {#if activity.priority.fairnessKey}
         {@render detail(
-          translate('workflows.last-worker-identity'),
-          activity.lastWorkerIdentity,
+          translate('workflows.fairness'),
+          activity.priority.fairnessKey,
         )}
       {/if}
-      {#if activity.priority}
-        {#if activity.priority.priorityKey}
-          {@render detail(
-            translate('workflows.priority'),
-            activity.priority.priorityKey,
-          )}
-        {/if}
-        {#if activity.priority.fairnessKey}
-          {@render detail(
-            translate('workflows.fairness'),
-            activity.priority.fairnessKey,
-          )}
-        {/if}
-      {/if}
-    </div>
-    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
-      {#if failed}
-        {#if totalPending > 20}
-          {@render failuresAccordion()}
-        {:else}
-          {@render failuresCodeBlock()}
-        {/if}
-      {/if}
-      {#if activity.heartbeatDetails}
-        {@render heartbeat()}
+    {/if}
+  </div>
+  <div class="flex w-full flex-col gap-4 p-2">
+    {#if failed}
+      {#if totalPending > 20}
+        {@render failuresAccordion()}
+      {:else}
+        {@render failuresCodeBlock()}
       {/if}
-    </div>
+    {/if}
+    {#if activity.heartbeatDetails}
+      {@render heartbeat()}
+    {/if}
   </div>
 </div>
 
 {#snippet detail(label: string, value: string | number | Snippet)}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+  <div class="leading-3">
+    <p class="text-sm text-white/70">
       {label}
     </p>
     <p class="w-full whitespace-pre-line">
@@ -182,8 +190,8 @@
 {/snippet}
 
 {#snippet heartbeat()}
-  <div>
-    <p class="text-sm text-secondary/80">
+  <div class="leading-3">
+    <p class="text-sm text-white/70">
       {translate('workflows.heartbeat-details')}
     </p>
     {#key activity.attempt}
@@ -202,10 +210,10 @@
 {/snippet}
 
 {#snippet failuresCodeBlock()}
-  <div class="flex flex-col gap-2">
+  <div class="leading-3">
     <div class="flex flex-1 flex-col">
       {#if activity.lastFailure}
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm text-white/70">
           {translate('workflows.last-failure')}
         </p>
         {#key activity.attempt}
@@ -226,7 +234,7 @@
     </div>
     {#if activity.lastFailure?.stackTrace}
       <div>
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm text-white/70">
           {translate('common.stack-trace')}
         </p>
         <CodeBlock
@@ -255,8 +263,8 @@
 {/snippet}
 
 {#snippet nextRetry(timeDifference)}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+  <div class="leading-3">
+    <p class="text-sm text-white/70">
       {translate('workflows.next-retry')}
     </p>
     <p class="flex w-full items-center gap-1 whitespace-pre-line">
@@ -279,7 +287,7 @@
       )}
     </Badge>
     {#if activity.maximumAttempts}
-      <p class="ml-1 text-sm text-secondary">
+      <p class="ml-1 text-sm">
         {formatAttemptsLeft(activity.maximumAttempts, activity.attempt)} remaining
       </p>
     {/if}
diff --git a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
index f44dc804a9..5556ea7051 100644
--- a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
+++ b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cva } from 'class-variance-authority';
   import type { Snippet } from 'svelte';
 
   import Badge from '$lib/holocene/badge.svelte';
@@ -19,113 +20,125 @@
   let { operation }: { operation: PendingNexusOperation } = $props();
 
   const failed = $derived(operation.attempt > 1);
+
+  const pendingStatus = cva(
+    ['flex flex-1 flex-col overflow-hidden rounded-t-lg pb-2 text-white'],
+    {
+      variants: {
+        status: {
+          retrying: 'bg-red-800',
+          pending: 'bg-slate-900/50',
+        },
+      },
+    },
+  );
 </script>
 
 <div
-  class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
+  class={pendingStatus({
+    status: operation.attempt > 1 ? 'retrying' : 'pending',
+  })}
 >
-  <div class="flex-1">
-    <div class="flex flex-wrap items-center space-x-3">
+  <div class="bg-slate-900/80 p-2 text-left">
+    <div class="flex flex-col items-center justify-between lg:flex-row">
       <Badge>{operation.state}</Badge>
-      <h4>{translate('workflows.pending-nexus-operation')}</h4>
+      <p class="font-medium leading-tight">
+        {translate('workflows.pending-nexus-operation')}
+      </p>
     </div>
   </div>
 
-  <div class="flex flex-1 flex-col gap-4 xl:flex-row">
-    <div class="flex w-full flex-col gap-1 xl:w-1/2">
-      {#if operation.endpoint}
-        {@render detail(translate('nexus.endpoint'), operation.endpoint)}
-      {/if}
-      {#if operation.service}
-        {@render detail(translate('nexus.service'), operation.service)}
-      {/if}
-      {#if operation.operation}
-        {@render detail(translate('nexus.operation'), operation.operation)}
-      {/if}
-      {#if operation.operationToken}
-        {@render detail(
-          translate('nexus.operation-token'),
-          operation.operationToken,
-        )}
-      {/if}
-      {@render detail(translate('workflows.attempt'), attempts)}
-      {#if operation.nextAttemptScheduleTime}
-        {@const timeDifference = toTimeDifference({
-          date: operation.nextAttemptScheduleTime,
-          negativeDefault: '',
-        })}
-        {#if timeDifference}
-          {@render nextRetry(timeDifference)}
-        {/if}
-      {/if}
-      {#if operation.lastAttemptCompleteTime}
-        {@render detail(
-          translate('workflows.last-attempt-completed-time'),
-          formatDate(operation.lastAttemptCompleteTime, $timeFormat, {
-            relative: $relativeTime,
-            format: $timestampFormat,
-          }),
-        )}
-      {/if}
-      {#if operation.scheduledEventId}
-        {@render detail(
-          translate('workflows.schedule-event-id'),
-          String(operation.scheduledEventId),
-        )}
-      {/if}
-      {#if operation.scheduledTime}
-        {@render detail(
-          translate('workflows.scheduled-time'),
-          formatDate(operation.scheduledTime, $timeFormat, {
-            relative: $relativeTime,
-            format: $timestampFormat,
-          }),
-        )}
-      {/if}
-      {#if operation.scheduleToCloseTimeout}
-        {@render detail(
-          translate('workflows.schedule-to-close-timeout'),
-          operation.scheduleToCloseTimeout as string,
-        )}
-      {/if}
-    </div>
-    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
-      {#if failed}
-        {@render failures()}
-      {/if}
-      {#if operation.blockedReason}
-        <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
-            {translate('nexus.blocked-reason')}
-          </p>
-          <CodeBlock
-            language="text"
-            content={operation.blockedReason}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        </div>
-      {/if}
-      {#if Object.keys(operation.cancellationInfo ?? {}).length > 0}
-        <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
-            {translate('nexus.cancellation-info')}
-          </p>
-          <CodeBlock
-            language="text"
-            content={stringifyWithBigInt(operation.cancellationInfo)}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        </div>
+  <div class="grid grid-cols-1 gap-0.5 p-2 md:grid-cols-2 xl:grid-cols-1">
+    {#if operation.endpoint}
+      {@render detail(translate('nexus.endpoint'), operation.endpoint)}
+    {/if}
+    {#if operation.service}
+      {@render detail(translate('nexus.service'), operation.service)}
+    {/if}
+    {#if operation.operation}
+      {@render detail(translate('nexus.operation'), operation.operation)}
+    {/if}
+    {#if operation.operationToken}
+      {@render detail(
+        translate('nexus.operation-token'),
+        operation.operationToken,
+      )}
+    {/if}
+    {@render detail(translate('workflows.attempt'), attempts)}
+    {#if operation.nextAttemptScheduleTime}
+      {@const timeDifference = toTimeDifference({
+        date: operation.nextAttemptScheduleTime,
+        negativeDefault: '',
+      })}
+      {#if timeDifference}
+        {@render nextRetry(timeDifference)}
       {/if}
-    </div>
+    {/if}
+    {#if operation.lastAttemptCompleteTime}
+      {@render detail(
+        translate('workflows.last-attempt-completed-time'),
+        formatDate(operation.lastAttemptCompleteTime, $timeFormat, {
+          relative: $relativeTime,
+        }),
+      )}
+    {/if}
+    {#if operation.scheduledEventId}
+      {@render detail(
+        translate('workflows.schedule-event-id'),
+        String(operation.scheduledEventId),
+      )}
+    {/if}
+    {#if operation.scheduledTime}
+      {@render detail(
+        translate('workflows.scheduled-time'),
+        formatDate(operation.scheduledTime, $timeFormat, {
+          relative: $relativeTime,
+        }),
+      )}
+    {/if}
+    {#if operation.scheduleToCloseTimeout}
+      {@render detail(
+        translate('workflows.schedule-to-close-timeout'),
+        operation.scheduleToCloseTimeout as string,
+      )}
+    {/if}
+  </div>
+  <div class="flex w-full flex-col gap-4 p-2">
+    {#if failed}
+      {@render failures()}
+    {/if}
+    {#if operation.blockedReason}
+      <div class="flex flex-1 flex-col">
+        <p class="text-sm">
+          {translate('nexus.blocked-reason')}
+        </p>
+        <CodeBlock
+          language="text"
+          content={operation.blockedReason}
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        />
+      </div>
+    {/if}
+    {#if Object.keys(operation.cancellationInfo ?? {}).length > 0}
+      <div class="flex flex-1 flex-col">
+        <p class="text-sm">
+          {translate('nexus.cancellation-info')}
+        </p>
+        <CodeBlock
+          language="text"
+          content={stringifyWithBigInt(operation.cancellationInfo)}
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        />
+      </div>
+    {/if}
   </div>
 </div>
 
 {#snippet nextRetry(timeDifference)}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+  <div class="leading-3">
+    <p class="text-sm text-white/70">
       {translate('workflows.next-retry')}
     </p>
     <p class="flex w-full items-center gap-1 whitespace-pre-line">
@@ -140,8 +153,8 @@
 {/snippet}
 
 {#snippet detail(label: string, value: string | number | Snippet)}
-  <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+  <div class="leading-3">
+    <p class="text-sm text-white/70">
       {label}
     </p>
     <p class="w-full whitespace-pre-line">
@@ -165,7 +178,7 @@
   <div class="flex flex-col gap-2">
     <div class="flex flex-1 flex-col">
       {#if operation.lastAttemptFailure}
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm">
           {translate('workflows.last-failure')}
         </p>
         <CodeBlock
@@ -180,7 +193,7 @@
     </div>
     <div class="flex flex-1 flex-col">
       {#if operation.lastAttemptFailure?.stackTrace}
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm">
           {translate('common.stack-trace')}
         </p>
         <CodeBlock
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
index 353bfa26cc..b0ad0f9c10 100644
--- a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
+++ b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
@@ -92,7 +92,7 @@
   }
 
   .Failed {
-    background-color: #f55;
+    background-color: #ff4418;
   }
 
   .Terminated {
diff --git a/src/lib/components/workflow/workflow-call-stack-error.svelte b/src/lib/components/workflow/workflow-call-stack-error.svelte
index fed547c14e..7ac4fcbe64 100644
--- a/src/lib/components/workflow/workflow-call-stack-error.svelte
+++ b/src/lib/components/workflow/workflow-call-stack-error.svelte
@@ -10,7 +10,7 @@
 </script>
 
 {#if runningWithNoWorkers}
-  <div class="mb-4" in:fly={{ duration: 200, delay: 100 }}>
+  <div in:fly={{ duration: 200, delay: 100 }}>
     <Alert
       icon="warning"
       intent="warning"
diff --git a/src/lib/holocene/toggle-button/toggle-button.svelte b/src/lib/holocene/toggle-button/toggle-button.svelte
index 96f1e15793..63d7e0839b 100644
--- a/src/lib/holocene/toggle-button/toggle-button.svelte
+++ b/src/lib/holocene/toggle-button/toggle-button.svelte
@@ -52,7 +52,7 @@
   {...$$restProps}
 >
   {#if $$restProps.leadingIcon}
-    <span class="hidden md:block"><slot /></span>
+    <span class="hidden lg:block"><slot /></span>
   {:else}
     <slot />
   {/if}
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index 54c9053ee2..764e916338 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -79,6 +79,7 @@ export const Strings = {
   compact: 'Compact',
   json: 'JSON',
   download: 'Download',
+  'download-history': 'Download History',
   'workflow-actions': 'Workflow Actions',
   'more-actions': 'More Actions',
   'reset-disabled-unauthorized':
@@ -121,6 +122,7 @@ export const Strings = {
   'reset-success-alert-title': 'This Workflow has been reset',
   'reset-success-alert-description':
     'You can find the resulting Workflow Execution <1>here</1>.',
+  'timeline-tab': 'Timeline',
   'history-tab': 'History',
   'workflow-history': 'Workflow History',
   'workers-tab': 'Workers',
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index d85823287c..af60866439 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -8,16 +8,10 @@
   import WorkflowActions from '$lib/components/workflow-actions.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Alert from '$lib/holocene/alert.svelte';
-  import Badge from '$lib/holocene/badge.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
-  import TabList from '$lib/holocene/tab/tab-list.svelte';
-  import Tab from '$lib/holocene/tab/tab.svelte';
-  import Tabs from '$lib/holocene/tab/tabs.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { getInboundNexusLinkEvents } from '$lib/runes/inbound-nexus-links.svelte';
-  import { getWorkflowPollersWithVersions } from '$lib/runes/workflow-versions.svelte';
+  // import { getInboundNexusLinkEvents } from '$lib/runes/inbound-nexus-links.svelte';
   import { fullEventHistory } from '$lib/stores/events';
   import { resetWorkflows } from '$lib/stores/reset-workflows';
   import { workflowRun } from '$lib/stores/workflow-run';
@@ -25,22 +19,12 @@
   import { isCancelInProgress } from '$lib/utilities/cancel-in-progress';
   import { isWorkflowDelayed } from '$lib/utilities/delayed-workflows';
   import {
-    getWorkflowNexusLinksFromHistory,
+    // getWorkflowNexusLinksFromHistory,
     getWorkflowRelationships,
   } from '$lib/utilities/get-workflow-relationships';
-  import { pathMatches } from '$lib/utilities/path-matches';
   import {
-    routeForCallStack,
     routeForEventHistory,
-    routeForNexusLinks,
-    routeForPendingActivities,
-    routeForRelationships,
-    routeForUserMetadata,
-    routeForWorkers,
-    routeForWorkflowMemo,
-    routeForWorkflowQuery,
     routeForWorkflows,
-    routeForWorkflowSearchAttributes,
   } from '$lib/utilities/route-for';
   import { isWorkflowTaskFailure } from '$lib/utilities/workflow-task-failures';
 
@@ -50,7 +34,7 @@
     run: runId,
     id: eventId,
   } = $derived(page.params);
-  const { workflow, workers } = $derived($workflowRun);
+  const { workflow } = $derived($workflowRun);
   const routeParameters = $derived({
     namespace,
     workflow: workflowId,
@@ -58,9 +42,9 @@
   });
 
   const isRunning = $derived(workflow?.isRunning);
-  const activitiesCanceled = $derived(
-    ['Terminated', 'TimedOut', 'Canceled'].includes(workflow?.status),
-  );
+  // const activitiesCanceled = $derived(
+  //   ['Terminated', 'TimedOut', 'Canceled'].includes(workflow?.status),
+  // );
   const cancelInProgress = $derived(
     isCancelInProgress(workflow?.status, $fullEventHistory),
   );
@@ -77,13 +61,13 @@
       namespace,
     })}?${$workflowsSearchParams}`,
   );
-  const outboundLinks = $derived(
-    getWorkflowNexusLinksFromHistory($fullEventHistory)?.length || 0,
-  );
-  const inboundLinks = $derived(
-    getInboundNexusLinkEvents($fullEventHistory)?.length || 0,
-  );
-  const linkCount = $derived(outboundLinks + inboundLinks);
+  // const outboundLinks = $derived(
+  //   getWorkflowNexusLinksFromHistory($fullEventHistory)?.length || 0,
+  // );
+  // const inboundLinks = $derived(
+  //   getInboundNexusLinkEvents($fullEventHistory)?.length || 0,
+  // );
+  // const linkCount = $derived(outboundLinks + inboundLinks);
 </script>
 
 <div class="flex items-center justify-between">
@@ -110,8 +94,8 @@
     {/if}
   </div>
 </div>
-<header class="flex flex-col gap-4">
-  <div class="flex flex-col items-center justify-between gap-4 xl:flex-row">
+<header class="flex flex-col gap-3">
+  <div class="flex flex-col items-center justify-between gap-3 xl:flex-row">
     <div
       class="flex w-full flex-col items-start gap-4 xl:flex-row xl:items-center"
     >
@@ -120,9 +104,9 @@
       >
         <WorkflowStatus
           status={workflow?.status}
-          big
           delayed={isWorkflowDelayed(workflow)}
           taskFailure={isWorkflowTaskFailure(workflow)}
+          class="h-8 p-3 text-lg"
         />
         <div class="xl:hidden">
           <WorkflowActions
@@ -138,7 +122,7 @@
       <div class="flex flex-col flex-wrap gap-0">
         <h1
           data-testid="workflow-id-heading"
-          class="gap-0 overflow-hidden max-sm:text-xl sm:max-md:text-2xl"
+          class="gap-0 overflow-hidden text-xl"
         >
           <Copyable
             copyIconTitle={translate('common.copy-icon-title')}
@@ -146,7 +130,7 @@
             content={workflowId}
             clickAllToCopy
             container-class="w-full"
-            class="overflow-hidden text-ellipsis text-left"
+            class="overflow-hidden text-ellipsis text-left leading-tight"
           />
         </h1>
       </div>
@@ -193,7 +177,7 @@
       </Alert>
     </div>
   {/if}
-  <Tabs>
+  <!-- <Tabs>
     <TabList label="workflow detail">
       <Tab
         label={translate('workflows.history-tab')}
@@ -206,7 +190,13 @@
           routeForEventHistory({
             ...routeParameters,
           }),
-        )}
+        ) ||
+          pathMatches(
+            page.url.pathname,
+            routeForEventHistory({
+              ...routeParameters,
+            }),
+          )}
       >
         <Badge type="primary" class="px-2 py-0">
           {workflow.historyEvents}
@@ -265,11 +255,11 @@
       >
         <Badge
           type={activitiesCanceled ? 'warning' : 'primary'}
-          class="px-2 py-0"
+          class="py-0 {activitiesCanceled ? 'px-1' : 'px-2'}"
         >
-          <div class="flex items-center gap-1">
+          <div class="flex items-center gap-0.5">
             {#if activitiesCanceled}
-              <Icon name="canceled" />
+              <Icon name="canceled" class="py-0.5" />
             {/if}
             {workflow?.pendingActivities?.length}
           </div>
@@ -293,33 +283,6 @@
           routeForWorkflowQuery(routeParameters),
         )}
       />
-      <Tab
-        label={translate('workflows.user-metadata-tab')}
-        id="user-metadata-tab"
-        href={routeForUserMetadata(routeParameters)}
-        active={pathMatches(
-          page.url.pathname,
-          routeForUserMetadata(routeParameters),
-        )}
-      />
-      <Tab
-        label={translate('workflows.search-attributes-tab')}
-        id="search-attributes-tab"
-        href={routeForWorkflowSearchAttributes(routeParameters)}
-        active={pathMatches(
-          page.url.pathname,
-          routeForWorkflowSearchAttributes(routeParameters),
-        )}
-      />
-      <Tab
-        label={translate('workflows.memo-tab')}
-        id="memo-tab"
-        href={routeForWorkflowMemo(routeParameters)}
-        active={pathMatches(
-          page.url.pathname,
-          routeForWorkflowMemo(routeParameters),
-        )}
-      />
     </TabList>
-  </Tabs>
+  </Tabs> -->
 </header>
diff --git a/src/lib/layouts/workflow-history-layout.svelte b/src/lib/layouts/workflow-history-layout.svelte
index e51ce56fe6..9a5616dfa9 100644
--- a/src/lib/layouts/workflow-history-layout.svelte
+++ b/src/lib/layouts/workflow-history-layout.svelte
@@ -1,71 +1,65 @@
 <script lang="ts">
+  import { twMerge as merge } from 'tailwind-merge';
+
   import { beforeNavigate } from '$app/navigation';
-  import { page } from '$app/stores';
 
-  import EventSummary from '$lib/components/event/event-summary.svelte';
+  import { CategoryIcon } from '$lib/components/lines-and-dots/constants';
   import EventTypeFilter from '$lib/components/lines-and-dots/event-type-filter.svelte';
-  import TimelineGraph from '$lib/components/lines-and-dots/svg/timeline-graph.svelte';
+  import HistoryViewToggle from '$lib/components/lines-and-dots/history-view-toggle.svelte';
   import WorkflowError from '$lib/components/lines-and-dots/workflow-error.svelte';
-  import DownloadEventHistoryModal from '$lib/components/workflow/download-event-history-modal.svelte';
   import InputAndResults from '$lib/components/workflow/input-and-results.svelte';
   import WorkflowCallStackError from '$lib/components/workflow/workflow-call-stack-error.svelte';
   import WorkflowCallbacks from '$lib/components/workflow/workflow-callbacks.svelte';
+  import WorkflowRelationships from '$lib/components/workflow/workflow-relationships.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import { groupEvents } from '$lib/models/event-groups';
+  import WorkflowHistoryJson from '$lib/pages/workflow-history-json.svelte';
+  import WorkflowHistory from '$lib/pages/workflow-history.svelte';
+  import WorkflowMemo from '$lib/pages/workflow-memo.svelte';
+  import WorkflowSearchAttributes from '$lib/pages/workflow-search-attributes.svelte';
+  import WorkflowTimeline from '$lib/pages/workflow-timeline.svelte';
+  import WorkflowUserMetadata from '$lib/pages/workflow-user-metadata.svelte';
+  import WorkflowWorkers from '$lib/pages/workflow-workers.svelte';
   import { clearActives } from '$lib/stores/active-events';
   import {
     eventFilterSort,
     eventViewType,
-    minimizeEventView,
+    historyViewType,
   } from '$lib/stores/event-view';
-  import {
-    currentEventHistory,
-    filteredEventHistory,
-    pauseLiveUpdates,
-  } from '$lib/stores/events';
+  import { currentEventHistory, pauseLiveUpdates } from '$lib/stores/events';
   import { workflowRun } from '$lib/stores/workflow-run';
   import { getWorkflowTaskFailedEvent } from '$lib/utilities/get-workflow-task-failed-event';
 
-  $: ({ namespace } = $page.params);
-  $: ({ workflow } = $workflowRun);
-  $: pendingActivities = workflow?.pendingActivities;
-  $: pendingNexusOperations = workflow?.pendingNexusOperations;
-  $: reverseSort = $eventFilterSort === 'descending';
-  $: compact = $eventViewType === 'compact';
-
-  $: ascendingGroups = groupEvents(
-    $filteredEventHistory,
-    'ascending',
-    pendingActivities,
-    pendingNexusOperations,
-  );
-
-  $: groups = reverseSort ? [...ascendingGroups].reverse() : ascendingGroups;
-  $: history = reverseSort
-    ? [...$filteredEventHistory].reverse()
-    : $filteredEventHistory;
+  const workflow = $derived($workflowRun.workflow);
+  const reverseSort = $derived($eventFilterSort === 'descending');
+  const summaryView = $derived($historyViewType === 'summary');
+  const timelineView = $derived($historyViewType === 'timeline');
+  const compactView = $derived($historyViewType === 'compact');
+  const historyView = $derived($historyViewType === 'history');
+  const jsonView = $derived($historyViewType === 'json');
+  const relationshipView = $derived($historyViewType === 'relationship');
+  const workersView = $derived($historyViewType === 'workers');
 
-  $: workflowTaskFailedError = getWorkflowTaskFailedEvent(
-    $currentEventHistory,
-    'ascending',
+  const workflowTaskFailedError = $derived(
+    getWorkflowTaskFailedEvent($currentEventHistory, 'ascending'),
   );
 
-  $: $eventViewType, clearActives();
-
   beforeNavigate(() => {
     clearActives();
   });
 
-  $: {
+  $effect(() => {
+    eventViewType;
+    clearActives();
+  });
+
+  $effect(() => {
     if (!workflow.isRunning && $pauseLiveUpdates) {
       $pauseLiveUpdates = false;
     }
-  }
-
-  let showDownloadPrompt = false;
+  });
 
   const onSort = () => {
     if (reverseSort) {
@@ -76,30 +70,88 @@
   };
 </script>
 
-<div class="flex flex-col gap-0 pt-4">
+<div class="flex flex-col gap-2">
   <WorkflowCallStackError />
-  <div class="flex flex-col gap-2">
-    <InputAndResults />
-    {#if workflowTaskFailedError}
-      <WorkflowError
-        error={workflowTaskFailedError}
-        pendingTask={workflow?.pendingWorkflowTask}
-      />
-    {/if}
-    {#if workflow?.callbacks?.length}
-      <WorkflowCallbacks callbacks={workflow.callbacks} />
-    {/if}
-  </div>
+  {#if workflowTaskFailedError}
+    <WorkflowError
+      error={workflowTaskFailedError}
+      pendingTask={workflow?.pendingWorkflowTask}
+    />
+  {/if}
+  {#if workflow?.callbacks?.length}
+    <WorkflowCallbacks callbacks={workflow.callbacks} />
+  {/if}
 </div>
-<div class="relative pb-24">
+<div class="relative pb-8">
   <div
-    class="surface-background flex flex-wrap items-center justify-between gap-2 border-b border-subtle py-2 xl:gap-8"
-    class:sticky-header={!$minimizeEventView}
+    class={merge(
+      'surface-background sticky top-0 z-30 flex flex-wrap items-center justify-between gap-2 py-2 md:top-12 xl:gap-8',
+      !historyView && 'border-b border-subtle',
+    )}
   >
-    <h2>
-      {translate('workflows.event-history')}
-    </h2>
+    <HistoryViewToggle />
     <div class="flex items-center gap-2">
+      <Tooltip class="ml-1" left>
+        <div slot="content" class="space-y-2 bg-primary p-2">
+          <div class="text-xs font-semibold text-primary">Event Categories</div>
+          <div class="space-y-1.5 text-xs">
+            <div
+              class="flex items-center gap-2 text-blue-700 dark:text-blue-400"
+            >
+              <Icon name={CategoryIcon.workflow} />
+              <span>Workflow</span>
+            </div>
+            <div
+              class="flex items-center gap-2 text-purple-600 dark:text-purple-500"
+            >
+              <Icon name={CategoryIcon.activity} />
+              <span>Activity</span>
+            </div>
+            <div class="flex items-center gap-2 text-cyan-600">
+              <Icon name={CategoryIcon['child-workflow']} />
+              <span>Child Workflow</span>
+            </div>
+            <div
+              class="flex items-center gap-2 text-yellow-600 dark:text-yellow-400"
+            >
+              <Icon name={CategoryIcon.timer} />
+              <span>Timer</span>
+            </div>
+            <div
+              class="flex items-center gap-2 text-pink-600 dark:text-pink-400"
+            >
+              <Icon name={CategoryIcon.signal} />
+              <span>Signal</span>
+            </div>
+            <div
+              class="flex items-center gap-2 text-blue-600 dark:text-blue-400"
+            >
+              <Icon name={CategoryIcon.update} />
+              <span>Update</span>
+            </div>
+            <div
+              class="flex items-center gap-2 text-indigo-600 dark:text-indigo-400"
+            >
+              <Icon name={CategoryIcon.nexus} />
+              <span>Nexus</span>
+            </div>
+            <div
+              class="flex items-center gap-2 text-slate-700 dark:text-slate-300"
+            >
+              <Icon name={CategoryIcon['local-activity']} />
+              <span>Local Activity</span>
+            </div>
+            <div
+              class="flex items-center gap-2 text-slate-700 dark:text-slate-300"
+            >
+              <Icon name={CategoryIcon.other} />
+              <span>Other</span>
+            </div>
+          </div>
+        </div>
+        <Icon name="info" class="text-secondary hover:text-brand" />
+      </Tooltip>
+
       <ToggleButtons>
         {#if $eventViewType !== 'json'}
           <ToggleButton
@@ -109,21 +161,7 @@
             size="sm">{reverseSort ? 'Descending' : 'Ascending'}</ToggleButton
           >
         {/if}
-        <Tooltip
-          text={$minimizeEventView
-            ? 'Timeline and Event History are collapsed to minimized height'
-            : 'Timeline and Event History are expanded to full height'}
-          top
-        >
-          <ToggleButton
-            leadingIcon={$minimizeEventView ? 'minimize' : 'expand'}
-            data-testid="expandAll"
-            size="sm"
-            on:click={() => ($minimizeEventView = !$minimizeEventView)}
-            >{$minimizeEventView ? 'Minimized' : 'Expanded'}</ToggleButton
-          >
-        </Tooltip>
-        <EventTypeFilter {compact} minimized={$minimizeEventView} />
+        <EventTypeFilter compact={compactView} />
         <ToggleButton
           disabled={!workflow.isRunning}
           leadingIcon={$pauseLiveUpdates ? 'play' : 'pause'}
@@ -134,36 +172,30 @@
         >
           {$pauseLiveUpdates ? 'Unfreeze' : 'Freeze'}
         </ToggleButton>
-        <ToggleButton
-          data-testid="download"
-          leadingIcon="download"
-          size="sm"
-          on:click={() => (showDownloadPrompt = true)}
-        >
-          {translate('common.download')}
-        </ToggleButton>
       </ToggleButtons>
     </div>
   </div>
-  <div class="flex w-full flex-col">
-    <TimelineGraph
-      {workflow}
-      {groups}
-      error={Boolean(workflowTaskFailedError)}
-      viewportHeight={$minimizeEventView ? 360 : undefined}
+  {#if summaryView}
+    <div class="mt-4 flex flex-col gap-4">
+      <InputAndResults />
+      <WorkflowUserMetadata />
+      <WorkflowSearchAttributes />
+      <WorkflowMemo />
+    </div>
+  {:else if timelineView}
+    <WorkflowTimeline />
+  {:else if compactView}
+    <WorkflowHistory />
+  {:else if historyView}
+    <WorkflowHistory />
+  {:else if jsonView}
+    <WorkflowHistoryJson />
+  {:else if relationshipView}
+    <WorkflowRelationships />
+  {:else if workersView}
+    <WorkflowWorkers
+      taskQueue={workflow.taskQueue}
+      workers={$workflowRun.workers}
     />
-    <EventSummary {groups} {history} minimized={$minimizeEventView} />
-  </div>
+  {/if}
 </div>
-<DownloadEventHistoryModal
-  bind:open={showDownloadPrompt}
-  {namespace}
-  workflowId={workflow.id}
-  runId={workflow.runId}
-/>
-
-<style lang="postcss">
-  .sticky-header {
-    @apply sticky top-0 z-30 md:top-12;
-  }
-</style>
diff --git a/src/lib/models/event-groups/create-event-group.ts b/src/lib/models/event-groups/create-event-group.ts
index 76bffab75e..c0d3e70a2d 100644
--- a/src/lib/models/event-groups/create-event-group.ts
+++ b/src/lib/models/event-groups/create-event-group.ts
@@ -100,6 +100,12 @@ const createGroupFor = <K extends keyof StartingEvents>(
     get finalClassification() {
       return getLastEvent(this).classification;
     },
+    get input() {
+      return this.initialEvent.attributes?.input;
+    },
+    get result() {
+      return this.lastEvent.attributes?.result;
+    },
     get isPending() {
       return (
         !!this.pendingActivity ||
diff --git a/src/lib/models/event-groups/event-groups.d.ts b/src/lib/models/event-groups/event-groups.d.ts
index ce5c670fb1..5c33623db9 100644
--- a/src/lib/models/event-groups/event-groups.d.ts
+++ b/src/lib/models/event-groups/event-groups.d.ts
@@ -1,4 +1,4 @@
-import type { EventLink, Payload } from '$lib/types';
+import type { EventLink, Payload, Payloads } from '$lib/types';
 import type {
   PendingActivity,
   PendingNexusOperation,
@@ -24,6 +24,8 @@ interface EventGroup
   lastEvent: WorkflowEvent;
   eventList: WorkflowEvent[];
   finalClassification: EventClassification;
+  input: Payloads | undefined;
+  result: Payloads | undefined;
   isPending: boolean;
   isFailureOrTimedOut: boolean;
   isCanceled: boolean;
diff --git a/src/lib/pages/workflow-history.svelte b/src/lib/pages/workflow-history.svelte
index 8581b8f24e..b78b31558f 100644
--- a/src/lib/pages/workflow-history.svelte
+++ b/src/lib/pages/workflow-history.svelte
@@ -1,29 +1,18 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
-  import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
-
+  import EventSummary from '$lib/components/event/event-summary.svelte';
+  import { workflowHistoryInformation } from '$lib/runes/workflow-history-information.svelte';
   import { eventFilterSort } from '$lib/stores/event-view';
-  import { routeForEventHistory } from '$lib/utilities/route-for';
-
-  const { namespace, workflow, run } = $page.params;
+  import { filteredEventHistory } from '$lib/stores/events';
+  import { workflowRun } from '$lib/stores/workflow-run';
 
-  onMount(async () => {
-    const queryParams = {
-      sort: $eventFilterSort,
-    };
-
-    goto(
-      routeForEventHistory({
-        queryParams,
-        namespace,
-        workflow,
-        run,
-      }),
-      {
-        replaceState: true,
-      },
-    );
-  });
+  const workflow = $derived($workflowRun.workflow);
+  const { groups, history } = $derived(
+    workflowHistoryInformation(
+      workflow,
+      $filteredEventHistory,
+      $eventFilterSort,
+    ),
+  );
 </script>
+
+<EventSummary {groups} {history} />
diff --git a/src/lib/pages/workflow-pending-activities.svelte b/src/lib/pages/workflow-pending-activities.svelte
index 0dc45b3c39..8755fa4ca6 100644
--- a/src/lib/pages/workflow-pending-activities.svelte
+++ b/src/lib/pages/workflow-pending-activities.svelte
@@ -1,30 +1,29 @@
 <script lang="ts">
-  import PendingActivityCard from '$lib/components/workflow/pending-activity/pending-activity-card.svelte';
+  import EventDetailsFull from '$lib/components/event/event-details-full.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { workflowHistoryInformation } from '$lib/runes/workflow-history-information.svelte';
+  import { eventFilterSort } from '$lib/stores/event-view';
+  import { fullEventHistory } from '$lib/stores/events';
   import { workflowRun } from '$lib/stores/workflow-run';
 
-  const pendingActivities = $derived(
-    $workflowRun.workflow?.pendingActivities?.sort((a, b) => {
-      if (isNaN(parseInt(a.activityId)) || isNaN(parseInt(b.activityId))) {
-        return a.activityId.localeCompare(b.activityId);
-      }
-      return parseInt(a.activityId) - parseInt(b.activityId);
-    }) || [],
+  const { groups } = $derived(
+    workflowHistoryInformation(
+      $workflowRun.workflow,
+      $fullEventHistory,
+      $eventFilterSort,
+    ),
+  );
+
+  const pendingActivityGroups = $derived(
+    groups.filter((group) => !!group.pendingActivity),
   );
 </script>
 
 <div class="pb-16">
-  {#if pendingActivities.length}
-    <div class="flex flex-col gap-4">
-      {#each pendingActivities as activity (activity.id)}
-        <PendingActivityCard
-          {activity}
-          totalPending={pendingActivities.length}
-        />
-      {/each}
-    </div>
+  {#each pendingActivityGroups as group}
+    <EventDetailsFull {group} />
   {:else}
     <EmptyState title={translate('workflows.pending-activities-empty-state')} />
-  {/if}
+  {/each}
 </div>
diff --git a/src/lib/pages/workflow-timeline.svelte b/src/lib/pages/workflow-timeline.svelte
new file mode 100644
index 0000000000..ef9e63a240
--- /dev/null
+++ b/src/lib/pages/workflow-timeline.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import TimelineGraph from '$lib/components/lines-and-dots/svg/timeline-graph.svelte';
+  import { workflowHistoryInformation } from '$lib/runes/workflow-history-information.svelte';
+  import { eventFilterSort } from '$lib/stores/event-view';
+  import { filteredEventHistory } from '$lib/stores/events';
+  import { workflowRun } from '$lib/stores/workflow-run';
+
+  const workflow = $derived($workflowRun.workflow);
+  const { groups } = $derived(
+    workflowHistoryInformation(
+      workflow,
+      $filteredEventHistory,
+      $eventFilterSort,
+    ),
+  );
+</script>
+
+<TimelineGraph {workflow} {groups} />
diff --git a/src/lib/pages/workflow-user-metadata.svelte b/src/lib/pages/workflow-user-metadata.svelte
index e002baf02f..8d828b79dd 100644
--- a/src/lib/pages/workflow-user-metadata.svelte
+++ b/src/lib/pages/workflow-user-metadata.svelte
@@ -3,7 +3,7 @@
   import WorkflowSummaryAndDetails from '$lib/components/workflow/metadata/workflow-summary-and-details.svelte';
 </script>
 
-<div class="flex flex-col bg-primary lg:flex-row">
+<div class="grid grid-cols-1 border border-subtle bg-primary lg:grid-cols-2">
   <WorkflowSummaryAndDetails />
   <WorkflowCurrentDetails />
 </div>
diff --git a/src/lib/runes/workflow-history-information.svelte.ts b/src/lib/runes/workflow-history-information.svelte.ts
new file mode 100644
index 0000000000..cc72127407
--- /dev/null
+++ b/src/lib/runes/workflow-history-information.svelte.ts
@@ -0,0 +1,46 @@
+import { get } from 'svelte/store';
+
+import { groupEvents } from '$lib/models/event-groups';
+import { type EventSortOrder } from '$lib/stores/event-view';
+import { currentEventHistory } from '$lib/stores/events';
+import type { WorkflowEvents } from '$lib/types/events';
+import type { WorkflowExecution } from '$lib/types/workflows';
+import { getWorkflowTaskFailedEvent } from '$lib/utilities/get-workflow-task-failed-event';
+
+export const workflowHistoryInformation = (
+  workflow: WorkflowExecution,
+  filteredHistory: WorkflowEvents,
+  sortOrder: EventSortOrder,
+) => {
+  const reverseSort = $derived(sortOrder === 'descending');
+  const pendingActivities = $derived(workflow?.pendingActivities);
+  const pendingNexusOperations = $derived(workflow?.pendingNexusOperations);
+  const ascendingGroups = $derived(
+    groupEvents(
+      filteredHistory,
+      'ascending',
+      pendingActivities,
+      pendingNexusOperations,
+    ),
+  );
+
+  const groups = $derived(
+    reverseSort ? [...ascendingGroups].reverse() : ascendingGroups,
+  );
+  const history = $derived(
+    reverseSort ? [...filteredHistory].reverse() : filteredHistory,
+  );
+  const workflowTaskFailedError = $derived(
+    getWorkflowTaskFailedEvent(get(currentEventHistory), 'ascending'),
+  );
+
+  return {
+    workflow,
+    reverseSort,
+    pendingActivities,
+    pendingNexusOperations,
+    groups,
+    history,
+    workflowTaskFailedError,
+  };
+};
diff --git a/src/lib/stores/active-events.ts b/src/lib/stores/active-events.ts
index 5b4f8bba98..a80e0c8f57 100644
--- a/src/lib/stores/active-events.ts
+++ b/src/lib/stores/active-events.ts
@@ -7,10 +7,12 @@ export const startIndex = writable(0);
 export const endIndex = writable(indexPageSize);
 
 export const activeGroups = writable<string[]>([]);
+export const activeGroup = writable<EventGroup | null>(null);
 export const activeGroupHeight = writable<number>(0);
 
 export const clearActives = () => {
   activeGroups.set([]);
+  activeGroup.set(null);
   activeGroupHeight.set(0);
   startIndex.set(0);
   endIndex.set(indexPageSize);
@@ -18,14 +20,17 @@ export const clearActives = () => {
 
 export const clearActiveGroups = () => {
   activeGroups.set([]);
+  activeGroup.set(null);
   activeGroupHeight.set(0);
 };
 
 export const setActiveGroup = (group: EventGroup) => {
   if (!get(activeGroups).includes(group.id)) {
     activeGroups.set([group.id]);
+    activeGroup.set(group);
   } else {
     activeGroupHeight.set(0);
     activeGroups.set([]);
+    activeGroup.set(null);
   }
 };
diff --git a/src/lib/stores/event-view.ts b/src/lib/stores/event-view.ts
index 4552ecf353..1691f834c6 100644
--- a/src/lib/stores/event-view.ts
+++ b/src/lib/stores/event-view.ts
@@ -1,5 +1,5 @@
 import { persistStore } from '$lib/stores/persist-store';
-import type { EventView } from '$lib/types/events';
+import type { EventView, HistoryView } from '$lib/types/events';
 import type { BooleanString } from '$lib/types/global';
 
 export type EventSortOrder = 'ascending' | 'descending';
@@ -14,8 +14,11 @@ export const autoRefreshWorkflow = persistStore<'on' | 'off'>(
 );
 
 export const eventViewType = persistStore<EventView>('eventView', 'feed', true);
-
-export const minimizeEventView = persistStore('minimizeEventView', true, true);
+export const historyViewType = persistStore<HistoryView>(
+  'historyView',
+  'timeline',
+  true,
+);
 
 export const eventFilterSort = persistStore<EventSortOrder>(
   'eventFilterSort',
diff --git a/src/lib/theme/colors.ts b/src/lib/theme/colors.ts
index 9f28408c02..54f4a4d35b 100644
--- a/src/lib/theme/colors.ts
+++ b/src/lib/theme/colors.ts
@@ -151,11 +151,12 @@ export const colors = {
   'space-black': '#141414',
   'off-black': palette['slate'][950],
   'code-black': '#292D3E',
+  'code-white': '#F5F7FF',
   current: 'currentColor',
   transparent: 'transparent',
   mint: '#59FDA0',
   ...palette,
 } as const satisfies Record<
   string,
-  HexColor | 'transparent' | 'currentColor' | Shades
+  HexColor | RGBA | 'transparent' | 'currentColor' | Shades
 >;
diff --git a/src/lib/theme/plugin.ts b/src/lib/theme/plugin.ts
index 9097c73524..abe3f26ad6 100644
--- a/src/lib/theme/plugin.ts
+++ b/src/lib/theme/plugin.ts
@@ -196,7 +196,6 @@ const temporal = plugin(
         warning: css('--color-surface-warning'),
         danger: css('--color-surface-danger'),
         'code-block': css('--color-surface-code-block'),
-
         DEFAULT: css('--color-surface-primary'),
       }),
       borderColor: ({ theme }) => ({
diff --git a/src/lib/theme/types.d.ts b/src/lib/theme/types.d.ts
index aef7222523..5fdb51e549 100644
--- a/src/lib/theme/types.d.ts
+++ b/src/lib/theme/types.d.ts
@@ -2,6 +2,7 @@ type PaletteColor = import('./colors').PaletteColor;
 type Palette = import('./colors').Palette;
 
 type RGB = `${number} ${number} ${number}`;
+type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
 type HexColor = `#${string}`;
 
 type CSSVariable = `--${string}`;
diff --git a/src/lib/theme/variables.ts b/src/lib/theme/variables.ts
index 7ef913c015..4881c9a5f7 100644
--- a/src/lib/theme/variables.ts
+++ b/src/lib/theme/variables.ts
@@ -117,7 +117,7 @@ export const variables = {
     dark: 'black',
   },
   '--color-surface-code-block': {
-    light: 'slate.50',
+    light: 'code-white',
     dark: 'code-black',
   },
   // Interactive
diff --git a/src/lib/types/events.ts b/src/lib/types/events.ts
index 1016906d0c..cf3cddf36d 100644
--- a/src/lib/types/events.ts
+++ b/src/lib/types/events.ts
@@ -151,6 +151,14 @@ export type ChildEvent = StartChildWorkflowExecutionInitiatedEvent &
   ChildWorkflowExecutionTimedOutEvent &
   ChildWorkflowExecutionTerminatedEvent;
 
+export type HistoryView =
+  | 'summary'
+  | 'timeline'
+  | 'compact'
+  | 'history'
+  | 'json'
+  | 'relationship'
+  | 'workers';
 export type EventView = 'compact' | 'feed' | 'json';
 export type TaskQueueView = 'workers' | 'versioning';
 
diff --git a/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/history/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/history/+page.svelte
index 6e4c8ed77d..977a515b0f 100644
--- a/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/history/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/history/+page.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import PageTitle from '$lib/components/page-title.svelte';
   import { translate } from '$lib/i18n/translate';
   import WorkflowHistoryLayout from '$lib/layouts/workflow-history-layout.svelte';
-  const workflow = $page.params.workflow;
+
+  const workflow = $derived(page.params.workflow);
 </script>
 
 <PageTitle
   title={`${translate('workflows.workflow-history')} | ${workflow}`}
-  url={$page.url.href}
+  url={page.url.href}
 />
 <WorkflowHistoryLayout />