diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index 04a801eee..d5e70366a 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -9,23 +9,40 @@
 
 import {Id, UINode} from '../types';
 import {DataNode} from 'antd/es/tree';
-import {Tree as AntTree, Typography} from 'antd';
+import {Tree as AntTree} from 'antd';
 import {DownOutlined} from '@ant-design/icons';
 import React from 'react';
 
 export function Tree(props: {
   rootId: Id;
   nodes: Map<Id, UINode>;
-  setSelectedNode: (id: Id) => void;
+  selectedNode?: Id;
+  onSelectNode: (id: Id) => void;
+  onHoveredNode: (id?: Id) => void;
 }) {
   const [antTree, inactive] = nodesToAntTree(props.rootId, props.nodes);
 
   return (
     <AntTree
+      onMouseLeave={() => {
+        //when mouse exits the entire tree then unhover
+        props.onHoveredNode(undefined);
+      }}
       showIcon
       showLine
+      titleRender={(node) => {
+        return (
+          <div
+            onMouseEnter={() => {
+              props.onHoveredNode(node.key as Id);
+            }}>
+            {node.title}
+          </div>
+        );
+      }}
+      selectedKeys={[props.selectedNode ?? '']}
       onSelect={(selected) => {
-        props.setSelectedNode(selected[0] as Id);
+        props.onSelectNode(selected[0] as Id);
       }}
       defaultExpandAll
       expandedKeys={[...props.nodes.keys()].filter(
diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
index 799265d14..2b404caff 100644
--- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
@@ -9,48 +9,52 @@
 
 import React from 'react';
 import {Bounds, Id, Tag, UINode} from '../types';
-import {styled, Layout} from 'flipper-plugin';
+import {styled, Layout, theme} from 'flipper-plugin';
 import {Typography} from 'antd';
 
 export const Visualization2D: React.FC<
-  {root: Id; nodes: Map<Id, UINode>} & React.HTMLAttributes<HTMLDivElement>
-> = ({root, nodes}) => {
-  //
-  const bounds = nodes.get(root)?.bounds;
-  const rootBorderStyle = bounds
-    ? {
-        borderWidth: '3px',
-        margin: '-3px',
-        borderStyle: 'solid',
-        borderColor: 'black',
-        width: bounds.width / 2,
-        height: bounds.height / 2,
-      }
-    : {};
+  {
+    root: Id;
+    nodes: Map<Id, UINode>;
+    hoveredNode?: Id;
+    onSelectNode: (id: Id) => void;
+  } & React.HTMLAttributes<HTMLDivElement>
+> = ({root, nodes, hoveredNode, onSelectNode}) => {
   return (
     <Layout.Container gap="large">
       <Typography.Title>Visualizer</Typography.Title>
+
       <div
         style={{
           //this sets the reference frame for the absolute positioning
-          //of the nodes
+          //of the individual absolutely positioned nodes
           position: 'relative',
-          // ...rootBorderStyle,
         }}>
-        <VisualizationNode isRoot nodeId={root} nodes={nodes} />;
+        <Visualization2DNode
+          isRoot
+          nodeId={root}
+          nodes={nodes}
+          hoveredNode={hoveredNode}
+          onSelectNode={onSelectNode}
+        />
+        ;
       </div>
     </Layout.Container>
   );
 };
 
-function VisualizationNode({
+function Visualization2DNode({
   nodeId,
   nodes,
   isRoot,
+  hoveredNode,
+  onSelectNode,
 }: {
   isRoot: boolean;
   nodeId: Id;
   nodes: Map<Id, UINode>;
+  hoveredNode?: Id;
+  onSelectNode: (id: Id) => void;
 }) {
   const node = nodes.get(nodeId);
 
@@ -58,19 +62,28 @@ function VisualizationNode({
     return null;
   }
 
-  let childrenIds = node.children;
+  const isHovered = hoveredNode === nodeId;
 
-  //if there is an active child dont draw the other children
-  //this means we don't draw overlapping activities / tabs
-  if (node.activeChild) {
-    childrenIds = [node.activeChild];
+  let childrenIds: Id[] = [];
+
+  if (!isHovered) {
+    //if there is an active child don't draw the other children
+    //this means we don't draw overlapping activities / tabs etc
+    if (node.activeChild) {
+      childrenIds = [node.activeChild];
+    } else {
+      childrenIds = node.children;
+    }
   }
+
   const children = childrenIds.map((childId) => (
-    <VisualizationNode
+    <Visualization2DNode
       isRoot={false}
       key={childId}
       nodeId={childId}
       nodes={nodes}
+      hoveredNode={hoveredNode}
+      onSelectNode={onSelectNode}
     />
   ));
 
@@ -81,7 +94,15 @@ function VisualizationNode({
   const isZeroWidthOrHeight =
     node.bounds?.height === 0 || node.bounds?.width === 0;
   return (
-    <BoundsBox bounds={node.bounds} isRoot={isRoot} tags={node.tags}>
+    <BoundsBox
+      onClick={(e) => {
+        e.stopPropagation();
+        onSelectNode(nodeId);
+      }}
+      bounds={node.bounds}
+      isRoot={isRoot}
+      tags={node.tags}
+      isHovered={isHovered}>
       {/* Dirty hack to avoid showing highly overlapping text */}
       {!hasOverlappingChild && !isZeroWidthOrHeight && node.bounds
         ? node.name
@@ -94,11 +115,13 @@ function VisualizationNode({
 const BoundsBox = styled.div<{
   bounds?: Bounds;
   isRoot: boolean;
+  isHovered: boolean;
   tags: Tag[];
 }>((props) => {
   const bounds = props.bounds ?? {x: 0, y: 0, width: 0, height: 0};
   return {
     // borderWidth: props.isRoot ? '5px' : '1px',
+    cursor: 'pointer',
     borderWidth: '1px',
     //to offset the border
     margin: '-1px',
@@ -109,6 +132,7 @@ const BoundsBox = styled.div<{
       : 'black',
     borderStyle: 'solid',
     position: 'absolute',
+    backgroundColor: props.isHovered ? theme.selectionBackgroundColor : 'white',
     //todo need to understand why its so big and needs halving
     left: bounds.x / 2,
     top: bounds.y / 2,
diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index 3000e5d7a..a299cbd8c 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -31,6 +31,7 @@ export function Component() {
 
   const [showPerfStats, setShowPerfStats] = useState(false);
   const [selectedNode, setSelectedNode] = useState<Id | undefined>(undefined);
+  const [hoveredNode, setHoveredNode] = useState<Id | undefined>(undefined);
 
   useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
 
@@ -58,11 +59,18 @@ export function Component() {
         <Layout.ScrollContainer>
           <Layout.Horizontal>
             <Tree
-              setSelectedNode={setSelectedNode}
+              selectedNode={selectedNode}
+              onSelectNode={setSelectedNode}
+              onHoveredNode={setHoveredNode}
               nodes={nodes}
               rootId={rootId}
             />
-            <Visualization2D root={rootId} nodes={nodes} />
+            <Visualization2D
+              root={rootId}
+              nodes={nodes}
+              hoveredNode={hoveredNode}
+              onSelectNode={setSelectedNode}
+            />
           </Layout.Horizontal>
         </Layout.ScrollContainer>
         {selectedNode && renderAttributesInspector(nodes.get(selectedNode))}