diff --git a/packages/craftcms-cp/scripts/generate-vue-wrappers.js b/packages/craftcms-cp/scripts/generate-vue-wrappers.js
index f494c43792e..7e190849fc7 100644
--- a/packages/craftcms-cp/scripts/generate-vue-wrappers.js
+++ b/packages/craftcms-cp/scripts/generate-vue-wrappers.js
@@ -230,6 +230,10 @@ function generateValueWrapper(component) {
   });
 
   const model = defineModel<${component.modelType}>();
+  
+  defineProps<{
+    error?: null | string
+  }>()
 </script>
 
 <template>
@@ -237,8 +241,15 @@ function generateValueWrapper(component) {
     v-bind="$attrs"
     .modelValue="model"
     @model-value-changed="model = ($event.target as ${component.className})?.modelValue"
+    :has-feedback-for="error ? 'error' : ''"
   >
     <slot></slot>
+    
+    <div slot="feedback">
+      <ul class="error-list" v-if="error">
+        <li>{{ error }}</li>
+      </ul>
+    </div>
   </${component.tagName}>
 </template>
 `;
diff --git a/packages/craftcms-cp/src/components/checkbox/checkbox.ts b/packages/craftcms-cp/src/components/checkbox/checkbox.ts
index 191568c8b4c..7f3ebca79b5 100644
--- a/packages/craftcms-cp/src/components/checkbox/checkbox.ts
+++ b/packages/craftcms-cp/src/components/checkbox/checkbox.ts
@@ -8,9 +8,10 @@ export default class CraftCheckbox extends LionCheckbox {
       css`
         /* same as radio, potentially consolidate */
         :host {
+          --_gap-x: var(--gap-x, --c-spacing-md);
           display: grid;
           align-items: center;
-          gap: 0 var(--c-spacing-md);
+          gap: 0 var(--_gap-x);
           grid-template-areas: 'input label' '. help-text';
           grid-template-columns: auto 1fr;
           grid-template-rows: repeat(2, auto);
@@ -36,6 +37,8 @@ export default class CraftCheckbox extends LionCheckbox {
             var(--c-form-control-border-color)
           );
           border-radius: var(--c-input-radius, var(--c-radius-sm));
+          width: var(--c-size-control-2xs);
+          height: var(--c-size-control-2xs);
         }
 
         .choice-field__help-text {
diff --git a/packages/craftcms-cp/src/styles/shared/tokens.css b/packages/craftcms-cp/src/styles/shared/tokens.css
index 39c24cb3697..409c8a93059 100644
--- a/packages/craftcms-cp/src/styles/shared/tokens.css
+++ b/packages/craftcms-cp/src/styles/shared/tokens.css
@@ -137,6 +137,7 @@
   --c-size-icon-lg: calc(22rem / 16);
   --c-size-icon-xl: calc(30rem / 16);
 
+  --c-size-control-2xs: calc(14rem / 16);
   --c-size-control-xs: calc(16rem / 16);
   --c-size-control-sm: calc(24rem / 16);
   --c-size-control-md: calc(34rem / 16);
diff --git a/resources/js/components/ActionMenu.vue b/resources/js/components/ActionMenu.vue
index c09a9987cbf..f5bba5026ff 100644
--- a/resources/js/components/ActionMenu.vue
+++ b/resources/js/components/ActionMenu.vue
@@ -30,16 +30,18 @@
 
 <template>
   <craft-action-menu>
-    <craft-button
-      type="button"
-      slot="invoker"
-      icon
-      size="small"
-      variant="inherit"
-      appearance="plain"
-    >
-      <craft-icon :name="icon" :label="label"></craft-icon>
-    </craft-button>
+    <slot name="invoker" :label="label">
+      <craft-button
+        type="button"
+        slot="invoker"
+        icon
+        size="small"
+        variant="inherit"
+        appearance="plain"
+      >
+        <craft-icon :name="icon" :label="label"></craft-icon>
+      </craft-button>
+    </slot>
 
     <div slot="content" class="m-sm">
       <craft-action-item
@@ -48,18 +50,27 @@
         :key="`safe-${idx}`"
         :icon="action.icon"
         @click="action.onClick"
-        >{{ action.label }}</craft-action-item
-      >
-      <hr class="m-0" />
-      <craft-action-item
-        v-for="(action, idx) in dangerousActions"
-        :id="action.id"
-        :key="`dangerous-${idx}`"
-        :icon="action.icon"
-        :variant="action.variant"
-        @click="action.onClick"
-        >{{ action.label }}</craft-action-item
-      >
+        >{{ action.label }}
+        <craft-shortcut slot="suffix" class="ml-2" v-if="action.shortcut">{{
+          action.shortcut
+        }}</craft-shortcut>
+      </craft-action-item>
+
+      <template v-if="dangerousActions.length">
+        <hr class="m-0" />
+        <craft-action-item
+          v-for="(action, idx) in dangerousActions"
+          :id="action.id"
+          :key="`dangerous-${idx}`"
+          :icon="action.icon"
+          :variant="action.variant"
+          @click="action.onClick"
+          >{{ action.label }}
+          <craft-shortcut slot="suffix" class="ml-2" v-if="action.shortcut">{{
+            action.shortcut
+          }}</craft-shortcut>
+        </craft-action-item>
+      </template>
     </div>
   </craft-action-menu>
 </template>
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/InlineFlash.vue b/resources/js/components/InlineFlash.vue
new file mode 100644
index 00000000000..86acc4be651
--- /dev/null
+++ b/resources/js/components/InlineFlash.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import TransitionFade from '@/components/TransitionFade.vue';
+  import {useFlash} from '@/composables/useFlash';
+
+  withDefaults(
+    defineProps<{
+      isActive?: boolean;
+    }>(),
+    {isActive: false}
+  );
+
+  const {successFlash, errorFlash} = useFlash();
+</script>
+
+<template>
+  <TransitionFade>
+    <template v-if="isActive && successFlash">
+      <craft-callout
+        variant="success"
+        appearance="plain"
+        icon="circle-check"
+        inline
+        class="p-0"
+        >{{ successFlash }}</craft-callout
+      >
+    </template>
+    <template v-if="isActive && errorFlash">
+      <craft-callout
+        variant="danger"
+        appearance="plain"
+        icon="triangle-exclamation"
+        inline
+        class="p-0"
+      >
+        {{ errorFlash }}
+      </craft-callout>
+    </template>
+  </TransitionFade>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/components/PermissionList.vue b/resources/js/components/PermissionList.vue
new file mode 100644
index 00000000000..cf5d9bff549
--- /dev/null
+++ b/resources/js/components/PermissionList.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+  import {
+    getNestedKeys,
+    hasNested,
+    type PermissionItem,
+  } from '@/utils/permissions';
+  import CraftCheckbox from '@craftcms/cp/vue/CraftCheckbox.vue';
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: Array<string>): void;
+  }>();
+  const props = withDefaults(
+    defineProps<{
+      modelValue: Array<string>;
+      permissions?: Record<string, PermissionItem>;
+      disabled?: boolean;
+      level?: number;
+    }>(),
+    {permissions: () => ({}), modelValue: () => [], disabled: false, level: 0}
+  );
+
+  function toggleItem(key: string) {
+    const lowerKey = key.toLowerCase();
+    const index = props.modelValue.indexOf(lowerKey);
+    if (index === -1) {
+      emit('update:modelValue', [...props.modelValue, lowerKey]);
+    } else {
+      const keysToRemove = new Set([
+        lowerKey,
+        ...getNestedKeys(props.permissions[key]),
+      ]);
+      emit(
+        'update:modelValue',
+        props.modelValue.filter((v) => !keysToRemove.has(v))
+      );
+    }
+  }
+</script>
+
+<template>
+  <ul
+    class="group"
+    v-for="(item, key) in permissions"
+    :key="key"
+    :style="{
+      '--gap-x': `calc((${level} * 1lh) + var(--c-spacing-md))`,
+    }"
+  >
+    <li>
+      <CraftCheckbox
+        :label="item.label"
+        :model-value="modelValue.includes(key.toLowerCase())"
+        :value="key"
+        :disabled="disabled"
+        @update:model-value="toggleItem(key)"
+        :class="{
+          'cp-checkbox-indentation': level! > 0,
+        }"
+      >
+        <div v-if="item.info || item.warning" slot="help-text">
+          <template v-if="item.info">
+            {{ item.info }}
+          </template>
+
+          <template v-if="item.warning">
+            <div class="flex gap-1 items-center" data-color="warning">
+              <craft-icon name="triangle-exclamation"></craft-icon>
+              {{ item.warning }}
+            </div>
+          </template>
+        </div>
+      </CraftCheckbox>
+
+      <PermissionList
+        v-if="hasNested(item)"
+        :permissions="item.nested"
+        :model-value="modelValue"
+        :disabled="disabled || !modelValue.includes(item.key.toLowerCase())"
+        @update:model-value="emit('update:modelValue', $event)"
+        :level="level! + 1"
+      />
+    </li>
+  </ul>
+</template>
+
+<style scoped lang="scss">
+  .label {
+    display: flex;
+  }
+
+  .group {
+    margin-block: var(--c-spacing-sm);
+  }
+
+  .cp-checkbox-indentation {
+    position: relative;
+  }
+
+  .cp-checkbox-indentation::before {
+    content: '';
+    position: absolute;
+    // Position the indicator halfway from the top of the checkbox
+    inset-block-start: calc(1lh / 2);
+    inset-inline-start: calc(
+      var(--c-size-control-2xs) + (var(--c-spacing) * 2)
+    );
+    width: calc(var(--gap-x) - (var(--c-spacing) * 3.5));
+    height: 1px;
+    background-color: var(--c-color-neutral-border-quiet);
+  }
+</style>
diff --git a/resources/js/components/form/CraftCombobox.vue b/resources/js/components/form/CraftCombobox.vue
index 2123870271c..4b21500793d 100644
--- a/resources/js/components/form/CraftCombobox.vue
+++ b/resources/js/components/form/CraftCombobox.vue
@@ -2,13 +2,13 @@
   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 props = defineProps<{
-    modelValue: string;
+    modelValue: string | boolean | number;
     label: string;
     id?: string;
     name?: string;
@@ -16,6 +16,7 @@
     options?: Array<SelectItem>;
     callouts?: Array<string>;
     error?: string;
+    requireOptionMatch?: boolean;
   }>();
 
   const valueProxy = computed({
@@ -26,6 +27,12 @@
       emit('update:modelValue', newValue);
     },
   });
+
+  const slots = useSlots();
+  const forwardedSlots = computed(() => {
+    const {default: _, ...rest} = slots;
+    return rest;
+  });
 </script>
 
 <template>
@@ -42,22 +49,30 @@
       v-model="valueProxy"
       :options="options"
       :label="label"
-    />
+      :require-option-match="requireOptionMatch"
+    >
+      <!-- Forward all other slots -->
+      <template v-for="(_, name) in forwardedSlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData || {}"></slot>
+      </template>
+    </InputCombobox>
 
     <div slot="after">
-      <craft-callout
-        v-if="callouts?.includes('envVars')"
-        variant="info"
-        appearance="plain"
-        class="p-0"
-        icon="lightbulb"
-      >
-        {{ t('This can begin with an environment variable.') }}
-        <a
-          href="https://craftcms.com/docs/5.x/configure.html#control-panel-settings"
-          >{{ t('Learn more') }}</a
+      <slot name="after">
+        <craft-callout
+          v-if="callouts?.includes('envVars')"
+          variant="info"
+          appearance="plain"
+          class="p-0"
+          icon="lightbulb"
         >
-      </craft-callout>
+          {{ t('This can begin with an environment variable.') }}
+          <a
+            href="https://craftcms.com/docs/5.x/configure.html#control-panel-settings"
+            >{{ t('Learn more') }}</a
+          >
+        </craft-callout>
+      </slot>
     </div>
 
     <div slot="feedback">
diff --git a/resources/js/components/form/ErrorSummary.vue b/resources/js/components/form/ErrorSummary.vue
new file mode 100644
index 00000000000..d317079431b
--- /dev/null
+++ b/resources/js/components/form/ErrorSummary.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/cp';
+
+  defineProps<{
+    errors: Record<string, string>;
+  }>();
+</script>
+
+<template>
+  <craft-callout variant="danger" icon="triangle-exclamation" class="mb-3">
+    <div slot="title" class="font-bold">
+      {{ t('Could not save settings') }}
+    </div>
+    <ul>
+      <li v-for="(error, key) in errors" :key="key">
+        {{ error }}
+      </li>
+    </ul>
+  </craft-callout>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/components/form/Input.vue b/resources/js/components/form/Input.vue
deleted file mode 100644
index 8dd0b76d6d1..00000000000
--- a/resources/js/components/form/Input.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-  import {defineModel} from 'vue';
-
-  const model = defineModel();
-  defineProps<{
-    label?: string;
-    name?: string;
-    error?: string;
-    disabled?: boolean;
-  }>();
-</script>
-
-<template>
-  <craft-input
-    :label="label"
-    :name="name"
-    :disabled="disabled"
-    v-model="model"
-    v-bind="$attrs"
-  >
-    <ul class="error-list" v-if="error" slot="feedback">
-      <li>{{ error }}</li>
-    </ul>
-  </craft-input>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/resources/js/components/form/InputCombobox.vue b/resources/js/components/form/InputCombobox.vue
index f2035803298..15a4c3578ad 100644
--- a/resources/js/components/form/InputCombobox.vue
+++ b/resources/js/components/form/InputCombobox.vue
@@ -142,7 +142,7 @@
 </script>
 
 <template>
-  <div class="relative" ref="reference">
+  <div class="relative w-full" ref="reference">
     <Combobox v-model="selectedOption">
       <ComboboxInput
         @change="query = $event.target.value"
@@ -189,11 +189,15 @@
             <template v-if="item.type === 'optgroup'">
               <div class="group-label">{{ item.label }}</div>
               <template v-for="(option, idx) in item.options" :key="idx">
-                <InputComboboxOption :option="option" />
+                <slot name="option" :option="option">
+                  <InputComboboxOption :option="option" />
+                </slot>
               </template>
             </template>
             <template v-else>
-              <InputComboboxOption :option="item" />
+              <slot name="option" :option="item">
+                <InputComboboxOption :option="item" />
+              </slot>
             </template>
           </template>
         </ComboboxOptions>
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/components/sites/SiteFields.vue b/resources/js/components/sites/SiteFields.vue
index 945caf67dfe..ef10f8c28b3 100644
--- a/resources/js/components/sites/SiteFields.vue
+++ b/resources/js/components/sites/SiteFields.vue
@@ -4,9 +4,10 @@
   import {type InertiaForm, usePage} from '@inertiajs/vue3';
   import {computed, useTemplateRef} from 'vue';
   import type {SelectItem, SelectOption, Site} from '@/types';
-  import InputCombobox from '@/components/form/InputCombobox.vue';
   import {useInputGenerator} from '@/composables/useInputGenerator';
   import {toHandle} from '@craftcms/cp/utilities/string.ts.mjs';
+  import {transformBooleanOptions} from '@/utils/transformBooleanOptions';
+  import CraftCombobox from '@/components/form/CraftCombobox.vue';
 
   const props = withDefaults(
     defineProps<{
@@ -26,21 +27,6 @@
     groupOptions: Array<SelectOption>;
   }>();
 
-  function addBooleanHints(option: SelectOption) {
-    const isEnvVar =
-      option.value.startsWith('$') || option.value.startsWith('@');
-
-    return isEnvVar
-      ? {
-          ...option,
-          data: {
-            ...(option.data || {}),
-            hint: option.data?.boolean === '1' ? t('Enabled') : t('Disabled'),
-          },
-        }
-      : option;
-  }
-
   const form = computed(() => props.inertiaForm);
   const isMultisite = computed(() => page.props.isMultisite);
   const groupOptions = computed(() => page.props.groupOptions);
@@ -49,16 +35,7 @@
   });
   const languageOptions = computed(() => page.props.languageOptions);
   const booleanEnvOptions = computed(() =>
-    page.props.booleanEnvOptions.map((option) => {
-      if (option.type === 'optgroup') {
-        return {
-          ...option,
-          options: option.options.map(addBooleanHints),
-        };
-      }
-
-      return addBooleanHints(option);
-    })
+    transformBooleanOptions(page.props.booleanEnvOptions)
   );
   const baseUrlSuggestions = computed(() => page.props.baseUrlSuggestions);
   const site = computed(() => page.props.site);
@@ -66,15 +43,6 @@
   const handleRef = useTemplateRef<CraftInput | null>('handle');
   const baseUrlRef = useTemplateRef<CraftInput | null>('baseUrl');
 
-  const enabledValue = computed({
-    get() {
-      return form.value.enabled ? '1' : '0';
-    },
-    set(newValue) {
-      form.value.enabled = newValue;
-    },
-  });
-
   const handleGenerator = useInputGenerator(
     () => form.value.name,
     (v) => (form.value.handle = toHandle(v))
@@ -97,18 +65,6 @@
 </script>
 
 <template>
-  <template v-if="form?.hasErrors">
-    <craft-callout variant="danger" icon="triangle-exclamation">
-      <div slot="title" class="tw:font-bold">
-        {{ t('Could not save settings') }}
-      </div>
-      <ul>
-        <li v-for="(error, idx) in form.errors" :key="idx">
-          {{ error }}
-        </li>
-      </ul>
-    </craft-callout>
-  </template>
   <input v-if="form.id" name="id" v-model="form.id" type="hidden" />
 
   <craft-select
@@ -146,13 +102,15 @@
     </div>
   </craft-select>
 
-  <craft-input :label="t('Name')" id="name" name="name" :disabled="readOnly">
-    <InputCombobox
-      slot="input"
-      v-model="form.name"
-      :options="nameSuggestions"
-    />
-
+  <CraftCombobox
+    v-model="form.name"
+    :options="nameSuggestions"
+    :label="t('Name')"
+    id="name"
+    name="name"
+    :disabled="readOnly"
+    :error="form.errors?.name"
+  >
     <div slot="after">
       <craft-callout
         variant="info"
@@ -167,13 +125,7 @@
         >
       </craft-callout>
     </div>
-
-    <div slot="feedback">
-      <ul class="error-list" v-if="form.errors?.name">
-        <li>{{ form.errors.name }}</li>
-      </ul>
-    </div>
-  </craft-input>
+  </CraftCombobox>
 
   <craft-input-handle
     :label="t('Handle')"
@@ -191,22 +143,18 @@
     </div>
   </craft-input-handle>
 
-  <craft-input
+  <CraftCombobox
+    v-model="form.language"
     :label="t('Language')"
     name="language"
     id="site-language"
     :help-text="t('The language content in this site will use.')"
+    :options="languageOptions"
     :disabled="readOnly"
-    :has-feedback-for="form.errors?.language ? 'error' : ''"
+    :error="form.errors?.language"
+    :require-option-match="true"
   >
-    <InputCombobox
-      slot="input"
-      v-model="form.language"
-      :options="languageOptions"
-      :require-option-match="true"
-    />
-
-    <div slot="after">
+    <template #after>
       <craft-callout
         variant="info"
         appearance="plain"
@@ -222,50 +170,20 @@
         "
       >
       </craft-callout>
-    </div>
-
-    <div slot="feedback">
-      <ul class="error-list" v-if="form.errors?.language">
-        <li>{{ form.errors.language }}</li>
-      </ul>
-    </div>
-  </craft-input>
+    </template>
+  </CraftCombobox>
 
   <template v-if="isMultisite || !site.id">
-    <craft-input
+    <CraftCombobox
       :label="t('Status')"
       name="enabled"
       id="enabled"
       :disabled="readOnly"
-      :has-feedback-for="form.errors?.enabled ? 'error' : ''"
+      v-model="form.enabled"
+      :require-option-match="true"
+      :options="booleanEnvOptions"
+      :error="form.errors?.enabled"
     >
-      <InputCombobox
-        slot="input"
-        v-model="enabledValue"
-        :options="booleanEnvOptions"
-        :require-option-match="true"
-      >
-        <template #option="{active, selected, option}">
-          <craft-option
-            :active="active"
-            :checked="selected"
-            :hint="option.data?.hint"
-          >
-            <div class="inline-flex items-center gap-1">
-              <craft-indicator
-                :variant="option.data?.boolean === '1' ? 'success' : 'empty'"
-              ></craft-indicator>
-              <code
-                v-if="
-                  option.label.startsWith('$') || option.label.startsWith('@')
-                "
-                >{{ option.label }}</code
-              >
-              <span v-else>{{ option.label }}</span>
-            </div>
-          </craft-option>
-        </template>
-      </InputCombobox>
       <div slot="after">
         <craft-callout
           v-if="site.primary"
@@ -294,13 +212,7 @@
         >
         </craft-callout>
       </div>
-
-      <div slot="feedback">
-        <ul class="error-list" v-if="form.errors?.enabled">
-          <li>{{ form.errors.enabled }}</li>
-        </ul>
-      </div>
-    </craft-input>
+    </CraftCombobox>
   </template>
 
   <template v-if="(isMultisite || !site.id) && !site.primary">
@@ -328,20 +240,16 @@
   </craft-switch>
 
   <template v-if="form.hasUrls">
-    <craft-input
+    <CraftCombobox
+      v-model="form.baseUrl"
       :label="t('Base URL')"
       :help-text="t('The base URL for the site.')"
       id="base-url"
       name="baseUrl"
       :error="form.errors?.baseUrl"
+      :options="baseUrlSuggestions"
       :disabled="readOnly"
     >
-      <InputCombobox
-        slot="input"
-        v-model="form.baseUrl"
-        :options="baseUrlSuggestions"
-      />
-
       <div slot="after">
         <craft-callout
           variant="info"
@@ -356,7 +264,7 @@
           >
         </craft-callout>
       </div>
-    </craft-input>
+    </CraftCombobox>
   </template>
 </template>
 
diff --git a/resources/js/components/utilities/FindReplace/FindReplace.vue b/resources/js/components/utilities/FindReplace/FindReplace.vue
index 9d07f46a705..97a074c5916 100644
--- a/resources/js/components/utilities/FindReplace/FindReplace.vue
+++ b/resources/js/components/utilities/FindReplace/FindReplace.vue
@@ -2,8 +2,8 @@
   import {t} from '@craftcms/cp/utilities/translate.ts';
   import findAndReplaceController from '@actions/Utilities/FindAndReplaceController.ts';
   import {useForm} from '@inertiajs/vue3';
-  import TransitionFade from '@/components/TransitionFade.vue';
-  import Input from '@/components/form/Input.vue';
+  import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
+  import InlineFlash from '@/components/InlineFlash.vue';
 
   const form = useForm({
     find: '',
@@ -24,13 +24,13 @@
   <div class="p-4">
     <form @submit.prevent="submit" method="post">
       <div class="grid gap-3">
-        <Input
+        <CraftInput
           :label="t('Find Text')"
           v-model="form.find"
           name="find"
           :error="form.errors.find"
         />
-        <Input
+        <CraftInput
           :label="t('Replace Text')"
           v-model="form.replace"
           name="replace"
@@ -46,18 +46,7 @@
           >
             {{ t('Find and Replace') }}
           </craft-button>
-          <TransitionFade>
-            <template v-if="form.recentlySuccessful">
-              <craft-callout
-                variant="success"
-                icon="circle-check"
-                appearance="plain"
-                class="p-0"
-              >
-                {{ t('Replace job dispatched.') }}
-              </craft-callout>
-            </template>
-          </TransitionFade>
+          <InlineFlash :is-active="form.recentlySuccessful" />
         </div>
       </div>
     </form>
diff --git a/resources/js/composables/useFlash.ts b/resources/js/composables/useFlash.ts
new file mode 100644
index 00000000000..a13bf82c9ee
--- /dev/null
+++ b/resources/js/composables/useFlash.ts
@@ -0,0 +1,17 @@
+import {usePage} from '@inertiajs/vue3';
+import {computed} from 'vue';
+
+export function useFlash() {
+  const page = usePage<{
+    flash: {
+      success: string | null;
+      error: string | null;
+    };
+  }>();
+
+  const flash = computed(() => page.props.flash);
+  const successFlash = computed(() => flash.value.success);
+  const errorFlash = computed(() => flash.value.error);
+
+  return {flash, successFlash, errorFlash};
+}
diff --git a/resources/js/composables/useSettingsSave.ts b/resources/js/composables/useSettingsSave.ts
new file mode 100644
index 00000000000..b4d86c83f73
--- /dev/null
+++ b/resources/js/composables/useSettingsSave.ts
@@ -0,0 +1,44 @@
+import {useEventListener} from '@vueuse/core';
+import {type InertiaForm, usePage} from '@inertiajs/vue3';
+import {computed} from 'vue';
+
+export function useSettingsSave<T extends Record<string, any>>(
+  form: InertiaForm<T>,
+  action: any
+) {
+  const page = usePage<{
+    redirectUrl?: string;
+  }>();
+  const redirectUrl = computed(() => page.props.redirectUrl);
+
+  // Handle cmd + s events
+  useEventListener('keydown', (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
+      event.preventDefault();
+      save({redirect: false});
+    }
+  });
+
+  function save({redirect = true} = {}) {
+    let options = {};
+    if (redirect) {
+      options = {
+        preserveScroll: true,
+        preserveState: true,
+      };
+    }
+
+    form
+      .clearErrors()
+      .transform((data: T) => {
+        return {
+          ...data,
+          redirect:
+            redirect && redirectUrl.value ? redirectUrl.value : undefined,
+        };
+      })
+      .submit(action(), options);
+  }
+
+  return {save};
+}
diff --git a/resources/js/layout/AppLayout.vue b/resources/js/layout/AppLayout.vue
index b452e9d0b70..f83ecb6c175 100644
--- a/resources/js/layout/AppLayout.vue
+++ b/resources/js/layout/AppLayout.vue
@@ -4,36 +4,49 @@
   import {computed, reactive, ref, useTemplateRef, watch} from 'vue';
   import CpSidebar from '@/components/CpSidebar.vue';
   import {useMediaQuery} from '@vueuse/core';
-  import {Head, usePage} from '@inertiajs/vue3';
+  import {Head, type InertiaForm, usePage} from '@inertiajs/vue3';
   import VarDump from '@/components/VarDump.vue';
   import Breadcrumbs from '@/components/Breadcrumbs.vue';
   import {useAnnouncer} from '@/composables/useAnnouncer';
   import LiveRegion from '@/components/LiveRegion.vue';
   import {useAppendHtml} from '@/composables/useAppendHtml';
+  import ActionMenu from '@/components/ActionMenu.vue';
+  import type {ActionItem} from '@/types';
+  import {useFlash} from '@/composables/useFlash';
+  import InlineFlash from '@/components/InlineFlash.vue';
+  import ErrorSummary from '@/components/form/ErrorSummary.vue';
+  import CalloutReadOnly from '@/components/CalloutReadOnly.vue';
 
+  interface SaveOptions {
+    redirect?: boolean;
+  }
+
+  const emit = defineEmits<{
+    (e: 'save', options?: Partial<SaveOptions>): void;
+  }>();
   const props = withDefaults(
     defineProps<{
       title?: string;
       debug?: any;
       fullWidth?: boolean;
+      form?: InertiaForm<any> | null;
+      formActions?: Array<ActionItem>;
     }>(),
-    {fullWidth: false, crumbs: () => []}
+    {fullWidth: false, crumbs: () => [], form: null}
   );
 
   const page = usePage<{
     title: string;
-    flash: {
-      success: string | null;
-      error: string | null;
-    };
+    readOnly: boolean;
     crumbs?: Array<{
       url?: string;
       label: string;
     }> | null;
   }>();
-  const errorFlash = computed(() => page.props.flash?.error);
-  const successFlash = computed(() => page.props.flash?.success);
+
+  const {errorFlash, successFlash} = useFlash();
   const crumbs = computed(() => page.props.crumbs ?? null);
+  const readOnly = computed(() => page.props.readOnly);
   const sidebarToggle = useTemplateRef('sidebarToggle');
   const {announcement, announce} = useAnnouncer();
 
@@ -155,25 +168,79 @@
               <Breadcrumbs :items="crumbs" />
             </div>
           </slot>
-          <slot name="header">
-            <div :class="{container: true, 'container--full': fullWidth}">
-              <div class="index-grid index-grid--header">
-                <div class="index-grid__aside">
-                  <slot name="title">
-                    <h1 class="text-xl">{{ pageTitle }}</h1>
-                  </slot>
-                  <slot name="title-badge"></slot>
-                </div>
+          <component
+            :is="form ? 'form' : 'div'"
+            method="post"
+            @submit.prevent="emit('save')"
+          >
+            <slot name="header">
+              <div :class="{container: true, 'container--full': fullWidth}">
+                <div class="index-grid index-grid--header">
+                  <div class="index-grid__aside">
+                    <slot name="title">
+                      <h1 class="text-xl">{{ pageTitle }}</h1>
+                    </slot>
+                    <slot name="title-badge"></slot>
+                  </div>
+
+                  <div class="index-grid__main">
+                    <slot name="actions">
+                      <template v-if="form">
+                        <InlineFlash
+                          :is-active="form.recentlySuccessful || form.hasErrors"
+                        />
 
-                <div class="index-grid__main">
-                  <slot name="actions"></slot>
+                        <craft-button-group v-if="!readOnly">
+                          <craft-button
+                            type="submit"
+                            variant="primary"
+                            :loading="form.processing"
+                          >
+                            {{ t('Save') }}
+                          </craft-button>
+                          <ActionMenu
+                            icon="chevron-down"
+                            :actions="[
+                              {
+                                label: t('Save and continue editing'),
+                                onClick: () => emit('save', {redirect: false}),
+                                shortcut: 'S',
+                              },
+                              ...(formActions ?? []),
+                            ]"
+                          >
+                            <template #invoker="{label}">
+                              <craft-button
+                                slot="invoker"
+                                variant="primary"
+                                type="button"
+                                icon
+                              >
+                                <craft-icon
+                                  name="chevron-down"
+                                  :label="label"
+                                ></craft-icon>
+                              </craft-button>
+                            </template>
+                          </ActionMenu>
+                        </craft-button-group>
+                      </template>
+                    </slot>
+                  </div>
                 </div>
               </div>
+            </slot>
+            <div :class="{container: true, 'container--full': fullWidth}">
+              <ErrorSummary
+                v-if="form && form.hasErrors"
+                :errors="form.errors"
+              />
+              <template v-if="readOnly">
+                <CalloutReadOnly />
+              </template>
+              <slot></slot>
             </div>
-          </slot>
-          <div :class="{container: true, 'container--full': fullWidth}">
-            <slot></slot>
-          </div>
+          </component>
         </main>
       </slot>
     </div>
diff --git a/resources/js/pages/GraphQlSchemasPage.vue b/resources/js/pages/GraphQlSchemasPage.vue
index f6b59c8ec8a..c703fb64bc7 100644
--- a/resources/js/pages/GraphQlSchemasPage.vue
+++ b/resources/js/pages/GraphQlSchemasPage.vue
@@ -100,7 +100,7 @@
         >{{ t('New schema') }}</CpLink
       >
     </template>
-    <Pane :padding="0">
+    <Pane :padding="0" appearance="raised">
       <AdminTable :table="table" />
     </Pane>
   </AppLayout>
diff --git a/resources/js/pages/GraphQlTokensPage.vue b/resources/js/pages/GraphQlTokensPage.vue
index 04eb862a9f4..10b917e9d6e 100644
--- a/resources/js/pages/GraphQlTokensPage.vue
+++ b/resources/js/pages/GraphQlTokensPage.vue
@@ -97,7 +97,7 @@
         >{{ t('New token') }}</CpLink
       >
     </template>
-    <Pane :padding="0">
+    <Pane :padding="0" appearance="raised">
       <AdminTable :table="table">
         <template #empty-row>
           <Empty :label="t('No GraphQL tokens exist yet.')">
diff --git a/resources/js/pages/SettingsEmailPage.vue b/resources/js/pages/SettingsEmailPage.vue
index 4109aeed299..7c185b28dfd 100644
--- a/resources/js/pages/SettingsEmailPage.vue
+++ b/resources/js/pages/SettingsEmailPage.vue
@@ -2,15 +2,15 @@
   import {t} from '@craftcms/cp';
   import AppLayout from '@/layout/AppLayout.vue';
   import {useForm} from '@inertiajs/vue3';
-  import {useEventListener} from '@vueuse/core';
   import {computed} from 'vue';
-  import TransitionFade from '@/components/TransitionFade.vue';
-  import CalloutReadOnly from '@/components/CalloutReadOnly.vue';
-  import Input from '@/components/form/Input.vue';
   import type {SelectItem, SuggestionGroup} from '@/types';
   import SiteOverridesTable from '@/components/Settings/Email/SiteOverridesTable.vue';
   import CraftCombobox from '@/components/form/CraftCombobox.vue';
   import {store, test} from '@routes/cp/settings/email';
+  import Pane from '@/components/Pane.vue';
+  import InlineFlash from '@/components/InlineFlash.vue';
+  import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
+  import {useSettingsSave} from '@/composables/useSettingsSave';
 
   const props = defineProps<{
     readOnly?: boolean;
@@ -41,12 +41,9 @@
       name: string;
     }>;
     defaultToEmail: string;
-    flash?: Record<any, any>;
-    errors: Record<any, any>;
+    redirectUrl?: string;
   }>();
 
-  const flash = computed(() => props.flash);
-  const errors = computed(() => props.errors);
   const isMultiSite = computed(() => props.sites.length > 1);
 
   // Build initial site overrides with empty values for all sites
@@ -74,17 +71,7 @@
     to: props.defaultToEmail,
   });
 
-  // Handle cmd + s events
-  useEventListener('keydown', (event) => {
-    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
-      event.preventDefault();
-      save();
-    }
-  });
-
-  function save() {
-    form.clearErrors().submit(store());
-  }
+  const {save} = useSettingsSave(form, store);
 
   function sendTest() {
     testForm.clearErrors().submit(test(), {
@@ -96,78 +83,11 @@
 </script>
 
 <template>
-  <form @submit.prevent="save">
-    <AppLayout :title="t('Email Settings')">
-      <template #actions>
-        <TransitionFade>
-          <template v-if="form.recentlySuccessful && flash?.success">
-            <div class="flex gap-1 items-center text-sm">
-              <craft-icon
-                name="circle-check"
-                style="color: var(--c-color-success-fill-loud)"
-              ></craft-icon>
-              {{ flash.success }}
-            </div>
-          </template>
-          <template v-if="form.hasErrors">
-            <div class="tw:flex tw:gap-1 tw:items-center tw:text-sm">
-              <craft-icon
-                name="triangle-exclamation"
-                style="color: var(--c-color-danger-fill-loud)"
-              ></craft-icon>
-              {{ t('Could not save settings') }}
-            </div>
-          </template>
-        </TransitionFade>
-
-        <craft-button-group v-if="!readOnly">
-          <craft-button
-            type="submit"
-            variant="primary"
-            :loading="form.processing"
-          >
-            {{ t('Save') }}
-          </craft-button>
-          <craft-action-menu>
-            <craft-button slot="invoker" variant="primary" type="button" icon>
-              <craft-icon
-                name="chevron-down"
-                :label="t('More actions')"
-              ></craft-icon>
-            </craft-button>
-
-            <div slot="content">
-              <craft-action-item @click="save">
-                {{ t('Save and continue editing') }}
-                <craft-shortcut slot="suffix" class="ml-2">S</craft-shortcut>
-              </craft-action-item>
-            </div>
-          </craft-action-menu>
-        </craft-button-group>
-      </template>
-
+  <AppLayout :title="t('Email Settings')" :form="form" @save="save">
+    <div class="grid gap-3">
       <!-- Email Settings Form -->
-      <div
-        class="bg-white border border-neutral-border-quiet rounded-sm shadow-sm"
-      >
-        <template v-if="readOnly">
-          <CalloutReadOnly />
-        </template>
-
-        <div class="grid gap-3 p-5">
-          <template v-if="form.hasErrors">
-            <craft-callout variant="danger" icon="triangle-exclamation">
-              <div slot="title" class="tw:font-bold">
-                {{ t('Could not save settings') }}
-              </div>
-              <ul>
-                <li v-for="(error, key) in errors" :key="key">
-                  {{ error }}
-                </li>
-              </ul>
-            </craft-callout>
-          </template>
-
+      <Pane appearance="raised">
+        <div class="grid gap-3">
           <CraftCombobox
             :label="t('System Email Address')"
             :help-text="
@@ -239,24 +159,26 @@
 
         <!-- Site Overrides -->
         <template v-if="isMultiSite">
-          <hr />
-          <div class="p-5">
-            <h2 class="mb-2">{{ t('Site Overrides') }}</h2>
-            <p class="text-sm text-neutral-text-quiet mb-4">
-              {{
-                t(
-                  'Override the default email settings on a per-site basis. Blank values will use the defaults above.'
-                )
-              }}
-            </p>
+          <hr class="my-6" />
+          <div>
+            <div class="mb-4">
+              <h2 class="text-base">{{ t('Site Overrides') }}</h2>
+              <p class="text-sm text-neutral-text-quiet">
+                {{
+                  t(
+                    'Override the default email settings on a per-site basis. Blank values will use the defaults above.'
+                  )
+                }}
+              </p>
+            </div>
 
             <SiteOverridesTable v-model="form.siteOverrides" :sites="sites" />
           </div>
         </template>
 
-        <hr />
+        <hr class="my-6" />
 
-        <div class="p-5">
+        <div>
           <CraftCombobox
             :label="t('Mailer')"
             :help-text="t('How should Craft CMS send the emails?')"
@@ -271,44 +193,35 @@
             :callouts="['envVars']"
           />
         </div>
-      </div>
+      </Pane>
 
       <!-- Test Email -->
-      <div
-        class="bg-white border border-neutral-border-quiet rounded-sm shadow-sm mt-6"
-      >
-        <div class="p-5">
-          <h2 class="mb-3">{{ t('Send a test email') }}</h2>
+      <Pane appearance="raised">
+        <h2 class="mb-3">{{ t('Send a test email') }}</h2>
+
+        <div class="grid gap-3">
+          <CraftInput
+            :label="t('To')"
+            v-model="testForm.to"
+            name="to"
+            :error="testForm.errors.to"
+          />
 
-          <div class="grid gap-3">
-            <Input
-              :label="t('To')"
-              v-model="testForm.to"
-              name="to"
-              :error="testForm.errors.to"
+          <div class="flex gap-2 items-center">
+            <craft-button
+              type="button"
+              variant="primary"
+              :loading="testForm.processing"
+              @click="sendTest"
+            >
+              {{ t('Test') }}
+            </craft-button>
+            <InlineFlash
+              :is-active="testForm.recentlySuccessful || testForm.hasErrors"
             />
-
-            <TransitionFade>
-              <template v-if="testForm.recentlySuccessful && flash?.success">
-                <craft-callout variant="success" icon="circle-check">
-                  {{ flash.success }}
-                </craft-callout>
-              </template>
-            </TransitionFade>
-
-            <div class="buttons">
-              <craft-button
-                type="button"
-                variant="primary"
-                :loading="testForm.processing"
-                @click="sendTest"
-              >
-                {{ t('Test') }}
-              </craft-button>
-            </div>
           </div>
         </div>
-      </div>
-    </AppLayout>
-  </form>
+      </Pane>
+    </div>
+  </AppLayout>
 </template>
diff --git a/resources/js/pages/SettingsGeneralPage.vue b/resources/js/pages/SettingsGeneralPage.vue
index 9f81c979609..e668f8f9d78 100644
--- a/resources/js/pages/SettingsGeneralPage.vue
+++ b/resources/js/pages/SettingsGeneralPage.vue
@@ -4,205 +4,108 @@
   import {store} from '@/actions/CraftCms/Cms/Http/Controllers/Settings/GeneralSettingsController';
   import {type SystemData, type TimezoneOption} 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 CalloutReadOnly from '@/components/CalloutReadOnly.vue';
-
-  const props = defineProps<{
-    readOnly?: boolean;
-    system: SystemData;
-    nameSuggestions?: Array<SuggestionGroup>;
-    timezoneOptions?: Array<TimezoneOption>;
-    systemStatusOptions?: Array<SelectOption>;
-    saveUrl: string;
-    flash?: Record<any, any>;
-    errors: Record<any, any>;
-  }>();
-
-  const flash = computed(() => props.flash);
-  const errors = computed(() => props.errors);
+  import type {SelectItem} from '@/types';
+  import {useSettingsSave} from '@/composables/useSettingsSave';
+  import Pane from '@/components/Pane.vue';
+  import CraftCombobox from '@/components/form/CraftCombobox.vue';
+  import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
+  import {transformBooleanOptions} from '@/utils/transformBooleanOptions';
+
+  const props = withDefaults(
+    defineProps<{
+      readOnly?: boolean;
+      system: SystemData;
+      nameSuggestions?: Array<any>;
+      timezoneOptions?: Array<TimezoneOption>;
+      systemStatusOptions?: Array<SelectItem>;
+      saveUrl: string;
+      errors: Record<any, any>;
+    }>(),
+    {systemStatusOptions: () => []}
+  );
 
   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;
-    }
-  }
+  const {save} = useSettingsSave(form, store);
 
-  // Handle cmd + s events
-  useEventListener('keydown', (event) => {
-    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
-      event.preventDefault();
-      save();
-    }
+  const systemStatusOptions = computed(() => {
+    return transformBooleanOptions(props.systemStatusOptions, {
+      trueLabel: t('Online'),
+      falseLabel: t('Offline'),
+    });
   });
 
-  function save() {
-    form.clearErrors().submit(store());
-  }
+  const liveOptions = computed(() => {
+    return [
+      {
+        value: '1',
+        label: t('Online'),
+        data: {
+          indicator: {variant: 'success'},
+        },
+      },
+      {
+        value: '0',
+        label: t('Offline'),
+        data: {
+          indicator: {variant: 'empty'},
+        },
+      },
+      ...systemStatusOptions.value,
+    ];
+  });
 </script>
 
 <template>
-  <form @submit.prevent="save">
-    <AppLayout :title="t('General Settings')">
-      <template #actions>
-        <TransitionFade>
-          <template v-if="form.recentlySuccessful && flash?.success">
-            <div class="flex gap-1 items-center text-sm">
-              <craft-icon
-                name="circle-check"
-                style="color: var(--c-color-success-fill-loud)"
-              ></craft-icon>
-              {{ flash.success }}
-            </div>
-          </template>
-          <template v-if="form.hasErrors">
-            <div class="tw:flex tw:gap-1 tw:items-center tw:text-sm">
-              <craft-icon
-                name="triangle-exclamation"
-                style="color: var(--c-color-danger-fill-loud)"
-              ></craft-icon>
-              {{ t('Could not save settings') }}
-            </div>
-          </template>
-        </TransitionFade>
-
-        <craft-button-group v-if="!readOnly">
-          <craft-button
-            type="submit"
-            variant="primary"
-            :loading="form.processing"
-          >
-            {{ t('Save') }}
-          </craft-button>
-          <craft-action-menu>
-            <craft-button slot="invoker" variant="primary" type="button" icon>
-              <craft-icon
-                name="chevron-down"
-                :label="t('More actions')"
-              ></craft-icon>
-            </craft-button>
-
-            <div slot="content">
-              <craft-action-item @click="save">
-                {{ t('Save and continue editing') }}
-                <craft-shortcut slot="suffix" class="ml-2">S</craft-shortcut>
-              </craft-action-item>
-            </div>
-          </craft-action-menu>
-        </craft-button-group>
-      </template>
-
-      <div
-        class="bg-white border border-neutral-border-quiet rounded-sm shadow-sm"
-      >
-        <template v-if="readOnly">
-          <CalloutReadOnly />
-        </template>
-        <div class="grid gap-3 p-5">
-          <template v-if="form.hasErrors">
-            <craft-callout variant="danger" icon="triangle-exclamation">
-              <div slot="title" class="tw:font-bold">
-                {{ t('Could not save settings') }}
-              </div>
-              <ul>
-                <li v-for="(error, key) in errors">
-                  {{ error }}
-                </li>
-              </ul>
+  <AppLayout :title="t('General Settings')" :form="form" @save="save">
+    <Pane appearance="raised">
+      <div class="grid gap-3">
+        <CraftCombobox
+          :label="t('System Name')"
+          id="name"
+          name="name"
+          v-model="form.name"
+          :has-feedback-for="errors?.name ? 'error' : ''"
+          :disabled="readOnly"
+          :require-option-match="false"
+          show-all-on-empty
+          :options="nameSuggestions"
+          :error="errors?.name"
+        >
+          <template #after>
+            <craft-callout
+              variant="info"
+              appearance="plain"
+              class="p-0"
+              icon="lightbulb"
+            >
+              {{ t('This can begin with an environment variable.') }}
+              <a
+                href="https://craftcms.com/docs/5.x/configure.html#control-panel-settings"
+                >{{ t('Learn more') }}</a
+              >
             </craft-callout>
           </template>
-          <craft-combobox
-            :label="t('System Name')"
-            id="name"
-            name="name"
-            v-model="form.name"
-            :has-feedback-for="errors?.name ? 'error' : ''"
-            :disabled="readOnly"
-            :require-option-match="false"
-            show-all-on-empty
-          >
-            <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">
-              <craft-callout
-                variant="info"
-                appearance="plain"
-                class="p-0"
-                icon="lightbulb"
-              >
-                {{ t('This can begin with an environment variable.') }}
-                <a
-                  href="https://craftcms.com/docs/5.x/configure.html#control-panel-settings"
-                  >{{ 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>
-
-          <craft-combobox
-            :label="t('System Status')"
-            id="live"
-            name="live"
-            .modelValue="system.live ? '1' : '0'"
-            :has-feedback-for="errors?.live ? 'error' : ''"
-            @model-value-changed="handleUpdate"
-            :disabled="readOnly"
-            show-all-on-empty
-          >
-            <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>
-
+        </CraftCombobox>
+
+        <CraftCombobox
+          :label="t('System Status')"
+          id="live"
+          name="live"
+          v-model="form.live"
+          :error="errors?.live"
+          :disabled="readOnly"
+          show-all-on-empty
+          :options="liveOptions"
+        >
+          <template #after>
             <craft-callout
-              slot="after"
               variant="info"
               appearance="plain"
               class="p-0"
@@ -218,57 +121,45 @@
               "
             >
             </craft-callout>
-
-            <div slot="feedback">
-              <ul class="error-list" v-if="errors.live">
-                <li>{{ errors.live }}</li>
-              </ul>
-            </div>
-          </craft-combobox>
-
-          <craft-input
-            :label="t('Retry Duration')"
-            id="retry-duration"
-            name="retryDuration"
-            v-model="form.retryDuration"
-            :has-feedback-for="errors?.retryDuration ? 'error' : ''"
-            inputmode="numeric"
-            maxlength="4"
-            :disabled="readOnly"
-          >
-            <div
-              slot="help-text"
-              v-html="
-                t(
-                  'The number of seconds that the <code>Retry-After</code> HTTP header should be set to for 503 responses when the system is offline.'
-                )
-              "
-            ></div>
-            <ul class="error-list" v-if="errors?.retryDuration" slot="feedback">
-              <li>{{ errors.retryDuration }}</li>
-            </ul>
-          </craft-input>
-
-          <craft-combobox
-            :label="t('Time Zone')"
-            id="time-zone"
-            name="timeZone"
-            .modelValue="form.timeZone"
-            @model-value-changed="handleUpdate"
-            :has-feedback-for="errors?.timeZone ? 'error' : ''"
-            :disabled="readOnly"
-            show-all-on-empty
-          >
-            <craft-option
-              v-for="timezone in timezoneOptions"
-              :key="timezone.value"
-              .choiceValue="timezone.value"
-            >
-              {{ timezone.label
-              }}{{ timezone.data?.hint ? ` — ${timezone.data.hint}` : '' }}
-            </craft-option>
+          </template>
+        </CraftCombobox>
+
+        <CraftInput
+          :label="t('Retry Duration')"
+          id="retry-duration"
+          name="retryDuration"
+          v-model="form.retryDuration"
+          :has-feedback-for="errors?.retryDuration ? 'error' : ''"
+          inputmode="numeric"
+          maxlength="4"
+          :disabled="readOnly"
+          :error="errors?.retryDuration"
+        >
+          <div
+            slot="help-text"
+            v-html="
+              t(
+                'The number of seconds that the <code>Retry-After</code> HTTP header should be set to for 503 responses when the system is offline.'
+              )
+            "
+          ></div>
+        </CraftInput>
+
+        <CraftCombobox
+          :label="t('Time Zone')"
+          id="time-zone"
+          name="timeZone"
+          v-model="form.timeZone"
+          :error="errors?.timeZone"
+          :disabled="readOnly"
+          show-all-on-empty
+          :options="timezoneOptions"
+        >
+          <template #item="{item}">
+            {{ item.label }}{{ item.data?.hint ? ` — ${item.data.hint}` : '' }}
+          </template>
+          <template #after>
             <craft-callout
-              slot="after"
               variant="info"
               appearance="plain"
               class="p-0"
@@ -282,14 +173,11 @@
                 >supported time zone</a
               >.
             </craft-callout>
-            <ul class="error-list" v-if="errors?.timeZone" slot="feedback">
-              <li>{{ errors.timeZone }}</li>
-            </ul>
-          </craft-combobox>
-        </div>
+          </template>
+        </CraftCombobox>
       </div>
-    </AppLayout>
-  </form>
+    </Pane>
+  </AppLayout>
 </template>
 
 <style scoped lang="scss">
diff --git a/resources/js/pages/SettingsSectionsEditPage.vue b/resources/js/pages/SettingsSectionsEditPage.vue
index fc12bc362af..8d17a399e38 100644
--- a/resources/js/pages/SettingsSectionsEditPage.vue
+++ b/resources/js/pages/SettingsSectionsEditPage.vue
@@ -2,10 +2,6 @@
   import AppLayout from '@/layout/AppLayout.vue';
   import {useForm} from '@inertiajs/vue3';
   import {t, toHandle, toUriFormat} from '@craftcms/cp';
-  import TransitionFade from '@/components/TransitionFade.vue';
-  import CalloutReadOnly from '@/components/CalloutReadOnly.vue';
-  import {store} from '@actions/Settings/SectionsController';
-  import {useEventListener} from '@vueuse/core';
   import {computed} from 'vue';
   import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
   import CraftInputHandle from '@craftcms/cp/vue/CraftInputHandle.vue';
@@ -20,6 +16,9 @@
   } from '@/types';
   import SiteSettingsTable from '@/components/sections/SiteSettingsTable.vue';
   import PreviewTargetsTable from '@/components/sections/PreviewTargetsTable.vue';
+  import {useSettingsSave} from '@/composables/useSettingsSave';
+  import Pane from '@/components/Pane.vue';
+  import {store} from '@actions/Settings/SectionsController';
 
   const props = defineProps<{
     title: string;
@@ -109,157 +108,149 @@
     uriGenerator.stop();
   }
 
-  useEventListener('keydown', (event) => {
-    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
-      event.preventDefault();
-      save();
-    }
-  });
-
-  function save() {
-    form.clearErrors().submit(store());
-  }
+  const {save} = useSettingsSave(form, store);
 </script>
 
 <template>
-  <form @submit.prevent="save">
-    <AppLayout :title="title" :debug="{form, $props}">
-      <template #actions>
-        <TransitionFade>
-          <template v-if="form.recentlySuccessful && flash?.success">
-            <div class="flex gap-1 items-center text-sm">
-              <craft-icon
-                name="circle-check"
-                style="color: var(--c-color-success-fill-loud)"
-              ></craft-icon>
-              {{ flash.success }}
-            </div>
-          </template>
-          <template v-if="form.hasErrors">
-            <div class="flex gap-1 items-center text-sm">
-              <craft-icon
-                name="triangle-exclamation"
-                style="color: var(--c-color-danger-fill-loud)"
-              ></craft-icon>
-              {{ t('Could not save settings') }}
-            </div>
-          </template>
-        </TransitionFade>
-
-        <craft-button-group v-if="!readOnly">
-          <craft-button
-            type="submit"
-            variant="primary"
-            :loading="form.processing"
-          >
-            {{ t('Save') }}
-          </craft-button>
-          <craft-action-menu>
-            <craft-button slot="invoker" variant="primary" type="button" icon>
-              <craft-icon name="chevron-down"></craft-icon>
-            </craft-button>
-
-            <div slot="content">
-              <craft-action-item @click="save">
-                {{ t('Save and continue editing') }}
-                <craft-shortcut slot="suffix" class="ml-2">S</craft-shortcut>
-              </craft-action-item>
-            </div>
-          </craft-action-menu>
-        </craft-button-group>
-      </template>
-
-      <div
-        class="bg-white border border-neutral-border-quiet rounded-sm shadow-sm"
-      >
-        <template v-if="readOnly">
-          <CalloutReadOnly />
-        </template>
-
-        <div class="grid gap-3 p-5">
-          <!-- Error summary -->
-          <template v-if="form.hasErrors">
-            <craft-callout variant="danger" icon="triangle-exclamation">
-              <div slot="title" class="font-bold">
-                {{ t('Could not save settings') }}
-              </div>
-              <ul>
-                <li v-for="(error, key) in form.errors" :key="key">
-                  {{ error }}
-                </li>
-              </ul>
+  <AppLayout :title="title" :debug="{form, $props}" :form="form" @save="save">
+    <Pane appearance="raised">
+      <div class="grid gap-3">
+        <input
+          v-if="section.id"
+          type="hidden"
+          name="sectionId"
+          :value="section.id"
+        />
+
+        <!-- Name -->
+        <CraftInput
+          :label="t('Name')"
+          :help-text="
+            t('What this section will be called in the control panel.')
+          "
+          id="name"
+          name="name"
+          v-model="form.name"
+          :disabled="readOnly"
+          :error="errors?.name"
+          required
+          autofocus
+        />
+
+        <!-- Handle -->
+        <CraftInputHandle
+          :label="t('Handle')"
+          :help-text="t(`How you'll refer to this section in the templates.`)"
+          id="handle"
+          name="handle"
+          v-model="form.handle"
+          :disabled="readOnly"
+          :error="errors?.handle"
+          required
+          @change="handleGenerator.markDirty()"
+        />
+
+        <!-- Enable Versioning -->
+        <CraftSwitch
+          :label="t('Enable versioning for entries in this section')"
+          id="enableVersioning"
+          name="enableVersioning"
+          :disabled="readOnly"
+          v-model="form.enableVersioning"
+        />
+
+        <!-- Section Type -->
+        <CraftSelect
+          :label="t('Section Type')"
+          :help-text="t('What type of section is this?')"
+          id="type"
+          name="type"
+          v-model="form.type"
+          :disabled="readOnly"
+          :error="errors?.type"
+        >
+          <select slot="input">
+            <option
+              v-for="option in typeOptions"
+              :key="option.value"
+              :value="option.value"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+
+          <div slot="after" v-if="section.id && form.type !== 'single'">
+            <craft-callout
+              variant="danger"
+              appearance="plain"
+              class="p-0"
+              icon="triangle-exclamation"
+            >
+              {{ t('Changing this may result in data loss.') }}
             </craft-callout>
-          </template>
+          </div>
+        </CraftSelect>
+      </div>
 
-          <input
-            v-if="section.id"
-            type="hidden"
-            name="sectionId"
-            :value="section.id"
-          />
+      <hr class="my-6" />
 
-          <!-- Name -->
-          <CraftInput
-            :label="t('Name')"
-            :help-text="
-              t('What this section will be called in the control panel.')
-            "
-            id="name"
-            name="name"
-            v-model="form.name"
-            :disabled="readOnly"
-            :has-feedback-for="form.errors?.name ? 'error' : ''"
-            required
-            autofocus
-          >
-            <div slot="feedback">
-              <ul class="error-list" v-if="form.errors?.name">
-                <li>{{ form.errors.name }}</li>
-              </ul>
-            </div>
-          </CraftInput>
+      <!-- Entry Types -->
+      <div class="grid gap-3">
+        <div>
+          <h3 class="font-bold text-sm">{{ t('Entry Types') }}</h3>
+          <p class="text-sm text-neutral-500 mb-2">
+            {{
+              t(
+                'Choose the types of entries that can be included in this section.'
+              )
+            }}
+          </p>
+          <EntryTypeSelect
+            :entry-types="entryTypes"
+            v-model="form.entryTypes"
+          />
+        </div>
+      </div>
 
-          <!-- Handle -->
-          <CraftInputHandle
-            :label="t('Handle')"
-            :help-text="t(`How you'll refer to this section in the templates.`)"
-            id="handle"
-            name="handle"
-            v-model="form.handle"
-            :disabled="readOnly"
-            :has-feedback-for="form.errors?.handle ? 'error' : ''"
-            required
-            @change="handleGenerator.markDirty()"
-          >
-            <div slot="feedback">
-              <ul class="error-list" v-if="form.errors?.handle">
-                <li>{{ form.errors.handle }}</li>
-              </ul>
-            </div>
-          </CraftInputHandle>
+      <hr class="my-6" />
 
-          <!-- Enable Versioning -->
-          <CraftSwitch
-            :label="t('Enable versioning for entries in this section')"
-            id="enableVersioning"
-            name="enableVersioning"
-            :disabled="readOnly"
-            v-model="form.enableVersioning"
+      <!-- Site Settings -->
+      <div class="grid gap-6">
+        <div>
+          <h3 class="font-bold text-sm">{{ t('Site settings') }}</h3>
+          <p class="text-sm text-neutral-500 mb-2">
+            {{
+              t(
+                'Choose which sites this section should be available in, and configure the site-specific settings.'
+              )
+            }}
+          </p>
+
+          <SiteSettingsTable
+            :is-multisite="isMultiSite"
+            :is-headless="headlessMode"
+            :selected-type="form.type"
+            v-model="form.sites"
           />
+        </div>
 
-          <!-- Section Type -->
+        <!-- Propagation Method (multi-site only) -->
+        <template v-if="isMultiSite && isChannelOrStructure">
           <CraftSelect
-            :label="t('Section Type')"
-            :help-text="t('What type of section is this?')"
-            id="type"
-            name="type"
-            v-model="form.type"
+            :label="t('Propagation Method')"
+            :help-text="
+              t(
+                'Of the enabled sites above, which sites should entries in this section be saved to?'
+              )
+            "
+            id="propagationMethod"
+            name="propagationMethod"
+            v-model="form.propagationMethod"
             :disabled="readOnly"
-            :has-feedback-for="form.errors?.type ? 'error' : ''"
           >
             <select slot="input">
               <option
-                v-for="option in typeOptions"
+                v-for="option in propagationOptions"
                 :key="option.value"
                 :value="option.value"
               >
@@ -267,7 +258,14 @@
               </option>
             </select>
 
-            <div slot="after" v-if="section.id && form.type !== 'single'">
+            <div
+              slot="after"
+              v-if="
+                section.id &&
+                section.propagationMethod !== 'none' &&
+                siteSettings.length > 1
+              "
+            >
               <craft-callout
                 variant="danger"
                 appearance="plain"
@@ -277,202 +275,97 @@
                 {{ t('Changing this may result in data loss.') }}
               </craft-callout>
             </div>
-
-            <div slot="feedback">
-              <ul class="error-list" v-if="form.errors?.type">
-                <li>{{ form.errors.type }}</li>
-              </ul>
-            </div>
           </CraftSelect>
-        </div>
-
-        <hr />
-
-        <!-- Entry Types -->
-        <div class="grid gap-3 p-5">
-          <div>
-            <h3 class="font-bold text-sm">{{ t('Entry Types') }}</h3>
-            <p class="text-sm text-neutral-500 mb-2">
-              {{
-                t(
-                  'Choose the types of entries that can be included in this section.'
-                )
-              }}
-            </p>
-            <EntryTypeSelect
-              :entry-types="entryTypes"
-              v-model="form.entryTypes"
-            />
-          </div>
-        </div>
-
-        <hr />
-
-        <!-- Site Settings -->
-        <div class="grid gap-6 p-5">
-          <div>
-            <h3 class="font-bold text-sm">{{ t('Site settings') }}</h3>
-            <p class="text-sm text-neutral-500 mb-2">
-              {{
-                t(
-                  'Choose which sites this section should be available in, and configure the site-specific settings.'
-                )
-              }}
-            </p>
-
-            <SiteSettingsTable
-              :is-multisite="isMultiSite"
-              :is-headless="headlessMode"
-              :selected-type="form.type"
-              v-model="form.sites"
-            />
-          </div>
-
-          <!-- Propagation Method (multi-site only) -->
-          <template v-if="isMultiSite && isChannelOrStructure">
-            <CraftSelect
-              :label="t('Propagation Method')"
-              :help-text="
-                t(
-                  'Of the enabled sites above, which sites should entries in this section be saved to?'
-                )
-              "
-              id="propagationMethod"
-              name="propagationMethod"
-              v-model="form.propagationMethod"
-              :disabled="readOnly"
-            >
-              <select slot="input">
-                <option
-                  v-for="option in propagationOptions"
-                  :key="option.value"
-                  :value="option.value"
-                >
-                  {{ option.label }}
-                </option>
-              </select>
-
-              <div
-                slot="after"
-                v-if="
-                  section.id &&
-                  section.propagationMethod !== 'none' &&
-                  siteSettings.length > 1
-                "
-              >
-                <craft-callout
-                  variant="danger"
-                  appearance="plain"
-                  class="p-0"
-                  icon="triangle-exclamation"
-                >
-                  {{ t('Changing this may result in data loss.') }}
-                </craft-callout>
-              </div>
-            </CraftSelect>
-          </template>
-        </div>
-
-        <!-- Structure settings -->
-        <template v-if="isStructure">
-          <hr />
-          <div class="grid gap-3 p-5">
-            <CraftInput
-              :label="t('Max Levels')"
-              :help-text="
-                t('The maximum number of levels this section can have.')
-              "
-              id="maxLevels"
-              name="maxLevels"
-              v-model="form.maxLevels"
-              :disabled="readOnly"
-              inputmode="numeric"
-              size="5"
-              :has-feedback-for="form.errors?.maxLevels ? 'error' : ''"
-            >
-              <div slot="feedback">
-                <ul class="error-list" v-if="form.errors?.maxLevels">
-                  <li>{{ form.errors.maxLevels }}</li>
-                </ul>
-              </div>
-            </CraftInput>
-
-            <CraftSelect
-              :label="t('Default {type} Placement', {type: t('Entry')})"
-              :help-text="
-                t(
-                  'Where new {type} should be placed by default in the structure.',
-                  {type: t('entries')}
-                )
-              "
-              id="defaultPlacement"
-              name="defaultPlacement"
-              v-model="form.defaultPlacement"
-              :disabled="readOnly"
-            >
-              <select slot="input">
-                <option
-                  v-for="option in placementOptions"
-                  :key="option.value"
-                  :value="option.value"
-                >
-                  {{ option.label }}
-                </option>
-              </select>
-            </CraftSelect>
-          </div>
         </template>
+      </div>
 
-        <hr />
-
-        <!-- Preview Targets -->
-        <div class="grid gap-3 p-5">
-          <div>
-            <h3 class="font-bold text-sm">{{ t('Preview Targets') }}</h3>
-            <p class="text-sm text-neutral-500 mb-2">
-              {{
-                t(
-                  'Locations that should be available for previewing entries in this section.'
-                )
-              }}
-            </p>
-
-            <PreviewTargetsTable
-              v-model="form.previewTargets"
-              :disabled="readOnly"
-            />
-          </div>
-        </div>
-
-        <hr />
-
-        <!-- Max Authors -->
-        <div class="grid gap-3 p-5">
+      <!-- Structure settings -->
+      <template v-if="isStructure">
+        <hr class="my-6" />
+        <div class="grid gap-3">
           <CraftInput
-            :label="t('Max Authors')"
+            :label="t('Max Levels')"
+            :help-text="
+              t('The maximum number of levels this section can have.')
+            "
+            id="maxLevels"
+            name="maxLevels"
+            v-model="form.maxLevels"
+            :disabled="readOnly"
+            inputmode="numeric"
+            size="5"
+            :error="errors?.maxLevels"
+          />
+
+          <CraftSelect
+            :label="t('Default {type} Placement', {type: t('Entry')})"
             :help-text="
               t(
-                'The maximum number of authors that entries in this section can have.'
+                'Where new {type} should be placed by default in the structure.',
+                {type: t('entries')}
               )
             "
-            id="maxAuthors"
-            name="maxAuthors"
-            v-model="form.maxAuthors"
+            id="defaultPlacement"
+            name="defaultPlacement"
+            v-model="form.defaultPlacement"
             :disabled="readOnly"
-            inputmode="numeric"
-            maxlength="5"
-            :has-feedback-for="form.errors?.maxAuthors ? 'error' : ''"
           >
-            <div slot="feedback">
-              <ul class="error-list" v-if="form.errors?.maxAuthors">
-                <li>{{ form.errors.maxAuthors }}</li>
-              </ul>
-            </div>
-          </CraftInput>
+            <select slot="input">
+              <option
+                v-for="option in placementOptions"
+                :key="option.value"
+                :value="option.value"
+              >
+                {{ option.label }}
+              </option>
+            </select>
+          </CraftSelect>
         </div>
+      </template>
+
+      <hr class="my-6" />
+
+      <!-- Preview Targets -->
+      <div class="grid gap-3">
+        <div>
+          <h3 class="font-bold text-sm">{{ t('Preview Targets') }}</h3>
+          <p class="text-sm text-neutral-500 mb-2">
+            {{
+              t(
+                'Locations that should be available for previewing entries in this section.'
+              )
+            }}
+          </p>
+
+          <PreviewTargetsTable
+            v-model="form.previewTargets"
+            :disabled="readOnly"
+          />
+        </div>
+      </div>
+
+      <hr class="my-6" />
+
+      <!-- Max Authors -->
+      <div class="grid gap-3">
+        <CraftInput
+          :label="t('Max Authors')"
+          :help-text="
+            t(
+              'The maximum number of authors that entries in this section can have.'
+            )
+          "
+          id="maxAuthors"
+          name="maxAuthors"
+          v-model="form.maxAuthors"
+          :disabled="readOnly"
+          inputmode="numeric"
+          maxlength="5"
+          :error="errors?.maxAuthors"
+        />
       </div>
-    </AppLayout>
-  </form>
+    </Pane>
+  </AppLayout>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/resources/js/pages/SettingsSitesEdit.vue b/resources/js/pages/SettingsSitesEdit.vue
index ef94244fa4e..1a571ab0505 100644
--- a/resources/js/pages/SettingsSitesEdit.vue
+++ b/resources/js/pages/SettingsSitesEdit.vue
@@ -2,15 +2,14 @@
   import AppLayout from '@/layout/AppLayout.vue';
   import {useForm} from '@inertiajs/vue3';
   import type {Site} from '@/types';
-  import CalloutReadOnly from '@/components/CalloutReadOnly.vue';
   import {t} from '@craftcms/cp';
-  import TransitionFade from '@/components/TransitionFade.vue';
   import {store} from '@actions/Settings/SitesController';
-  import {useEventListener} from '@vueuse/core';
   import SiteFields from '@/components/sites/SiteFields.vue';
   import DeleteSiteModal from '@/components/sites/DeleteSiteModal.vue';
   import {ref} from 'vue';
   import Badge from '@/components/Badge.vue';
+  import {useSettingsSave} from '@/composables/useSettingsSave';
+  import Pane from '@/components/Pane.vue';
 
   const props = defineProps<{
     title: string;
@@ -35,97 +34,28 @@
     baseUrl: props.site.baseUrlRaw ?? '',
   });
 
-  // Handle cmd + s events
-  useEventListener('keydown', (event) => {
-    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
-      event.preventDefault();
-      save();
-    }
-  });
-
-  function save() {
-    form.clearErrors().submit(store());
-  }
+  const {save} = useSettingsSave(form, store);
 
   const modalActive = ref(false);
 </script>
 
 <template>
-  <form @submit.prevent="save">
-    <AppLayout :title="title" :debug="$props">
-      <template #title-badge>
-        <Badge :variant="site.enabled ? 'success' : 'default'">
-          {{ site.enabled ? t('Enabled') : t('Disabled') }}
-        </Badge>
-        <craft-callout v-if="site.primary" size="small" inline>
-          <span>{{ t('Primary') }}</span>
-        </craft-callout>
-      </template>
-
-      <template #actions>
-        <TransitionFade>
-          <template v-if="form.recentlySuccessful && flash?.success">
-            <div class="flex gap-1 items-center text-sm">
-              <craft-icon
-                name="circle-check"
-                style="color: var(--c-color-success-fill-loud)"
-              ></craft-icon>
-              {{ flash.success }}
-            </div>
-          </template>
-          <template v-if="form.hasErrors">
-            <div class="tw:flex tw:gap-1 tw:items-center tw:text-sm">
-              <craft-icon
-                name="triangle-exclamation"
-                style="color: var(--c-color-danger-fill-loud)"
-              ></craft-icon>
-              {{ t('Could not save settings') }}
-            </div>
-          </template>
-        </TransitionFade>
-
-        <craft-button-group v-if="!readOnly">
-          <craft-button
-            type="submit"
-            variant="primary"
-            :loading="form.processing"
-          >
-            {{ t('Save') }}
-          </craft-button>
-          <craft-action-menu>
-            <craft-button slot="invoker" variant="primary" type="button" icon>
-              <craft-icon name="chevron-down"></craft-icon>
-            </craft-button>
-
-            <div slot="content">
-              <craft-action-item @click="save">
-                {{ t('Save and continue editing') }}
-                <craft-shortcut slot="suffix" class="ml-2">S</craft-shortcut>
-              </craft-action-item>
-
-              <template v-if="site.id && !site.primary">
-                <hr />
-                <craft-action-item @click="modalActive = true" variant="danger">
-                  {{ t('Delete site') }}
-                </craft-action-item>
-              </template>
-            </div>
-          </craft-action-menu>
-        </craft-button-group>
-      </template>
-      <div
-        class="bg-white border border-neutral-border-quiet rounded-sm shadow-sm"
-      >
-        <template v-if="readOnly">
-          <CalloutReadOnly />
-        </template>
+  <AppLayout :title="title" :form="form" @save="save">
+    <template #title-badge>
+      <Badge :variant="site.enabled ? 'success' : 'default'">
+        {{ site.enabled ? t('Enabled') : t('Disabled') }}
+      </Badge>
+      <craft-callout v-if="site.primary" size="small" inline>
+        <span>{{ t('Primary') }}</span>
+      </craft-callout>
+    </template>
 
-        <div class="grid gap-3 p-5">
-          <SiteFields :inertia-form="form" :read-only="readOnly" />
-        </div>
+    <Pane appearance="raised">
+      <div class="grid gap-3">
+        <SiteFields :inertia-form="form" :read-only="readOnly" />
       </div>
-    </AppLayout>
-  </form>
+    </Pane>
+  </AppLayout>
 
   <DeleteSiteModal
     @close="modalActive = false"
diff --git a/resources/js/pages/SettingsUserGroupsEditPage.vue b/resources/js/pages/SettingsUserGroupsEditPage.vue
new file mode 100644
index 00000000000..c45471b7542
--- /dev/null
+++ b/resources/js/pages/SettingsUserGroupsEditPage.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/cp';
+  import AppLayout from '@/layout/AppLayout.vue';
+  import {router, useForm} from '@inertiajs/vue3';
+  import type {ActionItem, UserGroup} from '@/types';
+  import CraftInput from '@craftcms/cp/vue/CraftInput.vue';
+  import CraftHandleInput from '@craftcms/cp/vue/CraftInputHandle.vue';
+  import CraftTextarea from '@craftcms/cp/vue/CraftTextarea.vue';
+  import Pane from '@/components/Pane.vue';
+  import PermissionList from '@/components/PermissionList.vue';
+  import {hasNested, type PermissionItem} from '@/utils/permissions';
+  import {destroy, store} from '@actions/Settings/UserGroupsController';
+  import {computed} from 'vue';
+  import {useSettingsSave} from '@/composables/useSettingsSave';
+
+  const props = defineProps<{
+    group: UserGroup;
+    permissions: Array<{
+      heading: string;
+      handle: string;
+      permissions: Record<string, PermissionItem>;
+    }>;
+    formActions?: Array<ActionItem>;
+    redirect?: string;
+    toolbar?: string;
+    errors: Record<any, any> | null;
+    readOnly?: boolean;
+    redirectUrl?: string;
+  }>();
+
+  const form = useForm({
+    id: props.group.id,
+    redirect: props.redirect,
+    name: props.group.name,
+    handle: props.group.handle,
+    description: props.group.description ?? '',
+    permissions: props.group.permissions ?? [],
+  });
+
+  function getAllKeys(
+    permissions: Record<string, PermissionItem>
+  ): Array<string> {
+    return Object.values(permissions).flatMap((item) => [
+      item.key,
+      ...(hasNested(item) ? getAllKeys(item.nested) : []),
+    ]);
+  }
+
+  const permissionSets = computed(() => {
+    return props.permissions.reduce<Record<string, Array<string>>>(
+      (acc, set) => {
+        acc[set.handle] = getAllKeys(set.permissions).map((v) =>
+          v.toLowerCase()
+        );
+        return acc;
+      },
+      {}
+    );
+  });
+
+  function allSelected(set?: Array<string>) {
+    if (!set) {
+      return false;
+    }
+
+    const selected = new Set(form.permissions);
+    return set.every((key) => selected.has(key));
+  }
+
+  function toggleSet(handle: string) {
+    const setKeys = permissionSets.value[handle];
+    if (!setKeys) {
+      return;
+    }
+
+    if (allSelected(setKeys)) {
+      const keysToRemove = new Set(setKeys);
+      form.permissions = form.permissions.filter(
+        (key) => !keysToRemove.has(key)
+      );
+    } else {
+      form.permissions = [...new Set([...form.permissions, ...setKeys])];
+    }
+  }
+
+  const {save} = useSettingsSave(form, store);
+
+  const actions = computed(() => {
+    if (props.readOnly || !props.group.id) {
+      return [];
+    }
+
+    return [
+      {
+        variant: 'danger',
+        label: t('Delete group'),
+        onClick: () => {
+          if (
+            confirm(
+              t('Are you sure you want to delete “{name}”?', {
+                name: props.group.name,
+              })
+            )
+          ) {
+            router.delete(destroy({groupId: props.group.id}));
+          }
+        },
+      },
+    ];
+  });
+</script>
+
+<template>
+  <AppLayout :form="form" :form-actions="actions" @save="save">
+    <Pane appearance="raised">
+      <div class="grid gap-3">
+        <CraftInput
+          :label="t('Name')"
+          id="name"
+          data-error-key="name"
+          :autofocus="true"
+          :required="true"
+          :disabled="readOnly"
+          :error="errors?.name"
+          name="name"
+          v-model="form.name"
+        />
+
+        <CraftHandleInput
+          :label="t('Handle')"
+          id="handle"
+          v-model="form.handle"
+          :autocorrect="false"
+          :autocapitalize="false"
+          name="handle"
+          :error="errors?.handle"
+          :required="true"
+          data-error-key="handle"
+          :disabled="readOnly"
+        />
+
+        <CraftTextarea
+          :label="t('Description')"
+          id="description"
+          name="description"
+          v-model="form.description"
+          :error="errors?.description"
+          data-error-key="description"
+          :disabled="readOnly"
+        />
+      </div>
+
+      <hr class="my-8" />
+
+      <h2 class="text-lg mb-3">{{ t('Permissions') }}</h2>
+
+      <div class="grid gap-3">
+        <div v-for="set in permissions" :key="set.handle">
+          <div class="flex gap-2 items-center">
+            <h3 class="mb-1 text-base" :id="`content-heading-${set.handle}`">
+              {{ set.heading }}
+            </h3>
+
+            <craft-button
+              type="button"
+              size="small"
+              appearance="plain"
+              @click="toggleSet(set.handle)"
+            >
+              <template v-if="allSelected(permissionSets[set.handle])">
+                {{ t('Deselect all') }}
+              </template>
+              <template v-else>
+                {{ t('Select all') }}
+              </template>
+            </craft-button>
+          </div>
+
+          <PermissionList
+            :permissions="set.permissions"
+            v-model="form.permissions"
+          />
+        </div>
+      </div>
+    </Pane>
+  </AppLayout>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/resources/js/pages/SettingsUserGroupsIndexPage.vue b/resources/js/pages/SettingsUserGroupsIndexPage.vue
index a558f2ce211..db3b1727b89 100644
--- a/resources/js/pages/SettingsUserGroupsIndexPage.vue
+++ b/resources/js/pages/SettingsUserGroupsIndexPage.vue
@@ -10,14 +10,7 @@
   import {createCraftColumnHelper} from '@/components/AdminTable/createCraftColumnHelper';
   import DeleteButton from '@/components/AdminTable/DeleteButton.vue';
   import {router} from '@inertiajs/vue3';
-
-  interface UserGroup {
-    id: number;
-    name: string;
-    handle: string;
-    description: string | null;
-    uid: string;
-  }
+  import type {UserGroup} from '@/types';
 
   const props = defineProps<{
     groups: Array<UserGroup>;
@@ -47,7 +40,6 @@
         columnHelper.link('name', {
           header: t('Name'),
           props: ({row}) => ({
-            inertia: false,
             href: edit(row.original.id).url,
           }),
         }),
@@ -65,6 +57,8 @@
         return {};
       },
     },
+    manualPagination: true,
+    pageCount: 1,
     getCoreRowModel: getCoreRowModel<UserGroup>(),
   });
 </script>
diff --git a/resources/js/types/index.ts b/resources/js/types/index.ts
index 16717e9f4af..4b46b5de8eb 100644
--- a/resources/js/types/index.ts
+++ b/resources/js/types/index.ts
@@ -48,9 +48,10 @@ export interface ChipIndicator {
 export interface ActionItem {
   id?: string;
   label: string;
-  variant?: VariantKey;
+  variant?: VariantKey | string;
   icon?: string;
   onClick?: () => void;
+  shortcut?: string;
 }
 
 export interface EntryType {
@@ -169,3 +170,12 @@ export interface PaginationData {
   from: number;
   to: number;
 }
+
+export interface UserGroup {
+  id: number;
+  name: string;
+  handle: string;
+  description?: string | null;
+  uid: string;
+  permissions?: Array<string>;
+}
diff --git a/resources/js/utils/permissions.ts b/resources/js/utils/permissions.ts
new file mode 100644
index 00000000000..d83fedb2a53
--- /dev/null
+++ b/resources/js/utils/permissions.ts
@@ -0,0 +1,27 @@
+export interface PermissionItem {
+  key: string;
+  nested: Record<string, PermissionItem>;
+  label: string;
+  info?: string;
+  warning?: string;
+}
+
+export function hasNested(item: PermissionItem) {
+  return (
+    item.nested &&
+    typeof item.nested === 'object' &&
+    !Array.isArray(item.nested) &&
+    Object.keys(item.nested).length > 0
+  );
+}
+
+export function getNestedKeys(item: PermissionItem | undefined): Array<string> {
+  if (!item || !hasNested(item)) {
+    return [];
+  }
+
+  return Object.values(item.nested).flatMap((child: PermissionItem) => [
+    child.key.toLowerCase(),
+    ...getNestedKeys(child),
+  ]);
+}
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/routes/actions.php b/routes/actions.php
index 2df06034b7b..205cee974d4 100644
--- a/routes/actions.php
+++ b/routes/actions.php
@@ -55,7 +55,6 @@
 use CraftCms\Cms\Http\Controllers\Settings\ImageTransformsController;
 use CraftCms\Cms\Http\Controllers\Settings\RoutesController;
 use CraftCms\Cms\Http\Controllers\Settings\SectionsController;
-use CraftCms\Cms\Http\Controllers\Settings\UserGroupsController;
 use CraftCms\Cms\Http\Controllers\Settings\UserSettingsController;
 use CraftCms\Cms\Http\Controllers\Settings\VolumesController;
 use CraftCms\Cms\Http\Controllers\StructuresController;
@@ -404,7 +403,7 @@
         Route::middleware([
             RequireAdminChanges::class,
         ])->group(function () {
-            Route::post('sections/save-section', [SectionsController::class, 'store']);
+            // Route::post('sections/save-section', [SectionsController::class, 'store']);
             Route::post('sections/delete-section', [SectionsController::class, 'destroy']);
         });
 
@@ -455,14 +454,6 @@
         Route::post('users/verify-password', [PasswordController::class, 'verifyPassword']);
         Route::post('users/save-field-layout', SaveUsersFieldLayoutController::class);
 
-        // User groups
-        Route::middleware([
-            RequireAdminChanges::class,
-            RequireEdition::class.':'.Edition::Team->value,
-        ])->group(function () {
-            Route::post('user-settings/save-group', [UserGroupsController::class, 'store']);
-        });
-
         // User settings
         Route::middleware([
             RequireAdminChanges::class,
diff --git a/routes/cp.php b/routes/cp.php
index f28110cb10d..1bd5b646028 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -195,9 +195,11 @@
         Route::get('settings/routes', [RoutesController::class, 'index']);
 
         // Sections
-        Route::get('settings/sections', [SectionsController::class, 'index']);
+        Route::get('settings/sections', [SectionsController::class, 'index'])
+            ->name('settings.sections.index');
         Route::middleware(RequireAdminChanges::class)->get('settings/sections/new', [SectionsController::class, 'create']);
         Route::get('settings/sections/{section}', [SectionsController::class, 'edit']);
+        Route::middleware(RequireAdminChanges::class)->post('sections/sections', [SectionsController::class, 'store']);
 
         // Volumes
         Route::get('settings/assets', [VolumesController::class, 'index']);
@@ -231,15 +233,18 @@
 
         // User groups
         Route::middleware([RequireEdition::class.':'.Edition::Team->value])->group(function () {
-            Route::get('settings/users', [UserGroupsController::class, 'index']);
+            Route::get('settings/users', [UserGroupsController::class, 'index'])
+                ->name('settings.users.index');
             Route::middleware([
                 RequireEdition::class.':'.Edition::Pro->value,
                 RequireAdminChanges::class,
             ])->group(function () {
                 Route::get('settings/users/groups/new', [UserGroupsController::class, 'create']);
+                Route::post('settings/users/groups', [UserGroupsController::class, 'store'])->whereNumber('groupId');
                 Route::delete('settings/users/groups/{groupId}', [UserGroupsController::class, 'destroy'])->whereNumber('groupId');
             });
-            Route::get('settings/users/groups/{userGroup}', [UserGroupsController::class, 'edit']);
+            Route::get('settings/users/groups/{userGroup}', [UserGroupsController::class, 'edit'])
+                ->name('settings.users.groups.edit');
         });
 
         // User settings
diff --git a/src/Http/Controllers/Settings/EmailSettingsController.php b/src/Http/Controllers/Settings/EmailSettingsController.php
index 772479375f3..9a6047204e5 100644
--- a/src/Http/Controllers/Settings/EmailSettingsController.php
+++ b/src/Http/Controllers/Settings/EmailSettingsController.php
@@ -10,12 +10,11 @@
 use CraftCms\Cms\Email\Actions\SendTestMailAction;
 use CraftCms\Cms\Http\Requests\EmailSettingsRequest;
 use CraftCms\Cms\Http\RespondsWithFlash;
+use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\ProjectConfig\ProjectConfig;
 use CraftCms\Cms\Site\Sites;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
-use Inertia\Inertia;
-use Inertia\Response;
 use Symfony\Component\HttpFoundation\Response as SymfonyResponse;
 use Throwable;
 
@@ -30,7 +29,7 @@ public function __construct(
         private Sites $sites,
     ) {}
 
-    public function index(GeneralConfig $generalConfig): Response
+    public function index(GeneralConfig $generalConfig): CpScreenResponse
     {
         $sites = [];
         if ($this->sites->isMultiSite()) {
@@ -42,22 +41,24 @@ public function index(GeneralConfig $generalConfig): Response
             }
         }
 
-        return Inertia::render('SettingsEmailPage', [
-            'emailConfig' => $this->projectConfig->get('email') ?? [],
-            'mailerOptions' => $this->getMailerOptions(),
-            'envSuggestions' => SelectOptions::getEnvSuggestions(),
-            'templateSuggestions' => SelectOptions::getTemplateSuggestions(),
-            'sites' => $sites,
-            'crumbs' => [
+        return new CpScreenResponse()
+            ->title(t('Email Settings'))
+            ->crumbs([
                 ['label' => t('Settings'), 'url' => UrlHelper::cpUrl('settings')],
                 ['label' => t('Email')],
-            ],
-            'readOnly' => ! $generalConfig->allowAdminChanges,
-            'defaultToEmail' => auth()->user()->email,
-        ]);
+            ])
+            ->redirectUrl('settings')
+            ->inertiaPage('SettingsEmailPage', [
+                'emailConfig' => $this->projectConfig->get('email') ?? [],
+                'mailerOptions' => $this->getMailerOptions(),
+                'envSuggestions' => SelectOptions::getEnvSuggestions(),
+                'templateSuggestions' => SelectOptions::getTemplateSuggestions(),
+                'sites' => $sites,
+                'defaultToEmail' => auth()->user()->email,
+            ]);
     }
 
-    public function store(EmailSettingsRequest $request): RedirectResponse
+    public function store(EmailSettingsRequest $request): SymfonyResponse
     {
         $validated = $request->validated();
 
@@ -85,7 +86,7 @@ public function store(EmailSettingsRequest $request): RedirectResponse
 
         $this->projectConfig->set('email', $emailSettings, 'Update email settings.');
 
-        return back()->with('success', t('Email settings saved.'));
+        return $this->asSuccess(t('Email settings saved.'));
     }
 
     public function test(Request $request, SendTestMailAction $sendTestMail): SymfonyResponse|RedirectResponse
diff --git a/src/Http/Controllers/Settings/GeneralSettingsController.php b/src/Http/Controllers/Settings/GeneralSettingsController.php
index 7ce97d61891..16cbc06a7c1 100644
--- a/src/Http/Controllers/Settings/GeneralSettingsController.php
+++ b/src/Http/Controllers/Settings/GeneralSettingsController.php
@@ -7,16 +7,13 @@
 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 function CraftCms\Cms\t;
 
@@ -28,33 +25,38 @@ public function __construct(
         private ProjectConfig $projectConfig,
     ) {}
 
-    public function index(GeneralConfig $generalConfig): Response|View
+    public function index(GeneralConfig $generalConfig): 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(),
+                'readOnly' => ! $generalConfig->allowAdminChanges,
+                'saveUrl' => route('craft.cp.settings.general.store'),
+            ]);
     }
 
-    public function store(Request $request): RedirectResponse
+    public function store(Request $request)
     {
         $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;
             }
@@ -76,12 +78,8 @@ public function store(Request $request): RedirectResponse
         $systemSettings['retryDuration'] = $request->input('retryDuration') ?: null;
         $systemSettings['timeZone'] = $request->input('timeZone');
 
-        if (! str_starts_with((string) $systemSettings['live'], '$')) {
-            $systemSettings['live'] = $request->boolean('live');
-        }
-
         $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/src/Http/Controllers/Settings/SectionsController.php b/src/Http/Controllers/Settings/SectionsController.php
index 5a178a159f8..3bacfbe9b87 100644
--- a/src/Http/Controllers/Settings/SectionsController.php
+++ b/src/Http/Controllers/Settings/SectionsController.php
@@ -25,7 +25,6 @@
 use CraftCms\Cms\Support\Url;
 use Illuminate\Http\Request;
 use Illuminate\Validation\Rule;
-use Inertia\Inertia;
 use Symfony\Component\HttpFoundation\Response;
 
 use function CraftCms\Cms\t;
@@ -43,7 +42,7 @@ public function __construct(
         $this->readOnly = ! $generalConfig->allowAdminChanges;
     }
 
-    public function index(Request $request, Sections $sections): \Inertia\Response
+    public function index(Request $request, Sections $sections): CpScreenResponse
     {
         $pageParam = Cms::config()->getPageTriggerParam();
         $page = $request->integer($pageParam, 1);
@@ -73,19 +72,20 @@ public function index(Request $request, Sections $sections): \Inertia\Response
             sortDir: $sortDir,
         );
 
-        return Inertia::render('SettingsSectionsIndexPage', [
-            'crumbs' => fn () => [
+        return new CpScreenResponse()
+            ->title(t('Sections'))
+            ->crumbs([
                 ['label' => t('Settings'), 'url' => Url::cpUrl('settings')],
                 ['label' => t('Sections')],
-            ],
-            'title' => t('Sections'),
-            'data' => fn () => $tableData,
-            'pagination' => fn () => $pagination,
-            'sort' => $sort,
-            'searchTerm' => $searchTerm,
-            'emptyMessage' => t('No sections exist yet.'),
-            'readOnly' => $this->readOnly,
-        ]);
+            ])
+            ->inertiaPage('SettingsSectionsIndexPage', [
+                'data' => fn () => $tableData,
+                'pagination' => fn () => $pagination,
+                'sort' => $sort,
+                'searchTerm' => $searchTerm,
+                'emptyMessage' => t('No sections exist yet.'),
+                'readOnly' => $this->readOnly,
+            ]);
     }
 
     public function create(Sites $sites): CpScreenResponse
@@ -97,6 +97,7 @@ public function create(Sites $sites): CpScreenResponse
         return new CpScreenResponse()
             ->title(t('Create a new section'))
             ->addCrumb(t('Settings'), 'settings')
+            ->redirectUrl('settings/sections')
             ->addCrumb(t('Sections'), 'settings/sections')
             ->inertiaPage('SettingsSectionsEditPage', $this->sectionProps($section, $sites, brandNew: true));
     }
@@ -108,6 +109,7 @@ public function edit(Sections $sections, Sites $sites, SectionModel $section): C
 
         return new CpScreenResponse()
             ->title(trim($sectionData->name) ?: t('Edit Section'))
+            ->redirectUrl('settings/sections')
             ->addCrumb(t('Settings'), 'settings')
             ->addCrumb(t('Sections'), 'settings/sections')
             ->inertiaPage('SettingsSectionsEditPage', $this->sectionProps($sectionData, $sites, brandNew: false));
@@ -225,7 +227,7 @@ public function store(
             return $this->asModelFailure($section, t('Couldn’t save section.'), 'section');
         }
 
-        return $this->asModelSuccess($section, t('Section saved.'), 'section');
+        return $this->asSuccess(t('Section saved.'));
     }
 
     public function destroy(Request $request, Sections $sections): Response
diff --git a/src/Http/Controllers/Settings/SitesController.php b/src/Http/Controllers/Settings/SitesController.php
index 3cd6bea72b2..e4dd530b423 100644
--- a/src/Http/Controllers/Settings/SitesController.php
+++ b/src/Http/Controllers/Settings/SitesController.php
@@ -8,6 +8,7 @@
 use CraftCms\Cms\Cp\SelectOptions;
 use CraftCms\Cms\Database\Table;
 use CraftCms\Cms\Http\RespondsWithFlash;
+use CraftCms\Cms\Http\Responses\CpScreenResponse;
 use CraftCms\Cms\Site\Data\Site;
 use CraftCms\Cms\Site\Models\Site as SiteModel;
 use CraftCms\Cms\Site\SiteGroups;
@@ -66,7 +67,7 @@ public function index(Request $request, Sites $sitesService): Response
         ]);
     }
 
-    public function create(Request $request, Sites $sitesService): Response
+    public function create(Request $request)
     {
         $allGroups = $this->siteGroups->getAllGroups();
 
@@ -77,11 +78,10 @@ public function create(Request $request, Sites $sitesService): Response
             'Site group not found'
         );
 
-        return Inertia::render('SettingsSitesEdit', [
-            ...$this->getViewData(),
-            'title' => t('Create a new site'),
-            'isMultisite' => $sitesService->isMultiSite(),
-            'crumbs' => [
+        return new CpScreenResponse()
+            ->title(t('Create a new site'))
+            ->redirectUrl('settings/sites')
+            ->crumbs([
                 [
                     'label' => t('Settings'),
                     'url' => Url::url('settings'),
@@ -95,23 +95,25 @@ public function create(Request $request, Sites $sitesService): Response
                     'url' => Url::url('settings/sites/new'),
                     'active' => true,
                 ],
-            ],
-            'site' => new Site([
-                'name' => '',
-                'handle' => '',
-                'language' => $this->sites->getPrimarySite()->getLanguage(false),
-                'groupId' => $request->integer('groupId'),
-            ]),
-            'groupId' => $request->input('groupId', $allGroups->first()->id),
-            'groupOptions' => $allGroups->map(fn ($group) => [
-                'label' => $group->name,
-                'value' => $group->id,
-            ])->all(),
-            'readOnly' => $this->readOnly,
-        ]);
+            ])
+            ->inertiaPage('SettingsSitesEdit', [
+                ...$this->getViewData(),
+                'site' => new Site([
+                    'name' => '',
+                    'handle' => '',
+                    'language' => $this->sites->getPrimarySite()->getLanguage(false),
+                    'groupId' => $request->integer('groupId'),
+                ]),
+                'groupId' => $request->input('groupId', $allGroups->first()->id),
+                'groupOptions' => $allGroups->map(fn ($group) => [
+                    'label' => $group->name,
+                    'value' => $group->id,
+                ])->all(),
+                'readOnly' => $this->readOnly,
+            ]);
     }
 
-    public function edit(SiteModel $site, Sites $sitesService): Response
+    public function edit(SiteModel $site, Sites $sitesService): CpScreenResponse
     {
         $allGroups = $this->siteGroups->getAllGroups();
 
@@ -120,11 +122,10 @@ public function edit(SiteModel $site, Sites $sitesService): Response
         $siteData = new Site($site->except('dateDeleted'));
         $siteGroup = $siteData->getGroup();
 
-        return Inertia::render('SettingsSitesEdit', [
-            ...$this->getViewData(),
-            'title' => trim($siteData->getName()) ?: t('Edit Site'),
-            'isMultisite' => $sitesService->isMultiSite(),
-            'crumbs' => [
+        return new CpScreenResponse()
+            ->title(trim($siteData->getName()) ?: t('Edit Site'))
+            ->redirectUrl('settings/sites')
+            ->crumbs([
                 [
                     'label' => t('Settings'),
                     'url' => Url::url('settings'),
@@ -140,19 +141,22 @@ public function edit(SiteModel $site, Sites $sitesService): Response
                 [
                     'label' => $siteData->getName(),
                 ],
-            ],
-            'site' => $siteData,
-            'groupId' => $siteData->groupId,
-            'groupOptions' => $allGroups->map(fn ($group) => [
-                'label' => $group->getName(),
-                'value' => $group->id,
-            ])->all(),
-            'readOnly' => $this->readOnly,
-            'transferContentOptions' => Inertia::defer(fn () => $sitesService->getAllSites()->values()),
-        ]);
+
+            ])
+            ->redirectUrl('settings/sites')
+            ->inertiaPage('SettingsSitesEdit', [
+                ...$this->getViewData(),
+                'site' => $siteData,
+                'groupId' => $siteData->groupId,
+                'groupOptions' => $allGroups->map(fn ($group) => [
+                    'label' => $group->getName(),
+                    'value' => $group->id,
+                ])->all(),
+                'transferContentOptions' => Inertia::defer(fn () => $sitesService->getAllSites()->values()),
+            ]);
     }
 
-    public function store(Request $request): RedirectResponse
+    public function store(Request $request): \Symfony\Component\HttpFoundation\Response
     {
         $request->validate([
             'siteId' => ['nullable', Rule::exists(Table::SITES, 'id')],
@@ -185,7 +189,7 @@ public function store(Request $request): RedirectResponse
             return to_route('craft.cp.settings.sites.index')->with('success', t('Site created'));
         }
 
-        return back()->with('success', t('Site saved.'));
+        return $this->asSuccess(t('Site saved.'));
     }
 
     public function reorder(Request $request): RedirectResponse
diff --git a/src/Http/Controllers/Settings/UserGroupsController.php b/src/Http/Controllers/Settings/UserGroupsController.php
index 7d312de70bf..5544c08964b 100644
--- a/src/Http/Controllers/Settings/UserGroupsController.php
+++ b/src/Http/Controllers/Settings/UserGroupsController.php
@@ -60,31 +60,25 @@ public function index()
         ]);
     }
 
-    public function create(): CpScreenResponse
+    public function create(UserPermissions $userPermissions): CpScreenResponse
     {
         $crumbs = [
             ['label' => t('Settings'), 'url' => 'settings'],
             ['label' => t('Users'), 'url' => 'settings/users'],
-            ['label' => t('User Groups'), 'url' => 'settings/users'],
+            ['label' => t('User Groups')],
         ];
 
         return new CpScreenResponse()
             ->title(t('Create a new user group'))
             ->crumbs($crumbs)
-            ->addAltAction(t('Save and continue editing'), [
-                'redirect' => 'settings/users/groups/{id}',
-                'shortcut' => true,
-                'retainScroll' => true,
-            ])
-            ->action('user-settings/save-group')
             ->redirectUrl('settings/users')
-            ->contentTemplate('settings/users/groups/_edit.twig', [
+            ->inertiaPage('SettingsUserGroupsEditPage', [
                 'group' => new UserGroup,
-                'readOnly' => $this->readOnly,
+                'permissions' => $userPermissions->getAllPermissions(),
             ]);
     }
 
-    public function edit(UserGroupModel $userGroup): CpScreenResponse|View
+    public function edit(UserGroupModel $userGroup, UserPermissions $userPermissions): CpScreenResponse|View
     {
         if (Edition::get() === Edition::Team) {
             $group = $this->userGroups->getTeamGroup();
@@ -107,16 +101,13 @@ public function edit(UserGroupModel $userGroup): CpScreenResponse|View
             ->editUrl($group->getCpEditUrl())
             ->title(trim($group->name) ?: t('Edit User Group'))
             ->crumbs($crumbs)
-            ->addAltAction(t('Save and continue editing'), [
-                'redirect' => 'settings/users/groups/{id}',
-                'shortcut' => true,
-                'retainScroll' => true,
-            ])
-            ->action('user-settings/save-group')
             ->redirectUrl('settings/users')
-            ->contentTemplate('settings/users/groups/_edit.twig', [
-                'group' => $group,
-                'readOnly' => $this->readOnly,
+            ->inertiaPage('SettingsUserGroupsEditPage', [
+                'group' => [
+                    'id' => $group->id,
+                    ...$group->getConfig(true),
+                ],
+                'permissions' => $userPermissions->getAllPermissions(),
             ])
             ->prepareScreen(function (CpScreenResponse $response, string $containerId) {
                 HtmlStack::jsWithVars(
@@ -137,6 +128,7 @@ public function store(Request $request, UserPermissions $userPermissions): Respo
     {
         $userGroupData = new UserGroup;
         $userGroupData->id = $request->integer('id', $request->input('groupId'));
+        ;
         $userGroupData->name = $request->input('name');
         $userGroupData->handle = $request->input('handle');
         $userGroupData->description = $request->input('description');
@@ -195,13 +187,13 @@ public function store(Request $request, UserPermissions $userPermissions): Respo
             ? t('Permissions saved.')
             : t('Group saved.');
 
-        return $this->asModelSuccess($group, $message, 'group');
+        return $this->asSuccess($message);
     }
 
     public function destroy(Request $request, int $groupId): Response
     {
         $this->userGroups->deleteGroupById($groupId);
 
-        return $this->asSuccess(t('Group deleted.'));
+        return $this->asSuccess(t('Group deleted.'), redirect: route('craft.cp.settings.users.index'));
     }
 }
diff --git a/src/Http/RespondsWithFlash.php b/src/Http/RespondsWithFlash.php
index 5d18d613907..14386ba9828 100644
--- a/src/Http/RespondsWithFlash.php
+++ b/src/Http/RespondsWithFlash.php
@@ -52,7 +52,9 @@ public function asSuccess(?string $message = null, array $data = [], ?string $re
         $redirect ??= $this->getPostedRedirectUrl();
 
         if ($redirect) {
-            return redirect($redirect)->with($data);
+            return redirect($redirect)
+                ->with('success', $message)
+                ->with($data);
         }
 
         return back()
@@ -128,6 +130,11 @@ protected function getPostedRedirectUrl(?object $object = null): ?string
             abort(400, 'Request contained an invalid body param');
         }
 
+        // I'm not sure why, but decrypt ac
+        if (! $url) {
+            return null;
+        }
+
         if ($object) {
             $url = renderObjectTemplate($url, $object);
         }
diff --git a/src/Http/Responses/CpScreenResponse.php b/src/Http/Responses/CpScreenResponse.php
index 6e9944834bf..94574a98f6d 100644
--- a/src/Http/Responses/CpScreenResponse.php
+++ b/src/Http/Responses/CpScreenResponse.php
@@ -719,10 +719,6 @@ public function errorSummaryTemplate(string $template, array $variables = []): s
 
     public function toResponse($request): Response
     {
-        if ($this->inertiaPage) {
-            return $this->inertiaResponse($request);
-        }
-
         if ($request->wantsJson()) {
             return $this->jsonResponse($request);
         }
@@ -730,28 +726,6 @@ public function toResponse($request): Response
         return $this->response($request);
     }
 
-    private function inertiaResponse(Request $request): Response
-    {
-        if ($this->prepareScreen) {
-            ($this->prepareScreen)($this, $request);
-        }
-
-        $crumbs = $this->crumbs;
-        if ($this->title) {
-            $crumbs[] = ['label' => $this->title];
-        }
-
-        $props = array_filter([
-            'title' => $this->title,
-            'crumbs' => $crumbs,
-        ], fn ($value) => $value !== null);
-
-        return Inertia::render(
-            $this->inertiaPage,
-            [...$props, ...$this->inertiaProps],
-        )->toResponse($request);
-    }
-
     private function jsonResponse(Request $request): JsonResponse
     {
         $namespace = Str::random(10);
@@ -869,50 +843,60 @@ private function response(Request $request): Response
             app(InternalAssetRegistry::class)->register(ContentWindowAsset::class);
         }
 
+        $templateProps = [
+            'docTitle' => $docTitle,
+            'title' => $this->title,
+            'selectedSubnavItem' => $this->selectedSubnavItem,
+            'crumbs' => array_map(function (array $crumb): array {
+                if (isset($crumb['url'])) {
+                    $crumb['url'] = Url::cpUrl($crumb['url']);
+                }
+
+                return $crumb;
+            }, $crumbs ?? []),
+            'contextMenu' => $this->contextMenu(),
+            'toolbar' => $toolbar,
+            'actionMenu' => $this->actionMenu(config: [
+                'hiddenLabel' => t('Actions'),
+                'buttonAttributes' => [
+                    'id' => 'action-btn',
+                    'class' => ['action-btn', 'hairline-dark', 'm'],
+                    'title' => t('Actions'),
+                ],
+            ]),
+            'submitButtonLabel' => $this->submitButtonLabel,
+            'additionalButtons' => $addlButtons,
+            'tabs' => $this->tabs,
+            'fullPageForm' => $isForm,
+            'mainAttributes' => $this->mainAttributes,
+            'mainFormAttributes' => $this->formAttributes,
+            'redirectUrl' => $this->redirectUrl ? Crypt::encrypt($this->redirectUrl) : null,
+            'formActions' => array_map(function (array $action): array {
+                if (isset($action['redirect'])) {
+                    $action['redirect'] = Crypt::encrypt($action['redirect']);
+                }
+
+                return $action;
+            }, $altActions ?? []),
+            'saveShortcutRedirect' => $this->saveShortcutRedirectUrl,
+            'contentNotice' => $notice,
+            'content' => $content,
+            'details' => $sidebar,
+            'sidebar' => $pageSidebar,
+            'errorSummary' => $errorSummary,
+        ];
+
+        if ($this->inertiaPage) {
+            return Inertia::render($this->inertiaPage, [
+                ...$templateProps,
+                ...$this->inertiaProps,
+            ])->toResponse($request);
+        }
+
         // Render and return the template
         return response(pageTemplate(
             '_layouts/cp',
-            [
-                'docTitle' => $docTitle,
-                'title' => $this->title,
-                'selectedSubnavItem' => $this->selectedSubnavItem,
-                'crumbs' => array_map(function (array $crumb): array {
-                    if (isset($crumb['url'])) {
-                        $crumb['url'] = Url::cpUrl($crumb['url']);
-                    }
-
-                    return $crumb;
-                }, $crumbs ?? []),
-                'contextMenu' => $this->contextMenu(),
-                'toolbar' => $toolbar,
-                'actionMenu' => $this->actionMenu(config: [
-                    'hiddenLabel' => t('Actions'),
-                    'buttonAttributes' => [
-                        'id' => 'action-btn',
-                        'class' => ['action-btn', 'hairline-dark', 'm'],
-                        'title' => t('Actions'),
-                    ],
-                ]),
-                'submitButtonLabel' => $this->submitButtonLabel,
-                'additionalButtons' => $addlButtons,
-                'tabs' => $this->tabs,
-                'fullPageForm' => $isForm,
-                'mainAttributes' => $this->mainAttributes,
-                'mainFormAttributes' => $this->formAttributes,
-                'formActions' => array_map(function (array $action): array {
-                    if (isset($action['redirect'])) {
-                        $action['redirect'] = Crypt::encrypt($action['redirect']);
-                    }
-
-                    return $action;
-                }, $altActions ?? []),
-                'saveShortcutRedirect' => $this->saveShortcutRedirectUrl,
-                'contentNotice' => $notice,
-                'content' => $content,
-                'details' => $sidebar,
-                'sidebar' => $pageSidebar,
-                'errorSummary' => $errorSummary,
-            ],
+            $templateProps,
             TemplateMode::Cp
         ));
     }
diff --git a/src/User/Data/PermissionGroup.php b/src/User/Data/PermissionGroup.php
index 127db6fedfc..c9d1239e452 100644
--- a/src/User/Data/PermissionGroup.php
+++ b/src/User/Data/PermissionGroup.php
@@ -4,6 +4,7 @@
 
 namespace CraftCms\Cms\User\Data;
 
+use CraftCms\Cms\Support\Str;
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Support\Collection;
 
@@ -19,6 +20,7 @@ public function toArray(): array
     {
         return [
             'heading' => $this->heading,
+            'handle' => Str::toHandle($this->heading),
             'permissions' => $this->permissions->keyBy('key')->toArray(),
         ];
     }