diff --git a/lang/dev/lobby.json b/lang/dev/lobby.json
index dab4fc9f5..d6114175d 100644
--- a/lang/dev/lobby.json
+++ b/lang/dev/lobby.json
@@ -296,20 +296,22 @@
             },
             "settings": {
                 "title": "seinttgs",
-                "fullscreen": "Fecrslluen",
-                "windowSize": "Wdoniw Size",
+                "sectionDisplay": "Daspliy",
+                "sectionSound": "Suond",
+                "sectionGeneral": "Geranel",
+                "resolution": "Rsueiloton",
+                "fullscreenOption": "Fecrslluen",
+                "maximizedOption": "Maimeixzd",
                 "display": "Daspliy",
                 "skipIntro": "Skip Inrto",
                 "loginAutomatically": "Lgoin Aluaclatitomy",
+                "uiScale": "Iartfnece slace",
                 "sfxVolume": "Sfx Vmolue",
                 "musicVolume": "Msuic Vmolue",
                 "devMode": "Dev Mode",
                 "uploadLogs": "Uolpad logs",
                 "logUrlCopied": "Log URL was cpeiod to clpbriaod.",
                 "couldNotUploadLog": "Culod not upolad log.",
-                "labelSm": "Samll",
-                "labelMd": "Meuidm",
-                "labelLg": "Lgare",
                 "labelDisplay": "Daspliy {id}",
                 "language": "Lguganae",
                 "storage": "Sraogte",
diff --git a/lang/en/lobby.json b/lang/en/lobby.json
index 2b7ffb9d4..202e1d35c 100644
--- a/lang/en/lobby.json
+++ b/lang/en/lobby.json
@@ -296,20 +296,22 @@
             },
             "settings": {
                 "title": "settings",
-                "fullscreen": "Fullscreen",
-                "windowSize": "Window Size",
+                "sectionDisplay": "Display",
+                "sectionSound": "Sound",
+                "sectionGeneral": "General",
+                "resolution": "Resolution",
+                "fullscreenOption": "Fullscreen",
+                "maximizedOption": "Maximized",
                 "display": "Display",
                 "skipIntro": "Skip Intro",
                 "loginAutomatically": "Login Automatically",
+                "uiScale": "Interface scale",
                 "sfxVolume": "Sfx Volume",
                 "musicVolume": "Music Volume",
                 "devMode": "Dev Mode",
                 "uploadLogs": "Upload logs",
                 "logUrlCopied": "Log URL was copied to clipboard.",
                 "couldNotUploadLog": "Could not upload log.",
-                "labelSm": "Small",
-                "labelMd": "Medium",
-                "labelLg": "Large",
                 "labelDisplay": "Display {id}",
                 "language": "Language",
                 "storage": "Storage",
diff --git a/src/main/config/window.ts b/src/main/config/window.ts
new file mode 100644
index 000000000..8fccfee34
--- /dev/null
+++ b/src/main/config/window.ts
@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: 2026 The BAR Lobby Authors
+//
+// SPDX-License-Identifier: MIT
+
+// Device independent pixels throughout. Chromium and the OS translate to physical pixels,
+// so a size given here is the same physical size on any display and needs no conversion.
+
+// Smallest and largest window the layout is expected to work in.
+export const MIN_WINDOW_SIZE = { width: 1280, height: 720 };
+
+// Windowed sizes are offered across this range of shapes; fullscreen uses the display's own.
+export const SUPPORTED_ASPECT_RATIOS = [
+    { label: "4:3", ratio: 4 / 3 },
+    { label: "16:10", ratio: 16 / 10 },
+    { label: "16:9", ratio: 16 / 9 },
+    { label: "21:9", ratio: 21 / 9 },
+];
+
+export const WINDOW_HEIGHT_STEPS = [720, 900, 1080, 1200, 1440];
+
+// Absolute interface scale, in the same units the OS calls its scaling percentage.
+export const UI_SCALE_MIN = 0.75;
+export const UI_SCALE_MAX = 2.5;
+export const UI_SCALE_STEP = 0.05;
+
+export const clampUiScale = (scale: number) => Math.min(UI_SCALE_MAX, Math.max(UI_SCALE_MIN, scale));
diff --git a/src/main/json/model/settings.ts b/src/main/json/model/settings.ts
index e1ea67b4b..0f197435c 100644
--- a/src/main/json/model/settings.ts
+++ b/src/main/json/model/settings.ts
@@ -4,10 +4,15 @@
 
 import { Type } from "@sinclair/typebox";
 
+import { UI_SCALE_MAX, UI_SCALE_MIN } from "@main/config/window";
+
 export const settingsSchema = Type.Object({
     fullscreen: Type.Boolean({ default: true }),
-    size: Type.Number({ default: 900 }),
+    maximized: Type.Boolean({ default: false }),
+    windowWidth: Type.Number({ default: 1280 }),
+    windowHeight: Type.Number({ default: 720 }),
     displayIndex: Type.Number({ default: 0 }),
+    uiScale: Type.Union([Type.Number({ minimum: UI_SCALE_MIN, maximum: UI_SCALE_MAX }), Type.Null()], { default: null }),
     skipIntro: Type.Boolean({ default: false }),
     sfxVolume: Type.Number({ default: 5, minimum: 0, maximum: 100 }),
     musicVolume: Type.Number({ default: 5, minimum: 0, maximum: 100 }),
diff --git a/src/main/main-window.ts b/src/main/main-window.ts
index ab25d4387..3cc2964a6 100644
--- a/src/main/main-window.ts
+++ b/src/main/main-window.ts
@@ -2,29 +2,25 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { app, BrowserWindow, nativeImage } from "electron";
+import { app, BrowserWindow, nativeImage, screen } from "electron";
 import path from "path";
 import { settingsService } from "./services/settings.service";
 import { logger } from "./utils/logger";
 import icon from "@main/resources/icon.png";
+import { MIN_WINDOW_SIZE, UI_SCALE_MAX, UI_SCALE_MIN, UI_SCALE_STEP } from "@main/config/window";
 import { purgeLogFiles } from "@main/services/log.service";
 import { typedWebContents, ipcMain } from "@main/typed-ipc";
 import { gameAPI } from "@main/game/game";
 import contentService from "@main/services/content.service";
 
-const ZOOM_FACTOR_BASELINE_HEIGHT = 1080;
-
 const log = logger("main-window");
 
 export function createWindow() {
     const settings = settingsService.getSettings();
     log.info("Creating main window with settings: ", settings);
 
-    function getWindowSize(windowedHeight: number) {
-        return {
-            width: (windowedHeight * 16) / 9,
-            height: windowedHeight,
-        };
+    function scaleRange() {
+        return { min: UI_SCALE_MIN, max: UI_SCALE_MAX, os: osScale() };
     }
 
     const mainWindow = new BrowserWindow({
@@ -35,9 +31,10 @@ export function createWindow() {
         frame: false,
         show: false,
         autoHideMenuBar: true,
-        ...getWindowSize(settings.size),
-        minWidth: 640,
-        minHeight: 360,
+        width: settings.windowWidth,
+        height: settings.windowHeight,
+        minWidth: MIN_WINDOW_SIZE.width,
+        minHeight: MIN_WINDOW_SIZE.height,
         backgroundColor: "#000000",
         webPreferences: {
             preload: path.join(__dirname, "../build/preload.js"),
@@ -51,26 +48,67 @@ export function createWindow() {
 
     // Disable zoom shortcuts
     webContents.on("before-input-event", (event, input) => {
-        // Block Ctrl/Cmd + '+', '-', '0' (zoom shortcuts)
-        if (((input.control || input.meta) && (input.key === "+" || input.key === "-" || input.key === "=")) || (input.key === "0" && (input.control || input.meta))) {
-            event.preventDefault();
-        }
+        // Chromium's own zoom is bypassed so the scale stays a persisted setting.
+        if (input.type !== "keyDown" || !(input.control || input.meta)) return;
+        const delta = input.key === "+" || input.key === "=" ? UI_SCALE_STEP : input.key === "-" ? -UI_SCALE_STEP : input.key === "0" ? 0 : null;
+        if (delta === null) return;
+
+        event.preventDefault();
+        nudgeUiScale(delta);
     });
 
+    // The setting is an absolute interface scale, matching what the OS calls its
+    // scaling percentage, so Chromium's own OS-derived scaling has to be divided out.
+    function osScale() {
+        return screen.getDisplayMatching(mainWindow.getBounds()).scaleFactor || 1;
+    }
+
+    function applyScale(uiScale: number | null) {
+        const { min, max, os } = scaleRange();
+
+        webContents.setZoomFactor(Math.min(max, Math.max(min, uiScale ?? os)) / os);
+    }
+
     function updateZoom() {
-        if (mainWindow.getContentSize()[1] > 0) {
-            const zoomFactor = mainWindow.getContentSize()[1] / ZOOM_FACTOR_BASELINE_HEIGHT;
-            webContents.setZoomFactor(zoomFactor);
-        }
+        applyScale(settingsService.getSettings().uiScale);
     }
 
-    // We handle direct window `resize` event, not only `mainWindow:resized` from renderer as
-    // that offers much lower latency and offers more fluid experience when resizing. We can't
-    // use only `resize` event as looks like under some platforms not all window shape changes
-    // trigger this event.
-    mainWindow.on("resize", () => {
-        updateZoom();
-    });
+    // Stored by the renderer, which writes the whole settings object and would otherwise
+    // overwrite a value set behind its back.
+    function nudgeUiScale(delta: number) {
+        const { min, max } = scaleRange();
+        const current = settingsService.getSettings().uiScale ?? osScale();
+        const next = delta === 0 ? null : Math.min(max, Math.max(min, Math.round((current + delta) * 100) / 100));
+
+        webContents.send("mainWindow:uiScaleNudged", next);
+    }
+
+    // Resize fires continuously while dragging, hence the trailing timer.
+    let zoomUpdate: NodeJS.Timeout | undefined;
+    function scheduleZoomUpdate() {
+        clearTimeout(zoomUpdate);
+        zoomUpdate = setTimeout(() => {
+            updateZoom();
+            webContents.send("mainWindow:scaleRangeChanged", scaleRange());
+            reportWindowState();
+        }, 100);
+    }
+
+    // No size while fullscreen or maximised, since the remembered one is where to return to.
+    function reportWindowState() {
+        const maximized = mainWindow.isMaximized();
+        const [width, height] = mainWindow.getSize();
+        const settled = !maximized && !mainWindow.isFullScreen();
+
+        webContents.send("mainWindow:windowStateChanged", { maximized, size: settled ? { width, height } : null });
+    }
+
+    mainWindow.on("resize", scheduleZoomUpdate);
+    mainWindow.on("maximize", scheduleZoomUpdate);
+    mainWindow.on("unmaximize", scheduleZoomUpdate);
+    mainWindow.on("enter-full-screen", scheduleZoomUpdate);
+    mainWindow.on("leave-full-screen", scheduleZoomUpdate);
+    mainWindow.on("closed", () => clearTimeout(zoomUpdate));
 
     process.env.MAIN_WINDOW_ID = mainWindow.id.toString();
 
@@ -85,6 +123,8 @@ export function createWindow() {
         // Note: `fullscreen: true` conflicts with `show: false`, so we apply fullscreen here.
         if (settings.fullscreen) {
             mainWindow.setFullScreen(true);
+        } else if (settings.maximized) {
+            mainWindow.maximize();
         }
         updateZoom();
         mainWindow.show();
@@ -111,30 +151,82 @@ export function createWindow() {
 
     app.on("browser-window-focus", () => mainWindow.flashFrame(false));
 
-    //TODO add an IPC handler for changing display via the settings
-
     // Register IPC handlers for the main window
     ipcMain.handle("mainWindow:setFullscreen", (_event, flag: boolean) => {
         mainWindow.setFullScreen(flag);
-        updateZoom();
     });
-    ipcMain.handle("mainWindow:setSize", (_event, size: number) => {
-        if (!mainWindow.isFullScreen() && !mainWindow.isMaximized()) {
-            const { width, height } = getWindowSize(size);
-            mainWindow.setSize(width, height);
+    ipcMain.handle("mainWindow:setMaximized", (_event, flag: boolean) => {
+        if (flag === mainWindow.isMaximized()) return;
+        if (!flag) {
+            mainWindow.unmaximize();
+            return;
         }
+
+        if (mainWindow.isFullScreen()) mainWindow.setFullScreen(false);
+        mainWindow.maximize();
+    });
+    ipcMain.handle("mainWindow:setSize", (_event, width: number, height: number) => {
+        // Their own settings are written alongside the size and applied first; leaving those
+        // modes here as well undid a revert back to fullscreen.
+        if (mainWindow.isFullScreen() || mainWindow.isMaximized()) return;
+
+        const target = { width: Math.max(width, MIN_WINDOW_SIZE.width), height: Math.max(height, MIN_WINDOW_SIZE.height) };
+        const [currentWidth, currentHeight] = mainWindow.getSize();
+        // Arrives again for a size the window already has, and re-centring would yank a drag.
+        if (target.width === currentWidth && target.height === currentHeight) return;
+
+        mainWindow.setSize(target.width, target.height);
+        mainWindow.center();
+        updateZoom();
+    });
+    ipcMain.handle("mainWindow:setDisplay", (_event, index: number) => {
+        const display = screen.getAllDisplays()[index];
+        if (!display) return;
+
+        // Nothing but the display changes. The size comes from the setting rather than the
+        // window, so it survives the trip out of fullscreen or maximised, and it is not
+        // trimmed to the new display: a size that no longer fits is the window's business,
+        // not a reason to rewrite what the user chose.
+        const { windowWidth, windowHeight } = settingsService.getSettings();
+        const width = Math.max(windowWidth, MIN_WINDOW_SIZE.width);
+        const height = Math.max(windowHeight, MIN_WINDOW_SIZE.height);
+        const { workArea } = display;
+
+        // Fullscreen and maximised are tied to the display they were entered on.
+        const wasFullScreen = mainWindow.isFullScreen();
+        const wasMaximized = mainWindow.isMaximized();
+        if (wasFullScreen) mainWindow.setFullScreen(false);
+        if (wasMaximized) mainWindow.unmaximize();
+
+        mainWindow.setBounds({
+            width,
+            height,
+            x: Math.round(workArea.x + (workArea.width - width) / 2),
+            y: Math.round(workArea.y + (workArea.height - height) / 2),
+        });
+
+        if (wasFullScreen) mainWindow.setFullScreen(true);
+        else if (wasMaximized) mainWindow.maximize();
+
         updateZoom();
     });
     ipcMain.handle("mainWindow:flashFrame", (_event, flag: boolean) => {
         mainWindow.flashFrame(flag);
     });
+    ipcMain.handle("mainWindow:setUiScale", (_event, scale: number | null) => applyScale(scale));
+    ipcMain.handle("mainWindow:getScaleRange", () => scaleRange());
+    ipcMain.handle("mainWindow:getDisplays", () =>
+        screen.getAllDisplays().map((display, index) => ({
+            index,
+            scaleFactor: display.scaleFactor || 1,
+            workArea: { width: display.workAreaSize.width, height: display.workAreaSize.height },
+            // workArea has the taskbar removed, so it is the wrong shape for an aspect ratio.
+            size: { width: display.size.width, height: display.size.height },
+        }))
+    );
     ipcMain.handle("mainWindow:minimize", () => mainWindow.minimize());
     ipcMain.handle("mainWindow:isFullscreen", () => mainWindow.isFullScreen());
 
-    ipcMain.handle("mainWindow:resized", () => {
-        updateZoom();
-    });
-
     // Get download progress updates to update the dock/taskbar
     contentService.registerProgressHandler(mainWindow);
 
diff --git a/src/main/typed-ipc.ts b/src/main/typed-ipc.ts
index ac2e96815..32320ef37 100644
--- a/src/main/typed-ipc.ts
+++ b/src/main/typed-ipc.ts
@@ -5,7 +5,7 @@
 import type { AuthState } from "@main/services/auth.service";
 import type { StoredIdentity } from "@main/model/user";
 import type { BattleWithMetadata } from "@main/game/battle/battle-types";
-import type { BattleStartRequestData, BattleEndedEventData } from "tachyon-protocol/types";
+import type { BattleStartRequestData } from "tachyon-protocol/types";
 import type { ContentRef } from "@main/content/content-ref";
 import type { ContentPresence, ContentState } from "@main/content/content-state";
 import type { DownloadInfo } from "@main/content/downloads";
@@ -40,6 +40,9 @@ export type IPCEvents = {
     "game:launched": () => void;
     "maps:mapAdded": (filename: string) => void;
     "maps:mapDeleted": (filename: string) => void;
+    "mainWindow:scaleRangeChanged": (range: { min: number; max: number; os: number }) => void;
+    "mainWindow:windowStateChanged": (state: { maximized: boolean; size: { width: number; height: number } | null }) => void;
+    "mainWindow:uiScaleNudged": (scale: number | null) => void;
     "navigation:navigateTo": (target: string) => void;
     "notifications:showAlert": (alertConfig: { text: string; severity?: "info" | "warning" | "error"; timeoutMs?: number }) => void;
     "paths:copyProgress": (progress: { copied: number; total: number }) => void;
@@ -48,7 +51,6 @@ export type IPCEvents = {
     "replays:replayDeleted": (filename: string) => void;
     "replays:highlightOpened": (fileNames: string[]) => void;
     "tachyon:battleStart": (data: BattleStartRequestData) => void;
-    "tachyon:battleEnded": (data: BattleEndedEventData) => void;
     "tachyon:connected": () => void;
     "tachyon:disconnected": () => void;
     "tachyon:event": (event: TachyonEvent) => void;
@@ -90,8 +92,12 @@ export type IPCCommands = {
     "log:upload": () => string;
     "mainWindow:flashFrame": (flag: boolean) => void;
     "mainWindow:setFullscreen": (flag: boolean) => void;
-    "mainWindow:resized": () => void;
-    "mainWindow:setSize": (size: number) => void;
+    "mainWindow:setMaximized": (flag: boolean) => void;
+    "mainWindow:setSize": (width: number, height: number) => void;
+    "mainWindow:setUiScale": (scale: number | null) => void;
+    "mainWindow:getScaleRange": () => { min: number; max: number; os: number };
+    "mainWindow:getDisplays": () => Array<{ index: number; scaleFactor: number; workArea: { width: number; height: number }; size: { width: number; height: number } }>;
+    "mainWindow:setDisplay": (index: number) => void;
     "mainWindow:minimize": () => void;
     "mainWindow:isFullscreen": () => boolean;
     "maps:downloadMap": (springName: string) => void;
diff --git a/src/preload/preload.ts b/src/preload/preload.ts
index dd74211ef..564b0f9f4 100644
--- a/src/preload/preload.ts
+++ b/src/preload/preload.ts
@@ -16,7 +16,7 @@ import { DownloadInfo } from "@main/content/downloads";
 import { Info } from "@main/services/info.service";
 import { BattleWithMetadata } from "@main/game/battle/battle-types";
 import { GetCommandData, GetCommandIds, GetCommands } from "tachyon-protocol";
-import type { BattleStartRequestData, BattleEndedEventData } from "tachyon-protocol/types";
+import type { BattleStartRequestData } from "tachyon-protocol/types";
 import { MultiplayerLaunchSettings } from "@main/game/game";
 import { logLevels } from "@main/services/log.service";
 import { Config } from "@main/services/config.service";
@@ -40,11 +40,20 @@ contextBridge.exposeInMainWorld("info", infoApi);
 
 const mainWindowApi = {
     setFullscreen: (flag: boolean): Promise<void> => ipcRenderer.invoke("mainWindow:setFullscreen", flag),
-    setSize: (size: number): Promise<void> => ipcRenderer.invoke("mainWindow:setSize", size),
+    setMaximized: (flag: boolean): Promise<void> => ipcRenderer.invoke("mainWindow:setMaximized", flag),
+    setSize: (width: number, height: number): Promise<void> => ipcRenderer.invoke("mainWindow:setSize", width, height),
+    setUiScale: (scale: number | null): Promise<void> => ipcRenderer.invoke("mainWindow:setUiScale", scale),
+    getScaleRange: (): Promise<{ min: number; max: number; os: number }> => ipcRenderer.invoke("mainWindow:getScaleRange"),
+    onScaleRangeChanged: (callback: (range: { min: number; max: number; os: number }) => void) => ipcRenderer.on("mainWindow:scaleRangeChanged", (_event, range) => callback(range)),
+    getDisplays: (): Promise<Array<{ index: number; scaleFactor: number; workArea: { width: number; height: number }; size: { width: number; height: number } }>> =>
+        ipcRenderer.invoke("mainWindow:getDisplays"),
+    setDisplay: (index: number): Promise<void> => ipcRenderer.invoke("mainWindow:setDisplay", index),
+    onWindowStateChanged: (callback: (state: { maximized: boolean; size: { width: number; height: number } | null }) => void) =>
+        ipcRenderer.on("mainWindow:windowStateChanged", (_event, state) => callback(state)),
+    onUiScaleNudged: (callback: (scale: number | null) => void) => ipcRenderer.on("mainWindow:uiScaleNudged", (_event, scale) => callback(scale)),
     flashFrame: (flag: boolean): Promise<void> => ipcRenderer.invoke("mainWindow:flashFrame", flag),
     minimize: (): Promise<void> => ipcRenderer.invoke("mainWindow:minimize"),
     isFullscreen: (): Promise<boolean> => ipcRenderer.invoke("mainWindow:isFullscreen"),
-    resized: (): Promise<void> => ipcRenderer.invoke("mainWindow:resized"),
 };
 export type MainWindowApi = typeof mainWindowApi;
 contextBridge.exposeInMainWorld("mainWindow", mainWindowApi);
@@ -249,7 +258,6 @@ const tachyonApi = {
     onDisconnected: (callback: () => void) => ipcRenderer.on("tachyon:disconnected", callback),
     onEvent,
     onBattleStart: (callback: (data: BattleStartRequestData) => void) => ipcRenderer.on("tachyon:battleStart", (_event, data) => callback(data)),
-    onBattleEnded: (callback: (data: BattleEndedEventData) => void) => ipcRenderer.on("tachyon:battleEnded", (_event, data) => callback(data)),
 };
 export type TachyonApi = typeof tachyonApi;
 contextBridge.exposeInMainWorld("tachyon", tachyonApi);
diff --git a/src/renderer/assets/languages/cs.json b/src/renderer/assets/languages/cs.json
index dec9d0cef..5cd84524f 100644
--- a/src/renderer/assets/languages/cs.json
+++ b/src/renderer/assets/languages/cs.json
@@ -2279,20 +2279,22 @@
             },
             "settings": {
                 "title": null,
-                "fullscreen": null,
-                "windowSize": null,
+                "sectionDisplay": null,
+                "sectionSound": null,
+                "sectionGeneral": null,
+                "resolution": null,
+                "fullscreenOption": null,
+                "maximizedOption": null,
                 "display": null,
                 "skipIntro": null,
                 "loginAutomatically": null,
+                "uiScale": null,
                 "sfxVolume": null,
                 "musicVolume": null,
                 "devMode": null,
                 "uploadLogs": null,
                 "logUrlCopied": null,
                 "couldNotUploadLog": null,
-                "labelSm": null,
-                "labelMd": null,
-                "labelLg": null,
                 "labelDisplay": null,
                 "language": null,
                 "storage": null,
diff --git a/src/renderer/assets/languages/de.json b/src/renderer/assets/languages/de.json
index fb56c39db..154b115bd 100644
--- a/src/renderer/assets/languages/de.json
+++ b/src/renderer/assets/languages/de.json
@@ -2150,20 +2150,22 @@
             },
             "settings": {
                 "title": null,
-                "fullscreen": null,
-                "windowSize": null,
+                "sectionDisplay": null,
+                "sectionSound": null,
+                "sectionGeneral": null,
+                "resolution": null,
+                "fullscreenOption": null,
+                "maximizedOption": null,
                 "display": null,
                 "skipIntro": null,
                 "loginAutomatically": null,
+                "uiScale": null,
                 "sfxVolume": null,
                 "musicVolume": null,
                 "devMode": null,
                 "uploadLogs": null,
                 "logUrlCopied": null,
                 "couldNotUploadLog": null,
-                "labelSm": null,
-                "labelMd": null,
-                "labelLg": null,
                 "labelDisplay": null,
                 "language": null,
                 "storage": null,
diff --git a/src/renderer/assets/languages/dev.json b/src/renderer/assets/languages/dev.json
index 8e05cba77..e4102426a 100644
--- a/src/renderer/assets/languages/dev.json
+++ b/src/renderer/assets/languages/dev.json
@@ -296,20 +296,22 @@
             },
             "settings": {
                 "title": "seinttgs",
-                "fullscreen": "Fecrslluen",
-                "windowSize": "Wdoniw Size",
+                "sectionDisplay": "Daspliy",
+                "sectionSound": "Suond",
+                "sectionGeneral": "Geranel",
+                "resolution": "Rsueiloton",
+                "fullscreenOption": "Fecrslluen",
+                "maximizedOption": "Maimeixzd",
                 "display": "Daspliy",
                 "skipIntro": "Skip Inrto",
                 "loginAutomatically": "Lgoin Aluaclatitomy",
+                "uiScale": "Iartfnece slace",
                 "sfxVolume": "Sfx Vmolue",
                 "musicVolume": "Msuic Vmolue",
                 "devMode": "Dev Mode",
                 "uploadLogs": "Uolpad logs",
                 "logUrlCopied": "Log URL was cpeiod to clpbriaod.",
                 "couldNotUploadLog": "Culod not upolad log.",
-                "labelSm": "Samll",
-                "labelMd": "Meuidm",
-                "labelLg": "Lgare",
                 "labelDisplay": "Daspliy {id}",
                 "language": "Lguganae",
                 "storage": "Sraogte",
diff --git a/src/renderer/assets/languages/en.json b/src/renderer/assets/languages/en.json
index e4201df59..91ac4832d 100644
--- a/src/renderer/assets/languages/en.json
+++ b/src/renderer/assets/languages/en.json
@@ -2127,20 +2127,22 @@
             },
             "settings": {
                 "title": "settings",
-                "fullscreen": "Fullscreen",
-                "windowSize": "Window Size",
+                "sectionDisplay": "Display",
+                "sectionSound": "Sound",
+                "sectionGeneral": "General",
+                "resolution": "Resolution",
+                "fullscreenOption": "Fullscreen",
+                "maximizedOption": "Maximized",
                 "display": "Display",
                 "skipIntro": "Skip Intro",
                 "loginAutomatically": "Login Automatically",
+                "uiScale": "Interface scale",
                 "sfxVolume": "Sfx Volume",
                 "musicVolume": "Music Volume",
                 "devMode": "Dev Mode",
                 "uploadLogs": "Upload logs",
                 "logUrlCopied": "Log URL was copied to clipboard.",
                 "couldNotUploadLog": "Could not upload log.",
-                "labelSm": "Small",
-                "labelMd": "Medium",
-                "labelLg": "Large",
                 "labelDisplay": "Display {id}",
                 "language": "Language",
                 "storage": "Storage",
diff --git a/src/renderer/assets/languages/fr.json b/src/renderer/assets/languages/fr.json
index 633305c71..518283d3b 100644
--- a/src/renderer/assets/languages/fr.json
+++ b/src/renderer/assets/languages/fr.json
@@ -4132,20 +4132,22 @@
             },
             "settings": {
                 "title": null,
-                "fullscreen": null,
-                "windowSize": null,
+                "sectionDisplay": null,
+                "sectionSound": null,
+                "sectionGeneral": null,
+                "resolution": null,
+                "fullscreenOption": null,
+                "maximizedOption": null,
                 "display": null,
                 "skipIntro": null,
                 "loginAutomatically": null,
+                "uiScale": null,
                 "sfxVolume": null,
                 "musicVolume": null,
                 "devMode": null,
                 "uploadLogs": null,
                 "logUrlCopied": null,
                 "couldNotUploadLog": null,
-                "labelSm": null,
-                "labelMd": null,
-                "labelLg": null,
                 "labelDisplay": null,
                 "language": null,
                 "storage": null,
diff --git a/src/renderer/assets/languages/ru.json b/src/renderer/assets/languages/ru.json
index d0ea54b26..5f1699f96 100644
--- a/src/renderer/assets/languages/ru.json
+++ b/src/renderer/assets/languages/ru.json
@@ -4101,20 +4101,22 @@
             },
             "settings": {
                 "title": null,
-                "fullscreen": null,
-                "windowSize": null,
+                "sectionDisplay": null,
+                "sectionSound": null,
+                "sectionGeneral": null,
+                "resolution": null,
+                "fullscreenOption": null,
+                "maximizedOption": null,
                 "display": null,
                 "skipIntro": null,
                 "loginAutomatically": null,
+                "uiScale": null,
                 "sfxVolume": null,
                 "musicVolume": null,
                 "devMode": null,
                 "uploadLogs": null,
                 "logUrlCopied": null,
                 "couldNotUploadLog": null,
-                "labelSm": null,
-                "labelMd": null,
-                "labelLg": null,
                 "labelDisplay": null,
                 "language": null,
                 "storage": null,
diff --git a/src/renderer/assets/languages/zh.json b/src/renderer/assets/languages/zh.json
index 717eb0e5c..9e400f7ad 100644
--- a/src/renderer/assets/languages/zh.json
+++ b/src/renderer/assets/languages/zh.json
@@ -4243,20 +4243,22 @@
             },
             "settings": {
                 "title": null,
-                "fullscreen": null,
-                "windowSize": null,
+                "sectionDisplay": null,
+                "sectionSound": null,
+                "sectionGeneral": null,
+                "resolution": null,
+                "fullscreenOption": null,
+                "maximizedOption": null,
                 "display": null,
                 "skipIntro": null,
                 "loginAutomatically": null,
+                "uiScale": null,
                 "sfxVolume": null,
                 "musicVolume": null,
                 "devMode": null,
                 "uploadLogs": null,
                 "logUrlCopied": null,
                 "couldNotUploadLog": null,
-                "labelSm": null,
-                "labelMd": null,
-                "labelLg": null,
                 "labelDisplay": null,
                 "language": null,
                 "storage": null,
diff --git a/src/renderer/components/common/Modal.vue b/src/renderer/components/common/Modal.vue
index bb6c5775d..f56fff7f5 100644
--- a/src/renderer/components/common/Modal.vue
+++ b/src/renderer/components/common/Modal.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: MIT
 
 <template>
     <Teleport v-if="isLoaded" to="#wrapper">
-        <form v-if="isOpen" ref="form" class="container" @submit.prevent="onSubmit">
+        <form v-if="isOpen" ref="form" class="container" :class="{ scrim: isBaseModal }" @submit.prevent="onSubmit">
             <Panel id="modal" class="modal-panel" v-bind="$attrs">
                 <template #header>
                     <div class="title">
@@ -41,6 +41,7 @@ import { nextTick, onMounted, Ref, ref, toRef, watch } from "vue";
 import Panel from "@renderer/components/common/Panel.vue";
 import { audioApi } from "@renderer/audio/audio";
 import { onKeyDown } from "@vueuse/core";
+import { useModalStack } from "@renderer/composables/useModalStack";
 
 export type PanelProps = InstanceType<typeof Panel>["$props"];
 export interface ModalProps extends /* @vue-ignore */ PanelProps {
@@ -69,6 +70,7 @@ const emits = defineEmits<{
 
 const form: Ref<HTMLFormElement | null> = ref(null);
 const isOpen = toRef(props, "modelValue");
+const isBaseModal = useModalStack(isOpen);
 
 defineExpose({
     open: () => emits("update:modelValue", true),
@@ -127,13 +129,16 @@ function sound() {
 <style lang="scss" scoped>
 .container {
     @extend .fullsize;
+    @extend .blocks-window-drag;
     left: 0;
     top: 0;
     z-index: 5;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(5px);
+    &.scrim {
+        background-color: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(2px);
+    }
 }
 .modal-panel {
     flex-grow: 0;
diff --git a/src/renderer/components/controls/Range.vue b/src/renderer/components/controls/Range.vue
index d3c25fd51..b8b356e75 100644
--- a/src/renderer/components/controls/Range.vue
+++ b/src/renderer/components/controls/Range.vue
@@ -18,7 +18,13 @@ SPDX-License-Identifier: MIT
             mode="decimal"
             :useGrouping="false"
         />
-        <Slider v-bind="$props" :modelValue="modelValue" @update:modelValue="onSlide" />
+        <Slider
+            v-bind="sliderProps"
+            :modelValue="modelValue"
+            @pointerdown="dragging = true"
+            @update:modelValue="onSlide"
+            @slideend="onSlideEnd"
+        />
         <InputNumber
             v-bind="$attrs"
             :modelValue="typeof modelValue === 'number' ? modelValue : high"
@@ -35,27 +41,35 @@ SPDX-License-Identifier: MIT
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 // https://v3.primevue.org/slider/
 import InputNumber from "primevue/inputnumber";
 import Slider, { type SliderProps } from "primevue/slider";
 
 import Control from "@renderer/components/controls/Control.vue";
+import { useEventListener } from "@vueuse/core";
 
-export type Props = SliderProps;
+// commitOnRelease emits `preview` while the handle moves and commits only on release.
+export type Props = SliderProps & { commitOnRelease?: boolean };
 
 const props = defineProps<Props>();
 const emits = defineEmits<{
     (event: "update:modelValue", value: number | number[]): void;
+    (event: "preview", value: number | number[]): void;
 }>();
 
+// Slider has no commitOnRelease of its own, so passing it on would leave it on the element.
+const sliderProps = computed(() => {
+    const forwarded: Record<string, unknown> = { ...props };
+    delete forwarded.commitOnRelease;
+
+    return forwarded as SliderProps;
+});
+
 const low = computed(() => (props.modelValue instanceof Array ? props.modelValue[0] : null));
 const high = computed(() => (props.modelValue instanceof Array ? props.modelValue[1] : null));
 
 const min = computed<number>(() => props?.min ?? 0);
-const minInputWidth = computed(() => `${min.value.toString().length + 1}ch`);
-const max = computed<number>(() => props?.max ?? 100);
-const maxInputWidth = computed(() => `${max.value.toString().length + 1}ch`);
 
 const stepValue = computed(() => props.step ?? 1);
 const maxFractionDigits = computed(() => {
@@ -64,10 +78,25 @@ const maxFractionDigits = computed(() => {
     return decimalIndex === -1 ? 0 : step.length - decimalIndex - 1;
 });
 
+// Slider reports slideend only for a drag, so a track click or an arrow key would otherwise
+// preview a value it never commits.
+const dragging = ref(false);
+useEventListener(document, "pointerup", () => (dragging.value = false));
+useEventListener(document, "pointercancel", () => (dragging.value = false));
+
 function onSlide(input: number | number[]) {
+    emits("preview", input);
+    if (props.commitOnRelease && dragging.value) return;
+
     emits("update:modelValue", input);
 }
 
+function onSlideEnd({ value }: { value: number | number[] }) {
+    if (!props.commitOnRelease) return;
+
+    emits("update:modelValue", value);
+}
+
 function onInput(input: number | number[]) {
     const clamp = (v: number) => Math.max(props.min ?? 0, Math.min(props.max ?? 100, v));
     emits("update:modelValue", Array.isArray(input) ? input.map(clamp).sort((a, b) => a - b) : clamp(input));
@@ -118,18 +147,17 @@ function onInput(input: number | number[]) {
         background-color: #fff;
     }
 }
-.min :deep(.p-inputtext) {
-    width: v-bind(minInputWidth);
-    text-align: center;
-}
+.min :deep(.p-inputtext),
 .max :deep(.p-inputtext) {
-    width: v-bind(maxInputWidth);
+    width: 4ch;
     text-align: center;
 }
 .p-inputwrapper {
     position: relative;
     height: 100%;
     padding: 5px;
+    // Sized by its input, so the slider gets the rest of the row rather than sharing it.
+    flex: 0 0 auto;
     &:before {
         position: absolute;
         height: 100%;
diff --git a/src/renderer/components/navbar/Settings.vue b/src/renderer/components/navbar/Settings.vue
index 3564215f7..1235f83cc 100644
--- a/src/renderer/components/navbar/Settings.vue
+++ b/src/renderer/components/navbar/Settings.vue
@@ -5,8 +5,45 @@ SPDX-License-Identifier: MIT
 -->
 
 <template>
-    <Modal :title="t('lobby.navbar.settings.title')">
+    <Modal
+        :modelValue="modelValue"
+        :title="t('lobby.navbar.settings.title')"
+        @update:modelValue="(open: boolean) => emit('update:modelValue', open)"
+    >
         <div class="gridform">
+            <div class="section-header">{{ t("lobby.navbar.settings.sectionDisplay") }}</div>
+
+            <div>{{ t("lobby.navbar.settings.resolution") }}</div>
+            <Select v-model="displayMode" :options="resolutionOptions" optionLabel="label" optionValue="value" />
+
+            <div>{{ t("lobby.navbar.settings.display") }}</div>
+            <Select v-model="selectedDisplay" :options="displayOptions" optionLabel="label" optionValue="value" />
+
+            <div>{{ t("lobby.navbar.settings.uiScale") }}</div>
+            <!-- Wrapped so the cell, not the slider, takes gridform's positional rule for
+            the label column. See #716. -->
+            <div>
+                <Range
+                    :modelValue="shownScalePercent"
+                    commitOnRelease
+                    :min="UI_SCALE_MIN * 100"
+                    :max="UI_SCALE_MAX * 100"
+                    :step="UI_SCALE_STEP * 100"
+                    @preview="(value: number | number[]) => (draggedScalePercent = value as number)"
+                    @update:modelValue="commitScalePercent"
+                />
+            </div>
+
+            <div class="section-header">{{ t("lobby.navbar.settings.sectionSound") }}</div>
+
+            <div>{{ t("lobby.navbar.settings.sfxVolume") }}</div>
+            <Range v-model="settingsStore.sfxVolume" :min="0" :max="100" :step="1" />
+
+            <div>{{ t("lobby.navbar.settings.musicVolume") }}</div>
+            <Range v-model="settingsStore.musicVolume" :min="0" :max="100" :step="1" />
+
+            <div class="section-header">{{ t("lobby.navbar.settings.sectionGeneral") }}</div>
+
             <div>
                 <span>
                     <Icon :icon="language" />
@@ -14,20 +51,6 @@ SPDX-License-Identifier: MIT
                 </span>
             </div>
             <Select v-model="settingsStore.language" :options="localeOptions" optionLabel="label" optionValue="value" />
-            <div>{{ t("lobby.navbar.settings.fullscreen") }}</div>
-            <Checkbox v-model="settingsStore.fullscreen" />
-
-            <div>{{ t("lobby.navbar.settings.windowSize") }}</div>
-            <Select
-                v-model="settingsStore.size"
-                :options="sizeOptions"
-                optionLabel="label"
-                optionValue="value"
-                :disabled="settingsStore.fullscreen"
-            />
-
-            <div>{{ t("lobby.navbar.settings.display") }}</div>
-            <Select v-model="settingsStore.displayIndex" :options="displayOptions" optionLabel="label" optionValue="value" />
 
             <div>{{ t("lobby.navbar.settings.skipIntro") }}</div>
             <Checkbox v-model="settingsStore.skipIntro" />
@@ -37,12 +60,6 @@ SPDX-License-Identifier: MIT
                 <Checkbox v-model="settingsStore.loginAutomatically" />
             </template>
 
-            <div>{{ t("lobby.navbar.settings.sfxVolume") }}</div>
-            <Range v-model="settingsStore.sfxVolume" :min="0" :max="100" :step="1" />
-
-            <div>{{ t("lobby.navbar.settings.musicVolume") }}</div>
-            <Range v-model="settingsStore.musicVolume" :min="0" :max="100" :step="1" />
-
             <div>{{ t("lobby.navbar.settings.devMode") }}</div>
             <Checkbox v-model="settingsStore.devMode" />
 
@@ -105,7 +122,7 @@ SPDX-License-Identifier: MIT
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, useAttrs, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import Modal from "@renderer/components/common/Modal.vue";
 import Checkbox from "@renderer/components/controls/Checkbox.vue";
 import Range from "@renderer/components/controls/Range.vue";
@@ -115,7 +132,14 @@ import Textbox from "@renderer/components/controls/Textbox.vue";
 import OverlayPanel from "primevue/overlaypanel";
 import { asyncComputed } from "@vueuse/core";
 import { settingsStore } from "@renderer/store/settings.store";
-import { infosStore } from "@renderer/store/infos.store";
+import {
+    MIN_WINDOW_SIZE,
+    SUPPORTED_ASPECT_RATIOS,
+    UI_SCALE_MAX,
+    UI_SCALE_MIN,
+    UI_SCALE_STEP,
+    WINDOW_HEIGHT_STEPS,
+} from "@main/config/window";
 import { contentsStore } from "@renderer/store/contents.store";
 import { isUnsettled } from "@main/content/content-state";
 import { refreshEnginesStore } from "@renderer/store/engine.store";
@@ -146,9 +170,13 @@ const isBusy = computed(() => isTransferring.value || isChanging.value || hasAct
 
 let cleanupCopyProgress: (() => void) | undefined;
 
-const attrs = useAttrs();
+// Declared rather than left to fall through: the confirmation modal makes this a second
+// root, and Vue only inherits attributes onto a single one.
+const props = defineProps<{ modelValue?: boolean }>();
+const emit = defineEmits<{ (event: "update:modelValue", open: boolean): void }>();
+
 watch(
-    () => attrs.modelValue as boolean,
+    () => props.modelValue,
     async (isOpen) => {
         if (isOpen) {
             currentAssetsPath.value = await window.paths.getCurrentAssetsPath();
@@ -206,20 +234,103 @@ async function applyPathChange() {
 const op = ref();
 const tooltipMessage = ref("");
 
-const sizeOptions = [
-    { label: t("lobby.navbar.settings.labelLg"), value: 900 },
-    { label: t("lobby.navbar.settings.labelMd"), value: 720 },
-    { label: t("lobby.navbar.settings.labelSm"), value: 540 },
-];
-
-const displayOptions = asyncComputed(async () => {
-    return Array(infosStore.hardware.numOfDisplays)
-        .fill(0)
-        .map((_, i) => {
-            return { label: t("lobby.navbar.settings.labelDisplay", { id: i + 1 }), value: i };
-        });
+const displays = asyncComputed(() => window.mainWindow.getDisplays(), []);
+
+const targetDisplay = computed(() => displays.value.find((d) => d.index === settingsStore.displayIndex) ?? displays.value[0]);
+
+const sizeKey = (width: number, height: number) => `${width}x${height}`;
+
+// Only the monitor's own shape is offered. Snapped to the nearest supported ratio so the
+// labels stay meaningful on unusual displays.
+const displayRatio = computed(() => {
+    const display = targetDisplay.value;
+    if (!display) return SUPPORTED_ASPECT_RATIOS[0];
+
+    const actual = display.size.width / display.size.height;
+
+    return SUPPORTED_ASPECT_RATIOS.reduce((closest, candidate) =>
+        Math.abs(candidate.ratio - actual) < Math.abs(closest.ratio - actual) ? candidate : closest
+    );
+});
+
+const resolutionOptions = computed(() => {
+    const fullscreen = { label: t("lobby.navbar.settings.fullscreenOption"), value: "fullscreen" as const };
+    const maximized = { label: t("lobby.navbar.settings.maximizedOption"), value: "maximized" as const };
+    const display = targetDisplay.value;
+    if (!display) return [fullscreen, maximized];
+
+    const { label: ratioLabel, ratio } = displayRatio.value;
+    const windowed = WINDOW_HEIGHT_STEPS.map((height) => ({ width: Math.round((height * ratio) / 2) * 2, height }))
+        .filter(
+            ({ width, height }) =>
+                width >= MIN_WINDOW_SIZE.width &&
+                height >= MIN_WINDOW_SIZE.height &&
+                width <= display.workArea.width &&
+                height <= display.workArea.height
+        )
+        .map(({ width, height }) => ({ label: `${width} x ${height} (${ratioLabel})`, value: sizeKey(width, height) }));
+
+    // The window can be dragged to any size, so its current one may be none of these.
+    const stored = sizeKey(settingsStore.windowWidth, settingsStore.windowHeight);
+    if (!settingsStore.fullscreen && !settingsStore.maximized && !windowed.some((option) => option.value === stored)) {
+        windowed.unshift({ label: `${settingsStore.windowWidth} x ${settingsStore.windowHeight}`, value: stored });
+    }
+
+    return [fullscreen, maximized, ...windowed];
+});
+
+const displayMode = computed<string>({
+    get: () => {
+        if (settingsStore.fullscreen) return "fullscreen";
+        if (settingsStore.maximized) return "maximized";
+
+        return sizeKey(settingsStore.windowWidth, settingsStore.windowHeight);
+    },
+    set: (value) => {
+        settingsStore.fullscreen = value === "fullscreen";
+        settingsStore.maximized = value === "maximized";
+        if (value === "fullscreen" || value === "maximized") return;
+
+        const [width, height] = value.split("x").map(Number);
+        settingsStore.windowWidth = width;
+        settingsStore.windowHeight = height;
+    },
+});
+
+const selectedDisplay = computed<number>({
+    get: () => settingsStore.displayIndex,
+    set: (index) => (settingsStore.displayIndex = index),
 });
 
+const scaleRange = ref({ min: 1, max: 1, os: 1 });
+
+onMounted(async () => {
+    scaleRange.value = await window.mainWindow.getScaleRange();
+    // The achievable range moves with the window, so the control has to follow it.
+    window.mainWindow.onScaleRangeChanged((range) => (scaleRange.value = range));
+});
+
+// Null means the user has never set one, and the OS scale is what to start them at.
+const uiScalePercent = computed(() => Math.round((settingsStore.uiScale ?? scaleRange.value.os) * 100));
+
+const draggedScalePercent = ref<number | null>(null);
+const shownScalePercent = computed(() => draggedScalePercent.value ?? uiScalePercent.value);
+
+function commitScalePercent(value: number | number[]) {
+    const percent = Math.round(value as number);
+
+    draggedScalePercent.value = null;
+    // Against what the slider showed, not the stored value, which is null until first set.
+    if (percent === uiScalePercent.value) return;
+
+    settingsStore.uiScale = percent / 100;
+}
+
+// Same source as the move and the size list, so a detached monitor cannot be offered.
+const displayOptions = computed(() =>
+    displays.value.map(({ index }) => ({ label: t("lobby.navbar.settings.labelDisplay", { id: index + 1 }), value: index }))
+);
+
 async function uploadLogsCommand(event) {
     // Store off event and target to avoid async issue
     const curE = event;
diff --git a/src/renderer/composables/useModalStack.ts b/src/renderer/composables/useModalStack.ts
new file mode 100644
index 000000000..1886b99c4
--- /dev/null
+++ b/src/renderer/composables/useModalStack.ts
@@ -0,0 +1,30 @@
+// SPDX-FileCopyrightText: 2026 The BAR Lobby Authors
+//
+// SPDX-License-Identifier: MIT
+
+import { computed, onActivated, onDeactivated, onUnmounted, ref, watch, type Ref } from "vue";
+
+// Each modal dims and blurs what is behind it, and stacked those compound into something
+// nothing is legible through, so only the bottom-most open one draws it.
+const stack = ref<number[]>([]);
+let nextId = 0;
+
+export function useModalStack(isOpen: Ref<boolean>) {
+    const id = nextId++;
+
+    const enter = () => {
+        if (!stack.value.includes(id)) stack.value.push(id);
+    };
+
+    const leave = () => (stack.value = stack.value.filter((entry) => entry !== id));
+
+    watch(isOpen, (open) => (open ? enter() : leave()), { immediate: true });
+
+    // A kept-alive scene takes its modal off screen without unmounting it or closing it,
+    // so membership follows the teleported content rather than the component's lifetime.
+    onActivated(() => isOpen.value && enter());
+    onDeactivated(leave);
+    onUnmounted(leave);
+
+    return computed(() => stack.value[0] === id);
+}
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index d399cab17..2859e85fe 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -21,10 +21,6 @@ import { setupI18n } from "@renderer/i18n";
 
 setupVue();
 
-new ResizeObserver(() => {
-    window.mainWindow.resized();
-}).observe(document.body);
-
 async function setupVue() {
     const app = createApp(App);
 
diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts
index 6fcfc55f3..eacf71257 100644
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@@ -25,6 +25,8 @@ export async function initSettingsStore() {
         },
         { deep: true }
     );
+    // Registration order is apply order, and a size arriving while the window is still
+    // fullscreen or maximised is ignored, so those two come first.
     watch(
         () => settingsStore.fullscreen,
         () => {
@@ -32,10 +34,43 @@ export async function initSettingsStore() {
         }
     );
     watch(
-        () => settingsStore.size,
+        () => settingsStore.maximized,
         () => {
-            window.mainWindow.setSize(settingsStore.size);
+            window.mainWindow.setMaximized(settingsStore.maximized);
         }
     );
+    watch(
+        () => [settingsStore.windowWidth, settingsStore.windowHeight],
+        () => {
+            window.mainWindow.setSize(settingsStore.windowWidth, settingsStore.windowHeight);
+        }
+    );
+    watch(
+        () => settingsStore.uiScale,
+        () => {
+            window.mainWindow.setUiScale(settingsStore.uiScale);
+        }
+    );
+    watch(
+        () => settingsStore.displayIndex,
+        () => {
+            window.mainWindow.setDisplay(settingsStore.displayIndex);
+        }
+    );
+
+    // The zoom shortcuts work the new scale out in main and leave the storing to here.
+    window.mainWindow.onUiScaleNudged((scale) => {
+        settingsStore.uiScale = scale;
+    });
+
+    // The window resizes itself when dragged or moved to a smaller display, so the setting
+    // follows it rather than only driving it.
+    window.mainWindow.onWindowStateChanged(({ maximized, size }) => {
+        settingsStore.maximized = maximized;
+        if (!size) return;
+
+        settingsStore.windowWidth = size.width;
+        settingsStore.windowHeight = size.height;
+    });
     settingsStore.isInitialized = true;
 }
diff --git a/src/renderer/store/tachyon.store.ts b/src/renderer/store/tachyon.store.ts
index 6ebdf271c..23fa13098 100644
--- a/src/renderer/store/tachyon.store.ts
+++ b/src/renderer/store/tachyon.store.ts
@@ -224,7 +224,7 @@ export async function initTachyonStore() {
         launchMultiplayerBattle(data);
     });
 
-    window.tachyon.onBattleEnded((data) => {
+    window.tachyon.onEvent("battle/ended", (data) => {
         console.debug("Received battle ended event", data);
         tachyonStore.springConnectionDetails = undefined;
         tachyonStore.rejoinModalOpen = false;
diff --git a/src/renderer/styles/_animations.scss b/src/renderer/styles/_animations.scss
index 622a7b53f..2191c5c27 100644
--- a/src/renderer/styles/_animations.scss
+++ b/src/renderer/styles/_animations.scss
@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-// dramatic pulse effect
 @keyframes pulse {
     0% {
         background-color: rgba(255, 255, 255, 0.1);
diff --git a/src/renderer/styles/_utils.scss b/src/renderer/styles/_utils.scss
index 6130b3b5c..a36c909e5 100644
--- a/src/renderer/styles/_utils.scss
+++ b/src/renderer/styles/_utils.scss
@@ -13,6 +13,11 @@
     content: "";
 }
 
+// The draggable region is geometric, not hit-tested, so covering it is not enough.
+.blocks-window-drag {
+    -webkit-app-region: no-drag;
+}
+
 .fullwidth {
     width: 100%;
 }
diff --git a/src/renderer/styles/_views.scss b/src/renderer/styles/_views.scss
index 73a235ed9..49abe96b3 100644
--- a/src/renderer/styles/_views.scss
+++ b/src/renderer/styles/_views.scss
@@ -4,16 +4,18 @@
  * SPDX-License-Identifier: MIT
  */
 
-.view {
+.view-container > * {
     height: 100%;
     width: 100%;
     padding-top: 30px;
     padding-bottom: 140px;
+    padding-inline: 1.5%;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     gap: 10px;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .view-title {
diff --git a/src/renderer/views/debug/controls.vue b/src/renderer/views/debug/controls.vue
index 350ac65e4..14cb245b0 100644
--- a/src/renderer/views/debug/controls.vue
+++ b/src/renderer/views/debug/controls.vue
@@ -9,102 +9,100 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
-        <Panel class="flex-grow">
-            <div class="controls flex-col gap-md">
-                <div class="flex-row gap-md flex-center-items">
-                    <Button> Button </Button>
-                    <Button :disabled="true"> Disabled Button </Button>
-                    <Button v-tooltip="'Green button'" class="green"> Green Button </Button>
-                    <Button v-tooltip="'Red button'" class="red"> Red Button </Button>
-                    <Button v-tooltip.bottom="'Blue button'" class="blue"> Blue Button </Button>
-                    <Button v-tooltip="'Black button'" class="black"> Black Button </Button>
-                    <Button v-tooltip="'Grey button'" class="grey"> Grey Button </Button>
-                </div>
-                <div class="flex-row gap-md flex-center-items">
-                    <Textbox :modelValue="text" @update:model-value="onUpdateText" />
-                    <Textbox v-model="text" label="Label" />
-                    <Textbox v-model="text" :disabled="true" />
-                    <div class="value">{{ text }}</div>
-                </div>
-                <div class="flex-row gap-md flex-center-items">
-                    <SearchBox v-model="text" />
-                </div>
-                <div class="flex-row gap-md flex-center-items">
-                    <Number :modelValue="num" showButtons @update:model-value="onUpdateNum" />
-                    <Number v-model="num" label="Label" showButtons />
-                    <Number v-model="num" :disabled="true" />
-                    <div class="value">{{ num }}</div>
-                </div>
-                <div class="flex-row gap-md flex-center-items">
-                    <Select
-                        :modelValue="selection"
-                        :options="selections"
-                        optionLabel="name"
-                        optionValue="value"
-                        :placeholder="selection"
-                        @update:model-value="onUpdateSelection"
-                    />
-                    <Select
-                        v-model="selection"
-                        :options="selections"
-                        label="Label"
-                        optionLabel="name"
-                        optionValue="value"
-                        :placeholder="selection"
-                        :filter="true"
-                    />
-                    <Select
-                        v-model="selection"
-                        :options="selections"
-                        optionLabel="name"
-                        optionValue="value"
-                        :placeholder="selection"
-                        :disabled="true"
-                    />
-                    <div class="value">{{ selection }}</div>
-                </div>
-                <div class="flex-row gap-md flex-center-items">
-                    <Range :modelValue="range" @update:model-value="onUpdateRange" />
-                    <Range v-model="range" label="Label" />
-                    <Range v-model="range" :disabled="true" />
-                    <div class="value">{{ range }}</div>
-                </div>
-                <div class="flex-row gap-md flex-center-items">
-                    <Range :modelValue="rangeLowHigh" @update:model-value="onUpdateRangeLowHigh" :min="2" :max="40" range />
-                    <Range v-model="rangeLowHigh" label="Label" :min="2" :max="40" range />
-                    <Range v-model="rangeLowHigh" :disabled="true" :min="2" :max="40" range />
-                    <div class="value">{{ rangeLowHigh }}</div>
-                </div>
-                <div class="flex-row gap-md flex-center-items">
-                    <Checkbox :modelValue="checked" @update:model-value="onUpdateChecked" />
-                    <Checkbox v-model="checked" label="Label" />
-                    <Checkbox v-model="checked" :disabled="true" />
-                    <div class="value">{{ checked }}</div>
-                </div>
-                <div class="flex-row gap-md flex-center-items">
-                    <Options :modelValue="option" :options="options" @update:model-value="onUpdateOption" />
-                    <Options v-model="option" :options="options" label="Label" />
-                    <Options v-model="option" :options="options" :unselectable="false" />
-                    <Options v-model="option" :options="options" :disabled="true" />
-                </div>
-                <div class="flex-row">
-                    <Textbox v-model="text" />
-                    <Select
-                        v-model="selection"
-                        :options="selections"
-                        optionLabel="name"
-                        optionValue="value"
-                        :placeholder="selection"
-                        :filter="true"
-                    />
-                    <Range v-model="range" />
-                    <Checkbox v-model="checked" />
-                    <Options v-model="option" :options="options" />
-                </div>
+    <Panel class="flex-grow">
+        <div class="controls flex-col gap-md">
+            <div class="flex-row gap-md flex-center-items">
+                <Button> Button </Button>
+                <Button :disabled="true"> Disabled Button </Button>
+                <Button v-tooltip="'Green button'" class="green"> Green Button </Button>
+                <Button v-tooltip="'Red button'" class="red"> Red Button </Button>
+                <Button v-tooltip.bottom="'Blue button'" class="blue"> Blue Button </Button>
+                <Button v-tooltip="'Black button'" class="black"> Black Button </Button>
+                <Button v-tooltip="'Grey button'" class="grey"> Grey Button </Button>
             </div>
-        </Panel>
-    </div>
+            <div class="flex-row gap-md flex-center-items">
+                <Textbox :modelValue="text" @update:model-value="onUpdateText" />
+                <Textbox v-model="text" label="Label" />
+                <Textbox v-model="text" :disabled="true" />
+                <div class="value">{{ text }}</div>
+            </div>
+            <div class="flex-row gap-md flex-center-items">
+                <SearchBox v-model="text" />
+            </div>
+            <div class="flex-row gap-md flex-center-items">
+                <Number :modelValue="num" showButtons @update:model-value="onUpdateNum" />
+                <Number v-model="num" label="Label" showButtons />
+                <Number v-model="num" :disabled="true" />
+                <div class="value">{{ num }}</div>
+            </div>
+            <div class="flex-row gap-md flex-center-items">
+                <Select
+                    :modelValue="selection"
+                    :options="selections"
+                    optionLabel="name"
+                    optionValue="value"
+                    :placeholder="selection"
+                    @update:model-value="onUpdateSelection"
+                />
+                <Select
+                    v-model="selection"
+                    :options="selections"
+                    label="Label"
+                    optionLabel="name"
+                    optionValue="value"
+                    :placeholder="selection"
+                    :filter="true"
+                />
+                <Select
+                    v-model="selection"
+                    :options="selections"
+                    optionLabel="name"
+                    optionValue="value"
+                    :placeholder="selection"
+                    :disabled="true"
+                />
+                <div class="value">{{ selection }}</div>
+            </div>
+            <div class="flex-row gap-md flex-center-items">
+                <Range :modelValue="range" @update:model-value="onUpdateRange" />
+                <Range v-model="range" label="Label" />
+                <Range v-model="range" :disabled="true" />
+                <div class="value">{{ range }}</div>
+            </div>
+            <div class="flex-row gap-md flex-center-items">
+                <Range :modelValue="rangeLowHigh" @update:model-value="onUpdateRangeLowHigh" :min="2" :max="40" range />
+                <Range v-model="rangeLowHigh" label="Label" :min="2" :max="40" range />
+                <Range v-model="rangeLowHigh" :disabled="true" :min="2" :max="40" range />
+                <div class="value">{{ rangeLowHigh }}</div>
+            </div>
+            <div class="flex-row gap-md flex-center-items">
+                <Checkbox :modelValue="checked" @update:model-value="onUpdateChecked" />
+                <Checkbox v-model="checked" label="Label" />
+                <Checkbox v-model="checked" :disabled="true" />
+                <div class="value">{{ checked }}</div>
+            </div>
+            <div class="flex-row gap-md flex-center-items">
+                <Options :modelValue="option" :options="options" @update:model-value="onUpdateOption" />
+                <Options v-model="option" :options="options" label="Label" />
+                <Options v-model="option" :options="options" :unselectable="false" />
+                <Options v-model="option" :options="options" :disabled="true" />
+            </div>
+            <div class="flex-row">
+                <Textbox v-model="text" />
+                <Select
+                    v-model="selection"
+                    :options="selections"
+                    optionLabel="name"
+                    optionValue="value"
+                    :placeholder="selection"
+                    :filter="true"
+                />
+                <Range v-model="range" />
+                <Checkbox v-model="checked" />
+                <Options v-model="option" :options="options" />
+            </div>
+        </div>
+    </Panel>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/renderer/views/debug/test2.vue b/src/renderer/views/debug/test2.vue
index 0c1b612af..93c0296ad 100644
--- a/src/renderer/views/debug/test2.vue
+++ b/src/renderer/views/debug/test2.vue
@@ -5,37 +5,35 @@ SPDX-License-Identifier: MIT
 -->
 
 <template>
-    <div class="view">
-        <Panel>
-            <div>
-                <Button @click="go">Go</Button>
+    <Panel>
+        <div>
+            <Button @click="go">Go</Button>
+        </div>
+        <div class="flex-column margin-left-lg margin-right-md">
+            <div class="flex-row">
+                <Textbox v-model="mapName" />
+                <Button @click="mapName = undefined">Clear Map Name</Button>
+            </div>
+            <div class="flex-row">
+                <Textbox v-model="engineVersion" />
+                <Button @click="engineVersion = undefined">Clear Engine Version</Button>
             </div>
-            <div class="flex-column margin-left-lg margin-right-md">
-                <div class="flex-row">
-                    <Textbox v-model="mapName" />
-                    <Button @click="mapName = undefined">Clear Map Name</Button>
-                </div>
-                <div class="flex-row">
-                    <Textbox v-model="engineVersion" />
-                    <Button @click="engineVersion = undefined">Clear Engine Version</Button>
-                </div>
-                <div class="flex-row">
-                    <Textbox v-model="gameVersion" />
-                    <Button @click="gameVersion = undefined">Clear Game Version</Button>
-                </div>
-                <div>
-                    <DownloadContentButton
-                        class="green fullwidth"
-                        @click="play"
-                        :engines="engineVersion ? [engineVersion] : []"
-                        :games="gameVersion ? [gameVersion] : []"
-                        :maps="mapName ? [mapName] : []"
-                        >I do nothing now!</DownloadContentButton
-                    >
-                </div>
+            <div class="flex-row">
+                <Textbox v-model="gameVersion" />
+                <Button @click="gameVersion = undefined">Clear Game Version</Button>
+            </div>
+            <div>
+                <DownloadContentButton
+                    class="green fullwidth"
+                    @click="play"
+                    :engines="engineVersion ? [engineVersion] : []"
+                    :games="gameVersion ? [gameVersion] : []"
+                    :maps="mapName ? [mapName] : []"
+                    >I do nothing now!</DownloadContentButton
+                >
             </div>
-        </Panel>
-    </div>
+        </div>
+    </Panel>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/renderer/views/index.vue b/src/renderer/views/index.vue
index ad2080222..5d53960df 100644
--- a/src/renderer/views/index.vue
+++ b/src/renderer/views/index.vue
@@ -103,7 +103,7 @@ function playOffline() {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin-top: calc((100vh - 900px) / 2);
+    height: 100%;
     width: 500px;
     margin-left: auto;
     margin-right: auto;
diff --git a/src/renderer/views/library/commands.vue b/src/renderer/views/library/commands.vue
index 674937e75..1afd20696 100644
--- a/src/renderer/views/library/commands.vue
+++ b/src/renderer/views/library/commands.vue
@@ -9,28 +9,26 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
-        <div class="commands-container">
-            <div class="view-title">
-                <h1>{{ route.meta.title }}</h1>
-            </div>
-            <Panel class="fullheight">
-                <div class="flex-col gap-lg flex-grow fullheight">
-                    <div class="flex-row gap-md">
-                        <SearchBox v-model="searchVal" />
-                        <Select v-model="filterMethod" :options="filterMethods" label="Type" />
-                    </div>
-                    <div class="flex-col flex-grow fullheight">
-                        <div class="scroll-container">
-                            <div v-for="command in filteredCommands" :key="command.cmd" class="command">
-                                <div class="cmd">{{ command.cmd }}</div>
-                                <div class="cmdDescription">{{ command.cmdDescription }}</div>
-                            </div>
+    <div class="commands-container">
+        <div class="view-title">
+            <h1>{{ route.meta.title }}</h1>
+        </div>
+        <Panel class="fullheight">
+            <div class="flex-col gap-lg flex-grow fullheight">
+                <div class="flex-row gap-md">
+                    <SearchBox v-model="searchVal" />
+                    <Select v-model="filterMethod" :options="filterMethods" label="Type" />
+                </div>
+                <div class="flex-col flex-grow fullheight">
+                    <div class="scroll-container">
+                        <div v-for="command in filteredCommands" :key="command.cmd" class="command">
+                            <div class="cmd">{{ command.cmd }}</div>
+                            <div class="cmdDescription">{{ command.cmdDescription }}</div>
                         </div>
                     </div>
                 </div>
-            </Panel>
-        </div>
+            </div>
+        </Panel>
     </div>
 </template>
 
@@ -113,8 +111,6 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
     height: 100%;
-    align-self: center;
-    width: 1600px;
 }
 
 .command {
diff --git a/src/renderer/views/library/maps/[id].vue b/src/renderer/views/library/maps/[id].vue
index 36a91af09..60534c63d 100644
--- a/src/renderer/views/library/maps/[id].vue
+++ b/src/renderer/views/library/maps/[id].vue
@@ -9,85 +9,83 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
-        <div class="map-details-container">
-            <Panel class="flex-grow">
-                <div v-if="map" class="gap-md page">
-                    <div class="gridform">
-                        <div class="flex-right">
-                            <Button v-tooltip.bottom="t('lobby.library.maps.back')" class="icon close flex-right" @click="routerBack">
-                                <Icon :icon="arrow_back" :height="40" />
-                            </Button>
+    <div class="map-details-container">
+        <Panel class="flex-grow">
+            <div v-if="map" class="gap-md page">
+                <div class="gridform">
+                    <div class="flex-right">
+                        <Button v-tooltip.bottom="t('lobby.library.maps.back')" class="icon close flex-right" @click="routerBack">
+                            <Icon :icon="arrow_back" :height="40" />
+                        </Button>
+                    </div>
+                    <h1>{{ map.displayName }}</h1>
+                </div>
+                <div class="container">
+                    <MapSimplePreview :map="map" />
+                    <div class="flex-row flex-space-between">
+                        <div class="flex-row gap-lg flex-center-items"></div>
+                        <div class="flex-row flex-justify-end">
+                            <div class="flex-row flex-center-items gap-sm"></div>
                         </div>
-                        <h1>{{ map.displayName }}</h1>
                     </div>
-                    <div class="container">
-                        <MapSimplePreview :map="map" />
-                        <div class="flex-row flex-space-between">
-                            <div class="flex-row gap-lg flex-center-items"></div>
-                            <div class="flex-row flex-justify-end">
-                                <div class="flex-row flex-center-items gap-sm"></div>
+                    <div class="info flex-col fullheight">
+                        <div class="details">
+                            <h3>{{ t("lobby.library.maps.properties") }}</h3>
+                            <div class="detail-text">
+                                {{ map.description }}
                             </div>
-                        </div>
-                        <div class="info flex-col fullheight">
-                            <div class="details">
-                                <h3>{{ t("lobby.library.maps.properties") }}</h3>
-                                <div class="detail-text">
-                                    {{ map.description }}
-                                </div>
-                                <div class="padding-lg"></div>
-                                <div class="flex-row flex-center-items gap-sm">
-                                    <Icon :icon="windPower" width="25" height="25" />{{ map.windMin }} - {{ map.windMax }}
-                                </div>
-                                <div class="flex-row flex-center-items gap-sm">
-                                    <Icon :icon="waves" width="25" height="25" />{{ map.tidalStrength }}
-                                </div>
-                                <div class="flex-row flex-center-items gap-sm">
-                                    <Icon :icon="personIcon" width="25" height="25" />{{ map?.playerCountMin }} - {{ map?.playerCountMax }}
-                                </div>
-                                <div class="flex-row flex-center-items gap-sm">
-                                    <Icon :icon="gridIcon" width="25" height="25" />{{ map?.mapWidth }} x {{ map?.mapHeight }}
-                                </div>
-                                <div class="mt-5">
-                                    <div class="detail-text flex-row gap-sm">
-                                        <TerrainIcon v-for="terrain in map?.terrain" :terrain="terrain" v-bind:key="terrain" />
-                                    </div>
-                                </div>
-                                <div class="padding-lg"></div>
-                                <div v-if="map.author" class="item-title">
-                                    <p>
-                                        {{ t("lobby.library.maps.author") }} <b class="padding-md item">{{ map.author }}</b>
-                                    </p>
+                            <div class="padding-lg"></div>
+                            <div class="flex-row flex-center-items gap-sm">
+                                <Icon :icon="windPower" width="25" height="25" />{{ map.windMin }} - {{ map.windMax }}
+                            </div>
+                            <div class="flex-row flex-center-items gap-sm">
+                                <Icon :icon="waves" width="25" height="25" />{{ map.tidalStrength }}
+                            </div>
+                            <div class="flex-row flex-center-items gap-sm">
+                                <Icon :icon="personIcon" width="25" height="25" />{{ map?.playerCountMin }} - {{ map?.playerCountMax }}
+                            </div>
+                            <div class="flex-row flex-center-items gap-sm">
+                                <Icon :icon="gridIcon" width="25" height="25" />{{ map?.mapWidth }} x {{ map?.mapHeight }}
+                            </div>
+                            <div class="mt-5">
+                                <div class="detail-text flex-row gap-sm">
+                                    <TerrainIcon v-for="terrain in map?.terrain" :terrain="terrain" v-bind:key="terrain" />
                                 </div>
                             </div>
-                            <!-- <div v-if="map.startPositions" class="detail-text"><b>Start Positions:</b> {{ map.startPositions.length }}</div> -->
-                            <div class="gridform flex-bottom">
-                                <Button
-                                    @click="toggleMapFavorite"
-                                    v-if="!map.isFavorite"
-                                    class="icon"
-                                    v-tooltip.bottom="t('lobby.library.maps.addToFavorites')"
-                                >
-                                    <Icon :icon="heart_plus" :height="33" />
-                                </Button>
-                                <Button
-                                    @click="toggleMapFavorite"
-                                    v-if="map.isFavorite"
-                                    class="icon"
-                                    v-tooltip.bottom="t('lobby.library.maps.removeFromFavorites')"
-                                >
-                                    <Icon :icon="heart_minus" :height="33" />
-                                </Button>
-                                <DownloadContentButton v-if="map" :maps="[map.springName]" class="fullwidth green" @click="play">{{
-                                    t("lobby.buttons.quickPlay")
-                                }}</DownloadContentButton>
-                                <Button v-else class="fullwidth green" disabled>{{ t("lobby.buttons.quickPlay") }}</Button>
+                            <div class="padding-lg"></div>
+                            <div v-if="map.author" class="item-title">
+                                <p>
+                                    {{ t("lobby.library.maps.author") }} <b class="padding-md item">{{ map.author }}</b>
+                                </p>
                             </div>
                         </div>
+                        <!-- <div v-if="map.startPositions" class="detail-text"><b>Start Positions:</b> {{ map.startPositions.length }}</div> -->
+                        <div class="gridform flex-bottom">
+                            <Button
+                                @click="toggleMapFavorite"
+                                v-if="!map.isFavorite"
+                                class="icon"
+                                v-tooltip.bottom="t('lobby.library.maps.addToFavorites')"
+                            >
+                                <Icon :icon="heart_plus" :height="33" />
+                            </Button>
+                            <Button
+                                @click="toggleMapFavorite"
+                                v-if="map.isFavorite"
+                                class="icon"
+                                v-tooltip.bottom="t('lobby.library.maps.removeFromFavorites')"
+                            >
+                                <Icon :icon="heart_minus" :height="33" />
+                            </Button>
+                            <DownloadContentButton v-if="map" :maps="[map.springName]" class="fullwidth green" @click="play">{{
+                                t("lobby.buttons.quickPlay")
+                            }}</DownloadContentButton>
+                            <Button v-else class="fullwidth green" disabled>{{ t("lobby.buttons.quickPlay") }}</Button>
+                        </div>
                     </div>
                 </div>
-            </Panel>
-        </div>
+            </div>
+        </Panel>
     </div>
 </template>
 
@@ -149,9 +147,7 @@ function routerBack() {
 <style lang="scss" scoped>
 .map-details-container {
     display: flex;
-    align-self: center;
     height: 100%;
-    width: 1600px;
 }
 
 .page {
diff --git a/src/renderer/views/library/maps/maps.vue b/src/renderer/views/library/maps/maps.vue
index 745a8e716..38bc2b50f 100644
--- a/src/renderer/views/library/maps/maps.vue
+++ b/src/renderer/views/library/maps/maps.vue
@@ -9,21 +9,19 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
-        <div class="maps-container">
-            <div class="view-title">
-                <h1>{{ t("lobby.library.maps.title") }}</h1>
-            </div>
-            <div class="layout">
-                <Panel class="map-filters">
-                    <MapFiltersComponent />
-                </Panel>
-                <Panel class="flex-grow">
-                    <div class="flex-col fullheight">
-                        <MapListComponent @map-selected="onMapSelected" />
-                    </div>
-                </Panel>
-            </div>
+    <div class="maps-container">
+        <div class="view-title">
+            <h1>{{ t("lobby.library.maps.title") }}</h1>
+        </div>
+        <div class="layout">
+            <Panel class="map-filters">
+                <MapFiltersComponent />
+            </Panel>
+            <Panel class="flex-grow">
+                <div class="flex-col fullheight">
+                    <MapListComponent @map-selected="onMapSelected" />
+                </div>
+            </Panel>
         </div>
     </div>
 </template>
@@ -48,10 +46,7 @@ async function onMapSelected(map: MapData) {
 .maps-container {
     display: flex;
     flex-direction: column;
-    align-self: center;
-    width: 1600px;
     height: 100%;
-    padding-left: 40px;
 }
 
 .layout {
diff --git a/src/renderer/views/news/overview.vue b/src/renderer/views/news/overview.vue
index 9b9838401..b17bc8a25 100644
--- a/src/renderer/views/news/overview.vue
+++ b/src/renderer/views/news/overview.vue
@@ -9,32 +9,30 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
-        <div class="overview-container">
-            <div class="columns">
-                <div class="left-column">
-                    <Suspense>
-                        <NewsFeed />
-                        <template #fallback><Loader class="column-loader" :absolutePosition="false" /></template>
-                    </Suspense>
-                </div>
-                <div class="center-column">
-                    <img class="logo" src="/src/renderer/assets/images/BARLogoFull.png" />
-                    <div class="new-lobby-alpha">{{ t("lobby.overview.newLobbyAlpha") }}</div>
-                    <div class="new-lobby-subtext txt-multiline">{{ t("lobby.overview.newLobbySubtext") }}</div>
-                    <div class="button-container">
-                        <button class="quick-play-button" @click="battleStore.isSelectingGameMode = true">
-                            {{ t("lobby.buttons.quickPlay") }}
-                        </button>
-                    </div>
-                </div>
-                <div class="right-column">
-                    <Suspense>
-                        <DevlogFeed />
-                        <template #fallback><Loader class="column-loader" :absolutePosition="false" /></template>
-                    </Suspense>
+    <div class="overview-container">
+        <div class="columns">
+            <div class="left-column">
+                <Suspense>
+                    <NewsFeed />
+                    <template #fallback><Loader class="column-loader" :absolutePosition="false" /></template>
+                </Suspense>
+            </div>
+            <div class="center-column">
+                <img class="logo" src="/src/renderer/assets/images/BARLogoFull.png" />
+                <div class="new-lobby-alpha">{{ t("lobby.overview.newLobbyAlpha") }}</div>
+                <div class="new-lobby-subtext txt-multiline">{{ t("lobby.overview.newLobbySubtext") }}</div>
+                <div class="button-container">
+                    <button class="quick-play-button" @click="battleStore.isSelectingGameMode = true">
+                        {{ t("lobby.buttons.quickPlay") }}
+                    </button>
                 </div>
             </div>
+            <div class="right-column">
+                <Suspense>
+                    <DevlogFeed />
+                    <template #fallback><Loader class="column-loader" :absolutePosition="false" /></template>
+                </Suspense>
+            </div>
         </div>
     </div>
 </template>
diff --git a/src/renderer/views/play/customLobbies.vue b/src/renderer/views/play/customLobbies.vue
index 56f5efc05..ef701a340 100644
--- a/src/renderer/views/play/customLobbies.vue
+++ b/src/renderer/views/play/customLobbies.vue
@@ -9,75 +9,73 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
-        <div class="flex-row flex-grow gap-md hide-overflow fullheight">
-            <div class="flex-col flex-grow fullheight margin-left-lg margin-right-lg">
-                <div class="flex-row gap-md">
-                    <h1>{{ t("lobby.multiplayer.custom.title") }}</h1>
-                </div>
-                <div class="flex-row gap-md">
-                    <Checkbox v-model="settingsStore.battlesHidePvE" :label="t('lobby.multiplayer.custom.filters.hidePvE')" />
-                    <Checkbox v-model="settingsStore.battlesHideLocked" :label="t('lobby.multiplayer.custom.filters.hideLocked')" />
-                    <Checkbox v-model="settingsStore.battlesHideEmpty" :label="t('lobby.multiplayer.custom.filters.hideEmpty')" />
-                    <Checkbox v-model="settingsStore.battlesHideInProgress" :label="t('lobby.multiplayer.custom.filters.hideInProgress')" />
-                    <SearchBox v-model="searchVal" />
-                    <Button
-                        v-if="lobbyStore.activeLobby == undefined"
-                        class="blue"
-                        @click="createLobbyModalIsOpen = true"
-                        :disabled="lobbyStore.activeLobby != undefined"
-                        >{{ t("lobby.multiplayer.custom.hostBattle") }}</Button
-                    >
-                </div>
-                <Panel class="flex-col fullheight" :no-padding="true">
-                    <div class="margin-md fullheight">
-                        <div class="flex-col flex-grow fullheight flex-top">
-                            <HostBattle v-model="createLobbyModalIsOpen" />
-                            <div class="scroll-container">
-                                <DataTable
-                                    v-model:selection="lobbyStore.selectedLobby"
-                                    :value="lobbyList"
-                                    data-key="id"
-                                    autoLayout
-                                    class="p-datatable-sm"
-                                    selectionMode="single"
-                                    paginator
-                                    :rows="16"
-                                    :pageLinkSize="20"
-                                    @row-select="lobbyStore.selectedLobby = $event.data"
-                                    @row-dblclick="sendLobbyJoinRequest($event.data)"
-                                >
-                                    <template #empty>
-                                        <p>{{ t("lobby.multiplayer.custom.noLobbiesAvailable") }}</p>
+    <div class="flex-row flex-grow gap-md hide-overflow fullheight">
+        <div class="flex-col flex-grow fullheight margin-left-lg margin-right-lg">
+            <div class="flex-row gap-md">
+                <h1>{{ t("lobby.multiplayer.custom.title") }}</h1>
+            </div>
+            <div class="flex-row gap-md">
+                <Checkbox v-model="settingsStore.battlesHidePvE" :label="t('lobby.multiplayer.custom.filters.hidePvE')" />
+                <Checkbox v-model="settingsStore.battlesHideLocked" :label="t('lobby.multiplayer.custom.filters.hideLocked')" />
+                <Checkbox v-model="settingsStore.battlesHideEmpty" :label="t('lobby.multiplayer.custom.filters.hideEmpty')" />
+                <Checkbox v-model="settingsStore.battlesHideInProgress" :label="t('lobby.multiplayer.custom.filters.hideInProgress')" />
+                <SearchBox v-model="searchVal" />
+                <Button
+                    v-if="lobbyStore.activeLobby == undefined"
+                    class="blue"
+                    @click="createLobbyModalIsOpen = true"
+                    :disabled="lobbyStore.activeLobby != undefined"
+                    >{{ t("lobby.multiplayer.custom.hostBattle") }}</Button
+                >
+            </div>
+            <Panel class="flex-col fullheight" :no-padding="true">
+                <div class="margin-md fullheight">
+                    <div class="flex-col flex-grow fullheight flex-top">
+                        <HostBattle v-model="createLobbyModalIsOpen" />
+                        <div class="scroll-container">
+                            <DataTable
+                                v-model:selection="lobbyStore.selectedLobby"
+                                :value="lobbyList"
+                                data-key="id"
+                                autoLayout
+                                class="p-datatable-sm"
+                                selectionMode="single"
+                                paginator
+                                :rows="16"
+                                :pageLinkSize="20"
+                                @row-select="lobbyStore.selectedLobby = $event.data"
+                                @row-dblclick="sendLobbyJoinRequest($event.data)"
+                            >
+                                <template #empty>
+                                    <p>{{ t("lobby.multiplayer.custom.noLobbiesAvailable") }}</p>
+                                </template>
+                                <Column field="name" :header="t('lobby.multiplayer.custom.table.title')" sortable />
+                                <Column field="mapName" :header="t('lobby.multiplayer.custom.table.map')" sortable>
+                                    <template #body="{ data }">
+                                        <p>{{ data.mapName }}</p>
                                     </template>
-                                    <Column field="name" :header="t('lobby.multiplayer.custom.table.title')" sortable />
-                                    <Column field="mapName" :header="t('lobby.multiplayer.custom.table.map')" sortable>
-                                        <template #body="{ data }">
-                                            <p>{{ data.mapName }}</p>
-                                        </template>
-                                    </Column>
-                                    <Column :header="t('lobby.multiplayer.custom.table.players')" sortable sortField="playerCount.value">
-                                        <template #body="{ data }">
-                                            <div class="flex-row flex-center-items gap-md">
-                                                <div v-if="data.playerCount > 0" class="flex-row flex-center-items" style="gap: 2px">
-                                                    <Icon :icon="account" height="17" />{{ data.playerCount }}/{{ data.maxPlayerCount }}
-                                                </div>
-                                                <!-- no protocol support for bot and spec count in the listing. If required, need to add it to tachyon first -->
-                                                <!-- <div v-if="true" class="flex-row flex-center-items gap-xs" style="gap: 4px"> -->
-                                                <!--     <Icon :icon="eye" height="17" />{{ 0 }} -->
-                                                <!-- </div> -->
-                                                <!-- <div v-if="true" class="flex-row flex-center-items gap-xs" style="gap: 4px"> -->
-                                                <!--     <Icon :icon="robot" height="17" />{{ 0 }} -->
-                                                <!-- </div> -->
+                                </Column>
+                                <Column :header="t('lobby.multiplayer.custom.table.players')" sortable sortField="playerCount.value">
+                                    <template #body="{ data }">
+                                        <div class="flex-row flex-center-items gap-md">
+                                            <div v-if="data.playerCount > 0" class="flex-row flex-center-items" style="gap: 2px">
+                                                <Icon :icon="account" height="17" />{{ data.playerCount }}/{{ data.maxPlayerCount }}
                                             </div>
-                                        </template>
-                                    </Column>
-                                </DataTable>
-                            </div>
+                                            <!-- no protocol support for bot and spec count in the listing. If required, need to add it to tachyon first -->
+                                            <!-- <div v-if="true" class="flex-row flex-center-items gap-xs" style="gap: 4px"> -->
+                                            <!--     <Icon :icon="eye" height="17" />{{ 0 }} -->
+                                            <!-- </div> -->
+                                            <!-- <div v-if="true" class="flex-row flex-center-items gap-xs" style="gap: 4px"> -->
+                                            <!--     <Icon :icon="robot" height="17" />{{ 0 }} -->
+                                            <!-- </div> -->
+                                        </div>
+                                    </template>
+                                </Column>
+                            </DataTable>
                         </div>
                     </div>
-                </Panel>
-            </div>
+                </div>
+            </Panel>
         </div>
     </div>
 </template>
diff --git a/src/renderer/views/play/matchmaking.vue b/src/renderer/views/play/matchmaking.vue
index 138ea2f33..ec2020d2f 100644
--- a/src/renderer/views/play/matchmaking.vue
+++ b/src/renderer/views/play/matchmaking.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
+    <div>
         <div class="ranked-container">
             <div class="view-title">
                 <h1>{{ t("lobby.multiplayer.ranked.title") }}</h1>
@@ -187,7 +187,8 @@ function getTeamSize(queue: string) {
     align-self: center;
     gap: 20px;
     height: 100%;
-    width: 1000px;
+    width: 100%;
+    max-width: 1000px;
     overflow: visible;
 }
 
diff --git a/src/renderer/views/play/menu.vue b/src/renderer/views/play/menu.vue
index 927c54c01..7287cf363 100644
--- a/src/renderer/views/play/menu.vue
+++ b/src/renderer/views/play/menu.vue
@@ -9,58 +9,56 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view view-adjust-bottom">
-        <div class="move-right">
-            <div class="game-menu-container">
-                <div class="game-modes-grid">
-                    <Panel :no-padding="true" class="game-mode-card" @click="startSkirmish">
-                        <div class="card-content">
-                            <h2>{{ t("lobby.views.play.skirmish") }}</h2>
-                        </div>
-                    </Panel>
-
-                    <Panel :no-padding="true" class="game-mode-card disabled" @click="startCampaign">
-                        <div class="card-content">
-                            <h2>
-                                {{ t("lobby.views.play.campaign")
-                                }}<span class="small-text margin-left-md">{{ t("lobby.views.play.comingSoon") }}</span>
-                            </h2>
-                        </div>
-                    </Panel>
-
-                    <Panel :no-padding="true" class="game-mode-card disabled" @click="startMatchmaking">
-                        <div class="card-content">
-                            <h2>
-                                {{ t("lobby.views.play.matchmaking")
-                                }}<span class="small-text margin-left-md">{{ t("lobby.views.play.comingSoon") }}</span>
-                            </h2>
-                        </div>
-                    </Panel>
-
-                    <Panel :no-padding="true" class="game-mode-card" @click="openScenarios">
-                        <div class="card-content">
-                            <h2>{{ t("lobby.views.play.scenarios") }}</h2>
-                        </div>
-                    </Panel>
-
-                    <Panel :no-padding="true" class="game-mode-card disabled" @click="startCustomLobbies">
-                        <div class="card-content">
-                            <h2>
-                                {{ t("lobby.views.play.customLobbies")
-                                }}<span class="small-text margin-left-md">{{ t("lobby.views.play.comingSoon") }}</span>
-                            </h2>
-                        </div>
-                    </Panel>
-
-                    <Panel :no-padding="true" class="game-mode-card disabled" @click="openTournaments">
-                        <div class="card-content">
-                            <h2>
-                                {{ t("lobby.views.play.tournaments")
-                                }}<span class="small-text margin-left-md">{{ t("lobby.views.play.comingSoon") }}</span>
-                            </h2>
-                        </div>
-                    </Panel>
-                </div>
+    <div class="view-adjust-bottom move-right">
+        <div class="game-menu-container">
+            <div class="game-modes-grid">
+                <Panel :no-padding="true" class="game-mode-card" @click="startSkirmish">
+                    <div class="card-content">
+                        <h2>{{ t("lobby.views.play.skirmish") }}</h2>
+                    </div>
+                </Panel>
+
+                <Panel :no-padding="true" class="game-mode-card disabled" @click="startCampaign">
+                    <div class="card-content">
+                        <h2>
+                            {{ t("lobby.views.play.campaign")
+                            }}<span class="small-text margin-left-md">{{ t("lobby.views.play.comingSoon") }}</span>
+                        </h2>
+                    </div>
+                </Panel>
+
+                <Panel :no-padding="true" class="game-mode-card disabled" @click="startMatchmaking">
+                    <div class="card-content">
+                        <h2>
+                            {{ t("lobby.views.play.matchmaking")
+                            }}<span class="small-text margin-left-md">{{ t("lobby.views.play.comingSoon") }}</span>
+                        </h2>
+                    </div>
+                </Panel>
+
+                <Panel :no-padding="true" class="game-mode-card" @click="openScenarios">
+                    <div class="card-content">
+                        <h2>{{ t("lobby.views.play.scenarios") }}</h2>
+                    </div>
+                </Panel>
+
+                <Panel :no-padding="true" class="game-mode-card disabled" @click="startCustomLobbies">
+                    <div class="card-content">
+                        <h2>
+                            {{ t("lobby.views.play.customLobbies")
+                            }}<span class="small-text margin-left-md">{{ t("lobby.views.play.comingSoon") }}</span>
+                        </h2>
+                    </div>
+                </Panel>
+
+                <Panel :no-padding="true" class="game-mode-card disabled" @click="openTournaments">
+                    <div class="card-content">
+                        <h2>
+                            {{ t("lobby.views.play.tournaments")
+                            }}<span class="small-text margin-left-md">{{ t("lobby.views.play.comingSoon") }}</span>
+                        </h2>
+                    </div>
+                </Panel>
             </div>
         </div>
     </div>
diff --git a/src/renderer/views/play/scenarios.vue b/src/renderer/views/play/scenarios.vue
index 5a5f1fe0b..0817b2ba2 100644
--- a/src/renderer/views/play/scenarios.vue
+++ b/src/renderer/views/play/scenarios.vue
@@ -9,66 +9,64 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
-        <div class="scenarios-container">
-            <div class="view-title">
-                <h1>{{ t("lobby.singleplayer.scenarios.title") }}</h1>
-                <p>{{ t("lobby.singleplayer.scenarios.description") }}</p>
-            </div>
-            <Panel class="scenarios-main-panel" noPadding>
-                <div class="flex-row gap-lg fullheight">
-                    <div class="fullwidth flex-col">
-                        <div class="scenarios scroll-container">
-                            <TransitionGroup name="fade">
-                                <ScenarioTile
-                                    v-for="scenario in scenarios"
-                                    :key="scenario.title"
-                                    :scenario="scenario"
-                                    :class="{ selected: selectedScenario.scenarioid === scenario.scenarioid }"
-                                    @click="selectedScenario = scenario"
-                                />
-                            </TransitionGroup>
-                        </div>
-                    </div>
-                    <div class="scenario-preview flex-col gap-md">
-                        <h4>{{ selectedScenario.title }}</h4>
-                        <div class="scroll-container flex-grow">
-                            <Markdown :source="selectedScenario.summary" />
-                            <Markdown :source="selectedScenario.briefing" />
-                        </div>
-                        <div class="gridform">
-                            <div>{{ t("lobby.singleplayer.scenarios.victoryCondition") }}</div>
-                            <div>{{ selectedScenario.victorycondition }}</div>
-
-                            <div>{{ t("lobby.singleplayer.scenarios.loseCondition") }}</div>
-                            <div>{{ selectedScenario.losscondition }}</div>
-                        </div>
-                        <div>
-                            <Select v-model="selectedFaction" :label="t('lobby.singleplayer.scenarios.faction')" :options="factions" />
-                        </div>
-                        <div>
-                            <Select
-                                v-model="selectedDifficulty"
-                                :label="t('lobby.singleplayer.scenarios.difficulty')"
-                                :options="difficulties"
-                                optionLabel="name"
+    <div class="scenarios-container">
+        <div class="view-title">
+            <h1>{{ t("lobby.singleplayer.scenarios.title") }}</h1>
+            <p>{{ t("lobby.singleplayer.scenarios.description") }}</p>
+        </div>
+        <Panel class="scenarios-main-panel" noPadding>
+            <div class="flex-row gap-lg fullheight">
+                <div class="fullwidth flex-col">
+                    <div class="scenarios scroll-container">
+                        <TransitionGroup name="fade">
+                            <ScenarioTile
+                                v-for="scenario in scenarios"
+                                :key="scenario.title"
+                                :scenario="scenario"
+                                :class="{ selected: selectedScenario.scenarioid === scenario.scenarioid }"
+                                @click="selectedScenario = scenario"
                             />
-                        </div>
-                        <DownloadContentButton
-                            v-if="map"
-                            :maps="[map.springName]"
-                            :games="gameVersion ? [gameVersion] : []"
-                            :engines="enginesStore.selectedEngineVersion ? [enginesStore.selectedEngineVersion.id] : []"
-                            class="fullwidth green"
-                            :disabled="gameStore.status !== GameStatus.CLOSED"
-                            @click="launch"
-                            >{{ t("lobby.singleplayer.scenarios.launch") }}</DownloadContentButton
-                        >
-                        <Button v-else class="fullwidth green" disabled>{{ t("lobby.singleplayer.scenarios.launch") }}</Button>
+                        </TransitionGroup>
                     </div>
                 </div>
-            </Panel>
-        </div>
+                <div class="scenario-preview flex-col gap-md">
+                    <h4>{{ selectedScenario.title }}</h4>
+                    <div class="scroll-container flex-grow">
+                        <Markdown :source="selectedScenario.summary" />
+                        <Markdown :source="selectedScenario.briefing" />
+                    </div>
+                    <div class="gridform">
+                        <div>{{ t("lobby.singleplayer.scenarios.victoryCondition") }}</div>
+                        <div>{{ selectedScenario.victorycondition }}</div>
+
+                        <div>{{ t("lobby.singleplayer.scenarios.loseCondition") }}</div>
+                        <div>{{ selectedScenario.losscondition }}</div>
+                    </div>
+                    <div>
+                        <Select v-model="selectedFaction" :label="t('lobby.singleplayer.scenarios.faction')" :options="factions" />
+                    </div>
+                    <div>
+                        <Select
+                            v-model="selectedDifficulty"
+                            :label="t('lobby.singleplayer.scenarios.difficulty')"
+                            :options="difficulties"
+                            optionLabel="name"
+                        />
+                    </div>
+                    <DownloadContentButton
+                        v-if="map"
+                        :maps="[map.springName]"
+                        :games="gameVersion ? [gameVersion] : []"
+                        :engines="enginesStore.selectedEngineVersion ? [enginesStore.selectedEngineVersion.id] : []"
+                        class="fullwidth green"
+                        :disabled="gameStore.status !== GameStatus.CLOSED"
+                        @click="launch"
+                        >{{ t("lobby.singleplayer.scenarios.launch") }}</DownloadContentButton
+                    >
+                    <Button v-else class="fullwidth green" disabled>{{ t("lobby.singleplayer.scenarios.launch") }}</Button>
+                </div>
+            </div>
+        </Panel>
     </div>
 </template>
 
@@ -177,8 +175,6 @@ async function launch() {
     display: flex;
     flex-direction: column;
     height: 100%;
-    align-self: center;
-    width: 1600px;
 }
 
 .scenarios-main-panel {
diff --git a/src/renderer/views/profile/[userId].vue b/src/renderer/views/profile/[userId].vue
index a42b4794a..d650129d0 100644
--- a/src/renderer/views/profile/[userId].vue
+++ b/src/renderer/views/profile/[userId].vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: MIT
 { props: true, meta: { title: "Profile", hide: true, transition: { name: "slide-left" } } }
 </route>
 <template>
-    <div class="view">
+    <div>
         <Panel class="profile-container" v-if="user">
             <div class="profile-header">
                 <img ref="logo" class="avatar" src="/src/renderer/assets/images/BARLogoFull.png" />
@@ -58,8 +58,6 @@ const user = useDexieLiveQueryWithDeps([() => props.userId], () => {
 .profile-container {
     display: flex;
     height: 100%;
-    width: 1600px;
-    align-self: center;
 }
 
 .profile-header {
diff --git a/src/renderer/views/profile/party.vue b/src/renderer/views/profile/party.vue
index b96c29326..01439a184 100644
--- a/src/renderer/views/profile/party.vue
+++ b/src/renderer/views/profile/party.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: MIT
 { props: true, meta: { title: "Party", hide: true, transition: { name: "slide-left" } } }
 </route>
 <template>
-    <div class="view">
+    <div>
         <div class="party-container">
             <div class="view-title">
                 <h1>{{ t("lobby.views.party.title") }}</h1>
@@ -383,8 +383,6 @@ function getTeamSize(queue: string) {
     display: flex;
     flex-direction: column;
     height: 100%;
-    width: 1600px;
-    align-self: center;
 }
 .mode-select {
     display: flex;
diff --git a/src/renderer/views/watch/replays.vue b/src/renderer/views/watch/replays.vue
index 38c0e6ca8..3342f0768 100644
--- a/src/renderer/views/watch/replays.vue
+++ b/src/renderer/views/watch/replays.vue
@@ -9,117 +9,115 @@ SPDX-License-Identifier: MIT
 </route>
 
 <template>
-    <div class="view">
-        <div class="replay-container">
-            <div class="view-title">
-                <h1>{{ t("lobby.views.watch.replays.title") }}</h1>
-            </div>
-            <div class="flex-row flex-grow gap-md">
-                <div class="middle-section">
-                    <Panel>
-                        <div class="flex-col fullheight gap-md">
-                            <div class="flex-row gap-md fullwidth">
-                                <TriStateCheckbox
-                                    v-model="settingsStore.endedNormallyFilter"
-                                    :label="t('lobby.views.watch.replays.endedNormally')"
-                                />
-                                <Checkbox v-model="showSpoilers" :label="t('lobby.views.watch.replays.showSpoilers')" />
-                                <div class="flex-grow">
-                                    <SearchBox v-model="fulltextSearch" :placeholder="t('lobby.views.watch.replays.searchPlaceholder')" />
-                                </div>
-                                <div class="flex-right flex-row gap-md" style="flex: none">
-                                    <Button @click="openBrowserToReplayService">{{
-                                        t("lobby.views.watch.replays.browseOnlineReplays")
-                                    }}</Button>
-                                    <Button @click="openReplaysFolder">{{ t("lobby.views.watch.replays.openReplaysFolder") }}</Button>
-                                </div>
+    <div class="replay-container">
+        <div class="view-title">
+            <h1>{{ t("lobby.views.watch.replays.title") }}</h1>
+        </div>
+        <div class="flex-row flex-grow gap-md">
+            <div class="middle-section">
+                <Panel>
+                    <div class="flex-col fullheight gap-md">
+                        <div class="flex-row gap-md fullwidth">
+                            <TriStateCheckbox
+                                v-model="settingsStore.endedNormallyFilter"
+                                :label="t('lobby.views.watch.replays.endedNormally')"
+                            />
+                            <Checkbox v-model="showSpoilers" :label="t('lobby.views.watch.replays.showSpoilers')" />
+                            <div class="flex-grow">
+                                <SearchBox v-model="fulltextSearch" :placeholder="t('lobby.views.watch.replays.searchPlaceholder')" />
                             </div>
-                            <DataTable
-                                v-model:first="offset"
-                                v-model:selection="selectedReplay"
-                                :lazy="true"
-                                :value="replays"
-                                :paginator="true"
-                                :rows="limit"
-                                :totalRecords="replaysCount"
-                                selectionMode="single"
-                                dataKey="fileName"
-                                :sortOrder="sortOrder === 'asc' ? 1 : -1"
-                                :sortField="sortField"
-                                :rowClass="(data) => (highlightedReplays.has(data.fileName) ? 'highlighted-replay' : '')"
-                                @page="onPage"
-                                @sort="onSort"
-                            >
-                                <template #empty>{{ t("lobby.views.watch.replays.noReplaysFound") }}</template>
-                                <Column :header="t('lobby.views.watch.replays.name')">
-                                    <template #body="{ data }">
-                                        <template v-if="data.preset === 'duel'">
-                                            {{ data.contenders?.[0]?.name ?? t("lobby.views.watch.replays.nobody") }} vs
-                                            {{ data.contenders?.[1]?.name ?? t("lobby.views.watch.replays.nobody") }}
-                                        </template>
-                                        <template v-else-if="data.preset === 'team'">
-                                            {{ data.teams[0].playerCount }} vs {{ data.teams[1].playerCount }}
-                                        </template>
-                                        <template v-if="data.preset === 'ffa'"
-                                            >{{ data.contenders.length }} {{ t("lobby.views.watch.replays.wayFFA") }}</template
-                                        >
-                                        <template v-if="data.preset === 'teamffa'"
-                                            >{{ data.teams[0].playerCount }} {{ t("lobby.views.watch.replays.wayTeamFFA") }}</template
-                                        >
-                                    </template>
-                                </Column>
-                                <Column :header="t('lobby.views.watch.replays.date')" :sortable="true" sortField="startTime">
-                                    <template #body="{ data }">
-                                        {{ format(data.startTime, "yyyy/MM/dd hh:mm a") }}
+                            <div class="flex-right flex-row gap-md" style="flex: none">
+                                <Button @click="openBrowserToReplayService">{{
+                                    t("lobby.views.watch.replays.browseOnlineReplays")
+                                }}</Button>
+                                <Button @click="openReplaysFolder">{{ t("lobby.views.watch.replays.openReplaysFolder") }}</Button>
+                            </div>
+                        </div>
+                        <DataTable
+                            v-model:first="offset"
+                            v-model:selection="selectedReplay"
+                            :lazy="true"
+                            :value="replays"
+                            :paginator="true"
+                            :rows="limit"
+                            :totalRecords="replaysCount"
+                            selectionMode="single"
+                            dataKey="fileName"
+                            :sortOrder="sortOrder === 'asc' ? 1 : -1"
+                            :sortField="sortField"
+                            :rowClass="(data) => (highlightedReplays.has(data.fileName) ? 'highlighted-replay' : '')"
+                            @page="onPage"
+                            @sort="onSort"
+                        >
+                            <template #empty>{{ t("lobby.views.watch.replays.noReplaysFound") }}</template>
+                            <Column :header="t('lobby.views.watch.replays.name')">
+                                <template #body="{ data }">
+                                    <template v-if="data.preset === 'duel'">
+                                        {{ data.contenders?.[0]?.name ?? t("lobby.views.watch.replays.nobody") }} vs
+                                        {{ data.contenders?.[1]?.name ?? t("lobby.views.watch.replays.nobody") }}
                                     </template>
-                                </Column>
-                                <Column :header="t('lobby.views.watch.replays.duration')" :sortable="true" sortField="gameDurationMs">
-                                    <template #body="{ data }">
-                                        {{ getFriendlyDuration(data.gameDurationMs) }}
+                                    <template v-else-if="data.preset === 'team'">
+                                        {{ data.teams[0].playerCount }} vs {{ data.teams[1].playerCount }}
                                     </template>
-                                </Column>
-                                <Column
-                                    field="mapSpringName"
-                                    :header="t('lobby.views.watch.replays.map')"
-                                    :sortable="true"
-                                    sortField="mapSpringName"
-                                />
-                            </DataTable>
-                        </div>
-                    </Panel>
-                </div>
-                <div class="right-section">
-                    <Panel class="flex-grow" no-padding>
-                        <ReplayPreview v-if="selectedReplay" :replay="selectedReplay" :showSpoilers="showSpoilers">
-                            <template #actions="{ replay }">
-                                <div class="fullwidth">
-                                    <div class="flex-row flex-bottom gap-md padding-bottom-md">
-                                        <DownloadContentButton
-                                            v-if="map && replay"
-                                            :maps="[map.springName]"
-                                            :games="[replay.gameVersion]"
-                                            :engines="[replay.engineVersion]"
-                                            @click="watchReplay(replay)"
-                                            :disabled="gameStore.status !== GameStatus.CLOSED"
-                                        >
-                                            <template v-if="gameStore.status === GameStatus.RUNNING">{{
-                                                t("lobby.views.watch.replays.gameIsRunning")
-                                            }}</template>
-                                            <template v-else-if="gameStore.status === GameStatus.LOADING">{{
-                                                t("lobby.views.watch.replays.launching")
-                                            }}</template>
-                                            <template v-else>{{ t("lobby.views.watch.replays.watch") }}</template>
-                                        </DownloadContentButton>
-                                        <Button v-else disabled style="flex-grow: 1">{{ t("lobby.views.watch.replays.watch") }}</Button>
-                                        <Button v-if="replay" @click="showReplayFile(replay)" class="icon" :height="32"
-                                            ><Icon :icon="folder" :height="32"
-                                        /></Button>
-                                    </div>
+                                    <template v-if="data.preset === 'ffa'"
+                                        >{{ data.contenders.length }} {{ t("lobby.views.watch.replays.wayFFA") }}</template
+                                    >
+                                    <template v-if="data.preset === 'teamffa'"
+                                        >{{ data.teams[0].playerCount }} {{ t("lobby.views.watch.replays.wayTeamFFA") }}</template
+                                    >
+                                </template>
+                            </Column>
+                            <Column :header="t('lobby.views.watch.replays.date')" :sortable="true" sortField="startTime">
+                                <template #body="{ data }">
+                                    {{ format(data.startTime, "yyyy/MM/dd hh:mm a") }}
+                                </template>
+                            </Column>
+                            <Column :header="t('lobby.views.watch.replays.duration')" :sortable="true" sortField="gameDurationMs">
+                                <template #body="{ data }">
+                                    {{ getFriendlyDuration(data.gameDurationMs) }}
+                                </template>
+                            </Column>
+                            <Column
+                                field="mapSpringName"
+                                :header="t('lobby.views.watch.replays.map')"
+                                :sortable="true"
+                                sortField="mapSpringName"
+                            />
+                        </DataTable>
+                    </div>
+                </Panel>
+            </div>
+            <div class="right-section">
+                <Panel class="flex-grow" no-padding>
+                    <ReplayPreview v-if="selectedReplay" :replay="selectedReplay" :showSpoilers="showSpoilers">
+                        <template #actions="{ replay }">
+                            <div class="fullwidth">
+                                <div class="flex-row flex-bottom gap-md padding-bottom-md">
+                                    <DownloadContentButton
+                                        v-if="map && replay"
+                                        :maps="[map.springName]"
+                                        :games="[replay.gameVersion]"
+                                        :engines="[replay.engineVersion]"
+                                        @click="watchReplay(replay)"
+                                        :disabled="gameStore.status !== GameStatus.CLOSED"
+                                    >
+                                        <template v-if="gameStore.status === GameStatus.RUNNING">{{
+                                            t("lobby.views.watch.replays.gameIsRunning")
+                                        }}</template>
+                                        <template v-else-if="gameStore.status === GameStatus.LOADING">{{
+                                            t("lobby.views.watch.replays.launching")
+                                        }}</template>
+                                        <template v-else>{{ t("lobby.views.watch.replays.watch") }}</template>
+                                    </DownloadContentButton>
+                                    <Button v-else disabled style="flex-grow: 1">{{ t("lobby.views.watch.replays.watch") }}</Button>
+                                    <Button v-if="replay" @click="showReplayFile(replay)" class="icon" :height="32"
+                                        ><Icon :icon="folder" :height="32"
+                                    /></Button>
                                 </div>
-                            </template>
-                        </ReplayPreview>
-                    </Panel>
-                </div>
+                            </div>
+                        </template>
+                    </ReplayPreview>
+                </Panel>
             </div>
         </div>
     </div>
@@ -278,35 +276,25 @@ function showReplayFile(replay: Replay) {
 </script>
 
 <style lang="scss" scoped>
-.replay-view {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-
-    padding: 60px 60px 100px 60px;
-
-    gap: 20px;
-    padding-bottom: 120px;
-    align-self: center;
-}
-
 .replay-container {
     display: flex;
     flex-direction: column;
     height: 100%;
-    align-self: center;
 }
 
 .middle-section {
-    width: 1200px;
+    flex: 1 1 0;
+    min-width: 0;
     height: 700px;
+    max-height: 100%;
 }
 
 .right-section {
     display: flex;
+    flex: 0 1 400px;
+    min-width: 0;
     height: 700px;
-    width: 400px;
+    max-height: 100%;
 }
 
 :deep(.p-datatable-tbody tr.highlighted-replay td) {
diff --git a/tests/unit/renderer/connection-intent.spec.ts b/tests/unit/renderer/connection-intent.spec.ts
index a712ef035..e54705c7f 100644
--- a/tests/unit/renderer/connection-intent.spec.ts
+++ b/tests/unit/renderer/connection-intent.spec.ts
@@ -28,8 +28,12 @@ Object.assign(window.tachyon, {
     onConnected: (callback: () => void) => void connectHandlers.push(callback),
     onDisconnected: (callback: () => void) => void disconnectHandlers.push(callback),
     onBattleStart: (callback: (battle: BattleStartRequestData) => void) => void battleStartHandlers.push(callback),
-    onBattleEnded: (callback: (data: BattleEndedEventData) => void) => void battleEndedHandlers.push(callback),
-    onEvent: (command: string, callback: (data: unknown) => void) => void eventHandlers.set(command, callback),
+    onEvent: (command: string, callback: (data: unknown) => void) => {
+        if (command === "battle/ended") {
+            battleEndedHandlers.push(callback as (data: BattleEndedEventData) => void);
+        }
+        eventHandlers.set(command, callback);
+    },
 });
 
 Object.defineProperty(window, "auth", {
diff --git a/tests/unit/renderer/store-going-offline.spec.ts b/tests/unit/renderer/store-going-offline.spec.ts
index 118d32aff..d3abd732c 100644
--- a/tests/unit/renderer/store-going-offline.spec.ts
+++ b/tests/unit/renderer/store-going-offline.spec.ts
@@ -17,7 +17,7 @@ Object.assign(window.tachyon, {
     dropConnection: vi.fn(async () => {}),
     requestStructured: vi.fn(async () => ({ status: "success", data: {} })),
     onBattleStart: vi.fn(),
-    onBattleEnded: vi.fn(),
+    onEvent: vi.fn(),
     onDisconnected: (callback: () => void) => void disconnectHandlers.push(callback),
     onConnected: (callback: () => void) => void connectHandlers.push(callback),
 });
diff --git a/tests/unit/shared/preload-api-context-bridge.spec.ts b/tests/unit/shared/preload-api-context-bridge.spec.ts
index 039d447e5..cfa3e3271 100644
--- a/tests/unit/shared/preload-api-context-bridge.spec.ts
+++ b/tests/unit/shared/preload-api-context-bridge.spec.ts
@@ -96,18 +96,18 @@ describe("Preload API Context Bridge", () => {
         await import("@preload/preload");
 
         mockWindow.mainWindow.setFullscreen(true);
-        mockWindow.mainWindow.setSize(42);
+        mockWindow.mainWindow.setSize(1920, 1080);
         mockWindow.mainWindow.flashFrame(false);
         mockWindow.mainWindow.minimize();
         mockWindow.mainWindow.isFullscreen();
-        mockWindow.mainWindow.resized();
+        mockWindow.mainWindow.setUiScale(1.25);
 
         expect(mockIpcRenderer.invoke).toHaveBeenCalledWith("mainWindow:setFullscreen", true);
-        expect(mockIpcRenderer.invoke).toHaveBeenCalledWith("mainWindow:setSize", 42);
+        expect(mockIpcRenderer.invoke).toHaveBeenCalledWith("mainWindow:setSize", 1920, 1080);
         expect(mockIpcRenderer.invoke).toHaveBeenCalledWith("mainWindow:flashFrame", false);
         expect(mockIpcRenderer.invoke).toHaveBeenCalledWith("mainWindow:minimize");
         expect(mockIpcRenderer.invoke).toHaveBeenCalledWith("mainWindow:isFullscreen");
-        expect(mockIpcRenderer.invoke).toHaveBeenCalledWith("mainWindow:resized");
+        expect(mockIpcRenderer.invoke).toHaveBeenCalledWith("mainWindow:setUiScale", 1.25);
     });
 
     it("should expose shell API", async () => {