diff --git a/.gitignore b/.gitignore
index 2363727be2..d7ab25f22b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,4 @@ go.work.sum
 .claude/*
 !.claude/skills/
 .sisyphus/*
-.omc
\ No newline at end of file
+.omc
diff --git a/src/lib/components/lines-and-dots/workflow-details.svelte b/src/lib/components/lines-and-dots/workflow-details.svelte
index c5c7e03698..9845877538 100644
--- a/src/lib/components/lines-and-dots/workflow-details.svelte
+++ b/src/lib/components/lines-and-dots/workflow-details.svelte
@@ -6,7 +6,7 @@
   import { translate } from '$lib/i18n/translate';
   import { fetchWorkflow } from '$lib/services/workflow-service';
   import { isCloud } from '$lib/stores/advanced-visibility';
-  import { fullEventHistory } from '$lib/stores/events';
+  import { fullEventHistory, sdkInfo } from '$lib/stores/events';
   import {
     relativeTime,
     timeFormat,
@@ -19,8 +19,6 @@
     formatDuration,
   } from '$lib/utilities/format-time';
   import { getBuildIdFromVersion } from '$lib/utilities/get-deployment-build-id';
-  import { getSDKandVersion } from '$lib/utilities/get-sdk-version';
-  import { isWorkflowTaskCompletedEvent } from '$lib/utilities/is-event-type';
   import {
     routeForSchedule,
     routeForTaskQueue,
@@ -81,16 +79,12 @@
     ],
   );
   let totalActions = $derived(
-    $fullEventHistory.reduce((acc, e) => e.billableActions + acc, 0).toString(),
+    $fullEventHistory
+      .reduce((acc, e) => (e?.billableActions ?? 0) + acc, 0)
+      .toString(),
   );
 
-  const workflowCompletedTasks = $derived(
-    $fullEventHistory.filter(isWorkflowTaskCompletedEvent),
-  );
-
-  const { sdk, version: sdkVersion } = $derived(
-    getSDKandVersion(workflowCompletedTasks),
-  );
+  const { sdk, version: sdkVersion } = $derived($sdkInfo);
 
   const fetchLatestRun = async () => {
     const result = await fetchWorkflow({
@@ -166,18 +160,20 @@
       href={routeForWorkflowsWithQuery({
         namespace,
         query: `WorkflowType="${workflow?.name}"`,
-      })}
+      }) ?? ''}
       iconName="filter"
     />
 
-    <DetailListLabel>{translate('common.task-queue')}</DetailListLabel>
-    <DetailListLinkValue
-      text={workflow?.taskQueue}
-      href={routeForTaskQueue({
-        namespace,
-        queue: workflow?.taskQueue,
-      })}
-    />
+    {#if workflow?.taskQueue}
+      <DetailListLabel>{translate('common.task-queue')}</DetailListLabel>
+      <DetailListLinkValue
+        text={workflow.taskQueue}
+        href={routeForTaskQueue({
+          namespace,
+          queue: workflow.taskQueue,
+        })}
+      />
+    {/if}
 
     {#if workflow?.priority}
       {@const { priorityKey, fairnessKey } = workflow.priority}
@@ -214,11 +210,11 @@
           copyableText={versioningBuildId}
           text={versioningBuildId}
           href={deploymentVersion
-            ? routeForWorkflowsWithQuery({
+            ? (routeForWorkflowsWithQuery({
                 namespace,
                 query: `TemporalWorkerDeploymentVersion="${deploymentVersion}"`,
-              })
-            : undefined}
+              }) ?? '')
+            : ''}
           iconName={deploymentVersion ? 'filter' : undefined}
         />
       {/if}
@@ -234,7 +230,7 @@
           href={routeForWorkflowsWithQuery({
             namespace,
             query: `TemporalWorkflowVersioningBehavior="${versioningBehavior}"`,
-          })}
+          }) ?? ''}
           iconName="filter"
         />
       {/if}
@@ -252,15 +248,15 @@
         })}
       />
     {/if}
-    {#if parent}
+    {#if parent?.workflowId && parent?.runId}
       <DetailListLabel>{translate('workflows.parent-workflow')}</DetailListLabel
       >
       <DetailListLinkValue
-        text={parent?.workflowId}
+        text={parent.workflowId}
         href={routeForWorkflow({
           namespace,
-          workflow: parent?.workflowId,
-          run: parent?.runId,
+          workflow: parent.workflowId,
+          run: parent.runId,
         })}
       />
     {/if}
@@ -305,7 +301,7 @@
     {/if}
 
     {#if sdk && sdkVersion}
-      <DetailListLabel>SDK</DetailListLabel>
+      <DetailListLabel>{translate('workflows.sdk')}</DetailListLabel>
       <DetailListValue>
         <SdkLogo {sdk} version={sdkVersion} />
       </DetailListValue>
diff --git a/src/lib/components/shared-search-attribute-filter/filter-bar.svelte b/src/lib/components/shared-search-attribute-filter/filter-bar.svelte
new file mode 100644
index 0000000000..f1d5dd0e85
--- /dev/null
+++ b/src/lib/components/shared-search-attribute-filter/filter-bar.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+
+  import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
+  import type { SearchAttributeOption } from '$lib/stores/search-attributes';
+
+  import type { StatusAttribute } from './types.ts';
+
+  import Filter from './filter.svelte';
+  import ManualQuery from './manual-query.svelte';
+
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    options: SearchAttributeOption[];
+    id: string;
+    statusAttribute?: StatusAttribute;
+    onManualSearch?: (query: string) => void;
+  }
+
+  let { filters, options, id, statusAttribute, onManualSearch }: Props =
+    $props();
+
+  let viewManualQuery = $state(false);
+</script>
+
+<div>
+  <div
+    class="flex w-full flex-wrap items-center justify-between gap-2 border border-subtle bg-primary p-1.5"
+  >
+    <div class="flex grow items-center justify-start gap-4 px-2">
+      <Icon name="filter-lines" class="text-primary-text h-4 w-4 shrink-0" />
+      <Filter {filters} {options} {id} {statusAttribute} />
+    </div>
+    <div class="flex items-center gap-1">
+      <Tooltip
+        text={viewManualQuery ? 'Hide raw query' : 'View raw query'}
+        left
+      >
+        <Button
+          variant="ghost"
+          size="xs"
+          leadingIcon="json"
+          active={viewManualQuery}
+          data-testid="toggle-manual-query"
+          on:click={() => (viewManualQuery = !viewManualQuery)}
+        />
+      </Tooltip>
+    </div>
+  </div>
+  {#if viewManualQuery}
+    <ManualQuery {filters} {id} onSearch={onManualSearch} />
+  {/if}
+</div>
diff --git a/src/lib/components/shared-search-attribute-filter/filter-list.svelte b/src/lib/components/shared-search-attribute-filter/filter-list.svelte
new file mode 100644
index 0000000000..e36bbb5a70
--- /dev/null
+++ b/src/lib/components/shared-search-attribute-filter/filter-list.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+
+  import { getContext } from 'svelte';
+
+  import { page } from '$app/state';
+
+  import DropdownFilterChip from '$lib/components/workflow/filter-bar/dropdown-filter-chip.svelte';
+  import Button from '$lib/holocene/button.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
+  import { createFilter } from '$lib/utilities/query/to-list-workflow-filters';
+  import { updateQueryParamsFromFilter } from '$lib/utilities/query/to-list-workflow-filters';
+
+  import type { StatusAttribute } from './types.ts';
+
+  import {
+    SEARCH_ATTRIBUTE_FILTER_CONTEXT,
+    type SearchAttributeFilterContext,
+  } from './filter.svelte';
+  import StatusFilterChip from './status-filter-chip.svelte';
+
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    statusAttribute?: StatusAttribute;
+  }
+
+  let { filters, statusAttribute }: Props = $props();
+
+  const isStatusFilter = (f: SearchAttributeFilter) =>
+    statusAttribute ? f.attribute === statusAttribute : false;
+
+  const { filter, activeQueryIndex, chipOpenIndex } =
+    getContext<SearchAttributeFilterContext>(SEARCH_ATTRIBUTE_FILTER_CONTEXT);
+
+  let totalFiltersInView = $state(10);
+
+  const firstExecutionStatusIndex = $derived(
+    $filters.findIndex((filter) => isStatusFilter(filter)),
+  );
+  const visibleFilters = $derived($filters.slice(0, totalFiltersInView));
+  const statusFilters = $derived(
+    statusAttribute
+      ? $filters.filter((filter) => filter.attribute === statusAttribute)
+      : [],
+  );
+  const nonStatusFilters = $derived(
+    $filters.filter((filter) => !isStatusFilter(filter)),
+  );
+  const hasMoreFilters = $derived(totalFiltersInView < $filters.length);
+
+  function updateFilter(index: number, updatedFilter: SearchAttributeFilter) {
+    const next = [...$filters];
+    next[index] = updatedFilter;
+    $filters = next;
+    updateQueryParamsFromFilter(page.url, $filters);
+  }
+
+  function updateStatusFilters(
+    index: number,
+    updatedFilters: SearchAttributeFilter[],
+  ) {
+    if (updatedFilters.length === 0) {
+      $filters = nonStatusFilters;
+      updateQueryParamsFromFilter(page.url, $filters);
+    } else {
+      const next = [...$filters];
+      next.splice(index, statusFilters.length, ...updatedFilters);
+      $filters = next;
+      updateQueryParamsFromFilter(page.url, $filters);
+    }
+  }
+
+  function removeFilter(index: number) {
+    const next = [...$filters];
+    next.splice(index, 1);
+    $filters = next;
+    updateQueryParamsFromFilter(page.url, $filters);
+
+    if (index === $filters.length && $filters.length > 0) {
+      const previousQuery = $filters[$filters.length - 1];
+      if (previousQuery) {
+        previousQuery.operator = '';
+      }
+    }
+
+    if (index === $activeQueryIndex) {
+      $activeQueryIndex = null;
+      $filter = createFilter();
+    } else if ($activeQueryIndex !== null && index < $activeQueryIndex) {
+      $activeQueryIndex -= 1;
+    }
+  }
+
+  function viewMoreFilters() {
+    if (hasMoreFilters) {
+      totalFiltersInView += 10;
+    }
+  }
+</script>
+
+{#if visibleFilters.length > 0}
+  <div class="flex flex-wrap items-center gap-2">
+    {#each visibleFilters as filterItem, i (filterItem.id)}
+      {#if statusAttribute && isStatusFilter(filterItem) && i === firstExecutionStatusIndex}
+        <StatusFilterChip
+          attribute={statusAttribute}
+          filters={statusFilters}
+          index={i}
+          openIndex={$chipOpenIndex}
+          onUpdate={(updatedStatusFilters) =>
+            updateStatusFilters(i, updatedStatusFilters)}
+        />
+      {:else if !isStatusFilter(filterItem) && filterItem.attribute}
+        <DropdownFilterChip
+          filter={filterItem}
+          index={i}
+          openIndex={$chipOpenIndex}
+          onUpdate={(updatedFilter) => updateFilter(i, updatedFilter)}
+          onRemove={() => removeFilter(i)}
+        />
+      {/if}
+    {/each}
+
+    {#if hasMoreFilters}
+      <Button variant="secondary" size="xs" on:click={viewMoreFilters}>
+        {translate('common.view-more')}
+      </Button>
+    {/if}
+  </div>
+{/if}
diff --git a/src/lib/components/standalone-activities/activities-summary-filter-bar/filter.svelte b/src/lib/components/shared-search-attribute-filter/filter.svelte
similarity index 55%
rename from src/lib/components/standalone-activities/activities-summary-filter-bar/filter.svelte
rename to src/lib/components/shared-search-attribute-filter/filter.svelte
index 2b85cb82d4..1ad792ac2d 100644
--- a/src/lib/components/standalone-activities/activities-summary-filter-bar/filter.svelte
+++ b/src/lib/components/shared-search-attribute-filter/filter.svelte
@@ -1,29 +1,45 @@
 <script lang="ts" module>
-  import { writable, type Writable } from 'svelte/store';
+  import type { Writable } from 'svelte/store';
 
-  import { setContext } from 'svelte';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
 
-  export const ACTIVITY_FILTER_CONTEXT = 'activity-filter-context';
+  export const SEARCH_ATTRIBUTE_FILTER_CONTEXT =
+    'search-attribute-filter-context';
 
-  export interface ActivityFilterContext {
+  export interface SearchAttributeFilterContext {
     filter: Writable<SearchAttributeFilter>;
     activeQueryIndex: Writable<number | null>;
     handleSubmit: () => void;
     focusedElementId: Writable<string>;
     resetFilter: () => void;
     chipOpenIndex: Writable<number | null>;
+    id: string;
   }
 </script>
 
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import { setContext } from 'svelte';
+
   import { afterNavigate } from '$app/navigation';
 
-  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
-  import { activityFilters } from '$lib/stores/filters';
+  import type { SearchAttributeOption } from '$lib/stores/search-attributes';
   import { createFilter } from '$lib/utilities/query/to-list-workflow-filters';
 
-  import ActivityDropdownFilterList from './dropdown-filter-list.svelte';
-  import ActivitySearchAttributeMenu from './search-attribute-menu.svelte';
+  import type { StatusAttribute } from './types.ts';
+
+  import DropdownFilterList from './filter-list.svelte';
+  import SearchAttributeMenu from './search-attribute-menu.svelte';
+
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    options: SearchAttributeOption[];
+    id: string;
+    statusAttribute?: StatusAttribute;
+  }
+
+  let { filters, options, id, statusAttribute }: Props = $props();
 
   const filter = writable<SearchAttributeFilter>(createFilter());
   const activeQueryIndex = writable<number | null>(null);
@@ -34,22 +50,23 @@
     chipOpenIndex.set(null);
   });
 
-  setContext<ActivityFilterContext>(ACTIVITY_FILTER_CONTEXT, {
+  setContext<SearchAttributeFilterContext>(SEARCH_ATTRIBUTE_FILTER_CONTEXT, {
     filter,
     activeQueryIndex,
     handleSubmit,
     focusedElementId,
     resetFilter,
     chipOpenIndex,
+    id,
   });
 
   function handleSubmit() {
     if ($activeQueryIndex !== null) {
-      $activityFilters[$activeQueryIndex] = $filter;
+      $filters[$activeQueryIndex] = $filter;
       $activeQueryIndex = null;
     } else {
-      const newIndex = $activityFilters.length;
-      $activityFilters = [...$activityFilters, $filter];
+      const newIndex = $filters.length;
+      $filters = [...$filters, $filter];
       chipOpenIndex.set(newIndex);
     }
     filter.set(createFilter());
@@ -62,6 +79,6 @@
 </script>
 
 <div class="flex shrink flex-wrap items-center justify-start gap-2">
-  <ActivityDropdownFilterList />
-  <ActivitySearchAttributeMenu />
+  <DropdownFilterList {filters} {statusAttribute} />
+  <SearchAttributeMenu {options} {filters} {statusAttribute} />
 </div>
diff --git a/src/lib/components/standalone-activities/activities-summary-filter-bar/manual-query.svelte b/src/lib/components/shared-search-attribute-filter/manual-query.svelte
similarity index 75%
rename from src/lib/components/standalone-activities/activities-summary-filter-bar/manual-query.svelte
rename to src/lib/components/shared-search-attribute-filter/manual-query.svelte
index 1221aa6f23..701649a394 100644
--- a/src/lib/components/standalone-activities/activities-summary-filter-bar/manual-query.svelte
+++ b/src/lib/components/shared-search-attribute-filter/manual-query.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Writable } from 'svelte/store';
   import { fade, slide } from 'svelte/transition';
 
   import { page } from '$app/state';
@@ -6,14 +7,21 @@
   import Button from '$lib/holocene/button.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { activitiesQuery, activityRefresh } from '$lib/stores/activities';
-  import { activityFilters } from '$lib/stores/filters';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
   import { currentPageKey } from '$lib/stores/pagination';
   import { searchAttributes } from '$lib/stores/search-attributes';
   import { toListWorkflowFilters } from '$lib/utilities/query/to-list-workflow-filters';
   import { MAX_QUERY_LENGTH } from '$lib/utilities/request-from-api';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
+  interface Props {
+    filters: Writable<SearchAttributeFilter[]>;
+    id: string;
+    onSearch?: (query: string) => void;
+  }
+
+  let { filters, id, onSearch }: Props = $props();
+
   let manualSearchString = $state('');
 
   const query = $derived(page.url.searchParams.get('query') ?? '');
@@ -26,23 +34,19 @@
     setManualString(query);
   });
 
-  const onSearch = () => {
+  const handleSearch = () => {
     if (!manualSearchString) {
-      $activityFilters = [];
-      $activitiesQuery = '';
+      $filters = [];
     } else {
       try {
-        $activityFilters = toListWorkflowFilters(
-          manualSearchString,
-          $searchAttributes,
-        );
+        $filters = toListWorkflowFilters(manualSearchString, $searchAttributes);
       } catch (e) {
         console.error(e);
       }
     }
 
     if (manualSearchString && manualSearchString === query) {
-      $activityRefresh = Date.now();
+      onSearch?.(manualSearchString);
     } else {
       updateQueryParameters({
         url: page.url,
@@ -55,12 +59,17 @@
   };
 
   function handleClearInput() {
-    onSearch();
+    handleSearch();
   }
 </script>
 
 <div class="w-full border border-t-0 border-subtle" in:fade>
-  <form onsubmit={onSearch} class="flex gap-0" transition:slide role="search">
+  <form
+    onsubmit={handleSearch}
+    class="flex gap-0"
+    transition:slide
+    role="search"
+  >
     <Input
       id="query"
       type="search"
@@ -78,10 +87,10 @@
       maxLength={MAX_QUERY_LENGTH}
       hideCount={!manualSearchString ||
         manualSearchString.length < MAX_QUERY_LENGTH}
-      data-testid="activity-manual-search-input"
+      data-testid="{id}-manual-search-input"
     />
     <Button
-      data-testid="activity-manual-search-button"
+      data-testid="{id}-manual-search-button"
       variant="ghost"
       type="submit"
     >
diff --git a/src/lib/components/standalone-activities/activities-summary-filter-bar/search-attribute-menu.svelte b/src/lib/components/shared-search-attribute-filter/search-attribute-menu.svelte
similarity index 74%
rename from src/lib/components/standalone-activities/activities-summary-filter-bar/search-attribute-menu.svelte
rename to src/lib/components/shared-search-attribute-filter/search-attribute-menu.svelte
index ca2a4a92c0..a2e1bc69f3 100644
--- a/src/lib/components/standalone-activities/activities-summary-filter-bar/search-attribute-menu.svelte
+++ b/src/lib/components/shared-search-attribute-filter/search-attribute-menu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { writable } from 'svelte/store';
+  import { writable, type Writable } from 'svelte/store';
 
   import { getContext } from 'svelte';
 
@@ -14,13 +14,12 @@
     MenuItem,
   } from '$lib/holocene/menu';
   import { translate } from '$lib/i18n/translate';
-  import { activityFilters } from '$lib/stores/filters';
-  import { activitySearchAttributeOptions } from '$lib/stores/search-attributes';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
+  import type { SearchAttributeOption } from '$lib/stores/search-attributes';
   import {
     SEARCH_ATTRIBUTE_TYPE,
     type SearchAttributeType,
   } from '$lib/types/workflows';
-  import { isStatusFilter } from '$lib/utilities/query/search-attribute-filter';
   import {
     createFilter,
     updateQueryParamsFromFilter,
@@ -28,15 +27,23 @@
   import { MAX_QUERY_LENGTH } from '$lib/utilities/request-from-api';
 
   import {
-    ACTIVITY_FILTER_CONTEXT,
-    type ActivityFilterContext,
+    SEARCH_ATTRIBUTE_FILTER_CONTEXT,
+    type SearchAttributeFilterContext,
   } from './filter.svelte';
 
+  interface Props {
+    options: SearchAttributeOption[];
+    filters: Writable<SearchAttributeFilter[]>;
+    statusAttribute?: string;
+  }
+
+  let { options, filters, statusAttribute }: Props = $props();
+
   const query = $derived(page.url.searchParams.get('query') ?? '');
   let searchAttributeValue = $state('');
 
-  const { filter, activeQueryIndex, handleSubmit } =
-    getContext<ActivityFilterContext>(ACTIVITY_FILTER_CONTEXT);
+  const { filter, activeQueryIndex, handleSubmit, id } =
+    getContext<SearchAttributeFilterContext>(SEARCH_ATTRIBUTE_FILTER_CONTEXT);
 
   const open = writable(false);
 
@@ -76,8 +83,8 @@
 
   const filteredOptions = $derived(
     !searchAttributeValue
-      ? $activitySearchAttributeOptions
-      : $activitySearchAttributeOptions.filter((option) =>
+      ? options
+      : options.filter((option) =>
           option.value
             .toLowerCase()
             .includes(searchAttributeValue.toLowerCase()),
@@ -85,8 +92,8 @@
   );
 
   function clearAllFilters() {
-    $activityFilters = [];
-    updateQueryParamsFromFilter(page.url, $activityFilters, true);
+    $filters = [];
+    updateQueryParamsFromFilter(page.url, $filters, true);
     $activeQueryIndex = null;
     $filter = createFilter();
   }
@@ -94,8 +101,8 @@
 
 <MenuContainer {open}>
   <MenuButton
-    id="activity-search-attribute-filter-button"
-    controls="activity-search-attribute-menu"
+    id="{id}-search-attribute-filter-button"
+    controls="{id}-search-attribute-menu"
     leadingIcon="add"
     variant="secondary"
     data-testid="add-filter-button"
@@ -106,18 +113,18 @@
   >
     Add Filter
   </MenuButton>
-  <Menu id="activity-search-attribute-menu">
+  <Menu id="{id}-search-attribute-menu">
     <MenuItem
       class="p-0"
       hoverable={false}
       onclick={() => {
-        document.getElementById('activity-filter-search')?.focus();
+        document.getElementById(`${id}-filter-search`)?.focus();
       }}
     >
       <Input
         label={translate('common.search')}
         labelHidden
-        id="activity-filter-search"
+        id="{id}-filter-search"
         noBorder
         bind:value={searchAttributeValue}
         icon="search"
@@ -132,8 +139,9 @@
         onclick={() => {
           handleNewQuery(value, type);
         }}
-        disabled={value === 'ExecutionStatus' &&
-          !!$activityFilters.find((f) => isStatusFilter(f))}
+        disabled={Boolean(statusAttribute) &&
+          value === statusAttribute &&
+          !!$filters.find((f) => f.attribute === statusAttribute)}
       >
         <div>
           <p class="leading-3">{label}</p>
@@ -147,7 +155,7 @@
     {/each}
   </Menu>
 </MenuContainer>
-{#if $activityFilters.length > 0}
+{#if $filters.length > 0}
   <Button
     variant="ghost"
     size="xs"
diff --git a/src/lib/components/shared-search-attribute-filter/status-filter-chip.svelte b/src/lib/components/shared-search-attribute-filter/status-filter-chip.svelte
new file mode 100644
index 0000000000..90aed4bbd7
--- /dev/null
+++ b/src/lib/components/shared-search-attribute-filter/status-filter-chip.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import WorkerStatus from '$lib/components/workers/worker-status.svelte';
+  import WorkflowStatus from '$lib/components/workflow-status.svelte';
+  import Checkbox from '$lib/holocene/checkbox.svelte';
+  import { Menu, MenuButton, MenuContainer } from '$lib/holocene/menu';
+  import MenuItem from '$lib/holocene/menu/menu-item.svelte';
+  import Translate from '$lib/i18n/translate.svelte';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
+  import type {
+    WorkerFilters,
+    WorkerStatus as WorkerStatusType,
+  } from '$lib/models/worker-status';
+  import { workerStatusFilters } from '$lib/models/worker-status';
+  import {
+    type WorkflowFilters,
+    workflowStatusFilters,
+  } from '$lib/models/workflow-status';
+  import type { WorkflowStatus as WorkflowStatusType } from '$lib/types/workflows';
+  import { createFilter } from '$lib/utilities/query/to-list-workflow-filters.js';
+
+  import type { StatusAttribute } from './types.ts';
+
+  interface Props {
+    attribute: StatusAttribute;
+    filters: SearchAttributeFilter[];
+    onUpdate: (updatedFilter: SearchAttributeFilter[]) => void;
+    index?: number;
+    openIndex?: number | null;
+  }
+
+  let {
+    attribute,
+    filters,
+    onUpdate,
+    index = 0,
+    openIndex = null,
+  }: Props = $props();
+
+  const statuses: Record<
+    StatusAttribute,
+    { label: string; filters: WorkflowFilters | WorkerFilters }
+  > = {
+    ExecutionStatus: {
+      label: 'Execution Status',
+      filters: workflowStatusFilters,
+    },
+    WorkerStatus: {
+      label: 'Worker Status',
+      filters: workerStatusFilters,
+    },
+  };
+
+  const open = writable(false);
+  let localFilters = $state([...filters]);
+
+  const controlsId = $derived(
+    `dropdown-filter-chip-${attribute.toLowerCase()}`,
+  );
+
+  function handleStatusSelect(status: string | null) {
+    if (localFilters.find((f) => f.value === status)) {
+      localFilters = localFilters.filter((f) => f.value !== status);
+      onUpdate(localFilters);
+      return;
+    }
+
+    if (status === 'All') {
+      localFilters = [];
+      onUpdate(localFilters);
+      return;
+    }
+
+    if (localFilters.length === 1 && localFilters[0].value === '') {
+      localFilters = [
+        createFilter({
+          attribute,
+          type: 'Keyword',
+          value: status,
+          conditional: '=',
+        }),
+      ];
+    } else {
+      localFilters = [
+        ...localFilters,
+        createFilter({
+          attribute,
+          parenthesis: localFilters.length ? ')' : '',
+          type: 'Keyword',
+          value: status,
+          conditional: '=',
+        }),
+      ];
+    }
+
+    if (localFilters.length > 1) {
+      localFilters[0].parenthesis = '(';
+      localFilters[localFilters.length - 2].operator = 'OR';
+    }
+
+    onUpdate(localFilters);
+  }
+
+  $effect(() => {
+    if (openIndex === index) {
+      $open = true;
+    }
+  });
+
+  $effect(() => {
+    if (!$open) {
+      localFilters = [...filters];
+    }
+  });
+</script>
+
+<MenuContainer {open}>
+  <MenuButton size="xs" controls={controlsId} hasIndicator class="bg-secondary">
+    {attribute} =<span class="pl-1 text-brand"
+      >{filters.map((f) => f.value).join(', ')}</span
+    >
+  </MenuButton>
+
+  <Menu id={controlsId} class="max-h-fit w-80 max-w-fit p-4" keepOpen>
+    <div class="space-y-2">
+      <div class="flex items-center justify-between">
+        <h3 class="text-sm font-medium">
+          Filter by {statuses[attribute].label}
+        </h3>
+      </div>
+
+      {#each statuses[attribute].filters as status (status)}
+        {@const checked =
+          localFilters.some((filter) => filter.value === status) ||
+          (localFilters.length === 1 &&
+            !localFilters[0].value &&
+            status === 'All')}
+        <MenuItem
+          data-testid={`status-dropdown-filter-chip-${status}`}
+          onclick={() => handleStatusSelect(status)}
+        >
+          {#snippet leading()}
+            <Checkbox
+              on:change={() => handleStatusSelect(status)}
+              {checked}
+              label={status ?? undefined}
+              labelHidden
+            />
+          {/snippet}
+          {#if status === 'All'}
+            <Translate key="workflows.all-statuses" />
+          {:else if attribute === 'ExecutionStatus'}
+            <WorkflowStatus status={status as WorkflowStatusType} />
+          {:else if attribute === 'WorkerStatus'}
+            <WorkerStatus status={status as WorkerStatusType} />
+          {/if}
+        </MenuItem>
+      {/each}
+    </div>
+  </Menu>
+</MenuContainer>
diff --git a/src/lib/components/shared-search-attribute-filter/types.ts b/src/lib/components/shared-search-attribute-filter/types.ts
new file mode 100644
index 0000000000..4757d040fc
--- /dev/null
+++ b/src/lib/components/shared-search-attribute-filter/types.ts
@@ -0,0 +1 @@
+export type StatusAttribute = 'ExecutionStatus' | 'WorkerStatus';
diff --git a/src/lib/components/standalone-activities/activities-summary-filter-bar/dropdown-filter-list.svelte b/src/lib/components/standalone-activities/activities-summary-filter-bar/dropdown-filter-list.svelte
deleted file mode 100644
index be86a113b9..0000000000
--- a/src/lib/components/standalone-activities/activities-summary-filter-bar/dropdown-filter-list.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-
-  import { page } from '$app/state';
-
-  import DropdownFilterChip from '$lib/components/workflow/filter-bar/dropdown-filter-chip.svelte';
-  import StatusDropdownFilterChip from '$lib/components/workflow/filter-bar/status-dropdown-filter-chip.svelte';
-  import Button from '$lib/holocene/button.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
-  import { activityFilters } from '$lib/stores/filters';
-  import { isStatusFilter } from '$lib/utilities/query/search-attribute-filter';
-  import { createFilter } from '$lib/utilities/query/to-list-workflow-filters';
-  import { updateQueryParamsFromFilter } from '$lib/utilities/query/to-list-workflow-filters';
-
-  import {
-    ACTIVITY_FILTER_CONTEXT,
-    type ActivityFilterContext,
-  } from './filter.svelte';
-
-  const { filter, activeQueryIndex, chipOpenIndex } =
-    getContext<ActivityFilterContext>(ACTIVITY_FILTER_CONTEXT);
-
-  let totalFiltersInView = $state(10);
-
-  const firstExecutionStatusIndex = $derived(
-    $activityFilters.findIndex((filter) => isStatusFilter(filter)),
-  );
-  const visibleFilters = $derived(
-    $activityFilters.slice(0, totalFiltersInView),
-  );
-  const executionStatusFilters = $derived(
-    $activityFilters.filter((filter) => filter.attribute === 'ExecutionStatus'),
-  );
-  const nonStatusFilters = $derived(
-    $activityFilters.filter((filter) => !isStatusFilter(filter)),
-  );
-  const hasMoreFilters = $derived(totalFiltersInView < $activityFilters.length);
-
-  function updateFilter(index: number, updatedFilter: SearchAttributeFilter) {
-    const next = [...$activityFilters];
-    next[index] = updatedFilter;
-    $activityFilters = next;
-    updateQueryParamsFromFilter(page.url, $activityFilters);
-  }
-
-  function updateStatusFilters(
-    index: number,
-    updatedFilters: SearchAttributeFilter[],
-  ) {
-    if (updatedFilters.length === 0) {
-      $activityFilters = nonStatusFilters;
-      updateQueryParamsFromFilter(page.url, $activityFilters);
-    } else {
-      const next = [...$activityFilters];
-      next.splice(index, executionStatusFilters.length, ...updatedFilters);
-      $activityFilters = next;
-      updateQueryParamsFromFilter(page.url, $activityFilters);
-    }
-  }
-
-  function removeFilter(index: number) {
-    const next = [...$activityFilters];
-    next.splice(index, 1);
-    $activityFilters = next;
-    updateQueryParamsFromFilter(page.url, $activityFilters);
-
-    if (index === $activityFilters.length && $activityFilters.length > 0) {
-      const previousQuery = $activityFilters[$activityFilters.length - 1];
-      if (previousQuery) {
-        previousQuery.operator = '';
-      }
-    }
-
-    if (index === $activeQueryIndex) {
-      $activeQueryIndex = null;
-      $filter = createFilter();
-    } else if (index < $activeQueryIndex) {
-      $activeQueryIndex -= 1;
-    }
-  }
-
-  function viewMoreFilters() {
-    if (hasMoreFilters) {
-      totalFiltersInView += 10;
-    }
-  }
-</script>
-
-{#if visibleFilters.length > 0}
-  <div class="flex flex-wrap items-center gap-2">
-    {#each visibleFilters as activityFilter, i (activityFilter.id)}
-      {#if isStatusFilter(activityFilter) && i === firstExecutionStatusIndex}
-        <StatusDropdownFilterChip
-          filters={executionStatusFilters}
-          index={i}
-          openIndex={$chipOpenIndex}
-          onUpdate={(statusFilters) => updateStatusFilters(i, statusFilters)}
-        />
-      {:else if !isStatusFilter(activityFilter) && activityFilter.attribute}
-        <DropdownFilterChip
-          filter={activityFilter}
-          index={i}
-          openIndex={$chipOpenIndex}
-          onUpdate={(updatedFilter) => updateFilter(i, updatedFilter)}
-          onRemove={() => removeFilter(i)}
-        />
-      {/if}
-    {/each}
-
-    {#if hasMoreFilters}
-      <Button variant="secondary" size="xs" on:click={viewMoreFilters}>
-        {translate('common.view-more')}
-      </Button>
-    {/if}
-  </div>
-{/if}
diff --git a/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte b/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
index d46b7a3e58..c0677a53de 100644
--- a/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
+++ b/src/lib/components/standalone-activities/activities-summary-filter-bar/filter-bar.svelte
@@ -1,40 +1,19 @@
 <script lang="ts">
-  import Button from '$lib/holocene/button.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import FilterBar from '$lib/components/shared-search-attribute-filter/filter-bar.svelte';
+  import { activitiesQuery, activityRefresh } from '$lib/stores/activities';
+  import { activityFilters } from '$lib/stores/filters';
+  import { activitySearchAttributeOptions } from '$lib/stores/search-attributes';
 
-  import ActivityFilter from './filter.svelte';
-  import ActivityManualQuery from './manual-query.svelte';
-
-  let viewManualQuery = $state(false);
+  function onManualSearch(query: string) {
+    $activitiesQuery = query;
+    $activityRefresh = Date.now();
+  }
 </script>
 
-{#snippet actionToggleButtons()}
-  <div class="flex items-center gap-1">
-    <Tooltip text={viewManualQuery ? 'Hide raw query' : 'View raw query'} left>
-      <Button
-        variant="ghost"
-        size="xs"
-        leadingIcon="json"
-        active={viewManualQuery}
-        data-testid="toggle-manual-query"
-        on:click={() => (viewManualQuery = !viewManualQuery)}
-      />
-    </Tooltip>
-  </div>
-{/snippet}
-
-<div>
-  <div
-    class="flex w-full flex-wrap items-center justify-between gap-2 border border-subtle bg-primary p-1.5"
-  >
-    <div class="flex grow items-center justify-start gap-4 px-2">
-      <Icon name="filter-lines" class="text-primary-text h-4 w-4 shrink-0" />
-      <ActivityFilter />
-    </div>
-    {@render actionToggleButtons()}
-  </div>
-  {#if viewManualQuery}
-    <ActivityManualQuery />
-  {/if}
-</div>
+<FilterBar
+  filters={activityFilters}
+  options={$activitySearchAttributeOptions}
+  id="activity"
+  statusAttribute="ExecutionStatus"
+  {onManualSearch}
+/>
diff --git a/src/lib/components/standalone-activities/standalone-activities-disabled.svelte b/src/lib/components/standalone-activities/standalone-activities-disabled.svelte
index 838cf7b673..71d3a71648 100644
--- a/src/lib/components/standalone-activities/standalone-activities-disabled.svelte
+++ b/src/lib/components/standalone-activities/standalone-activities-disabled.svelte
@@ -36,6 +36,7 @@ activity.enableStandalone:
 <Alert
   title={translate('standalone-activities.standalone-activities-disabled')}
   intent="info"
+  class="max-w-4xl"
 />
 <div class="flex max-w-4xl flex-col gap-2">
   <p>{translate('standalone-activities.standalone-activities-enablement')}</p>
diff --git a/src/lib/components/worker-table.svelte b/src/lib/components/worker-table.svelte
index 52737720ca..2af0455b96 100644
--- a/src/lib/components/worker-table.svelte
+++ b/src/lib/components/worker-table.svelte
@@ -178,7 +178,7 @@
   {:else}
     <tr class="w-full">
       <td colspan="7">
-        <EmptyState title={translate('workflows.workers-empty-state')} />
+        <EmptyState title={translate('workers.empty-state-title')} />
       </td>
     </tr>
   {/each}
diff --git a/src/lib/components/workers/no-workers-polling-alert.svelte b/src/lib/components/workers/no-workers-polling-alert.svelte
new file mode 100644
index 0000000000..691d68ce66
--- /dev/null
+++ b/src/lib/components/workers/no-workers-polling-alert.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  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 { workflowRun } from '$lib/stores/workflow-run';
+  import { isRunningWithNoWorkers } from '$lib/utilities/is-running-with-no-workers';
+
+  const { workflow } = $derived($workflowRun);
+  const runningWithNoWorkers = $derived(isRunningWithNoWorkers($workflowRun));
+</script>
+
+<Alert
+  icon="warning"
+  intent="warning"
+  title={translate('workflows.workflow-error-no-workers-title')}
+  class="max-w-screen-lg xl:w-2/3"
+  hidden={!runningWithNoWorkers}
+>
+  {translate('workflows.workflow-error-no-workers-description', {
+    taskQueue: workflow?.taskQueue ?? '',
+  })}
+  {translate('workflows.workers-alert-description')}
+  <Link
+    href="https://docs.temporal.io/develop/worker-performance"
+    newTab
+    class="mt-2 flex items-center gap-1"
+  >
+    {translate('workers.troubleshooting-workers-link')}
+    <Icon name="arrow-right" />
+  </Link>
+</Alert>
diff --git a/src/lib/components/workers/worker-details/skeleton.svelte b/src/lib/components/workers/worker-details/skeleton.svelte
new file mode 100644
index 0000000000..20ec1912c0
--- /dev/null
+++ b/src/lib/components/workers/worker-details/skeleton.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  import Card from '$lib/holocene/card.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Skeleton from '$lib/holocene/skeleton/index.svelte';
+  import { translate } from '$lib/i18n/translate';
+
+  interface Props {
+    breadcrumb: Snippet;
+  }
+
+  let { breadcrumb }: Props = $props();
+</script>
+
+<div class="flex items-center gap-2">
+  {@render breadcrumb()}
+  <Icon name="chevron-left" />
+  <Skeleton class="h-5 w-96 rounded-sm" />
+</div>
+
+<section
+  aria-label={translate('workers.worker-details')}
+  class="flex flex-col gap-4"
+>
+  <header
+    class="flex w-full flex-col items-start gap-4 xl:flex-row xl:items-center"
+  >
+    <Skeleton class="h-5 w-20 rounded-sm" />
+    <Skeleton class="h-8 w-96" />
+  </header>
+
+  <div class="flex gap-8">
+    {#each Array(3) as _, i (i)}
+      <div class="flex flex-1 flex-col gap-3">
+        <Skeleton class="h-4 w-24" />
+        <Skeleton class="h-4 w-40" />
+        <Skeleton class="h-4 w-24" />
+        <Skeleton class="h-4 w-40" />
+      </div>
+    {/each}
+  </div>
+
+  <div class="flex flex-col gap-4 lg:flex-row">
+    <section class="flex flex-1 flex-col gap-4">
+      {#each Array(4) as _, i (i)}
+        <Card>
+          <Skeleton class="mb-4 h-5 w-24" />
+          <div class="flex flex-wrap gap-x-32 gap-y-4">
+            <div class="flex flex-col gap-2">
+              <Skeleton class="h-4 w-16" />
+              <Skeleton class="h-8 w-24" />
+              <Skeleton class="h-4 w-32" />
+              <Skeleton class="h-2 w-full" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <Skeleton class="h-4 w-28" />
+              <Skeleton class="h-8 w-20" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <Skeleton class="h-4 w-16" />
+              <Skeleton class="h-8 w-12" />
+              <Skeleton class="h-4 w-36" />
+            </div>
+          </div>
+        </Card>
+      {/each}
+    </section>
+
+    <aside class="flex w-full flex-col gap-4 lg:w-fit">
+      <div>
+        <Card>
+          <Skeleton class="mb-4 h-5 w-20" />
+          <div class="flex flex-col gap-3">
+            <Skeleton class="h-4 w-24" />
+            <Skeleton class="h-4 w-40" />
+            <Skeleton class="h-4 w-24" />
+            <Skeleton class="h-4 w-28" />
+            <Skeleton class="h-4 w-32" />
+            <Skeleton class="h-4 w-36" />
+          </div>
+        </Card>
+        <Card class="flex flex-col gap-2 border-t-0">
+          <div class="flex flex-col gap-2">
+            <div class="flex items-center justify-between">
+              <Skeleton class="h-4 w-24" />
+              <Skeleton class="h-4 w-10" />
+            </div>
+            <Skeleton class="h-2 w-full" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <div class="flex items-center justify-between">
+              <Skeleton class="h-4 w-28" />
+              <Skeleton class="h-4 w-10" />
+            </div>
+            <Skeleton class="h-2 w-full" />
+          </div>
+        </Card>
+      </div>
+
+      <Card>
+        <Skeleton class="mb-4 h-5 w-28" />
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex flex-col gap-2">
+            <Skeleton class="h-8 w-16" />
+            <Skeleton class="h-4 w-20" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <Skeleton class="h-8 w-16" />
+            <Skeleton class="h-4 w-20" />
+          </div>
+        </div>
+      </Card>
+
+      <Card>
+        <Skeleton class="mb-4 h-5 w-24" />
+        <Skeleton class="h-8 w-16" />
+        <Skeleton class="mt-2 h-4 w-28" />
+      </Card>
+    </aside>
+  </div>
+</section>
diff --git a/src/lib/components/workers/worker-details/worker-details.svelte b/src/lib/components/workers/worker-details/worker-details.svelte
new file mode 100644
index 0000000000..a0b542f6a8
--- /dev/null
+++ b/src/lib/components/workers/worker-details/worker-details.svelte
@@ -0,0 +1,419 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  import { page } from '$app/state';
+
+  import DetailListColumn from '$lib/components/detail-list/detail-list-column.svelte';
+  import DetailListLabel from '$lib/components/detail-list/detail-list-label.svelte';
+  import DetailListLinkValue from '$lib/components/detail-list/detail-list-link-value.svelte';
+  import DetailListTextValue from '$lib/components/detail-list/detail-list-text-value.svelte';
+  import DetailListValue from '$lib/components/detail-list/detail-list-value.svelte';
+  import DetailList from '$lib/components/detail-list/detail-list.svelte';
+  import SdkLogo from '$lib/components/lines-and-dots/sdk-logo.svelte';
+  import Timestamp from '$lib/components/timestamp.svelte';
+  import { timestamp } from '$lib/components/timestamp.svelte';
+  import WorkerStatus from '$lib/components/workers/worker-status.svelte';
+  import Alert from '$lib/holocene/alert.svelte';
+  import Badge from '$lib/holocene/badge.svelte';
+  import Card from '$lib/holocene/card.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type {
+    WorkerInfo,
+    WorkerPollerInfo,
+    WorkerSlotsInfo,
+  } from '$lib/types';
+  import { formatSDKName } from '$lib/utilities/get-sdk-version';
+  import { routeForWorkersWithQuery } from '$lib/utilities/route-for';
+  import { toWorkerStatusReadable } from '$lib/utilities/screaming-enums';
+
+  type Props = {
+    breadcrumb: Snippet;
+    worker: WorkerInfo | null | undefined;
+  };
+
+  let { breadcrumb, worker }: Props = $props();
+
+  const { namespace } = $derived(page.params);
+  const heartbeat = $derived(worker?.workerHeartbeat);
+  const status = $derived(toWorkerStatusReadable(heartbeat?.status));
+
+  const totalStickyCacheHit = $derived(heartbeat?.totalStickyCacheHit ?? 0);
+  const totalStickyCacheMiss = $derived(heartbeat?.totalStickyCacheMiss ?? 0);
+  const currentStickyCacheSize = $derived(
+    heartbeat?.currentStickyCacheSize ?? 0,
+  );
+  const isGoSdk = $derived(heartbeat?.sdkName?.startsWith('temporal-go'));
+  const goDependencyPotentiallyMissing = $derived(
+    isGoSdk
+      ? !heartbeat?.hostInfo?.currentHostCpuUsage &&
+          !heartbeat?.hostInfo?.currentHostMemUsage
+      : false,
+  );
+
+  const cacheHitRate = $derived.by(() => {
+    const total = totalStickyCacheHit + totalStickyCacheMiss;
+    if (total === 0) return '0';
+    return ((totalStickyCacheHit / total) * 100).toFixed(1);
+  });
+  const pollSuccessRate = $derived.by(() => {
+    if (!heartbeat?.workflowTaskSlotsInfo?.totalProcessedTasks) return '0';
+    const successCount =
+      heartbeat.workflowTaskSlotsInfo.totalProcessedTasks -
+      (heartbeat.workflowTaskSlotsInfo.totalFailedTasks ?? 0);
+    return (
+      (successCount / heartbeat.workflowTaskSlotsInfo.totalProcessedTasks) *
+      100
+    ).toFixed(1);
+  });
+</script>
+
+<div class="flex items-center gap-2">
+  {@render breadcrumb()}
+  {#if heartbeat?.workerInstanceKey}
+    <Icon name="chevron-left" />
+    {heartbeat.workerInstanceKey}
+  {/if}
+</div>
+
+<section
+  aria-label={translate('workers.worker-details')}
+  class="flex flex-col gap-4"
+>
+  <header
+    class="flex w-full flex-col items-start gap-4 xl:flex-row xl:items-center"
+  >
+    <WorkerStatus {status} />
+    <h1
+      data-testid="worker-instance-key"
+      class="gap-0 overflow-hidden max-sm:text-xl sm:max-md:text-2xl"
+    >
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={heartbeat?.workerInstanceKey ?? ''}
+        clickAllToCopy
+        container-class="w-full"
+        class="overflow-hidden text-ellipsis text-left"
+      />
+    </h1>
+  </header>
+
+  <DetailList aria-label="worker details" rowCount={2}>
+    <DetailListColumn>
+      <DetailListLabel>{translate('workflows.last-heartbeat')}</DetailListLabel>
+      <DetailListTextValue
+        text={heartbeat?.heartbeatTime
+          ? $timestamp(heartbeat?.heartbeatTime)
+          : '-'}
+        tooltipText={$timestamp(heartbeat?.heartbeatTime, {
+          relative: true,
+        })}
+      />
+      <DetailListLabel>{translate('common.start')}</DetailListLabel>
+      <DetailListTextValue
+        text={heartbeat?.startTime ? $timestamp(heartbeat?.startTime) : '-'}
+        tooltipText={$timestamp(heartbeat?.startTime, {
+          relative: true,
+        })}
+      />
+    </DetailListColumn>
+
+    <DetailListColumn>
+      {#if heartbeat?.taskQueue}
+        <DetailListLabel>{translate('common.task-queue')}</DetailListLabel>
+        <DetailListLinkValue
+          copyable
+          copyableText={heartbeat.taskQueue}
+          text={heartbeat.taskQueue}
+          href={routeForWorkersWithQuery({
+            namespace,
+            query: `TaskQueue="${heartbeat.taskQueue}"`,
+          }) ?? ''}
+          iconName="filter"
+        />
+      {/if}
+      <DetailListLabel>{translate('workers.sdk')}</DetailListLabel>
+      <DetailListValue>
+        <SdkLogo
+          sdk={formatSDKName(heartbeat?.sdkName)}
+          version={heartbeat?.sdkVersion ?? ''}
+        />
+      </DetailListValue>
+    </DetailListColumn>
+
+    <DetailListColumn>
+      <DetailListLabel>{translate('deployments.build-id')}</DetailListLabel>
+      <DetailListTextValue
+        copyable={!!heartbeat?.deploymentVersion?.buildId}
+        copyableText={heartbeat?.deploymentVersion?.buildId ?? ''}
+        text={heartbeat?.deploymentVersion?.buildId ?? '-'}
+      />
+      <DetailListLabel>{translate('deployments.deployment')}</DetailListLabel>
+      <DetailListTextValue
+        copyable={!!heartbeat?.deploymentVersion?.deploymentName}
+        copyableText={heartbeat?.deploymentVersion?.deploymentName ?? ''}
+        text={heartbeat?.deploymentVersion?.deploymentName ?? '-'}
+      />
+    </DetailListColumn>
+  </DetailList>
+
+  <div class="flex flex-col gap-4 lg:flex-row">
+    <section class="flex flex-1 flex-col gap-4">
+      {@render taskSlotCard(
+        translate('common.workflows-plural', { count: 1 }),
+        heartbeat?.workflowTaskSlotsInfo,
+        heartbeat?.workflowPollerInfo,
+      )}
+      {@render taskSlotCard(
+        translate('common.activities-plural', { count: 1 }),
+        heartbeat?.activityTaskSlotsInfo,
+        heartbeat?.activityPollerInfo,
+      )}
+      {@render taskSlotCard(
+        translate('workers.nexus-tasks'),
+        heartbeat?.nexusTaskSlotsInfo,
+        heartbeat?.nexusPollerInfo,
+      )}
+      {@render taskSlotCard(
+        translate('workers.local-activities'),
+        heartbeat?.localActivitySlotsInfo,
+        null,
+      )}
+    </section>
+
+    <aside class="flex w-full flex-col gap-4 lg:w-fit">
+      {@render hostInfo()}
+      {@render workflowCache()}
+      {@render diagnostics()}
+    </aside>
+  </div>
+</section>
+
+{#snippet taskSlotCard(
+  title: string,
+  slots: WorkerSlotsInfo | null | undefined,
+  poller: WorkerPollerInfo | null | undefined,
+)}
+  <Card>
+    <div class="mb-4 flex items-center gap-2">
+      <h3 class="text-base font-medium">{title}</h3>
+      {#if slots?.slotSupplierKind}
+        <Badge type="ghost" class="text-xs">{slots.slotSupplierKind}</Badge>
+      {/if}
+    </div>
+
+    <dl class="flex flex-wrap gap-x-32 gap-y-4">
+      <div>
+        <dt
+          id="slots-{title}"
+          class="flex h-6 items-center text-sm text-secondary"
+        >
+          {translate('workers.slots')}
+        </dt>
+        <dd class="mb-2">
+          <div class="flex items-baseline gap-12">
+            <p class="font-mono text-2xl font-semibold text-brand">
+              {slots?.currentUsedSlots ?? 0}
+            </p>
+            <p class="font-mono text-2xl font-semibold">
+              {#if slots?.currentAvailableSlots}
+                {slots.currentAvailableSlots - (slots?.currentUsedSlots ?? 0)}
+              {:else}
+                -
+              {/if}
+            </p>
+          </div>
+          <div class="flex gap-8 text-xs text-secondary">
+            <p>{translate('workers.used')}</p>
+            <p>
+              {#if slots?.currentAvailableSlots}
+                {translate('workers.available-out-of', {
+                  count: slots.currentAvailableSlots,
+                })}
+              {:else}
+                {translate('workers.none-available')}
+              {/if}
+            </p>
+          </div>
+        </dd>
+        {@render meterBar(
+          `slots-${title}`,
+          slots?.currentUsedSlots ?? 0,
+          slots?.currentAvailableSlots
+            ? slots.currentAvailableSlots
+            : (slots?.currentUsedSlots ?? 0),
+        )}
+      </div>
+
+      <div>
+        <dt class="flex h-6 items-center text-sm text-secondary">
+          {translate('workers.tasks-processed')}
+        </dt>
+        <dd class="font-mono text-2xl font-semibold">
+          {(slots?.totalProcessedTasks ?? 0).toLocaleString()}
+        </dd>
+      </div>
+
+      {#if poller}
+        <div>
+          <dt class="flex h-6 items-center gap-2 text-sm text-secondary">
+            {translate('workers.poller')}
+            <Badge type="ghost" class="text-xs">
+              {poller.isAutoscaling ? 'Autoscaling' : 'Manual'}
+            </Badge>
+          </dt>
+          <dd>
+            <p class="font-mono text-2xl font-semibold">
+              {poller.currentPollers ?? 0}
+            </p>
+            <p class="text-xs text-secondary">
+              {#if poller.lastSuccessfulPollTime}
+                {translate('workers.last-poll')}
+                <Timestamp dateTime={poller.lastSuccessfulPollTime} as="span" />
+              {:else}
+                {translate('workers.no-activity')}
+              {/if}
+            </p>
+          </dd>
+        </div>
+      {/if}
+    </dl>
+  </Card>
+{/snippet}
+
+{#snippet meterBar(labelledby: string, value: number, maxValue: number = 100)}
+  <div
+    role="meter"
+    aria-labelledby={labelledby}
+    aria-valuenow={value}
+    aria-valuemin={0}
+    aria-valuemax={maxValue}
+    class="relative h-2 w-full overflow-hidden rounded bg-indigo-100"
+  >
+    <div
+      class="absolute left-0 h-full bg-indigo-600"
+      style="width:{maxValue > 0
+        ? Math.min((value / maxValue) * 100, 100)
+        : 0}%;"
+    ></div>
+  </div>
+{/snippet}
+
+{#snippet goDependencyWarning()}
+  <Alert
+    class="max-w-96"
+    intent="warning"
+    title={translate('workers.go-dependency-warning')}
+  >
+    <p class="mb-1">{translate('workers.go-dependency-warning-description')}</p>
+    <!-- TODO: Add link when documentation is available -->
+    <!-- <Link icon="external-link" href="" newTab
+      >{translate('workers.go-dependency-warning-link')}</Link
+    > -->
+  </Alert>
+{/snippet}
+
+{#snippet hostUsage()}
+  <Card class="flex flex-col gap-2 border-t-0">
+    <div>
+      <div class="mb-1 flex items-center justify-between text-sm">
+        <span id="cpu-label" class="flex items-center gap-1 font-semibold">
+          <Icon name="microchip" class="h-3 w-3 text-secondary" />
+          {translate('workers.cpu-usage')}
+        </span>
+        <span
+          >{heartbeat?.hostInfo?.currentHostCpuUsage?.toFixed(0) ?? '0'}%</span
+        >
+      </div>
+      {@render meterBar(
+        'cpu-label',
+        heartbeat?.hostInfo?.currentHostCpuUsage ?? 0,
+      )}
+    </div>
+    <div>
+      <div class="mb-1 flex items-center justify-between text-sm">
+        <span id="memory-label" class="flex items-center gap-1 font-semibold">
+          <Icon name="server" class="h-3 w-3 text-secondary" />
+          {translate('workers.memory-usage')}
+        </span>
+        <span
+          >{heartbeat?.hostInfo?.currentHostMemUsage?.toFixed(0) ?? '0'}%</span
+        >
+      </div>
+      {@render meterBar(
+        'memory-label',
+        heartbeat?.hostInfo?.currentHostMemUsage ?? 0,
+      )}
+    </div>
+    {#if goDependencyPotentiallyMissing}
+      {@render goDependencyWarning()}
+    {/if}
+  </Card>
+{/snippet}
+
+{#snippet hostInfo()}
+  <div>
+    <Card>
+      <h3 class="mb-4 text-base font-medium">
+        {translate('workers.host-info')}
+      </h3>
+      <dl>
+        <dt class="text-secondary">{translate('workers.host-name')}</dt>
+        <dd class="select-all">{heartbeat?.hostInfo?.hostName ?? '-'}</dd>
+
+        <dt class="mt-2 text-secondary">{translate('workers.process-id')}</dt>
+        <dd class="select-all">{heartbeat?.hostInfo?.processId ?? '-'}</dd>
+
+        <dt class="mt-2 text-secondary">
+          {translate('workers.worker-grouping')}
+        </dt>
+        <dd class="select-all">
+          {heartbeat?.hostInfo?.workerGroupingKey ?? '-'}
+        </dd>
+      </dl>
+    </Card>
+    {@render hostUsage()}
+  </div>
+{/snippet}
+
+{#snippet workflowCache()}
+  <Card>
+    <h3 class="mb-4 text-base font-medium">
+      {translate('workers.workflow-cache')}
+    </h3>
+    <dl class="grid grid-cols-2 gap-4">
+      <div>
+        <dd class="font-mono text-2xl font-semibold">
+          {currentStickyCacheSize.toLocaleString()}
+        </dd>
+        <dt class="text-sm text-secondary">
+          {translate('workers.cache-size')}
+        </dt>
+      </div>
+      <div>
+        <dd class="font-mono text-2xl font-semibold">
+          {cacheHitRate}%
+        </dd>
+        <dt class="text-sm text-secondary">
+          {translate('workers.cache-hits')}
+        </dt>
+      </div>
+    </dl>
+  </Card>
+{/snippet}
+
+{#snippet diagnostics()}
+  <Card>
+    <h3 class="mb-4 text-base font-medium">
+      {translate('workers.diagnostics')}
+    </h3>
+    <dl>
+      <dd class="font-mono text-2xl">{pollSuccessRate}%</dd>
+      <dt class="text-sm text-secondary">
+        {translate('workers.poll-success-rate')}
+      </dt>
+    </dl>
+  </Card>
+{/snippet}
diff --git a/src/lib/components/workers/worker-heartbeats-disabled.svelte b/src/lib/components/workers/worker-heartbeats-disabled.svelte
new file mode 100644
index 0000000000..61dce95d99
--- /dev/null
+++ b/src/lib/components/workers/worker-heartbeats-disabled.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Alert from '$lib/holocene/alert.svelte';
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
+
+  const content = `frontend.workerHeartbeatsEnabled:
+  - value: true`;
+</script>
+
+<Alert
+  title={translate('workers.worker-heartbeats-disabled')}
+  intent="info"
+  class="max-w-4xl"
+/>
+<div class="flex max-w-4xl flex-col gap-2">
+  <p>{translate('workers.worker-heartbeats-enablement')}</p>
+  <CodeBlock copyable {content} />
+</div>
diff --git a/src/lib/components/workers/worker-status.svelte b/src/lib/components/workers/worker-status.svelte
new file mode 100644
index 0000000000..d35e9d1490
--- /dev/null
+++ b/src/lib/components/workers/worker-status.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { cva } from 'class-variance-authority';
+
+  import HeartBeat from '$lib/components/heart-beat-indicator.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { WorkerStatus } from '$lib/models/worker-status';
+
+  interface Props {
+    delay?: number;
+    status?: WorkerStatus;
+  }
+
+  let { delay = 0, status = 'Running' }: Props = $props();
+
+  const label: Record<WorkerStatus, string> = {
+    Running: translate('workflows.running'),
+    ShuttingDown: translate('workers.shutting-down'),
+    Unspecified: translate('events.event-classification.unspecified'),
+  };
+
+  const workerStatus = cva(
+    [
+      'flex items-center rounded-sm px-1 py-0.5 h-5 whitespace-nowrap text-black gap-1 font-medium',
+    ],
+    {
+      variants: {
+        status: {
+          Unspecified: 'bg-slate-100',
+          Running: 'bg-blue-300',
+          ShuttingDown: 'bg-yellow-200',
+        },
+      },
+    },
+  );
+
+  const isRunning = $derived(status === 'Running');
+</script>
+
+<div class="relative flex items-center gap-0 text-center text-xs leading-4">
+  <span class={workerStatus({ status })}>
+    {label[status]}
+    {#if isRunning}
+      <HeartBeat {delay} />
+    {/if}
+  </span>
+</div>
diff --git a/src/lib/components/workers/workers-table/task-queue-workers-table.svelte b/src/lib/components/workers/workers-table/task-queue-workers-table.svelte
new file mode 100644
index 0000000000..94c8fcb234
--- /dev/null
+++ b/src/lib/components/workers/workers-table/task-queue-workers-table.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import FallbackWorkersTable from '$lib/components/worker-table.svelte';
+  import Alert from '$lib/holocene/alert.svelte';
+  import Skeleton from '$lib/holocene/skeleton/index.svelte';
+  import SkeletonTable from '$lib/holocene/skeleton/table.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { getPollers } from '$lib/services/pollers-service';
+  import { fetchPaginatedWorkers } from '$lib/services/worker-service';
+
+  import WorkersTable from './workers-table.svelte';
+
+  interface Props {
+    namespace: string;
+    useFallback?: boolean;
+    searchAttributes?: Record<string, string>;
+    taskQueue: string;
+  }
+
+  let {
+    namespace,
+    useFallback = false,
+    searchAttributes,
+    taskQueue,
+  }: Props = $props();
+
+  const onFetch = $derived(() =>
+    fetchPaginatedWorkers({ namespace, query: `TaskQueue="${taskQueue}"` }),
+  );
+</script>
+
+{#snippet fallback()}
+  {#await getPollers({ queue: taskQueue, namespace })}
+    <Skeleton class="h-8 w-24 rounded-none" />
+    <SkeletonTable rows={5} />
+  {:then workers}
+    <FallbackWorkersTable {workers} {searchAttributes} />
+  {:catch error}
+    <Alert
+      intent="error"
+      title={error?.message ?? translate('workers.error-message-fetching')}
+      class="max-w-screen-lg xl:w-2/3"
+    />
+  {/await}
+{/snippet}
+
+{#if useFallback}
+  {@render fallback()}
+{:else}
+  <WorkersTable {namespace} {onFetch} />
+{/if}
diff --git a/src/lib/components/workers/workers-table/worker-heartbeats-sdk-alert.svelte b/src/lib/components/workers/workers-table/worker-heartbeats-sdk-alert.svelte
new file mode 100644
index 0000000000..40305289ce
--- /dev/null
+++ b/src/lib/components/workers/workers-table/worker-heartbeats-sdk-alert.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import SdkLogo from '$lib/components/lines-and-dots/sdk-logo.svelte';
+  import Alert from '$lib/holocene/alert.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { sdkInfo } from '$lib/stores/events';
+
+  const supportedVersions = [
+    {
+      sdk: 'Go',
+      version: '1.41.0',
+      href: 'https://github.com/temporalio/sdk-go/releases/tag/v1.41.0',
+    },
+    {
+      sdk: 'Python',
+      version: '1.20.0',
+      href: 'https://github.com/temporalio/sdk-python/releases/tag/1.20.0',
+    },
+    {
+      sdk: 'TypeScript',
+      version: '1.14.0',
+      href: 'https://github.com/temporalio/sdk-typescript/releases/tag/v1.14.0',
+    },
+    {
+      sdk: '.NET',
+      version: '1.10.0',
+      href: 'https://github.com/temporalio/sdk-dotnet/releases/tag/1.10.0',
+    },
+    {
+      sdk: 'Ruby',
+      version: '1.1.0',
+      href: 'https://github.com/temporalio/sdk-ruby/releases/tag/v1.1.0',
+    },
+  ];
+  const currentSdk = $derived(
+    supportedVersions.find(({ sdk }) => sdk === $sdkInfo.sdk),
+  );
+</script>
+
+<Alert
+  title={translate('workers.no-worker-heartbeats')}
+  intent="info"
+  class="max-w-screen-lg xl:w-2/3"
+>
+  <div class="mt-2 flex flex-col gap-2">
+    {#if currentSdk}
+      {@const { href, sdk, version } = currentSdk}
+      <p class="flex flex-row gap-1">
+        {translate('workers.worker-heartbeats-sdk-link-preface')}
+        <Link newTab {href}>
+          <SdkLogo {sdk} {version} />
+        </Link>
+        {translate('workers.worker-heartbeats-sdk-link-postface')}
+      </p>
+    {:else}
+      <p>{translate('workers.worker-heartbeats-sdk-list-preface')}</p>
+      {#each supportedVersions as { href, sdk, version } (`${sdk}:${version}`)}
+        <Link newTab {href}>
+          <SdkLogo {sdk} {version} />
+        </Link>
+      {/each}
+    {/if}
+  </div>
+</Alert>
diff --git a/src/lib/components/workers/workers-table/workers-table-cell.svelte b/src/lib/components/workers/workers-table/workers-table-cell.svelte
new file mode 100644
index 0000000000..956da88701
--- /dev/null
+++ b/src/lib/components/workers/workers-table/workers-table-cell.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  import { page } from '$app/state';
+
+  import FilterOrCopyButtons from '$lib/holocene/filter-or-copy-buttons.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { SearchAttributeFilter } from '$lib/models/search-attribute-filters';
+  import { workerFilters } from '$lib/stores/filters';
+  import {
+    createFilter,
+    updateQueryParamsFromFilter,
+  } from '$lib/utilities/query/to-list-workflow-filters';
+
+  interface Props {
+    attribute?: string;
+    copyable?: boolean;
+    value?: string | null;
+    filterable?: boolean;
+    href?: string;
+    children?: Snippet;
+  }
+
+  let {
+    attribute,
+    copyable = true,
+    value,
+    filterable = false,
+    href,
+    children,
+  }: Props = $props();
+
+  const query = $derived(page.url.searchParams.get('query') || '');
+
+  const onRowFilterClick = async () => {
+    const filter = $workerFilters.find((f) => f.attribute === attribute);
+    const getOtherFilters = () =>
+      $workerFilters.filter((f) => f.attribute !== attribute);
+
+    if (!filter || filter.value !== value) {
+      const newFilter: SearchAttributeFilter = createFilter({
+        attribute,
+        value,
+        conditional: '=',
+      });
+      $workerFilters = [...getOtherFilters(), newFilter];
+    } else {
+      $workerFilters = [...getOtherFilters()];
+    }
+
+    updateQueryParamsFromFilter(page.url, $workerFilters);
+  };
+
+  let filterOrCopyButtonsVisible = $state(false);
+  const showFilterOrCopy = () => (filterOrCopyButtonsVisible = true);
+  const hideFilterOrCopy = () => (filterOrCopyButtonsVisible = false);
+  const handleFocusOut = (e: FocusEvent) => {
+    const nextTarget = e.relatedTarget as HTMLElement;
+    if (
+      nextTarget &&
+      !['filter-button', 'copy-button'].includes(nextTarget.id)
+    ) {
+      hideFilterOrCopy();
+    }
+  };
+  const truncate = (value: string | undefined | null): string => {
+    if (value?.length && value.length > 13) {
+      return `${value.slice(0, 6)}...${value.slice(-6)}`;
+    }
+    return value ?? '';
+  };
+</script>
+
+<td
+  class="relative h-8"
+  onfocus={showFilterOrCopy}
+  onfocusin={showFilterOrCopy}
+  onfocusout={handleFocusOut}
+  onmouseover={showFilterOrCopy}
+  onmouseleave={hideFilterOrCopy}
+  onblur={hideFilterOrCopy}
+>
+  {#if attribute === 'BuildId' || attribute === 'WorkerInstanceKey'}
+    {#if href}
+      <Tooltip text={value ?? undefined} top class="min-w-0">
+        <Link {href}>{truncate(value)}</Link>
+      </Tooltip>
+    {:else}
+      <Tooltip text={value ?? undefined} top class="min-w-0">
+        {truncate(value)}
+      </Tooltip>
+    {/if}
+  {:else if href}
+    <Link {href}>{value}</Link>
+  {:else if children}
+    {@render children?.()}
+  {:else}
+    {value}
+  {/if}
+  {#if value}
+    <FilterOrCopyButtons
+      copyIconTitle={translate('common.copy-icon-title')}
+      copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      filterIconTitle={translate('common.filter-workflows')}
+      show={filterOrCopyButtonsVisible}
+      content={value}
+      onFilter={onRowFilterClick}
+      {copyable}
+      {filterable}
+      filtered={query.includes(`${attribute}=`)}
+    />
+  {/if}
+</td>
diff --git a/src/lib/components/workers/workers-table/workers-table-row.svelte b/src/lib/components/workers/workers-table/workers-table-row.svelte
new file mode 100644
index 0000000000..81156eedfb
--- /dev/null
+++ b/src/lib/components/workers/workers-table/workers-table-row.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import SdkLogo from '$lib/components/lines-and-dots/sdk-logo.svelte';
+  import { timestamp } from '$lib/components/timestamp.svelte';
+  import WorkerStatus from '$lib/components/workers/worker-status.svelte';
+  import type { WorkerInfo } from '$lib/types';
+  import { formatSDKName } from '$lib/utilities/get-sdk-version';
+  import { routeForWorkerInstance } from '$lib/utilities/route-for';
+  import { toWorkerStatusReadable } from '$lib/utilities/screaming-enums';
+
+  import WorkersTableCell from './workers-table-cell.svelte';
+
+  interface Props {
+    worker: WorkerInfo;
+    namespace: string;
+    filterable?: boolean;
+  }
+
+  let { worker, namespace, filterable = false }: Props = $props();
+  const status = $derived(
+    toWorkerStatusReadable(worker.workerHeartbeat?.status),
+  );
+</script>
+
+<tr>
+  <td>
+    <WorkerStatus {status} />
+  </td>
+  <WorkersTableCell
+    attribute="WorkerInstanceKey"
+    value={worker.workerHeartbeat?.workerInstanceKey}
+    href={worker.workerHeartbeat?.workerInstanceKey
+      ? routeForWorkerInstance({
+          namespace,
+          workerInstanceKey: worker.workerHeartbeat.workerInstanceKey,
+        })
+      : undefined}
+    {filterable}
+  />
+  <WorkersTableCell
+    attribute="DeploymentName"
+    value={worker.workerHeartbeat?.deploymentVersion?.deploymentName}
+    {filterable}
+  />
+  <WorkersTableCell
+    attribute="BuildId"
+    value={worker.workerHeartbeat?.deploymentVersion?.buildId}
+    {filterable}
+  />
+  <WorkersTableCell
+    attribute="TaskQueue"
+    value={worker.workerHeartbeat?.taskQueue}
+    {filterable}
+  />
+  <WorkersTableCell
+    attribute="WorkerIdentity"
+    value={worker.workerHeartbeat?.workerIdentity}
+    {filterable}
+  />
+  <WorkersTableCell
+    attribute="HostName"
+    value={worker.workerHeartbeat?.hostInfo?.hostName}
+    {filterable}
+  />
+  <WorkersTableCell
+    attribute="StartTime"
+    value={$timestamp(worker.workerHeartbeat?.startTime)}
+  />
+  <WorkersTableCell copyable={false}>
+    <SdkLogo
+      sdk={formatSDKName(worker.workerHeartbeat?.sdkName)}
+      version={worker.workerHeartbeat?.sdkVersion ?? ''}
+    />
+  </WorkersTableCell>
+</tr>
diff --git a/src/lib/components/workers/workers-table/workers-table.svelte b/src/lib/components/workers/workers-table/workers-table.svelte
new file mode 100644
index 0000000000..2cb318a1c5
--- /dev/null
+++ b/src/lib/components/workers/workers-table/workers-table.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import EmptyState from '$lib/holocene/empty-state.svelte';
+  import PaginatedTable, {
+    type PaginatedRequest,
+  } from '$lib/holocene/table/paginated-table/api-paginated.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { workflowRun } from '$lib/stores/workflow-run';
+  import type { WorkerInfo } from '$lib/types';
+  import { isRunningWithNoWorkers } from '$lib/utilities/is-running-with-no-workers';
+
+  import WorkerHeartbeatsSDKAlert from './worker-heartbeats-sdk-alert.svelte';
+  import WorkersTableRow from './workers-table-row.svelte';
+
+  interface Props {
+    filterable?: boolean;
+    namespace: string;
+    onFetch: () => Promise<PaginatedRequest<WorkerInfo>>;
+    onError?: (err: unknown) => void;
+  }
+
+  let { filterable = false, namespace, onFetch, onError }: Props = $props();
+
+  const columns = [
+    { label: translate('workers.status') },
+    { label: translate('workers.instance', { count: 1 }) },
+    { label: translate('deployments.deployment') },
+    { label: translate('deployments.build-id') },
+    { label: translate('workers.task-queue') },
+    { label: translate('workers.identity') },
+    { label: translate('workers.host-name') },
+    { label: translate('common.start-time') },
+    { label: translate('workers.sdk') },
+  ];
+
+  const hasQuery = $derived(page.url.searchParams.get('query') !== null);
+  const runningWithNoWorkers = $derived(isRunningWithNoWorkers($workflowRun));
+</script>
+
+<PaginatedTable
+  let:visibleItems
+  {onFetch}
+  {onError}
+  aria-label={translate('workers.workers')}
+  pageSizeSelectLabel={translate('common.per-page')}
+  nextButtonLabel={translate('common.next')}
+  previousButtonLabel={translate('common.previous')}
+  emptyStateMessage={translate('workers.empty-state-title')}
+  errorMessage={translate('workers.error-message-fetching')}
+>
+  <caption class="sr-only" slot="caption">
+    {translate('workers.workers')}
+  </caption>
+
+  <tr slot="headers" class="text-left">
+    {#each columns as { label } (label)}
+      <th>{label}</th>
+    {/each}
+  </tr>
+  {#each visibleItems as worker, i (worker.workerHeartbeat?.workerInstanceKey ?? i)}
+    <WorkersTableRow {worker} {namespace} {filterable} />
+  {/each}
+
+  <svelte:fragment slot="empty">
+    {#if hasQuery || runningWithNoWorkers}
+      <EmptyState title={translate('workers.empty-state-title')} />
+    {:else}
+      <div class="my-12 flex w-full flex-col items-center justify-start">
+        <WorkerHeartbeatsSDKAlert />
+      </div>
+    {/if}
+  </svelte:fragment>
+</PaginatedTable>
diff --git a/src/lib/components/workflow/filter-bar/dropdown-filter-chip.svelte b/src/lib/components/workflow/filter-bar/dropdown-filter-chip.svelte
index 1f1a7b2e24..8ef5b5ab4f 100644
--- a/src/lib/components/workflow/filter-bar/dropdown-filter-chip.svelte
+++ b/src/lib/components/workflow/filter-bar/dropdown-filter-chip.svelte
@@ -55,7 +55,7 @@
     onUpdate: (updatedFilter: SearchAttributeFilter) => void;
     onRemove: () => void;
     index?: number;
-    openIndex?: number;
+    openIndex?: number | null;
   };
 
   let {
@@ -179,7 +179,7 @@
     }
 
     if (isDateTimeFilter(filter)) {
-      if (filter.customDate) return value.split('BETWEEN')[1];
+      if (filter.customDate) return value?.split('BETWEEN')[1];
       return $timestamp(value, { format: 'short' });
     }
 
@@ -190,7 +190,7 @@
     return value;
   }
 
-  function applyChanges(e) {
+  function applyChanges(e: SubmitEvent) {
     e.preventDefault();
 
     if (isInConditional(localFilter.conditional)) {
diff --git a/src/lib/components/workflow/workflow-call-stack-error.svelte b/src/lib/components/workflow/workflow-call-stack-error.svelte
deleted file mode 100644
index 9cb6992968..0000000000
--- a/src/lib/components/workflow/workflow-call-stack-error.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { fly } from 'svelte/transition';
-
-  import Alert from '$lib/holocene/alert.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import { workflowRun } from '$lib/stores/workflow-run';
-
-  $: ({ workflow, workers, workersLoaded } = $workflowRun);
-  $: isPending = workflow?.isRunning || workflow?.isPaused;
-  $: runningWithNoWorkers =
-    workersLoaded && isPending && !workers?.pollers?.length;
-</script>
-
-{#if runningWithNoWorkers}
-  <div in:fly={{ duration: 200, delay: 100 }}>
-    <Alert
-      icon="warning"
-      intent="warning"
-      title={translate('workflows.workflow-error-no-workers-title')}
-      class="max-w-screen-lg xl:w-2/3"
-    >
-      {translate('workflows.workflow-error-no-workers-description', {
-        taskQueue: workflow?.taskQueue ?? '',
-      })}
-    </Alert>
-  </div>
-{/if}
diff --git a/src/lib/components/workflow/workflow-summary.svelte b/src/lib/components/workflow/workflow-summary.svelte
index 6c69b7135e..5f04a912d7 100644
--- a/src/lib/components/workflow/workflow-summary.svelte
+++ b/src/lib/components/workflow/workflow-summary.svelte
@@ -10,7 +10,7 @@
     workflowSummaryViewOpen,
   } from '$lib/stores/workflow-run';
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
-  import { routeForWorkers } from '$lib/utilities/route-for';
+  import { routeForWorkflowWorkers } from '$lib/utilities/route-for';
 
   $: ({ workflow } = $workflowRun);
   $: elapsedTime = formatDistanceAbbreviated({
@@ -40,19 +40,19 @@
         <div class="h-0.5 rounded-full bg-inverse"></div>
         <WorkflowDetail
           title={translate('common.workflow-type')}
-          content={workflow?.name}
+          content={workflow?.name ?? ''}
           copyable
           textSize="sm"
         />
         <WorkflowDetail
           title={translate('common.run-id')}
-          content={workflow?.runId}
+          content={workflow?.runId ?? ''}
           copyable
           textSize="sm"
         />
         <WorkflowDetail
           title={translate('common.history-size-bytes')}
-          content={workflow?.historySizeBytes}
+          content={workflow?.historySizeBytes ?? ''}
           copyable
           textSize="sm"
         />
@@ -60,19 +60,21 @@
       <div class="grow overflow-hidden">
         <h4>{translate('common.task-queue')}</h4>
         <div class="h-0.5 rounded-full bg-inverse"></div>
-        <WorkflowDetail
-          content={workflow?.taskQueue}
-          href={routeForWorkers({
-            namespace: $page.params.namespace,
-            workflow: workflow?.id,
-            run: workflow?.runId,
-          })}
-          copyable
-          textSize="sm"
-        />
+        {#if workflow?.taskQueue}
+          <WorkflowDetail
+            content={workflow.taskQueue}
+            href={routeForWorkflowWorkers({
+              namespace: $page.params.namespace,
+              workflow: workflow?.id,
+              run: workflow?.runId,
+            })}
+            copyable
+            textSize="sm"
+          />
+        {/if}
         <WorkflowDetail
           title={translate('workflows.state-transitions')}
-          content={workflow?.stateTransitionCount}
+          content={workflow?.stateTransitionCount ?? ''}
           textSize="sm"
         />
       </div>
diff --git a/src/lib/holocene/badge.svelte b/src/lib/holocene/badge.svelte
index 949160f488..11f8744a52 100644
--- a/src/lib/holocene/badge.svelte
+++ b/src/lib/holocene/badge.svelte
@@ -12,6 +12,7 @@
     danger: 'bg-red-200',
     count: 'h-6 w-6 min-w-max rounded-full bg-blue-300',
     subtle: 'surface-subtle dark:text-white font-normal select-all',
+    ghost: 'surface-primary text-primary border border-subtle',
   };
 
   const types = cva(
diff --git a/src/lib/holocene/filter-or-copy-buttons.svelte b/src/lib/holocene/filter-or-copy-buttons.svelte
index c5c7d5b774..f43fcc977c 100644
--- a/src/lib/holocene/filter-or-copy-buttons.svelte
+++ b/src/lib/holocene/filter-or-copy-buttons.svelte
@@ -52,11 +52,11 @@
 
 <style lang="postcss">
   .copy-or-filter {
-    @apply absolute bottom-0 right-0 top-0 inline-flex gap-2 px-2;
+    @apply absolute bottom-0 right-0 top-0 inline-flex gap-1 px-1;
   }
 
   .copy-or-filter-button {
-    @apply surface-primary relative top-[50%] h-fit translate-y-[-50%] rounded-full p-1 text-primary hover:surface-inverse;
+    @apply surface-primary relative top-[40%] h-7 w-7 translate-y-[-40%] rounded-full p-0.5 text-primary hover:surface-inverse;
   }
 
   .filtered {
diff --git a/src/lib/holocene/icon/paths.ts b/src/lib/holocene/icon/paths.ts
index 9a4b81c346..fddfed1042 100644
--- a/src/lib/holocene/icon/paths.ts
+++ b/src/lib/holocene/icon/paths.ts
@@ -83,6 +83,7 @@ import lock from './svg/lock.svelte';
 import logout from './svg/logout.svelte';
 import marker from './svg/marker.svelte';
 import merge from './svg/merge.svelte';
+import microchip from './svg/microchip.svelte';
 import microsoft from './svg/microsoft.svelte';
 import minimize from './svg/minimize.svelte';
 import moon from './svg/moon.svelte';
@@ -137,6 +138,7 @@ import usage from './svg/usage.svelte';
 import userGroup from './svg/user-group.svelte';
 import verticalEllipsis from './svg/vertical-ellipsis.svelte';
 import warning from './svg/warning.svelte';
+import workers from './svg/workers.svelte';
 import workflow from './svg/workflow.svelte';
 import xmarkFilled from './svg/xmark-filled.svelte';
 import xmarkSquare from './svg/xmark-square.svelte';
@@ -227,6 +229,7 @@ export const icons = {
   logout,
   marker,
   merge,
+  microchip,
   microsoft,
   minimize,
   moon,
@@ -282,6 +285,7 @@ export const icons = {
   'vertical-ellipsis': verticalEllipsis,
   warning,
   'system-window': systemWindow,
+  workers,
   workflow,
   'xmark-filled': xmarkFilled,
   'xmark-square': xmarkSquare,
diff --git a/src/lib/holocene/icon/svg/microchip.svelte b/src/lib/holocene/icon/svg/microchip.svelte
new file mode 100644
index 0000000000..adb80b665a
--- /dev/null
+++ b/src/lib/holocene/icon/svg/microchip.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    d="M 8.25,0.75 V 3 h 3 V 0.75 0 h 1.5 V 0.75 3 h 3 V 0.75 0 h 1.5 V 0.75 3 H 19.5 21 V 4.5 6.75 H 23.25 24 v 1.5 H 23.25 21 v 3 H 23.25 24 v 1.5 H 23.25 21 v 3 H 23.25 24 v 1.5 H 23.25 21 V 19.5 21 H 19.5 17.25 V 23.25 24 h -1.5 V 23.25 21 h -3 V 23.25 24 h -1.5 V 23.25 21 h -3 V 23.25 24 H 6.75 V 23.25 21 H 4.5 3 V 19.5 17.25 H 0.75 0 v -1.5 H 0.75 3 v -3 H 0.75 0 v -1.5 H 0.75 3 v -3 H 0.75 0 V 6.75 H 0.75 3 V 4.5 3 H 4.5 6.75 V 0.75 0 h 1.5 z M 19.5,4.5 h -15 v 15 h 15 z m -3,3 h -9 v 9 h 9 z M 7.5,6 h 9 1.5 v 1.5 9 1.5 H 16.5 7.5 6 V 16.5 7.5 6 Z"
+    fill="currentcolor"
+  />
+</Svg>
diff --git a/src/lib/holocene/icon/svg/workers.svelte b/src/lib/holocene/icon/svg/workers.svelte
new file mode 100644
index 0000000000..82441dbb1a
--- /dev/null
+++ b/src/lib/holocene/icon/svg/workers.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    d="m 14.713251,0.7910076 0.578668,2.6810692 0.03306,0.1270502 0.187127,0.07658 c 0.735141,0.2698993 1.415125,0.6443402 2.038881,1.1173345 l 0.180087,0.1209552 0.197553,-0.05743 2.775982,-0.8562747 0.749221,-0.2306027 0.404639,0.6709211 0.108712,0.1809962 0.0018,0.00174 1.481956,2.4704846 8.91e-4,8.644e-4 0.107019,0.1792676 0.441174,0.7379218 -0.662251,0.548228 -2.169336,1.796106 -0.08617,0.0818 0.0139,0.107019 0.0696,0.504708 0.0035,0.02781 c 0.02209,0.201741 0.03831,0.423442 0.03831,0.664836 0,0.348144 -0.04527,0.685686 -0.08617,0.964237 l -0.02344,0.177504 -0.01568,0.113969 0.09391,0.08786 1.997179,1.655182 0.163602,0.13571 L 24,15.425049 l -0.441174,0.738795 -0.107019,0.178394 -8.91e-4,0.0018 -1.481956,2.46963 -0.0018,0.0026 -0.108712,0.180978 -0.40464,0.670985 -0.749221,-0.231504 -2.775982,-0.856239 v -8.9e-4 l -0.197552,-0.05747 -0.174919,0.118336 c -0.212077,0.161107 -0.431016,0.309739 -0.656103,0.447323 l 0.07574,0.07137 -0.910239,0.374165 c -0.17385,0.07913 -0.351442,0.150771 -0.531707,0.217513 l 8.9e-4,8.9e-4 -0.163601,0.06701 -0.01658,0.08786 -0.0017,0.0131 -0.0088,0.03564 -0.641311,2.667182 -0.184468,0.768362 H 9.4737881 L 9.3006511,22.603322 8.7176173,19.955298 8.681074,19.819588 8.5392318,19.756944 C 7.7484605,19.482491 7.0610543,19.103515 6.4359704,18.625628 l -0.132272,-0.0957 -0.1827427,0.0548 -0.062652,0.01835 -2.4904983,0.76918 -8.732e-4,-8.02e-4 -0.204494,0.06433 L 2.621897,19.66552 2.2129089,19.006833 0.46033389,16.179525 0,15.437255 l 0.6726614,-0.557817 2.1615622,-1.793477 0.094855,-0.08875 -0.014792,-0.11486 v -8.02e-4 c -0.061912,-0.42558 -0.059177,-0.838597 -0.059177,-1.186117 0,-0.311076 -0.00296,-0.730686 0.062651,-1.164286 L 2.9290776,10.438026 2.828136,10.343126 0.6726614,8.558372 0,8.000583 0.46033389,7.2574306 2.2129089,4.4310396 2.621897,3.7714262 l 0.7405412,0.2306027 0.204494,0.063525 h 8.733e-4 l 2.5505393,0.7866546 0.1844804,0.053955 0.1331452,-0.095719 C 7.0684681,4.3269792 7.7466694,3.9567532 8.5018154,3.6487334 L 8.526178,3.6382903 8.5627301,3.624363 8.6923818,3.5747647 8.7245855,3.454674 9.298869,0.7910076 9.4695109,0 h 5.0731871 z m -4.038554,3.1309667 -0.0053,0.023489 -0.006,0.022625 L 10.498898,4.5885387 10.366662,5.0862962 9.8836847,5.268165 9.2867503,5.4944192 9.0517724,5.5927499 C 8.5152262,5.8272467 8.0560614,6.0933055 7.6359704,6.4168211 l -0.011316,0.0087 -0.012181,0.00869 L 7.0816568,6.8188439 6.6831027,7.1077559 6.2114538,6.9693978 5.5544603,6.7762116 l -0.00696,-0.00174 -0.0061,-0.00174 -2.032777,-0.6274186 -0.884121,1.425381 1.5124039,1.253082 0.024363,0.02089 0.023498,0.02176 0.4933993,0.465589 0.3724449,0.351531 -0.066136,0.508184 -0.080927,0.619568 -0.00173,0.01043 -0.00174,0.0096 c -0.039332,0.259928 -0.040028,0.528589 -0.040028,0.864081 0,0.286839 6.683e-4,0.508807 0.017403,0.710993 l 0.022625,0.196661 8.732e-4,0.0096 0.00173,0.0088 0.081801,0.623043 0.067007,0.50899 -0.3733181,0.351532 -0.4934,0.465589 -0.023498,0.02174 -0.024363,0.01996 -1.5132683,1.253126 0.8841121,1.426264 2.0336503,-0.62741 0.5569253,-0.171444 0.00609,0.006 0.10529,-0.03048 0.4725132,-0.140078 0.3994267,0.289779 0.5308166,0.38468 0.012181,0.0087 0.011316,0.0088 c 0.4170612,0.321235 0.8647132,0.579113 1.3757924,0.77622 l 0.2227701,0.08091 0.041792,0.0139 0.040901,0.01746 0.6134194,0.270622 0.4411737,0.193988 0.123592,0.465589 0.167969,0.629994 0.0053,0.02094 0.0052,0.02174 0.41159,1.874388 h 1.852645 l 0.449016,-1.869219 0.122701,-0.614312 0.0401,-0.206285 -0.272403,-0.254938 1.5315,-0.558618 c 0.564321,-0.20584 1.084088,-0.490718 1.561172,-0.857219 l 0.02433,-0.01907 0.02531,-0.01658 0.581253,-0.393323 0.391629,-0.263671 0.45249,0.133128 0.662162,0.194968 0.01221,0.0035 2.02498,0.624736 0.850982,-1.417531 -1.520183,-1.259185 -0.02441,-0.01996 -0.02344,-0.02174 -0.493391,-0.465589 -0.374254,-0.352422 0.0679,-0.509074 0.01479,-0.11397 -0.0087,-0.0078 0.07823,-0.520391 c 0.05097,-0.336116 0.09053,-0.60237 0.09053,-0.858913 0,-0.142216 -0.0089,-0.280512 -0.02353,-0.420233 l -0.0687,-0.504797 -8.92e-4,-0.0043 -0.0818,-0.62046 -0.067,-0.508183 0.373362,-0.352422 0.493391,-0.465589 0.02344,-0.02176 0.02441,-0.02089 1.520183,-1.2591684 -0.850982,-1.416684 -2.02498,0.6248077 -0.01221,0.00348 -0.662162,0.1949239 -0.45246,0.1330262 -0.39078,-0.2636684 -0.581341,-0.3915942 -0.02611,-0.017403 -0.02433,-0.01914 C 15.891438,6.0448129 15.370958,5.7583305 14.806369,5.5527226 l -0.01996,-0.00697 -0.01916,-0.00784 L 14.101524,5.2629433 13.642084,5.0732412 13.515015,4.5928955 13.348829,3.9672233 13.338404,3.9219743 12.924141,2.0049308 h -1.836072 z m 1.330561,4.0977487 c 2.02997,0 3.675707,1.645647 3.675707,3.675707 0,2.030059 -1.645737,3.675706 -3.675707,3.675706 -2.0300595,0 -3.6757419,-1.645647 -3.6757419,-3.675706 0,-2.03006 1.6456824,-3.675707 3.6757419,-3.675707 z m 0,2.004931 c -0.922802,0 -1.670776,0.748062 -1.670776,1.670776 0,0.922713 0.747974,1.670776 1.670776,1.670776 0.922714,0 1.670776,-0.748063 1.670776,-1.670776 0,-0.922714 -0.748062,-1.670776 -1.670776,-1.670776 z"
+    fill="currentColor"
+  />
+</Svg>
diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
index a65ec46161..382d12d964 100644
--- a/src/lib/i18n/locales/en/common.ts
+++ b/src/lib/i18n/locales/en/common.ts
@@ -108,6 +108,8 @@ export const Strings = {
   workflows: 'Workflows',
   'workflows-plural_one': 'Workflow',
   'workflows-plural_other': 'Workflows',
+  'activities-plural_one': 'Activity',
+  'activities-plural_other': 'Activities',
   schedules: 'Schedules',
   'schedules-plural_one': '{{ count }} Schedule',
   'schedules-plural_other': '{{ count }} Schedules',
diff --git a/src/lib/i18n/locales/en/workers.ts b/src/lib/i18n/locales/en/workers.ts
index 887059633e..fb407f88fc 100644
--- a/src/lib/i18n/locales/en/workers.ts
+++ b/src/lib/i18n/locales/en/workers.ts
@@ -1,7 +1,11 @@
 export const Namespace = 'workers' as const;
 
 export const Strings = {
+  worker: 'Worker',
   workers: 'Workers',
+  'worker-details': 'Worker Details',
+  'worker-views': 'Worker Views',
+  'back-to-workers': 'Back to Workers',
   version: 'Version',
   versioning: 'Versioning',
   retirability: 'Retirability',
@@ -10,6 +14,16 @@ export const Strings = {
   'redirect-rules': 'Redirect Rules',
   default: 'Default',
   overall: 'Overall',
+  'host-name': 'Host Name',
+  identity: 'Identity',
+  instance_one: 'Instance',
+  instance_other: 'Instances',
+  'task-queue': 'Task Queue',
+  status: 'Status',
+  'shutting-down': 'Shutting Down',
+  sdk: 'Worker SDK',
+  'empty-state-title': 'No Workers Found',
+  'error-message-fetching': 'An error occurred while fetching workers.',
   'compatible-build-ids': 'Compatible Build IDs',
   'version-sets': 'Version Sets',
   'no-version-sets-found': 'No Version Sets found',
@@ -26,4 +40,41 @@ export const Strings = {
     'Viewing workers for pinned Build ID. Go to the Task Queue page to view all workers.',
   'viewing-auto-upgrade-build-ids':
     'Viewing workers for current and ramping Build IDs. Go to the Task Queue page to view all workers.',
+  'active-workers': 'Active Workers',
+  'inactive-workers': 'Inactive Workers',
+  'total-processed-tasks': 'Total Processed Tasks',
+  'nexus-tasks': 'Nexus Tasks',
+  'local-activities': 'Local Activities',
+  slots: 'Slots',
+  used: 'Used',
+  'available-out-of': 'Available out of {{count}}',
+  'none-available': 'None Available',
+  'tasks-processed': 'Tasks Processed',
+  'last-poll': 'Last Poll',
+  'no-activity': 'No Activity',
+  'host-info': 'Host Info',
+  'process-id': 'Process ID',
+  'worker-grouping': 'Worker Grouping',
+  'cpu-usage': 'CPU Usage',
+  'memory-usage': 'Memory Usage',
+  'workflow-cache': 'Workflow Cache',
+  'cache-size': 'Cache size',
+  'cache-hits': 'Cache hits',
+  diagnostics: 'Diagnostics',
+  'poll-success-rate': 'Poll success rate',
+  'troubleshooting-workers-link': 'Troubleshooting workers',
+  poller: 'Poller',
+  'go-dependency-warning': 'Potential missing dependency',
+  'go-dependency-warning-description':
+    'This worker is not showing any usage. You may need to enable a dependency for the Go SDK in order to see this data.',
+  'go-dependency-warning-link': 'Learn more.',
+  'no-worker-heartbeats': 'No workers are sending heartbeats.',
+  'worker-heartbeats-sdk-link-preface': 'Upgrade SDK to',
+  'worker-heartbeats-sdk-link-postface': 'to enable.',
+  'worker-heartbeats-sdk-list-preface':
+    'Upgrade SDK to one of the following versions to enable:',
+  'worker-heartbeats-disabled':
+    'Worker heartbeats are disabled for this Namespace.',
+  'worker-heartbeats-enablement':
+    'If you want to enable worker heartbeats for this namespace, please ensure the following value is set in Dynamic Config.',
 } as const;
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index d06ea88181..27494b8c70 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -155,9 +155,11 @@ export const Strings = {
   'workflow-404-title': 'This is not the Workflow you are looking for',
   'workflow-error-title':
     'We are having technical difficulties retrieving this Workflow',
-  'workflow-error-no-workers-title': 'No Workers Running',
+  'workflow-error-no-workers-title': 'No workers polling',
   'workflow-error-no-workers-description':
-    'There are no Workers polling the {{taskQueue}} Task Queue.',
+    'There are no workers polling the {{taskQueue}} task queue.',
+  'workers-alert-description':
+    'Check your deployment or orchestration system (Kubernetes, ECS, etc.). Review worker logs for crash information. Restart or redeploy workers.',
   'workflow-error-no-compatible-workers-title': 'No Compatible Workers Running',
   'workflow-error-no-compatible-workers-description':
     'There are no compatible Workers polling the {{taskQueue}} Task Queue.',
@@ -203,7 +205,6 @@ export const Strings = {
   'workflow-task-handler': 'Workflow Task Handler',
   'activity-handler': 'Activity Handler',
   'nexus-handler': 'Nexus Handler',
-  'workers-empty-state': 'No Workers Found',
   'call-stack-empty-state': 'No Call Stacks Found',
   'no-workers-failure-message':
     'This will fail if you have no workers running.',
@@ -348,4 +349,5 @@ export const Strings = {
   'timeline-minimized':
     'Timeline and Event History are collapsed to minimized height',
   'timeline-expanded': 'Timeline and Event History are expanded to full height',
+  sdk: 'Workflow SDK',
 } as const;
diff --git a/src/lib/layouts/workers-layout.svelte b/src/lib/layouts/workers-layout.svelte
new file mode 100644
index 0000000000..80e79e7972
--- /dev/null
+++ b/src/lib/layouts/workers-layout.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  import { page } from '$app/state';
+
+  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 { pathMatches } from '$lib/utilities/path-matches';
+  import {
+    routeForWorkerDeployments,
+    routeForWorkers,
+  } from '$lib/utilities/route-for';
+
+  interface Props {
+    namespace: string;
+    children: Snippet;
+  }
+
+  const { children, namespace }: Props = $props();
+
+  const workersHref = $derived(routeForWorkers({ namespace }));
+  const deploymentsHref = $derived(routeForWorkerDeployments({ namespace }));
+</script>
+
+<header class="flex flex-col gap-2">
+  <div class="flex flex-wrap items-center gap-2">
+    <h1 class="leading-7" data-cy="workers-title">
+      {translate('workers.workers')}
+    </h1>
+  </div>
+  <Tabs>
+    <TabList label={translate('workers.worker-views')}>
+      <Tab
+        label={translate('workers.instance', { count: 2 })}
+        id="workers-tab"
+        href={workersHref}
+        active={pathMatches(
+          page.url.pathname,
+          routeForWorkers({ namespace }),
+          true,
+        )}
+      />
+      <Tab
+        label={translate('deployments.deployments')}
+        id="deployments-tab"
+        href={deploymentsHref}
+        active={pathMatches(
+          page.url.pathname,
+          routeForWorkerDeployments({ namespace }),
+          true,
+        )}
+      />
+    </TabList>
+  </Tabs>
+</header>
+
+{@render children()}
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index c601ae4b3f..c6c5a16d1d 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -6,7 +6,7 @@
   import CodecServerErrorBanner from '$lib/components/codec-server-error-banner.svelte';
   import WorkflowDetails from '$lib/components/lines-and-dots/workflow-details.svelte';
   import { timestamp } from '$lib/components/timestamp.svelte';
-  import WorkflowCallStackError from '$lib/components/workflow/workflow-call-stack-error.svelte';
+  import NoWorkersPollingAlert from '$lib/components/workers/no-workers-polling-alert.svelte';
   import WorkflowActions from '$lib/components/workflow-actions.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Alert from '$lib/holocene/alert.svelte';
@@ -19,7 +19,6 @@
   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 { fullEventHistory } from '$lib/stores/events';
   import { resetWorkflows } from '$lib/stores/reset-workflows';
   import { workflowRun } from '$lib/stores/workflow-run';
@@ -40,11 +39,11 @@
     routeForRelationships,
     routeForTimeline,
     routeForUserMetadata,
-    routeForWorkers,
     routeForWorkflowMemo,
     routeForWorkflowQuery,
     routeForWorkflows,
     routeForWorkflowSearchAttributes,
+    routeForWorkflowWorkers,
   } from '$lib/utilities/route-for';
   import { isWorkflowTaskFailure } from '$lib/utilities/workflow-task-failures';
 
@@ -54,7 +53,7 @@
     run: runId,
     id: eventId,
   } = $derived(page.params);
-  const { workflow, workers } = $derived($workflowRun);
+  const { workflow } = $derived($workflowRun);
   const routeParameters = $derived({
     namespace,
     workflow: workflowId,
@@ -175,7 +174,6 @@
   </div>
   <CodecServerErrorBanner />
   <WorkflowDetails {workflow} next={workflowRelationships.next} />
-  <WorkflowCallStackError />
   {#if cancelInProgress}
     <div in:fly={{ duration: 200, delay: 100 }}>
       <Alert
@@ -237,6 +235,7 @@
       </Alert>
     </div>
   {/if}
+  <NoWorkersPollingAlert />
   <Tabs>
     <TabList label="workflow detail">
       <Tab
@@ -266,7 +265,7 @@
         )}
       >
         <Badge type="primary" class="px-2 py-0">
-          {workflow.historyEvents}
+          {workflow?.historyEvents}
         </Badge>
       </Tab>
       <Tab
@@ -300,18 +299,13 @@
       <Tab
         label={translate('workflows.workers-tab')}
         id="workers-tab"
-        href={routeForWorkers(routeParameters)}
+        href={routeForWorkflowWorkers(routeParameters)}
         active={pathMatches(
           page.url.pathname,
-          routeForWorkers(routeParameters),
+          routeForWorkflowWorkers(routeParameters),
         )}
       >
-        <Badge type="primary" class="px-2 py-0">
-          {getWorkflowPollersWithVersions(
-            workflow.searchAttributes.indexedFields,
-            workers,
-          )?.pollers?.length || 0}
-        </Badge>
+        <!-- TODO: Add Badge with workers count -->
       </Tab>
       <Tab
         label={translate('workflows.pending-activities-tab')}
diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
index 452745e34b..152c7591e0 100644
--- a/src/lib/layouts/workflow-run-layout.svelte
+++ b/src/lib/layouts/workflow-run-layout.svelte
@@ -8,7 +8,6 @@
   import SkeletonWorkflow from '$lib/holocene/skeleton/workflow.svelte';
   import { translate } from '$lib/i18n/translate';
   import WorkflowHeader from '$lib/layouts/workflow-header.svelte';
-  import { Action } from '$lib/models/workflow-actions';
   import {
     fetchAllEvents,
     throttleRefresh,
diff --git a/src/lib/models/worker-status.ts b/src/lib/models/worker-status.ts
new file mode 100644
index 0000000000..af75d539fb
--- /dev/null
+++ b/src/lib/models/worker-status.ts
@@ -0,0 +1,13 @@
+export type WorkerStatus = 'Unspecified' | 'Running' | 'ShuttingDown';
+
+export type WorkerFilters = readonly (WorkerStatus | 'All')[];
+
+export const workerStatuses: readonly WorkerStatus[] = [
+  'Running',
+  'ShuttingDown',
+] as const;
+
+export const workerStatusFilters: WorkerFilters = [
+  'All',
+  ...workerStatuses,
+] as const;
diff --git a/src/lib/pages/deployment.svelte b/src/lib/pages/deployment.svelte
index 6d77a8407f..1b69d9596a 100644
--- a/src/lib/pages/deployment.svelte
+++ b/src/lib/pages/deployment.svelte
@@ -3,6 +3,7 @@
 
   import VersionTableRow from '$lib/components/deployments/version-table-row.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Error from '$lib/holocene/error.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import SkeletonTable from '$lib/holocene/skeleton/table.svelte';
@@ -15,20 +16,18 @@
     routeForWorkflowsWithQuery,
   } from '$lib/utilities/route-for';
 
-  const namespace = $derived(page.params.namespace);
-  const deploymentName = $derived(page.params.deployment);
-  const parameters = $derived({
-    namespace,
-    deploymentName: decodeURIForSvelte(deploymentName),
-  });
+  const { namespace } = $derived(page.params);
+  const deploymentName = $derived(decodeURIForSvelte(page.params.deployment));
   const workflowHref = $derived(
     routeForWorkflowsWithQuery({
-      namespace: page.params.namespace,
+      namespace,
       query: `TemporalWorkerDeployment="${deploymentName}"`,
     }),
   );
 
-  const deploymentFetch = $derived(fetchDeployment(parameters));
+  const deploymentFetch = $derived(
+    fetchDeployment({ namespace, deploymentName }),
+  );
 
   const columns = [
     { label: translate('deployments.build-id') },
@@ -72,7 +71,7 @@
         {translate('deployments.deployments')}
       </caption>
       <tr slot="headers">
-        {#each columns as { label }}
+        {#each columns as { label } (label)}
           <th>{label}</th>
         {/each}
       </tr>
@@ -84,5 +83,7 @@
         />
       {/each}
     </PaginatedTable>
+  {:catch error}
+    <Error {error} />
   {/await}
 </div>
diff --git a/src/lib/pages/deployments.svelte b/src/lib/pages/deployments.svelte
index bbb6f13b19..06152e2eaa 100644
--- a/src/lib/pages/deployments.svelte
+++ b/src/lib/pages/deployments.svelte
@@ -3,13 +3,12 @@
 
   import DeploymentTableRow from '$lib/components/deployments/deployment-table-row.svelte';
   import Alert from '$lib/holocene/alert.svelte';
-  import Badge from '$lib/holocene/badge.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import Link from '$lib/holocene/link.svelte';
   import PaginatedTable from '$lib/holocene/table/paginated-table/api-paginated.svelte';
   import { translate } from '$lib/i18n/translate';
   import { fetchPaginatedDeployments } from '$lib/services/deployments-service';
-  import type { APIErrorResponse } from '$lib/utilities/request-from-api';
+  import { has } from '$lib/utilities/has';
 
   let error = $state('');
 
@@ -22,9 +21,16 @@
     };
   });
 
-  const onError = (err: APIErrorResponse) => {
-    error =
-      err?.body?.message || translate('deployments.error-message-fetching');
+  const onError = (err: unknown) => {
+    if (
+      has(err, 'body') &&
+      has(err.body, 'message') &&
+      typeof err.body.message === 'string'
+    ) {
+      error = err.body.message;
+    } else {
+      error = translate('deployments.error-message-fetching');
+    }
   };
 
   const columns = [
@@ -39,13 +45,6 @@
   ];
 </script>
 
-<div class="flex flex-wrap items-center gap-2">
-  <h1>
-    {translate('deployments.worker-deployments')}
-  </h1>
-  <Badge class="shrink-0">Public Preview</Badge>
-</div>
-
 {#key [namespace]}
   <PaginatedTable
     let:visibleItems
@@ -62,7 +61,7 @@
       >{translate('deployments.deployments')}</caption
     >
     <tr slot="headers" class="text-left">
-      {#each columns as { label }}
+      {#each columns as { label } (label)}
         <th>{label}</th>
       {/each}
     </tr>
diff --git a/src/lib/pages/standalone-activity-workers.svelte b/src/lib/pages/standalone-activity-workers.svelte
index 2aa6403bbc..ba2fec5262 100644
--- a/src/lib/pages/standalone-activity-workers.svelte
+++ b/src/lib/pages/standalone-activity-workers.svelte
@@ -1,37 +1,42 @@
 <script lang="ts">
-  import WorkerTable from '$lib/components/worker-table.svelte';
-  import { getPollers } from '$lib/services/pollers-service';
+  import { page } from '$app/state';
+
+  import WorkersTable from '$lib/components/workers/workers-table/task-queue-workers-table.svelte';
   import { decodePayload } from '$lib/utilities/decode-payload';
   import { isEmptyObject } from '$lib/utilities/is';
   import { activityExecution } from '$lib/utilities/standalone-activity-poller.svelte';
 
   interface Props {
     namespace: string;
+    useFallback?: boolean;
   }
 
-  let { namespace }: Props = $props();
+  let { namespace, useFallback = false }: Props = $props();
 
   const searchAttributes = $derived($activityExecution?.info?.searchAttributes);
-  const queue = $derived($activityExecution?.info?.taskQueue);
-
-  const getPollersRequest = getPollers({ queue, namespace });
+  const taskQueue = $derived($activityExecution?.info?.taskQueue ?? '');
+  const workerHeartbeatsEnabled = $derived(
+    !!page.data.namespace.namespaceInfo?.capabilities?.workerHeartbeats,
+  );
 
   const decodedSearchAttributes = $derived.by(() => {
     if (isEmptyObject(searchAttributes)) return {};
 
-    const decoded = Object.entries(searchAttributes.indexedFields).reduce(
-      (searchAttributes, [searchAttributeName, payload]) => {
-        return {
-          ...searchAttributes,
-          [searchAttributeName]: decodePayload(payload),
-        };
-      },
-      {},
-    );
+    const decoded = Object.entries(
+      searchAttributes?.indexedFields ?? {},
+    ).reduce((searchAttributes, [searchAttributeName, payload]) => {
+      return {
+        ...searchAttributes,
+        [searchAttributeName]: decodePayload(payload),
+      };
+    }, {});
     return decoded;
   });
 </script>
 
-{#await getPollersRequest then workers}
-  <WorkerTable {workers} searchAttributes={decodedSearchAttributes} />
-{/await}
+<WorkersTable
+  {namespace}
+  {taskQueue}
+  searchAttributes={decodedSearchAttributes}
+  useFallback={!workerHeartbeatsEnabled || useFallback}
+/>
diff --git a/src/lib/pages/task-queue.svelte b/src/lib/pages/task-queue.svelte
index e0f5e5634f..70c3d2f286 100644
--- a/src/lib/pages/task-queue.svelte
+++ b/src/lib/pages/task-queue.svelte
@@ -1,17 +1,29 @@
 <script lang="ts">
   import { page } from '$app/state';
 
-  import WorkerTable from '$lib/components/worker-table.svelte';
-  import { getPollers } from '$lib/services/pollers-service';
+  import WorkersTable from '$lib/components/workers/workers-table/task-queue-workers-table.svelte';
+  import { translate } from '$lib/i18n/translate';
 
-  const { queue: taskQueue, namespace } = $derived(page.params);
+  interface Props {
+    namespace: string;
+    queue: string;
+    useFallback?: boolean;
+  }
+
+  let { namespace, queue: taskQueue, useFallback = false }: Props = $props();
+  const workerHeartbeatsEnabled = $derived(
+    !!page.data.namespace.namespaceInfo?.capabilities?.workerHeartbeats,
+  );
 </script>
 
-{#await getPollers({ queue: taskQueue, namespace }) then workers}
-  <section class="flex flex-col gap-4">
-    <h1 data-testid="task-queue-name">
-      {taskQueue}
-    </h1>
-    <WorkerTable {workers} />
-  </section>
-{/await}
+<section class="flex flex-col gap-4">
+  <h1 data-testid="task-queue-title">{translate('workers.task-queue')}</h1>
+  <h2 data-testid="task-queue-name">
+    {taskQueue}
+  </h2>
+  <WorkersTable
+    {namespace}
+    {taskQueue}
+    useFallback={!workerHeartbeatsEnabled || useFallback}
+  />
+</section>
diff --git a/src/lib/pages/worker-details.svelte b/src/lib/pages/worker-details.svelte
new file mode 100644
index 0000000000..6d3c1c9b9d
--- /dev/null
+++ b/src/lib/pages/worker-details.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import Skeleton from '$lib/components/workers/worker-details/skeleton.svelte';
+  import WorkerDetails from '$lib/components/workers/worker-details/worker-details.svelte';
+  import Error from '$lib/holocene/error.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { describeWorker } from '$lib/services/worker-service';
+  import { routeForWorkers } from '$lib/utilities/route-for';
+
+  const { namespace, workerInstanceKey } = $derived(page.params);
+  const workerDetailsPromise = $derived(
+    describeWorker({ namespace, workerInstanceKey }),
+  );
+</script>
+
+{#snippet breadcrumb()}
+  <Link
+    href={routeForWorkers({ namespace })}
+    data-testid="back-to-workers"
+    icon="chevron-left"
+  >
+    {translate('workers.back-to-workers')}
+  </Link>
+{/snippet}
+
+{#await workerDetailsPromise}
+  <Skeleton {breadcrumb} />
+{:then data}
+  <WorkerDetails worker={data.workerInfo} {breadcrumb} />
+{:catch error}
+  {@render breadcrumb()}
+  <Error {error} status={error.statusCode} />
+{/await}
diff --git a/src/lib/pages/workers.svelte b/src/lib/pages/workers.svelte
new file mode 100644
index 0000000000..7348486128
--- /dev/null
+++ b/src/lib/pages/workers.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { page } from '$app/state';
+
+  import FilterBar from '$lib/components/shared-search-attribute-filter/filter-bar.svelte';
+  import WorkerHeartbeatsDisabled from '$lib/components/workers/worker-heartbeats-disabled.svelte';
+  import WorkersTable from '$lib/components/workers/workers-table/workers-table.svelte';
+  import { fetchPaginatedWorkers } from '$lib/services/worker-service';
+  import { workerFilters } from '$lib/stores/filters';
+  import {
+    workerSearchAttributeOptions,
+    workerSearchAttributes,
+  } from '$lib/stores/search-attributes';
+  import { toListWorkflowFilters } from '$lib/utilities/query/to-list-workflow-filters';
+
+  const { namespace } = $derived(page.params);
+  const query = $derived(page.url.searchParams.get('query') || '');
+
+  onMount(() => {
+    const query = page.url.searchParams.get('query') ?? '';
+    if (query) {
+      $workerFilters = toListWorkflowFilters(query, $workerSearchAttributes);
+    }
+  });
+
+  const workerHeartbeatsEnabled = $derived(
+    !!page.data.namespace.namespaceInfo?.capabilities?.workerHeartbeats,
+  );
+</script>
+
+{#if workerHeartbeatsEnabled}
+  <FilterBar
+    filters={workerFilters}
+    options={$workerSearchAttributeOptions}
+    id="worker"
+    statusAttribute="WorkerStatus"
+  />
+
+  {#key [namespace, query]}
+    <WorkersTable
+      {namespace}
+      onFetch={() => fetchPaginatedWorkers({ namespace, query })}
+      filterable
+    />
+  {/key}
+{:else}
+  <WorkerHeartbeatsDisabled />
+{/if}
diff --git a/src/lib/pages/workflow-workers.svelte b/src/lib/pages/workflow-workers.svelte
deleted file mode 100644
index 8e94b72878..0000000000
--- a/src/lib/pages/workflow-workers.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-
-  import WorkerTable from '$lib/components/worker-table.svelte';
-  import Link from '$lib/holocene/link.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import { workflowRun } from '$lib/stores/workflow-run';
-  import type { TaskQueueResponse } from '$lib/types';
-  import { routeForTaskQueue } from '$lib/utilities/route-for';
-
-  export let taskQueue: string;
-  export let workers: TaskQueueResponse;
-
-  $: ({ namespace } = $page.params);
-</script>
-
-<section class="flex flex-col gap-4">
-  <WorkerTable
-    {workers}
-    searchAttributes={$workflowRun?.workflow?.searchAttributes?.indexedFields}
-  >
-    <p data-testid="task-queue-name">
-      {translate('common.task-queue')}:
-      <Link
-        href={routeForTaskQueue({
-          namespace,
-          queue: taskQueue,
-        })}>{taskQueue}</Link
-      >
-    </p>
-  </WorkerTable>
-</section>
diff --git a/src/lib/services/worker-service.ts b/src/lib/services/worker-service.ts
new file mode 100644
index 0000000000..3e5e4af68d
--- /dev/null
+++ b/src/lib/services/worker-service.ts
@@ -0,0 +1,46 @@
+import type {
+  DescribeWorkerRequest,
+  DescribeWorkerResponse,
+  ListWorkersRequest,
+  ListWorkersResponse,
+  WorkerInfo,
+} from '$lib/types';
+import { requestFromAPI } from '$lib/utilities/request-from-api';
+import { routeForApi } from '$lib/utilities/route-for-api';
+
+type PaginatedWorkerListPromise = (
+  pageSize: number,
+  token: string,
+) => Promise<{ items: WorkerInfo[]; nextPageToken: string }>;
+
+export const fetchPaginatedWorkers = async (
+  parameters: ListWorkersRequest,
+  request = fetch,
+): Promise<PaginatedWorkerListPromise> => {
+  return (pageSize = 100, token = '') => {
+    const route = routeForApi('workers', parameters);
+    return requestFromAPI<ListWorkersResponse>(route, {
+      request,
+      params: {
+        maximumPageSize: String(pageSize),
+        nextPageToken: token,
+        ...(parameters.query && { query: parameters.query }),
+      },
+    }).then(({ workersInfo, nextPageToken }) => {
+      return {
+        items: workersInfo ?? [],
+        nextPageToken: nextPageToken ? String(nextPageToken) : '',
+      };
+    });
+  };
+};
+
+export async function describeWorker(
+  parameters: DescribeWorkerRequest,
+  request = fetch,
+): Promise<DescribeWorkerResponse> {
+  const route = routeForApi('worker', parameters);
+  return await requestFromAPI<DescribeWorkerResponse>(route, {
+    request,
+  });
+}
diff --git a/src/lib/stores/events.ts b/src/lib/stores/events.ts
index 842602dc15..67ae74e7bb 100644
--- a/src/lib/stores/events.ts
+++ b/src/lib/stores/events.ts
@@ -5,9 +5,11 @@ import { page } from '$app/stores';
 import type { FetchEventsParameters } from '$lib/services/events-service';
 import type { WorkflowEvents } from '$lib/types/events';
 import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
+import { getSDKandVersion } from '$lib/utilities/get-sdk-version';
 import {
   isLocalActivityMarkerEvent,
   isResetEvent,
+  isWorkflowTaskCompletedEvent,
 } from '$lib/utilities/is-event-type';
 
 import { eventFilterSort } from './event-view';
@@ -69,6 +71,11 @@ export const resetEvents = derived(fullEventHistory, (events) =>
   events.filter(isResetEvent),
 );
 
+export const sdkInfo = derived(fullEventHistory, ($history) => {
+  const workflowCompletedTasks = $history.filter(isWorkflowTaskCompletedEvent);
+  return getSDKandVersion(workflowCompletedTasks);
+});
+
 export const decodeEventHistory = persistStore<boolean>(
   'decodeEventHistory',
   true,
diff --git a/src/lib/stores/filters.ts b/src/lib/stores/filters.ts
index 7eaccadd83..46c125b439 100644
--- a/src/lib/stores/filters.ts
+++ b/src/lib/stores/filters.ts
@@ -84,6 +84,21 @@ export const activityFilters = writable<SearchAttributeFilter[]>(
   updateActivityFilters,
 );
 
+const updateWorkerFilters: StartStopNotifier<SearchAttributeFilter[]> = (
+  set,
+) => {
+  return parameters.subscribe(({ query }) => {
+    if (!query && get(workerFilters).length) {
+      set([]);
+    }
+  });
+};
+
+export const workerFilters = writable<SearchAttributeFilter[]>(
+  [],
+  updateWorkerFilters,
+);
+
 const updateEventCategoryFilter: StartStopNotifier<
   EventTypeCategory[] | null
 > = (set) => {
diff --git a/src/lib/stores/search-attributes.ts b/src/lib/stores/search-attributes.ts
index a7939e1f01..78551e2baf 100644
--- a/src/lib/stores/search-attributes.ts
+++ b/src/lib/stores/search-attributes.ts
@@ -1,4 +1,4 @@
-import { derived, get, type Readable, writable } from 'svelte/store';
+import { derived, get, readable, type Readable, writable } from 'svelte/store';
 
 import { z } from 'zod/v3';
 
@@ -191,6 +191,30 @@ export const sortedSearchAttributeOptions: Readable<SearchAttributeOption[]> =
       });
   });
 
+export const workerSearchAttributes: Readable<SearchAttributes> = readable({
+  WorkerStatus: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+  WorkerInstanceKey: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+  WorkerIdentity: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+  HostName: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+  TaskQueue: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+  StartTime: SEARCH_ATTRIBUTE_TYPE.DATETIME,
+  LastHeartbeatTime: SEARCH_ATTRIBUTE_TYPE.DATETIME,
+  DeploymentName: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+  BuildId: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+  SdkName: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+  SdkVersion: SEARCH_ATTRIBUTE_TYPE.KEYWORD,
+});
+
+export const workerSearchAttributeOptions: Readable<SearchAttributeOption[]> =
+  derived(workerSearchAttributes, ($workerSearchAttributes) => {
+    return Object.entries($workerSearchAttributes).map(([key, value]) => {
+      return {
+        label: key,
+        value: key,
+        type: value,
+      };
+    });
+  });
 export const activitySearchAttributeOptions: Readable<SearchAttributeOption[]> =
   derived(customSearchAttributeOptions, ($customSearchAttributeOptions) => {
     return [
diff --git a/src/lib/types/api.ts b/src/lib/types/api.ts
index 7aa11f7afa..619600928a 100644
--- a/src/lib/types/api.ts
+++ b/src/lib/types/api.ts
@@ -43,7 +43,10 @@ export type ParameterlessAPIRoutePath =
   | 'user'
   | 'nexus-endpoints'
   | 'namespaces';
-export type WorkerAPIRoutePath = 'worker-task-reachability';
+export type WorkerAPIRoutePath =
+  | 'worker-task-reachability'
+  | 'workers'
+  | 'worker';
 export type SchedulesAPIRoutePath = 'schedules' | 'schedules.count';
 export type ScheduleAPIRoutePath =
   | 'schedule'
@@ -99,6 +102,7 @@ export type APIRouteParameters = {
   endpointId: string;
   deploymentName: string;
   version: string;
+  workerInstanceKey: string;
 };
 
 export type StandaloneActivitiesParameters = Pick<
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 2c977f7d38..cd35cfe894 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -49,6 +49,14 @@ export type PauseWorkflowRequest =
   temporal.api.workflowservice.v1.IPauseWorkflowExecutionRequest;
 export type UnpauseWorkflowRequest =
   temporal.api.workflowservice.v1.IUnpauseWorkflowExecutionRequest;
+export type ListWorkersRequest =
+  temporal.api.workflowservice.v1.IListWorkersRequest;
+export type ListWorkersResponse =
+  temporal.api.workflowservice.v1.IListWorkersResponse;
+export type DescribeWorkerRequest =
+  temporal.api.workflowservice.v1.IDescribeWorkerRequest;
+export type DescribeWorkerResponse =
+  temporal.api.workflowservice.v1.IDescribeWorkerResponse;
 
 // api.history
 
@@ -178,6 +186,7 @@ export type PendingNexusOperationState =
 export type CallbackState = temporal.api.enums.v1.CallbackState;
 export type VersioningBehavior = temporal.api.enums.v1.VersioningBehavior;
 export type EventType = temporal.api.enums.v1.EventType;
+export type WorkerStatus = temporal.api.enums.v1.WorkerStatus;
 
 // temporal.api.enums.v1.ResetReapplyExcludeType
 export enum ResetReapplyExcludeType {
@@ -271,6 +280,18 @@ export type EventLink = temporal.api.common.v1.ILink;
 // api.failure
 export type Failure = temporal.api.failure.v1.IFailure;
 
+// api.worker
+export type WorkerHostInfo = temporal.api.worker.v1.IWorkerHostInfo & {
+  workerGroupingKey?: string;
+};
+export type WorkerHeartbeat = temporal.api.worker.v1.IWorkerHeartbeat & {
+  hostInfo?: WorkerHostInfo;
+};
+export type WorkerPollerInfo = temporal.api.worker.v1.IWorkerPollerInfo;
+export type WorkerSlotsInfo = temporal.api.worker.v1.IWorkerSlotsInfo;
+export type WorkerInfo = temporal.api.worker.v1.IWorkerInfo;
+export type PluginInfo = temporal.api.worker.v1.PluginInfo;
+
 // google
 
 export type Timestamp = google.protobuf.ITimestamp;
diff --git a/src/lib/utilities/get-sdk-version.ts b/src/lib/utilities/get-sdk-version.ts
index 182ca4f948..78f815616e 100644
--- a/src/lib/utilities/get-sdk-version.ts
+++ b/src/lib/utilities/get-sdk-version.ts
@@ -2,6 +2,19 @@ import type { WorkflowTaskCompletedEvent } from '$lib/types/events';
 
 import { capitalize } from './format-camel-case';
 
+export const formatSDKName = (sdkName: string | undefined | null): string => {
+  let sdk = '';
+  if (!sdkName) return sdk;
+
+  const parts = sdkName.split('-');
+  sdk = capitalize(parts[1] ?? parts[0]);
+  if (sdk === 'Dotnet') {
+    sdk = '.NET';
+  }
+
+  return sdk;
+};
+
 export const getSDKandVersion = (
   tasks: WorkflowTaskCompletedEvent[],
 ): { sdk: string; version: string } => {
@@ -16,10 +29,7 @@ export const getSDKandVersion = (
       const sdkName = sdkMetadata?.sdkName;
       const sdkVersion = sdkMetadata?.sdkVersion;
       if (sdkName) {
-        sdk = capitalize(sdkName.split('-')[1]);
-        if (sdk === 'Dotnet') {
-          sdk = '.NET';
-        }
+        sdk = formatSDKName(sdkName);
       }
       if (sdkVersion) {
         version = sdkVersion;
diff --git a/src/lib/utilities/is-running-with-no-workers.ts b/src/lib/utilities/is-running-with-no-workers.ts
new file mode 100644
index 0000000000..a6e10f3db5
--- /dev/null
+++ b/src/lib/utilities/is-running-with-no-workers.ts
@@ -0,0 +1,9 @@
+import type { WorkflowRunWithWorkers } from '$lib/stores/workflow-run';
+
+export function isRunningWithNoWorkers(
+  workflowRun: WorkflowRunWithWorkers,
+): boolean {
+  const { workflow, workers, workersLoaded } = workflowRun;
+  const isPending = workflow?.isRunning || workflow?.isPaused;
+  return Boolean(workersLoaded && isPending && !workers?.pollers?.length);
+}
diff --git a/src/lib/utilities/route-for-api.ts b/src/lib/utilities/route-for-api.ts
index ec198ddbb3..b8e724a400 100644
--- a/src/lib/utilities/route-for-api.ts
+++ b/src/lib/utilities/route-for-api.ts
@@ -3,6 +3,7 @@ import { get } from 'svelte/store';
 import { resolve } from '$app/paths';
 import { page } from '$app/stores';
 
+import type { DescribeWorkerRequest } from '$lib/types';
 import type {
   APIRouteParameters,
   APIRoutePath,
@@ -120,6 +121,7 @@ const encode = (
       endpointId: '',
       deploymentName: '',
       version: '',
+      workerInstanceKey: '',
     },
   );
 };
@@ -151,6 +153,8 @@ export function pathForApi(
     'task-queue.compatibility': `/namespaces/${parameters?.namespace}/task-queues/${parameters?.queue}/worker-build-id-compatibility`,
     'task-queue.rules': `/namespaces/${parameters?.namespace}/task-queues/${parameters?.queue}/worker-versioning-rules`,
     user: '/me',
+    workers: `/namespaces/${parameters?.namespace}/workers`,
+    worker: `/namespaces/${parameters?.namespace}/workers/describe/${parameters?.workerInstanceKey}`,
     'worker-task-reachability': `/namespaces/${parameters?.namespace}/worker-task-reachability`,
     'workflow.terminate': `/namespaces/${parameters?.namespace}/workflows/${parameters?.workflowId}/terminate`,
     'workflow.cancel': `/namespaces/${parameters?.namespace}/workflows/${parameters?.workflowId}/cancel`,
@@ -211,7 +215,7 @@ export function routeForApi(
 ): string;
 export function routeForApi(
   route: WorkerAPIRoutePath,
-  parameters: NamespaceRouteParameters,
+  parameters: DescribeWorkerRequest,
   shouldEncode?: boolean,
 ): string;
 export function routeForApi(
diff --git a/src/lib/utilities/route-for-base-path.test.ts b/src/lib/utilities/route-for-base-path.test.ts
index eefa10464a..b575b03e6e 100644
--- a/src/lib/utilities/route-for-base-path.test.ts
+++ b/src/lib/utilities/route-for-base-path.test.ts
@@ -54,7 +54,9 @@ import {
   routeForWorkerDeployment,
   routeForWorkerDeployments,
   routeForWorkerDeploymentVersion,
+  routeForWorkerInstance,
   routeForWorkers,
+  routeForWorkersWithQuery,
   routeForWorkflow,
   routeForWorkflowMemo,
   routeForWorkflowQuery,
@@ -63,6 +65,7 @@ import {
   routeForWorkflowStart,
   routeForWorkflowsWithQuery,
   routeForWorkflowUpdate,
+  routeForWorkflowWorkers,
 } from './route-for';
 
 describe('routeFor functions should resolve the base path exactly once', () => {
@@ -108,7 +111,7 @@ describe('routeFor functions should resolve the base path exactly once', () => {
     ],
     ['routeForEventHistory', () => routeForEventHistory(workflowParams)],
     ['routeForTimeline', () => routeForTimeline(workflowParams)],
-    ['routeForWorkers', () => routeForWorkers(workflowParams)],
+    ['routeForWorkers', () => routeForWorkers(namespaceParams)],
     [
       'routeForWorkerDeployments',
       () => routeForWorkerDeployments(namespaceParams),
@@ -201,6 +204,19 @@ describe('routeFor functions should resolve the base path exactly once', () => {
         }),
     ],
     ['routeForLoginPage', () => routeForLoginPage('', false)],
+    ['routeForWorkflowWorkers', () => routeForWorkflowWorkers(workflowParams)],
+    [
+      'routeForWorkerInstance',
+      () =>
+        routeForWorkerInstance({
+          namespace: 'default',
+          workerInstanceKey: 'worker-1',
+        }),
+    ],
+    [
+      'routeForWorkersWithQuery',
+      () => routeForWorkersWithQuery({ namespace: 'default', query: 'test' }),
+    ],
   ];
 
   it.each(cases)('%s should resolve the base path', (_name, fn) => {
diff --git a/src/lib/utilities/route-for.test.ts b/src/lib/utilities/route-for.test.ts
index 8204b1b8d3..f77ee3a2a0 100644
--- a/src/lib/utilities/route-for.test.ts
+++ b/src/lib/utilities/route-for.test.ts
@@ -19,11 +19,11 @@ import {
   routeForScheduleCreate,
   routeForSchedules,
   routeForTaskQueue,
-  routeForWorkers,
   routeForWorkflow,
   routeForWorkflowQuery,
   routeForWorkflows,
   routeForWorkflowsWithQuery,
+  routeForWorkflowWorkers,
 } from './route-for';
 
 describe('routeFor', () => {
@@ -117,7 +117,7 @@ describe('routeFor', () => {
   });
 
   it('should route to "workers"', () => {
-    const path = routeForWorkers({
+    const path = routeForWorkflowWorkers({
       namespace: 'default',
       workflow: 'abc',
       run: 'def',
diff --git a/src/lib/utilities/route-for.ts b/src/lib/utilities/route-for.ts
index 413a07f448..6bd5b7e24e 100644
--- a/src/lib/utilities/route-for.ts
+++ b/src/lib/utilities/route-for.ts
@@ -27,7 +27,7 @@ type RouteParameters = {
 };
 
 export type NamespaceParameter = Pick<RouteParameters, 'namespace'>;
-export type WorkflowsParameter = Pick<
+export type QueryParameters = Pick<
   RouteParameters,
   'namespace' | 'query' | 'page'
 >;
@@ -192,7 +192,7 @@ export const routeForWorkflowsWithQuery = ({
   namespace,
   query,
   page,
-}: WorkflowsParameter): ResolvedPathname | undefined => {
+}: QueryParameters): ResolvedPathname | undefined => {
   if (!BROWSER) {
     return undefined;
   }
@@ -290,6 +290,27 @@ export const routeForTimeline = ({
 };
 
 export const routeForWorkers = (
+  parameters: NamespaceParameter,
+): ResolvedPathname => {
+  return `${routeForNamespace({ namespace: parameters.namespace })}/workers`;
+};
+
+export const routeForWorkersWithQuery = ({
+  namespace,
+  query,
+  page,
+}: QueryParameters): ResolvedPathname | undefined => {
+  if (!BROWSER) {
+    return undefined;
+  }
+
+  return toURL(routeForWorkers({ namespace }), {
+    query: query ?? '',
+    ...(page && { page }),
+  });
+};
+
+export const routeForWorkflowWorkers = (
   parameters: WorkflowParameters,
 ): ResolvedPathname => {
   return `${routeForWorkflow(parameters)}/workers`;
@@ -300,8 +321,22 @@ export const routeForWorkerDeployments = ({
 }: {
   namespace: string;
 }): ResolvedPathname => {
-  return resolve('/namespaces/[namespace]/worker-deployments', {
+  return resolve('/namespaces/[namespace]/workers/deployments', {
+    namespace,
+  });
+};
+
+export const routeForWorkerInstance = ({
+  namespace,
+  workerInstanceKey,
+}: {
+  namespace: string;
+  workerInstanceKey: string;
+}) => {
+  const workerInstanceKeyEncoded = encodeURIForSvelte(workerInstanceKey);
+  return resolve('/namespaces/[namespace]/workers/[workerInstanceKey]', {
     namespace,
+    workerInstanceKey: workerInstanceKeyEncoded,
   });
 };
 
@@ -313,7 +348,7 @@ export const routeForWorkerDeployment = ({
   deployment: string;
 }): ResolvedPathname => {
   const deploymentName = encodeURIForSvelte(deployment);
-  return resolve('/namespaces/[namespace]/worker-deployments/[deployment]', {
+  return resolve('/namespaces/[namespace]/workers/deployments/[deployment]', {
     namespace,
     deployment: deploymentName,
   });
diff --git a/src/lib/utilities/screaming-enums.ts b/src/lib/utilities/screaming-enums.ts
index 48b442f1fa..3c03bbeafb 100644
--- a/src/lib/utilities/screaming-enums.ts
+++ b/src/lib/utilities/screaming-enums.ts
@@ -1,8 +1,10 @@
+import type { WorkerStatus as ReadableWorkerStatus } from '$lib/models/worker-status';
 import type {
   ArchivalState,
   CallbackState,
   NamespaceState,
   PendingNexusOperationState,
+  WorkerStatus,
   WorkflowExecutionStatus,
 } from '$lib/types';
 import type { BatchOperationState, BatchOperationType } from '$lib/types/batch';
@@ -81,7 +83,7 @@ export const toWorkflowTaskFailureReadable = (
 export const toPendingActivityStateReadable = (
   state?: PendingActivityState,
 ): PendingActivityState => {
-  if (!state) return state;
+  if (!state) return 'Unspecified';
   return fromScreamingEnum(state, 'PendingActivityState');
 };
 
@@ -98,3 +100,13 @@ export const toCallbackStateReadable = (
   if (!state) return state;
   return fromScreamingEnum(state, 'CallbackState');
 };
+
+export const toWorkerStatusReadable = (
+  state: WorkerStatus | undefined | null,
+): ReadableWorkerStatus => {
+  if (!state) return 'Unspecified';
+  return fromScreamingEnum(
+    state,
+    'WorkerStatus',
+  ) as unknown as ReadableWorkerStatus;
+};
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 97686cea2f..abdd1f0ecf 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -35,6 +35,7 @@
     routeForSchedules,
     routeForStandaloneActivities,
     routeForWorkerDeployments,
+    routeForWorkers,
     routeForWorkflows,
   } from '$lib/utilities/route-for';
   import { minimumVersionRequired } from '$lib/utilities/version-check';
@@ -55,7 +56,7 @@
     isCloud
       ? [page.params.namespace]
       : $namespaces.map(
-          (namespace: Namespace) => namespace?.namespaceInfo?.name,
+          (namespace: Namespace) => namespace?.namespaceInfo?.name as string,
         ),
   );
   let namespaceList: NamespaceListItem[] = $derived(
@@ -78,6 +79,7 @@
       standaloneActivitiesRoute: routeForStandaloneActivities({ namespace }),
       schedulesRoute: routeForSchedules({ namespace }),
       batchOperationsRoute: routeForBatchOperations({ namespace }),
+      workersRoute: routeForWorkers({ namespace }),
       workerDeploymentsRoute: routeForWorkerDeployments({ namespace }),
       archivalRoute: routeForArchivalWorkflows({ namespace }),
       namespacesRoute: routeForNamespaces(),
@@ -92,6 +94,7 @@
       standaloneActivitiesRoute,
       schedulesRoute,
       batchOperationsRoute,
+      workersRoute,
       workerDeploymentsRoute,
       archivalRoute,
       namespacesRoute,
@@ -102,6 +105,7 @@
       standaloneActivitiesRoute: string;
       schedulesRoute: string;
       batchOperationsRoute: string;
+      workersRoute: string;
       workerDeploymentsRoute: string;
       archivalRoute: string;
       namespacesRoute: string;
@@ -120,6 +124,7 @@
           !path.includes(workflowsRoute) &&
           !path.includes(schedulesRoute) &&
           !path.includes(batchOperationsRoute) &&
+          !path.includes(workersRoute) &&
           !path.includes(workerDeploymentsRoute) &&
           !path.includes(standaloneActivitiesRoute) &&
           !path.includes(archivalRoute),
@@ -152,11 +157,12 @@
         isActive: (path) => path.includes(batchOperationsRoute),
       },
       {
-        href: workerDeploymentsRoute,
-        icon: 'merge',
-        label: translate('deployments.deployments'),
-        tooltip: translate('deployments.worker-deployments'),
-        isActive: (path) => path.includes(workerDeploymentsRoute),
+        href: workersRoute,
+        icon: 'workers',
+        label: translate('workers.workers'),
+        tooltip: translate('workers.workers'),
+        isActive: (path) =>
+          path.includes(workersRoute) || path.includes(workerDeploymentsRoute),
       },
       {
         href: nexusRoute,
@@ -198,6 +204,7 @@
     workflowsRoute,
     schedulesRoute,
     batchOperationsRoute,
+    workersRoute,
     workerDeploymentsRoute,
     archivalRoute,
     standaloneActivitiesRoute,
@@ -206,6 +213,7 @@
     [
       workflowsRoute,
       schedulesRoute,
+      workersRoute,
       workerDeploymentsRoute,
       batchOperationsRoute,
       archivalRoute,
@@ -228,13 +236,21 @@
         fullRoute: routeForStandaloneActivities({ namespace }),
       },
       {
-        subPath: 'worker-deployments',
+        subPath: 'workers/deployments',
         fullRoute: routeForWorkerDeployments({ namespace }),
       },
+      {
+        subPath: 'workers',
+        fullRoute: routeForWorkers({ namespace }),
+      },
     ];
 
+    const segments = page.url.pathname.split('/').filter(Boolean);
+    const namespaceIndex = segments.indexOf(page.params.namespace);
+    const sectionSegments = segments.slice(namespaceIndex + 1);
+
     for (const { subPath, fullRoute } of namespacePages) {
-      if (page.url.pathname.endsWith(subPath)) {
+      if (sectionSegments.join('/').startsWith(subPath)) {
         return fullRoute;
       }
     }
diff --git a/src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte b/src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte
index 45155471cd..78635ae367 100644
--- a/src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/task-queues/+layout.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
-  import { translate } from '$lib/i18n/translate';
   interface Props {
     children: Snippet;
   }
   let { children }: Props = $props();
 </script>
 
-<p class="relative flex items-center gap-4" data-testid="task-queue-title">
-  {translate('common.task-queue')}
-</p>
 {@render children()}
diff --git a/src/routes/(app)/namespaces/[namespace]/task-queues/[queue]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/task-queues/[queue]/+page.svelte
index fb2e8c670e..f3f6e9404b 100644
--- a/src/routes/(app)/namespaces/[namespace]/task-queues/[queue]/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/task-queues/[queue]/+page.svelte
@@ -1,11 +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 TaskQueue from '$lib/pages/task-queue.svelte';
 
-  const queue = $page.params.queue;
+  const { namespace, queue } = $derived(page.params);
 </script>
 
-<PageTitle title={`Task Queue | ${queue}`} url={$page.url.href} />
-<TaskQueue />
+<PageTitle
+  title="{translate('workers.task-queue')} | {queue}"
+  url={page.url.href}
+/>
+<TaskQueue {namespace} {queue} />
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.svelte b/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.svelte
deleted file mode 100644
index da3d7ee384..0000000000
--- a/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-
-  import PageTitle from '$lib/components/page-title.svelte';
-  import WorkerDeployments from '$lib/pages/deployments.svelte';
-</script>
-
-<PageTitle title="Deployments" url={$page.url.href} />
-<WorkerDeployments />
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.ts b/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.ts
new file mode 100644
index 0000000000..0f968b2fbb
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/worker-deployments/+page.ts
@@ -0,0 +1,13 @@
+import { redirect } from '@sveltejs/kit';
+
+import type { PageLoad } from './$types';
+
+import { routeForWorkerDeployments } from '$lib/utilities/route-for';
+
+export const load: PageLoad = async function ({ params }) {
+  const { namespace } = params;
+  const route = routeForWorkerDeployments({
+    namespace,
+  });
+  redirect(301, route);
+};
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-deployments/[deployment]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/worker-deployments/[deployment]/+page.svelte
deleted file mode 100644
index afc428d7e4..0000000000
--- a/src/routes/(app)/namespaces/[namespace]/worker-deployments/[deployment]/+page.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-
-  import PageTitle from '$lib/components/page-title.svelte';
-  import Deployment from '$lib/pages/deployment.svelte';
-
-  const deployment = $page.params.deployment;
-</script>
-
-<PageTitle title={`Deployment | ${deployment}`} url={$page.url.href} />
-<Deployment />
diff --git a/src/routes/(app)/namespaces/[namespace]/worker-deployments/[deployment]/+page.ts b/src/routes/(app)/namespaces/[namespace]/worker-deployments/[deployment]/+page.ts
new file mode 100644
index 0000000000..60bb507ac2
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/worker-deployments/[deployment]/+page.ts
@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit';
+
+import type { PageLoad } from './$types';
+
+import { routeForWorkerDeployment } from '$lib/utilities/route-for';
+
+export const load: PageLoad = async function ({ params }) {
+  const { namespace, deployment } = params;
+  const route = routeForWorkerDeployment({
+    namespace,
+    deployment,
+  });
+  redirect(301, route);
+};
diff --git a/src/routes/(app)/namespaces/[namespace]/workers/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workers/+page.svelte
new file mode 100644
index 0000000000..6ce36a4496
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/workers/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import WorkersLayout from '$lib/layouts/workers-layout.svelte';
+  import Workers from '$lib/pages/workers.svelte';
+
+  const namespace = $derived(page.params.namespace);
+</script>
+
+<PageTitle title={translate('workers.workers')} url={page.url.href} />
+<WorkersLayout {namespace}>
+  <Workers />
+</WorkersLayout>
diff --git a/src/routes/(app)/namespaces/[namespace]/workers/[workerInstanceKey]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workers/[workerInstanceKey]/+page.svelte
new file mode 100644
index 0000000000..2ecec6b660
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/workers/[workerInstanceKey]/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import WorkerDetails from '$lib/pages/worker-details.svelte';
+
+  const workerInstanceKey = $derived(page.params.workerInstanceKey);
+</script>
+
+<PageTitle
+  title="{translate('workers.workers')} | {workerInstanceKey}"
+  url={page.url.href}
+/>
+<WorkerDetails />
diff --git a/src/routes/(app)/namespaces/[namespace]/workers/deployments/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workers/deployments/+page.svelte
new file mode 100644
index 0000000000..7c383d347a
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/workers/deployments/+page.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import WorkersLayout from '$lib/layouts/workers-layout.svelte';
+  import WorkerDeployments from '$lib/pages/deployments.svelte';
+
+  const namespace = $derived(page.params.namespace);
+</script>
+
+<PageTitle
+  title={translate('deployments.worker-deployments')}
+  url={page.url.href}
+/>
+<WorkersLayout {namespace}>
+  <WorkerDeployments />
+</WorkersLayout>
diff --git a/src/routes/(app)/namespaces/[namespace]/workers/deployments/[deployment]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workers/deployments/[deployment]/+page.svelte
new file mode 100644
index 0000000000..83c51e6e15
--- /dev/null
+++ b/src/routes/(app)/namespaces/[namespace]/workers/deployments/[deployment]/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import PageTitle from '$lib/components/page-title.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import Deployment from '$lib/pages/deployment.svelte';
+
+  const deployment = $derived(page.params.deployment);
+</script>
+
+<PageTitle
+  title="{translate('deployments.deployment')} | {deployment}"
+  url={page.url.href}
+/>
+<Deployment />
diff --git a/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/workers/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/workers/+page.svelte
index 44a0dc5f6a..69f9dca6b1 100644
--- a/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/workers/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/workers/+page.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
   import PageTitle from '$lib/components/page-title.svelte';
+  import WorkersTable from '$lib/components/workers/workers-table/task-queue-workers-table.svelte';
   import { translate } from '$lib/i18n/translate';
-  import WorkflowWorkers from '$lib/pages/workflow-workers.svelte';
   import { workflowRun } from '$lib/stores/workflow-run';
 
-  $: ({ workflow: workflowId } = $page.params);
-  $: ({ workers, workflow } = $workflowRun);
+  const { namespace, workflow: workflowId } = $derived(page.params);
+  const taskQueue = $derived($workflowRun?.workflow?.taskQueue ?? '');
+  const workerHeartbeatsEnabled = $derived(
+    !!page.data.namespace.namespaceInfo?.capabilities?.workerHeartbeats,
+  );
 </script>
 
 <PageTitle
   title={`${translate('workflows.workers-tab')} | ${workflowId}`}
-  url={$page.url.href}
+  url={page.url.href}
 />
-<WorkflowWorkers {workers} taskQueue={workflow?.taskQueue} />
+<WorkersTable {namespace} {taskQueue} useFallback={!workerHeartbeatsEnabled} />