diff --git a/resources/js/components/Combobox.vue b/resources/js/components/Combobox.vue
deleted file mode 100644
index 79f8c3ca71c..00000000000
--- a/resources/js/components/Combobox.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-  import {CraftCombobox} from '../../../packages/craftcms-cp/src';
-  import type {SelectOption, SuggestionGroup} from '@/types';
-  import {computed} from 'vue';
-
-  const emit = defineEmits<{
-    (e: 'update:modelValue', value: string | null): void;
-  }>();
-  const props = withDefaults(
-    defineProps<{
-      label?: string;
-      id?: string;
-      name?: string;
-      helpText?: string;
-      modelValue?: any;
-      options?: Array<SelectOption | SuggestionGroup>;
-      error?: any;
-    }>(),
-    {
-      options: () => [],
-    }
-  );
-
-  function handleUpdate(event: CustomEvent) {
-    const target = event.target as CraftCombobox | null;
-    if (target) {
-      emit('update:modelValue', target.value ?? target.modelValue);
-    }
-  }
-
-  function handleInputUpdate(event: InputEvent) {
-    const target = event.target as HTMLInputElement | null;
-    if (target) {
-      emit('update:modelValue', target.value);
-    }
-  }
-
-  const grouped = computed(() => {
-    return props.options.some((option) => option.data?.length > 0);
-  });
-</script>
-
-<template>
-  <craft-combobox
-    :label="label"
-    :id="id"
-    :name="name"
-    :help-text="helpText"
-    :require-option-match="false"
-    :has-feedback-for="error ? 'error' : ''"
-    :show-all-on-empty="true"
-    :value="modelValue"
-    .modelValue="modelValue"
-    @input="handleInputUpdate"
-    @model-value-changed="handleUpdate"
-    v-bind="$attrs"
-  >
-    <template v-if="grouped">
-      <template v-for="(group, idx) in options" :key="idx">
-        <span class="group-label">{{ group.label }}</span>
-        <craft-option
-          v-for="suggestion in group.data"
-          :key="suggestion.name"
-          .choiceValue="suggestion.name"
-          .hint="suggestion.hint"
-          >{{ suggestion.name }}</craft-option
-        >
-      </template>
-    </template>
-    <template v-else>
-      <craft-option
-        v-for="(item, idx) in options"
-        :key="idx"
-        .choiceValue="item.value"
-        ><slot name="item" :item="item">
-          {{ item.label }}
-        </slot></craft-option
-      >
-    </template>
-
-    <div slot="after">
-      <slot name="after"></slot>
-    </div>
-
-    <div slot="feedback">
-      <ul class="error-list" v-if="error">
-        <li>{{ error }}</li>
-      </ul>
-    </div>
-  </craft-combobox>
-</template>
-
-<style scoped lang="scss">
-  .group-label {
-    font-size: 0.8em;
-    text-transform: uppercase;
-    padding-inline: var(--c-spacing-md);
-    padding-block: var(--c-spacing-sm);
-    color: var(--c-color-neutral-on-normal);
-  }
-</style>
diff --git a/resources/js/components/form/CraftCombobox.vue b/resources/js/components/form/CraftCombobox.vue
index 4d68cc445fe..f24ac9b1130 100644
--- a/resources/js/components/form/CraftCombobox.vue
+++ b/resources/js/components/form/CraftCombobox.vue
@@ -2,13 +2,10 @@
   import {t} from '@craftcms/cp';
   import InputCombobox from '@/components/form/InputCombobox.vue';
   import type {SelectItem} from '@/types';
-  import {computed} from 'vue';
+  import {computed, useSlots} from 'vue';
 
-  const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
-  }>();
+  const modelValue = defineModel<string | number | boolean>();
   const props = defineProps<{
-    modelValue: string;
     label: string;
     id?: string;
     name?: string;
@@ -16,15 +13,13 @@
     options?: Array<SelectItem>;
     callouts?: Array<string>;
     error?: string;
+    requireOptionMatch?: boolean;
   }>();
 
-  const valueProxy = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(newValue) {
-      emit('update:modelValue', newValue);
-    },
+  const slots = useSlots();
+  const forwardedSlots = computed(() => {
+    const {default: _, ...rest} = slots;
+    return rest;
   });
 </script>
 
@@ -35,14 +30,20 @@
     :name="name"
     :disabled="disabled"
     :has-feedback-for="error ? 'error' : ''"
+    :require-options-match="requireOptionMatch"
     v-bind="$attrs"
   >
     <InputCombobox
       slot="input"
-      v-model="valueProxy"
+      v-model="modelValue"
       :options="options"
       :label="label"
-    />
+    >
+      <!-- Forward all other slots -->
+      <template v-for="(_, name) in forwardedSlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData || {}"></slot>
+      </template>
+    </InputCombobox>
 
     <div slot="after">
       <slot name="after">
diff --git a/resources/js/components/form/InputCombobox.vue b/resources/js/components/form/InputCombobox.vue
index 8f86358c022..27ec1a049dc 100644
--- a/resources/js/components/form/InputCombobox.vue
+++ b/resources/js/components/form/InputCombobox.vue
@@ -18,13 +18,13 @@
   import InputComboboxOption from '@/components/form/InputComboboxOption.vue';
 
   const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
+    (e: 'update:modelValue', value: string | number): void;
   }>();
   const props = withDefaults(
     defineProps<{
       label?: string;
       options?: Array<SelectItem>;
-      modelValue?: string;
+      modelValue?: string | number | boolean;
       requireOptionMatch?: boolean;
       transformModelValue?: (newValue: SelectOption | null) => string;
       class?: HTMLAttributes['class'];
@@ -60,7 +60,7 @@
 
       if (!selectedItem && !props.requireOptionMatch) {
         selectedItem = {
-          label: props.modelValue,
+          label: String(props.modelValue),
           value: props.modelValue,
         };
       }
@@ -76,7 +76,7 @@
   });
 
   const reference = useTemplateRef<HTMLElement | null>('reference');
-  const query = ref(props.modelValue ?? '');
+  const query = ref(String(props.modelValue ?? ''));
 
   const referenceCoordinates = computed(() => {
     const coordinates = reference.value?.getBoundingClientRect();
@@ -88,12 +88,12 @@
   });
 
   function matchesQuery(query: MaybeRef<string>, item: MaybeRef<SelectOption>) {
-    const lowerQuery = unref(query).toLowerCase();
+    const lowerQuery = String(unref(query)).toLowerCase();
     const option = unref(item);
 
     return (
       option.label.toLowerCase().includes(lowerQuery) ||
-      option.value.toLowerCase().includes(lowerQuery) ||
+      option.value.toString().toLowerCase().includes(lowerQuery) ||
       (option.data?.keywords?.toLowerCase().includes(lowerQuery) ?? false)
     );
   }
diff --git a/resources/js/components/form/InputComboboxOption.vue b/resources/js/components/form/InputComboboxOption.vue
index 1518f08b1fd..50965173dd3 100644
--- a/resources/js/components/form/InputComboboxOption.vue
+++ b/resources/js/components/form/InputComboboxOption.vue
@@ -15,16 +15,21 @@
         :checked="selected"
         :hint="option.data?.hint"
       >
-        <template
-          v-if="option.label.startsWith('$') || option.label.startsWith('@')"
-        >
-          <code>
+        <div class="flex gap-2 items-center">
+          <template v-if="option.data?.indicator">
+            <craft-indicator v-bind="option.data.indicator"></craft-indicator>
+          </template>
+          <template
+            v-if="option.label.startsWith('$') || option.label.startsWith('@')"
+          >
+            <code>
+              {{ option.label }}
+            </code>
+          </template>
+          <template v-else>
             {{ option.label }}
-          </code>
-        </template>
-        <template v-else>
-          {{ option.label }}
-        </template>
+          </template>
+        </div>
       </craft-option>
     </slot>
   </ComboboxOption>
diff --git a/resources/js/pages/SettingsGeneralPage.vue b/resources/js/pages/SettingsGeneralPage.vue
index 9f81c979609..115047e44ee 100644
--- a/resources/js/pages/SettingsGeneralPage.vue
+++ b/resources/js/pages/SettingsGeneralPage.vue
@@ -2,44 +2,38 @@
   import {t} from '@craftcms/cp';
   import AppLayout from '@/layout/AppLayout.vue';
   import {store} from '@/actions/CraftCms/Cms/Http/Controllers/Settings/GeneralSettingsController';
-  import {type SystemData, type TimezoneOption} from '@/types/settings';
+  import {type SystemData} from '@/types/settings';
   import {useForm} from '@inertiajs/vue3';
   import useCraftData from '@/composables/useCraftData';
   import TransitionFade from '@/components/TransitionFade.vue';
   import {computed} from 'vue';
   import {useEventListener} from '@vueuse/core';
-  import type {SelectOption, SuggestionGroup} from '@/types';
+  import type {SelectItem} from '@/types';
   import CalloutReadOnly from '@/components/CalloutReadOnly.vue';
+  import CraftCombobox from '@/components/form/CraftCombobox.vue';
+  import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
+  import {transformBooleanOptions} from '@/utils/transformBooleanOptions';
 
   const props = defineProps<{
-    readOnly?: boolean;
     system: SystemData;
-    nameSuggestions?: Array<SuggestionGroup>;
-    timezoneOptions?: Array<TimezoneOption>;
-    systemStatusOptions?: Array<SelectOption>;
-    saveUrl: string;
+    nameSuggestions?: Array<SelectItem>;
+    timezoneOptions?: Array<SelectItem>;
+    systemStatusOptions?: Array<SelectItem>;
     flash?: Record<any, any>;
     errors: Record<any, any>;
   }>();
 
   const flash = computed(() => props.flash);
   const errors = computed(() => props.errors);
+  const {readOnly} = useCraftData();
 
   const form = useForm({
-    name: props.system.name,
+    name: props.system.name ?? '',
     live: props.system.live,
     retryDuration: props.system.retryDuration,
     timeZone: props.system.timeZone,
   });
 
-  function handleUpdate(event: CustomEvent) {
-    const target = event.target as HTMLSelectElement & {modelValue: string};
-    if (target) {
-      // @ts-ignore we're just going to trust that `name` is a key of `form` for now
-      form[target.name] = target.modelValue;
-    }
-  }
-
   // Handle cmd + s events
   useEventListener('keydown', (event) => {
     if ((event.metaKey || event.ctrlKey) && event.key === 's') {
@@ -48,6 +42,29 @@
     }
   });
 
+  const statusOptions = computed(() => {
+    return [
+      {
+        label: t('Online'),
+        value: true,
+        data: {
+          indicator: {variant: 'success'},
+        },
+      },
+      {
+        label: t('Offline'),
+        value: false,
+        data: {
+          indicator: {variant: 'empty'},
+        },
+      },
+      ...transformBooleanOptions(props.systemStatusOptions ?? [], {
+        trueLabel: t('Online'),
+        falseLabel: t('Offline'),
+      }),
+    ];
+  });
+
   function save() {
     form.clearErrors().submit(store());
   }
@@ -123,26 +140,19 @@
               </ul>
             </craft-callout>
           </template>
-          <craft-combobox
+
+          <CraftCombobox
             :label="t('System Name')"
             id="name"
             name="name"
             v-model="form.name"
-            :has-feedback-for="errors?.name ? 'error' : ''"
+            :error="errors.name"
             :disabled="readOnly"
             :require-option-match="false"
             show-all-on-empty
+            :options="nameSuggestions"
           >
-            <template v-for="(group, idx) in nameSuggestions" :key="idx">
-              <craft-option
-                v-for="suggestion in group.data"
-                :key="suggestion.name"
-                .choiceValue="suggestion.name"
-                .hint="suggestion.hint"
-                >{{ suggestion.name }}</craft-option
-              >
-            </template>
-            <div slot="after">
+            <template #after>
               <craft-callout
                 variant="info"
                 appearance="plain"
@@ -155,83 +165,45 @@
                   >{{ t('Learn more') }}</a
                 >
               </craft-callout>
-            </div>
-
-            <div slot="feedback">
-              <ul class="error-list" v-if="errors?.name">
-                <li>{{ errors.name }}</li>
-              </ul>
-            </div>
-          </craft-combobox>
+            </template>
+          </CraftCombobox>
 
-          <craft-combobox
+          <CraftCombobox
             :label="t('System Status')"
             id="live"
             name="live"
-            .modelValue="system.live ? '1' : '0'"
-            :has-feedback-for="errors?.live ? 'error' : ''"
-            @model-value-changed="handleUpdate"
+            v-model="form.live"
+            :error="errors?.live"
             :disabled="readOnly"
             show-all-on-empty
+            :options="statusOptions"
           >
-            <craft-option .choiceValue="'1'">
-              <div class="tw:flex tw:items-center tw:gap-1">
-                <craft-indicator variant="success"></craft-indicator>
-                <span>{{ t('Online') }}</span>
-              </div>
-            </craft-option>
-            <craft-option .choiceValue="'0'">
-              <div class="tw:flex tw:items-center tw:gap-1">
-                <craft-indicator variant="danger"></craft-indicator>
-                <span>{{ t('Offline') }}</span>
-              </div>
-            </craft-option>
-
-            <template v-for="option in systemStatusOptions" :key="option.label">
-              <template v-if="option.optgroup"></template>
-              <template v-else>
-                <craft-option .choiceValue="option.value">
-                  <div class="tw:flex tw:items-center tw:gap-1">
-                    <craft-indicator
-                      :variant="Boolean(option.value) ? 'success' : 'error'"
-                    ></craft-indicator>
-                    <span class="tw:font-mono">{{ option.label }}</span>
-                  </div>
-                </craft-option>
-              </template>
+            <template #after>
+              <craft-callout
+                variant="info"
+                appearance="plain"
+                class="p-0"
+                icon="lightbulb"
+                v-html="
+                  t(
+                    'This can be set to an environment variable with a boolean value ({examples})',
+                    {
+                      examples:
+                        '<code>yes</code>/<code>no</code>/<code>true</code>/<code>false</code>/<code>on</code>/<code>off</code>/<code>0</code>/<code>1</code>',
+                    }
+                  )
+                "
+              >
+              </craft-callout>
             </template>
+          </CraftCombobox>
 
-            <craft-callout
-              slot="after"
-              variant="info"
-              appearance="plain"
-              class="p-0"
-              icon="lightbulb"
-              v-html="
-                t(
-                  'This can be set to an environment variable with a boolean value ({examples})',
-                  {
-                    examples:
-                      '<code>yes</code>/<code>no</code>/<code>true</code>/<code>false</code>/<code>on</code>/<code>off</code>/<code>0</code>/<code>1</code>',
-                  }
-                )
-              "
-            >
-            </craft-callout>
-
-            <div slot="feedback">
-              <ul class="error-list" v-if="errors.live">
-                <li>{{ errors.live }}</li>
-              </ul>
-            </div>
-          </craft-combobox>
-
-          <craft-input
+          <CraftInput
             :label="t('Retry Duration')"
             id="retry-duration"
             name="retryDuration"
             v-model="form.retryDuration"
-            :has-feedback-for="errors?.retryDuration ? 'error' : ''"
+            :error="errors?.retryDuration"
             inputmode="numeric"
             maxlength="4"
             :disabled="readOnly"
@@ -244,48 +216,36 @@
                 )
               "
             ></div>
-            <ul class="error-list" v-if="errors?.retryDuration" slot="feedback">
-              <li>{{ errors.retryDuration }}</li>
-            </ul>
-          </craft-input>
+          </CraftInput>
 
-          <craft-combobox
+          <CraftCombobox
             :label="t('Time Zone')"
             id="time-zone"
             name="timeZone"
-            .modelValue="form.timeZone"
-            @model-value-changed="handleUpdate"
-            :has-feedback-for="errors?.timeZone ? 'error' : ''"
+            v-model="form.timeZone"
+            :error="errors.timeZone"
             :disabled="readOnly"
             show-all-on-empty
+            :options="timezoneOptions"
           >
-            <craft-option
-              v-for="timezone in timezoneOptions"
-              :key="timezone.value"
-              .choiceValue="timezone.value"
-            >
-              {{ timezone.label
-              }}{{ timezone.data?.hint ? ` — ${timezone.data.hint}` : '' }}
-            </craft-option>
-            <craft-callout
-              slot="after"
-              variant="info"
-              appearance="plain"
-              class="p-0"
-              icon="lightbulb"
-            >
-              This can be set to an environment variable with a value of a
-              <a
-                href="https://www.php.net/manual/en/timezones.php"
-                rel="noopener"
-                target="_blank"
-                >supported time zone</a
-              >.
-            </craft-callout>
-            <ul class="error-list" v-if="errors?.timeZone" slot="feedback">
-              <li>{{ errors.timeZone }}</li>
-            </ul>
-          </craft-combobox>
+            <template #after>
+              <craft-callout
+                slot="after"
+                variant="info"
+                appearance="plain"
+                class="p-0"
+                icon="lightbulb"
+              >
+                This can be set to an environment variable with a value of a
+                <a
+                  href="https://www.php.net/manual/en/timezones.php"
+                  rel="noopener"
+                  target="_blank"
+                  >supported time zone</a
+                >.
+              </craft-callout>
+            </template>
+          </CraftCombobox>
         </div>
       </div>
     </AppLayout>
diff --git a/resources/js/types/settings.ts b/resources/js/types/settings.ts
index f79bc92b51d..bada4de0f9e 100644
--- a/resources/js/types/settings.ts
+++ b/resources/js/types/settings.ts
@@ -1,5 +1,3 @@
-import type {SelectOption} from '@/types/index';
-
 export const Edition = {
   Solo: 0,
   Team: 1,
@@ -14,9 +12,3 @@ export interface SystemData {
   retryDuration: number;
   timeZone: string;
 }
-
-export interface TimezoneOption extends SelectOption {
-  data?: {
-    hint?: string;
-  };
-}
diff --git a/resources/js/utils/transformBooleanOptions.ts b/resources/js/utils/transformBooleanOptions.ts
new file mode 100644
index 00000000000..e07851db74f
--- /dev/null
+++ b/resources/js/utils/transformBooleanOptions.ts
@@ -0,0 +1,48 @@
+import {t} from '@craftcms/cp';
+import type {SelectItem, SelectOption} from '@/types';
+
+function addBooleanData(
+  option: SelectOption,
+  {
+    trueLabel = t('Enabled'),
+    falseLabel = t('Disabled'),
+  }: {trueLabel?: string; falseLabel?: string} = {}
+) {
+  const isEnvVar = option.value.startsWith('$') || option.value.startsWith('@');
+
+  return isEnvVar
+    ? {
+        ...option,
+        data: {
+          ...(option.data || {}),
+          hint: option.data?.boolean === '1' ? trueLabel : falseLabel,
+          indicator: option.data?.boolean
+            ? {
+                variant: option.data?.boolean === '1' ? 'success' : 'empty',
+              }
+            : null,
+        },
+      }
+    : option;
+}
+
+export function transformBooleanOptions(
+  options: Array<SelectItem>,
+  {
+    trueLabel = t('Enabled'),
+    falseLabel = t('Disabled'),
+  }: {trueLabel?: string; falseLabel?: string} = {}
+) {
+  return options.map((option) => {
+    if (option.type === 'optgroup') {
+      return {
+        ...option,
+        options: option.options.map((option) =>
+          addBooleanData(option, {trueLabel, falseLabel})
+        ),
+      };
+    }
+
+    return addBooleanData(option, {trueLabel, falseLabel});
+  });
+}
diff --git a/src/Http/Controllers/Settings/GeneralSettingsController.php b/src/Http/Controllers/Settings/GeneralSettingsController.php
index 7ce97d61891..f0ca1e68c57 100644
--- a/src/Http/Controllers/Settings/GeneralSettingsController.php
+++ b/src/Http/Controllers/Settings/GeneralSettingsController.php
@@ -4,19 +4,16 @@
 
 namespace CraftCms\Cms\Http\Controllers\Settings;
 
-use CraftCms\Cms\Config\GeneralConfig;
 use CraftCms\Cms\Cp\SelectOptions;
 use CraftCms\Cms\Http\RespondsWithFlash;
+use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\ProjectConfig\ProjectConfig;
 use CraftCms\Cms\Support\Env;
 use CraftCms\Cms\Support\Url;
 use CraftCms\Cms\Validation\Rules\TimezoneRule;
-use Illuminate\Contracts\View\View;
-use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Validator;
-use Inertia\Inertia;
-use Inertia\Response;
+use Symfony\Component\HttpFoundation\Response;
 
 use function CraftCms\Cms\t;
 
@@ -28,33 +25,35 @@ public function __construct(
         private ProjectConfig $projectConfig,
     ) {}
 
-    public function index(GeneralConfig $generalConfig): Response|View
+    public function index(): CpScreenResponse
     {
-        return Inertia::render('SettingsGeneralPage', [
-            'system' => $this->projectConfig->get('system') ?? [],
-            'nameSuggestions' => SelectOptions::getEnvSuggestions(),
-            'timezoneOptions' => [
-                ...SelectOptions::getTimeZoneOptions(),
-                ...SelectOptions::getEnvOptions(),
-            ],
-            'crumbs' => [
+        return new CpScreenResponse()
+            ->title(t('General Settings'))
+            ->crumbs([
                 ['label' => t('Settings'), 'url' => Url::cpUrl('settings')],
                 ['label' => t('General Settings')],
-            ],
-            'systemStatusOptions' => SelectOptions::getBooleanEnvOptions(),
-            'readOnly' => ! $generalConfig->allowAdminChanges,
-            'saveUrl' => route('craft.cp.settings.general.store'),
-        ]);
+            ])
+            ->redirectUrl('settings')
+            ->inertiaPage('SettingsGeneralPage', [
+                'system' => $this->projectConfig->get('system') ?? [],
+                'nameSuggestions' => SelectOptions::getEnvSuggestions(),
+                'timezoneOptions' => [
+                    ...SelectOptions::getTimeZoneOptions(),
+                    ...SelectOptions::getEnvOptions(),
+                ],
+                'systemStatusOptions' => SelectOptions::getBooleanEnvOptions(),
+            ]);
     }
 
-    public function store(Request $request): RedirectResponse
+    public function store(Request $request): Response
     {
         $resolvedValues = [];
 
         $envAllowedKeys = ['name', 'live', 'timeZone'];
+        $booleans = ['live'];
         foreach ($request->all() as $key => $value) {
             if (in_array($key, $envAllowedKeys) && is_string($value) && str_starts_with($value, '$')) {
-                $resolvedValues[$key] = Env::parse($value);
+                $resolvedValues[$key] = in_array($key, $booleans) ? Env::parseBoolean($value) : Env::parse($value);
             } else {
                 $resolvedValues[$key] = $value;
             }
@@ -82,6 +81,6 @@ public function store(Request $request): RedirectResponse
 
         $this->projectConfig->set('system', $systemSettings, 'Update system settings.');
 
-        return back()->with('success', t('System settings saved.'));
+        return $this->asSuccess(t('System settings saved.'));
     }
 }
diff --git a/tests/Feature/Http/Controllers/Settings/GeneralSettingsControllerTest.php b/tests/Feature/Http/Controllers/Settings/GeneralSettingsControllerTest.php
index f3d6f1a0b3e..4f992cb930f 100644
--- a/tests/Feature/Http/Controllers/Settings/GeneralSettingsControllerTest.php
+++ b/tests/Feature/Http/Controllers/Settings/GeneralSettingsControllerTest.php
@@ -37,7 +37,7 @@
     Cms::config()->allowAdminChanges = false;
 
     get(action([GeneralSettingsController::class, 'index']))
-        ->assertInertia(fn (AssertableInertia $page) => $page->where('readOnly', true))
+        ->assertInertia(fn (AssertableInertia $page) => $page->where('craft.readOnly', true))
         ->assertOk();
 });