diff --git a/packages/mtc-artillery-overlay/src/Cargo.toml b/packages/mtc-artillery-overlay/src/Cargo.toml
index 553b5313..40c9137c 100644
--- a/packages/mtc-artillery-overlay/src/Cargo.toml
+++ b/packages/mtc-artillery-overlay/src/Cargo.toml
@@ -12,7 +12,7 @@ tauri-build = { version = "1", features = [] }
 
 [dependencies]
 dotenv = "0.15"
-tauri = { version = "1", features = [ "macos-private-api", "window-close", "window-start-dragging"] }
+tauri = { version = "1", features = [ "window-set-size", "macos-private-api", "window-close", "window-start-dragging"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 octocrab = "0.38.0"
diff --git a/packages/mtc-artillery-overlay/src/tauri.conf.json b/packages/mtc-artillery-overlay/src/tauri.conf.json
index 5e2e4de8..93d84033 100644
--- a/packages/mtc-artillery-overlay/src/tauri.conf.json
+++ b/packages/mtc-artillery-overlay/src/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "mtc-artillery-overlay",
-    "version": "0.2.3"
+    "version": "0.2.4"
   },
   "tauri": {
     "allowlist": {
@@ -18,6 +18,7 @@
       "window": {
         "all": false,
         "close": true,
+        "setSize": true,
         "startDragging": true
       }
     },
@@ -49,7 +50,7 @@
         "alwaysOnTop": true,
         "decorations": false,
         "fileDropEnabled": false,
-        "height": 546,
+        "height": 1000,
         "label": "main",
         "maximizable": false,
         "minimizable": false,
diff --git a/src/components/tauri/atoms/RowContainer.tsx b/src/components/tauri/atoms/RowContainer.tsx
index d8e91a7a..c99336c4 100644
--- a/src/components/tauri/atoms/RowContainer.tsx
+++ b/src/components/tauri/atoms/RowContainer.tsx
@@ -17,6 +17,11 @@ export default function RowContainer({
           alignItems: 'center',
           justifyContent: 'space-between',
           gap: 1,
+
+          '& .datacontainer': {
+            flexDirection: 'column',
+            gap: 0,
+          },
         },
         sx,
       )}
diff --git a/src/components/tauri/templates/Navigation.tsx b/src/components/tauri/templates/Navigation.tsx
index c27a29b6..59be254d 100644
--- a/src/components/tauri/templates/Navigation.tsx
+++ b/src/components/tauri/templates/Navigation.tsx
@@ -45,6 +45,7 @@ export default function Navigation() {
           onClick={async () => {
             try {
               const { appWindow } = await import('@tauri-apps/api/window');
+
               appWindow.close();
             } catch (error) {
               console.error(error);
diff --git a/src/views/Overlay.tsx b/src/views/Overlay.tsx
index 19e3265e..804632a9 100644
--- a/src/views/Overlay.tsx
+++ b/src/views/Overlay.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import ColumnContainer from '@/components/atoms/ColumnContainer';
 import AzimuthValue from '@/components/organisms/configuration/Azimuth';
+import DistanceValue from '@/components/organisms/configuration/Distance';
 import ElevationValue from '@/components/organisms/configuration/Elevation';
 import MapSelection from '@/components/organisms/configuration/Map';
 import ProjectileSelection from '@/components/organisms/configuration/Projectile';
@@ -19,6 +20,10 @@ declare global {
   }
 }
 
+const navigationHeight = 40;
+const canvasHeight = 326;
+const dataHeight = 225;
+
 export default function OverlayView() {
   React.useEffect(() => {
     const timeout = setTimeout(() => {
@@ -32,6 +37,24 @@ export default function OverlayView() {
     return () => clearTimeout(timeout);
   }, []);
 
+  React.useEffect(() => {
+    async function updateSize() {
+      try {
+        const { appWindow, LogicalSize } = await import(
+          '@tauri-apps/api/window'
+        );
+
+        await appWindow.setSize(
+          new LogicalSize(326, navigationHeight + canvasHeight + dataHeight),
+        );
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    updateSize();
+  }, []);
+
   return (
     <>
       <GlobalStyles
@@ -49,7 +72,7 @@ export default function OverlayView() {
       <Box
         sx={{
           display: 'grid',
-          gridTemplateRows: '40px 326px 180px',
+          gridTemplateRows: `${navigationHeight}px ${canvasHeight}px ${dataHeight}px`,
 
           borderRadius: 8,
           backgroundColor: 'black',
@@ -74,18 +97,17 @@ export default function OverlayView() {
             padding: 2,
           }}
         >
-          <RowContainer
-            sx={{
-              '& .datacontainer': {
-                flexDirection: 'column',
-                gap: 0,
-              },
-            }}
-          >
-            <ElevationValue />
+          <ColumnContainer sx={{ gap: 1 }}>
+            <RowContainer>
+              <ElevationValue />
 
-            <AzimuthValue />
-          </RowContainer>
+              <AzimuthValue />
+            </RowContainer>
+
+            <RowContainer>
+              <DistanceValue />
+            </RowContainer>
+          </ColumnContainer>
 
           <ColumnContainer
             sx={{