diff --git a/.changeset/eighty-results-prove.md b/.changeset/eighty-results-prove.md
new file mode 100644
index 0000000000..6df2d2f11a
--- /dev/null
+++ b/.changeset/eighty-results-prove.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app-visualizer': patch
+---
+
+Improve tree visualizer to use a horizontal layout and fill the content space.
diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
index 8532168bc0..b9058cb87b 100644
--- a/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
+++ b/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
@@ -153,18 +153,22 @@ export function TreeVisualizer({ tree }: { tree: AppTree }) {
   const graphData = useMemo(() => resolveGraphData(tree), [tree]);
 
   return (
-    <Box height="100%" flex="1 1 100%" flexDirection="column" overflow="hidden">
+    <Box
+      flex="1 1 0"
+      display="flex"
+      justifyContent="stretch"
+      alignItems="stretch"
+      overflow="hidden"
+    >
       <DependencyGraph
         fit="contain"
-        style={{ height: '100%', width: '100%' }}
         {...graphData}
         nodeMargin={10}
         rankMargin={50}
         paddingX={50}
         renderNode={Node}
-        align={DependencyGraphTypes.Alignment.DOWN_RIGHT}
         ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}
-        direction={DependencyGraphTypes.Direction.TOP_BOTTOM}
+        direction={DependencyGraphTypes.Direction.LEFT_RIGHT}
       />
     </Box>
   );