diff --git a/src_assets/common/assets/web/Checkbox.vue b/src_assets/common/assets/web/Checkbox.vue
new file mode 100644
index 00000000000..13cd8f166be
--- /dev/null
+++ b/src_assets/common/assets/web/Checkbox.vue
@@ -0,0 +1,77 @@
+<script setup>
+const model = defineModel({ required: true });
+const props = defineProps({
+  class: {
+    type: String,
+    default: ""
+  },
+  desc: {
+    type: [String, null],
+    default: ""
+  },
+  id: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  localePrefix: {
+    type: String,
+    default: "missing-prefix"
+  },
+  checkedByDef: {
+    type: Boolean,
+    default: false
+  },
+  uncheckedByDef: {
+    type: Boolean,
+    default: false
+  },
+  trueValue: {
+    type: undefined,
+    default: "enabled"
+  },
+  falseValue: {
+    type: undefined,
+    default: "disabled"
+  }
+});
+
+// Add the mandatory class values
+const extendedClassStr = (() => {
+  let values = props.class.split(" ");
+  if (!values.includes("form-check")) {
+    values.push("form-check");
+  }
+  return values.join(" ");
+})();
+
+const labelField = props.label || `${props.localePrefix}.${props.id}`;
+const descField = props.desc || `${props.localePrefix}.${props.id}_desc`;
+const showDesc = props.desc !== null;
+const showDefValue = props.checkedByDef || props.uncheckedByDef;
+const defValue = props.checkedByDef === props.uncheckedByDef ? "INVALID" :
+  props.checkedByDef ? "_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="props.trueValue"
+           :false-value="props.falseValue" />
+    <div class="form-text" v-if="showDesc">
+      {{ $t(descField) }}
+    </div>
+  </div>
+</template>
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index 9f9c3c23033..b02c6af458a 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -116,11 +116,15 @@ <h1>{{ $t('apps.applications_title') }}</h1>
           <div id="appOutputHelp" class="form-text">{{ $t('apps.output_desc') }}</div>
         </div>
         <!-- prep-cmd -->
-        <div class="mb-3 form-check">
-          <label for="excludeGlobalPrep" class="form-label">{{ $t('apps.global_prep_name') }}<div class="mt-0 form-text">{{ $t('_common.enabled_def_cbox') }}</div></label>
-          <input type="checkbox" class="form-check-input" id="excludeGlobalPrep" v-model="editForm['exclude-global-prep-cmd']" true-value="false" false-value="true" />
-          <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']"
+                  true-value="false"
+                  false-value="true"
+                  checked-by-def
+        ></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>
@@ -149,11 +153,13 @@ <h1>{{ $t('apps.applications_title') }}</h1>
                   <input type="text" class="form-control monospace" v-model="c.undo" />
                 </td>
                 <td v-if="platform === 'windows'" class="align-middle">
-                  <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>
+                  <Checkbox :id="'prep-cmd-admin-' + i"
+                            label="_common.elevated"
+                            :desc="null"
+                            v-model="c.elevated"
+                            true-value="true"
+                            false-value="false"
+                  ></Checkbox>
                 </td>
                 <td>
                   <button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">
@@ -204,26 +210,36 @@ <h1>{{ $t('apps.applications_title') }}</h1>
           <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') }}<div class="mt-0 form-text">{{ $t('_common.disabled_def_cbox') }}</div></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"
+                  true-value="true"
+                  false-value="false"
+                  unchecked-by-def
+        ></Checkbox>
         <!-- auto-detach -->
-        <div class="mb-3 form-check">
-          <label for="autoDetach" class="form-check-label">{{ $t('apps.auto_detach') }}<div class="mt-0 form-text">{{ $t('_common.enabled_def_cbox') }}</div></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']"
+                  true-value="true"
+                  false-value="false"
+                  checked-by-def
+        ></Checkbox>
         <!-- wait for all processes -->
-        <div class="mb-3 form-check">
-          <label for="waitAll" class="form-check-label">{{ $t('apps.wait_all') }}<div class="mt-0 form-text">{{ $t('_common.enabled_def_cbox') }}</div></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']"
+                  true-value="true"
+                  false-value="false"
+                  checked-by-def
+        ></Checkbox>
         <!-- exit timeout -->
         <div class="mb-3">
           <label for="exitTimeout" class="form-label">{{ $t('apps.exit_timeout') }}</label>
@@ -354,11 +370,13 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
   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 {
@@ -411,9 +429,9 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
         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/General.vue b/src_assets/common/assets/web/configs/tabs/General.vue
index c1484b32211..7dbfeb1d349 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({
@@ -97,11 +98,13 @@ function removeCmd(index) {
             <input type="text" class="form-control monospace" v-model="c.undo" />
           </td>
           <td v-if="platform === 'windows'" class="align-middle">
-            <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>
+            <Checkbox :id="'prep-cmd-admin-' + i"
+                      label="_common.elevated"
+                      :desc="null"
+                      v-model="c.elevated"
+                      true-value="true"
+                      false-value="false"
+            ></Checkbox>
           </td>
           <td>
             <button class="btn btn-danger" @click="removeCmd(i)">
@@ -120,11 +123,12 @@ function removeCmd(index) {
     </div>
 
     <!-- Notify Pre-Releases -->
-    <div class="mb-3 form-check">
-      <label for="notify_pre_releases" class="form-label">{{ $t('config.notify_pre_releases') }}<div class="mt-0 form-text">{{ $t('_common.disabled_def_cbox') }}</div></label>
-      <input type="checkbox" class="form-check-input" id="notify_pre_releases" v-model="config.notify_pre_releases" true-value="enabled" false-value="disabled" />
-      <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"
+              unchecked-by-def
+    ></Checkbox>
   </div>
 </template>