diff --git a/webui/react/src/pages/ResourcePool/ResourcepoolDetail.tsx b/webui/react/src/pages/ResourcePool/ResourcepoolDetail.tsx
index 6f9bd9eca2e..f8f64a73c60 100644
--- a/webui/react/src/pages/ResourcePool/ResourcepoolDetail.tsx
+++ b/webui/react/src/pages/ResourcePool/ResourcepoolDetail.tsx
@@ -81,6 +81,11 @@ const ResourcepoolDetailInner: React.FC = () => {
   const [tabKey, setTabKey] = useState<TabType>(tab ?? DEFAULT_POOL_TAB_KEY);
   const [poolStats, setPoolStats] = useState<V1RPQueueStat>();
 
+  const topologyAgentPool = useMemo(
+    () => (poolname ? agents.filter(({ resourcePools }) => resourcePools.includes(poolname)) : []),
+    [poolname, agents],
+  );
+
   const fetchStats = useCallback(async () => {
     try {
       const promises = [getJobQStats({}, { signal: canceler.signal })] as [
@@ -219,11 +224,7 @@ const ResourcepoolDetailInner: React.FC = () => {
             size={ShirtSize.Large}
           />
         </Section>
-        {!!agents.length && poolname && (
-          <Topology
-            nodes={agents.filter(({ resourcePools }) => resourcePools.includes(poolname))}
-          />
-        )}
+        {!!topologyAgentPool.length && poolname && <Topology nodes={topologyAgentPool} />}
         <Section>
           {pool.schedulerType === V1SchedulerType.ROUNDROBIN ? (
             <Section>
diff --git a/webui/react/src/pages/ResourcePool/Topology.module.scss b/webui/react/src/pages/ResourcePool/Topology.module.scss
index 7edf14ae255..14a061c6b7a 100644
--- a/webui/react/src/pages/ResourcePool/Topology.module.scss
+++ b/webui/react/src/pages/ResourcePool/Topology.module.scss
@@ -50,7 +50,7 @@
       .singleSlot {
         width: 90px;
       }
-      .fewSlot {
+      .coupleSlot {
         width: 42px;
       }
       .active {
diff --git a/webui/react/src/pages/ResourcePool/Topology.tsx b/webui/react/src/pages/ResourcePool/Topology.tsx
index 0425f366819..de1c26974b1 100644
--- a/webui/react/src/pages/ResourcePool/Topology.tsx
+++ b/webui/react/src/pages/ResourcePool/Topology.tsx
@@ -2,29 +2,34 @@ import Tooltip from 'hew/Tooltip';
 import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
 
 import Section from 'components/Section';
-import { Agent, Resource } from 'types';
+import { Agent, Resource, SlotsRecord } from 'types';
 
 import css from './Topology.module.scss';
 
 interface NodeElementProps {
   name: string;
-  slots: Resource[];
+  resources: Resource[];
+  slots?: SlotsRecord;
 }
 
 interface Props {
   nodes: Agent[];
 }
 
-const NodeElement: React.FC<PropsWithChildren<NodeElementProps>> = ({ name, slots }) => {
+const NodeElement: React.FC<PropsWithChildren<NodeElementProps>> = ({ name, slots, resources }) => {
   const [containerWidth, setContainerWidth] = useState(0);
   const shouldTruncate = useMemo(() => name.length > 5, [name]);
   const slotsContainer = useRef<HTMLSpanElement>(null);
-  const singleSlot = slots.length === 1;
-  const fewSlot = slots.length === 2;
+  const slotsData = useMemo(
+    () => (slots !== undefined ? Object.values(slots) : resources),
+    [slots, resources],
+  );
+  const singleSlot = slotsData.length === 1;
+  const coupleSlot = slotsData.length === 2;
   const styles = [css.nodeSlot];
 
   if (singleSlot) styles.push(css.singleSlot);
-  if (fewSlot) styles.push(css.fewSlot);
+  if (coupleSlot) styles.push(css.coupleSlot);
 
   useEffect(() => {
     setContainerWidth(slotsContainer.current?.getBoundingClientRect().width || 0);
@@ -42,7 +47,7 @@ const NodeElement: React.FC<PropsWithChildren<NodeElementProps>> = ({ name, slot
         <span className={css.nodeName}>{name}</span>
       )}
       <span className={css.nodeCluster} ref={slotsContainer}>
-        {slots.map(({ enabled }, idx) => (
+        {slotsData.map(({ enabled }, idx) => (
           <span className={`${styles.join(' ')} ${enabled ? css.active : ''}`} key={`slot${idx}`} />
         ))}
       </span>
@@ -54,8 +59,8 @@ const Topology: React.FC<PropsWithChildren<Props>> = ({ nodes }) => {
   return (
     <Section title="Topology">
       <div className={`${css.mainContainer} ${css.nodesContainer}`}>
-        {nodes.map(({ id, resources }) => {
-          return <NodeElement key={id} name={id} slots={resources} />;
+        {nodes.map(({ id, resources, slots }) => {
+          return <NodeElement key={id} name={id} resources={resources} slots={slots} />;
         })}
       </div>
     </Section>
diff --git a/webui/react/src/types.ts b/webui/react/src/types.ts
index f9ddef3ec42..fd00c9b3f00 100644
--- a/webui/react/src/types.ts
+++ b/webui/react/src/types.ts
@@ -2,7 +2,7 @@ import * as t from 'io-ts';
 import { RouteProps } from 'react-router-dom';
 
 import * as Api from 'services/api-ts-sdk';
-import { V1AgentUserGroup, V1Group, V1LaunchWarning, V1Trigger } from 'services/api-ts-sdk';
+import { V1AgentUserGroup, V1Group, V1LaunchWarning, V1Slot, V1Trigger } from 'services/api-ts-sdk';
 import { valueof, ValueOf } from 'utils/valueof';
 
 export type { ValueOf } from 'utils/valueof';
@@ -233,10 +233,13 @@ export interface Resource {
   uuid?: string;
 }
 
+export type SlotsRecord = { [k: string]: V1Slot };
+
 export interface Agent {
   id: string;
   registeredTime: number;
   resourcePools: string[];
+  slots?: SlotsRecord;
   resources: Resource[];
 }