diff --git a/src/main/java/dev/kruhlmann/imgfloat/config/SystemEnvironmentValidator.java b/src/main/java/dev/kruhlmann/imgfloat/config/SystemEnvironmentValidator.java
index 4791c0e..00546e5 100644
--- a/src/main/java/dev/kruhlmann/imgfloat/config/SystemEnvironmentValidator.java
+++ b/src/main/java/dev/kruhlmann/imgfloat/config/SystemEnvironmentValidator.java
@@ -68,13 +68,13 @@ public class SystemEnvironmentValidator {
 
     private void checkString(String value, String name, StringBuilder missing) {
         if (value != null && StringUtils.hasText(value)) {
-            return
+            return;
         }
         missing.append(" - ").append(name).append("\n");
     }
 
     private <T extends Number> void checkUnsignedNumeric(T value, String name, StringBuilder missing) {
-        if (value !== null && value.doubleValue() >= 0) {
+        if (value != null && value.doubleValue() >= 0) {
             return;
         }
         missing.append(" - ").append(name).append('\n');
diff --git a/src/main/java/dev/kruhlmann/imgfloat/service/ChannelDirectoryService.java b/src/main/java/dev/kruhlmann/imgfloat/service/ChannelDirectoryService.java
index 4bb1906..7a17d13 100644
--- a/src/main/java/dev/kruhlmann/imgfloat/service/ChannelDirectoryService.java
+++ b/src/main/java/dev/kruhlmann/imgfloat/service/ChannelDirectoryService.java
@@ -289,8 +289,7 @@ public class ChannelDirectoryService {
                     asset.setHidden(request.isHidden());
                     assetRepository.save(asset);
                     AssetPatch patch = AssetPatch.fromVisibility(asset);
-                    messagingTemplate.convertAndSend(topicFor(broadcaster),
-                            AssetEvent.visibility(broadcaster, patch));
+                    messagingTemplate.convertAndSend(topicFor(broadcaster), AssetEvent.visibility(broadcaster, patch));
                     return AssetView.from(normalized, asset);
                 });
     }
diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index 6f35fd6..32e31b6 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -140,6 +140,151 @@ body {
     margin-top: 6px;
 }
 
+.settings-hero {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    align-items: center;
+}
+
+.settings-layout {
+    display: grid;
+    grid-template-columns: 2fr minmax(260px, 1fr);
+    gap: 18px;
+    align-items: start;
+}
+
+@media (max-width: 900px) {
+    .settings-layout {
+        grid-template-columns: 1fr;
+    }
+}
+
+.settings-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.settings-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.hero-copy h1 {
+    margin: 8px 0 6px;
+}
+
+.stat-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+}
+
+.stat-grid.compact {
+    gap: 10px;
+}
+
+.stat {
+    border: 1px solid #1f2937;
+    border-radius: 12px;
+    padding: 14px;
+    background: rgba(255, 255, 255, 0.02);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.stat-label {
+    color: #cbd5e1;
+    font-size: 13px;
+    margin: 0 0 4px;
+}
+
+.stat-value {
+    font-size: 22px;
+    font-weight: 700;
+    margin: 0;
+}
+
+.stat-subtitle {
+    margin: 6px 0 0;
+    color: #94a3b8;
+    font-size: 12px;
+}
+
+.field-hint {
+    color: #94a3b8;
+    font-size: 13px;
+    margin: 6px 0 0;
+}
+
+.form-section {
+    border: 1px solid #1f2937;
+    border-radius: 12px;
+    padding: 14px;
+    background: rgba(255, 255, 255, 0.01);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.form-heading h3 {
+    margin: 4px 0 0;
+}
+
+.form-heading .muted {
+    margin-top: 2px;
+}
+
+.form-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 4px;
+}
+
+.status-chip {
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.1);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    color: #e2e8f0;
+    font-size: 14px;
+    margin: 0;
+}
+
+.status-chip.status-success {
+    background: rgba(34, 197, 94, 0.12);
+    border-color: rgba(34, 197, 94, 0.35);
+    color: #bbf7d0;
+}
+
+.status-chip.status-warning {
+    background: rgba(251, 191, 36, 0.12);
+    border-color: rgba(251, 191, 36, 0.4);
+    color: #fef3c7;
+}
+
+.info-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.info-card.subtle {
+    background: rgba(15, 23, 42, 0.75);
+}
+
+.hint-list {
+    margin: 0;
+    padding-left: 16px;
+    color: #cbd5e1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
 .channels-footer {
     display: flex;
     align-items: center;
diff --git a/src/main/resources/static/js/settings.js b/src/main/resources/static/js/settings.js
index df36794..662f38b 100644
--- a/src/main/resources/static/js/settings.js
+++ b/src/main/resources/static/js/settings.js
@@ -8,6 +8,12 @@ const minPitchElement = document.getElementById("min-audio-pitch");
 const maxPitchElement = document.getElementById("max-audio-pitch");
 const minVolumeElement = document.getElementById("min-volume");
 const maxVolumeElement = document.getElementById("max-volume");
+const statusElement = document.getElementById("settings-status");
+const statCanvasFpsElement = document.getElementById("stat-canvas-fps");
+const statCanvasSizeElement = document.getElementById("stat-canvas-size");
+const statPlaybackRangeElement = document.getElementById("stat-playback-range");
+const statAudioRangeElement = document.getElementById("stat-audio-range");
+const statVolumeRangeElement = document.getElementById("stat-volume-range");
 
 const currentSettings = JSON.parse(serverRenderedSettings);
 let userSettings = { ...currentSettings };
@@ -44,6 +50,15 @@ function setFormSettings(s) {
     maxVolumeElement.value = s.maxAssetVolumeFraction;
 }
 
+function updateStatCards(settings) {
+    if (!settings) return;
+    statCanvasFpsElement.textContent = `${settings.canvasFramesPerSecond ?? "--"} fps`;
+    statCanvasSizeElement.textContent = `${settings.maxCanvasSideLengthPixels ?? "--"} px`;
+    statPlaybackRangeElement.textContent = `${settings.minAssetPlaybackSpeedFraction ?? "--"} – ${settings.maxAssetPlaybackSpeedFraction ?? "--"}x`;
+    statAudioRangeElement.textContent = `${settings.minAssetAudioPitchFraction ?? "--"} – ${settings.maxAssetAudioPitchFraction ?? "--"}x`;
+    statVolumeRangeElement.textContent = `${settings.minAssetVolumeFraction ?? "--"} – ${settings.maxAssetVolumeFraction ?? "--"}x`;
+}
+
 function readInt(input) {
     return input.checkValidity() ? Number(input.value) : null;
 }
@@ -66,13 +81,20 @@ function loadUserSettingsFromDom() {
 function updateSubmitButtonDisabledState() {
     if (jsonEquals(currentSettings, userSettings)) {
         submitButtonElement.disabled = "disabled";
+        statusElement.textContent = "No changes yet.";
+        statusElement.classList.remove("status-success", "status-warning");
         return;
     }
     if (!formElement.checkValidity()) {
         submitButtonElement.disabled = "disabled";
+        statusElement.textContent = "Fix highlighted fields.";
+        statusElement.classList.add("status-warning");
+        statusElement.classList.remove("status-success");
         return;
     }
     submitButtonElement.disabled = null;
+    statusElement.textContent = "Ready to save.";
+    statusElement.classList.remove("status-warning");
 }
 
 function submitSettingsForm() {
@@ -81,7 +103,9 @@ function submitSettingsForm() {
         showToast("Settings not valid", "warning");
         return;
     }
-    fetch("/api/settings/set", { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: userSettings }).then((r) => {
+    statusElement.textContent = "Saving…";
+    statusElement.classList.remove("status-success", "status-warning");
+    fetch("/api/settings/set", { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userSettings) }).then((r) => {
         if (!r.ok) {
             throw new Error('Failed to load canvas');
         }
@@ -91,10 +115,17 @@ function submitSettingsForm() {
         .then((newSettings) => {
             currentSettings = { ...newSettings };
             userSettings = { ...newSettings };
+            updateStatCards(newSettings);
+            showToast("Settings saved", "success");
+            statusElement.textContent = "Saved.";
+            statusElement.classList.add("status-success");
+            updateSubmitButtonDisabledState();
         })
         .catch((error) => {
             showToast('Unable to save settings', 'error')
             console.error(error);
+            statusElement.textContent = "Save failed. Try again.";
+            statusElement.classList.add("status-warning");
         });
 }
 
@@ -105,4 +136,11 @@ formElement.querySelectorAll("input").forEach((input) => {
     });
 });
 
+formElement.addEventListener("submit", (event) => {
+    event.preventDefault();
+    submitSettingsForm();
+});
+
 setFormSettings(currentSettings);
+updateStatCards(currentSettings);
+updateSubmitButtonDisabledState();
diff --git a/src/main/resources/templates/settings.html b/src/main/resources/templates/settings.html
index 032c33f..546ff1f 100644
--- a/src/main/resources/templates/settings.html
+++ b/src/main/resources/templates/settings.html
@@ -21,92 +21,208 @@
             </header>
 
             <main class="settings-main">
-                <section class="settings-card">
-                    <p class="eyebrow subtle">System administrator settings</p>
-                    <form novalidate id="settings-form" class="settings-form">
-                        <label for="canvas-fps">Canvas FPS</label>
-                        <input
-                            id="canvas-fps"
-                            name="canvas-fps"
-                            class="text-input"
-                            type="text"
-                            inputmode="numeric"
-                            pattern="^[1-9]\d*$"
-                        />
-
-                        <label for="canvas-size">Canvas max side length (pixels)</label>
-                        <input
-                            id="canvas-size"
-                            name="canvas-size"
-                            class="text-input"
-                            type="text"
-                            inputmode="numeric"
-                            pattern="^[1-9]\d*$"
-                        />
-
-                        <label for="min-playback-speed">Min playback speed</label>
-                        <input
-                            id="min-playback-speed"
-                            name="min-playback-speed"
-                            class="text-input"
-                            type="text"
-                            inputmode="decimal"
-                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
-                        />
-
-                        <label for="max-playback-speed">Max playback speed</label>
-                        <input
-                            id="max-playback-speed"
-                            name="max-playback-speed"
-                            class="text-input"
-                            type="text"
-                            inputmode="decimal"
-                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
-                        />
-
-                        <label for="min-audio-pitch">Min audio pitch</label>
-                        <input
-                            id="min-audio-pitch"
-                            name="min-audio-pitch"
-                            class="text-input"
-                            type="text"
-                            inputmode="decimal"
-                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
-                        />
-
-                        <label for="max-audio-pitch">Max audio pitch</label>
-                        <input
-                            id="max-audio-pitch"
-                            name="max-audio-pitch"
-                            class="text-input"
-                            type="text"
-                            inputmode="decimal"
-                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
-                        />
-
-                        <label for="min-volume">Min volume</label>
-                        <input
-                            id="min-volume"
-                            name="min-volume"
-                            class="text-input"
-                            type="text"
-                            inputmode="decimal"
-                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
-                        />
-
-                        <label for="max-volume">Max volume</label>
-                        <input
-                            id="max-volume"
-                            name="max-volume"
-                            class="text-input"
-                            type="text"
-                            inputmode="decimal"
-                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
-                        />
-
-                        <button id="settings-submit-button" type="submit" class="button block" disabled>Save settings</button>
-                    </form>
+                <section class="settings-card settings-hero">
+                    <div class="hero-copy">
+                        <p class="eyebrow subtle">System administrator settings</p>
+                        <h1>Application defaults</h1>
+                        <p class="muted">
+                            Configure overlay performance and audio guardrails for every channel using Imgfloat.
+                            These settings are applied globally.
+                        </p>
+                        <div class="badge-row">
+                            <span class="badge soft"><i class="fa-solid fa-gauge-high"></i> Performance tuned</span>
+                            <span class="badge"><i class="fa-solid fa-cloud"></i> Server-wide</span>
+                            <span class="badge subtle"><i class="fa-solid fa-gear"></i> Admin only</span>
+                        </div>
+                    </div>
+                    <div class="stat-grid compact">
+                        <div class="stat">
+                            <p class="stat-label">Canvas FPS</p>
+                            <p class="stat-value" id="stat-canvas-fps">--</p>
+                            <p class="stat-subtitle">Longest side <span id="stat-canvas-size">--</span></p>
+                        </div>
+                        <div class="stat">
+                            <p class="stat-label">Playback speed</p>
+                            <p class="stat-value" id="stat-playback-range">--</p>
+                            <p class="stat-subtitle">Applies to all animations</p>
+                        </div>
+                        <div class="stat">
+                            <p class="stat-label">Audio pitch</p>
+                            <p class="stat-value" id="stat-audio-range">--</p>
+                            <p class="stat-subtitle">Fraction of original clip</p>
+                        </div>
+                        <div class="stat">
+                            <p class="stat-label">Volume limits</p>
+                            <p class="stat-value" id="stat-volume-range">--</p>
+                            <p class="stat-subtitle">Keeps alerts comfortable</p>
+                        </div>
+                    </div>
                 </section>
+
+                <div class="settings-layout">
+                    <section class="settings-card settings-panel">
+                        <div class="section-heading">
+                            <div>
+                                <p class="eyebrow subtle">Overlay defaults</p>
+                                <h2>Performance & audio budget</h2>
+                                <p class="muted tiny">Tune the canvas and audio guardrails to keep overlays smooth and balanced.</p>
+                            </div>
+                        </div>
+
+                        <form novalidate id="settings-form" class="settings-form">
+                            <div class="form-section">
+                                <div class="form-heading">
+                                    <p class="eyebrow subtle">Canvas</p>
+                                    <h3>Rendering budget</h3>
+                                    <p class="muted tiny">Match FPS and max dimensions to your streaming canvas for consistent overlays.</p>
+                                </div>
+                                <div class="control-grid split-row">
+                                    <label for="canvas-fps">Canvas FPS
+                                        <input
+                                            id="canvas-fps"
+                                            name="canvas-fps"
+                                            class="text-input"
+                                            type="text"
+                                            inputmode="numeric"
+                                            pattern="^[1-9]\d*$"
+                                            placeholder="60"
+                                        />
+                                    </label>
+
+                                    <label for="canvas-size">Canvas max side length (pixels)
+                                        <input
+                                            id="canvas-size"
+                                            name="canvas-size"
+                                            class="text-input"
+                                            type="text"
+                                            inputmode="numeric"
+                                            pattern="^[1-9]\d*$"
+                                            placeholder="1920"
+                                        />
+                                    </label>
+                                </div>
+                                <p class="field-hint">Use the longest edge of your OBS browser source to prevent stretching.</p>
+                            </div>
+
+                            <div class="form-section">
+                                <div class="form-heading">
+                                    <p class="eyebrow subtle">Playback</p>
+                                    <h3>Animation speed limits</h3>
+                                    <p class="muted tiny">Bound default speeds between 0 and 1 so clips run predictably.</p>
+                                </div>
+                                <div class="control-grid split-row">
+                                    <label for="min-playback-speed">Min playback speed
+                                        <input
+                                            id="min-playback-speed"
+                                            name="min-playback-speed"
+                                            class="text-input"
+                                            type="text"
+                                            inputmode="decimal"
+                                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                                            placeholder="0.5"
+                                        />
+                                    </label>
+
+                                    <label for="max-playback-speed">Max playback speed
+                                        <input
+                                            id="max-playback-speed"
+                                            name="max-playback-speed"
+                                            class="text-input"
+                                            type="text"
+                                            inputmode="decimal"
+                                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                                            placeholder="1.0"
+                                        />
+                                    </label>
+                                </div>
+                                <p class="field-hint">Keep the maximum at 1.0 to avoid speeding overlays beyond their source frame rate.</p>
+                            </div>
+
+                            <div class="form-section">
+                                <div class="form-heading">
+                                    <p class="eyebrow subtle">Audio</p>
+                                    <h3>Pitch & volume guardrails</h3>
+                                    <p class="muted tiny">Prevent harsh audio by bounding pitch and volume as fractions of the source.</p>
+                                </div>
+                                <div class="control-grid split-row">
+                                    <label for="min-audio-pitch">Min audio pitch
+                                        <input
+                                            id="min-audio-pitch"
+                                            name="min-audio-pitch"
+                                            class="text-input"
+                                            type="text"
+                                            inputmode="decimal"
+                                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                                            placeholder="0.8"
+                                        />
+                                    </label>
+
+                                    <label for="max-audio-pitch">Max audio pitch
+                                        <input
+                                            id="max-audio-pitch"
+                                            name="max-audio-pitch"
+                                            class="text-input"
+                                            type="text"
+                                            inputmode="decimal"
+                                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                                            placeholder="1.0"
+                                        />
+                                    </label>
+                                </div>
+                                <div class="control-grid split-row">
+                                    <label for="min-volume">Min volume
+                                        <input
+                                            id="min-volume"
+                                            name="min-volume"
+                                            class="text-input"
+                                            type="text"
+                                            inputmode="decimal"
+                                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                                            placeholder="0.2"
+                                        />
+                                    </label>
+
+                                    <label for="max-volume">Max volume
+                                        <input
+                                            id="max-volume"
+                                            name="max-volume"
+                                            class="text-input"
+                                            type="text"
+                                            inputmode="decimal"
+                                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                                            placeholder="1.0"
+                                        />
+                                    </label>
+                                </div>
+                                <p class="field-hint">Volume and pitch values are percentages of the original clip between 0 and 1.</p>
+                            </div>
+
+                            <div class="form-footer">
+                                <p id="settings-status" class="status-chip">No changes yet.</p>
+                                <button id="settings-submit-button" type="submit" class="button" disabled>Save settings</button>
+                            </div>
+                        </form>
+                    </section>
+
+                    <aside class="settings-sidebar">
+                        <section class="settings-card info-card">
+                            <p class="eyebrow subtle">Checklist</p>
+                            <h3>Before you save</h3>
+                            <ul class="hint-list">
+                                <li>Match canvas dimensions to the OBS browser source you embed.</li>
+                                <li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li>
+                                <li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li>
+                                <li>Lower the minimum volume if alerts feel too loud on stream.</li>
+                            </ul>
+                        </section>
+
+                        <section class="settings-card info-card subtle">
+                            <p class="eyebrow subtle">Heads up</p>
+                            <h3>Global impact</h3>
+                            <p class="muted tiny">Changes here update every channel immediately. Save carefully and confirm with your team.</p>
+                        </section>
+                    </aside>
+                </div>
             </main>
         </div>
         <script th:inline="javascript">