diff --git a/ui100/package-lock.json b/ui100/package-lock.json
index 0073590f..afb9a608 100644
--- a/ui100/package-lock.json
+++ b/ui100/package-lock.json
@@ -22,6 +22,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.13.0",
+        "@types/d3-hierarchy": "^3.1.7",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.3",
@@ -1877,6 +1878,13 @@
         "@types/d3-selection": "*"
       }
     },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
diff --git a/ui100/package.json b/ui100/package.json
index e01341a3..ed724f3c 100644
--- a/ui100/package.json
+++ b/ui100/package.json
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/d3-hierarchy": "^3.1.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
diff --git a/ui100/src/Visualizer.tsx b/ui100/src/Visualizer.tsx
index 54f12423..2f54ebd2 100644
--- a/ui100/src/Visualizer.tsx
+++ b/ui100/src/Visualizer.tsx
@@ -49,8 +49,8 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
         }
         let g = tree();
         if(nodes.length === 0) return { nodes, edges };
-        const width = 100;
-        const height = 40;
+        const width = 125;
+        const height = 75;
         const hierarchy = stratify()
             .id((node) => node.id)
             .parentId((node) => edges.find((edge) => edge.target === node.id)?.source);
@@ -59,9 +59,9 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
         return {
             nodes: layout
                 .descendants()
-                .map((node) => ({ ...node.data, position: { x: node.x, y: node.y }})),
+                .map((node) => ({...node.data, position: {x: node.x, y: node.y}})),
             edges,
-        }
+        } as VisualOverview
     }
 
     useEffect(() => {
@@ -92,7 +92,7 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
 
 export default ({ vov, onSelectionChanged }: VisualizerProps) => {
     return (
-        <Box sx={{ width: "100%" }} height={{ xs: 400, sm: 600, md: 800 }}>
+        <Box sx={{ width: "100%", mt: 2 }} height={{ xs: 400, sm: 600, md: 800 }}>
             <ReactFlowProvider>
                 <Visualizer vov={vov} onSelectionChanged={onSelectionChanged} />
             </ReactFlowProvider>