diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx
index ea522d3196..4b8d80ad7f 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx
@@ -1,14 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
+import * as SettingGroupContentStories from './SettingGroupContent.stories';
 import * as SettingGroupHeaderStories from './SettingGroupHeader.stories';
-import * as SettingGroupInputStories from './SettingGroupInputs.stories';
-import * as SettingGroupValueStories from './SettingGroupValues.stories';
 
 import ButtonGroup from '../global/ButtonGroup';
 import SettingGroup from './SettingGroup';
+import SettingGroupContent from './SettingGroupContent';
 import SettingGroupHeader from './SettingGroupHeader';
-import SettingGroupInputs from './SettingGroupInputs';
-import SettingGroupValues from './SettingGroupValues';
 
 const meta = {
     title: 'Settings / Setting Group',
@@ -27,9 +25,9 @@ type Story = StoryObj<typeof meta>;
 
 const customButtons = <ButtonGroup buttons={[{label: 'My action', color: 'green'}]} link={true} />;
 const customHeader = <SettingGroupHeader {...SettingGroupHeaderStories.CustomHeader.args} />;
-const singleColContent = <SettingGroupValues {...SettingGroupValueStories.SingleColumn.args} />;
-const twoColView = <SettingGroupValues {...SettingGroupValueStories.TwoColumns.args} />;
-const twoColEdit = <SettingGroupInputs {...SettingGroupInputStories.TwoColumns.args} />;
+const singleColContent = <SettingGroupContent {...SettingGroupContentStories.SingleColumn.args} />;
+const twoColView = <SettingGroupContent {...SettingGroupContentStories.TwoColumns.args} />;
+const twoColEdit = <SettingGroupContent {...SettingGroupContentStories.Editing.args} />;
 
 export const SingleColumn: Story = {
     args: {
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.stories.tsx
similarity index 50%
rename from ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.stories.tsx
index ccbef0c10d..de03a09b4b 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.stories.tsx
@@ -1,17 +1,19 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import SettingGroupValues from './SettingGroupValues';
+import SettingGroupContent from './SettingGroupContent';
 
 import * as SettingValueStories from './SettingValue.stories';
+import * as TextFieldStories from '../global/TextField.stories';
+import TextField from '../global/TextField';
 
 const meta = {
-    title: 'Settings / Setting Group Values',
-    component: SettingGroupValues,
+    title: 'Settings / Setting Group Content',
+    component: SettingGroupContent,
     tags: ['autodocs']
-} satisfies Meta<typeof SettingGroupValues>;
+} satisfies Meta<typeof SettingGroupContent>;
 
 export default meta;
-type Story = StoryObj<typeof SettingGroupValues>;
+type Story = StoryObj<typeof SettingGroupContent>;
 
 const values = [
     {...SettingValueStories.Default.args, key: '1', heading: 'Setting one', value: 'Value one'},
@@ -31,4 +33,18 @@ export const TwoColumns: Story = {
         values: values,
         columns: 2
     }
+};
+
+export const Editing: Story = {
+    args: {
+        columns: 2,
+        children: (
+            <>
+                <TextField {...TextFieldStories.WithHint.args} />
+                <TextField {...TextFieldStories.WithHint.args} />
+                <TextField {...TextFieldStories.WithHint.args} />
+                <TextField {...TextFieldStories.WithHint.args} />
+            </>
+        )
+    }
 };
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.tsx
similarity index 65%
rename from ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.tsx
index bb35676f85..4d6811c830 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.tsx
@@ -3,13 +3,17 @@ import React from 'react';
 import SettingValue from './SettingValue';
 import {ISettingValue} from './SettingValue';
 
-interface ISettingGroupValues {
+interface ISettingGroupContent {
     columns?: 1 | 2;
+
+    /**
+     * Use this array to display setting values with standard formatting in the content area of a setting group
+     */
     values?: Array<ISettingValue>;
     children?: React.ReactNode;
 }
 
-const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values, children}) => {
+const SettingGroupContent: React.FC<ISettingGroupContent> = ({columns, values, children}) => {
     let styles = 'flex flex-col gap-6';
     if (columns === 2) {
         styles = 'grid grid-cols-2 gap-6';
@@ -25,4 +29,4 @@ const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values, chi
     );
 };
 
-export default SettingGroupValues;
\ No newline at end of file
+export default SettingGroupContent;
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.stories.tsx
deleted file mode 100644
index 7bfebb85af..0000000000
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import SettingGroupInputs from './SettingGroupInputs';
-import TextField from '../global/TextField';
-
-import * as TextFieldStories from '../global/TextField.stories';
-
-const meta = {
-    title: 'Settings / Setting Group Inputs',
-    component: SettingGroupInputs,
-    tags: ['autodocs']
-} satisfies Meta<typeof SettingGroupInputs>;
-
-export default meta;
-type Story = StoryObj<typeof SettingGroupInputs>;
-
-export const SingleColumn: Story = {
-    args: {
-        children: 
-            <>
-                <TextField {...TextFieldStories.WithHeading.args} />
-                <TextField {...TextFieldStories.WithHeading.args} />
-                <TextField {...TextFieldStories.WithHeading.args} />
-                <TextField {...TextFieldStories.WithHeading.args} />
-            </>
-    }
-};
-
-export const TwoColumns: Story = {
-    args: {
-        columns: 2,
-        children: 
-            <>
-                <TextField {...TextFieldStories.WithHeading.args} />
-                <TextField {...TextFieldStories.WithHeading.args} />
-                <TextField {...TextFieldStories.WithHeading.args} />
-                <TextField {...TextFieldStories.WithHeading.args} />
-            </>
-    }
-};
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.tsx
deleted file mode 100644
index d86eebb81c..0000000000
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-interface ISettingGroupInputs {
-    columns?: 1 | 2;
-    children?: React.ReactNode;
-}
-
-const SettingGroupInputs: React.FC<ISettingGroupInputs> = ({columns, children}) => {
-    let styles = 'flex flex-col gap-6';
-    if (columns === 2) {
-        styles = 'grid grid-cols-2 gap-6';
-    }
-
-    return (
-        <div className={styles}>
-            {children}
-        </div>
-    );
-};
-
-export default SettingGroupInputs;
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx b/ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
index d5d4b4488d..bea32d974c 100644
--- a/ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
+++ b/ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
-import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
-import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const DefaultRecipients: React.FC = () => {
@@ -12,7 +11,7 @@ const DefaultRecipients: React.FC = () => {
     };
 
     const values = (
-        <SettingGroupValues
+        <SettingGroupContent
             values={[
                 {
                     heading: 'Default Newsletter recipients',
@@ -24,9 +23,9 @@ const DefaultRecipients: React.FC = () => {
     );
 
     const inputs = (
-        <SettingGroupInputs>
+        <SettingGroupContent>
             
-        </SettingGroupInputs>
+        </SettingGroupContent>
     );
 
     return (
diff --git a/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx b/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
index ef0526d340..993bc0c31c 100644
--- a/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
+++ b/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
@@ -1,8 +1,7 @@
 import Link from '../../../admin-x-ds/global/Link';
 import React, {useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
-import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
-import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const MailGun: React.FC = () => {
@@ -13,7 +12,7 @@ const MailGun: React.FC = () => {
     };
 
     const values = (
-        <SettingGroupValues
+        <SettingGroupContent
             columns={2}
             values={[
                 {
@@ -26,9 +25,9 @@ const MailGun: React.FC = () => {
     );
 
     const inputs = (
-        <SettingGroupInputs>
+        <SettingGroupContent>
             
-        </SettingGroupInputs>
+        </SettingGroupContent>
     );
 
     return (
diff --git a/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx b/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx
index 6670f149d5..239e795e86 100644
--- a/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx
@@ -1,8 +1,8 @@
 import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
 import React, {useContext} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader';
-import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
 import {SettingsContext} from '../../SettingsProvider';
 import {getSettingValue} from '../../../utils/helpers';
 
@@ -35,7 +35,7 @@ const PublicationLanguage: React.FC = () => {
 
     return (
         <SettingGroup customHeader={custonHeader}>
-            <SettingGroupValues values={viewValues} />
+            <SettingGroupContent values={viewValues} />
         </SettingGroup>
     );
 };
diff --git a/ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx b/ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
index 57983b8432..f2c351f3d6 100644
--- a/ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
-import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
-import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../admin-x-ds/global/TextField';
 import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
@@ -13,7 +12,7 @@ const SocialAccounts: React.FC = () => {
     };
 
     const values = (
-        <SettingGroupValues
+        <SettingGroupContent
             values={[
                 {
                     heading: `URL of your publication's Facebook Page`,
@@ -30,7 +29,7 @@ const SocialAccounts: React.FC = () => {
     );
 
     const inputs = (
-        <SettingGroupInputs>
+        <SettingGroupContent>
             <TextField
                 placeholder="https://www.facebook.com/ghost"
                 title={`URL of your publication's Facebook Page`}
@@ -43,7 +42,7 @@ const SocialAccounts: React.FC = () => {
                 value="https://twitter.com/ghost"
                 onChange={() => {}}
             />
-        </SettingGroupInputs>
+        </SettingGroupContent>
     );
 
     return (
diff --git a/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx b/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx
index a33fa925ed..ba65ec9b5c 100644
--- a/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx
@@ -1,8 +1,8 @@
 import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
 import React, {useContext, useEffect, useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader';
-import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
 import {SettingsContext} from '../../SettingsProvider';
 import {getLocalTime, getSettingValue} from '../../../utils/helpers';
 
@@ -47,7 +47,7 @@ const TimeZone: React.FC = () => {
 
     return (
         <SettingGroup customHeader={customHeader}>
-            <SettingGroupValues values={viewValues} />
+            <SettingGroupContent values={viewValues} />
         </SettingGroup>
     );
 };
diff --git a/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx b/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
index 8685a13a04..d6e64781bc 100644
--- a/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
@@ -1,7 +1,6 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
-import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
-import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../admin-x-ds/global/TextField';
 import {SettingsContext} from '../../SettingsProvider';
 import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
@@ -64,7 +63,7 @@ const TitleAndDescription: React.FC = () => {
     ];
 
     const inputFields = (
-        <SettingGroupInputs columns={2}>
+        <SettingGroupContent columns={2}>
             <TextField
                 hint="The name of your site"
                 inputRef={siteTitleRef}
@@ -80,7 +79,7 @@ const TitleAndDescription: React.FC = () => {
                 value={siteDescription}
                 onChange={handleDescriptionChange}
             />
-        </SettingGroupInputs>
+        </SettingGroupContent>
     );
 
     return (
@@ -91,7 +90,7 @@ const TitleAndDescription: React.FC = () => {
             onSave={handleSave}
             onStateChange={handleStateChange}
         >
-            {currentState === 'view' ? <SettingGroupValues columns={2} values={viewValues} /> : inputFields }
+            {currentState === 'view' ? <SettingGroupContent columns={2} values={viewValues} /> : inputFields }
         </SettingGroup>
     );
 };
diff --git a/ghost/admin-x-settings/src/components/settings/membership/Access.tsx b/ghost/admin-x-settings/src/components/settings/membership/Access.tsx
index 6dbe6413f0..72c5a886fc 100644
--- a/ghost/admin-x-settings/src/components/settings/membership/Access.tsx
+++ b/ghost/admin-x-settings/src/components/settings/membership/Access.tsx
@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
-import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
-import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const Access: React.FC = () => {
@@ -12,7 +11,7 @@ const Access: React.FC = () => {
     };
 
     const values = (
-        <SettingGroupValues
+        <SettingGroupContent
             values={[
                 {
                     heading: 'Subscription access',
@@ -34,9 +33,9 @@ const Access: React.FC = () => {
     );
 
     const inputs = (
-        <SettingGroupInputs>
+        <SettingGroupContent>
             
-        </SettingGroupInputs>
+        </SettingGroupContent>
     );
 
     return (
diff --git a/ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx b/ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx
index c4fd234464..8184a1542f 100644
--- a/ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx
+++ b/ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx
@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
-import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
-import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const Analytics: React.FC = () => {
@@ -12,7 +11,7 @@ const Analytics: React.FC = () => {
     };
 
     const values = (
-        <SettingGroupValues
+        <SettingGroupContent
             columns={2}
             values={[
                 {
@@ -40,9 +39,9 @@ const Analytics: React.FC = () => {
     );
 
     const inputs = (
-        <SettingGroupInputs>
+        <SettingGroupContent>
             
-        </SettingGroupInputs>
+        </SettingGroupContent>
     );
 
     return (