diff --git a/apps/visr/src/components/tomography/SliceViewer.tsx b/apps/visr/src/components/tomography/SliceViewer.tsx
index 132ad5fa..f4823fb2 100644
--- a/apps/visr/src/components/tomography/SliceViewer.tsx
+++ b/apps/visr/src/components/tomography/SliceViewer.tsx
@@ -63,20 +63,23 @@ export default function SliceViewer({
           Slice View
         </Typography>
       </Box>
-      <div
-        style={{
+      <Box
+        sx={{
           flex: 1,
+          display: "flex",
+          minHeight: 0,
           justifyContent: "center",
+          overflow: "hidden",
         }}
       >
         <HeatmapPlot
-          aspect="auto"
+          aspect="equal"
           plotConfig={{}}
           values={sliceNdarray}
           domain={[0, 255]}
           customToolbarChildren={null}
         />
-      </div>
+      </Box>
     </Box>
   );
 }
diff --git a/apps/visr/src/components/tomography/TomographyPlots.tsx b/apps/visr/src/components/tomography/TomographyPlots.tsx
index d0d33376..b0d59f8f 100644
--- a/apps/visr/src/components/tomography/TomographyPlots.tsx
+++ b/apps/visr/src/components/tomography/TomographyPlots.tsx
@@ -4,6 +4,7 @@ import VolumeViewer from "./VolumeViewer";
 import SliceViewer from "./SliceViewer";
 import { Plane } from "./PlaneEnum";
 import { ReactGridLayout, useContainerWidth } from "react-grid-layout";
+import { useLayoutEffect, useState } from "react";
 
 interface Props {
   volumeData: Uint8Array;
@@ -25,6 +26,29 @@ function TomographyPlots({
   const { width, containerRef, mounted } = useContainerWidth();
   const h = 10;
   const w = 1;
+  const minimumRowHeight = 20;
+  const minimumGridHeight = minimumRowHeight * h;
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      setContainerHeight(entry.contentRect.height);
+    });
+    resizeObserver.observe(container);
+
+    return () => resizeObserver.disconnect();
+  }, [containerRef]);
+
+  const rowHeight =
+    containerHeight > 0
+      ? Math.max(containerHeight / h, minimumRowHeight)
+      : drawerOpen
+        ? minimumRowHeight
+        : 50;
+  const gridHeight = rowHeight * h;
 
   const layout = [
     { i: "0", x: 0, y: 0, w: w, h: h, static: true },
@@ -52,24 +76,37 @@ function TomographyPlots({
     <Box
       key={i}
       sx={{
-        flex: 1,
+        width: "100%",
+        height: "100%",
         minWidth: 260,
+        maxHeight: gridHeight,
       }}
     >
       {view}
     </Box>
   ));
-  console.log(plots[0]);
+
   return (
-    <Box ref={containerRef! as React.RefObject<HTMLDivElement>} color="blue">
+    <Box
+      ref={containerRef! as React.RefObject<HTMLDivElement>}
+      sx={{
+        flex: "1 1 0",
+        width: "100%",
+        minWidth: 0,
+        height: gridHeight,
+        minHeight: minimumGridHeight,
+        overflow: "visible",
+      }}
+    >
       {mounted && (
         <ReactGridLayout
           layout={layout}
           width={width}
+          style={{ height: gridHeight }}
           gridConfig={{
             cols: drawerOpen ? 3 : 3,
-            rowHeight: drawerOpen ? 25 : 50,
-            margin: [20, 20], //twice the margin of Spectroscopy plots as half the number of rows
+            rowHeight: rowHeight,
+            margin: [0, 0],
           }}
         >
           {plots}