From 3a37784e3443380381b025c0b06ed0e796619a77 Mon Sep 17 00:00:00 2001
From: Raphiiko <iam@raphii.co>
Date: Mon, 30 Sep 2024 12:30:47 +0200
Subject: [PATCH] Improve full screen menu layouts. Focus main window on launch

---
 src-core/src/commands/splash.rs               |   4 +-
 ...dio-volume-automations-view.component.html |  56 +-
 ...-invite-request-accept-view.component.html | 284 ++++-----
 ...ightness-automation-details.component.html |   8 +-
 ...ightness-automation-details.component.scss |  21 +-
 .../brightness-automations-tab.component.html |  12 +-
 .../chaperone-automations-view.component.html | 140 ++---
 .../gpu-powerlimiting-pane.component.html     | 226 +++----
 .../gpu-powerlimiting-pane.component.scss     |   2 -
 .../msi-afterburner-pane.component.html       | 140 ++---
 .../hmd-automations-view.component.html       |   6 +-
 .../join-notifications-view.component.html    | 277 ++++-----
 .../nightmare-detection-view.component.html   | 180 +++---
 .../osc-automations-view.component.html       |  78 +--
 .../power-automations-view.component.html     |  16 +-
 ...resolution-automations-view.component.html | 194 +++---
 .../settings-advanced-view.component.html     | 358 +++++------
 ...ettings-brightness-cct-view.component.html | 164 ++---
 .../settings-general-view.component.html      | 532 ++++++++--------
 .../settings-hotkey-view.component.html       |  22 +-
 .../settings-integrations-view.component.html | 254 ++++----
 ...settings-notifications-view.component.html | 122 ++--
 .../settings-status-info-view.component.html  |  62 +-
 .../settings-updates-view.component.html      |  86 +--
 .../shutdown-automations-view.component.html  |  14 +-
 .../sleep-animations-view.component.html      | 496 +++++++--------
 .../sleep-detection-view.component.html       |  20 +-
 ...eep-detection-detection-tab.component.html |  12 +-
 ...detection-sleep-disable-tab.component.html |  10 +-
 ...-detection-sleep-enable-tab.component.html |  14 +-
 .../status-automations-view.component.html    |  14 +-
 ...m-mic-mute-automations-view.component.html | 582 +++++++++---------
 ...hat-avatar-automations-view.component.html |  86 +--
 ...t-mic-mute-automations-view.component.html | 156 ++---
 src-ui/assets/i18n/ja.json                    |   2 +-
 src-ui/styles/misc.scss                       |   6 +
 36 files changed, 2366 insertions(+), 2290 deletions(-)

diff --git a/src-core/src/commands/splash.rs b/src-core/src/commands/splash.rs
index 9096b41d..adfbb112 100644
--- a/src-core/src/commands/splash.rs
+++ b/src-core/src/commands/splash.rs
@@ -20,6 +20,8 @@ pub async fn close_splashscreen(window: tauri::Window) {
         .unwrap()
         .start_in_tray
     {
-        window.get_window("main").unwrap().show().unwrap();
+        let window = window.get_window("main").unwrap();
+        window.show().unwrap();
+        window.set_focus().unwrap();
     }
 }
diff --git a/src-ui/app/views/dashboard-view/views/audio-volume-automations-view/audio-volume-automations-view.component.html b/src-ui/app/views/dashboard-view/views/audio-volume-automations-view/audio-volume-automations-view.component.html
index c85a1a03..68b1deec 100644
--- a/src-ui/app/views/dashboard-view/views/audio-volume-automations-view/audio-volume-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/audio-volume-automations-view/audio-volume-automations-view.component.html
@@ -1,33 +1,35 @@
 <div class="pane main">
   <div class="pane-title" translate>audio-volume-automations.title</div>
   <div class="pane-content">
-    <p translate>audio-volume-automations.description</p>
-    <div class="setting-category">
-      <h3 translate>audio-volume-automations.onSleepEnable.title</h3>
-      <p translate>audio-volume-automations.onSleepEnable.description</p>
-      <app-audio-volume-entries
-        [automations]="config.onSleepEnableAutomations"
-        (automationsChange)="onAutomationsChange('onSleepEnable', $event)"
-        [automationType]="'onSleepEnable'"
-      ></app-audio-volume-entries>
-    </div>
-    <div class="setting-category">
-      <h3 translate>audio-volume-automations.onSleepDisable.title</h3>
-      <p translate>audio-volume-automations.onSleepDisable.description</p>
-      <app-audio-volume-entries
-        [automations]="config.onSleepDisableAutomations"
-        (automationsChange)="onAutomationsChange('onSleepDisable', $event)"
-        [automationType]="'onSleepDisable'"
-      ></app-audio-volume-entries>
-    </div>
-    <div class="setting-category">
-      <h3 translate>audio-volume-automations.onSleepPreparation.title</h3>
-      <p translate>audio-volume-automations.onSleepPreparation.description</p>
-      <app-audio-volume-entries
-        [automations]="config.onSleepPreparationAutomations"
-        (automationsChange)="onAutomationsChange('onSleepPreparation', $event)"
-        [automationType]="'onSleepPreparation'"
-      ></app-audio-volume-entries>
+    <div class="setting-view-container">
+      <p translate>audio-volume-automations.description</p>
+      <div class="setting-category">
+        <h3 translate>audio-volume-automations.onSleepEnable.title</h3>
+        <p translate>audio-volume-automations.onSleepEnable.description</p>
+        <app-audio-volume-entries
+          [automations]="config.onSleepEnableAutomations"
+          (automationsChange)="onAutomationsChange('onSleepEnable', $event)"
+          [automationType]="'onSleepEnable'"
+        ></app-audio-volume-entries>
+      </div>
+      <div class="setting-category">
+        <h3 translate>audio-volume-automations.onSleepDisable.title</h3>
+        <p translate>audio-volume-automations.onSleepDisable.description</p>
+        <app-audio-volume-entries
+          [automations]="config.onSleepDisableAutomations"
+          (automationsChange)="onAutomationsChange('onSleepDisable', $event)"
+          [automationType]="'onSleepDisable'"
+        ></app-audio-volume-entries>
+      </div>
+      <div class="setting-category">
+        <h3 translate>audio-volume-automations.onSleepPreparation.title</h3>
+        <p translate>audio-volume-automations.onSleepPreparation.description</p>
+        <app-audio-volume-entries
+          [automations]="config.onSleepPreparationAutomations"
+          (automationsChange)="onAutomationsChange('onSleepPreparation', $event)"
+          [automationType]="'onSleepPreparation'"
+        ></app-audio-volume-entries>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/auto-invite-request-accept-view/auto-invite-request-accept-view.component.html b/src-ui/app/views/dashboard-view/views/auto-invite-request-accept-view/auto-invite-request-accept-view.component.html
index b31cf614..54535d8a 100644
--- a/src-ui/app/views/dashboard-view/views/auto-invite-request-accept-view/auto-invite-request-accept-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/auto-invite-request-accept-view/auto-invite-request-accept-view.component.html
@@ -1,89 +1,90 @@
 <div class="pane main">
   <div class="pane-title" translate>auto-invite-request-accept.title</div>
   <div class="pane-content">
-    <p translate>auto-invite-request-accept.description</p>
-    <div class="alert warning" *ngIf="!loggedIn" @vshrink>
-      <div class="alert-bg"></div>
-      <div class="alert-icon">
-        <i class="material-icons"> warning </i>
-      </div>
-      <div class="alert-content">
-        <span>{{ 'shared.misc.vrcLoginRequired' | translate }}</span>
-        <button class="btn btn-secondary" (click)="login()" translate>shared.modals.login</button>
-      </div>
-    </div>
-    <div class="alert warning" *ngIf="isOnBusyStatus" @vshrink>
-      <div class="alert-bg"></div>
-      <div class="alert-icon">
-        <i class="material-icons"> warning </i>
-      </div>
-      <div class="alert-content">
-        <span>{{ 'auto-invite-request-accept.userOnBusyStatus' | translate }}</span></div
-      >
-    </div>
-    <div class="alert warning" *ngIf="isOnJoinMeStatus" @vshrink>
-      <div class="alert-bg"></div>
-      <div class="alert-icon">
-        <i class="material-icons"> warning </i>
-      </div>
-      <div class="alert-content">
-        <span>{{ 'auto-invite-request-accept.userOnJoinMeStatus' | translate }}</span></div
-      >
-    </div>
-    <div class="settings">
-      <div class="setting-row">
-        <div class="setting-row-label">
-          <span translate>auto-invite-request-accept.options.enable.title</span>
-          <span translate>auto-invite-request-accept.options.enable.description</span>
+    <div class="setting-view-container">
+      <p translate>auto-invite-request-accept.description</p>
+      <div class="alert warning" *ngIf="!loggedIn" @vshrink>
+        <div class="alert-bg"></div>
+        <div class="alert-icon">
+          <i class="material-icons"> warning </i>
         </div>
-        <div class="setting-row-action">
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="config.enabled"
-              (change)="updateConfig({ enabled: !config.enabled })"
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
+        <div class="alert-content">
+          <span>{{ 'shared.misc.vrcLoginRequired' | translate }}</span>
+          <button class="btn btn-secondary" (click)="login()" translate>shared.modals.login</button>
         </div>
       </div>
-
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>auto-invite-request-accept.options.listMode.title</span>
-          <span translate>auto-invite-request-accept.options.listMode.description</span>
+      <div class="alert warning" *ngIf="isOnBusyStatus" @vshrink>
+        <div class="alert-bg"></div>
+        <div class="alert-icon">
+          <i class="material-icons"> warning </i>
         </div>
-        <div class="setting-row-action">
-          <app-select-box
-            [items]="listModeOptions"
-            [selected]="listModeOption"
-            (selectedChange)="setListMode($event?.id)"
-          ></app-select-box>
+        <div class="alert-content">
+          <span>{{ 'auto-invite-request-accept.userOnBusyStatus' | translate }}</span></div
+        >
+      </div>
+      <div class="alert warning" *ngIf="isOnJoinMeStatus" @vshrink>
+        <div class="alert-bg"></div>
+        <div class="alert-icon">
+          <i class="material-icons"> warning </i>
         </div>
+        <div class="alert-content">
+          <span>{{ 'auto-invite-request-accept.userOnJoinMeStatus' | translate }}</span></div
+        >
       </div>
-    </div>
-    <h2 translate>auto-invite-request-accept.conditions.title</h2>
-    <p translate>auto-invite-request-accept.conditions.description</p>
-    <div class="settings">
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>auto-invite-request-accept.options.onlyIfSleepModeEnabled.title</span>
-          <span translate></span>
+      <div class="settings">
+        <div class="setting-row">
+          <div class="setting-row-label">
+            <span translate>auto-invite-request-accept.options.enable.title</span>
+            <span translate>auto-invite-request-accept.options.enable.description</span>
+          </div>
+          <div class="setting-row-action">
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="config.enabled"
+                (change)="updateConfig({ enabled: !config.enabled })"
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+          </div>
         </div>
-        <div class="setting-row-action">
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="config.onlyIfSleepModeEnabled"
-              (change)="updateConfig({ onlyIfSleepModeEnabled: !config.onlyIfSleepModeEnabled })"
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
+
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>auto-invite-request-accept.options.listMode.title</span>
+            <span translate>auto-invite-request-accept.options.listMode.description</span>
+          </div>
+          <div class="setting-row-action">
+            <app-select-box
+              [items]="listModeOptions"
+              [selected]="listModeOption"
+              (selectedChange)="setListMode($event?.id)"
+            ></app-select-box>
+          </div>
         </div>
       </div>
+      <h2 translate>auto-invite-request-accept.conditions.title</h2>
+      <p translate>auto-invite-request-accept.conditions.description</p>
+      <div class="settings">
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>auto-invite-request-accept.options.onlyIfSleepModeEnabled.title</span>
+            <span translate></span>
+          </div>
+          <div class="setting-row-action">
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="config.onlyIfSleepModeEnabled"
+                (change)="updateConfig({ onlyIfSleepModeEnabled: !config.onlyIfSleepModeEnabled })"
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+          </div>
+        </div>
 
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
           <span
             style="display: initial"
             [innerHtml]="
@@ -94,92 +95,93 @@ <h2 translate>auto-invite-request-accept.conditions.title</h2>
                     }
             "
           ></span>
-          <span translate>auto-invite-request-accept.options.onlyBelowPlayerCount.description</span>
-        </div>
-        <div class="setting-row-action">
-          <app-slider-setting
-            class="with-margin"
-            [unit]="'<i class=&quot;material-icons&quot;>person</i>'"
-            [min]="2"
-            [max]="100"
-            [value]="config.onlyBelowPlayerCount"
-            (valueChange)="updateConfig({ onlyBelowPlayerCount: $event })"
-            [disabled]="!config.onlyBelowPlayerCountEnabled"
-          ></app-slider-setting>
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="config.onlyBelowPlayerCountEnabled"
-              (change)="
+            <span translate>auto-invite-request-accept.options.onlyBelowPlayerCount.description</span>
+          </div>
+          <div class="setting-row-action">
+            <app-slider-setting
+              class="with-margin"
+              [unit]="'<i class=&quot;material-icons&quot;>person</i>'"
+              [min]="2"
+              [max]="100"
+              [value]="config.onlyBelowPlayerCount"
+              (valueChange)="updateConfig({ onlyBelowPlayerCount: $event })"
+              [disabled]="!config.onlyBelowPlayerCountEnabled"
+            ></app-slider-setting>
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="config.onlyBelowPlayerCountEnabled"
+                (change)="
                 updateConfig({
                   onlyBelowPlayerCountEnabled: !config.onlyBelowPlayerCountEnabled
                 })
               "
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+          </div>
         </div>
       </div>
-    </div>
 
-    <h2 translate>auto-invite-request-accept.otherAutomations.title</h2>
-    <p translate>auto-invite-request-accept.otherAutomations.description</p>
-    <div class="settings">
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
+      <h2 translate>auto-invite-request-accept.otherAutomations.title</h2>
+      <p translate>auto-invite-request-accept.otherAutomations.description</p>
+      <div class="settings">
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
           <span translate
-            >auto-invite-request-accept.options.changeListPreset.onSleepEnable.title</span
+          >auto-invite-request-accept.options.changeListPreset.onSleepEnable.title</span
           >
-          <span translate
+            <span translate
             >auto-invite-request-accept.options.changeListPreset.onSleepEnable.description</span
-          >
+            >
+          </div>
+          <div class="setting-row-action">
+            <app-select-box
+              class="preset-select-box"
+              [type]="'SMALL'"
+              [items]="presetOptions"
+              [selected]="presetOption['onSleepEnable']"
+              (selectedChange)="setPresetOption('onSleepEnable', $event?.id ?? 'NONE')"
+            ></app-select-box>
+          </div>
         </div>
-        <div class="setting-row-action">
-          <app-select-box
-            class="preset-select-box"
-            [type]="'SMALL'"
-            [items]="presetOptions"
-            [selected]="presetOption['onSleepEnable']"
-            (selectedChange)="setPresetOption('onSleepEnable', $event?.id ?? 'NONE')"
-          ></app-select-box>
-        </div>
-      </div>
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
           <span translate
-            >auto-invite-request-accept.options.changeListPreset.onSleepDisable.title</span
+          >auto-invite-request-accept.options.changeListPreset.onSleepDisable.title</span
           >
-          <span translate
+            <span translate
             >auto-invite-request-accept.options.changeListPreset.onSleepDisable.description</span
-          >
-        </div>
-        <div class="setting-row-action">
-          <app-select-box
-            class="preset-select-box"
-            [type]="'SMALL'"
-            [items]="presetOptions"
-            [selected]="presetOption['onSleepDisable']"
-            (selectedChange)="setPresetOption('onSleepDisable', $event?.id ?? 'NONE')"
-          ></app-select-box>
+            >
+          </div>
+          <div class="setting-row-action">
+            <app-select-box
+              class="preset-select-box"
+              [type]="'SMALL'"
+              [items]="presetOptions"
+              [selected]="presetOption['onSleepDisable']"
+              (selectedChange)="setPresetOption('onSleepDisable', $event?.id ?? 'NONE')"
+            ></app-select-box>
+          </div>
         </div>
-      </div>
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
           <span translate
-            >auto-invite-request-accept.options.changeListPreset.onSleepPreparation.title</span
+          >auto-invite-request-accept.options.changeListPreset.onSleepPreparation.title</span
           >
-          <span translate
+            <span translate
             >auto-invite-request-accept.options.changeListPreset.onSleepPreparation.description</span
-          >
-        </div>
-        <div class="setting-row-action">
-          <app-select-box
-            class="preset-select-box"
-            [type]="'SMALL'"
-            [items]="presetOptions"
-            [selected]="presetOption['onSleepPreparation']"
-            (selectedChange)="setPresetOption('onSleepPreparation', $event?.id ?? 'NONE')"
-          ></app-select-box>
+            >
+          </div>
+          <div class="setting-row-action">
+            <app-select-box
+              class="preset-select-box"
+              [type]="'SMALL'"
+              [items]="presetOptions"
+              [selected]="presetOption['onSleepPreparation']"
+              (selectedChange)="setPresetOption('onSleepPreparation', $event?.id ?? 'NONE')"
+            ></app-select-box>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automation-details/brightness-automation-details.component.html b/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automation-details/brightness-automation-details.component.html
index d730d90a..5ec9f4e4 100644
--- a/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automation-details/brightness-automation-details.component.html
+++ b/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automation-details/brightness-automation-details.component.html
@@ -1,7 +1,9 @@
 <div class="bg" @fade (click)="close.emit()"></div>
-<button class="btn-close" @fadeRight (click)="close.emit()">
-  <i class="material-icons-outlined">arrow_forward_ios</i>
-</button>
+<div class="btn-close-container">
+  <button class="btn-close" @fadeRight (click)="close.emit()">
+    <i class="material-icons-outlined">arrow_forward_ios</i>
+  </button>
+</div>
 <div class="pane" @fadeRight>
   <div class="header-row">
     <div class="header-row-toggle">
diff --git a/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automation-details/brightness-automation-details.component.scss b/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automation-details/brightness-automation-details.component.scss
index a867bfb7..76071e97 100644
--- a/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automation-details/brightness-automation-details.component.scss
+++ b/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automation-details/brightness-automation-details.component.scss
@@ -3,6 +3,7 @@
 :host {
   position: relative;
   display: block;
+  width: 100%;
 }
 
 .bg {
@@ -13,6 +14,16 @@
   left: 0;
 }
 
+.btn-close-container {
+  width: calc(100% - 10em);
+  max-width: min(calc(100% - 10em), 60em);
+  right: 0;
+  height: 100%;
+  top: 0;
+  flex-shrink: 0;
+  position: absolute;
+}
+
 .btn-close {
   background: transparent;
   border: none;
@@ -21,14 +32,14 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  position: absolute;
-  top: calc(50% - 1.5em);
   width: 3em;
   height: 3em;
-  left: 5.5em;
   cursor: pointer;
   border-radius: var(--surface-border-radius);
   transition: all 0.15s ease;
+  position: absolute;
+  top: calc(50% - 1.5em);
+  left: -4.5em;
 
   &:hover {
     background: rgba(black, 0.4);
@@ -58,9 +69,11 @@
 .pane {
   background: var(--color-surface-3);
   width: calc(100% - 10em);
-  left: 10em;
+  max-width: min(calc(100% - 10em), 60em);
+  right: 0;
   height: 100%;
   top: 0;
+  flex-shrink: 0;
   position: absolute;
   padding: 2em;
   border-left: 1px solid var(--color-surface-4);
diff --git a/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automations-tab.component.html b/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automations-tab.component.html
index f51dff47..d85d64a2 100644
--- a/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automations-tab.component.html
+++ b/src-ui/app/views/dashboard-view/views/brightness-automations-view/tabs/new-brightness-automations-tab/brightness-automations-tab.component.html
@@ -1,8 +1,10 @@
-<app-brightness-automations-list
-  (editEvent)="editEvent = $event"
-  [events]="events"
-  [class.details-open]="!!editEvent"
-></app-brightness-automations-list>
+<div class="setting-view-container">
+  <app-brightness-automations-list
+    (editEvent)="editEvent = $event"
+    [events]="events"
+    [class.details-open]="!!editEvent"
+  ></app-brightness-automations-list>
+</div>
 <app-brightness-automation-details
   @triggerChildren
   *ngIf="editEvent"
diff --git a/src-ui/app/views/dashboard-view/views/chaperone-automations-view/chaperone-automations-view.component.html b/src-ui/app/views/dashboard-view/views/chaperone-automations-view/chaperone-automations-view.component.html
index f5b71264..fe7c1540 100644
--- a/src-ui/app/views/dashboard-view/views/chaperone-automations-view/chaperone-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/chaperone-automations-view/chaperone-automations-view.component.html
@@ -1,93 +1,95 @@
 <div class="pane">
   <div class="pane-title" translate>chaperone-automations.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <p translate>chaperone-automations.description</p>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>chaperone-automations.onSleepEnable.title</span>
-            <span translate>chaperone-automations.onSleepEnable.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="onSleepModeEnableConfig.enabled"
-                (change)="
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <p translate>chaperone-automations.description</p>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>chaperone-automations.onSleepEnable.title</span>
+              <span translate>chaperone-automations.onSleepEnable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="onSleepModeEnableConfig.enabled"
+                  (change)="
                   setAutomationEnabled(
                     'CHAPERONE_FADE_DISTANCE_ON_SLEEP_MODE_ENABLE',
                     !onSleepModeEnableConfig.enabled
                   )
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row-group">
-          <div class="setting-row" [class.disabled]="!onSleepModeEnableConfig.enabled">
-            <div class="setting-row-label" translate>
-              <span translate>chaperone-automations.fadeDistance.title</span>
-              <span></span>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
             </div>
-            <div class="setting-row-action">
-              <app-slider-setting
-                unit="m"
-                [value]="onSleepModeEnableConfig.fadeDistance"
-                (valueChange)="
+          </div>
+          <div class="setting-row-group">
+            <div class="setting-row" [class.disabled]="!onSleepModeEnableConfig.enabled">
+              <div class="setting-row-label" translate>
+                <span translate>chaperone-automations.fadeDistance.title</span>
+                <span></span>
+              </div>
+              <div class="setting-row-action">
+                <app-slider-setting
+                  unit="m"
+                  [value]="onSleepModeEnableConfig.fadeDistance"
+                  (valueChange)="
                   setFadeDistance('CHAPERONE_FADE_DISTANCE_ON_SLEEP_MODE_ENABLE', $event)
                 "
-                [min]="0"
-                [max]="1.4"
-                [step]="0.01"
-                [snapValues]="[0.2, 0.7]"
-                [snapDistance]="0.05"
-                #onSleepEnableSlider
-              ></app-slider-setting>
+                  [min]="0"
+                  [max]="1.4"
+                  [step]="0.01"
+                  [snapValues]="[0.2, 0.7]"
+                  [snapDistance]="0.05"
+                  #onSleepEnableSlider
+                ></app-slider-setting>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>chaperone-automations.onSleepDisable.title</span>
-            <span translate>chaperone-automations.onSleepDisable.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="onSleepModeDisableConfig.enabled"
-                (change)="
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>chaperone-automations.onSleepDisable.title</span>
+              <span translate>chaperone-automations.onSleepDisable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="onSleepModeDisableConfig.enabled"
+                  (change)="
                   setAutomationEnabled(
                     'CHAPERONE_FADE_DISTANCE_ON_SLEEP_MODE_DISABLE',
                     !onSleepModeDisableConfig.enabled
                   )
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row-group">
-          <div class="setting-row" [class.disabled]="!onSleepModeDisableConfig.enabled">
-            <div class="setting-row-label" translate>
-              <span translate>chaperone-automations.fadeDistance.title</span>
-              <span></span>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
             </div>
-            <div class="setting-row-action">
-              <app-slider-setting
-                unit="m"
-                [value]="onSleepModeDisableConfig.fadeDistance"
-                (valueChange)="
+          </div>
+          <div class="setting-row-group">
+            <div class="setting-row" [class.disabled]="!onSleepModeDisableConfig.enabled">
+              <div class="setting-row-label" translate>
+                <span translate>chaperone-automations.fadeDistance.title</span>
+                <span></span>
+              </div>
+              <div class="setting-row-action">
+                <app-slider-setting
+                  unit="m"
+                  [value]="onSleepModeDisableConfig.fadeDistance"
+                  (valueChange)="
                   setFadeDistance('CHAPERONE_FADE_DISTANCE_ON_SLEEP_MODE_DISABLE', $event)
                 "
-                [min]="0"
-                [max]="1.4"
-                [step]="0.01"
-                [snapValues]="[0.2, 0.7]"
-                [snapDistance]="0.05"
-              ></app-slider-setting>
+                  [min]="0"
+                  [max]="1.4"
+                  [step]="0.01"
+                  [snapValues]="[0.2, 0.7]"
+                  [snapDistance]="0.05"
+                ></app-slider-setting>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-powerlimiting-pane/gpu-powerlimiting-pane.component.html b/src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-powerlimiting-pane/gpu-powerlimiting-pane.component.html
index a008da88..42e2311c 100644
--- a/src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-powerlimiting-pane/gpu-powerlimiting-pane.component.html
+++ b/src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-powerlimiting-pane/gpu-powerlimiting-pane.component.html
@@ -8,143 +8,145 @@
 </div>
 <!--ENABLED PANE-->
 <div class="pane-content pane-enabled" *ngIf="panel === 'ENABLED'" @noop>
-  <div class="top-row">
-    <div>
-      <p translate>gpu-automations.powerLimiting.description</p>
-      <p translate *ngIf="gpuDevices.length">gpu-automations.powerLimiting.selectGPU</p>
-      <div class="alert warning" *ngIf="!gpuDevices.length" @vshrink>
-        <div class="alert-bg"></div>
-        <div class="alert-icon">
-          <i class="material-icons">warning</i>
-        </div>
-        <div class="alert-content flex-row">
-          <span translate>gpu-automations.powerLimiting.noGPUs</span>
+  <div class="setting-view-container">
+    <div class="top-row">
+      <div>
+        <p translate>gpu-automations.powerLimiting.description</p>
+        <p translate *ngIf="gpuDevices.length">gpu-automations.powerLimiting.selectGPU</p>
+        <div class="alert warning" *ngIf="!gpuDevices.length" @vshrink>
+          <div class="alert-bg"></div>
+          <div class="alert-icon">
+            <i class="material-icons">warning</i>
+          </div>
+          <div class="alert-content flex-row">
+            <span translate>gpu-automations.powerLimiting.noGPUs</span>
+          </div>
         </div>
-      </div>
-      <div class="gpu-select">
-        <label class="radio-button" *ngFor="let device of gpuDevices">
-          <input
-            type="radio"
-            name="sleep-enable-gpu-device"
-            [value]="device.id"
-            [checked]="device.selected"
-            (click)="gpuAutomations.selectPowerLimitingDevice(device)"
-          />
-          <span class="radio-button-dot"></span>
-          <span class="radio-button-label">
+        <div class="gpu-select">
+          <label class="radio-button" *ngFor="let device of gpuDevices">
+            <input
+              type="radio"
+              name="sleep-enable-gpu-device"
+              [value]="device.id"
+              [checked]="device.selected"
+              (click)="gpuAutomations.selectPowerLimitingDevice(device)"
+            />
+            <span class="radio-button-dot"></span>
+            <span class="radio-button-label">
             <span>{{ device.name }}</span>
           </span>
-        </label>
-      </div>
-
-      <div class="alert error" *ngIf="selectedGpu?.supportsPowerLimiting === false" @vshrink>
-        <div class="alert-bg"></div>
-        <div class="alert-icon">
-          <i class="material-icons">error</i>
+          </label>
         </div>
-        <div class="alert-content flex-row">
-          <span translate>gpu-automations.powerLimiting.gpuPowerLimitsUnsupported</span>
+
+        <div class="alert error" *ngIf="selectedGpu?.supportsPowerLimiting === false" @vshrink>
+          <div class="alert-bg"></div>
+          <div class="alert-icon">
+            <i class="material-icons">error</i>
+          </div>
+          <div class="alert-content flex-row">
+            <span translate>gpu-automations.powerLimiting.gpuPowerLimitsUnsupported</span>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="pane gpu-current-info"
-      [class.disabled]="!selectedGpu || !selectedGpu.supportsPowerLimiting"
-      @vshrink
-    >
-      <div class="pane-content">
-        <h3 translate>gpu-automations.powerLimiting.currentPowerLimit</h3>
-        <div class="power-limit-bar">
-          <div
-            class="power-limit-bar-fill"
-            [class.default]="selectedGpu?.powerLimit === selectedGpu?.defaultPowerLimit"
-            [style.width]="
+      <div
+        class="pane gpu-current-info"
+        [class.disabled]="!selectedGpu || !selectedGpu.supportsPowerLimiting"
+        @vshrink
+      >
+        <div class="pane-content">
+          <h3 translate>gpu-automations.powerLimiting.currentPowerLimit</h3>
+          <div class="power-limit-bar">
+            <div
+              class="power-limit-bar-fill"
+              [class.default]="selectedGpu?.powerLimit === selectedGpu?.defaultPowerLimit"
+              [style.width]="
               (((selectedGpu?.powerLimit || 1) / (selectedGpu?.maxPowerLimit || 1)) * 100 | floor) +
               '%'
             "
-            [style.justify-content]="selectedGpu ? 'flex-end' : 'center'"
-          >
+              [style.justify-content]="selectedGpu ? 'flex-end' : 'center'"
+            >
             <span *ngIf="selectedGpu && selectedGpu.supportsPowerLimiting">
               {{ selectedGpu.powerLimit }}W &#11825;
               {{
                 ((selectedGpu.powerLimit || 0) / (selectedGpu.maxPowerLimit || 1)) * 100 | floor
               }}%
             </span>
-            <span *ngIf="!selectedGpu" translate>gpu-automations.powerLimiting.noGPUSelected</span>
-            <span *ngIf="selectedGpu && !selectedGpu.supportsPowerLimiting" translate
+              <span *ngIf="!selectedGpu" translate>gpu-automations.powerLimiting.noGPUSelected</span>
+              <span *ngIf="selectedGpu && !selectedGpu.supportsPowerLimiting" translate
               >gpu-automations.powerLimiting.gpuUnsupported</span
-            >
+              >
+            </div>
+          </div>
+          <div class="power-limit-labels" *ngIf="selectedGpu" @vshrink>
+            <span>{{ selectedGpu.minPowerLimit ?? '-' }}W</span>
+            <span>{{ selectedGpu.maxPowerLimit ?? '-' }}W</span>
           </div>
-        </div>
-        <div class="power-limit-labels" *ngIf="selectedGpu" @vshrink>
-          <span>{{ selectedGpu.minPowerLimit ?? '-' }}W</span>
-          <span>{{ selectedGpu.maxPowerLimit ?? '-' }}W</span>
         </div>
       </div>
     </div>
-  </div>
-  <h2 translate>gpu-automations.automations</h2>
-  <div
-    class="automation-grid"
-    [class.disabled]="!selectedGpu || !selectedGpu.supportsPowerLimiting"
-  >
-    <div class="pane">
-      <div class="pane-content">
-        <div class="title">
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="onSleepEnableAutomationEnabled"
-              (change)="gpuAutomations.togglePowerLimitOnSleepEnabledAutomation()"
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
-          <h3 translate>gpu-automations.powerLimiting.activatingSleepMode.title</h3>
+    <h2 translate>gpu-automations.automations</h2>
+    <div
+      class="automation-grid"
+      [class.disabled]="!selectedGpu || !selectedGpu.supportsPowerLimiting"
+    >
+      <div class="pane">
+        <div class="pane-content">
+          <div class="title">
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="onSleepEnableAutomationEnabled"
+                (change)="gpuAutomations.togglePowerLimitOnSleepEnabledAutomation()"
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+            <h3 translate>gpu-automations.powerLimiting.activatingSleepMode.title</h3>
+          </div>
+          <p translate>gpu-automations.powerLimiting.activatingSleepMode.description</p>
+          <app-power-limit-input
+            [minPowerLimit]="selectedGpu?.minPowerLimit ?? -1"
+            [maxPowerLimit]="selectedGpu?.maxPowerLimit ?? -1"
+            [defaultPowerLimit]="selectedGpu?.defaultPowerLimit ?? -1"
+            [powerLimit]="powerLimitOnSleepEnable"
+            (powerLimitChange)="powerLimitChange.next({ automation: 'SLEEP_ENABLE', limit: $event })"
+          ></app-power-limit-input>
         </div>
-        <p translate>gpu-automations.powerLimiting.activatingSleepMode.description</p>
-        <app-power-limit-input
-          [minPowerLimit]="selectedGpu?.minPowerLimit ?? -1"
-          [maxPowerLimit]="selectedGpu?.maxPowerLimit ?? -1"
-          [defaultPowerLimit]="selectedGpu?.defaultPowerLimit ?? -1"
-          [powerLimit]="powerLimitOnSleepEnable"
-          (powerLimitChange)="powerLimitChange.next({ automation: 'SLEEP_ENABLE', limit: $event })"
-        ></app-power-limit-input>
       </div>
-    </div>
-    <div class="pane">
-      <div class="pane-content">
-        <div class="title">
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="onSleepDisableAutomationEnabled"
-              (change)="gpuAutomations.togglePowerLimitOnSleepDisabledAutomation()"
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
-          <h3 translate>gpu-automations.powerLimiting.deactivatingSleepMode.title</h3>
+      <div class="pane">
+        <div class="pane-content">
+          <div class="title">
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="onSleepDisableAutomationEnabled"
+                (change)="gpuAutomations.togglePowerLimitOnSleepDisabledAutomation()"
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+            <h3 translate>gpu-automations.powerLimiting.deactivatingSleepMode.title</h3>
+          </div>
+          <p translate>gpu-automations.powerLimiting.deactivatingSleepMode.description</p>
+          <app-power-limit-input
+            [minPowerLimit]="selectedGpu?.minPowerLimit ?? -1"
+            [maxPowerLimit]="selectedGpu?.maxPowerLimit ?? -1"
+            [defaultPowerLimit]="selectedGpu?.defaultPowerLimit ?? -1"
+            [powerLimit]="powerLimitOnSleepDisable"
+            (powerLimitChange)="powerLimitChange.next({ automation: 'SLEEP_DISABLE', limit: $event })"
+          ></app-power-limit-input>
         </div>
-        <p translate>gpu-automations.powerLimiting.deactivatingSleepMode.description</p>
-        <app-power-limit-input
-          [minPowerLimit]="selectedGpu?.minPowerLimit ?? -1"
-          [maxPowerLimit]="selectedGpu?.maxPowerLimit ?? -1"
-          [defaultPowerLimit]="selectedGpu?.defaultPowerLimit ?? -1"
-          [powerLimit]="powerLimitOnSleepDisable"
-          (powerLimitChange)="powerLimitChange.next({ automation: 'SLEEP_DISABLE', limit: $event })"
-        ></app-power-limit-input>
       </div>
     </div>
-  </div>
-  <div class="alert">
-    <div class="alert-bg"></div>
-    <div class="alert-icon">
-      <i class="material-icons">warning</i>
-    </div>
-    <div class="alert-content flex-row">
-      <div translate>gpu-automations.powerLimiting.enabledWarning</div>
-      <button class="btn btn-secondary" (click)="gpuAutomations.disable()" translate>
-        gpu-automations.disable
-      </button>
+    <div class="alert">
+      <div class="alert-bg"></div>
+      <div class="alert-icon">
+        <i class="material-icons">warning</i>
+      </div>
+      <div class="alert-content flex-row">
+        <div translate>gpu-automations.powerLimiting.enabledWarning</div>
+        <button class="btn btn-secondary" (click)="gpuAutomations.disable()" translate>
+          gpu-automations.disable
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-powerlimiting-pane/gpu-powerlimiting-pane.component.scss b/src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-powerlimiting-pane/gpu-powerlimiting-pane.component.scss
index 5179ffaf..53679ea9 100644
--- a/src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-powerlimiting-pane/gpu-powerlimiting-pane.component.scss
+++ b/src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-powerlimiting-pane/gpu-powerlimiting-pane.component.scss
@@ -47,8 +47,6 @@ alert {
 }
 
 .pane-enabled {
-  max-width: 75em;
-
   .alert {
     margin-top: 1em;
 
diff --git a/src-ui/app/views/dashboard-view/views/gpu-automations-view/msi-afterburner-pane/msi-afterburner-pane.component.html b/src-ui/app/views/dashboard-view/views/gpu-automations-view/msi-afterburner-pane/msi-afterburner-pane.component.html
index defa4ccf..60deb66a 100644
--- a/src-ui/app/views/dashboard-view/views/gpu-automations-view/msi-afterburner-pane/msi-afterburner-pane.component.html
+++ b/src-ui/app/views/dashboard-view/views/gpu-automations-view/msi-afterburner-pane/msi-afterburner-pane.component.html
@@ -1,80 +1,82 @@
 <div class="pane-content">
-  <div class="description-row">
-    <p [innerHtml]="'gpu-automations.msiAfterburner.description' | translate"></p>
-    <img draggable="false" src="/assets/img/afterburner_icon.png" />
-  </div>
-  <h3 translate>gpu-automations.msiAfterburner.executable.title</h3>
-  <p [innerHtml]="'gpu-automations.msiAfterburner.executable.description' | translate"></p>
-  <div class="file-path-bar">
-    <div class="file-path-bar-path">
-      <input
-        type="text"
-        [value]="config.msiAfterburnerPath"
-        (keyup)="msiAfterburnerPathInputChange.next(msiAfterburnerPathInput.value)"
-        #msiAfterburnerPathInput
-      />
-    </div>
-    <button class="file-path-bar-btn-browse" (click)="browseForMsiAfterburner()">
-      <i class="material-icons">folder</i>
-    </button>
-  </div>
-  <div
-    class="alert"
-    [class.success]="msiAfterburnerPathAlert.type === 'SUCCESS'"
-    [class.error]="msiAfterburnerPathAlert.type === 'ERROR'"
-    *ngIf="msiAfterburnerPathAlert"
-    @vshrink
-  >
-    <div class="alert-bg"></div>
-    <div class="alert-icon">
-      <i class="material-icons" *ngIf="!msiAfterburnerPathAlert.loadingIndicator">
-        check_circle_outline
-      </i>
-      <div class="small-spinner" *ngIf="msiAfterburnerPathAlert.loadingIndicator"></div>
+  <div class="setting-view-container">
+    <div class="description-row">
+      <p [innerHtml]="'gpu-automations.msiAfterburner.description' | translate"></p>
+      <img draggable="false" src="/assets/img/afterburner_icon.png" />
     </div>
-    <div class="alert-content" [innerHTML]="msiAfterburnerPathAlert.text | translate"></div>
-  </div>
-  <h3>Automations</h3>
-  <div class="settings">
-    <div class="setting-row">
-      <div class="setting-row-label" translate>
-        <span translate>gpu-automations.msiAfterburner.sleepModeEnable.title</span>
-        <span translate>gpu-automations.msiAfterburner.sleepModeEnable.description</span>
+    <h3 translate>gpu-automations.msiAfterburner.executable.title</h3>
+    <p [innerHtml]="'gpu-automations.msiAfterburner.executable.description' | translate"></p>
+    <div class="file-path-bar">
+      <div class="file-path-bar-path">
+        <input
+          type="text"
+          [value]="config.msiAfterburnerPath"
+          (keyup)="msiAfterburnerPathInputChange.next(msiAfterburnerPathInput.value)"
+          #msiAfterburnerPathInput
+        />
       </div>
-      <div class="setting-row-action">
-        <app-select-box
-          type="SMALL"
-          [items]="profileOptions"
-          [selected]="onEnableProfile"
-          (selectedChange)="changeProfile('ON_ENABLE', $event!)"
-        ></app-select-box>
+      <button class="file-path-bar-btn-browse" (click)="browseForMsiAfterburner()">
+        <i class="material-icons">folder</i>
+      </button>
+    </div>
+    <div
+      class="alert"
+      [class.success]="msiAfterburnerPathAlert.type === 'SUCCESS'"
+      [class.error]="msiAfterburnerPathAlert.type === 'ERROR'"
+      *ngIf="msiAfterburnerPathAlert"
+      @vshrink
+    >
+      <div class="alert-bg"></div>
+      <div class="alert-icon">
+        <i class="material-icons" *ngIf="!msiAfterburnerPathAlert.loadingIndicator">
+          check_circle_outline
+        </i>
+        <div class="small-spinner" *ngIf="msiAfterburnerPathAlert.loadingIndicator"></div>
       </div>
+      <div class="alert-content" [innerHTML]="msiAfterburnerPathAlert.text | translate"></div>
     </div>
-    <div class="setting-row">
-      <div class="setting-row-label" translate>
-        <span translate>gpu-automations.msiAfterburner.sleepModeDisable.title</span>
-        <span translate>gpu-automations.msiAfterburner.sleepModeDisable.description</span>
+    <h3>Automations</h3>
+    <div class="settings">
+      <div class="setting-row">
+        <div class="setting-row-label" translate>
+          <span translate>gpu-automations.msiAfterburner.sleepModeEnable.title</span>
+          <span translate>gpu-automations.msiAfterburner.sleepModeEnable.description</span>
+        </div>
+        <div class="setting-row-action">
+          <app-select-box
+            type="SMALL"
+            [items]="profileOptions"
+            [selected]="onEnableProfile"
+            (selectedChange)="changeProfile('ON_ENABLE', $event!)"
+          ></app-select-box>
+        </div>
       </div>
-      <div class="setting-row-action">
-        <app-select-box
-          type="SMALL"
-          [items]="profileOptions"
-          [selected]="onDisableProfile"
-          (selectedChange)="changeProfile('ON_DISABLE', $event!)"
-        ></app-select-box>
+      <div class="setting-row">
+        <div class="setting-row-label" translate>
+          <span translate>gpu-automations.msiAfterburner.sleepModeDisable.title</span>
+          <span translate>gpu-automations.msiAfterburner.sleepModeDisable.description</span>
+        </div>
+        <div class="setting-row-action">
+          <app-select-box
+            type="SMALL"
+            [items]="profileOptions"
+            [selected]="onDisableProfile"
+            (selectedChange)="changeProfile('ON_DISABLE', $event!)"
+          ></app-select-box>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="alert">
-    <div class="alert-bg"></div>
-    <div class="alert-icon">
-      <i class="material-icons">warning</i>
-    </div>
-    <div class="alert-content flex-row">
-      <div translate>gpu-automations.msiAfterburner.enabledWarning</div>
-      <button class="btn btn-secondary" (click)="gpuAutomations.disable()" translate>
-        gpu-automations.disable
-      </button>
+    <div class="alert">
+      <div class="alert-bg"></div>
+      <div class="alert-icon">
+        <i class="material-icons">warning</i>
+      </div>
+      <div class="alert-content flex-row">
+        <div translate>gpu-automations.msiAfterburner.enabledWarning</div>
+        <button class="btn btn-secondary" (click)="gpuAutomations.disable()" translate>
+          gpu-automations.disable
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/hmd-automations-view/hmd-automations-view.component.html b/src-ui/app/views/dashboard-view/views/hmd-automations-view/hmd-automations-view.component.html
index 607853d2..fe829a85 100644
--- a/src-ui/app/views/dashboard-view/views/hmd-automations-view/hmd-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/hmd-automations-view/hmd-automations-view.component.html
@@ -12,7 +12,9 @@
     </div>
   </div>
   <div class="pane-content">
-    <app-hmd-automations-bigscreen-beyond-tab *ngIf="activeTab === 'BIGSCREEN_BEYOND'">
-    </app-hmd-automations-bigscreen-beyond-tab>
+    <div class="setting-view-container">
+      <app-hmd-automations-bigscreen-beyond-tab *ngIf="activeTab === 'BIGSCREEN_BEYOND'">
+      </app-hmd-automations-bigscreen-beyond-tab>
+    </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/join-notifications-view/join-notifications-view.component.html b/src-ui/app/views/dashboard-view/views/join-notifications-view/join-notifications-view.component.html
index 8085fa5d..2f25270f 100644
--- a/src-ui/app/views/dashboard-view/views/join-notifications-view/join-notifications-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/join-notifications-view/join-notifications-view.component.html
@@ -1,151 +1,154 @@
 <div class="pane main">
   <div class="pane-title" translate>join-notifications.title</div>
   <div class="pane-content">
-    <p translate>join-notifications.description</p>
-    <div class="alert warning" *ngIf="(vrchat.user | async) === null" @vshrink>
-      <div class="alert-bg"></div>
-      <div class="alert-icon">
-        <i class="material-icons"> warning </i>
-      </div>
-      <div class="alert-content">
-        <span>{{ 'shared.misc.vrcLoginRequired' | translate }}</span>
-        <button class="btn btn-secondary" (click)="vrchat.showLoginModal()" translate
-          >shared.modals.login</button
-        >
-      </div>
-    </div>
-    <div class="settings">
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>join-notifications.joinNotifications.title</span>
-          <span translate>join-notifications.joinNotifications.description</span>
-        </div>
-        <div class="setting-row-action">
-          <app-select-box
-            class="preset-select-box"
-            [type]="'SMALL'"
-            [items]="notificationOptions"
-            [selected]="joinNotificationOption"
-            (selectedChange)="setJoinNotificationModeOption(asJoinNotificationsMode($event?.id))"
-          ></app-select-box>
+    <div class="setting-view-container">
+      <p translate>join-notifications.description</p>
+      <div class="alert warning" *ngIf="(vrchat.user | async) === null" @vshrink>
+        <div class="alert-bg"></div>
+        <div class="alert-icon">
+          <i class="material-icons"> warning </i>
+        </div>
+        <div class="alert-content">
+          <span>{{ 'shared.misc.vrcLoginRequired' | translate }}</span>
+          <button class="btn btn-secondary" (click)="vrchat.showLoginModal()" translate
+          >shared.modals.login
+          </button
+          >
         </div>
       </div>
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>join-notifications.joinSounds.title</span>
-          <span translate>join-notifications.joinSounds.description</span>
-        </div>
-        <div class="setting-row-action">
-          <app-select-box
-            class="preset-select-box"
-            [type]="'SMALL'"
-            [items]="notificationOptions"
-            [selected]="joinSoundOption"
-            (selectedChange)="setJoinSoundModeOption(asJoinNotificationsMode($event?.id))"
-          ></app-select-box>
+      <div class="settings">
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>join-notifications.joinNotifications.title</span>
+            <span translate>join-notifications.joinNotifications.description</span>
+          </div>
+          <div class="setting-row-action">
+            <app-select-box
+              class="preset-select-box"
+              [type]="'SMALL'"
+              [items]="notificationOptions"
+              [selected]="joinNotificationOption"
+              (selectedChange)="setJoinNotificationModeOption(asJoinNotificationsMode($event?.id))"
+            ></app-select-box>
+          </div>
+        </div>
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>join-notifications.joinSounds.title</span>
+            <span translate>join-notifications.joinSounds.description</span>
+          </div>
+          <div class="setting-row-action">
+            <app-select-box
+              class="preset-select-box"
+              [type]="'SMALL'"
+              [items]="notificationOptions"
+              [selected]="joinSoundOption"
+              (selectedChange)="setJoinSoundModeOption(asJoinNotificationsMode($event?.id))"
+            ></app-select-box>
+          </div>
+        </div>
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>join-notifications.onlyWhenPreviouslyAlone.title</span>
+            <span translate>join-notifications.onlyWhenPreviouslyAlone.description</span>
+          </div>
+          <div class="setting-row-action">
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="config.onlyWhenPreviouslyAlone"
+                (change)="toggleOnlyWhenPreviouslyAlone()"
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+          </div>
         </div>
       </div>
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>join-notifications.onlyWhenPreviouslyAlone.title</span>
-          <span translate>join-notifications.onlyWhenPreviouslyAlone.description</span>
-        </div>
-        <div class="setting-row-action">
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="config.onlyWhenPreviouslyAlone"
-              (change)="toggleOnlyWhenPreviouslyAlone()"
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
+      <div class="settings">
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>join-notifications.leaveNotifications.title</span>
+            <span translate>join-notifications.leaveNotifications.description</span>
+          </div>
+          <div class="setting-row-action">
+            <app-select-box
+              class="preset-select-box"
+              [type]="'SMALL'"
+              [items]="notificationOptions"
+              [selected]="leaveNotificationOption"
+              (selectedChange)="setLeaveNotificationModeOption(asJoinNotificationsMode($event?.id))"
+            ></app-select-box>
+          </div>
+        </div>
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>join-notifications.leaveSounds.title</span>
+            <span translate>join-notifications.leaveSounds.description</span>
+          </div>
+          <div class="setting-row-action">
+            <app-select-box
+              class="preset-select-box"
+              [type]="'SMALL'"
+              [items]="notificationOptions"
+              [selected]="leaveSoundOption"
+              (selectedChange)="setLeaveSoundModeOption(asJoinNotificationsMode($event?.id))"
+            ></app-select-box>
+          </div>
+        </div>
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>join-notifications.onlyWhenLeftAlone.title</span>
+            <span translate>join-notifications.onlyWhenLeftAlone.description</span>
+          </div>
+          <div class="setting-row-action">
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="config.onlyWhenLeftAlone"
+                (change)="toggleOnlyWhenLeftAlone()"
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="settings">
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>join-notifications.leaveNotifications.title</span>
-          <span translate>join-notifications.leaveNotifications.description</span>
-        </div>
-        <div class="setting-row-action">
-          <app-select-box
-            class="preset-select-box"
-            [type]="'SMALL'"
-            [items]="notificationOptions"
-            [selected]="leaveNotificationOption"
-            (selectedChange)="setLeaveNotificationModeOption(asJoinNotificationsMode($event?.id))"
-          ></app-select-box>
-        </div>
-      </div>
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>join-notifications.leaveSounds.title</span>
-          <span translate>join-notifications.leaveSounds.description</span>
-        </div>
-        <div class="setting-row-action">
-          <app-select-box
-            class="preset-select-box"
-            [type]="'SMALL'"
-            [items]="notificationOptions"
-            [selected]="leaveSoundOption"
-            (selectedChange)="setLeaveSoundModeOption(asJoinNotificationsMode($event?.id))"
-          ></app-select-box>
-        </div>
-      </div>
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>join-notifications.onlyWhenLeftAlone.title</span>
-          <span translate>join-notifications.onlyWhenLeftAlone.description</span>
-        </div>
-        <div class="setting-row-action">
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="config.onlyWhenLeftAlone"
-              (change)="toggleOnlyWhenLeftAlone()"
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
-        </div>
-      </div>
-    </div>
-    <div class="settings">
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>join-notifications.onlyWhenSleepModeActive.title</span>
-          <span></span>
-        </div>
-        <div class="setting-row-action">
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="config.onlyDuringSleepMode"
-              (change)="toggleOnlyDuringSleepMode()"
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
-        </div>
-      </div>
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>join-notifications.joinSoundVolume.title</span>
-          <span translate>join-notifications.joinSoundVolume.description</span>
-        </div>
-        <div class="setting-row-action">
-          <button class="btn btn-secondary" (click)="testSound()">
+      <div class="settings">
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>join-notifications.onlyWhenSleepModeActive.title</span>
+            <span></span>
+          </div>
+          <div class="setting-row-action">
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="config.onlyDuringSleepMode"
+                (change)="toggleOnlyDuringSleepMode()"
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+          </div>
+        </div>
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>join-notifications.joinSoundVolume.title</span>
+            <span translate>join-notifications.joinSoundVolume.description</span>
+          </div>
+          <div class="setting-row-action">
+            <button class="btn btn-secondary" (click)="testSound()">
             <span translate @hshrink *ngIf="!playingTestSound"
-              >nightmare-detection.playSound.volume.test</span
+            >nightmare-detection.playSound.volume.test</span
             >
-            <i class="material-icons" @hshrink *ngIf="playingTestSound">volume_up</i>
-          </button>
-          <app-slider-setting
-            [unit]="'%'"
-            [max]="200"
-            [snapValues]="[50, 100, 150]"
-            [value]="config.joinSoundVolume"
-            (valueChange)="setJoinSoundVolume($event)"
-          ></app-slider-setting>
+              <i class="material-icons" @hshrink *ngIf="playingTestSound">volume_up</i>
+            </button>
+            <app-slider-setting
+              [unit]="'%'"
+              [max]="200"
+              [snapValues]="[50, 100, 150]"
+              [value]="config.joinSoundVolume"
+              (valueChange)="setJoinSoundVolume($event)"
+            ></app-slider-setting>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src-ui/app/views/dashboard-view/views/nightmare-detection-view/nightmare-detection-view.component.html b/src-ui/app/views/dashboard-view/views/nightmare-detection-view/nightmare-detection-view.component.html
index 5477c163..a5c7f028 100644
--- a/src-ui/app/views/dashboard-view/views/nightmare-detection-view/nightmare-detection-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/nightmare-detection-view/nightmare-detection-view.component.html
@@ -1,105 +1,107 @@
 <div class="pane">
   <div class="pane-title" translate>nightmare-detection.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <p [innerHTML]="'nightmare-detection.description' | translate"></p>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>nightmare-detection.bpmThreshold.title</span>
-            <span translate>nightmare-detection.bpmThreshold.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-slider-setting
-              [unit]="'nightmare-detection.bpmThreshold.unit' | translate"
-              [min]="60"
-              [max]="200"
-              [step]="1"
-              [value]="config.heartRateThreshold"
-              (valueChange)="updateThreshold($event)"
-            ></app-slider-setting>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>nightmare-detection.duration.title</span>
-            <span translate>nightmare-detection.duration.description</span>
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <p [innerHTML]="'nightmare-detection.description' | translate"></p>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>nightmare-detection.bpmThreshold.title</span>
+              <span translate>nightmare-detection.bpmThreshold.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-slider-setting
+                [unit]="'nightmare-detection.bpmThreshold.unit' | translate"
+                [min]="60"
+                [max]="200"
+                [step]="1"
+                [value]="config.heartRateThreshold"
+                (valueChange)="updateThreshold($event)"
+              ></app-slider-setting>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-slider-setting
-              [min]="1"
-              [snapValues]="[15, 30, 45]"
-              [snapDistance]="5"
-              [max]="59"
-              [step]="1"
-              [value]="durationValue"
-              (valueChange)="onChangeDuration($event, durationUnitOption)"
-            ></app-slider-setting>
-            <app-select-box
-              class="status-dropdown"
-              [type]="'SMALL'"
-              [items]="durationUnitOptions"
-              [selected]="durationUnitOption"
-              [showPlaceholderInDropdown]="false"
-              (selectedChange)="onChangeDuration(durationValue, $event)"
-              #transitionUnitOnEnable
-            ></app-select-box>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>nightmare-detection.duration.title</span>
+              <span translate>nightmare-detection.duration.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-slider-setting
+                [min]="1"
+                [snapValues]="[15, 30, 45]"
+                [snapDistance]="5"
+                [max]="59"
+                [step]="1"
+                [value]="durationValue"
+                (valueChange)="onChangeDuration($event, durationUnitOption)"
+              ></app-slider-setting>
+              <app-select-box
+                class="status-dropdown"
+                [type]="'SMALL'"
+                [items]="durationUnitOptions"
+                [selected]="durationUnitOption"
+                [showPlaceholderInDropdown]="false"
+                (selectedChange)="onChangeDuration(durationValue, $event)"
+                #transitionUnitOnEnable
+              ></app-select-box>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h3 translate>nightmare-detection.automations.title</h3>
-      <p translate>nightmare-detection.automations.description</p>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>nightmare-detection.disableSleepMode.title</span>
-            <span translate>nightmare-detection.disableSleepMode.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.disableSleepMode"
-                (change)="toggleDisableSleepMode()"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>nightmare-detection.playSound.title</span>
-            <span translate>nightmare-detection.playSound.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input type="checkbox" [checked]="config.playSound" (change)="togglePlaySound()" />
-              <span class="switch-toggle-slider"></span>
-            </label>
+      <div class="setting-category">
+        <h3 translate>nightmare-detection.automations.title</h3>
+        <p translate>nightmare-detection.automations.description</p>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>nightmare-detection.disableSleepMode.title</span>
+              <span translate>nightmare-detection.disableSleepMode.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="config.disableSleepMode"
+                  (change)="toggleDisableSleepMode()"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="setting-row-group">
-          <div class="setting-row" [class.disabled]="!config.playSound">
+          <div class="setting-row">
             <div class="setting-row-label" translate>
-              <span translate>nightmare-detection.playSound.volume.title</span>
-              <span translate>nightmare-detection.playSound.volume.description</span>
+              <span translate>nightmare-detection.playSound.title</span>
+              <span translate>nightmare-detection.playSound.description</span>
             </div>
             <div class="setting-row-action">
-              <button class="btn btn-secondary" (click)="testSound()">
+              <label class="switch-toggle">
+                <input type="checkbox" [checked]="config.playSound" (change)="togglePlaySound()" />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
+          </div>
+          <div class="setting-row-group">
+            <div class="setting-row" [class.disabled]="!config.playSound">
+              <div class="setting-row-label" translate>
+                <span translate>nightmare-detection.playSound.volume.title</span>
+                <span translate>nightmare-detection.playSound.volume.description</span>
+              </div>
+              <div class="setting-row-action">
+                <button class="btn btn-secondary" (click)="testSound()">
                 <span translate @hshrink *ngIf="!playingTestSound"
-                  >nightmare-detection.playSound.volume.test</span
+                >nightmare-detection.playSound.volume.test</span
                 >
-                <i class="material-icons" @hshrink *ngIf="playingTestSound">volume_up</i>
-              </button>
-              <app-slider-setting
-                [unit]="'%'"
-                [max]="200"
-                [snapValues]="[50,100,150]"
-                [value]="config.soundVolume"
-                (valueChange)="setSoundVolume($event)"
-              ></app-slider-setting>
+                  <i class="material-icons" @hshrink *ngIf="playingTestSound">volume_up</i>
+                </button>
+                <app-slider-setting
+                  [unit]="'%'"
+                  [max]="200"
+                  [snapValues]="[50,100,150]"
+                  [value]="config.soundVolume"
+                  (valueChange)="setSoundVolume($event)"
+                ></app-slider-setting>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src-ui/app/views/dashboard-view/views/osc-automations-view/osc-automations-view.component.html b/src-ui/app/views/dashboard-view/views/osc-automations-view/osc-automations-view.component.html
index 35a7fde2..38503466 100644
--- a/src-ui/app/views/dashboard-view/views/osc-automations-view/osc-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/osc-automations-view/osc-automations-view.component.html
@@ -1,46 +1,48 @@
 <div class="pane">
   <div class="pane-title" translate>oscAutomations.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <p translate>oscAutomations.general.description</p>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>oscAutomations.general.onSleepEnable.title</span>
-            <span translate>oscAutomations.general.onSleepEnable.description</span>
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <p translate>oscAutomations.general.description</p>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>oscAutomations.general.onSleepEnable.title</span>
+              <span translate>oscAutomations.general.onSleepEnable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-osc-script-button
+                [label]="'oscAutomations.general.onSleepEnable.script'"
+                [script]="config.onSleepModeEnable"
+                (scriptChange)="setOscScript('onSleepModeEnable', $event)"
+              ></app-osc-script-button>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-osc-script-button
-              [label]="'oscAutomations.general.onSleepEnable.script'"
-              [script]="config.onSleepModeEnable"
-              (scriptChange)="setOscScript('onSleepModeEnable', $event)"
-            ></app-osc-script-button>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>oscAutomations.general.onSleepDisable.title</span>
+              <span translate>oscAutomations.general.onSleepDisable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-osc-script-button
+                [label]="'oscAutomations.general.onSleepDisable.script'"
+                [script]="config.onSleepModeDisable"
+                (scriptChange)="setOscScript('onSleepModeDisable', $event)"
+              ></app-osc-script-button>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>oscAutomations.general.onSleepDisable.title</span>
-            <span translate>oscAutomations.general.onSleepDisable.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-osc-script-button
-              [label]="'oscAutomations.general.onSleepDisable.script'"
-              [script]="config.onSleepModeDisable"
-              (scriptChange)="setOscScript('onSleepModeDisable', $event)"
-            ></app-osc-script-button>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>oscAutomations.general.onSleepPreparation.title</span>
-            <span translate>oscAutomations.general.onSleepPreparation.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-osc-script-button
-              [label]="'oscAutomations.general.onSleepPreparation.script'"
-              [script]="config.onSleepPreparation"
-              (scriptChange)="setOscScript('onSleepPreparation', $event)"
-            ></app-osc-script-button>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>oscAutomations.general.onSleepPreparation.title</span>
+              <span translate>oscAutomations.general.onSleepPreparation.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-osc-script-button
+                [label]="'oscAutomations.general.onSleepPreparation.script'"
+                [script]="config.onSleepPreparation"
+                (scriptChange)="setOscScript('onSleepPreparation', $event)"
+              ></app-osc-script-button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src-ui/app/views/dashboard-view/views/power-automations-view/power-automations-view.component.html b/src-ui/app/views/dashboard-view/views/power-automations-view/power-automations-view.component.html
index 7dbde045..0e8ebb25 100644
--- a/src-ui/app/views/dashboard-view/views/power-automations-view/power-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/power-automations-view/power-automations-view.component.html
@@ -24,12 +24,14 @@
     </div>
   </div>
   <div class="pane-content">
-    <app-controllers-and-trackers-tab
-      *ngIf="activeTab === 'CONTROLLERS_AND_TRACKERS'"
-    ></app-controllers-and-trackers-tab>
-    <app-base-stations-tab *ngIf="activeTab === 'BASE_STATIONS'"></app-base-stations-tab>
-    <app-windows-power-policy-tab
-      *ngIf="activeTab === 'WINDOWS_POWER_POLICY'"
-    ></app-windows-power-policy-tab>
+    <div class="setting-view-container">
+      <app-controllers-and-trackers-tab
+        *ngIf="activeTab === 'CONTROLLERS_AND_TRACKERS'"
+      ></app-controllers-and-trackers-tab>
+      <app-base-stations-tab *ngIf="activeTab === 'BASE_STATIONS'"></app-base-stations-tab>
+      <app-windows-power-policy-tab
+        *ngIf="activeTab === 'WINDOWS_POWER_POLICY'"
+      ></app-windows-power-policy-tab>
+    </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/resolution-automations-view/resolution-automations-view.component.html b/src-ui/app/views/dashboard-view/views/resolution-automations-view/resolution-automations-view.component.html
index 94742bac..4d86a45c 100644
--- a/src-ui/app/views/dashboard-view/views/resolution-automations-view/resolution-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/resolution-automations-view/resolution-automations-view.component.html
@@ -1,136 +1,138 @@
 <div class="pane">
   <div class="pane-title" translate>resolution-automations.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <p translate>resolution-automations.description</p>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>resolution-automations.onSleepEnable.title</span>
-            <span translate>resolution-automations.onSleepEnable.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="onSleepModeEnableConfig.enabled"
-                (change)="
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <p translate>resolution-automations.description</p>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>resolution-automations.onSleepEnable.title</span>
+              <span translate>resolution-automations.onSleepEnable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="onSleepModeEnableConfig.enabled"
+                  (change)="
                   setAutomationEnabled(
                     'RENDER_RESOLUTION_ON_SLEEP_MODE_ENABLE',
                     !onSleepModeEnableConfig.enabled
                   )
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row-group">
-          <div class="setting-row" [class.disabled]="!onSleepModeEnableConfig.enabled">
-            <div class="setting-row-label" translate>
-              <span translate>resolution-automations.renderResolution.title</span>
-              <span></span>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
             </div>
-            <div class="setting-row-action">
+          </div>
+          <div class="setting-row-group">
+            <div class="setting-row" [class.disabled]="!onSleepModeEnableConfig.enabled">
+              <div class="setting-row-label" translate>
+                <span translate>resolution-automations.renderResolution.title</span>
+                <span></span>
+              </div>
+              <div class="setting-row-action">
               <span translate *ngIf="onSleepModeEnableConfig.resolution !== null"
-                >resolution-automations.renderResolution.custom</span
+              >resolution-automations.renderResolution.custom</span
               >
-              <span translate *ngIf="onSleepModeEnableConfig.resolution === null"
+                <span translate *ngIf="onSleepModeEnableConfig.resolution === null"
                 >resolution-automations.renderResolution.auto</span
-              >
-              <label class="switch-toggle">
-                <input
-                  type="checkbox"
-                  [checked]="onSleepModeEnableConfig.resolution !== null"
-                  (change)="
+                >
+                <label class="switch-toggle">
+                  <input
+                    type="checkbox"
+                    [checked]="onSleepModeEnableConfig.resolution !== null"
+                    (change)="
                     setRenderResolution(
                       'RENDER_RESOLUTION_ON_SLEEP_MODE_ENABLE',
                       onSleepEnableMode.checked ? onSleepEnableSlider.value : null
                     )
                   "
-                  #onSleepEnableMode
-                />
-                <span class="switch-toggle-slider"></span>
-              </label>
-              <app-slider-setting
-                [disabled]="onSleepModeEnableConfig.resolution === null"
-                unit="%"
-                [value]="onSleepModeEnableConfig.resolution ?? 150"
-                (valueChange)="
+                    #onSleepEnableMode
+                  />
+                  <span class="switch-toggle-slider"></span>
+                </label>
+                <app-slider-setting
+                  [disabled]="onSleepModeEnableConfig.resolution === null"
+                  unit="%"
+                  [value]="onSleepModeEnableConfig.resolution ?? 150"
+                  (valueChange)="
                   setRenderResolution('RENDER_RESOLUTION_ON_SLEEP_MODE_ENABLE', $event)
                 "
-                [min]="20"
-                [max]="500"
-                [step]="1"
-                [snapValues]="[150]"
-                [snapDistance]="25"
-                #onSleepEnableSlider
-              ></app-slider-setting>
+                  [min]="20"
+                  [max]="500"
+                  [step]="1"
+                  [snapValues]="[150]"
+                  [snapDistance]="25"
+                  #onSleepEnableSlider
+                ></app-slider-setting>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>resolution-automations.onSleepDisable.title</span>
-            <span translate>resolution-automations.onSleepDisable.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="onSleepModeDisableConfig.enabled"
-                (change)="
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>resolution-automations.onSleepDisable.title</span>
+              <span translate>resolution-automations.onSleepDisable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="onSleepModeDisableConfig.enabled"
+                  (change)="
                   setAutomationEnabled(
                     'RENDER_RESOLUTION_ON_SLEEP_MODE_DISABLE',
                     !onSleepModeDisableConfig.enabled
                   )
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row-group">
-          <div class="setting-row" [class.disabled]="!onSleepModeDisableConfig.enabled">
-            <div class="setting-row-label" translate>
-              <span translate>resolution-automations.renderResolution.title</span>
-              <span></span>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
             </div>
-            <div class="setting-row-action">
+          </div>
+          <div class="setting-row-group">
+            <div class="setting-row" [class.disabled]="!onSleepModeDisableConfig.enabled">
+              <div class="setting-row-label" translate>
+                <span translate>resolution-automations.renderResolution.title</span>
+                <span></span>
+              </div>
+              <div class="setting-row-action">
               <span translate *ngIf="onSleepModeDisableConfig.resolution !== null"
-                >resolution-automations.renderResolution.custom</span
+              >resolution-automations.renderResolution.custom</span
               >
-              <span translate *ngIf="onSleepModeDisableConfig.resolution === null"
+                <span translate *ngIf="onSleepModeDisableConfig.resolution === null"
                 >resolution-automations.renderResolution.auto</span
-              >
-              <label class="switch-toggle">
-                <input
-                  type="checkbox"
-                  [checked]="onSleepModeDisableConfig.resolution !== null"
-                  (change)="
+                >
+                <label class="switch-toggle">
+                  <input
+                    type="checkbox"
+                    [checked]="onSleepModeDisableConfig.resolution !== null"
+                    (change)="
                     setRenderResolution(
                       'RENDER_RESOLUTION_ON_SLEEP_MODE_DISABLE',
                       onSleepDisableMode.checked ? onSleepDisableSlider.value : null
                     )
                   "
-                  #onSleepDisableMode
-                />
-                <span class="switch-toggle-slider"></span>
-              </label>
-              <app-slider-setting
-                [disabled]="onSleepModeDisableConfig.resolution === null"
-                unit="%"
-                [value]="onSleepModeDisableConfig.resolution ?? 150"
-                (valueChange)="
+                    #onSleepDisableMode
+                  />
+                  <span class="switch-toggle-slider"></span>
+                </label>
+                <app-slider-setting
+                  [disabled]="onSleepModeDisableConfig.resolution === null"
+                  unit="%"
+                  [value]="onSleepModeDisableConfig.resolution ?? 150"
+                  (valueChange)="
                   setRenderResolution('RENDER_RESOLUTION_ON_SLEEP_MODE_DISABLE', $event)
                 "
-                [min]="20"
-                [max]="500"
-                [step]="1"
-                [snapValues]="[150]"
-                [snapDistance]="25"
-                #onSleepDisableSlider
-              ></app-slider-setting>
+                  [min]="20"
+                  [max]="500"
+                  [step]="1"
+                  [snapValues]="[150]"
+                  [snapDistance]="25"
+                  #onSleepDisableSlider
+                ></app-slider-setting>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src-ui/app/views/dashboard-view/views/settings-advanced-view/settings-advanced-view.component.html b/src-ui/app/views/dashboard-view/views/settings-advanced-view/settings-advanced-view.component.html
index c93c41a9..5c04f9dd 100644
--- a/src-ui/app/views/dashboard-view/views/settings-advanced-view/settings-advanced-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/settings-advanced-view/settings-advanced-view.component.html
@@ -1,38 +1,39 @@
 <div class="pane">
   <div class="pane-title" translate>settings.advanced.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <h2 translate>settings.advanced.translation.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.translation.loadFile.title</span>
-            <span translate>settings.advanced.translation.loadFile.description</span>
-          </div>
-          <div class="setting-row-action">
-            <button class="btn btn-primary" (click)="loadLanguageFile()">
-              <i class="material-icons-round">file_open</i>
-              <span translate>settings.advanced.translation.loadFile.action</span>
-            </button>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.translation.contribute.title</span>
-            <span translate>settings.advanced.translation.contribute.description</span>
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <h2 translate>settings.advanced.translation.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.advanced.translation.loadFile.title</span>
+              <span translate>settings.advanced.translation.loadFile.description</span>
+            </div>
+            <div class="setting-row-action">
+              <button class="btn btn-primary" (click)="loadLanguageFile()">
+                <i class="material-icons-round">file_open</i>
+                <span translate>settings.advanced.translation.loadFile.action</span>
+              </button>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <a
-              class="btn btn-primary"
-              target="_blank"
-              href="https://github.com/Raphiiko/OyasumiVR/wiki/Adding-Translations"
-            >
-              <span translate>settings.advanced.translation.contribute.docs</span>
-            </a>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.advanced.translation.contribute.title</span>
+              <span translate>settings.advanced.translation.contribute.description</span>
+            </div>
+            <div class="setting-row-action">
+              <a
+                class="btn btn-primary"
+                target="_blank"
+                href="https://github.com/Raphiiko/OyasumiVR/wiki/Adding-Translations"
+              >
+                <span translate>settings.advanced.translation.contribute.docs</span>
+              </a>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span>
               <span translate>settings.advanced.translation.editor.title</span>
               <span
@@ -43,178 +44,179 @@ <h2 translate>settings.advanced.translation.title</h2>
                 <i class="material-icons">warning</i>
               </span>
             </span>
-            <span translate>settings.advanced.translation.editor.description</span>
-          </div>
-          <div class="setting-row-action">
-            <button class="btn btn-primary" [routerLink]="['/translation', 'loader']" translate>
-              <span translate>settings.advanced.translation.editor.action</span>
-            </button>
+              <span translate>settings.advanced.translation.editor.description</span>
+            </div>
+            <div class="setting-row-action">
+              <button class="btn btn-primary" [routerLink]="['/translation', 'loader']" translate>
+                <span translate>settings.advanced.translation.editor.action</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h2 translate>settings.advanced.logs.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.logs.openFolder.title</span>
-            <span translate>settings.advanced.logs.openFolder.description</span>
-          </div>
-          <div class="setting-row-action">
-            <button class="btn btn-primary" (click)="openLogsFolder()">
-              <i class="material-icons-round">folder</i>
-              <span translate>settings.advanced.logs.openFolder.action</span>
-            </button>
+      <div class="setting-category">
+        <h2 translate>settings.advanced.logs.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.advanced.logs.openFolder.title</span>
+              <span translate>settings.advanced.logs.openFolder.description</span>
+            </div>
+            <div class="setting-row-action">
+              <button class="btn btn-primary" (click)="openLogsFolder()">
+                <i class="material-icons-round">folder</i>
+                <span translate>settings.advanced.logs.openFolder.action</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h2 translate>settings.advanced.persistentData.title</h2>
-      <div class="action-row">
-        <p translate>settings.advanced.persistentData.description</p>
-        <button
-          class="btn btn-secondary"
-          [disabled]="checkedPersistentStorageItems.length === 0"
-          (click)="clearPersistentStorage()"
-        >
-          <i class="material-icons-round">delete_forever</i>
-          <span translate>settings.advanced.persistentData.clearData</span>
-        </button>
-      </div>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.persistentData.dataType.all.title</span>
-            <span translate>settings.advanced.persistentData.dataType.all.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="check-toggle">
-              <input
-                [checked]="isPersistentStorageItemChecked('ALL')"
-                (change)="togglePersistentStorageItem('ALL')"
-                type="checkbox"
-              />
-              <span class="check-toggle-checkmark"></span>
-            </label>
-          </div>
+      <div class="setting-category">
+        <h2 translate>settings.advanced.persistentData.title</h2>
+        <div class="action-row">
+          <p translate>settings.advanced.persistentData.description</p>
+          <button
+            class="btn btn-secondary"
+            [disabled]="checkedPersistentStorageItems.length === 0"
+            (click)="clearPersistentStorage()"
+          >
+            <i class="material-icons-round">delete_forever</i>
+            <span translate>settings.advanced.persistentData.clearData</span>
+          </button>
         </div>
-        <div class="setting-row-group">
-          <div class="setting-row compact" *ngFor="let item of persistentStorageItems">
+        <div class="settings">
+          <div class="setting-row">
             <div class="setting-row-label" translate>
-              <span translate>{{
-                'settings.advanced.persistentData.dataType.' + item.key + '.title' | translate
-              }}</span>
-              <span translate>{{
-                'settings.advanced.persistentData.dataType.' + item.key + '.description' | translate
-              }}</span>
+              <span translate>settings.advanced.persistentData.dataType.all.title</span>
+              <span translate>settings.advanced.persistentData.dataType.all.description</span>
             </div>
             <div class="setting-row-action">
               <label class="check-toggle">
                 <input
+                  [checked]="isPersistentStorageItemChecked('ALL')"
+                  (change)="togglePersistentStorageItem('ALL')"
                   type="checkbox"
-                  [checked]="isPersistentStorageItemChecked(item.key)"
-                  (change)="togglePersistentStorageItem(item.key)"
                 />
                 <span class="check-toggle-checkmark"></span>
               </label>
             </div>
           </div>
-        </div>
-      </div>
-    </div>
-    <div class="setting-category">
-      <h2 translate>settings.advanced.fixes.title</h2>
-      <p translate>settings.advanced.fixes.description</p>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.fixes.overlayGpuFix.title</span>
-            <span translate>settings.advanced.fixes.overlayGpuFix.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="overlayGpuFix"
-                (change)="setOverlayGpuFix(!overlayGpuFix)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.fixes.openVrInitDelayFix.title</span>
-            <span translate>settings.advanced.fixes.openVrInitDelayFix.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="openVrInitDelayFix"
-                (change)="setOpenVrInitDelayFix(!openVrInitDelayFix)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+          <div class="setting-row-group">
+            <div class="setting-row compact" *ngFor="let item of persistentStorageItems">
+              <div class="setting-row-label" translate>
+              <span translate>{{
+                  'settings.advanced.persistentData.dataType.' + item.key + '.title' | translate
+                }}</span>
+                <span translate>{{
+                    'settings.advanced.persistentData.dataType.' + item.key + '.description' | translate
+                  }}</span>
+              </div>
+              <div class="setting-row-action">
+                <label class="check-toggle">
+                  <input
+                    type="checkbox"
+                    [checked]="isPersistentStorageItemChecked(item.key)"
+                    (change)="togglePersistentStorageItem(item.key)"
+                  />
+                  <span class="check-toggle-checkmark"></span>
+                </label>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.fixes.vrManifestReregister.title</span>
-            <span translate>settings.advanced.fixes.vrManifestReregister.description</span>
-          </div>
-          <div class="setting-row-action">
-            <button
-              class="btn btn-primary"
-              (click)="reregisterVRManifest()"
-              [disabled]="(openvr.status | async) !== 'INITIALIZED'"
-            >
-              <span translate>settings.advanced.fixes.vrManifestReregister.action</span>
-            </button>
+      </div>
+      <div class="setting-category">
+        <h2 translate>settings.advanced.fixes.title</h2>
+        <p translate>settings.advanced.fixes.description</p>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.advanced.fixes.overlayGpuFix.title</span>
+              <span translate>settings.advanced.fixes.overlayGpuFix.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="overlayGpuFix"
+                  (change)="setOverlayGpuFix(!overlayGpuFix)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-        </div>
-        <!--        <div class="setting-row">-->
-        <!--          <div class="setting-row-label" translate>-->
-        <!--            <span translate>settings.advanced.fixes.memoryWatcher.title</span>-->
-        <!--            <span translate>settings.advanced.fixes.memoryWatcher.description</span>-->
-        <!--          </div>-->
-        <!--          <div class="setting-row-action">-->
-        <!--            <button-->
-        <!--              class="btn btn-primary"-->
-        <!--              [disabled]="memoryWatcherActive"-->
-        <!--              (click)="activateMemoryWatcher()"-->
-        <!--            >-->
-        <!--              <span translate>settings.advanced.fixes.memoryWatcher.action</span>-->
-        <!--            </button>-->
-        <!--          </div>-->
-        <!--        </div>-->
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.fixes.devTools.title</span>
-            <span translate>settings.advanced.fixes.devTools.description</span>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.advanced.fixes.openVrInitDelayFix.title</span>
+              <span translate>settings.advanced.fixes.openVrInitDelayFix.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="openVrInitDelayFix"
+                  (change)="setOpenVrInitDelayFix(!openVrInitDelayFix)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <button class="btn btn-primary" (click)="openDevTools()">
-              <span translate>settings.advanced.fixes.devTools.action</span>
-            </button>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.advanced.fixes.vrManifestReregister.title</span>
+              <span translate>settings.advanced.fixes.vrManifestReregister.description</span>
+            </div>
+            <div class="setting-row-action">
+              <button
+                class="btn btn-primary"
+                (click)="reregisterVRManifest()"
+                [disabled]="(openvr.status | async) !== 'INITIALIZED'"
+              >
+                <span translate>settings.advanced.fixes.vrManifestReregister.action</span>
+              </button>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.advanced.fixes.oscServerEnabled.title</span>
-            <span translate>settings.advanced.fixes.oscServerEnabled.description</span>
+          <!--        <div class="setting-row">-->
+          <!--          <div class="setting-row-label" translate>-->
+          <!--            <span translate>settings.advanced.fixes.memoryWatcher.title</span>-->
+          <!--            <span translate>settings.advanced.fixes.memoryWatcher.description</span>-->
+          <!--          </div>-->
+          <!--          <div class="setting-row-action">-->
+          <!--            <button-->
+          <!--              class="btn btn-primary"-->
+          <!--              [disabled]="memoryWatcherActive"-->
+          <!--              (click)="activateMemoryWatcher()"-->
+          <!--            >-->
+          <!--              <span translate>settings.advanced.fixes.memoryWatcher.action</span>-->
+          <!--            </button>-->
+          <!--          </div>-->
+          <!--        </div>-->
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.advanced.fixes.devTools.title</span>
+              <span translate>settings.advanced.fixes.devTools.description</span>
+            </div>
+            <div class="setting-row-action">
+              <button class="btn btn-primary" (click)="openDevTools()">
+                <span translate>settings.advanced.fixes.devTools.action</span>
+              </button>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="oscServerEnabled"
-                (change)="setOscServerEnabled(!oscServerEnabled)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.advanced.fixes.oscServerEnabled.title</span>
+              <span translate>settings.advanced.fixes.oscServerEnabled.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="oscServerEnabled"
+                  (change)="setOscServerEnabled(!oscServerEnabled)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src-ui/app/views/dashboard-view/views/settings-brightness-cct-view/settings-brightness-cct-view.component.html b/src-ui/app/views/dashboard-view/views/settings-brightness-cct-view/settings-brightness-cct-view.component.html
index 6b5f905b..7e767763 100644
--- a/src-ui/app/views/dashboard-view/views/settings-brightness-cct-view/settings-brightness-cct-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/settings-brightness-cct-view/settings-brightness-cct-view.component.html
@@ -4,70 +4,71 @@
     <app-brightness-advanced-mode-toggle></app-brightness-advanced-mode-toggle>
   </div>
   <div class="pane-content">
-    <p translate>settings.brightnessCct.description</p>
-    <div class="setting-category">
-      <h2 translate>settings.brightnessCct.cctControl.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.brightnessCct.cctControl.enabled.title</span>
-            <span translate>settings.brightnessCct.cctControl.enabled.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="appSettings.cctControlEnabled"
-                (change)="toggleCCTControl()"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+    <div class="setting-view-container">
+      <p translate>settings.brightnessCct.description</p>
+      <div class="setting-category">
+        <h2 translate>settings.brightnessCct.cctControl.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.brightnessCct.cctControl.enabled.title</span>
+              <span translate>settings.brightnessCct.cctControl.enabled.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="appSettings.cctControlEnabled"
+                  (change)="toggleCCTControl()"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.brightnessCct.valveIndex.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.brightnessCct.valveIndex.maxBrightness.title</span>
-            <span translate>settings.brightnessCct.valveIndex.maxBrightness.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-slider-setting
-              [min]="valveIndexMin"
-              [max]="valveIndexMax"
-              [value]="appSettings.valveIndexMaxBrightness"
-              (valueChange)="changeValveIndexMaxBrightness($event)"
-              unit="%"
-            ></app-slider-setting>
+      <div class="setting-category">
+        <h2 translate>settings.brightnessCct.valveIndex.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.brightnessCct.valveIndex.maxBrightness.title</span>
+              <span translate>settings.brightnessCct.valveIndex.maxBrightness.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-slider-setting
+                [min]="valveIndexMin"
+                [max]="valveIndexMax"
+                [value]="appSettings.valveIndexMaxBrightness"
+                (valueChange)="changeValveIndexMaxBrightness($event)"
+                unit="%"
+              ></app-slider-setting>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.brightnessCct.bigscreenBeyond.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.brightnessCct.bigscreenBeyond.maxBrightness.title</span>
-            <span translate>settings.brightnessCct.bigscreenBeyond.maxBrightness.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-slider-setting
-              [min]="bigscreenBeyondMin"
-              [max]="bigscreenBeyondMax"
-              [value]="appSettings.bigscreenBeyondMaxBrightness"
-              (valueChange)="changeBigscreenBeyondMaxBrightness($event)"
-              unit="%"
-            ></app-slider-setting>
+      <div class="setting-category">
+        <h2 translate>settings.brightnessCct.bigscreenBeyond.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.brightnessCct.bigscreenBeyond.maxBrightness.title</span>
+              <span translate>settings.brightnessCct.bigscreenBeyond.maxBrightness.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-slider-setting
+                [min]="bigscreenBeyondMin"
+                [max]="bigscreenBeyondMax"
+                [value]="appSettings.bigscreenBeyondMaxBrightness"
+                (valueChange)="changeBigscreenBeyondMaxBrightness($event)"
+                unit="%"
+              ></app-slider-setting>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span class="row-title">
               <span translate>settings.brightnessCct.bigscreenBeyond.permitRiskRange.title</span>
               <span
@@ -78,23 +79,23 @@ <h2 translate>settings.brightnessCct.bigscreenBeyond.title</h2>
                 <i class="material-icons">warning</i>
               </span>
             </span>
-            <span translate
+              <span translate
               >settings.brightnessCct.bigscreenBeyond.permitRiskRange.description</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="!appSettings.bigscreenBeyondUnsafeBrightness"
-                (change)="toggleBigscreenBeyondUnsafeBrightness()"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+              >
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="!appSettings.bigscreenBeyondUnsafeBrightness"
+                  (change)="toggleBigscreenBeyondUnsafeBrightness()"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span class="row-title">
               <span translate>settings.brightnessCct.bigscreenBeyond.forceFanSafety.title</span>
               <span
@@ -105,17 +106,18 @@ <h2 translate>settings.brightnessCct.bigscreenBeyond.title</h2>
                 <i class="material-icons">warning</i>
               </span>
             </span>
-            <span translate>settings.brightnessCct.bigscreenBeyond.forceFanSafety.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="appSettings.bigscreenBeyondBrightnessFanSafety"
-                (change)="toggleBigscreenBeyondForceFanBrightnessSafety()"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+              <span translate>settings.brightnessCct.bigscreenBeyond.forceFanSafety.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="appSettings.bigscreenBeyondBrightnessFanSafety"
+                  (change)="toggleBigscreenBeyondForceFanBrightnessSafety()"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src-ui/app/views/dashboard-view/views/settings-general-view/settings-general-view.component.html b/src-ui/app/views/dashboard-view/views/settings-general-view/settings-general-view.component.html
index 86aaf498..489c55c2 100644
--- a/src-ui/app/views/dashboard-view/views/settings-general-view/settings-general-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/settings-general-view/settings-general-view.component.html
@@ -1,329 +1,331 @@
 <div class="pane">
   <div class="pane-title" translate>settings.general.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <h2 translate>settings.general.language.title</h2>
-      <p translate>settings.general.language.description</p>
-      <div class="settings-language">
-        <label class="radio-button" *ngFor="let language of languages">
-          <input
-            type="radio"
-            name="radio-language"
-            [value]="language.code"
-            [checked]="appSettings.userLanguage === language.code"
-            (change)="setUserLanguage(language.code)"
-          />
-          <span class="radio-button-dot"></span>
-          <span class="radio-button-label">
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <h2 translate>settings.general.language.title</h2>
+        <p translate>settings.general.language.description</p>
+        <div class="settings-language">
+          <label class="radio-button" *ngFor="let language of languages">
+            <input
+              type="radio"
+              name="radio-language"
+              [value]="language.code"
+              [checked]="appSettings.userLanguage === language.code"
+              (change)="setUserLanguage(language.code)"
+            />
+            <span class="radio-button-dot"></span>
+            <span class="radio-button-label">
             <span class="fi fi-{{ language.flag || language.code }}"></span>
             <span>{{ language.label }}</span>
           </span>
-        </label>
+          </label>
+        </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.sleepMode.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.sleepMode.startupBehaviour.title</span>
-            <span translate>settings.general.sleepMode.startupBehaviour.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              class="sleep-mode-startup-behaviour-dropdown"
-              [items]="sleepModeStartupBehaviourOptions"
-              [selected]="sleepModeStartupBehaviourOption"
-              (selectedChange)="onChangeSleepModeStartupBehaviour($event)"
-            ></app-select-box>
+      <div class="setting-category">
+        <h2 translate>settings.general.sleepMode.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.sleepMode.startupBehaviour.title</span>
+              <span translate>settings.general.sleepMode.startupBehaviour.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                class="sleep-mode-startup-behaviour-dropdown"
+                [items]="sleepModeStartupBehaviourOptions"
+                [selected]="sleepModeStartupBehaviourOption"
+                (selectedChange)="onChangeSleepModeStartupBehaviour($event)"
+              ></app-select-box>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.systemTray.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.systemTray.close.label</span>
-            <span translate>settings.general.systemTray.close.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="appSettings.exitInSystemTray"
-                (change)="setExitInSystemTray(!appSettings.exitInSystemTray)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.systemTray.start.label</span>
-            <span translate>settings.general.systemTray.start.description</span>
+      <div class="setting-category">
+        <h2 translate>settings.general.systemTray.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.systemTray.close.label</span>
+              <span translate>settings.general.systemTray.close.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="appSettings.exitInSystemTray"
+                  (change)="setExitInSystemTray(!appSettings.exitInSystemTray)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="appSettings.startInSystemTray"
-                (change)="setStartInSystemTray(!appSettings.startInSystemTray)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.systemTray.start.label</span>
+              <span translate>settings.general.systemTray.start.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="appSettings.startInSystemTray"
+                  (change)="setStartInSystemTray(!appSettings.startInSystemTray)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.overlay.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.overlay.overlayMenu.title</span>
-            <span translate>settings.general.overlay.overlayMenu.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="appSettings.overlayMenuEnabled"
-                (change)="setOverlayMenuEnabled(!appSettings.overlayMenuEnabled)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.overlay.binding.title</span>
-            <span translate>settings.general.overlay.binding.description</span>
+      <div class="setting-category">
+        <h2 translate>settings.general.overlay.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.overlay.overlayMenu.title</span>
+              <span translate>settings.general.overlay.overlayMenu.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="appSettings.overlayMenuEnabled"
+                  (change)="setOverlayMenuEnabled(!appSettings.overlayMenuEnabled)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-controller-binding
-              [actionKey]="OVRInputEventAction.OpenOverlay"
-            ></app-controller-binding>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.overlay.binding.title</span>
+              <span translate>settings.general.overlay.binding.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-controller-binding
+                [actionKey]="OVRInputEventAction.OpenOverlay"
+              ></app-controller-binding>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.overlay.onlyOpenMenuWhenVRChatRunning.title</span>
-            <span translate
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.overlay.onlyOpenMenuWhenVRChatRunning.title</span>
+              <span translate
               >settings.general.overlay.onlyOpenMenuWhenVRChatRunning.description</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="appSettings.overlayMenuOnlyOpenWhenVRChatIsRunning"
-                (change)="
+              >
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="appSettings.overlayMenuOnlyOpenWhenVRChatIsRunning"
+                  (change)="
                   setOverlayMenuOnlyOpenWhenVRChatIsRunning(
                     !appSettings.overlayMenuOnlyOpenWhenVRChatIsRunning
                   )
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.lighthousePowerControl.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.lighthousePowerControl.enable.title</span>
-            <span translate>settings.general.lighthousePowerControl.enable.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="appSettings.lighthousePowerControl"
-                (change)="setLighthousePowerControl(!appSettings.lighthousePowerControl)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.lighthousePowerControl.powerOffMode.title</span>
-            <span translate>settings.general.lighthousePowerControl.powerOffMode.description</span>
+      <div class="setting-category">
+        <h2 translate>settings.general.lighthousePowerControl.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.lighthousePowerControl.enable.title</span>
+              <span translate>settings.general.lighthousePowerControl.enable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="appSettings.lighthousePowerControl"
+                  (change)="setLighthousePowerControl(!appSettings.lighthousePowerControl)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-select-box
-              class="lighthouse-power-off-mode-dropdown"
-              [items]="lighthousePowerOffModeOptions"
-              [selected]="lighthousePowerOffModeOption"
-              (selectedChange)="onChangeLighthousePowerOffMode($event)"
-            ></app-select-box>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.lighthousePowerControl.powerOffMode.title</span>
+              <span translate>settings.general.lighthousePowerControl.powerOffMode.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                class="lighthouse-power-off-mode-dropdown"
+                [items]="lighthousePowerOffModeOptions"
+                [selected]="lighthousePowerOffModeOption"
+                (selectedChange)="onChangeLighthousePowerOffMode($event)"
+              ></app-select-box>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.startStop.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.startWithSteamVR.label</span>
-            <span translate>settings.general.startWithSteamVR.description</span>
-          </div>
-          <div class="setting-row-action">
-            <button class="btn btn-secondary" (click)="showStartWithSteamVRHowToModal()" translate
+      <div class="setting-category">
+        <h2 translate>settings.general.startStop.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.startWithSteamVR.label</span>
+              <span translate>settings.general.startWithSteamVR.description</span>
+            </div>
+            <div class="setting-row-action">
+              <button class="btn btn-secondary" (click)="showStartWithSteamVRHowToModal()" translate
               >settings.general.startWithSteamVR.howTo
-            </button>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.stopWithSteamVR.label</span>
-            <span translate>settings.general.stopWithSteamVR.description</span>
+              </button>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="stop-with-steamvr-dropdown"
-              [items]="stopWithSteamVROptions"
-              [selected]="stopWithSteamVROption"
-              (selectedChange)="onChangeStopWithSteamVROption($event)"
-            ></app-select-box>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.stopWithSteamVR.label</span>
+              <span translate>settings.general.stopWithSteamVR.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="stop-with-steamvr-dropdown"
+                [items]="stopWithSteamVROptions"
+                [selected]="stopWithSteamVROption"
+                (selectedChange)="onChangeStopWithSteamVROption($event)"
+              ></app-select-box>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.discord.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.discord.activityMode.title</span>
-            <span translate>settings.general.discord.activityMode.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              [type]="'SMALL'"
-              class="discord-activity-mode-dropdown"
-              [items]="discordActivityModeOptions"
-              [selected]="discordActivityModeOption"
-              (selectedChange)="onChangeDiscordActivityMode($event)"
-            ></app-select-box>
-          </div>
-        </div>
-        <div class="setting-row-group">
+      <div class="setting-category">
+        <h2 translate>settings.general.discord.title</h2>
+        <div class="settings">
           <div class="setting-row">
             <div class="setting-row-label" translate>
-              <span translate>settings.general.discord.activityModeVRCCondition.title</span>
-              <span></span>
+              <span translate>settings.general.discord.activityMode.title</span>
+              <span translate>settings.general.discord.activityMode.description</span>
             </div>
             <div class="setting-row-action">
-              <label class="switch-toggle">
-                <input
-                  type="checkbox"
-                  [checked]="appSettings.discordActivityOnlyWhileVRChatIsRunning"
-                  (change)="
+              <app-select-box
+                [type]="'SMALL'"
+                class="discord-activity-mode-dropdown"
+                [items]="discordActivityModeOptions"
+                [selected]="discordActivityModeOption"
+                (selectedChange)="onChangeDiscordActivityMode($event)"
+              ></app-select-box>
+            </div>
+          </div>
+          <div class="setting-row-group">
+            <div class="setting-row">
+              <div class="setting-row-label" translate>
+                <span translate>settings.general.discord.activityModeVRCCondition.title</span>
+                <span></span>
+              </div>
+              <div class="setting-row-action">
+                <label class="switch-toggle">
+                  <input
+                    type="checkbox"
+                    [checked]="appSettings.discordActivityOnlyWhileVRChatIsRunning"
+                    (change)="
                     setDiscordActivityOnlyWhenVRChatIsRunning(
                       !appSettings.discordActivityOnlyWhileVRChatIsRunning
                     )
                   "
-                />
-                <span class="switch-toggle-slider"></span>
-              </label>
+                  />
+                  <span class="switch-toggle-slider"></span>
+                </label>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.lighthouseConsole.title</h2>
-      <p [innerHTML]="'settings.general.lighthouseConsole.description' | translate"></p>
-      <div class="settings-lighthouse-console">
-        <div class="file-path-bar">
-          <div class="file-path-bar-path">
-            <input
-              type="text"
-              [value]="appSettings.lighthouseConsolePath"
-              (keyup)="lighthouseConsolePathInputChange.next(lighthouseConsolePathInput.value)"
-              #lighthouseConsolePathInput
-            />
-          </div>
-          <button class="file-path-bar-btn-browse" (click)="browseForLighthouseConsole()">
-            <i class="material-icons">folder</i>
-          </button>
-        </div>
-        <div
-          class="alert"
-          [class.success]="lighthouseConsolePathAlert.type === 'SUCCESS'"
-          [class.error]="lighthouseConsolePathAlert.type === 'ERROR'"
-          *ngIf="lighthouseConsolePathAlert"
-          [@vshrink]
-        >
-          <div class="alert-bg"></div>
-          <div class="alert-icon">
-            <i class="material-icons" *ngIf="!lighthouseConsolePathAlert.loadingIndicator">
-              check_circle_outline
-            </i>
-            <div class="small-spinner" *ngIf="lighthouseConsolePathAlert.loadingIndicator"></div>
+      <div class="setting-category">
+        <h2 translate>settings.general.lighthouseConsole.title</h2>
+        <p [innerHTML]="'settings.general.lighthouseConsole.description' | translate"></p>
+        <div class="settings-lighthouse-console">
+          <div class="file-path-bar">
+            <div class="file-path-bar-path">
+              <input
+                type="text"
+                [value]="appSettings.lighthouseConsolePath"
+                (keyup)="lighthouseConsolePathInputChange.next(lighthouseConsolePathInput.value)"
+                #lighthouseConsolePathInput
+              />
+            </div>
+            <button class="file-path-bar-btn-browse" (click)="browseForLighthouseConsole()">
+              <i class="material-icons">folder</i>
+            </button>
           </div>
           <div
-            class="alert-content"
-            [innerHTML]="lighthouseConsolePathAlert.text | translate"
-          ></div>
+            class="alert"
+            [class.success]="lighthouseConsolePathAlert.type === 'SUCCESS'"
+            [class.error]="lighthouseConsolePathAlert.type === 'ERROR'"
+            *ngIf="lighthouseConsolePathAlert"
+            [@vshrink]
+          >
+            <div class="alert-bg"></div>
+            <div class="alert-icon">
+              <i class="material-icons" *ngIf="!lighthouseConsolePathAlert.loadingIndicator">
+                check_circle_outline
+              </i>
+              <div class="small-spinner" *ngIf="lighthouseConsolePathAlert.loadingIndicator"></div>
+            </div>
+            <div
+              class="alert-content"
+              [innerHTML]="lighthouseConsolePathAlert.text | translate"
+            ></div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.adminPrivileges.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.adminPrivileges.label</span>
-            <span translate>settings.general.adminPrivileges.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="appSettings.askForAdminOnStart"
-                (change)="setAskForAdminOnStart(!appSettings.askForAdminOnStart)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+      <div class="setting-category">
+        <h2 translate>settings.general.adminPrivileges.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.adminPrivileges.label</span>
+              <span translate>settings.general.adminPrivileges.description</span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="appSettings.askForAdminOnStart"
+                  (change)="setAskForAdminOnStart(!appSettings.askForAdminOnStart)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="setting-category">
-      <h2 translate>settings.general.telemetry.title</h2>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>settings.general.telemetry.label</span>
-            <span [innerHtml]="'settings.general.telemetry.description' | translate"></span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="telemetrySettings.enabled"
-                (change)="setTelemetryEnabled(!telemetrySettings.enabled)"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+      <div class="setting-category">
+        <h2 translate>settings.general.telemetry.title</h2>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>settings.general.telemetry.label</span>
+              <span [innerHtml]="'settings.general.telemetry.description' | translate"></span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="telemetrySettings.enabled"
+                  (change)="setTelemetryEnabled(!telemetrySettings.enabled)"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src-ui/app/views/dashboard-view/views/settings-hotkey-view/settings-hotkey-view.component.html b/src-ui/app/views/dashboard-view/views/settings-hotkey-view/settings-hotkey-view.component.html
index 3ad99c37..f55dc0b9 100644
--- a/src-ui/app/views/dashboard-view/views/settings-hotkey-view/settings-hotkey-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/settings-hotkey-view/settings-hotkey-view.component.html
@@ -1,16 +1,18 @@
 <div class="pane">
   <div class="pane-title" translate>settings.hotkeys.title</div>
   <div class="pane-content">
-    <p translate>settings.hotkeys.description</p>
-    <h2 translate>settings.hotkeys.actions</h2>
-    <div class="settings">
-      <div class="setting-row" *ngFor="let action of actions">
-        <div class="setting-row-label">
-          <span translate>{{ 'settings.hotkeys.action.' + action.id }}</span>
-          <span translate>settings.hotkeys.actionDescription</span>
-        </div>
-        <div class="setting-row-action">
-          <app-hotkey-selector [action]="action.id"></app-hotkey-selector>
+    <div class="setting-view-container">
+      <p translate>settings.hotkeys.description</p>
+      <h2 translate>settings.hotkeys.actions</h2>
+      <div class="settings">
+        <div class="setting-row" *ngFor="let action of actions">
+          <div class="setting-row-label">
+            <span translate>{{ 'settings.hotkeys.action.' + action.id }}</span>
+            <span translate>settings.hotkeys.actionDescription</span>
+          </div>
+          <div class="setting-row-action">
+            <app-hotkey-selector [action]="action.id"></app-hotkey-selector>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src-ui/app/views/dashboard-view/views/settings-integrations-view/settings-integrations-view.component.html b/src-ui/app/views/dashboard-view/views/settings-integrations-view/settings-integrations-view.component.html
index 2d12ee2c..2a2e7536 100644
--- a/src-ui/app/views/dashboard-view/views/settings-integrations-view/settings-integrations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/settings-integrations-view/settings-integrations-view.component.html
@@ -1,161 +1,163 @@
 <div class="pane">
   <div class="pane-title" translate>settings.integrations.title</div>
   <div class="pane-content">
-    <p translate>settings.integrations.description</p>
-    <div class="setting-category">
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-icon">
-            <a href="https://vrchat.com/" target="_blank">
-              <img class="vrchat-logo clickable-logo" src="/assets/img/vrc_icon.png" />
-            </a>
-          </div>
-          <div class="setting-row-label">
-            <span [innerHtml]="'settings.integrations.vrchat.title' | translate"></span>
-            <span [innerHtml]="'settings.integrations.vrchat.description' | translate"></span>
-            <a target="_blank" href="https://vrchat.com" translate
+    <div class="setting-view-container">
+      <p translate>settings.integrations.description</p>
+      <div class="setting-category">
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-icon">
+              <a href="https://vrchat.com/" target="_blank">
+                <img class="vrchat-logo clickable-logo" src="/assets/img/vrc_icon.png" />
+              </a>
+            </div>
+            <div class="setting-row-label">
+              <span [innerHtml]="'settings.integrations.vrchat.title' | translate"></span>
+              <span [innerHtml]="'settings.integrations.vrchat.description' | translate"></span>
+              <a target="_blank" href="https://vrchat.com" translate
               >settings.integrations.providerLink</a
-            >
-          </div>
-          <div class="setting-row-action">
-            <div class="connected" *ngIf="vrchat.user | async" @hshrink>
-              <div class="connected-info">
-                <i class="material-icons-round">check_circle</i>
-                <div class="connected-info-account">
-                  {{ (vrchat.user | async)?.displayName }}
+              >
+            </div>
+            <div class="setting-row-action">
+              <div class="connected" *ngIf="vrchat.user | async" @hshrink>
+                <div class="connected-info">
+                  <i class="material-icons-round">check_circle</i>
+                  <div class="connected-info-account">
+                    {{ (vrchat.user | async)?.displayName }}
+                  </div>
                 </div>
+                <button
+                  class="btn btn-secondary connected-disconnect"
+                  (click)="vrchat.logout()"
+                  translate
+                >
+                  settings.integrations.disconnect
+                </button>
               </div>
               <button
-                class="btn btn-secondary connected-disconnect"
-                (click)="vrchat.logout()"
+                class="btn btn-primary"
+                (click)="vrchat.showLoginModal()"
                 translate
-              >
-                settings.integrations.disconnect
+                *ngIf="(vrchat.user | async) === null"
+                @hshrink
+              >settings.integrations.connect
               </button>
             </div>
-            <button
-              class="btn btn-primary"
-              (click)="vrchat.showLoginModal()"
-              translate
-              *ngIf="(vrchat.user | async) === null"
-              @hshrink
-              >settings.integrations.connect
-            </button>
           </div>
-        </div>
 
-        <div class="setting-row">
-          <div class="setting-row-icon">
-            <a
-              [href]="'https://pulsoid.net/pricing?promo_campaign_id=' + PULSOID_REFERRAL_ID"
-              target="_blank"
-            >
-              <img class="pulsoid-logo clickable-logo" src="/assets/img/pulsoid-logo.png" />
-            </a>
-          </div>
-          <div class="setting-row-label">
-            <span [innerHtml]="'settings.integrations.pulsoid.title' | translate"></span>
-            <span [innerHtml]="'settings.integrations.pulsoid.description' | translate"></span>
-            <a
-              target="_blank"
-              [href]="'https://pulsoid.net/pricing?promo_campaign_id=' + PULSOID_REFERRAL_ID"
-              translate
-              >settings.integrations.providerLink</a
-            >
-          </div>
-          <div class="setting-row-action">
-            <div class="connected" *ngIf="pulsoid.loggedInUser | async" @hshrink>
-              <div
-                class="connected-info"
-                [tooltip]="'settings.integrations.reveal'"
-                [tooltipMode]="'top'"
+          <div class="setting-row">
+            <div class="setting-row-icon">
+              <a
+                [href]="'https://pulsoid.net/pricing?promo_campaign_id=' + PULSOID_REFERRAL_ID"
+                target="_blank"
               >
-                <i class="material-icons-round">check_circle</i>
-                <div
-                  class="connected-info-account obfuscated"
-                  [obfuscatedValue]="(pulsoid.loggedInUser | async) ?? ''"
-                  [obfuscatedMaxLength]="16"
-                  [deobfuscatedMaxLength]="32"
-                  [deobfuscate]="deobfuscated.includes('PULSOID')"
-                  (click)="deobfuscate('PULSOID')"
-                ></div>
-              </div>
-              <button
-                class="btn btn-secondary connected-disconnect"
-                (click)="pulsoid.logout()"
+                <img class="pulsoid-logo clickable-logo" src="/assets/img/pulsoid-logo.png" />
+              </a>
+            </div>
+            <div class="setting-row-label">
+              <span [innerHtml]="'settings.integrations.pulsoid.title' | translate"></span>
+              <span [innerHtml]="'settings.integrations.pulsoid.description' | translate"></span>
+              <a
+                target="_blank"
+                [href]="'https://pulsoid.net/pricing?promo_campaign_id=' + PULSOID_REFERRAL_ID"
                 translate
+              >settings.integrations.providerLink</a
               >
-                settings.integrations.disconnect
-              </button>
             </div>
-            <div *ngIf="(pulsoid.loggedInUser | async) === null" @hshrink class="connect-row">
-              <button
-                class="btn btn-copy btn-secondary"
-                tooltip="settings.integrations.copy"
-                tooltipMode="left"
-                (click)="copyToClipboard('PULSOID')"
-              >
-                <i class="material-icons" *ngIf="!copiedToClipboard.includes('PULSOID')" @hshrink
-                  >copy_all</i
+            <div class="setting-row-action">
+              <div class="connected" *ngIf="pulsoid.loggedInUser | async" @hshrink>
+                <div
+                  class="connected-info"
+                  [tooltip]="'settings.integrations.reveal'"
+                  [tooltipMode]="'top'"
                 >
-                <i
-                  class="material-icons success"
-                  *ngIf="copiedToClipboard.includes('PULSOID')"
-                  @hshrink
-                  >check</i
+                  <i class="material-icons-round">check_circle</i>
+                  <div
+                    class="connected-info-account obfuscated"
+                    [obfuscatedValue]="(pulsoid.loggedInUser | async) ?? ''"
+                    [obfuscatedMaxLength]="16"
+                    [deobfuscatedMaxLength]="32"
+                    [deobfuscate]="deobfuscated.includes('PULSOID')"
+                    (click)="deobfuscate('PULSOID')"
+                  ></div>
+                </div>
+                <button
+                  class="btn btn-secondary connected-disconnect"
+                  (click)="pulsoid.logout()"
+                  translate
                 >
-              </button>
-              <button class="btn btn-primary" (click)="pulsoid.login()" translate>
-                settings.integrations.connect
-              </button>
+                  settings.integrations.disconnect
+                </button>
+              </div>
+              <div *ngIf="(pulsoid.loggedInUser | async) === null" @hshrink class="connect-row">
+                <button
+                  class="btn btn-copy btn-secondary"
+                  tooltip="settings.integrations.copy"
+                  tooltipMode="left"
+                  (click)="copyToClipboard('PULSOID')"
+                >
+                  <i class="material-icons" *ngIf="!copiedToClipboard.includes('PULSOID')" @hshrink
+                  >copy_all</i
+                  >
+                  <i
+                    class="material-icons success"
+                    *ngIf="copiedToClipboard.includes('PULSOID')"
+                    @hshrink
+                  >check</i
+                  >
+                </button>
+                <button class="btn btn-primary" (click)="pulsoid.login()" translate>
+                  settings.integrations.connect
+                </button>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div class="setting-row">
-          <div class="setting-row-icon">
-            <a href="https://www.home-assistant.io/" target="_blank">
-              <img class="hass-logo clickable-logo" src="/assets/img/hass_logo.png" />
-            </a>
-          </div>
-          <div class="setting-row-label">
-            <span [innerHtml]="'settings.integrations.homeAssistant.title' | translate"></span>
-            <span
-              [innerHtml]="'settings.integrations.homeAssistant.description' | translate"
-            ></span>
-            <a target="_blank" href="https://www.home-assistant.io/" translate
+          <div class="setting-row">
+            <div class="setting-row-icon">
+              <a href="https://www.home-assistant.io/" target="_blank">
+                <img class="hass-logo clickable-logo" src="/assets/img/hass_logo.png" />
+              </a>
+            </div>
+            <div class="setting-row-label">
+              <span [innerHtml]="'settings.integrations.homeAssistant.title' | translate"></span>
+              <span
+                [innerHtml]="'settings.integrations.homeAssistant.description' | translate"
+              ></span>
+              <a target="_blank" href="https://www.home-assistant.io/" translate
               >settings.integrations.providerLink</a
-            >
-          </div>
-          <div
-            class="setting-row-action"
-            *ngIf="{
+              >
+            </div>
+            <div
+              class="setting-row-action"
+              *ngIf="{
               mqttClient: (mqttService.client | async)
             } as data"
-          >
-            <div class="connected" *ngIf="data.mqttClient" @hshrink>
-              <div class="connected-info">
-                <i class="material-icons-round">check_circle</i>
-                <div class="connected-info-account">
-                  {{ data.mqttClient.options.host }}
+            >
+              <div class="connected" *ngIf="data.mqttClient" @hshrink>
+                <div class="connected-info">
+                  <i class="material-icons-round">check_circle</i>
+                  <div class="connected-info-account">
+                    {{ data.mqttClient.options.host }}
+                  </div>
                 </div>
+                <button
+                  class="btn btn-secondary connected-disconnect"
+                  (click)="showMqttConfigModal()"
+                  translate
+                  @hshrink
+                >settings.integrations.configure
+                </button>
               </div>
               <button
-                class="btn btn-secondary connected-disconnect"
+                *ngIf="!data.mqttClient"
+                class="btn btn-primary"
                 (click)="showMqttConfigModal()"
                 translate
                 @hshrink
-                >settings.integrations.configure
+              >settings.integrations.configure
               </button>
             </div>
-            <button
-              *ngIf="!data.mqttClient"
-              class="btn btn-primary"
-              (click)="showMqttConfigModal()"
-              translate
-              @hshrink
-              >settings.integrations.configure
-            </button>
           </div>
         </div>
       </div>
diff --git a/src-ui/app/views/dashboard-view/views/settings-notifications-view/settings-notifications-view.component.html b/src-ui/app/views/dashboard-view/views/settings-notifications-view/settings-notifications-view.component.html
index c1083a40..32fcd888 100644
--- a/src-ui/app/views/dashboard-view/views/settings-notifications-view/settings-notifications-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/settings-notifications-view/settings-notifications-view.component.html
@@ -1,72 +1,74 @@
 <div class="pane">
   <div class="pane-title" translate>settings.notifications.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label">
-            <span translate>settings.notifications.provider.title</span>
-            <span translate>settings.notifications.provider.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              class="provider-dropdown"
-              [type]="'SMALL'"
-              [items]="providerOptions"
-              [selected]="providerOption"
-              (selectedChange)="onChangeProviderOption($event)"
-            ></app-select-box>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label">
-            <span translate>settings.notifications.volume.title</span>
-            <span translate>settings.notifications.volume.description</span>
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label">
+              <span translate>settings.notifications.provider.title</span>
+              <span translate>settings.notifications.provider.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                class="provider-dropdown"
+                [type]="'SMALL'"
+                [items]="providerOptions"
+                [selected]="providerOption"
+                (selectedChange)="onChangeProviderOption($event)"
+              ></app-select-box>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <button class="btn btn-secondary" (click)="testSound()">
+          <div class="setting-row">
+            <div class="setting-row-label">
+              <span translate>settings.notifications.volume.title</span>
+              <span translate>settings.notifications.volume.description</span>
+            </div>
+            <div class="setting-row-action">
+              <button class="btn btn-secondary" (click)="testSound()">
               <span translate @hshrink *ngIf="!playingTestSound"
-                >settings.notifications.volume.test</span
+              >settings.notifications.volume.test</span
               >
-              <i class="material-icons" @hshrink *ngIf="playingTestSound">volume_up</i>
-            </button>
-            <app-slider-setting
-              [value]="generalNotificationVolume"
-              [max]="200"
-              [snapValues]="[50, 100, 150]"
-              (valueChange)="setGeneralNotificationVolume($event)"
-              [unit]="'%'"
-            ></app-slider-setting>
+                <i class="material-icons" @hshrink *ngIf="playingTestSound">volume_up</i>
+              </button>
+              <app-slider-setting
+                [value]="generalNotificationVolume"
+                [max]="200"
+                [snapValues]="[50, 100, 150]"
+                (valueChange)="setGeneralNotificationVolume($event)"
+                [unit]="'%'"
+              ></app-slider-setting>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label">
-            <span translate>settings.notifications.notifications.title</span>
-            <span translate>settings.notifications.notifications.description</span>
+          <div class="setting-row">
+            <div class="setting-row-label">
+              <span translate>settings.notifications.notifications.title</span>
+              <span translate>settings.notifications.notifications.description</span>
+            </div>
+            <div class="setting-row-action"></div>
           </div>
-          <div class="setting-row-action"></div>
-        </div>
-        <div class="setting-row-group">
-          <div class="setting-row compact" *ngFor="let notificationType of notificationTypes">
-            <div class="setting-row-label" translate>
+          <div class="setting-row-group">
+            <div class="setting-row compact" *ngFor="let notificationType of notificationTypes">
+              <div class="setting-row-label" translate>
               <span>{{
-                'settings.notifications.notifications.category.' + notificationType + '.title'
-                  | translate
-              }}</span>
-              <span>{{
-                'settings.notifications.notifications.category.' + notificationType + '.description'
-                  | translate
-              }}</span>
-            </div>
-            <div class="setting-row-action">
-              <label class="check-toggle">
-                <input
-                  type="checkbox"
-                  [checked]="isNotificationTypeChecked(notificationType)"
-                  (change)="toggleNotificationType(notificationType)"
-                />
-                <span class="check-toggle-checkmark"></span>
-              </label>
+                  'settings.notifications.notifications.category.' + notificationType + '.title'
+                    | translate
+                }}</span>
+                <span>{{
+                    'settings.notifications.notifications.category.' + notificationType + '.description'
+                      | translate
+                  }}</span>
+              </div>
+              <div class="setting-row-action">
+                <label class="check-toggle">
+                  <input
+                    type="checkbox"
+                    [checked]="isNotificationTypeChecked(notificationType)"
+                    (change)="toggleNotificationType(notificationType)"
+                  />
+                  <span class="check-toggle-checkmark"></span>
+                </label>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src-ui/app/views/dashboard-view/views/settings-status-info-view/settings-status-info-view.component.html b/src-ui/app/views/dashboard-view/views/settings-status-info-view/settings-status-info-view.component.html
index ca19aa62..89a52a48 100644
--- a/src-ui/app/views/dashboard-view/views/settings-status-info-view/settings-status-info-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/settings-status-info-view/settings-status-info-view.component.html
@@ -1,50 +1,52 @@
 <div class="pane">
   <div class="pane-title" translate>settings.statusInfo.title</div>
   <div class="pane-content">
-    <p translate>settings.statusInfo.description</p>
-    <div class="settings">
-      <div class="setting-row">
-        <div class="setting-row-label" translate>
-          <span translate>settings.statusInfo.copy.title</span>
-          <span translate>settings.statusInfo.copy.description</span>
-        </div>
-        <div class="setting-row-action">
-          <button class="btn btn-primary btn-copy" translate (click)="copyToClipboard()">
+    <div class="setting-view-container">
+      <p translate>settings.statusInfo.description</p>
+      <div class="settings">
+        <div class="setting-row">
+          <div class="setting-row-label" translate>
+            <span translate>settings.statusInfo.copy.title</span>
+            <span translate>settings.statusInfo.copy.description</span>
+          </div>
+          <div class="setting-row-action">
+            <button class="btn btn-primary btn-copy" translate (click)="copyToClipboard()">
             <span @hshrink *ngIf="!copiedToClipboard.includes('ALL_DATA')">
               <i class="material-icons">copy_all</i>
               <span translate>settings.statusInfo.copy.action</span>
             </span>
-            <i
-              class="material-icons success"
-              *ngIf="copiedToClipboard.includes('ALL_DATA')"
-              @hshrink
+              <i
+                class="material-icons success"
+                *ngIf="copiedToClipboard.includes('ALL_DATA')"
+                @hshrink
               >check</i
-            >
-          </button>
-        </div>
-      </div>
-      <ng-container *ngFor="let category of categories">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span>{{ category.name | tsTranslate }}</span>
-            <span></span>
+              >
+            </button>
           </div>
-          <div class="setting-row-action"></div>
         </div>
-        <div class="setting-row-group">
-          <div class="setting-row" [class.compact]="compact" *ngFor="let entry of category.entries">
+        <ng-container *ngFor="let category of categories">
+          <div class="setting-row">
             <div class="setting-row-label" translate>
-              <span>{{ entry.key | tsTranslate }}</span>
+              <span>{{ category.name | tsTranslate }}</span>
               <span></span>
             </div>
-            <div class="setting-row-action">
+            <div class="setting-row-action"></div>
+          </div>
+          <div class="setting-row-group">
+            <div class="setting-row" [class.compact]="compact" *ngFor="let entry of category.entries">
+              <div class="setting-row-label" translate>
+                <span>{{ entry.key | tsTranslate }}</span>
+                <span></span>
+              </div>
+              <div class="setting-row-action">
               <span
-                ><b>{{ (entry.value | async) ?? '' | tsTranslate }}</b></span
+              ><b>{{ (entry.value | async) ?? '' | tsTranslate }}</b></span
               >
+              </div>
             </div>
           </div>
-        </div>
-      </ng-container>
+        </ng-container>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/settings-updates-view/settings-updates-view.component.html b/src-ui/app/views/dashboard-view/views/settings-updates-view/settings-updates-view.component.html
index b8281fa0..4ba622f5 100644
--- a/src-ui/app/views/dashboard-view/views/settings-updates-view/settings-updates-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/settings-updates-view/settings-updates-view.component.html
@@ -1,57 +1,59 @@
 <div class="pane">
   <div class="pane-title" translate>settings.updates.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <div class="updates-disabled" *ngIf="FLAVOUR !== 'STANDALONE'">
-        <img src="/assets/img/icon_150x150.png" *ngIf="FLAVOUR === 'DEV'" />
-        <img
-          src="/assets/img/steam_icon.png"
-          *ngIf="FLAVOUR === 'STEAM' || FLAVOUR === 'STEAM_CN'"
-        />
-        <span *ngIf="FLAVOUR === 'DEV'" translate>settings.updates.updatesDisabled.DEV</span>
-        <span *ngIf="FLAVOUR === 'STEAM' || FLAVOUR === 'STEAM_CN'" translate
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <div class="updates-disabled" *ngIf="FLAVOUR !== 'STANDALONE'">
+          <img src="/assets/img/icon_150x150.png" *ngIf="FLAVOUR === 'DEV'" />
+          <img
+            src="/assets/img/steam_icon.png"
+            *ngIf="FLAVOUR === 'STEAM' || FLAVOUR === 'STEAM_CN'"
+          />
+          <span *ngIf="FLAVOUR === 'DEV'" translate>settings.updates.updatesDisabled.DEV</span>
+          <span *ngIf="FLAVOUR === 'STEAM' || FLAVOUR === 'STEAM_CN'" translate
           >settings.updates.updatesDisabled.STEAM</span
-        >
-      </div>
-      <div class="update-checker" *ngIf="FLAVOUR === 'STANDALONE'">
-        <button
-          class="btn"
-          [class.btn-secondary]="!updateAvailable.manifest"
-          [class.btn-primary]="updateAvailable.manifest"
-          (click)="updateOrCheck()"
-          [disabled]="updateOrCheckInProgress"
-        >
-          <div class="small-spinner" *ngIf="updateOrCheckInProgress" @hshrink></div>
-          <span
-            *ngIf="!updateOrCheckInProgress"
-            [translate]="
+          >
+        </div>
+        <div class="update-checker" *ngIf="FLAVOUR === 'STANDALONE'">
+          <button
+            class="btn"
+            [class.btn-secondary]="!updateAvailable.manifest"
+            [class.btn-primary]="updateAvailable.manifest"
+            (click)="updateOrCheck()"
+            [disabled]="updateOrCheckInProgress"
+          >
+            <div class="small-spinner" *ngIf="updateOrCheckInProgress" @hshrink></div>
+            <span
+              *ngIf="!updateOrCheckInProgress"
+              [translate]="
               updateAvailable.manifest
                 ? 'settings.updates.install'
                 : 'settings.updates.checkForUpdates'
             "
-            [translateParams]="{ version: updateAvailable.manifest?.version || '' }"
-            @hshrink
-          ></span>
-        </button>
-        <p *ngIf="!updateAvailable.checked" translate="settings.updates.notChecked"></p>
-        <p
-          *ngIf="updateAvailable.checked && updateAvailable.manifest"
-          translate="settings.updates.updateAvailable"
-          [translateParams]="{
+              [translateParams]="{ version: updateAvailable.manifest?.version || '' }"
+              @hshrink
+            ></span>
+          </button>
+          <p *ngIf="!updateAvailable.checked" translate="settings.updates.notChecked"></p>
+          <p
+            *ngIf="updateAvailable.checked && updateAvailable.manifest"
+            translate="settings.updates.updateAvailable"
+            [translateParams]="{
             currentVersion: version,
             latestVersion: updateAvailable.manifest.version
           }"
-        ></p>
-        <p
-          *ngIf="updateAvailable.checked && !updateAvailable.manifest"
-          translate="settings.updates.noUpdate"
-          [translateParams]="{ version: version }"
-        ></p>
+          ></p>
+          <p
+            *ngIf="updateAvailable.checked && !updateAvailable.manifest"
+            translate="settings.updates.noUpdate"
+            [translateParams]="{ version: version }"
+          ></p>
+        </div>
+      </div>
+      <div class="setting-category">
+        <h2 translate>settings.updates.changelog</h2>
+        <div class="pane-changelog" [innerHtml]="changelog"></div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h2 translate>settings.updates.changelog</h2>
-      <div class="pane-changelog" [innerHtml]="changelog"></div>
     </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/shutdown-automations-view/shutdown-automations-view.component.html b/src-ui/app/views/dashboard-view/views/shutdown-automations-view/shutdown-automations-view.component.html
index fa4baed8..2149907e 100644
--- a/src-ui/app/views/dashboard-view/views/shutdown-automations-view/shutdown-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/shutdown-automations-view/shutdown-automations-view.component.html
@@ -9,11 +9,13 @@
     </div>
   </div>
   <div class="pane-content">
-    <app-shutdown-automations-settings-tab
-      *ngIf="activeTab === 'SETTINGS'"
-    ></app-shutdown-automations-settings-tab>
-    <app-shutdown-automations-triggers-tab
-      *ngIf="activeTab === 'TRIGGERS'"
-    ></app-shutdown-automations-triggers-tab>
+    <div class="setting-view-container">
+      <app-shutdown-automations-settings-tab
+        *ngIf="activeTab === 'SETTINGS'"
+      ></app-shutdown-automations-settings-tab>
+      <app-shutdown-automations-triggers-tab
+        *ngIf="activeTab === 'TRIGGERS'"
+      ></app-shutdown-automations-triggers-tab>
+    </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/sleep-animations-view/sleep-animations-view.component.html b/src-ui/app/views/dashboard-view/views/sleep-animations-view/sleep-animations-view.component.html
index 1e184709..500ffe3a 100644
--- a/src-ui/app/views/dashboard-view/views/sleep-animations-view/sleep-animations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/sleep-animations-view/sleep-animations-view.component.html
@@ -1,318 +1,320 @@
 <div class="pane">
   <div class="pane-title" translate>sleepAnimations.title</div>
   <div class="pane-content">
-    <p
-      style="white-space: pre-wrap"
-      [innerHtml]="'oscAutomations.sleepingAnimations.description' | translate"
-    ></p>
-    <!-- ENABLE/OSC PANE-->
-    <div class="pane option-pane" @noop>
-      <div class="pane-content no-padding">
-        <div class="title">
-          <label class="switch-toggle">
-            <input
-              type="checkbox"
-              [checked]="config.enabled"
-              (change)="updateConfig({ enabled: !config.enabled })"
-            />
-            <span class="switch-toggle-slider"></span>
-          </label>
-          <h3 translate>oscAutomations.sleepingAnimations.enable</h3>
-          <div class="title-actions">
-            <app-select-box
-              [items]="oscPresetOptions"
-              [selected]="getPresetOptionForId(config.preset!)"
-              (selectedChange)="selectPreset($event!.id!)"
-              style="min-width: 15em"
-            ></app-select-box>
-            <button class="btn collapse-toggle" (click)="oscOptionsExpanded = !oscOptionsExpanded">
-              <i class="material-icons">
-                {{ oscOptionsExpanded ? 'expand_less' : 'expand_more' }}
-              </i>
-            </button>
+    <div class="setting-view-container">
+      <p
+        style="white-space: pre-wrap"
+        [innerHtml]="'oscAutomations.sleepingAnimations.description' | translate"
+      ></p>
+      <!-- ENABLE/OSC PANE-->
+      <div class="pane option-pane" @noop>
+        <div class="pane-content no-padding">
+          <div class="title">
+            <label class="switch-toggle">
+              <input
+                type="checkbox"
+                [checked]="config.enabled"
+                (change)="updateConfig({ enabled: !config.enabled })"
+              />
+              <span class="switch-toggle-slider"></span>
+            </label>
+            <h3 translate>oscAutomations.sleepingAnimations.enable</h3>
+            <div class="title-actions">
+              <app-select-box
+                [items]="oscPresetOptions"
+                [selected]="getPresetOptionForId(config.preset!)"
+                (selectedChange)="selectPreset($event!.id!)"
+                style="min-width: 15em"
+              ></app-select-box>
+              <button class="btn collapse-toggle" (click)="oscOptionsExpanded = !oscOptionsExpanded">
+                <i class="material-icons">
+                  {{ oscOptionsExpanded ? 'expand_less' : 'expand_more' }}
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div class="option-pane-alert" @vshrink *ngIf="presetNotes.length">
-          <div
-            *ngFor="let note of presetNotes"
-            class="alert"
-            [class.success]="note.type === 'SUCCESS'"
-            [class.error]="note.type === 'CAUTION'"
-            [class.warning]="note.type === 'WARNING'"
-            @vshrink
-          >
-            <div class="alert-bg"></div>
-            <div class="alert-icon">
-              <i class="material-icons-round" *ngIf="note.type === 'CAUTION'">error_outline</i>
-              <i class="material-icons-outlined" *ngIf="note.type === 'INFO'">info</i>
-              <i class="material-icons-round" *ngIf="note.type === 'SUCCESS'">
-                check_circle_outline
-              </i>
-              <i class="material-icons-round" *ngIf="note.type === 'WARNING'">warning_amber</i>
+          <div class="option-pane-alert" @vshrink *ngIf="presetNotes.length">
+            <div
+              *ngFor="let note of presetNotes"
+              class="alert"
+              [class.success]="note.type === 'SUCCESS'"
+              [class.error]="note.type === 'CAUTION'"
+              [class.warning]="note.type === 'WARNING'"
+              @vshrink
+            >
+              <div class="alert-bg"></div>
+              <div class="alert-icon">
+                <i class="material-icons-round" *ngIf="note.type === 'CAUTION'">error_outline</i>
+                <i class="material-icons-outlined" *ngIf="note.type === 'INFO'">info</i>
+                <i class="material-icons-round" *ngIf="note.type === 'SUCCESS'">
+                  check_circle_outline
+                </i>
+                <i class="material-icons-round" *ngIf="note.type === 'WARNING'">warning_amber</i>
+              </div>
+              <div class="alert-content">{{ note.text | tsTranslate }}</div>
             </div>
-            <div class="alert-content">{{ note.text | tsTranslate }}</div>
           </div>
-        </div>
-        <div class="option-pane-options" *ngIf="oscOptionsExpanded" @vshrink>
-          <div class="option">
-            <div class="option-label">
-              <span translate>oscAutomations.sleepingAnimations.options.positions.title</span>
-              <span translate>
+          <div class="option-pane-options" *ngIf="oscOptionsExpanded" @vshrink>
+            <div class="option">
+              <div class="option-label">
+                <span translate>oscAutomations.sleepingAnimations.options.positions.title</span>
+                <span translate>
                 oscAutomations.sleepingAnimations.options.positions.description
               </span>
+              </div>
+              <div class="option-actions">
+                <app-osc-script-button
+                  [label]="'oscAutomations.sleepingAnimations.options.positions.SIDE_FRONT'"
+                  [script]="config.oscScripts.SIDE_FRONT"
+                  (scriptChange)="updateOSCScript('SIDE_FRONT', $event)"
+                ></app-osc-script-button>
+                <app-osc-script-button
+                  [label]="'oscAutomations.sleepingAnimations.options.positions.SIDE_BACK'"
+                  [script]="config.oscScripts.SIDE_BACK"
+                  (scriptChange)="updateOSCScript('SIDE_BACK', $event)"
+                ></app-osc-script-button>
+                <app-osc-script-button
+                  [label]="'oscAutomations.sleepingAnimations.options.positions.SIDE_LEFT'"
+                  [script]="config.oscScripts.SIDE_LEFT"
+                  (scriptChange)="updateOSCScript('SIDE_LEFT', $event)"
+                ></app-osc-script-button>
+                <app-osc-script-button
+                  [label]="'oscAutomations.sleepingAnimations.options.positions.SIDE_RIGHT'"
+                  [script]="config.oscScripts.SIDE_RIGHT"
+                  (scriptChange)="updateOSCScript('SIDE_RIGHT', $event)"
+                ></app-osc-script-button>
+              </div>
             </div>
-            <div class="option-actions">
-              <app-osc-script-button
-                [label]="'oscAutomations.sleepingAnimations.options.positions.SIDE_FRONT'"
-                [script]="config.oscScripts.SIDE_FRONT"
-                (scriptChange)="updateOSCScript('SIDE_FRONT', $event)"
-              ></app-osc-script-button>
-              <app-osc-script-button
-                [label]="'oscAutomations.sleepingAnimations.options.positions.SIDE_BACK'"
-                [script]="config.oscScripts.SIDE_BACK"
-                (scriptChange)="updateOSCScript('SIDE_BACK', $event)"
-              ></app-osc-script-button>
-              <app-osc-script-button
-                [label]="'oscAutomations.sleepingAnimations.options.positions.SIDE_LEFT'"
-                [script]="config.oscScripts.SIDE_LEFT"
-                (scriptChange)="updateOSCScript('SIDE_LEFT', $event)"
-              ></app-osc-script-button>
-              <app-osc-script-button
-                [label]="'oscAutomations.sleepingAnimations.options.positions.SIDE_RIGHT'"
-                [script]="config.oscScripts.SIDE_RIGHT"
-                (scriptChange)="updateOSCScript('SIDE_RIGHT', $event)"
-              ></app-osc-script-button>
-            </div>
-          </div>
-          <div class="option">
-            <div class="option-label">
-              <span translate>oscAutomations.sleepingAnimations.options.footLock.title</span>
-              <span translate>
+            <div class="option">
+              <div class="option-label">
+                <span translate>oscAutomations.sleepingAnimations.options.footLock.title</span>
+                <span translate>
                 oscAutomations.sleepingAnimations.options.footLock.description
               </span>
+              </div>
+              <div class="option-actions">
+                <app-osc-script-button
+                  [label]="'oscAutomations.sleepingAnimations.options.footLock.FOOT_LOCK'"
+                  [script]="config.oscScripts.FOOT_LOCK"
+                  (scriptChange)="updateOSCScript('FOOT_LOCK', $event)"
+                ></app-osc-script-button>
+                <app-osc-script-button
+                  [label]="'oscAutomations.sleepingAnimations.options.footLock.FOOT_UNLOCK'"
+                  [script]="config.oscScripts.FOOT_UNLOCK"
+                  (scriptChange)="updateOSCScript('FOOT_UNLOCK', $event)"
+                ></app-osc-script-button>
+              </div>
             </div>
-            <div class="option-actions">
-              <app-osc-script-button
-                [label]="'oscAutomations.sleepingAnimations.options.footLock.FOOT_LOCK'"
-                [script]="config.oscScripts.FOOT_LOCK"
-                (scriptChange)="updateOSCScript('FOOT_LOCK', $event)"
-              ></app-osc-script-button>
-              <app-osc-script-button
-                [label]="'oscAutomations.sleepingAnimations.options.footLock.FOOT_UNLOCK'"
-                [script]="config.oscScripts.FOOT_UNLOCK"
-                (scriptChange)="updateOSCScript('FOOT_UNLOCK', $event)"
-              ></app-osc-script-button>
-            </div>
-          </div>
-          <div class="manual-control-pane" @vshrink *ngIf="showManualControl">
-            <div class="manual-control-pane-title">
-              <h3 translate>oscAutomations.sleepingAnimations.manualControl</h3>
-              <p class="current-pose">
-                {{ 'oscAutomations.sleepingAnimations.currentPose' | translate }}:&nbsp;
-                {{
-                  'oscAutomations.sleepingAnimations.options.positions.' + currentPose | translate
-                }}
-              </p>
-            </div>
-            <div class="manual-control-row">
-              <button
-                *ngFor="let action of sleepingPoses"
-                class="btn btn-secondary"
-                (click)="setSleepingPosition(action)"
-                [disabled]="!config.oscScripts[action]"
-              >
-                <i class="material-icons">play_arrow</i>
-                <span>
+            <div class="manual-control-pane" @vshrink *ngIf="showManualControl">
+              <div class="manual-control-pane-title">
+                <h3 translate>oscAutomations.sleepingAnimations.manualControl</h3>
+                <p class="current-pose">
+                  {{ 'oscAutomations.sleepingAnimations.currentPose' | translate }}:&nbsp;
+                  {{
+                    'oscAutomations.sleepingAnimations.options.positions.' + currentPose | translate
+                  }}
+                </p>
+              </div>
+              <div class="manual-control-row">
+                <button
+                  *ngFor="let action of sleepingPoses"
+                  class="btn btn-secondary"
+                  (click)="setSleepingPosition(action)"
+                  [disabled]="!config.oscScripts[action]"
+                >
+                  <i class="material-icons">play_arrow</i>
+                  <span>
                   {{ 'oscAutomations.sleepingAnimations.options.positions.' + action | translate }}
                 </span>
-              </button>
-            </div>
-            <div class="manual-control-row">
-              <button
-                *ngFor="let action of footLockActions"
-                class="btn btn-secondary"
-                (click)="setFootLock(action === 'FOOT_LOCK')"
-                [disabled]="!config.oscScripts[action]"
-              >
-                <i class="material-icons">play_arrow</i>
-                <span>
+                </button>
+              </div>
+              <div class="manual-control-row">
+                <button
+                  *ngFor="let action of footLockActions"
+                  class="btn btn-secondary"
+                  (click)="setFootLock(action === 'FOOT_LOCK')"
+                  [disabled]="!config.oscScripts[action]"
+                >
+                  <i class="material-icons">play_arrow</i>
+                  <span>
                   {{ 'oscAutomations.sleepingAnimations.options.footLock.' + action | translate }}
                 </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <!-- GENERAL OPTIONS PANE-->
-    <div class="setting-category">
-      <h3 translate>oscAutomations.sleepingAnimations.options.general.title</h3>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+      <!-- GENERAL OPTIONS PANE-->
+      <div class="setting-category">
+        <h3 translate>oscAutomations.sleepingAnimations.options.general.title</h3>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span translate
-              >oscAutomations.sleepingAnimations.options.general.onlySwitchAnimations</span
+            >oscAutomations.sleepingAnimations.options.general.onlySwitchAnimations</span
             >
-            <span translate
+              <span translate
               >oscAutomations.sleepingAnimations.options.general.onlyIfSleepModeEnabled</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.onlyIfSleepModeEnabled"
-                (change)="updateConfig({ onlyIfSleepModeEnabled: !config.onlyIfSleepModeEnabled })"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+              >
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="config.onlyIfSleepModeEnabled"
+                  (change)="updateConfig({ onlyIfSleepModeEnabled: !config.onlyIfSleepModeEnabled })"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h3 translate>oscAutomations.sleepingAnimations.options.general.footLock.title</h3>
-      <p translate>oscAutomations.sleepingAnimations.options.general.footLock.description</p>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+      <div class="setting-category">
+        <h3 translate>oscAutomations.sleepingAnimations.options.general.footLock.title</h3>
+        <p translate>oscAutomations.sleepingAnimations.options.general.footLock.description</p>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span translate
-              >oscAutomations.sleepingAnimations.options.general.lockFeetOnSleepModeEnable</span
+            >oscAutomations.sleepingAnimations.options.general.lockFeetOnSleepModeEnable</span
             >
-            <span></span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.lockFeetOnSleepModeEnable"
-                (change)="
+              <span></span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="config.lockFeetOnSleepModeEnable"
+                  (change)="
                   updateConfig({ lockFeetOnSleepModeEnable: !config.lockFeetOnSleepModeEnable })
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span translate
-              >oscAutomations.sleepingAnimations.options.general.unlockFeetOnSleepModeDisable</span
+            >oscAutomations.sleepingAnimations.options.general.unlockFeetOnSleepModeDisable</span
             >
-            <span></span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.unlockFeetOnSleepModeDisable"
-                (change)="
+              <span></span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="config.unlockFeetOnSleepModeDisable"
+                  (change)="
                   updateConfig({
                     unlockFeetOnSleepModeDisable: !config.unlockFeetOnSleepModeDisable
                   })
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span translate
-              >oscAutomations.sleepingAnimations.options.general.unlockFeetOnAutomationDisable</span
+            >oscAutomations.sleepingAnimations.options.general.unlockFeetOnAutomationDisable</span
             >
-            <span></span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.unlockFeetOnAutomationDisable"
-                (change)="
+              <span></span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="config.unlockFeetOnAutomationDisable"
+                  (change)="
                   updateConfig({
                     unlockFeetOnAutomationDisable: !config.unlockFeetOnAutomationDisable
                   })
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span translate
-              >oscAutomations.sleepingAnimations.options.general.releaseFootLockOnPoseChange</span
+            >oscAutomations.sleepingAnimations.options.general.releaseFootLockOnPoseChange</span
             >
-            <span></span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.releaseFootLockOnPoseChange"
-                (change)="
+              <span></span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="config.releaseFootLockOnPoseChange"
+                  (change)="
                   updateConfig({
                     releaseFootLockOnPoseChange: !config.releaseFootLockOnPoseChange
                   })
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="setting-row-group">
-          <div class="setting-row" [class.disabled]="!config.releaseFootLockOnPoseChange">
-            <div class="setting-row-label" translate>
+          <div class="setting-row-group">
+            <div class="setting-row" [class.disabled]="!config.releaseFootLockOnPoseChange">
+              <div class="setting-row-label" translate>
               <span translate
-                >oscAutomations.sleepingAnimations.options.general.footLockReleaseWindow</span
+              >oscAutomations.sleepingAnimations.options.general.footLockReleaseWindow</span
               >
-              <span></span>
-            </div>
-            <div class="setting-row-action">
-              <app-slider-setting
-                [step]="1"
-                [min]="100"
-                [max]="5000"
-                unit="ms"
-                [value]="config.footLockReleaseWindow"
-                (valueChange)="updateFootLockReleaseWindow($event)"
-                [snapValues]="[600]"
-                [snapDistance]="400"
-              ></app-slider-setting>
+                <span></span>
+              </div>
+              <div class="setting-row-action">
+                <app-slider-setting
+                  [step]="1"
+                  [min]="100"
+                  [max]="5000"
+                  unit="ms"
+                  [value]="config.footLockReleaseWindow"
+                  (valueChange)="updateFootLockReleaseWindow($event)"
+                  [snapValues]="[600]"
+                  [snapDistance]="400"
+                ></app-slider-setting>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h3 translate>oscAutomations.sleepingAnimations.options.general.advanced.title</h3>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+      <div class="setting-category">
+        <h3 translate>oscAutomations.sleepingAnimations.options.general.advanced.title</h3>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span translate
-              >oscAutomations.sleepingAnimations.options.general.advanced.avatarReloadWorkaround.title</span
+            >oscAutomations.sleepingAnimations.options.general.advanced.avatarReloadWorkaround.title</span
             >
-            <span
-              [innerHtml]="
+              <span
+                [innerHtml]="
                 'oscAutomations.sleepingAnimations.options.general.advanced.avatarReloadWorkaround.description'
                   | translate
               "
-            ></span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.enableAvatarReloadOnFBTDisableWorkaround"
-                (change)="
+              ></span>
+            </div>
+            <div class="setting-row-action">
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="config.enableAvatarReloadOnFBTDisableWorkaround"
+                  (change)="
                   updateConfig({
                     enableAvatarReloadOnFBTDisableWorkaround:
                       !config.enableAvatarReloadOnFBTDisableWorkaround
                   })
                 "
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src-ui/app/views/dashboard-view/views/sleep-detection-view/sleep-detection-view.component.html b/src-ui/app/views/dashboard-view/views/sleep-detection-view/sleep-detection-view.component.html
index c4c1163e..4e9654e8 100644
--- a/src-ui/app/views/dashboard-view/views/sleep-detection-view/sleep-detection-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/sleep-detection-view/sleep-detection-view.component.html
@@ -12,14 +12,16 @@
     </div>
   </div>
   <div class="pane-content">
-    <app-sleep-detection-detection-tab
-      *ngIf="activeTab === 'DETECTION'"
-    ></app-sleep-detection-detection-tab>
-    <app-sleep-detection-sleep-enable-tab
-      *ngIf="activeTab === 'ENABLE'"
-    ></app-sleep-detection-sleep-enable-tab>
-    <app-sleep-detection-sleep-disable-tab
-      *ngIf="activeTab === 'DISABLE'"
-    ></app-sleep-detection-sleep-disable-tab>
+    <div class="setting-view-container">
+      <app-sleep-detection-detection-tab
+        *ngIf="activeTab === 'DETECTION'"
+      ></app-sleep-detection-detection-tab>
+      <app-sleep-detection-sleep-enable-tab
+        *ngIf="activeTab === 'ENABLE'"
+      ></app-sleep-detection-sleep-enable-tab>
+      <app-sleep-detection-sleep-disable-tab
+        *ngIf="activeTab === 'DISABLE'"
+      ></app-sleep-detection-sleep-disable-tab>
+    </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-detection-tab/sleep-detection-detection-tab.component.html b/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-detection-tab/sleep-detection-detection-tab.component.html
index 60e9e410..8790d3ca 100644
--- a/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-detection-tab/sleep-detection-detection-tab.component.html
+++ b/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-detection-tab/sleep-detection-detection-tab.component.html
@@ -34,7 +34,7 @@
         <div class="setting-row-action">
           <button class="btn btn-secondary" (click)="calibrate()">
             <span translate
-              >sleep-detection.sleepDetection.automation.calibrationPending.calibrate</span
+            >sleep-detection.sleepDetection.automation.calibrationPending.calibrate</span
             >
           </button>
         </div>
@@ -148,7 +148,7 @@ <h2 translate>sleep-detection.sleepDetection.advanced.title</h2>
       <div class="setting-row-label" translate>
         <span translate>sleep-detection.modals.enableForSleepDetector.detectionWindow.title</span>
         <span translate
-          >sleep-detection.modals.enableForSleepDetector.detectionWindow.description</span
+        >sleep-detection.modals.enableForSleepDetector.detectionWindow.description</span
         >
       </div>
       <div class="setting-row-action">
@@ -168,10 +168,10 @@ <h2 translate>sleep-detection.sleepDetection.advanced.title</h2>
     <div class="setting-row">
       <div class="setting-row-label" translate>
         <span translate
-          >sleep-detection.modals.enableForSleepDetector.considerControllerPresence.title</span
+        >sleep-detection.modals.enableForSleepDetector.considerControllerPresence.title</span
         >
         <span translate
-          >sleep-detection.modals.enableForSleepDetector.considerControllerPresence.description</span
+        >sleep-detection.modals.enableForSleepDetector.considerControllerPresence.description</span
         >
       </div>
       <div class="setting-row-action">
@@ -191,10 +191,10 @@ <h2 translate>sleep-detection.sleepDetection.advanced.title</h2>
     <div class="setting-row">
       <div class="setting-row-label" translate>
         <span translate
-          >sleep-detection.modals.enableForSleepDetector.considerSleepingPose.title</span
+        >sleep-detection.modals.enableForSleepDetector.considerSleepingPose.title</span
         >
         <span translate
-          >sleep-detection.modals.enableForSleepDetector.considerSleepingPose.description</span
+        >sleep-detection.modals.enableForSleepDetector.considerSleepingPose.description</span
         >
       </div>
       <div class="setting-row-action">
diff --git a/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-disable-tab/sleep-detection-sleep-disable-tab.component.html b/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-disable-tab/sleep-detection-sleep-disable-tab.component.html
index 704fc55c..42014abd 100644
--- a/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-disable-tab/sleep-detection-sleep-disable-tab.component.html
+++ b/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-disable-tab/sleep-detection-sleep-disable-tab.component.html
@@ -53,11 +53,11 @@
       <div class="setting-row-label" translate>
         <span translate>sleep-detection.disableAutomations.onDevicePowerOn</span>
         <span>{{
-          deviceClassesToString(
-            automationConfigs.SLEEP_MODE_DISABLE_ON_DEVICE_POWER_ON.triggerClasses,
-            'sleep-detection.modals.disableOnDevicePowerOn.'
-          )
-        }}</span>
+            deviceClassesToString(
+              automationConfigs.SLEEP_MODE_DISABLE_ON_DEVICE_POWER_ON.triggerClasses,
+              'sleep-detection.modals.disableOnDevicePowerOn.'
+            )
+          }}</span>
       </div>
       <div class="setting-row-action">
         <button
diff --git a/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-enable-tab/sleep-detection-sleep-enable-tab.component.html b/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-enable-tab/sleep-detection-sleep-enable-tab.component.html
index 961a6788..2d364167 100644
--- a/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-enable-tab/sleep-detection-sleep-enable-tab.component.html
+++ b/src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-enable-tab/sleep-detection-sleep-enable-tab.component.html
@@ -35,11 +35,11 @@
           "
         ></span>
         <span>{{
-          deviceClassesToString(
-            automationConfigs.SLEEP_MODE_ENABLE_AT_BATTERY_PERCENTAGE.triggerClasses,
-            'sleep-detection.modals.enableAtBatteryPercentage.'
-          )
-        }}</span>
+            deviceClassesToString(
+              automationConfigs.SLEEP_MODE_ENABLE_AT_BATTERY_PERCENTAGE.triggerClasses,
+              'sleep-detection.modals.enableAtBatteryPercentage.'
+            )
+          }}</span>
       </div>
       <div class="setting-row-action">
         <button
@@ -88,11 +88,11 @@
           <span>
             <span><i class="material-icons">warning</i></span>
             <span translate
-              >sleep-detection.enableAutomations.onControllersPoweredOff.batteryLevelAutomationConflict.title</span
+            >sleep-detection.enableAutomations.onControllersPoweredOff.batteryLevelAutomationConflict.title</span
             >
           </span>
           <span translate
-            >sleep-detection.enableAutomations.onControllersPoweredOff.batteryLevelAutomationConflict.description</span
+          >sleep-detection.enableAutomations.onControllersPoweredOff.batteryLevelAutomationConflict.description</span
           >
         </div>
         <div class="setting-row-action">
diff --git a/src-ui/app/views/dashboard-view/views/status-automations-view/status-automations-view.component.html b/src-ui/app/views/dashboard-view/views/status-automations-view/status-automations-view.component.html
index b6809929..14d401ee 100644
--- a/src-ui/app/views/dashboard-view/views/status-automations-view/status-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/status-automations-view/status-automations-view.component.html
@@ -13,11 +13,13 @@
     </div>
   </div>
   <div class="pane-content">
-    <app-status-automations-general-tab
-      *ngIf="activeTab === 'GENERAL'"
-    ></app-status-automations-general-tab>
-    <app-status-automations-player-limit-tab
-      *ngIf="activeTab === 'PLAYER_LIMIT'"
-    ></app-status-automations-player-limit-tab>
+    <div class="setting-view-container">
+      <app-status-automations-general-tab
+        *ngIf="activeTab === 'GENERAL'"
+      ></app-status-automations-general-tab>
+      <app-status-automations-player-limit-tab
+        *ngIf="activeTab === 'PLAYER_LIMIT'"
+      ></app-status-automations-player-limit-tab>
+    </div>
   </div>
 </div>
diff --git a/src-ui/app/views/dashboard-view/views/system-mic-mute-automations-view/system-mic-mute-automations-view.component.html b/src-ui/app/views/dashboard-view/views/system-mic-mute-automations-view/system-mic-mute-automations-view.component.html
index 6cdab076..ac8a6e51 100644
--- a/src-ui/app/views/dashboard-view/views/system-mic-mute-automations-view/system-mic-mute-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/system-mic-mute-automations-view/system-mic-mute-automations-view.component.html
@@ -1,377 +1,379 @@
 <div class="pane">
   <div class="pane-title" translate>systemMicMuteAutomations.title</div>
   <div class="pane-content">
-    <p translate>systemMicMuteAutomations.description</p>
-    <div class="setting-category">
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>systemMicMuteAutomations.audioDevice.title</span>
-            <span translate>systemMicMuteAutomations.audioDevice.description</span>
-          </div>
-          <div class="setting-row-action">
-            <div class="audio-device-row">
-              <ng-container *ngVar="systemMicMuteAutomationService.isMicMuted | async as muted">
-                <button
-                  class="btn btn-mute-toggle"
-                  *ngIf="muted !== null"
-                  @fade
-                  (click)="systemMicMuteAutomationService.toggleMute()"
-                >
-                  <i class="material-icons muted" *ngIf="muted === true">mic_off</i>
-                  <i class="material-icons unmuted" *ngIf="muted === false">mic</i>
-                </button>
-              </ng-container>
-              <app-select-box
-                class="device-dropdown"
-                [items]="audioDeviceOptions"
-                [selected]="audioDeviceOption"
-                (selectedChange)="onChangeAudioDevice($event)"
-              ></app-select-box>
+    <div class="setting-view-container">
+      <p translate>systemMicMuteAutomations.description</p>
+      <div class="setting-category">
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>systemMicMuteAutomations.audioDevice.title</span>
+              <span translate>systemMicMuteAutomations.audioDevice.description</span>
+            </div>
+            <div class="setting-row-action">
+              <div class="audio-device-row">
+                <ng-container *ngVar="systemMicMuteAutomationService.isMicMuted | async as muted">
+                  <button
+                    class="btn btn-mute-toggle"
+                    *ngIf="muted !== null"
+                    @fade
+                    (click)="systemMicMuteAutomationService.toggleMute()"
+                  >
+                    <i class="material-icons muted" *ngIf="muted === true">mic_off</i>
+                    <i class="material-icons unmuted" *ngIf="muted === false">mic</i>
+                  </button>
+                </ng-container>
+                <app-select-box
+                  class="device-dropdown"
+                  [items]="audioDeviceOptions"
+                  [selected]="audioDeviceOption"
+                  (selectedChange)="onChangeAudioDevice($event)"
+                ></app-select-box>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h3 translate>systemMicMuteAutomations.stateAutomations.title</h3>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>systemMicMuteAutomations.stateAutomations.onSleepModeEnable.title</span>
-            <span translate
+      <div class="setting-category">
+        <h3 translate>systemMicMuteAutomations.stateAutomations.title</h3>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>systemMicMuteAutomations.stateAutomations.onSleepModeEnable.title</span>
+              <span translate
               >systemMicMuteAutomations.stateAutomations.onSleepModeEnable.description</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="action-dropdown"
-              [items]="muteActionOptions"
-              [selected]="onSleepEnableMuteOption"
-              (selectedChange)="onChangeMuteOption('ON_SLEEP_ENABLE', $event)"
-            ></app-select-box>
+              >
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="action-dropdown"
+                [items]="muteActionOptions"
+                [selected]="onSleepEnableMuteOption"
+                (selectedChange)="onChangeMuteOption('ON_SLEEP_ENABLE', $event)"
+              ></app-select-box>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span translate
-              >systemMicMuteAutomations.stateAutomations.onSleepModeDisable.title</span
+            >systemMicMuteAutomations.stateAutomations.onSleepModeDisable.title</span
             >
-            <span translate
+              <span translate
               >systemMicMuteAutomations.stateAutomations.onSleepModeDisable.description</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="action-dropdown"
-              [items]="muteActionOptions"
-              [selected]="onSleepDisableMuteOption"
-              (selectedChange)="onChangeMuteOption('ON_SLEEP_DISABLE', $event)"
-            ></app-select-box>
+              >
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="action-dropdown"
+                [items]="muteActionOptions"
+                [selected]="onSleepDisableMuteOption"
+                (selectedChange)="onChangeMuteOption('ON_SLEEP_DISABLE', $event)"
+              ></app-select-box>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
             <span translate
-              >systemMicMuteAutomations.stateAutomations.onSleepPreparation.title</span
+            >systemMicMuteAutomations.stateAutomations.onSleepPreparation.title</span
             >
-            <span translate
+              <span translate
               >systemMicMuteAutomations.stateAutomations.onSleepPreparation.description</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="action-dropdown"
-              [items]="muteActionOptions"
-              [selected]="onSleepPreparationMuteOption"
-              (selectedChange)="onChangeMuteOption('ON_SLEEP_PREPARATION', $event)"
-            ></app-select-box>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="setting-category">
-      <h3 translate>systemMicMuteAutomations.vrchat.title</h3>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>systemMicMuteAutomations.vrchat.worldJoinBehaviour.title</span>
-            <span translate>systemMicMuteAutomations.vrchat.worldJoinBehaviour.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="action-dropdown"
-              [items]="worldJoinBehaviourOptions"
-              [selected]="worldJoinBehaviourOption"
-              (selectedChange)="onChangeWorldJoinBehaviourOption($event)"
-            ></app-select-box>
+              >
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="action-dropdown"
+                [items]="muteActionOptions"
+                [selected]="onSleepPreparationMuteOption"
+                (selectedChange)="onChangeMuteOption('ON_SLEEP_PREPARATION', $event)"
+              ></app-select-box>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h3 translate>systemMicMuteAutomations.overlayIndicator.title</h3>
-      <p translate>systemMicMuteAutomations.overlayIndicator.description</p>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>systemMicMuteAutomations.overlayIndicator.enabled.title</span>
-            <span translate>systemMicMuteAutomations.overlayIndicator.enabled.description</span>
-          </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.overlayMuteIndicator"
-                (change)="onChangeOverlayMuteIndicator()"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
-          </div>
-        </div>
-        <div class="setting-row-group" @vshrink *ngIf="config.overlayMuteIndicator">
-          <div class="setting-row" [class.disabled]="!config.overlayMuteIndicator">
+      <div class="setting-category">
+        <h3 translate>systemMicMuteAutomations.vrchat.title</h3>
+        <div class="settings">
+          <div class="setting-row">
             <div class="setting-row-label" translate>
-              <span translate>systemMicMuteAutomations.overlayIndicator.opacity.title</span>
-              <span translate>systemMicMuteAutomations.overlayIndicator.opacity.description</span>
+              <span translate>systemMicMuteAutomations.vrchat.worldJoinBehaviour.title</span>
+              <span translate>systemMicMuteAutomations.vrchat.worldJoinBehaviour.description</span>
             </div>
             <div class="setting-row-action">
-              <app-slider-setting
-                [unit]="'%'"
-                [min]="5"
-                [max]="100"
-                [value]="config.overlayMuteIndicatorOpacity"
-                (valueChange)="onChangeOverlayMuteIndicatorOpacity($event)"
-              >
-              </app-slider-setting>
+              <app-select-box
+                type="SMALL"
+                class="action-dropdown"
+                [items]="worldJoinBehaviourOptions"
+                [selected]="worldJoinBehaviourOption"
+                (selectedChange)="onChangeWorldJoinBehaviourOption($event)"
+              ></app-select-box>
             </div>
           </div>
-          <div class="setting-row" [class.disabled]="!config.overlayMuteIndicator">
+        </div>
+      </div>
+      <div class="setting-category">
+        <h3 translate>systemMicMuteAutomations.overlayIndicator.title</h3>
+        <p translate>systemMicMuteAutomations.overlayIndicator.description</p>
+        <div class="settings">
+          <div class="setting-row">
             <div class="setting-row-label" translate>
-              <span translate>systemMicMuteAutomations.overlayIndicator.fade.title</span>
-              <span translate>systemMicMuteAutomations.overlayIndicator.fade.description</span>
+              <span translate>systemMicMuteAutomations.overlayIndicator.enabled.title</span>
+              <span translate>systemMicMuteAutomations.overlayIndicator.enabled.description</span>
             </div>
             <div class="setting-row-action">
               <label class="switch-toggle">
                 <input
                   type="checkbox"
-                  [checked]="config.overlayMuteIndicatorFade"
-                  (change)="onChangeOverlayMuteIndicatorFade()"
+                  [checked]="config.overlayMuteIndicator"
+                  (change)="onChangeOverlayMuteIndicator()"
                 />
                 <span class="switch-toggle-slider"></span>
               </label>
             </div>
           </div>
-          <div class="setting-row" [class.disabled]="!config.overlayMuteIndicator">
-            <div class="setting-row-label" translate>
+          <div class="setting-row-group" @vshrink *ngIf="config.overlayMuteIndicator">
+            <div class="setting-row" [class.disabled]="!config.overlayMuteIndicator">
+              <div class="setting-row-label" translate>
+                <span translate>systemMicMuteAutomations.overlayIndicator.opacity.title</span>
+                <span translate>systemMicMuteAutomations.overlayIndicator.opacity.description</span>
+              </div>
+              <div class="setting-row-action">
+                <app-slider-setting
+                  [unit]="'%'"
+                  [min]="5"
+                  [max]="100"
+                  [value]="config.overlayMuteIndicatorOpacity"
+                  (valueChange)="onChangeOverlayMuteIndicatorOpacity($event)"
+                >
+                </app-slider-setting>
+              </div>
+            </div>
+            <div class="setting-row" [class.disabled]="!config.overlayMuteIndicator">
+              <div class="setting-row-label" translate>
+                <span translate>systemMicMuteAutomations.overlayIndicator.fade.title</span>
+                <span translate>systemMicMuteAutomations.overlayIndicator.fade.description</span>
+              </div>
+              <div class="setting-row-action">
+                <label class="switch-toggle">
+                  <input
+                    type="checkbox"
+                    [checked]="config.overlayMuteIndicatorFade"
+                    (change)="onChangeOverlayMuteIndicatorFade()"
+                  />
+                  <span class="switch-toggle-slider"></span>
+                </label>
+              </div>
+            </div>
+            <div class="setting-row" [class.disabled]="!config.overlayMuteIndicator">
+              <div class="setting-row-label" translate>
               <span translate
-                >systemMicMuteAutomations.overlayIndicator.voiceActivityMode.title</span
+              >systemMicMuteAutomations.overlayIndicator.voiceActivityMode.title</span
               >
-              <span translate
+                <span translate
                 >systemMicMuteAutomations.overlayIndicator.voiceActivityMode.description</span
-              >
-            </div>
-            <div class="setting-row-action">
-              <app-select-box
-                type="SMALL"
-                class="action-dropdown"
-                [items]="voiceActivationModeOptions"
-                [selected]="voiceActivationModeOption"
-                (selectedChange)="onChangeVoiceActivationMode($event)"
-              ></app-select-box>
+                >
+              </div>
+              <div class="setting-row-action">
+                <app-select-box
+                  type="SMALL"
+                  class="action-dropdown"
+                  [items]="voiceActivationModeOptions"
+                  [selected]="voiceActivationModeOption"
+                  (selectedChange)="onChangeVoiceActivationMode($event)"
+                ></app-select-box>
+              </div>
             </div>
-          </div>
-          <div
-            class="setting-row"
-            [class.disabled]="!config.overlayMuteIndicator"
-            @vshrink
-            *ngIf="config.voiceActivationMode === 'HARDWARE'"
-          >
-            <div class="setting-row-label" translate>
+            <div
+              class="setting-row"
+              [class.disabled]="!config.overlayMuteIndicator"
+              @vshrink
+              *ngIf="config.voiceActivationMode === 'HARDWARE'"
+            >
+              <div class="setting-row-label" translate>
               <span translate
-                >systemMicMuteAutomations.overlayIndicator.hardwareVoiceActivityThreshold.title</span
+              >systemMicMuteAutomations.overlayIndicator.hardwareVoiceActivityThreshold.title</span
               >
-              <span translate
+                <span translate
                 >systemMicMuteAutomations.overlayIndicator.hardwareVoiceActivityThreshold.description</span
-              >
-            </div>
-            <div class="setting-row-action">
-              <app-slider-setting
-                [unit]="'%'"
-                [style.--overlay-width]="'32em'"
-                [style]="'AUDIO_LEVEL'"
-                [value]="config.hardwareVoiceActivationThreshold"
-                (valueChange)="onChangeHardwareVoiceActivationThreshold($event)"
-                #voiceActivationThresholdSlider
-              >
-              </app-slider-setting>
+                >
+              </div>
+              <div class="setting-row-action">
+                <app-slider-setting
+                  [unit]="'%'"
+                  [style.--overlay-width]="'32em'"
+                  [style]="'AUDIO_LEVEL'"
+                  [value]="config.hardwareVoiceActivationThreshold"
+                  (valueChange)="onChangeHardwareVoiceActivationThreshold($event)"
+                  #voiceActivationThresholdSlider
+                >
+                </app-slider-setting>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="setting-category">
-      <h3 translate>systemMicMuteAutomations.controllerBinding.title</h3>
-      <p translate>systemMicMuteAutomations.controllerBinding.description</p>
-      <div class="alert">
-        <div class="alert-bg"></div>
-        <div class="alert-icon">
-          <i class="material-icons">warning</i>
-        </div>
-        <div class="alert-content flex-row">
-          <div translate>systemMicMuteAutomations.controllerBinding.conflictWarning</div>
-        </div>
-      </div>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>systemMicMuteAutomations.controllerBinding.enabled.title</span>
-            <span translate>systemMicMuteAutomations.controllerBinding.enabled.description</span>
+      <div class="setting-category">
+        <h3 translate>systemMicMuteAutomations.controllerBinding.title</h3>
+        <p translate>systemMicMuteAutomations.controllerBinding.description</p>
+        <div class="alert">
+          <div class="alert-bg"></div>
+          <div class="alert-icon">
+            <i class="material-icons">warning</i>
           </div>
-          <div class="setting-row-action">
-            <label class="switch-toggle">
-              <input
-                type="checkbox"
-                [checked]="config.controllerBinding"
-                (change)="onChangeControllerBinding()"
-              />
-              <span class="switch-toggle-slider"></span>
-            </label>
+          <div class="alert-content flex-row">
+            <div translate>systemMicMuteAutomations.controllerBinding.conflictWarning</div>
           </div>
         </div>
-        <div class="setting-row-group" @vshrink *ngIf="config.controllerBinding">
-          <div class="setting-row" [class.disabled]="!config.controllerBinding">
+        <div class="settings">
+          <div class="setting-row">
             <div class="setting-row-label" translate>
-              <span translate>systemMicMuteAutomations.controllerBinding.binding.title</span>
-              <span translate>systemMicMuteAutomations.controllerBinding.binding.description</span>
+              <span translate>systemMicMuteAutomations.controllerBinding.enabled.title</span>
+              <span translate>systemMicMuteAutomations.controllerBinding.enabled.description</span>
             </div>
             <div class="setting-row-action">
-              <app-controller-binding
-                [actionKey]="OVRInputEventAction.MuteMicrophone"
-              ></app-controller-binding>
+              <label class="switch-toggle">
+                <input
+                  type="checkbox"
+                  [checked]="config.controllerBinding"
+                  (change)="onChangeControllerBinding()"
+                />
+                <span class="switch-toggle-slider"></span>
+              </label>
             </div>
           </div>
-          <div class="setting-row" [class.disabled]="!config.controllerBinding">
-            <div class="setting-row-label" translate>
-              <span translate>systemMicMuteAutomations.controllerBinding.mode.title</span>
-              <span translate>systemMicMuteAutomations.controllerBinding.mode.description</span>
+          <div class="setting-row-group" @vshrink *ngIf="config.controllerBinding">
+            <div class="setting-row" [class.disabled]="!config.controllerBinding">
+              <div class="setting-row-label" translate>
+                <span translate>systemMicMuteAutomations.controllerBinding.binding.title</span>
+                <span translate>systemMicMuteAutomations.controllerBinding.binding.description</span>
+              </div>
+              <div class="setting-row-action">
+                <app-controller-binding
+                  [actionKey]="OVRInputEventAction.MuteMicrophone"
+                ></app-controller-binding>
+              </div>
             </div>
-            <div class="setting-row-action">
-              <app-select-box
-                type="SMALL"
-                class="action-dropdown"
-                [items]="controlButtonBehaviorOptions"
-                [selected]="controlButtonBehaviorOption"
-                (selectedChange)="onChangeControlButtonBehaviorOption($event)"
-              ></app-select-box>
+            <div class="setting-row" [class.disabled]="!config.controllerBinding">
+              <div class="setting-row-label" translate>
+                <span translate>systemMicMuteAutomations.controllerBinding.mode.title</span>
+                <span translate>systemMicMuteAutomations.controllerBinding.mode.description</span>
+              </div>
+              <div class="setting-row-action">
+                <app-select-box
+                  type="SMALL"
+                  class="action-dropdown"
+                  [items]="controlButtonBehaviorOptions"
+                  [selected]="controlButtonBehaviorOption"
+                  (selectedChange)="onChangeControlButtonBehaviorOption($event)"
+                ></app-select-box>
+              </div>
             </div>
-          </div>
-          <div class="setting-row" [class.disabled]="!config.controllerBinding">
-            <div class="setting-row-label" translate>
-              <span translate>systemMicMuteAutomations.controllerBinding.currentMode.title</span>
-              <span translate
+            <div class="setting-row" [class.disabled]="!config.controllerBinding">
+              <div class="setting-row-label" translate>
+                <span translate>systemMicMuteAutomations.controllerBinding.currentMode.title</span>
+                <span translate
                 >systemMicMuteAutomations.controllerBinding.currentMode.description</span
-              >
-            </div>
-            <div class="setting-row-action">
+                >
+              </div>
+              <div class="setting-row-action">
               <span class="current-controller-behavior"
-                ><b>{{
+              ><b>{{
                   'systemMicMuteAutomations.controllerBinding.currentMode.' +
-                    (systemMicMuteAutomationService.effectiveControllerBehaviour | async)
+                  (systemMicMuteAutomationService.effectiveControllerBehaviour | async)
                     | translate
                 }}</b></span
               >
+              </div>
             </div>
-          </div>
-          <div class="setting-row" [class.disabled]="!config.controllerBinding">
-            <div class="setting-row-label" translate>
-              <span translate>systemMicMuteAutomations.controllerBinding.volume.title</span>
-              <span translate>systemMicMuteAutomations.controllerBinding.volume.description</span>
-            </div>
-            <div class="setting-row-action">
-              <app-slider-setting
-                [unit]="'%'"
-                [value]="config.muteSoundVolume"
-                [max]="200"
-                [snapValues]="[50, 100, 150]"
-                (valueChange)="onChangeMuteSoundVolume($event)"
-              >
-              </app-slider-setting>
+            <div class="setting-row" [class.disabled]="!config.controllerBinding">
+              <div class="setting-row-label" translate>
+                <span translate>systemMicMuteAutomations.controllerBinding.volume.title</span>
+                <span translate>systemMicMuteAutomations.controllerBinding.volume.description</span>
+              </div>
+              <div class="setting-row-action">
+                <app-slider-setting
+                  [unit]="'%'"
+                  [value]="config.muteSoundVolume"
+                  [max]="200"
+                  [snapValues]="[50, 100, 150]"
+                  (valueChange)="onChangeMuteSoundVolume($event)"
+                >
+                </app-slider-setting>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <h3 @fade *ngIf="config.controllerBinding" translate
+        <h3 @fade *ngIf="config.controllerBinding" translate
         >systemMicMuteAutomations.controllerBinding.automations</h3
-      >
-      <div class="settings" @fade *ngIf="config.controllerBinding">
-        <div class="setting-row" [class.disabled]="!config.controllerBinding">
-          <div class="setting-row-label" translate>
+        >
+        <div class="settings" @fade *ngIf="config.controllerBinding">
+          <div class="setting-row" [class.disabled]="!config.controllerBinding">
+            <div class="setting-row-label" translate>
             <span translate
-              >systemMicMuteAutomations.controllerBinding.onSleepModeEnable.title</span
+            >systemMicMuteAutomations.controllerBinding.onSleepModeEnable.title</span
             >
-            <span translate
+              <span translate
               >systemMicMuteAutomations.controllerBinding.onSleepModeEnable.description</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="button-mode-dropdown"
-              [items]="controlButtonBehaviorAutomationOptions"
-              [selected]="onSleepEnableControlButtonBehaviorOption"
-              (selectedChange)="
+              >
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="button-mode-dropdown"
+                [items]="controlButtonBehaviorAutomationOptions"
+                [selected]="onSleepEnableControlButtonBehaviorOption"
+                (selectedChange)="
                 onChangeControlButtonBehaviorAutomationOption('ON_SLEEP_ENABLE', $event)
               "
-            ></app-select-box>
+              ></app-select-box>
+            </div>
           </div>
-        </div>
-        <div class="setting-row" [class.disabled]="!config.controllerBinding">
-          <div class="setting-row-label" translate>
+          <div class="setting-row" [class.disabled]="!config.controllerBinding">
+            <div class="setting-row-label" translate>
             <span translate
-              >systemMicMuteAutomations.controllerBinding.onSleepModeDisable.title</span
+            >systemMicMuteAutomations.controllerBinding.onSleepModeDisable.title</span
             >
-            <span translate
+              <span translate
               >systemMicMuteAutomations.controllerBinding.onSleepModeDisable.description</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="button-mode-dropdown"
-              [expandUp]="true"
-              [items]="controlButtonBehaviorAutomationOptions"
-              [selected]="onSleepDisableControlButtonBehaviorOption"
-              (selectedChange)="
+              >
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="button-mode-dropdown"
+                [expandUp]="true"
+                [items]="controlButtonBehaviorAutomationOptions"
+                [selected]="onSleepDisableControlButtonBehaviorOption"
+                (selectedChange)="
                 onChangeControlButtonBehaviorAutomationOption('ON_SLEEP_DISABLE', $event)
               "
-            ></app-select-box>
+              ></app-select-box>
+            </div>
           </div>
-        </div>
-        <div class="setting-row" [class.disabled]="!config.controllerBinding">
-          <div class="setting-row-label" translate>
+          <div class="setting-row" [class.disabled]="!config.controllerBinding">
+            <div class="setting-row-label" translate>
             <span translate
-              >systemMicMuteAutomations.controllerBinding.onSleepPreparation.title</span
+            >systemMicMuteAutomations.controllerBinding.onSleepPreparation.title</span
             >
-            <span translate
+              <span translate
               >systemMicMuteAutomations.controllerBinding.onSleepPreparation.description</span
-            >
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="button-mode-dropdown"
-              [expandUp]="true"
-              [items]="controlButtonBehaviorAutomationOptions"
-              [selected]="onSleepPreparationControlButtonBehaviorOption"
-              (selectedChange)="
+              >
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="button-mode-dropdown"
+                [expandUp]="true"
+                [items]="controlButtonBehaviorAutomationOptions"
+                [selected]="onSleepPreparationControlButtonBehaviorOption"
+                (selectedChange)="
                 onChangeControlButtonBehaviorAutomationOption('ON_SLEEP_PREPARATION', $event)
               "
-            ></app-select-box>
+              ></app-select-box>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src-ui/app/views/dashboard-view/views/vrchat-avatar-automations-view/vrchat-avatar-automations-view.component.html b/src-ui/app/views/dashboard-view/views/vrchat-avatar-automations-view/vrchat-avatar-automations-view.component.html
index 37648600..4acb054e 100644
--- a/src-ui/app/views/dashboard-view/views/vrchat-avatar-automations-view/vrchat-avatar-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/vrchat-avatar-automations-view/vrchat-avatar-automations-view.component.html
@@ -1,53 +1,55 @@
 <div class="pane">
   <div class="pane-title" translate>vrchatAvatarAutomations.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <p translate>vrchatAvatarAutomations.description</p>
-      <div class="alert warning" *ngIf="!loggedIn" @vshrink>
-        <div class="alert-bg"></div>
-        <div class="alert-icon">
-          <i class="material-icons"> warning </i>
-        </div>
-        <div class="alert-content">
-          <span>{{ 'shared.misc.vrcLoginRequired' | translate }}</span>
-          <button class="btn btn-secondary" (click)="login()" translate>shared.modals.login</button>
-        </div>
-      </div>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>vrchatAvatarAutomations.onSleepEnable.title</span>
-            <span translate>vrchatAvatarAutomations.onSleepEnable.description</span>
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <p translate>vrchatAvatarAutomations.description</p>
+        <div class="alert warning" *ngIf="!loggedIn" @vshrink>
+          <div class="alert-bg"></div>
+          <div class="alert-icon">
+            <i class="material-icons"> warning </i>
           </div>
-          <div class="setting-row-action">
-            <app-vrc-avatar-select-button
-              [avatar]="this.config.onSleepEnable"
-              (avatarChange)="updateOnSleepEnable($event)"
-            ></app-vrc-avatar-select-button>
+          <div class="alert-content">
+            <span>{{ 'shared.misc.vrcLoginRequired' | translate }}</span>
+            <button class="btn btn-secondary" (click)="login()" translate>shared.modals.login</button>
           </div>
         </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>vrchatAvatarAutomations.onSleepDisable.title</span>
-            <span translate>vrchatAvatarAutomations.onSleepDisable.description</span>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>vrchatAvatarAutomations.onSleepEnable.title</span>
+              <span translate>vrchatAvatarAutomations.onSleepEnable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-vrc-avatar-select-button
+                [avatar]="this.config.onSleepEnable"
+                (avatarChange)="updateOnSleepEnable($event)"
+              ></app-vrc-avatar-select-button>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-vrc-avatar-select-button
-              [avatar]="this.config.onSleepDisable"
-              (avatarChange)="updateOnSleepDisable($event)"
-            ></app-vrc-avatar-select-button>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>vrchatAvatarAutomations.onSleepPreparation.title</span>
-            <span translate>vrchatAvatarAutomations.onSleepPreparation.description</span>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>vrchatAvatarAutomations.onSleepDisable.title</span>
+              <span translate>vrchatAvatarAutomations.onSleepDisable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-vrc-avatar-select-button
+                [avatar]="this.config.onSleepDisable"
+                (avatarChange)="updateOnSleepDisable($event)"
+              ></app-vrc-avatar-select-button>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-vrc-avatar-select-button
-              [avatar]="this.config.onSleepPreparation"
-              (avatarChange)="updateOnSleepPreparation($event)"
-            ></app-vrc-avatar-select-button>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>vrchatAvatarAutomations.onSleepPreparation.title</span>
+              <span translate>vrchatAvatarAutomations.onSleepPreparation.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-vrc-avatar-select-button
+                [avatar]="this.config.onSleepPreparation"
+                (avatarChange)="updateOnSleepPreparation($event)"
+              ></app-vrc-avatar-select-button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src-ui/app/views/dashboard-view/views/vrchat-mic-mute-automations-view/vrchat-mic-mute-automations-view.component.html b/src-ui/app/views/dashboard-view/views/vrchat-mic-mute-automations-view/vrchat-mic-mute-automations-view.component.html
index c23ee035..5376531e 100644
--- a/src-ui/app/views/dashboard-view/views/vrchat-mic-mute-automations-view/vrchat-mic-mute-automations-view.component.html
+++ b/src-ui/app/views/dashboard-view/views/vrchat-mic-mute-automations-view/vrchat-mic-mute-automations-view.component.html
@@ -1,98 +1,100 @@
 <div class="pane">
   <div class="pane-title" translate>vrchatMicMuteAutomations.title</div>
   <div class="pane-content">
-    <div class="setting-category">
-      <p translate>vrchatMicMuteAutomations.description</p>
-      <h3 translate>vrchatMicMuteAutomations.config.title</h3>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>vrchatMicMuteAutomations.status.title</span>
-            <span translate>vrchatMicMuteAutomations.status.description</span>
-          </div>
-          <div class="setting-row-action">
+    <div class="setting-view-container">
+      <div class="setting-category">
+        <p translate>vrchatMicMuteAutomations.description</p>
+        <h3 translate>vrchatMicMuteAutomations.config.title</h3>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>vrchatMicMuteAutomations.status.title</span>
+              <span translate>vrchatMicMuteAutomations.status.description</span>
+            </div>
+            <div class="setting-row-action">
             <span *ngIf="(automation.muted | async) === false" @hshrink class="status">
               <span translate>vrchatMicMuteAutomations.status.unmuted</span>
               <i class="material-icons status-icon-unmuted">mic</i>
             </span>
-            <span *ngIf="(automation.muted | async) === true" @hshrink class="status">
+              <span *ngIf="(automation.muted | async) === true" @hshrink class="status">
               <span translate>vrchatMicMuteAutomations.status.muted</span>
               <i class="material-icons status-icon-muted">mic_off</i>
             </span>
-            <span *ngIf="(automation.muted | async) === null" @hshrink class="status">
+              <span *ngIf="(automation.muted | async) === null" @hshrink class="status">
               <span translate>vrchatMicMuteAutomations.status.unknown</span>
               <i class="material-icons status-icon-unknown">question_mark</i>
             </span>
+            </div>
           </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>vrchatMicMuteAutomations.control.title</span>
-            <span translate>vrchatMicMuteAutomations.control.description</span>
-          </div>
-          <div class="setting-row-action">
-            <button
-              class="btn btn-secondary"
-              [tooltip]="'vrchatMicMuteAutomations.control.mute'"
-              (click)="automation.setMute(true)"
-            >
-              <i class="material-icons status-icon-muted">mic_off</i>
-            </button>
-            <button
-              class="btn btn-secondary"
-              [tooltip]="'vrchatMicMuteAutomations.control.unmute'"
-              (click)="automation.setMute(false)"
-            >
-              <i class="material-icons status-icon-unmuted">mic</i>
-            </button>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>vrchatMicMuteAutomations.control.title</span>
+              <span translate>vrchatMicMuteAutomations.control.description</span>
+            </div>
+            <div class="setting-row-action">
+              <button
+                class="btn btn-secondary"
+                [tooltip]="'vrchatMicMuteAutomations.control.mute'"
+                (click)="automation.setMute(true)"
+              >
+                <i class="material-icons status-icon-muted">mic_off</i>
+              </button>
+              <button
+                class="btn btn-secondary"
+                [tooltip]="'vrchatMicMuteAutomations.control.unmute'"
+                (click)="automation.setMute(false)"
+              >
+                <i class="material-icons status-icon-unmuted">mic</i>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <h3 translate>vrchatMicMuteAutomations.automations.title</h3>
-      <div class="settings">
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>vrchatMicMuteAutomations.onSleepModeEnable.title</span>
-            <span translate>vrchatMicMuteAutomations.onSleepModeEnable.description</span>
+        <h3 translate>vrchatMicMuteAutomations.automations.title</h3>
+        <div class="settings">
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>vrchatMicMuteAutomations.onSleepModeEnable.title</span>
+              <span translate>vrchatMicMuteAutomations.onSleepModeEnable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="action-dropdown"
+                [items]="muteActionOptions"
+                [selected]="onSleepEnableMuteOption"
+                (selectedChange)="onChangeMuteOption('ON_SLEEP_ENABLE', $event)"
+              ></app-select-box>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="action-dropdown"
-              [items]="muteActionOptions"
-              [selected]="onSleepEnableMuteOption"
-              (selectedChange)="onChangeMuteOption('ON_SLEEP_ENABLE', $event)"
-            ></app-select-box>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>vrchatMicMuteAutomations.onSleepModeDisable.title</span>
-            <span translate>vrchatMicMuteAutomations.onSleepModeDisable.description</span>
-          </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="action-dropdown"
-              [items]="muteActionOptions"
-              [selected]="onSleepDisableMuteOption"
-              (selectedChange)="onChangeMuteOption('ON_SLEEP_DISABLE', $event)"
-            ></app-select-box>
-          </div>
-        </div>
-        <div class="setting-row">
-          <div class="setting-row-label" translate>
-            <span translate>vrchatMicMuteAutomations.onSleepPreparation.title</span>
-            <span translate>vrchatMicMuteAutomations.onSleepPreparation.description</span>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>vrchatMicMuteAutomations.onSleepModeDisable.title</span>
+              <span translate>vrchatMicMuteAutomations.onSleepModeDisable.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="action-dropdown"
+                [items]="muteActionOptions"
+                [selected]="onSleepDisableMuteOption"
+                (selectedChange)="onChangeMuteOption('ON_SLEEP_DISABLE', $event)"
+              ></app-select-box>
+            </div>
           </div>
-          <div class="setting-row-action">
-            <app-select-box
-              type="SMALL"
-              class="action-dropdown"
-              [items]="muteActionOptions"
-              [selected]="onSleepPreparationMuteOption"
-              (selectedChange)="onChangeMuteOption('ON_SLEEP_PREPARATION', $event)"
-            ></app-select-box>
+          <div class="setting-row">
+            <div class="setting-row-label" translate>
+              <span translate>vrchatMicMuteAutomations.onSleepPreparation.title</span>
+              <span translate>vrchatMicMuteAutomations.onSleepPreparation.description</span>
+            </div>
+            <div class="setting-row-action">
+              <app-select-box
+                type="SMALL"
+                class="action-dropdown"
+                [items]="muteActionOptions"
+                [selected]="onSleepPreparationMuteOption"
+                (selectedChange)="onChangeMuteOption('ON_SLEEP_PREPARATION', $event)"
+              ></app-select-box>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src-ui/assets/i18n/ja.json b/src-ui/assets/i18n/ja.json
index c332e923..83ac5bb9 100644
--- a/src-ui/assets/i18n/ja.json
+++ b/src-ui/assets/i18n/ja.json
@@ -2629,4 +2629,4 @@
     },
     "title": "VRChatマイクミュートの自動化"
   }
-}
+}
\ No newline at end of file
diff --git a/src-ui/styles/misc.scss b/src-ui/styles/misc.scss
index 834cb427..c0a34485 100644
--- a/src-ui/styles/misc.scss
+++ b/src-ui/styles/misc.scss
@@ -35,6 +35,12 @@
 ///
 /// Settings Layout
 ///
+.setting-view-container {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 80em;
+}
+
 .setting-category {
   &:not(:first-child) {
     margin-top: 1em;