diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
index bcde80ef5..2ee0b0ce2 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx
@@ -9,7 +9,12 @@
 
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Bounds, Coordinate, Id, ClientNode} from '../../ClientTypes';
-import {NestedNode, OnSelectNode, WireFrameMode} from '../../DesktopTypes';
+import {
+  NestedNode,
+  OnSelectNode,
+  TraversalMode,
+  WireFrameMode,
+} from '../../DesktopTypes';
 
 import {
   produce,
@@ -46,6 +51,7 @@ export const Visualization2D: React.FC<
   const hoveredNodes = useValue(instance.uiState.hoveredNodes);
   const hoveredNodeId = head(hoveredNodes);
   const wireFrameMode = useValue(instance.uiState.wireFrameMode);
+  const traversalMode = useValue(instance.uiState.currentTraversalMode);
 
   const [targetMode, setTargetMode] = useState<TargetModeState>({
     state: 'disabled',
@@ -245,6 +251,7 @@ export const Visualization2D: React.FC<
             selectedNode={selectedNodeId?.id}
             node={focusState.focusedRoot}
             onSelectNode={onSelectNode}
+            traversalMode={traversalMode}
           />
         </div>
       </div>
@@ -275,12 +282,16 @@ function Visualization2DNode({
   selectedNode,
   node,
   onSelectNode,
+  runThroughIndex,
+  traversalMode,
 }: {
   wireframeMode: WireFrameMode;
   isSelectedOrChildOrSelected: boolean;
   selectedNode?: Id;
   node: NestedNode;
   onSelectNode: OnSelectNode;
+  runThroughIndex?: number;
+  traversalMode: TraversalMode;
 }) {
   const instance = usePlugin(plugin);
 
@@ -300,7 +311,7 @@ function Visualization2DNode({
     nestedChildren = node.children;
   }
 
-  const children = nestedChildren.map((child) => (
+  const children = nestedChildren.map((child, index) => (
     <Visualization2DNode
       wireframeMode={wireframeMode}
       selectedNode={selectedNode}
@@ -308,6 +319,8 @@ function Visualization2DNode({
       key={child.id}
       node={child}
       onSelectNode={onSelectNode}
+      runThroughIndex={index + 1}
+      traversalMode={traversalMode}
     />
   ));
 
@@ -319,6 +332,7 @@ function Visualization2DNode({
     wireframeMode === 'All' ||
     (wireframeMode === 'SelectedAndChildren' && isSelectedOrChildOrSelected) ||
     (wireframeMode === 'SelectedOnly' && isSelected);
+  const showOrdinalIndices = traversalMode == 'accessibility-hierarchy';
 
   return (
     <div
@@ -338,6 +352,29 @@ function Visualization2DNode({
       {showBorder && <NodeBorder />}
 
       {children}
+      {showOrdinalIndices && (
+        <div
+          style={{
+            position: 'relative',
+            left: '-10px',
+            top: '-7px',
+            width: '20px',
+            height: '14px',
+            fontFamily: 'monospace',
+            borderRadius: '3px',
+            display: 'flex',
+            textAlign: 'center',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backdropFilter: 'blur(2px)',
+            border: '1px solid #00000081',
+            fontSize: '0.6em',
+            opacity: 0.8,
+            background: 'white',
+          }}>
+          {runThroughIndex}
+        </div>
+      )}
     </div>
   );
 }