diff --git a/src_assets/common/assets/web/Checkbox.vue b/src_assets/common/assets/web/Checkbox.vue
new file mode 100644
index 00000000..b94446d3
--- /dev/null
+++ b/src_assets/common/assets/web/Checkbox.vue
@@ -0,0 +1,120 @@
+<script setup>
+const model = defineModel({ required: true });
+const slots = defineSlots();
+const props = defineProps({
+  class: {
+    type: String,
+    default: ""
+  },
+  desc: {
+    type: String,
+    default: null
+  },
+  id: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: null
+  },
+  localePrefix: {
+    type: String,
+    default: "missing-prefix"
+  },
+  default: {
+    type: undefined,
+    default: null,
+  }
+});
+
+// Add the mandatory class values
+const extendedClassStr = (() => {
+  let values = props.class.split(" ");
+  if (!values.includes("form-check")) {
+    values.push("form-check");
+  }
+  return values.join(" ");
+})();
+
+// Map the value to boolean representation if possible, otherwise return null.
+const mapToBoolRepresentation = (value) => {
+  // Try literal values first
+  if (value === true || value === false) {
+    return { possibleValues: [true, false], value: value };
+  }
+  if (value === 1 || value === 0) {
+    return { possibleValues: [1, 0], value: value };
+  }
+
+  const stringPairs = [
+    ["true", "false"],
+    ["1", "0"],
+    ["enabled", "disabled"],
+    ["enable", "disable"],
+    ["yes", "no"],
+    ["on", "off"]
+  ];
+
+  value = `${value}`.toLowerCase().trim();
+  for (const pair of stringPairs) {
+    if (value === pair[0] || value === pair[1]) {
+      return { possibleValues: pair, value: value };
+    }
+  }
+
+  return null;
+}
+
+// Determine the true/false values for the checkbox
+const checkboxValues = (() => {
+  const mappedValues = (() => {
+    const boolValues = mapToBoolRepresentation(model.value);
+    if (boolValues !== null) {
+      return boolValues.possibleValues;
+    }
+
+    // Return fallback if nothing matches
+    console.error(`Checkbox value ${model.value} did not match any acceptable pattern!`);
+    return ["true", "false"];
+  })();
+
+  return { truthy: mappedValues[0], falsy: mappedValues[1] };
+})();
+const parsedDefaultPropValue = (() => {
+  const boolValues = mapToBoolRepresentation(props.default);
+  if (boolValues !== null) {
+    // Convert truthy to true/false.
+    return boolValues.value === boolValues.possibleValues[0];
+  }
+
+  return null;
+})();
+
+const labelField = props.label ?? `${props.localePrefix}.${props.id}`;
+const descField = props.desc ?? `${props.localePrefix}.${props.id}_desc`;
+const showDesc = props.desc !== "" || Object.entries(slots).length > 0;
+const showDefValue = parsedDefaultPropValue !== null;
+const defValue = parsedDefaultPropValue ? "_common.enabled_def_cbox" : "_common.disabled_def_cbox";
+</script>
+
+<template>
+  <div :class="extendedClassStr">
+    <label :for="props.id" :class="`form-check-label${showDesc ? ' mb-2' : ''}`">
+      {{ $t(labelField) }}
+      <div class="mt-0 form-text" v-if="showDefValue">
+        {{ $t(defValue) }}
+      </div>
+    </label>
+    <input type="checkbox"
+           class="form-check-input"
+           :id="props.id"
+           v-model="model"
+           :true-value="checkboxValues.truthy"
+           :false-value="checkboxValues.falsy" />
+    <div class="form-text" v-if="showDesc">
+      {{ $t(descField) }}
+      <slot></slot>
+    </div>
+  </div>
+</template>
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index e10ce026..b4669989 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -116,15 +116,13 @@
           <div id="appOutputHelp" class="form-text">{{ $t('apps.output_desc') }}</div>
         </div>
         <!-- prep-cmd -->
-        <div class="mb-3">
-          <label for="excludeGlobalPrep" class="form-label">{{ $t('apps.global_prep_name') }}</label>
-          <select id="excludeGlobalPrep" class="form-select" v-model="editForm['exclude-global-prep-cmd']">
-            <option v-for="val in [false, true]" :value="val">
-              {{ !val ? $t('_common.enabled') : $t('_common.disabled') }}
-            </option>
-          </select>
-          <div class="form-text">{{ $t('apps.global_prep_desc') }}</div>
-        </div>
+        <Checkbox class="mb-3"
+                  id="excludeGlobalPrep"
+                  label="apps.global_prep_name"
+                  desc="apps.global_prep_desc"
+                  v-model="editForm['exclude-global-prep-cmd']"
+                  default="true"
+        ></Checkbox>
         <div class="mb-3">
           <label for="appName" class="form-label">{{ $t('apps.cmd_prep_name') }}</label>
           <div class="form-text">{{ $t('apps.cmd_prep_desc') }}</div>
@@ -152,12 +150,12 @@
                 <td>
                   <input type="text" class="form-control monospace" v-model="c.undo" />
                 </td>
-                <td v-if="platform === 'windows'">
-                  <div class="form-check">
-                    <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
-                      true-value="true" false-value="false" />
-                    <label :for="'prep-cmd-admin-' + i" class="form-check-label">{{ $t('_common.elevated') }}</label>
-                  </div>
+                <td v-if="platform === 'windows'" class="align-middle">
+                  <Checkbox :id="'prep-cmd-admin-' + i"
+                            label="_common.elevated"
+                            desc=""
+                            v-model="c.elevated"
+                  ></Checkbox>
                 </td>
                 <td>
                   <button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">
@@ -208,26 +206,30 @@
           <div id="appWorkingDirHelp" class="form-text">{{ $t('apps.working_dir_desc') }}</div>
         </div>
         <!-- elevation -->
-        <div class="mb-3 form-check" v-if="platform === 'windows'">
-          <label for="appElevation" class="form-check-label">{{ $t('_common.run_as') }}</label>
-          <input type="checkbox" class="form-check-input" id="appElevation" v-model="editForm.elevated"
-            true-value="true" false-value="false" />
-          <div class="form-text">{{ $t('apps.run_as_desc') }}</div>
-        </div>
+        <Checkbox v-if="platform === 'windows'"
+                  class="mb-3"
+                  id="appElevation"
+                  label="_common.run_as"
+                  desc="apps.run_as_desc"
+                  v-model="editForm.elevated"
+                  default="false"
+        ></Checkbox>
         <!-- auto-detach -->
-        <div class="mb-3 form-check">
-          <label for="autoDetach" class="form-check-label">{{ $t('apps.auto_detach') }}</label>
-          <input type="checkbox" class="form-check-input" id="autoDetach" v-model="editForm['auto-detach']"
-            true-value="true" false-value="false" />
-          <div class="form-text">{{ $t('apps.auto_detach_desc') }}</div>
-        </div>
+        <Checkbox class="mb-3"
+                  id="autoDetach"
+                  label="apps.auto_detach"
+                  desc="apps.auto_detach_desc"
+                  v-model="editForm['auto-detach']"
+                  default="true"
+        ></Checkbox>
         <!-- wait for all processes -->
-        <div class="mb-3 form-check">
-          <label for="waitAll" class="form-check-label">{{ $t('apps.wait_all') }}</label>
-          <input type="checkbox" class="form-check-input" id="waitAll" v-model="editForm['wait-all']"
-            true-value="true" false-value="false" />
-          <div class="form-text">{{ $t('apps.wait_all_desc') }}</div>
-        </div>
+        <Checkbox class="mb-3"
+                  id="waitAll"
+                  label="apps.wait_all"
+                  desc="apps.wait_all_desc"
+                  v-model="editForm['wait-all']"
+                  default="true"
+        ></Checkbox>
         <!-- exit timeout -->
         <div class="mb-3">
           <label for="exitTimeout" class="form-label">{{ $t('apps.exit_timeout') }}</label>
@@ -358,11 +360,13 @@
   import { createApp } from 'vue'
   import { initApp } from './init'
   import Navbar from './Navbar.vue'
+  import Checkbox from './Checkbox.vue'
   import { Dropdown } from 'bootstrap/dist/js/bootstrap'
 
   const app = createApp({
     components: {
-      Navbar
+      Navbar,
+      Checkbox
     },
     data() {
       return {
@@ -415,9 +419,9 @@
         if (this.editForm["detached"] === undefined)
           this.editForm["detached"] = [];
         if (this.editForm["exclude-global-prep-cmd"] === undefined)
-          this.editForm["exclude-global-prep-cmd"] = [];
+          this.editForm["exclude-global-prep-cmd"] = false;
         if (this.editForm["elevated"] === undefined && this.platform === 'windows') {
-          this.editForm["elevated"] = [];
+          this.editForm["elevated"] = false;
         }
         if (this.editForm["auto-detach"] === undefined) {
           this.editForm["auto-detach"] = true;
diff --git a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue b/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
index 0f18f9a1..430fe1fa 100644
--- a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
+++ b/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
@@ -6,6 +6,7 @@ import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
 import DisplayOutputSelector from './audiovideo/DisplayOutputSelector.vue'
 import DisplayDeviceOptions from "./audiovideo/DisplayDeviceOptions.vue";
 import DisplayModesSettings from "./audiovideo/DisplayModesSettings.vue";
+import Checkbox from "../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -54,14 +55,12 @@ const config = ref(props.config)
         </div>
 
         <!-- Install Steam Audio Drivers -->
-        <div class="mb-3">
-          <label for="install_steam_audio_drivers" class="form-label">{{ $t('config.install_steam_audio_drivers') }}</label>
-          <select id="install_steam_audio_drivers" class="form-select" v-model="config.install_steam_audio_drivers">
-            <option value="disabled">{{ $t('_common.disabled') }}</option>
-            <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-          </select>
-          <div class="form-text">{{ $t('config.install_steam_audio_drivers_desc') }}</div>
-        </div>
+        <Checkbox class="mb-3"
+                  id="install_steam_audio_drivers"
+                  locale-prefix="config"
+                  v-model="config.install_steam_audio_drivers"
+                  default="true"
+        ></Checkbox>
       </template>
     </PlatformLayout>
 
diff --git a/src_assets/common/assets/web/configs/tabs/General.vue b/src_assets/common/assets/web/configs/tabs/General.vue
index 9596e622..d08bec55 100644
--- a/src_assets/common/assets/web/configs/tabs/General.vue
+++ b/src_assets/common/assets/web/configs/tabs/General.vue
@@ -1,4 +1,5 @@
 <script setup>
+import Checkbox from '../../Checkbox.vue'
 import { ref } from 'vue'
 
 const props = defineProps({
@@ -100,12 +101,12 @@ function removeCmd(index) {
           <td>
             <input type="text" class="form-control monospace" v-model="c.undo" />
           </td>
-          <td v-if="platform === 'windows'">
-            <div class="form-check">
-              <input type="checkbox" class="form-check-input" :id="'prep-cmd-admin-' + i" v-model="c.elevated"
-                     true-value="true" false-value="false" />
-              <label :for="'prep-cmd-admin-' + i" class="form-check-label">{{ $t('config.elevated') }}</label>
-            </div>
+          <td v-if="platform === 'windows'" class="align-middle">
+            <Checkbox :id="'prep-cmd-admin-' + i"
+                      label="_common.elevated"
+                      desc=""
+                      v-model="c.elevated"
+            ></Checkbox>
           </td>
           <td>
             <button class="btn btn-danger" @click="removeCmd(i)">
@@ -124,14 +125,12 @@ function removeCmd(index) {
     </div>
 
     <!-- Notify Pre-Releases -->
-    <div class="mb-3">
-        <label for="notify_pre_releases" class="form-label">{{ $t('config.notify_pre_releases') }}</label>
-        <select id="notify_pre_releases" class="form-select" v-model="config.notify_pre_releases">
-            <option value="disabled">{{ $t('_common.disabled') }}</option>
-            <option value="enabled">{{ $t('_common.enabled') }}</option>
-        </select>
-        <div class="form-text">{{ $t('config.notify_pre_releases_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="notify_pre_releases"
+              locale-prefix="config"
+              v-model="config.notify_pre_releases"
+              default="false"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/Inputs.vue b/src_assets/common/assets/web/configs/tabs/Inputs.vue
index a2f0c249..2e7a081f 100644
--- a/src_assets/common/assets/web/configs/tabs/Inputs.vue
+++ b/src_assets/common/assets/web/configs/tabs/Inputs.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import PlatformLayout from '../../PlatformLayout.vue'
+import Checkbox from "../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -13,14 +14,12 @@ const config = ref(props.config)
 <template>
   <div id="input" class="config-page">
     <!-- Enable Gamepad Input -->
-    <div class="mb-3">
-      <label for="controller" class="form-label">{{ $t('config.controller') }}</label>
-      <select id="controller" class="form-select" v-model="config.controller">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.controller_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="controller"
+              locale-prefix="config"
+              v-model="config.controller"
+              default="true"
+    ></Checkbox>
 
     <!-- Emulated Gamepad Type -->
     <div class="mb-3" v-if="config.controller === 'enabled' && platform !== 'macos'">
@@ -44,63 +43,53 @@ const config = ref(props.config)
       <div class="form-text">{{ $t('config.gamepad_desc') }}</div>
     </div>
 
-    <div class="accordion" v-if="config.gamepad === 'ds4'">
-      <div class="accordion-item">
-        <h2 class="accordion-header">
-          <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#panelsStayOpen-collapseOne">
-            {{ $t('config.gamepad_ds4_manual') }}
-          </button>
-        </h2>
-        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingOne">
-          <div class="accordion-body">
-            <div>
-              <label for="ds4_back_as_touchpad_click" class="form-label">{{ $t('config.ds4_back_as_touchpad_click') }}</label>
-              <select id="ds4_back_as_touchpad_click" class="form-select"
-                      v-model="config.ds4_back_as_touchpad_click">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.ds4_back_as_touchpad_click_desc') }}</div>
+    <!-- Additional options based on gamepad type -->
+    <template v-if="config.controller === 'enabled'">
+      <template v-if="config.gamepad === 'ds4' || (config.gamepad === 'auto' && platform === 'windows')">
+        <div class="mb-3 accordion">
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                      data-bs-target="#panelsStayOpen-collapseOne">
+                {{ $t(config.gamepad === 'ds4' ? 'config.gamepad_ds4_manual' : 'config.gamepad_auto') }}
+              </button>
+            </h2>
+            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
+                 aria-labelledby="panelsStayOpen-headingOne">
+              <div class="accordion-body">
+                <!-- Auto options (Windows only) -->
+                <template v-if="config.gamepad === 'auto'">
+                  <!-- DS4 motion -->
+                  <Checkbox class="mb-3"
+                            id="motion_as_ds4"
+                            locale-prefix="config"
+                            v-model="config.motion_as_ds4"
+                            default="true"
+                  ></Checkbox>
+                  <!-- DS4 touchpad -->
+                  <Checkbox class="mb-3"
+                            id="touchpad_as_ds4"
+                            locale-prefix="config"
+                            v-model="config.touchpad_as_ds4"
+                            default="true"
+                  ></Checkbox>
+                </template>
+                <!-- DS4 options (all platforms) -->
+                <template v-if="config.gamepad === 'ds4'">
+                  <!-- DS4 back button as touchpad click -->
+                  <Checkbox class="mb-3"
+                            id="ds4_back_as_touchpad_click"
+                            locale-prefix="config"
+                            v-model="config.ds4_back_as_touchpad_click"
+                            default="true"
+                  ></Checkbox>
+                </template>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-    <div class="accordion" v-if="config.controller === 'enabled' && config.gamepad === 'auto' && platform === 'windows'">
-      <div class="accordion-item">
-        <h2 class="accordion-header">
-          <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                  data-bs-target="#panelsStayOpen-collapseOne">
-            {{ $t('config.gamepad_auto') }}
-          </button>
-        </h2>
-        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
-             aria-labelledby="panelsStayOpen-headingOne">
-          <div class="accordion-body">
-            <div>
-              <label for="motion_as_ds4" class="form-label">{{ $t('config.motion_as_ds4') }}</label>
-              <select id="motion_as_ds4" class="form-select"
-                      v-model="config.motion_as_ds4">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.motion_as_ds4_desc') }}</div>
-            </div>
-            <div>
-              <label for="touchpad_as_ds4" class="form-label">{{ $t('config.touchpad_as_ds4') }}</label>
-              <select id="touchpad_as_ds4" class="form-select"
-                      v-model="config.touchpad_as_ds4">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.touchpad_as_ds4_desc') }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+      </template>
+    </template>
 
     <!-- Home/Guide Button Emulation Timeout -->
     <div class="mb-3" v-if="config.controller === 'enabled'">
@@ -112,14 +101,12 @@ const config = ref(props.config)
 
     <!-- Enable Keyboard Input -->
     <hr>
-    <div class="mb-3">
-      <label for="keyboard" class="form-label">{{ $t('config.keyboard') }}</label>
-      <select id="keyboard" class="form-select" v-model="config.keyboard">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.keyboard_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="keyboard"
+              locale-prefix="config"
+              v-model="config.keyboard"
+              default="true"
+    ></Checkbox>
 
     <!-- Key Repeat Delay-->
     <div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
@@ -138,56 +125,49 @@ const config = ref(props.config)
     </div>
 
     <!-- Always send scancodes -->
-    <div class="mb-3" v-if="config.keyboard === 'enabled' && platform === 'windows'">
-      <label for="always_send_scancodes" class="form-label">{{ $t('config.always_send_scancodes') }}</label>
-      <select id="always_send_scancodes" class="form-select" v-model="config.always_send_scancodes">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.always_send_scancodes_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.keyboard === 'enabled' && platform === 'windows'"
+              class="mb-3"
+              id="always_send_scancodes"
+              locale-prefix="config"
+              v-model="config.always_send_scancodes"
+              default="true"
+    ></Checkbox>
 
     <!-- Mapping Key AltRight to Key Windows -->
-    <div class="mb-3" v-if="config.keyboard === 'enabled'">
-      <label for="key_rightalt_to_key_win" class="form-label">{{ $t('config.key_rightalt_to_key_win') }}</label>
-      <select id="key_rightalt_to_key_win" class="form-select" v-model="config.key_rightalt_to_key_win">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.key_rightalt_to_key_win_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.keyboard === 'enabled'"
+              class="mb-3"
+              id="key_rightalt_to_key_win"
+              locale-prefix="config"
+              v-model="config.key_rightalt_to_key_win"
+              default="false"
+    ></Checkbox>
 
     <!-- Enable Mouse Input -->
     <hr>
-    <div class="mb-3">
-      <label for="mouse" class="form-label">{{ $t('config.mouse') }}</label>
-      <select id="mouse" class="form-select" v-model="config.mouse">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.mouse_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="mouse"
+              locale-prefix="config"
+              v-model="config.mouse"
+              default="true"
+    ></Checkbox>
 
     <!-- High resolution scrolling support -->
-    <div class="mb-3" v-if="config.mouse === 'enabled'">
-      <label for="high_resolution_scrolling" class="form-label">{{ $t('config.high_resolution_scrolling') }}</label>
-      <select id="high_resolution_scrolling" class="form-select" v-model="config.high_resolution_scrolling">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.high_resolution_scrolling_desc') }}</div>
-    </div>
+    <Checkbox v-if="config.mouse === 'enabled'"
+              class="mb-3"
+              id="high_resolution_scrolling"
+              locale-prefix="config"
+              v-model="config.high_resolution_scrolling"
+              default="true"
+    ></Checkbox>
 
     <!-- Native pen/touch support -->
-    <div class="mb-3" v-if="config.mouse === 'enabled'">
-      <label for="native_pen_touch" class="form-label">{{ $t('config.native_pen_touch') }}</label>
-      <select id="native_pen_touch" class="form-select" v-model="config.native_pen_touch">
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-        <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.native_pen_touch_desc') }}</div>
-    </div>
-
+    <Checkbox v-if="config.mouse === 'enabled'"
+              class="mb-3"
+              id="native_pen_touch"
+              locale-prefix="config"
+              v-model="config.native_pen_touch"
+              default="true"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/Network.vue b/src_assets/common/assets/web/configs/tabs/Network.vue
index b32074a5..4fac049d 100644
--- a/src_assets/common/assets/web/configs/tabs/Network.vue
+++ b/src_assets/common/assets/web/configs/tabs/Network.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
+import Checkbox from "../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -15,14 +16,12 @@ const effectivePort = computed(() => +config.value?.port ?? defaultMoonlightPort
 <template>
   <div id="network" class="config-page">
     <!-- UPnP -->
-    <div class="mb-3">
-      <label for="upnp" class="form-label">{{ $t('config.upnp') }}</label>
-      <select id="upnp" class="form-select" v-model="config.upnp">
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.upnp_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="upnp"
+              locale-prefix="config"
+              v-model="config.upnp"
+              default="false"
+    ></Checkbox>
 
     <!-- Address family -->
     <div class="mb-3">
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue b/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue
index 8fa94ce8..59b2a12a 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue
+++ b/src_assets/common/assets/web/configs/tabs/audiovideo/AdapterNameSelector.vue
@@ -20,7 +20,7 @@ const config = ref(props.config)
     <div class="form-text">
       <PlatformLayout :platform="platform">
         <template #windows>
-          {{ $t('config.adapter_name_desc_win') }}<br>
+          {{ $t('config.adapter_name_desc_windows') }}<br>
           <pre>tools\dxgi-info.exe</pre>
         </template>
         <template #linux>
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue b/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue
index b901e1ca..ee796a72 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue
+++ b/src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue
@@ -16,14 +16,11 @@ const fpsIn = ref("")
 </script>
 
 <template>
+  <!--min_fps_factor-->
   <div class="mb-3">
-    <!--min_fps_factor-->
-    <div class="mb-3">
-      <label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
-      <input type="number" min="1" max="3" class="form-control" id="min_fps_factor" placeholder="1" v-model="config.min_fps_factor" />
-      <div class="form-text">{{ $t('config.min_fps_factor_desc') }}</div>
-    </div>
-
+    <label for="qp" class="form-label">{{ $t('config.min_fps_factor') }}</label>
+    <input type="number" min="1" max="3" class="form-control" id="min_fps_factor" placeholder="1" v-model="config.min_fps_factor" />
+    <div class="form-text">{{ $t('config.min_fps_factor_desc') }}</div>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
index 209df9a7..1da49999 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/AmdAmfEncoder.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -25,7 +26,7 @@ const config = ref(props.config)
     </div>
 
     <!-- AMD Rate Control group options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -49,21 +50,19 @@ const config = ref(props.config)
             </div>
 
             <!-- AMF HRD Enforcement -->
-            <div class="mb-3">
-              <label for="amd_enforce_hrd" class="form-label">{{ $t('config.amd_enforce_hrd') }}</label>
-              <select id="amd_enforce_hrd" class="form-select" v-model="config.amd_enforce_hrd">
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_enforce_hrd_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_enforce_hrd"
+                      locale-prefix="config"
+                      v-model="config.amd_enforce_hrd"
+                      default="false"
+            ></Checkbox>
           </div>
         </div>
       </div>
     </div>
 
     <!-- AMF Quality group options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -86,24 +85,20 @@ const config = ref(props.config)
             </div>
 
             <!-- AMD Preanalysis -->
-            <div class="mb-3">
-              <label for="amd_preanalysis" class="form-label">{{ $t('config.amd_preanalysis') }}</label>
-              <select id="amd_preanalysis" class="form-select" v-model="config.amd_preanalysis">
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_preanalysis_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_preanalysis"
+                      locale-prefix="config"
+                      v-model="config.amd_preanalysis"
+                      default="false"
+            ></Checkbox>
 
             <!-- AMD VBAQ -->
-            <div class="mb-3">
-              <label for="amd_vbaq" class="form-label">{{ $t('config.amd_vbaq') }}</label>
-              <select id="amd_vbaq" class="form-select" v-model="config.amd_vbaq">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.amd_vbaq_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="amd_vbaq"
+                      locale-prefix="config"
+                      v-model="config.amd_vbaq"
+                      default="true"
+            ></Checkbox>
 
             <!-- AMF Coder (H264) -->
             <div class="mb-3">
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
index 6b88b8b7..1a13beba 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/IntelQuickSyncEncoder.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -36,15 +37,12 @@ const config = ref(props.config)
     </div>
 
     <!-- Allow Slow HEVC Encoding -->
-    <div class="mb-3">
-      <label for="qsv_slow_hevc" class="form-label">{{ $t('config.qsv_slow_hevc') }}</label>
-      <select id="qsv_slow_hevc" class="form-select" v-model="config.qsv_slow_hevc">
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.qsv_slow_hevc_desc') }}</div>
-    </div>
-
+    <Checkbox class="mb-3"
+              id="qsv_slow_hevc"
+              locale-prefix="config"
+              v-model="config.qsv_slow_hevc"
+              default="false"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
index aa6ad003..15ae8dc6 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/NvidiaNvencEncoder.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -60,7 +61,7 @@ const config = ref(props.config)
     </div>
 
     <!-- Miscellaneous options -->
-    <div class="accordion">
+    <div class="mb-3 accordion">
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button" type="button" data-bs-toggle="collapse"
@@ -72,48 +73,43 @@ const config = ref(props.config)
              aria-labelledby="panelsStayOpen-headingOne">
           <div class="accordion-body">
             <!-- NVENC Realtime HAGS priority -->
-            <div class="mb-3" v-if="platform === 'windows'">
-              <label for="nvenc_realtime_hags" class="form-label">{{ $t('config.nvenc_realtime_hags') }}</label>
-              <select id="nvenc_realtime_hags" class="form-select" v-model="config.nvenc_realtime_hags">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">
-                {{ $t('config.nvenc_realtime_hags_desc') }}<br>
-                <br>
-                <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
-              </div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_realtime_hags"
+                      locale-prefix="config"
+                      v-model="config.nvenc_realtime_hags"
+                      default="true"
+            >
+              <br>
+              <br>
+              <a href="https://devblogs.microsoft.com/directx/hardware-accelerated-gpu-scheduling/">HAGS</a>
+            </Checkbox>
 
             <!-- Prefer lower encoding latency over power savings -->
-            <div class="mb-3" v-if="platform === 'windows'">
-              <label for="nvenc_latency_over_power" class="form-label">{{ $t('config.nvenc_latency_over_power') }}</label>
-              <select id="nvenc_latency_over_power" class="form-select" v-model="config.nvenc_latency_over_power">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_latency_over_power_desc') }}</div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_latency_over_power"
+                      locale-prefix="config"
+                      v-model="config.nvenc_latency_over_power"
+                      default="true"
+            ></Checkbox>
 
             <!-- Present OpenGL/Vulkan on top of DXGI -->
-            <div class="mb-3" v-if="platform === 'windows'">
-              <label for="nvenc_opengl_vulkan_on_dxgi" class="form-label">{{ $t('config.nvenc_opengl_vulkan_on_dxgi') }}</label>
-              <select id="nvenc_opengl_vulkan_on_dxgi" class="form-select" v-model="config.nvenc_opengl_vulkan_on_dxgi">
-                <option value="disabled">{{ $t('_common.disabled') }}</option>
-                <option value="enabled">{{ $t('_common.enabled_def') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_opengl_vulkan_on_dxgi_desc') }}</div>
-            </div>
+            <Checkbox v-if="platform === 'windows'"
+                      class="mb-3"
+                      id="nvenc_opengl_vulkan_on_dxgi"
+                      locale-prefix="config"
+                      v-model="config.nvenc_opengl_vulkan_on_dxgi"
+                      default="true"
+            ></Checkbox>
 
             <!-- NVENC H264 CAVLC -->
-            <div>
-              <label for="nvenc_h264_cavlc" class="form-label">{{ $t('config.nvenc_h264_cavlc') }}</label>
-              <select id="nvenc_h264_cavlc" class="form-select" v-model="config.nvenc_h264_cavlc">
-                <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-                <option value="enabled">{{ $t('_common.enabled') }}</option>
-              </select>
-              <div class="form-text">{{ $t('config.nvenc_h264_cavlc_desc') }}</div>
-            </div>
+            <Checkbox class="mb-3"
+                      id="nvenc_h264_cavlc"
+                      locale-prefix="config"
+                      v-model="config.nvenc_h264_cavlc"
+                      default="false"
+            ></Checkbox>
           </div>
         </div>
       </div>
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
index 2300fd6e..063bba45 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/VAAPIEncoder.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -12,14 +13,12 @@ const config = ref(props.config)
 <template>
   <div id="vaapi-encoder" class="config-page">
     <!-- Strict RC Buffer -->
-    <div class="mb-3">
-      <label for="vaapi_strict_rc_buffer" class="form-label">{{ $t('config.vaapi_strict_rc_buffer') }}</label>
-      <select id="vaapi_strict_rc_buffer" class="form-select" v-model="config.vaapi_strict_rc_buffer">
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-        <option value="disabled">{{ $t('_common.disabled_def') }}</option>
-      </select>
-      <div class="form-text">{{ $t('config.vaapi_strict_rc_buffer_desc') }}</div>
-    </div>
+    <Checkbox class="mb-3"
+              id="vaapi_strict_rc_buffer"
+              locale-prefix="config"
+              v-model="config.vaapi_strict_rc_buffer"
+              default="false"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue b/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
index 41e29d46..084e5f1d 100644
--- a/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
+++ b/src_assets/common/assets/web/configs/tabs/encoders/VideotoolboxEncoder.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import Checkbox from "../../../Checkbox.vue";
 
 const props = defineProps([
   'platform',
@@ -29,13 +30,13 @@ const config = ref(props.config)
         <option value="forced">{{ $t('config.vt_software_forced') }}</option>
       </select>
     </div>
-    <div class="mb-3">
-      <label for="vt_realtime" class="form-label">{{ $t('config.vt_realtime') }}</label>
-      <select id="vt_realtime" class="form-select" v-model="config.vt_realtime">
-        <option value="enabled">{{ $t('_common.enabled') }}</option>
-        <option value="disabled">{{ $t('_common.disabled') }}</option>
-      </select>
-    </div>
+    <Checkbox class="mb-3"
+              id="vt_realtime"
+              desc=""
+              locale-prefix="config"
+              v-model="config.vt_realtime"
+              default="true"
+    ></Checkbox>
   </div>
 </template>
 
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index b277c8af..d3d9356f 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -7,11 +7,13 @@
     "cancel": "Cancel",
     "disabled": "Disabled",
     "disabled_def": "Disabled (default)",
+    "disabled_def_cbox": "Default: unchecked",
     "dismiss": "Dismiss",
     "do_cmd": "Do Command",
     "elevated": "Elevated",
     "enabled": "Enabled",
     "enabled_def": "Enabled (default)",
+    "enabled_def_cbox": "Default: checked",
     "error": "Error!",
     "note": "Note:",
     "password": "Password",
@@ -168,6 +170,7 @@
     "gamepad_auto": "Automatic selection options",
     "gamepad_desc": "Choose which type of gamepad to emulate on the host",
     "gamepad_ds4": "DS4 (PS4)",
+    "gamepad_ds4_manual": "DS4 selection options",
     "gamepad_ds5": "DS5 (PS5)",
     "gamepad_switch": "Nintendo Pro (Switch)",
     "gamepad_manual": "Manual DS4 options",
@@ -189,7 +192,7 @@
     "key_repeat_delay_desc": "Control how fast keys will repeat themselves. The initial delay in milliseconds before repeating keys.",
     "key_repeat_frequency": "Key Repeat Frequency",
     "key_repeat_frequency_desc": "How often keys repeat every second. This configurable option supports decimals.",
-    "key_rightalt_to_key_windows": "Map Right Alt key to Windows key",
+    "key_rightalt_to_key_win": "Map Right Alt key to Windows key",
     "key_rightalt_to_key_win_desc": "It may be possible that you cannot send the Windows Key from Moonlight directly. In those cases it may be useful to make Sunshine think the Right Alt key is the Windows key",
     "keyboard": "Enable Keyboard Input",
     "keyboard_desc": "Allows guests to control the host system with the keyboard",