diff --git a/src/lib/components/event/event-card.svelte b/src/lib/components/event/event-card.svelte
index d183f3fc4a..75d5961018 100644
--- a/src/lib/components/event/event-card.svelte
+++ b/src/lib/components/event/event-card.svelte
@@ -125,7 +125,7 @@
   {@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">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {translate('nexus.link')}
     </p>
     <Copyable
@@ -141,7 +141,7 @@
 {#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">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {translate('nexus.link-namespace')}
     </p>
     <Copyable
@@ -165,7 +165,7 @@
 
 {#snippet eventSummary(value: Payload)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">Summary</p>
+    <p class="min-w-56 text-sm font-medium text-secondary">Summary</p>
     <p class="whitespace-pre-line">
       <MetadataDecoder
         {value}
@@ -182,7 +182,7 @@
   {@const codeBlockValue = getCodeBlockValue(value)}
   {@const stackTrace = getStackTrace(codeBlockValue)}
   <div>
-    <p class="mb-1 min-w-56 text-sm text-secondary/80">
+    <p class="mb-1 min-w-56 text-sm font-medium text-secondary">
       {format(key)}
     </p>
     {#if value?.payloads}
@@ -225,7 +225,7 @@
   </div>
   {#if stackTrace}
     <div>
-      <p class="mb-1 min-w-56 text-sm text-secondary/80">
+      <p class="mb-1 min-w-56 text-sm font-medium text-secondary">
         {translate('workflows.call-stack-tab')}
       </p>
       <CodeBlock
@@ -241,7 +241,7 @@
 
 {#snippet link(key, value)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {format(key)}
     </p>
     <Copyable
@@ -261,7 +261,7 @@
 
 {#snippet details(key, value)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {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..142539581e 100644
--- a/src/lib/components/event/event-details-full.svelte
+++ b/src/lib/components/event/event-details-full.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
+  import { page } from '$app/state';
+
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import type { WorkflowEvent } from '$lib/types/events';
+  import { formatAttributes } from '$lib/utilities/format-event-attributes';
+  import { displayLinkType } from '$lib/utilities/get-single-attribute-for-event';
 
   import PendingActivityCard from '../workflow/pending-activity/pending-activity-card.svelte';
   import PendingNexusOperationCard from '../workflow/pending-nexus-operation/pending-nexus-operation-card.svelte';
 
   import EventCard from './event-card.svelte';
+  import EventDetailsSection from './event-details-section.svelte';
+  import EventPayloads from './event-payloads.svelte';
 
   let {
     group = undefined,
@@ -18,18 +24,120 @@
   const showEventGroup = $derived(
     group && (group.eventList.length > 1 || pendingEvent),
   );
+
+  const processedEvents = $derived.by(() => {
+    if (!group || !showEventGroup) return [];
+    return group.eventList.map((evt) => {
+      const attrs = formatAttributes(evt);
+      if (evt?.principal?.name) attrs.principalName = evt.principal.name;
+      if (evt?.principal?.type) attrs.principalType = evt.principal.type;
+      const fields = Object.entries(attrs);
+      const payloadFields = fields.filter(
+        ([_key, value]) =>
+          typeof value === 'object' && Object.keys(value).length > 0,
+      );
+      const linkFields = fields.filter(
+        ([key, _value]) => displayLinkType(key, attrs) !== 'none',
+      );
+      const hiddenDetailFields = (() => {
+        if (evt.category === 'activity')
+          return ['scheduledEventId', 'startedEventId', 'namespaceId'];
+        if (evt.category === 'child-workflow')
+          return ['initiatedEventId', 'startedEventId', 'namespaceId'];
+        return ['namespaceId'];
+      })();
+      const detailFields = fields.filter(
+        ([key, value]) =>
+          typeof value !== 'object' &&
+          displayLinkType(key, attrs) === 'none' &&
+          !hiddenDetailFields.includes(key) &&
+          (key !== 'namespace' ||
+            (key === 'namespace' && page.params.namespace !== value)),
+      );
+      return {
+        event: evt,
+        attributes: attrs,
+        payloadFields,
+        detailFields,
+        linkFields,
+      };
+    });
+  });
+
+  const payloadKeyOrder = [
+    'input',
+    'result',
+    'lastFailure',
+    'failure',
+    'header',
+    'searchAttributes',
+    'memo',
+  ];
+
+  const allPayloadFields = $derived.by(() => {
+    const all = processedEvents.flatMap((p) => p.payloadFields);
+    return all.toSorted(([a], [b]) => {
+      const aIndex = payloadKeyOrder.indexOf(a);
+      const bIndex = payloadKeyOrder.indexOf(b);
+      const aOrder = aIndex !== -1 ? aIndex : payloadKeyOrder.length - 1;
+      const bOrder = bIndex !== -1 ? bIndex : payloadKeyOrder.length - 1;
+      return aOrder - bOrder;
+    });
+  });
+
+  const hasAnyPayloads = $derived(allPayloadFields.length > 0);
 </script>
 
 {#if showEventGroup}
-  <div class="flex flex-col overflow-hidden">
+  <div
+    class="surface-primary flex flex-col overflow-hidden border-t border-subtle"
+  >
     {#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}
+
+    {#if hasAnyPayloads}
+      <div class="flex flex-col border-b border-subtle xl:flex-row">
+        <div class="flex w-full flex-col xl:w-1/2">
+          {#each processedEvents as processed, i (processed.event.id)}
+            <div
+              class="p-4 {i < processedEvents.length - 1
+                ? 'border-b border-subtle'
+                : ''}"
+            >
+              <div class="flex flex-col gap-1">
+                <EventDetailsSection
+                  event={processed.event}
+                  {group}
+                  attributes={processed.attributes}
+                  detailFields={processed.detailFields}
+                  linkFields={processed.linkFields}
+                />
+              </div>
+            </div>
+          {/each}
+        </div>
+        <div class="flex w-full flex-col gap-1 p-4 xl:w-1/2">
+          <EventPayloads payloadFields={allPayloadFields} />
+        </div>
+      </div>
+    {:else}
+      {#each processedEvents as processed (processed.event.id)}
+        <div class="border-b border-subtle p-4">
+          <div class="flex flex-col gap-1">
+            <EventDetailsSection
+              event={processed.event}
+              {group}
+              attributes={processed.attributes}
+              detailFields={processed.detailFields}
+              linkFields={processed.linkFields}
+            />
+          </div>
+        </div>
+      {/each}
+    {/if}
   </div>
 {:else if event}
   <EventCard {event} />
diff --git a/src/lib/components/event/event-details-section.svelte b/src/lib/components/event/event-details-section.svelte
new file mode 100644
index 0000000000..73d30d39df
--- /dev/null
+++ b/src/lib/components/event/event-details-section.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import Timestamp from '$lib/components/timestamp.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
+  import Link from '$lib/holocene/link.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 { getEventLinkHref } from '$lib/utilities/event-link-href';
+  import {
+    format,
+    spaceBetweenCapitalLetters,
+  } from '$lib/utilities/format-camel-case';
+  import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
+  import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
+  import {
+    displayLinkType,
+    shouldDisplayAsTime,
+  } from '$lib/utilities/get-single-attribute-for-event';
+  import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type';
+  import {
+    routeForEventHistoryEvent,
+    routeForNamespace,
+  } from '$lib/utilities/route-for';
+
+  import EventDetailsLink from './event-details-link.svelte';
+  import MetadataDecoder from './metadata-decoder.svelte';
+
+  let {
+    event,
+    group,
+    attributes,
+    detailFields,
+    linkFields,
+  }: {
+    event: WorkflowEvent;
+    group?: EventGroup;
+    attributes: CombinedAttributes;
+    detailFields: [string, unknown][];
+    linkFields: [string, unknown][];
+  } = $props();
+
+  const { namespace, workflow, run } = $derived(page.params);
+
+  const displayName = $derived(
+    isLocalActivityMarkerEvent(event)
+      ? translate('events.category.local-activity')
+      : spaceBetweenCapitalLetters(event.name),
+  );
+
+  const durationSinceLastEvent = $derived.by(() => {
+    if (!group) return '';
+    const eventIndex = group.eventList.findIndex((evt) => evt.id === event.id);
+    if (eventIndex === -1 || eventIndex === 0) return '';
+    const previousEvent = group.eventList[eventIndex - 1];
+    return formatDistanceAbbreviated({
+      start: event.eventTime,
+      end: previousEvent.eventTime,
+      includeMilliseconds: true,
+    });
+  });
+</script>
+
+<div class="mb-2 flex w-full flex-wrap items-center justify-between gap-2">
+  <div class="flex items-center gap-2 text-base">
+    <Link
+      href={routeForEventHistoryEvent({
+        eventId: event.id,
+        run,
+        workflow,
+        namespace,
+      })}>{event.id}</Link
+    >
+    <p class="font-medium">
+      {displayName}
+    </p>
+  </div>
+  <div class="flex flex-col items-end gap-0 font-mono text-sm leading-4">
+    <Timestamp as="p" dateTime={event.eventTime} />
+    {#if durationSinceLastEvent}
+      <p class="font-medium text-secondary">+{durationSinceLastEvent}</p>
+    {/if}
+  </div>
+</div>
+
+{#if event?.links?.length}
+  {#each event.links as link}
+    {@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 font-medium text-secondary">
+        {translate('nexus.link')}
+      </p>
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={value}
+      >
+        <Link {href} class="whitespace-pre-line">{value}</Link>
+      </Copyable>
+    </div>
+    {@const nsHref = routeForNamespace({
+      namespace: link.workflowEvent.namespace,
+    })}
+    <div class="flex items-start gap-4">
+      <p class="min-w-56 text-sm font-medium text-secondary">
+        {translate('nexus.link-namespace')}
+      </p>
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={link.workflowEvent.namespace}
+      >
+        <Link href={nsHref} class="whitespace-pre-line"
+          >{link.workflowEvent.namespace}</Link
+        >
+      </Copyable>
+    </div>
+  {/each}
+{/if}
+
+{#if event?.userMetadata?.summary}
+  <div class="flex items-start gap-4">
+    <p class="min-w-56 text-sm font-medium text-secondary">Summary</p>
+    <p class="whitespace-pre-line">
+      <MetadataDecoder
+        value={event.userMetadata.summary}
+        let:decodedValue
+        fallback={translate('events.decode-failed')}
+      >
+        {decodedValue}
+      </MetadataDecoder>
+    </p>
+  </div>
+{/if}
+
+{#each detailFields as [key, value] (key)}
+  <div class="flex items-start gap-4">
+    <p class="min-w-56 text-sm font-medium text-secondary">
+      {format(key)}
+    </p>
+    <p class="whitespace-pre-line break-all">
+      {#if shouldDisplayAsTime(key)}
+        <Timestamp dateTime={value} />
+      {:else}
+        {value}
+      {/if}
+    </p>
+  </div>
+{/each}
+
+{#each linkFields as [key, value] (key)}
+  <div class="flex items-start gap-4">
+    <p class="min-w-56 text-sm font-medium text-secondary">
+      {format(key)}
+    </p>
+    <Copyable
+      copyIconTitle={translate('common.copy-icon-title')}
+      copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      content={String(value)}
+    >
+      <EventDetailsLink
+        value={String(value)}
+        {attributes}
+        type={displayLinkType(key, attributes)}
+        class="whitespace-pre-line"
+      />
+    </Copyable>
+  </div>
+{/each}
diff --git a/src/lib/components/event/event-payloads.svelte b/src/lib/components/event/event-payloads.svelte
new file mode 100644
index 0000000000..c217c93a7d
--- /dev/null
+++ b/src/lib/components/event/event-payloads.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { format } from '$lib/utilities/format-camel-case';
+  import {
+    getCodeBlockValue,
+    getStackTrace,
+  } from '$lib/utilities/get-single-attribute-for-event';
+
+  import PayloadDecoder from './payload-decoder.svelte';
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let { payloadFields }: { payloadFields: [string, any][] } = $props();
+</script>
+
+{#each payloadFields as [key, value] (key)}
+  {@const codeBlockValue = getCodeBlockValue(value)}
+  {@const stackTrace = getStackTrace(codeBlockValue)}
+  <div>
+    <p class="mb-1 min-w-56 text-sm font-medium text-secondary">
+      {format(key)}
+    </p>
+    {#if value?.payloads}
+      <PayloadDecoder {value} key="payloads">
+        {#snippet children(decodedValue)}
+          <CodeBlock
+            content={decodedValue}
+            maxHeight={384}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        {/snippet}
+      </PayloadDecoder>
+    {:else if key === 'searchAttributes'}
+      <PayloadDecoder
+        key="searchAttributes"
+        value={{ searchAttributes: codeBlockValue }}
+      >
+        {#snippet children(decodedValue)}
+          <CodeBlock
+            content={decodedValue}
+            maxHeight={384}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        {/snippet}
+      </PayloadDecoder>
+    {:else}
+      <PayloadDecoder value={codeBlockValue}>
+        {#snippet children(decodedValue)}
+          <CodeBlock
+            content={decodedValue}
+            maxHeight={384}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        {/snippet}
+      </PayloadDecoder>
+    {/if}
+  </div>
+  {#if stackTrace}
+    <div>
+      <p class="mb-1 min-w-56 text-sm font-medium text-secondary">
+        {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}
+{/each}
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index 9c9417b833..fa3763dd4e 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -380,7 +380,7 @@
 </tr>
 {#if expanded}
   <tr
-    class="w-full text-sm no-underline"
+    class="w-full text-sm no-underline hover:!bg-transparent"
     data-testid="event-summary-row-expanded"
   >
     <td class="!p-0" colspan={$isCloud ? 5 : 4}>
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 ee1075e49f..a0728c4d4b 100644
--- a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
+++ b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
@@ -6,7 +6,6 @@
   import ActivityCommands from '$lib/components/activity/activity-commands.svelte';
   import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
   import { timestamp } from '$lib/components/timestamp.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,19 +44,10 @@
 </script>
 
 <div
-  class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
+  class="surface-primary flex cursor-default flex-col gap-2 border-b border-subtle"
 >
-  <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>
-    {#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">
+  <div class="flex flex-1 flex-col xl:flex-row">
+    <div class="flex w-full flex-col gap-1 p-4 xl:w-1/2">
       {@render detail(translate('workflows.activity-id'), activity.activityId)}
       {#if activity.paused && activity.pauseInfo}
         {@render detail(
@@ -135,8 +125,13 @@
           )}
         {/if}
       {/if}
+      {#if showActivityCommands}
+        <div class="py-2">
+          <ActivityCommands {activity} />
+        </div>
+      {/if}
     </div>
-    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
+    <div class="flex w-full flex-col gap-1 p-4 md:flex-1 xl:w-1/2">
       {#if failed}
         {#if totalPending > 20}
           {@render failuresAccordion()}
@@ -153,7 +148,7 @@
 
 {#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">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {label}
     </p>
     <p class="w-full whitespace-pre-line">
@@ -168,7 +163,7 @@
 
 {#snippet heartbeat()}
   <div>
-    <p class="text-sm text-secondary/80">
+    <p class="text-sm font-medium text-secondary">
       {translate('workflows.heartbeat-details')}
     </p>
     {#key activity.attempt}
@@ -190,7 +185,7 @@
   <div class="flex flex-col gap-2">
     <div class="flex flex-1 flex-col">
       {#if activity.lastFailure}
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm font-medium text-secondary">
           {translate('workflows.last-failure')}
         </p>
         {#key activity.attempt}
@@ -211,7 +206,7 @@
     </div>
     {#if activity.lastFailure?.stackTrace}
       <div>
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm font-medium text-secondary">
           {translate('common.stack-trace')}
         </p>
         <CodeBlock
@@ -241,7 +236,7 @@
 
 {#snippet nextRetry(timeDifference)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {translate('workflows.next-retry')}
     </p>
     <p class="flex w-full items-center gap-1 whitespace-pre-line">
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 40207607bd..99fc83596f 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
@@ -19,13 +19,6 @@
 <div
   class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
 >
-  <div class="flex-1">
-    <div class="flex flex-wrap items-center space-x-3">
-      <Badge>{operation.state}</Badge>
-      <h4>{translate('workflows.pending-nexus-operation')}</h4>
-    </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}
@@ -80,7 +73,7 @@
       {#if operation.scheduleToStartTimeout}
         {@render detail(
           translate('workflows.schedule-to-start-timeout'),
-          operation.scheduleToCloseTimeout as string,
+          operation.scheduleToStartTimeout as string,
         )}
       {/if}
       {#if operation.startToCloseTimeout}
@@ -96,7 +89,7 @@
       {/if}
       {#if operation.blockedReason}
         <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
+          <p class="text-sm font-medium text-secondary">
             {translate('nexus.blocked-reason')}
           </p>
           <CodeBlock
@@ -109,7 +102,7 @@
       {/if}
       {#if Object.keys(operation.cancellationInfo ?? {}).length > 0}
         <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
+          <p class="text-sm font-medium text-secondary">
             {translate('nexus.cancellation-info')}
           </p>
           <CodeBlock
@@ -126,7 +119,7 @@
 
 {#snippet nextRetry(timeDifference)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {translate('workflows.next-retry')}
     </p>
     <p class="flex w-full items-center gap-1 whitespace-pre-line">
@@ -138,7 +131,7 @@
 
 {#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">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {label}
     </p>
     <p class="w-full whitespace-pre-line">
@@ -162,7 +155,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 font-medium text-secondary">
           {translate('workflows.last-failure')}
         </p>
         <CodeBlock
@@ -177,7 +170,7 @@
     </div>
     <div class="flex flex-1 flex-col">
       {#if operation.lastAttemptFailure?.stackTrace}
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm font-medium text-secondary">
           {translate('common.stack-trace')}
         </p>
         <CodeBlock
diff --git a/src/lib/pages/workflow-pending-activities.svelte b/src/lib/pages/workflow-pending-activities.svelte
index 0dc45b3c39..f1c41ccff3 100644
--- a/src/lib/pages/workflow-pending-activities.svelte
+++ b/src/lib/pages/workflow-pending-activities.svelte
@@ -1,27 +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 { groupEvents } from '$lib/models/event-groups';
+  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 { workflow } = $derived($workflowRun);
+  const pendingActivities = $derived(workflow?.pendingActivities ?? []);
+
+  const pendingGroups = $derived.by(() => {
+    const groups = groupEvents(
+      $fullEventHistory,
+      'ascending',
+      pendingActivities,
+    );
+    return groups.filter((g) => g.pendingActivity);
+  });
 </script>
 
 <div class="pb-16">
-  {#if pendingActivities.length}
+  {#if pendingGroups.length}
     <div class="flex flex-col gap-4">
-      {#each pendingActivities as activity (activity.id)}
-        <PendingActivityCard
-          {activity}
-          totalPending={pendingActivities.length}
-        />
+      {#each pendingGroups as group (group.id)}
+        <EventDetailsFull {group} />
       {/each}
     </div>
   {:else}