diff --git a/package-lock.json b/package-lock.json
index 434bfcbc07..9c4d20beab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-json": "^6.0.2",
         "@codemirror/lang-markdown": "^6.0.0",
         "@codemirror/lang-xml": "^6.0.0",
         "@codemirror/lint": "^6.2.1",
@@ -2263,6 +2264,16 @@
         "@lezer/javascript": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/lang-markdown": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.5.0.tgz",
@@ -5231,6 +5242,17 @@
         "@lezer/lr": "^1.3.0"
       }
     },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@lezer/lr": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
diff --git a/package.json b/package.json
index ddc79a196c..35d1cb62fd 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.0.0",
+    "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.0.0",
     "@codemirror/lang-xml": "^6.0.0",
     "@codemirror/lint": "^6.2.1",
diff --git a/src/advanced-settings/AdvancedSettings.test.tsx b/src/advanced-settings/AdvancedSettings.test.tsx
index 8b9d73aa70..53d04c6151 100644
--- a/src/advanced-settings/AdvancedSettings.test.tsx
+++ b/src/advanced-settings/AdvancedSettings.test.tsx
@@ -12,17 +12,17 @@ import { advancedSettingsMock } from './__mocks__';
 import { getCourseAdvancedSettingsApiUrl } from './data/api';
 import AdvancedSettings from './AdvancedSettings';
 import messages from './messages';
+import filterMessages from './settings-filters/messages';
 
-let axiosMock;
-const mockPathname = '/foo-bar';
-const courseId = '123';
-
-// Mock the TextareaAutosize component
-jest.mock('react-textarea-autosize', () =>
-  jest.fn((props) => (
+// Mock CodeMirror-based JsonInput with a controlled textarea so tests can
+// interact with JSON fields without a real browser layout engine.
+jest.mock('./setting-card/inputs/JsonInput', () =>
+  jest.fn(({ initialValue, onChange, onBlur }) => (
     <textarea
-      {...props}
-      onFocus={() => {}}
+      data-testid="json-input"
+      value={initialValue}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
     />
   )));
 
@@ -30,6 +30,10 @@ jest.mock('@src/authz/data/apiHooks', () => ({
   useUserPermissions: jest.fn(),
 }));
 
+let axiosMock;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
 const render = () =>
   baseRender(
     <CourseAuthoringProvider courseId={courseId}>
@@ -62,13 +66,15 @@ describe('<AdvancedSettings />', () => {
 
   it('should render without errors', async () => {
     render();
-    expect(await screen.findByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+    expect(
+      await screen.findByText(messages.headingSubtitle.defaultMessage, {
+        selector: 'small.sub-header-title-subtitle',
+      }),
+    ).toBeInTheDocument();
     expect(screen.getByText(messages.headingTitle.defaultMessage, {
       selector: 'h2.sub-header-title',
     })).toBeInTheDocument();
-    expect(screen.getByText(messages.policy.defaultMessage)).toBeInTheDocument();
-    expect(screen.getByText(/Do not modify these policies unless you are familiar with their purpose./i))
-      .toBeInTheDocument();
+    expect(screen.queryByText(messages.policy.defaultMessage)).toBeNull();
   });
 
   it('should render setting element', async () => {
@@ -77,9 +83,9 @@ describe('<AdvancedSettings />', () => {
     expect(screen.queryByText('Certificate web/html view enabled')).toBeNull();
   });
 
-  it('should change to onСhange', async () => {
+  it('should change to onChange', async () => {
     render();
-    const textarea = await screen.findByLabelText(/Advanced Module List/i);
+    const textarea = await screen.findByDisplayValue('[]');
     expect(textarea).toBeInTheDocument();
     fireEvent.change(textarea, { target: { value: '[1, 2, 3]' } });
     expect(textarea).toHaveValue('[1, 2, 3]');
@@ -87,7 +93,7 @@ describe('<AdvancedSettings />', () => {
 
   it('should display a warning alert', async () => {
     render();
-    const textarea = await screen.findByLabelText(/Advanced Module List/i);
+    const textarea = await screen.findByDisplayValue('[]');
     fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
     expect(screen.getByText(messages.buttonCancelText.defaultMessage)).toBeInTheDocument();
     expect(screen.getByText(messages.buttonSaveText.defaultMessage)).toBeInTheDocument();
@@ -95,7 +101,7 @@ describe('<AdvancedSettings />', () => {
     expect(screen.getByText(messages.alertWarningDescriptions.defaultMessage)).toBeInTheDocument();
   });
 
-  it('should display a tooltip on clicking on the icon', async () => {
+  it('should display a tooltip on clicking on the info icon', async () => {
     const user = userEvent.setup();
     render();
     const button = await screen.findByLabelText(/Show help text/i);
@@ -103,42 +109,43 @@ describe('<AdvancedSettings />', () => {
     expect(screen.getByText(/Enter the names of the advanced modules to use in your course./i)).toBeInTheDocument();
   });
 
-  it('should change deprecated button text', async () => {
+  it('should toggle deprecated settings visibility', async () => {
     const user = userEvent.setup();
     render();
-    const showDeprecatedItemsBtn = await screen.findByText(/Show Deprecated Settings/i);
-    expect(showDeprecatedItemsBtn).toBeInTheDocument();
-    await user.click(showDeprecatedItemsBtn);
-    expect(screen.getByText(/Hide Deprecated Settings/i)).toBeInTheDocument();
+    const showDeprecatedBtn = await screen.findByText(filterMessages.showDeprecated.defaultMessage);
+    expect(showDeprecatedBtn).toBeInTheDocument();
+    expect(screen.queryByText('Certificate web/html view enabled')).toBeNull();
+    await user.click(showDeprecatedBtn);
+    expect(screen.getByText(filterMessages.hideDeprecated.defaultMessage)).toBeInTheDocument();
     expect(screen.getByText('Certificate web/html view enabled')).toBeInTheDocument();
   });
 
   it('should reset to default value on click on Cancel button', async () => {
     const user = userEvent.setup();
     render();
-    const textarea = await screen.findByLabelText(/Advanced Module List/i);
+    const textarea = await screen.findByDisplayValue('[]');
     fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
     expect(textarea).toHaveValue('[3, 2, 1]');
     await user.click(screen.getByText(messages.buttonCancelText.defaultMessage));
     expect(textarea).toHaveValue('[]');
   });
 
-  it('should update the textarea value and display the updated value after clicking "Change manually"', async () => {
+  it('should preserve the field value after a failed save due to invalid JSON', async () => {
     const user = userEvent.setup();
     render();
-    const textarea = await screen.findByLabelText(/Advanced Module List/i);
+    const textarea = await screen.findByDisplayValue('[]');
     fireEvent.change(textarea, { target: { value: '[3, 2, 1,' } });
     fireEvent.blur(textarea);
     expect(textarea).toHaveValue('[3, 2, 1,');
     await user.click(screen.getByText('Save changes'));
-    await user.click(await screen.findByText('Change manually'));
+    expect(screen.queryByText(messages.buttonSaveText.defaultMessage)).toBeNull();
     expect(textarea).toHaveValue('[3, 2, 1,');
   });
 
   it('should show success alert after save', async () => {
     const user = userEvent.setup();
     render();
-    const textarea = await screen.findByLabelText(/Advanced Module List/i);
+    const textarea = await screen.findByDisplayValue('[]');
     fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
     expect(textarea).toHaveValue('[3, 2, 1]');
     axiosMock
@@ -151,13 +158,13 @@ describe('<AdvancedSettings />', () => {
         },
       });
     await user.click(screen.getByText('Save changes'));
-    expect(screen.getByText('Your policy changes have been saved.')).toBeInTheDocument();
+    expect(await screen.findByText('Your policy changes have been saved.')).toBeInTheDocument();
   });
 
   it('should show error modal on save failure', async () => {
     const user = userEvent.setup();
     render();
-    const textarea = await screen.findByLabelText(/Advanced Module List/i);
+    const textarea = await screen.findByDisplayValue('[]');
     fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
     axiosMock
       .onPatch(`${getCourseAdvancedSettingsApiUrl(courseId)}`)
@@ -173,13 +180,15 @@ describe('<AdvancedSettings />', () => {
       data: { canManageAdvancedSettings: true },
     } as unknown as ReturnType<typeof useUserPermissions>);
     render();
-    expect(await screen.findByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+    expect(
+      await screen.findByText(messages.headingSubtitle.defaultMessage, {
+        selector: 'small.sub-header-title-subtitle',
+      }),
+    ).toBeInTheDocument();
     expect(screen.getByText(messages.headingTitle.defaultMessage, {
       selector: 'h2.sub-header-title',
     })).toBeInTheDocument();
-    expect(screen.getByText(messages.policy.defaultMessage)).toBeInTheDocument();
-    expect(screen.getByText(/Do not modify these policies unless you are familiar with their purpose./i))
-      .toBeInTheDocument();
+    expect(screen.queryByText(messages.policy.defaultMessage)).toBeNull();
   });
 
   it('should show permission alert when authz.enable_course_authoring flag is enabled and the user is not authorized', async () => {
diff --git a/src/advanced-settings/AdvancedSettings.tsx b/src/advanced-settings/AdvancedSettings.tsx
index ef5d37d921..4f38f61241 100644
--- a/src/advanced-settings/AdvancedSettings.tsx
+++ b/src/advanced-settings/AdvancedSettings.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import {
+  Alert,
   Container,
   Button,
   Layout,
@@ -8,7 +9,7 @@ import {
   TransitionReplace,
 } from '@openedx/paragon';
 import { CheckCircle, Info, Warning } from '@openedx/paragon/icons';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useWaffleFlags } from '@src/data/apiHooks';
 import { useUserPermissions } from '@src/authz/data/apiHooks';
@@ -24,17 +25,29 @@ import AlertMessage from '@src/generic/alert-message';
 import getPageHeadTitle from '@src/generic/utils';
 import Placeholder from '@src/editors/Placeholder';
 
-import SettingCard from './setting-card/SettingCard';
 import SettingsSidebar from './settings-sidebar/SettingsSidebar';
+import SettingsSection from './settings-section/SettingsSection';
+import SettingsFilters from './settings-filters/SettingsFilters';
 import validateAdvancedSettingsData from './utils';
 import messages from './messages';
 import ModalError from './modal-error/ModalError';
 import { useCourseAdvancedSettings, useProctoringExamErrors, useUpdateCourseAdvancedSettings } from './data/apiHooks';
+import {
+  SETTINGS_CATEGORY_MAP,
+  CATEGORY_ORDER,
+  UNCATEGORIZED,
+  CATEGORY_CONTENT_BLOCKS,
+  CONTENT_BLOCKS_SUBCATEGORY_MAP,
+  CONTENT_BLOCKS_SUBCATEGORY_ORDER,
+} from './data/settingsCategories';
+import type { SettingEntry } from './data/types';
 
 const AdvancedSettings = () => {
   const intl = useIntl();
   const [saveSettingsPrompt, showSaveSettingsPrompt] = useState(false);
   const [showDeprecated, setShowDeprecated] = useState(false);
+  const [filterText, setFilterText] = useState('');
+  const [expandAll, setExpandAll] = useState(true);
   const [errorModal, showErrorModal] = useState(false);
   const [editedSettings, setEditedSettings] = useState({});
   const [errorFields, setErrorFields] = useState([]);
@@ -89,15 +102,16 @@ const AdvancedSettings = () => {
     if (isQuerySuccess) {
       setShowSuccessAlert(true);
       setIsEditableState(false);
+      setEditedSettings({});
+      showSaveSettingsPrompt(false);
       setTimeout(() => setShowSuccessAlert(false), 15000);
       window.scrollTo({ top: 0, behavior: 'smooth' });
-      showSaveSettingsPrompt(false);
     } else if (queryError && !hasInternetConnectionError) {
       // @ts-ignore
       setErrorFields(queryError?.response?.data ?? []);
       showErrorModal(true);
     }
-  }, [isQuerySuccess, queryError]);
+  }, [isQuerySuccess, queryError, hasInternetConnectionError]);
 
   if (isLoading) {
     return (
@@ -148,6 +162,39 @@ const AdvancedSettings = () => {
     showSaveSettingsPrompt(true);
   };
 
+  const groupSettingsByCategory = (settingsData, filter) => {
+    const query = filter.toLowerCase().trim();
+    const groups = {};
+
+    Object.entries(settingsData).forEach(([key, value]) => {
+      if (query) {
+        const matchesKey = key.toLowerCase().includes(query);
+        const matchesName = ((value as any).displayName || '').toLowerCase().includes(query);
+        if (!matchesKey && !matchesName) {
+          return;
+        }
+      }
+      const category = SETTINGS_CATEGORY_MAP[key] || UNCATEGORIZED;
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push([key, value]);
+    });
+
+    const ordered = {};
+    CATEGORY_ORDER.forEach((cat) => {
+      if (groups[cat]) {
+        ordered[cat] = groups[cat];
+      }
+    });
+    Object.keys(groups).forEach((cat) => {
+      if (!ordered[cat]) {
+        ordered[cat] = groups[cat];
+      }
+    });
+    return ordered;
+  };
+
   // Show permission denied alert when authz is enabled and user doesn't have permission
   const authzIsEnabledAndNoPermission = isAuthzEnabled
     && !isLoadingUserPermissions
@@ -209,56 +256,50 @@ const AdvancedSettings = () => {
               <SubHeader
                 subtitle={intl.formatMessage(messages.headingSubtitle)}
                 title={intl.formatMessage(messages.headingTitle)}
-                contentTitle={intl.formatMessage(messages.policy)}
+                headerClassName="pb-4"
               />
               <article>
                 <div>
                   <section className="setting-items-policies">
-                    <div className="small">
-                      <FormattedMessage
-                        id="course-authoring.advanced-settings.policies.description"
-                        defaultMessage="{notice} Do not modify these policies unless you are familiar with their purpose."
-                        values={{ notice: <strong>Warning:</strong> }}
-                      />
-                    </div>
-                    <div className="setting-items-deprecated-setting">
-                      <Button
-                        variant={showDeprecated ? 'outline-brand' : 'tertiary'}
-                        onClick={() => setShowDeprecated(!showDeprecated)}
-                        size="sm"
-                      >
-                        <FormattedMessage
-                          id="course-authoring.advanced-settings.deprecated.button.text"
-                          defaultMessage="{visibility} deprecated settings"
-                          values={{
-                            visibility: showDeprecated ?
-                              intl.formatMessage(messages.deprecatedButtonHideText)
-                              : intl.formatMessage(messages.deprecatedButtonShowText),
-                          }}
-                        />
-                      </Button>
-                    </div>
-                    <ul className="setting-items-list p-0">
-                      {Object.keys(advancedSettingsData).map((settingName) => {
-                        const settingData = advancedSettingsData[settingName];
-                        if (settingData.deprecated && !showDeprecated) {
-                          return null;
-                        }
+                    <SettingsFilters
+                      filterText={filterText}
+                      onFilterChange={setFilterText}
+                      showDeprecated={showDeprecated}
+                      onDeprecatedChange={setShowDeprecated}
+                      expandAll={expandAll}
+                      onExpandAllChange={setExpandAll}
+                    />
+                    {(() => {
+                      const grouped = groupSettingsByCategory(advancedSettingsData, filterText);
+                      const entries = Object.entries(grouped);
+                      if (filterText.trim() && entries.length === 0) {
                         return (
-                          <SettingCard
-                            key={settingName}
-                            settingData={settingData}
-                            name={settingName}
-                            showSaveSettingsPrompt={showSaveSettingsPrompt}
-                            saveSettingsPrompt={saveSettingsPrompt}
-                            setEdited={setEditedSettings}
-                            handleBlur={handleSettingBlur}
-                            isEditableState={isEditableState}
-                            setIsEditableState={setIsEditableState}
-                          />
+                          <Alert variant="info">
+                            {intl.formatMessage(messages.noSearchResults, { query: filterText.trim() })}
+                          </Alert>
                         );
-                      })}
-                    </ul>
+                      }
+                      return entries.map(([category, settingsEntries]) => (
+                        <SettingsSection
+                          key={category}
+                          category={category}
+                          settingsEntries={settingsEntries as SettingEntry[]}
+                          showDeprecated={showDeprecated}
+                          showSaveSettingsPrompt={showSaveSettingsPrompt}
+                          saveSettingsPrompt={saveSettingsPrompt}
+                          setEditedSettings={setEditedSettings}
+                          handleSettingBlur={handleSettingBlur}
+                          isEditableState={isEditableState}
+                          setIsEditableState={setIsEditableState}
+                          forceOpen={filterText.trim() !== ''}
+                          expandAll={expandAll}
+                          subcategoryMap={category === CATEGORY_CONTENT_BLOCKS ? CONTENT_BLOCKS_SUBCATEGORY_MAP : null}
+                          subcategoryOrder={category === CATEGORY_CONTENT_BLOCKS
+                            ? CONTENT_BLOCKS_SUBCATEGORY_ORDER
+                            : []}
+                        />
+                      ));
+                    })()}
                   </section>
                 </div>
               </article>
diff --git a/src/advanced-settings/data/fieldTypeMessages.ts b/src/advanced-settings/data/fieldTypeMessages.ts
new file mode 100644
index 0000000000..cb7f42c45a
--- /dev/null
+++ b/src/advanced-settings/data/fieldTypeMessages.ts
@@ -0,0 +1,416 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+// ── Enum option labels ────────────────────────────────────────────────────────
+
+/**
+ * i18n message descriptors for all enum option display labels.
+ * Shared labels (e.g. 'Always', 'Never') are defined once and reused
+ * across multiple fields in ENUM_LABEL_MESSAGES below.
+ */
+const enumOptionMessages = defineMessages({
+  always: {
+    id: 'course-authoring.advanced-settings.enum.always',
+    defaultMessage: 'Always',
+    description: 'Option label meaning the setting applies at all times (used in Show Answer, Show Correctness, etc.)',
+  },
+  answered: {
+    id: 'course-authoring.advanced-settings.enum.answered',
+    defaultMessage: 'Answered',
+    description: 'Option label for Show Answer: show the answer after the learner has submitted a response',
+  },
+  attempted: {
+    id: 'course-authoring.advanced-settings.enum.attempted',
+    defaultMessage: 'Attempted',
+    description: 'Option label for Show Answer: show the answer after the learner has attempted the problem',
+  },
+  closed: {
+    id: 'course-authoring.advanced-settings.enum.closed',
+    defaultMessage: 'Closed',
+    description: 'Option label for Show Answer: show the answer after the problem due date has passed',
+  },
+  finished: {
+    id: 'course-authoring.advanced-settings.enum.finished',
+    defaultMessage: 'Finished',
+    description:
+      'Option label for Show Answer: show the answer after the learner has used all attempts or the problem is past due',
+  },
+  correctOrPastDue: {
+    id: 'course-authoring.advanced-settings.enum.correct-or-past-due',
+    defaultMessage: 'Correct or past due',
+    description:
+      'Option label for Show Answer: show the answer once the learner answers correctly or the due date passes',
+  },
+  pastDue: {
+    id: 'course-authoring.advanced-settings.enum.past-due',
+    defaultMessage: 'Past due',
+    description: 'Option label meaning the setting applies only after the due date has passed',
+  },
+  never: {
+    id: 'course-authoring.advanced-settings.enum.never',
+    defaultMessage: 'Never',
+    description: 'Option label meaning the setting never applies (used in Show Answer, Show Correctness, etc.)',
+  },
+  afterAttempts: {
+    id: 'course-authoring.advanced-settings.enum.after-attempts',
+    defaultMessage: 'After attempts',
+    description: 'Option label for Show Answer: show the answer after the learner has used a set number of attempts',
+  },
+  afterAllAttempts: {
+    id: 'course-authoring.advanced-settings.enum.after-all-attempts',
+    defaultMessage: 'After all attempts',
+    description: 'Option label for Show Answer: show the answer only after the learner has exhausted all attempts',
+  },
+  afterAllAttemptsOrCorrect: {
+    id: 'course-authoring.advanced-settings.enum.after-all-attempts-or-correct',
+    defaultMessage: 'After all attempts or correct',
+    description:
+      'Option label for Show Answer: show the answer after all attempts are used or the learner answers correctly',
+  },
+  attemptedNoPastDue: {
+    id: 'course-authoring.advanced-settings.enum.attempted-no-past-due',
+    defaultMessage: 'Attempted (no past due)',
+    description: 'Option label for Show Answer: show the answer after an attempt, but not based on the due date',
+  },
+  onReset: {
+    id: 'course-authoring.advanced-settings.enum.on-reset',
+    defaultMessage: 'On reset',
+    description: 'Option label for Randomization: randomize the problem each time the learner resets it',
+  },
+  perStudent: {
+    id: 'course-authoring.advanced-settings.enum.per-student',
+    defaultMessage: 'Per student',
+    description: 'Option label for Randomization: use a different randomization seed for each student',
+  },
+  bothCatalogAndAbout: {
+    id: 'course-authoring.advanced-settings.enum.both-catalog-and-about',
+    defaultMessage: 'Both (catalog and about page)',
+    description: 'Option label for Catalog Visibility: show the course in both the course catalog and the about page',
+  },
+  aboutPageOnly: {
+    id: 'course-authoring.advanced-settings.enum.about-page-only',
+    defaultMessage: 'About page only',
+    description: 'Option label for Catalog Visibility: show the course only on its about page, not in the catalog',
+  },
+  none: {
+    id: 'course-authoring.advanced-settings.enum.none',
+    defaultMessage: 'None',
+    description: 'Option label meaning the course is hidden from both the catalog and the about page',
+  },
+  private: {
+    id: 'course-authoring.advanced-settings.enum.private',
+    defaultMessage: 'Private',
+    description: 'Option label for Course Visibility: the course is not visible to unenrolled learners',
+  },
+  public: {
+    id: 'course-authoring.advanced-settings.enum.public',
+    defaultMessage: 'Public',
+    description: 'Option label for Course Visibility: the course content is fully visible to all learners',
+  },
+  publicOutline: {
+    id: 'course-authoring.advanced-settings.enum.public-outline',
+    defaultMessage: 'Public outline',
+    description: 'Option label for Course Visibility: only the course outline is visible to unenrolled learners',
+  },
+  perVideo: {
+    id: 'course-authoring.advanced-settings.enum.per-video',
+    defaultMessage: 'Per video',
+    description: 'Option label for Video Sharing: sharing settings are configured individually per video',
+  },
+  allOn: {
+    id: 'course-authoring.advanced-settings.enum.all-on',
+    defaultMessage: 'All on',
+    description: 'Option label for Video Sharing: sharing is enabled for all videos in the course',
+  },
+  allOff: {
+    id: 'course-authoring.advanced-settings.enum.all-off',
+    defaultMessage: 'All off',
+    description: 'Option label for Video Sharing: sharing is disabled for all videos in the course',
+  },
+  studio: {
+    id: 'course-authoring.advanced-settings.enum.studio',
+    defaultMessage: 'Studio',
+    description: 'Option label for Course Edit Method: the course is edited using Studio (the visual editor)',
+  },
+  xml: {
+    id: 'course-authoring.advanced-settings.enum.xml',
+    defaultMessage: 'XML',
+    description: 'Option label for Course Edit Method: the course is edited directly as XML files',
+  },
+  endOfCourse: {
+    id: 'course-authoring.advanced-settings.enum.end-of-course',
+    defaultMessage: 'End of course',
+    description: 'Option label for Certificates Display Behavior: certificates are displayed after the course ends',
+  },
+  earlyNoInfo: {
+    id: 'course-authoring.advanced-settings.enum.early-no-info',
+    defaultMessage: 'Early (no info)',
+    description:
+      'Option label for Certificates Display Behavior: certificates are displayed early with no additional information',
+  },
+  earlyWithInfo: {
+    id: 'course-authoring.advanced-settings.enum.early-with-info',
+    defaultMessage: 'Early (with info)',
+    description:
+      'Option label for Certificates Display Behavior: certificates are displayed early with additional information shown to learners',
+  },
+});
+
+/**
+ * Maps each enum field name and option value to its i18n message descriptor.
+ * Used by EnumInput to render localized option labels.
+ * Keys match the `value` field of each option in ENUM_OPTIONS (fieldTypes.ts).
+ */
+export const ENUM_LABEL_MESSAGES: Record<string, Record<string, { id: string; defaultMessage: string; }>> = {
+  showanswer: {
+    always: enumOptionMessages.always,
+    answered: enumOptionMessages.answered,
+    attempted: enumOptionMessages.attempted,
+    closed: enumOptionMessages.closed,
+    finished: enumOptionMessages.finished,
+    correct_or_past_due: enumOptionMessages.correctOrPastDue,
+    past_due: enumOptionMessages.pastDue,
+    never: enumOptionMessages.never,
+    after_attempts: enumOptionMessages.afterAttempts,
+    after_all_attempts: enumOptionMessages.afterAllAttempts,
+    after_all_attempts_or_correct: enumOptionMessages.afterAllAttemptsOrCorrect,
+    attempted_no_past_due: enumOptionMessages.attemptedNoPastDue,
+  },
+  rerandomize: {
+    never: enumOptionMessages.never,
+    always: enumOptionMessages.always,
+    onreset: enumOptionMessages.onReset,
+    per_student: enumOptionMessages.perStudent,
+  },
+  catalogVisibility: {
+    both: enumOptionMessages.bothCatalogAndAbout,
+    about: enumOptionMessages.aboutPageOnly,
+    none: enumOptionMessages.none,
+  },
+  courseVisibility: {
+    private: enumOptionMessages.private,
+    public: enumOptionMessages.public,
+    public_outline: enumOptionMessages.publicOutline,
+  },
+  showCorrectness: {
+    always: enumOptionMessages.always,
+    never: enumOptionMessages.never,
+    past_due: enumOptionMessages.pastDue,
+  },
+  videoSharingOptions: {
+    'per-video': enumOptionMessages.perVideo,
+    'all-on': enumOptionMessages.allOn,
+    'all-off': enumOptionMessages.allOff,
+  },
+  courseEditMethod: {
+    Studio: enumOptionMessages.studio,
+    XML: enumOptionMessages.xml,
+  },
+  certificatesDisplayBehavior: {
+    end: enumOptionMessages.endOfCourse,
+    early_no_info: enumOptionMessages.earlyNoInfo,
+    early_with_info: enumOptionMessages.earlyWithInfo,
+  },
+};
+
+// ── Input placeholder text ────────────────────────────────────────────────────
+
+/**
+ * i18n message descriptors for input placeholder text.
+ * Keys match the setting field names returned by the API (camelCase).
+ * Used by SettingCard to render localized placeholders in StringInput and NumberInput.
+ */
+export const FIELD_PLACEHOLDER_MESSAGES = defineMessages({
+  // STRING fields
+  displayName: {
+    id: 'course-authoring.advanced-settings.placeholder.display-name',
+    defaultMessage: 'e.g. Introduction to Biology',
+    description: 'Placeholder for the Course Display Name override field in Advanced Settings',
+  },
+  displayCoursenumber: {
+    id: 'course-authoring.advanced-settings.placeholder.display-coursenumber',
+    defaultMessage: 'e.g. BIO101',
+    description: 'Placeholder for the Course Number override field in Advanced Settings',
+  },
+  displayOrganization: {
+    id: 'course-authoring.advanced-settings.placeholder.display-organization',
+    defaultMessage: 'e.g. University of California',
+    description: 'Placeholder for the Course Organization override field in Advanced Settings',
+  },
+  giturl: {
+    id: 'course-authoring.advanced-settings.placeholder.giturl',
+    defaultMessage: 'e.g. https://github.com/org/course-repo',
+    description: 'Placeholder for the Git URL field used when Course Edit Method is set to XML',
+  },
+  staticAssetPath: {
+    id: 'course-authoring.advanced-settings.placeholder.static-asset-path',
+    defaultMessage: 'e.g. /static/',
+    description: 'Placeholder for the Static Asset Path field in Advanced Settings',
+  },
+  announcement: {
+    id: 'course-authoring.advanced-settings.placeholder.announcement',
+    defaultMessage: 'e.g. 2026-01-15',
+    description: 'Placeholder for the Announcement date field in Advanced Settings (ISO date format)',
+  },
+  courseSurveyName: {
+    id: 'course-authoring.advanced-settings.placeholder.course-survey-name',
+    defaultMessage: 'e.g. pre_course_survey',
+    description: 'Placeholder for the Course Survey Name field in Advanced Settings',
+  },
+  proctoringEscalationEmail: {
+    id: 'course-authoring.advanced-settings.placeholder.proctoring-escalation-email',
+    defaultMessage: 'e.g. proctoring@university.edu',
+    description: 'Placeholder for the Proctoring Escalation Email field in Advanced Settings',
+  },
+  proctoringProvider: {
+    id: 'course-authoring.advanced-settings.placeholder.proctoring-provider',
+    defaultMessage: 'e.g. proctortrack',
+    description: 'Placeholder for the Proctoring Provider field in Advanced Settings',
+  },
+  matlabApiKey: {
+    id: 'course-authoring.advanced-settings.placeholder.matlab-api-key',
+    defaultMessage: 'Enter your MATLAB API key',
+    description: 'Placeholder for the MATLAB API Key field in Advanced Settings',
+  },
+  xqaKey: {
+    id: 'course-authoring.advanced-settings.placeholder.xqa-key',
+    defaultMessage: 'Enter your XQA key',
+    description: 'Placeholder for the XQA Key field in Advanced Settings',
+  },
+  cssClass: {
+    id: 'course-authoring.advanced-settings.placeholder.css-class',
+    defaultMessage: 'e.g. biology-course',
+    description: 'Placeholder for the CSS Class field used to apply custom styling to the course',
+  },
+  enrollmentDomain: {
+    id: 'course-authoring.advanced-settings.placeholder.enrollment-domain',
+    defaultMessage: 'e.g. university.edu',
+    description: 'Placeholder for the Enrollment Domain field in Advanced Settings',
+  },
+  cosmeticDisplayPrice: {
+    id: 'course-authoring.advanced-settings.placeholder.cosmetic-display-price',
+    defaultMessage: 'e.g. 49.99',
+    description: 'Placeholder for the Cosmetic Display Price field shown on the course about page',
+  },
+  advertisedStart: {
+    id: 'course-authoring.advanced-settings.placeholder.advertised-start',
+    defaultMessage: 'e.g. Winter 2026',
+    description: 'Placeholder for the Advertised Start date field shown to learners on the about page',
+  },
+  socialSharingUrl: {
+    id: 'course-authoring.advanced-settings.placeholder.social-sharing-url',
+    defaultMessage: 'e.g. https://example.com/share',
+    description: 'Placeholder for the Social Sharing URL field in Advanced Settings',
+  },
+  endOfCourseSurveyUrl: {
+    id: 'course-authoring.advanced-settings.placeholder.end-of-course-survey-url',
+    defaultMessage: 'e.g. https://survey.example.com',
+    description: 'Placeholder for the End of Course Survey URL field in Advanced Settings',
+  },
+  discussionLink: {
+    id: 'course-authoring.advanced-settings.placeholder.discussion-link',
+    defaultMessage: 'e.g. https://forum.example.com',
+    description: 'Placeholder for the Discussion Link field used to override the default discussion forum URL',
+  },
+  language: {
+    id: 'course-authoring.advanced-settings.placeholder.language',
+    defaultMessage: 'e.g. en',
+    description: 'Placeholder for the Language field in Advanced Settings (ISO 639-1 language code)',
+  },
+  dueDateDisplayFormat: {
+    id: 'course-authoring.advanced-settings.placeholder.due-date-display-format',
+    defaultMessage: 'e.g. %m-%d-%Y',
+    description: 'Placeholder for the Due Date Display Format field in Advanced Settings (strftime format)',
+  },
+  courseImage: {
+    id: 'course-authoring.advanced-settings.placeholder.course-image',
+    defaultMessage: 'e.g. course_image.jpg',
+    description: 'Placeholder for the Course Image filename field in Advanced Settings',
+  },
+  bannerImage: {
+    id: 'course-authoring.advanced-settings.placeholder.banner-image',
+    defaultMessage: 'e.g. banner_image.jpg',
+    description: 'Placeholder for the Banner Image filename field in Advanced Settings',
+  },
+  videoThumbnailImage: {
+    id: 'course-authoring.advanced-settings.placeholder.video-thumbnail-image',
+    defaultMessage: 'e.g. thumbnail.jpg',
+    description: 'Placeholder for the Video Thumbnail Image filename field in Advanced Settings',
+  },
+  entranceExamId: {
+    id: 'course-authoring.advanced-settings.placeholder.entrance-exam-id',
+    defaultMessage: 'e.g. block-v1:Org+Course+Run+type@problem+block@id',
+    description: 'Placeholder for the Entrance Exam ID field in Advanced Settings (Open edX block key format)',
+  },
+  upstream: {
+    id: 'course-authoring.advanced-settings.placeholder.upstream',
+    defaultMessage: 'e.g. lib:org:library-slug',
+    description: 'Placeholder for the Upstream library key field in Advanced Settings',
+  },
+  upstreamDisplayName: {
+    id: 'course-authoring.advanced-settings.placeholder.upstream-display-name',
+    defaultMessage: 'e.g. My Content Library',
+    description: 'Placeholder for the Upstream Display Name field in Advanced Settings',
+  },
+  topLevelDownstreamParentKey: {
+    id: 'course-authoring.advanced-settings.placeholder.top-level-downstream-parent-key',
+    defaultMessage: 'e.g. block-v1:Org+Course+Run+type@vertical+block@id',
+    description:
+      'Placeholder for the Top-Level Downstream Parent Key field in Advanced Settings (Open edX block key format)',
+  },
+  certNameLong: {
+    id: 'course-authoring.advanced-settings.placeholder.cert-name-long',
+    defaultMessage: 'e.g. Certificate of Completion',
+    description: 'Placeholder for the Certificate Long Name field shown on issued certificates',
+  },
+  certNameShort: {
+    id: 'course-authoring.advanced-settings.placeholder.cert-name-short',
+    defaultMessage: 'e.g. Certificate',
+    description: 'Placeholder for the Certificate Short Name field used in certificate-related UI',
+  },
+  due: {
+    id: 'course-authoring.advanced-settings.placeholder.due',
+    defaultMessage: 'e.g. 2026-12-31T00:00:00Z',
+    description: 'Placeholder for the Due Date field in Advanced Settings (ISO 8601 datetime format)',
+  },
+  // NUMBER fields
+  maxAttempts: {
+    id: 'course-authoring.advanced-settings.placeholder.max-attempts',
+    defaultMessage: 'e.g. 3',
+    description: 'Placeholder for the Maximum Attempts field controlling how many times a learner can submit a problem',
+  },
+  maxStudentEnrollmentsAllowed: {
+    id: 'course-authoring.advanced-settings.placeholder.max-student-enrollments-allowed',
+    defaultMessage: 'e.g. 500',
+    description: 'Placeholder for the Maximum Student Enrollments Allowed field in Advanced Settings',
+  },
+  entranceExamMinimumScorePct: {
+    id: 'course-authoring.advanced-settings.placeholder.entrance-exam-minimum-score-pct',
+    defaultMessage: 'e.g. 65',
+    description: 'Placeholder for the Entrance Exam Minimum Score Percentage field in Advanced Settings',
+  },
+  daysEarlyForBeta: {
+    id: 'course-authoring.advanced-settings.placeholder.days-early-for-beta',
+    defaultMessage: 'e.g. 7',
+    description: 'Placeholder for the Days Early for Beta field controlling early access for beta testers',
+  },
+  relativeWeeksDue: {
+    id: 'course-authoring.advanced-settings.placeholder.relative-weeks-due',
+    defaultMessage: 'e.g. 4',
+    description: 'Placeholder for the Relative Weeks Due field used for self-paced courses',
+  },
+  minimumGradeCredit: {
+    id: 'course-authoring.advanced-settings.placeholder.minimum-grade-credit',
+    defaultMessage: 'e.g. 0.70',
+    description: 'Placeholder for the Minimum Grade for Credit field (decimal between 0 and 1)',
+  },
+  upstreamVersion: {
+    id: 'course-authoring.advanced-settings.placeholder.upstream-version',
+    defaultMessage: 'e.g. 1',
+    description: 'Placeholder for the Upstream Version field tracking the library content version',
+  },
+  upstreamVersionDeclined: {
+    id: 'course-authoring.advanced-settings.placeholder.upstream-version-declined',
+    defaultMessage: 'e.g. 1',
+    description: 'Placeholder for the Upstream Version Declined field tracking a declined library content update',
+  },
+});
diff --git a/src/advanced-settings/data/fieldTypes.test.ts b/src/advanced-settings/data/fieldTypes.test.ts
new file mode 100644
index 0000000000..5154983040
--- /dev/null
+++ b/src/advanced-settings/data/fieldTypes.test.ts
@@ -0,0 +1,103 @@
+import {
+  FIELD_TYPE,
+  ENUM_OPTIONS,
+  getFieldType,
+  serializeValue,
+} from './fieldTypes';
+
+describe('getFieldType()', () => {
+  // Key-based overrides (must win regardless of value type)
+  it('returns BOOLEAN for keys in BOOLEAN_KEYS even when value is null', () => {
+    expect(getFieldType('selfPaced', null)).toBe(FIELD_TYPE.BOOLEAN);
+  });
+
+  it('returns NUMBER for keys in NUMBER_KEYS even when value is null', () => {
+    expect(getFieldType('maxAttempts', null)).toBe(FIELD_TYPE.NUMBER);
+  });
+
+  it('returns ENUM for keys present in ENUM_OPTIONS', () => {
+    expect(getFieldType('showanswer', 'always')).toBe(FIELD_TYPE.ENUM);
+    expect(getFieldType('rerandomize', 'never')).toBe(FIELD_TYPE.ENUM);
+    expect(getFieldType('catalogVisibility', 'both')).toBe(FIELD_TYPE.ENUM);
+  });
+
+  // Value-based fallback
+  it('returns BOOLEAN when value is a boolean (and key not overridden)', () => {
+    expect(getFieldType('someUnknownKey', true)).toBe(FIELD_TYPE.BOOLEAN);
+    expect(getFieldType('someUnknownKey', false)).toBe(FIELD_TYPE.BOOLEAN);
+  });
+
+  it('returns NUMBER when value is a number (and key not overridden)', () => {
+    expect(getFieldType('someUnknownKey', 42)).toBe(FIELD_TYPE.NUMBER);
+    expect(getFieldType('someUnknownKey', 0)).toBe(FIELD_TYPE.NUMBER);
+  });
+
+  it('returns JSON for array values', () => {
+    expect(getFieldType('advancedModules', [])).toBe(FIELD_TYPE.JSON);
+    expect(getFieldType('ltiPassports', ['key:secret'])).toBe(FIELD_TYPE.JSON);
+  });
+
+  it('returns JSON for object values', () => {
+    expect(getFieldType('cohortConfig', { cohorted: true })).toBe(FIELD_TYPE.JSON);
+  });
+
+  it('returns STRING as default for string values with no key override', () => {
+    expect(getFieldType('displayName', 'My Course')).toBe(FIELD_TYPE.STRING);
+    expect(getFieldType('giturl', '')).toBe(FIELD_TYPE.STRING);
+  });
+});
+
+describe('serializeValue()', () => {
+  it('serializes boolean values to string', () => {
+    expect(serializeValue(true, FIELD_TYPE.BOOLEAN)).toBe('true');
+    expect(serializeValue(false, FIELD_TYPE.BOOLEAN)).toBe('false');
+  });
+
+  it('serializes number values to string', () => {
+    expect(serializeValue(3, FIELD_TYPE.NUMBER)).toBe('3');
+    expect(serializeValue(0, FIELD_TYPE.NUMBER)).toBe('0');
+  });
+
+  it('serializes enum values as JSON strings', () => {
+    expect(serializeValue('always', FIELD_TYPE.ENUM)).toBe('"always"');
+    expect(serializeValue('never', FIELD_TYPE.ENUM)).toBe('"never"');
+  });
+
+  it('serializes string values as JSON strings', () => {
+    expect(serializeValue('My Course', FIELD_TYPE.STRING)).toBe('"My Course"');
+    expect(serializeValue('', FIELD_TYPE.STRING)).toBe('""');
+  });
+
+  it('returns JSON type values as-is (already a string)', () => {
+    const raw = '["module_a","module_b"]';
+    expect(serializeValue(raw, FIELD_TYPE.JSON)).toBe(raw);
+  });
+});
+
+describe('ENUM_OPTIONS', () => {
+  it('contains options for all 8 enum fields', () => {
+    const expectedFields = [
+      'showanswer',
+      'rerandomize',
+      'catalogVisibility',
+      'courseVisibility',
+      'showCorrectness',
+      'videoSharingOptions',
+      'courseEditMethod',
+      'certificatesDisplayBehavior',
+    ];
+    expectedFields.forEach((field) => {
+      expect(ENUM_OPTIONS[field]).toBeDefined();
+      expect(ENUM_OPTIONS[field].length).toBeGreaterThan(0);
+    });
+  });
+
+  it('every option has a value and a label', () => {
+    Object.entries(ENUM_OPTIONS).forEach(([, options]) => {
+      options.forEach(({ value, label }) => {
+        expect(typeof value).toBe('string');
+        expect(typeof label).toBe('string');
+      });
+    });
+  });
+});
diff --git a/src/advanced-settings/data/fieldTypes.ts b/src/advanced-settings/data/fieldTypes.ts
new file mode 100644
index 0000000000..9cf365fa83
--- /dev/null
+++ b/src/advanced-settings/data/fieldTypes.ts
@@ -0,0 +1,67 @@
+/**
+ * Derives all field-type-related exports from SETTINGS_CONFIG.
+ * This file exists for backward compatibility — consumers can import
+ * directly from settingsConfig.ts in the future.
+ */
+import { FIELD_TYPE, SETTINGS_CONFIG } from './settingsConfig';
+import type { FieldType } from './settingsConfig';
+
+export type { FieldType, EnumOption } from './settingsConfig';
+export { FIELD_TYPE };
+
+/**
+ * NOTE: The `label` field in each option is an English-only fallback used when
+ * a value has no entry in ENUM_LABEL_MESSAGES (fieldTypeMessages.ts).
+ * All current values are covered there. When adding new options, always add
+ * a corresponding i18n message — never rely on `label` for user-visible text.
+ */
+export const ENUM_OPTIONS: Record<string, Array<{ value: string; label: string; }>> = Object.fromEntries(
+  SETTINGS_CONFIG.flatMap((cat) =>
+    cat.fields
+      .filter((f) => f.enumOptions)
+      .map((f) => [f.key, f.enumOptions!])
+  ),
+);
+
+const BOOLEAN_KEYS = new Set<string>(
+  SETTINGS_CONFIG.flatMap((cat) =>
+    cat.fields
+      .filter((f) => f.type === FIELD_TYPE.BOOLEAN)
+      .map((f) => f.key)
+  ),
+);
+
+const NUMBER_KEYS = new Set<string>(
+  SETTINGS_CONFIG.flatMap((cat) =>
+    cat.fields
+      .filter((f) => f.type === FIELD_TYPE.NUMBER)
+      .map((f) => f.key)
+  ),
+);
+
+/**
+ * Returns the field type for a given setting key and its current value.
+ * Key-based overrides are checked first to handle null/empty API values correctly.
+ */
+export function getFieldType(key: string, value: unknown): FieldType {
+  if (BOOLEAN_KEYS.has(key)) { return FIELD_TYPE.BOOLEAN; }
+  if (NUMBER_KEYS.has(key)) { return FIELD_TYPE.NUMBER; }
+  if (ENUM_OPTIONS[key]) { return FIELD_TYPE.ENUM; }
+  if (typeof value === 'boolean') { return FIELD_TYPE.BOOLEAN; }
+  if (typeof value === 'number') { return FIELD_TYPE.NUMBER; }
+  if (Array.isArray(value) || (typeof value === 'object' && value !== null)) { return FIELD_TYPE.JSON; }
+  return FIELD_TYPE.STRING;
+}
+
+/**
+ * Serializes a native value back to a JSON-compatible string
+ * that can be stored in editedSettings and processed by parseArrayOrObjectValues.
+ */
+export function serializeValue(nativeValue: unknown, fieldType: FieldType): string {
+  if (fieldType === FIELD_TYPE.BOOLEAN) { return String(nativeValue); }
+  if (fieldType === FIELD_TYPE.NUMBER) { return String(nativeValue); }
+  if (fieldType === FIELD_TYPE.ENUM || fieldType === FIELD_TYPE.STRING) {
+    return JSON.stringify(nativeValue);
+  }
+  return nativeValue as string; // JSON type — already a string
+}
diff --git a/src/advanced-settings/data/settingsCategories.test.ts b/src/advanced-settings/data/settingsCategories.test.ts
new file mode 100644
index 0000000000..f89b658857
--- /dev/null
+++ b/src/advanced-settings/data/settingsCategories.test.ts
@@ -0,0 +1,96 @@
+import {
+  SETTINGS_CATEGORY_MAP,
+  CATEGORY_ORDER,
+  UNCATEGORIZED,
+  CATEGORY_GENERAL_SETTING,
+  CATEGORY_CONTENT_BLOCKS,
+  CATEGORY_GRADING,
+  CATEGORY_SCHEDULE,
+  CATEGORY_CERTIFICATES,
+  CATEGORY_ENROLLMENT_PAGE,
+  CATEGORY_PAGES_AND_RESOURCES,
+  CATEGORY_SPECIAL_EXAMS,
+  CATEGORY_MOBILE,
+  CATEGORY_INSTRUCTORS,
+  CATEGORY_LEGACY_DISCUSSION,
+  CATEGORY_LIBRARIES,
+  CATEGORY_OTHER,
+  CONTENT_BLOCKS_SUBCATEGORY_MAP,
+  CONTENT_BLOCKS_SUBCATEGORY_ORDER,
+} from './settingsCategories';
+
+describe('SETTINGS_CATEGORY_MAP', () => {
+  it('maps known settings to the correct categories', () => {
+    expect(SETTINGS_CATEGORY_MAP.displayName).toBe(CATEGORY_GENERAL_SETTING);
+    expect(SETTINGS_CATEGORY_MAP.advancedModules).toBe(CATEGORY_CONTENT_BLOCKS);
+    expect(SETTINGS_CATEGORY_MAP.noGrade).toBe(CATEGORY_GRADING);
+    expect(SETTINGS_CATEGORY_MAP.selfPaced).toBe(CATEGORY_SCHEDULE);
+    expect(SETTINGS_CATEGORY_MAP.certNameLong).toBe(CATEGORY_CERTIFICATES);
+    expect(SETTINGS_CATEGORY_MAP.catalogVisibility).toBe(CATEGORY_ENROLLMENT_PAGE);
+    expect(SETTINGS_CATEGORY_MAP.allowPublicWikiAccess).toBe(CATEGORY_PAGES_AND_RESOURCES);
+    expect(SETTINGS_CATEGORY_MAP.enableProctoredExams).toBe(CATEGORY_SPECIAL_EXAMS);
+    expect(SETTINGS_CATEGORY_MAP.mobileAvailable).toBe(CATEGORY_MOBILE);
+    expect(SETTINGS_CATEGORY_MAP.instructorInfo).toBe(CATEGORY_INSTRUCTORS);
+    expect(SETTINGS_CATEGORY_MAP.discussionTopics).toBe(CATEGORY_LEGACY_DISCUSSION);
+    expect(SETTINGS_CATEGORY_MAP.upstream).toBe(CATEGORY_LIBRARIES);
+    expect(SETTINGS_CATEGORY_MAP.courseWideCss).toBe(CATEGORY_OTHER);
+  });
+
+  it('contains only valid category values', () => {
+    const validCategories = new Set(CATEGORY_ORDER);
+    Object.values(SETTINGS_CATEGORY_MAP).forEach((cat) => {
+      expect(validCategories.has(cat)).toBe(true);
+    });
+  });
+});
+
+describe('CATEGORY_ORDER', () => {
+  it('lists all 13 expected categories', () => {
+    expect(CATEGORY_ORDER).toEqual([
+      CATEGORY_GENERAL_SETTING,
+      CATEGORY_CONTENT_BLOCKS,
+      CATEGORY_GRADING,
+      CATEGORY_SCHEDULE,
+      CATEGORY_CERTIFICATES,
+      CATEGORY_ENROLLMENT_PAGE,
+      CATEGORY_PAGES_AND_RESOURCES,
+      CATEGORY_SPECIAL_EXAMS,
+      CATEGORY_MOBILE,
+      CATEGORY_INSTRUCTORS,
+      CATEGORY_LEGACY_DISCUSSION,
+      CATEGORY_LIBRARIES,
+      CATEGORY_OTHER,
+    ]);
+  });
+
+  it('has no duplicate categories', () => {
+    expect(new Set(CATEGORY_ORDER).size).toBe(CATEGORY_ORDER.length);
+  });
+});
+
+describe('UNCATEGORIZED', () => {
+  it('equals CATEGORY_OTHER', () => {
+    expect(UNCATEGORIZED).toBe(CATEGORY_OTHER);
+  });
+});
+
+describe('CONTENT_BLOCKS_SUBCATEGORY_MAP', () => {
+  it('maps settings to valid subcategories', () => {
+    const validSubcategories = new Set(CONTENT_BLOCKS_SUBCATEGORY_ORDER);
+    Object.values(CONTENT_BLOCKS_SUBCATEGORY_MAP).forEach((subcat) => {
+      expect(validSubcategories.has(subcat)).toBe(true);
+    });
+  });
+
+  it('maps known keys to expected subcategories', () => {
+    expect(CONTENT_BLOCKS_SUBCATEGORY_MAP.advancedModules).toBe('Settings');
+    expect(CONTENT_BLOCKS_SUBCATEGORY_MAP.maxAttempts).toBe('Problems');
+    expect(CONTENT_BLOCKS_SUBCATEGORY_MAP.videoSpeedOptimizations).toBe('Video');
+  });
+});
+
+describe('CONTENT_BLOCKS_SUBCATEGORY_ORDER', () => {
+  it('lists Settings, Problems, Video in that order', () => {
+    expect(CONTENT_BLOCKS_SUBCATEGORY_ORDER).toEqual(['Settings', 'Problems', 'Video']);
+  });
+});
diff --git a/src/advanced-settings/data/settingsCategories.ts b/src/advanced-settings/data/settingsCategories.ts
new file mode 100644
index 0000000000..8f7fdf0e49
--- /dev/null
+++ b/src/advanced-settings/data/settingsCategories.ts
@@ -0,0 +1,38 @@
+/**
+ * Derives all category-related exports from SETTINGS_CONFIG.
+ * This file exists for backward compatibility — consumers can import
+ * directly from settingsConfig.ts in the future.
+ */
+import { SETTINGS_CONFIG } from './settingsConfig';
+
+export const SETTINGS_CATEGORY_MAP: Record<string, string> = Object.fromEntries(
+  SETTINGS_CONFIG.flatMap((cat) => cat.fields.map((f) => [f.key, cat.id])),
+);
+
+export const CATEGORY_ORDER: string[] = SETTINGS_CONFIG.map((cat) => cat.id);
+
+export const UNCATEGORIZED = 'Other';
+
+export const CATEGORY_GENERAL_SETTING = 'General Setting';
+export const CATEGORY_CONTENT_BLOCKS = 'Content Blocks';
+export const CATEGORY_GRADING = 'Grading';
+export const CATEGORY_SCHEDULE = 'Schedule';
+export const CATEGORY_CERTIFICATES = 'Certificates';
+export const CATEGORY_ENROLLMENT_PAGE = 'Enrollment Page';
+export const CATEGORY_PAGES_AND_RESOURCES = 'Pages & Resources';
+export const CATEGORY_SPECIAL_EXAMS = 'Special Exams';
+export const CATEGORY_MOBILE = 'Mobile';
+export const CATEGORY_INSTRUCTORS = 'Instructors';
+export const CATEGORY_LEGACY_DISCUSSION = 'Legacy Discussion';
+export const CATEGORY_LIBRARIES = 'Libraries';
+export const CATEGORY_OTHER = 'Other';
+
+const contentBlocksCat = SETTINGS_CONFIG.find((cat) => cat.id === CATEGORY_CONTENT_BLOCKS)!;
+
+export const CONTENT_BLOCKS_SUBCATEGORY_MAP: Record<string, string> = Object.fromEntries(
+  contentBlocksCat.fields
+    .filter((f) => f.subcategory)
+    .map((f) => [f.key, f.subcategory!]),
+);
+
+export const CONTENT_BLOCKS_SUBCATEGORY_ORDER: string[] = contentBlocksCat.subcategoryOrder ?? [];
diff --git a/src/advanced-settings/data/settingsConfig.ts b/src/advanced-settings/data/settingsConfig.ts
new file mode 100644
index 0000000000..331a79d307
--- /dev/null
+++ b/src/advanced-settings/data/settingsConfig.ts
@@ -0,0 +1,288 @@
+/**
+ * Single source of truth for all Advanced Settings metadata.
+ *
+ * Each entry in SETTINGS_CONFIG defines a category and its fields.
+ * Every field declares its key (as returned by the API), its input type,
+ * and — for enum fields — the list of valid options.
+ * Fields in the Content Blocks category also declare a subcategory.
+ *
+ * All derived data (SETTINGS_CATEGORY_MAP, ENUM_OPTIONS, BOOLEAN_KEYS, etc.)
+ * is computed from this config in settingsCategories.ts and fieldTypes.ts.
+ */
+
+export const FIELD_TYPE = {
+  BOOLEAN: 'boolean',
+  NUMBER: 'number',
+  ENUM: 'enum',
+  STRING: 'string',
+  JSON: 'json',
+} as const;
+
+export type FieldType = typeof FIELD_TYPE[keyof typeof FIELD_TYPE];
+
+export interface EnumOption {
+  value: string;
+  /** English-only fallback. See JSDoc on ENUM_OPTIONS in fieldTypes.ts for usage warning. */
+  label: string;
+}
+
+export interface FieldConfig {
+  key: string;
+  type: FieldType;
+  enumOptions?: EnumOption[];
+  /** Only used for Content Blocks fields. */
+  subcategory?: string;
+}
+
+export interface CategoryConfig {
+  id: string;
+  fields: FieldConfig[];
+  /** Ordered list of subcategory labels. Only used for Content Blocks. */
+  subcategoryOrder?: string[];
+}
+
+export const SETTINGS_CONFIG: CategoryConfig[] = [
+  {
+    id: 'General Setting',
+    fields: [
+      { key: 'displayName', type: FIELD_TYPE.STRING },
+      { key: 'displayCoursenumber', type: FIELD_TYPE.STRING },
+      { key: 'displayOrganization', type: FIELD_TYPE.STRING },
+      { key: 'maxStudentEnrollmentsAllowed', type: FIELD_TYPE.NUMBER },
+      { key: 'enableSubsectionGating', type: FIELD_TYPE.BOOLEAN },
+      { key: 'language', type: FIELD_TYPE.STRING },
+      { key: 'cohortConfig', type: FIELD_TYPE.JSON },
+      {
+        key: 'courseEditMethod',
+        type: FIELD_TYPE.ENUM,
+        enumOptions: [
+          { value: 'Studio', label: 'Studio' },
+          { value: 'XML', label: 'XML' },
+        ],
+      },
+      { key: 'entranceExamEnabled', type: FIELD_TYPE.BOOLEAN },
+      { key: 'entranceExamId', type: FIELD_TYPE.STRING },
+      { key: 'entranceExamMinimumScorePct', type: FIELD_TYPE.NUMBER },
+      { key: 'highlightsEnabledForMessaging', type: FIELD_TYPE.BOOLEAN },
+      { key: 'preRequisiteCourses', type: FIELD_TYPE.JSON },
+      { key: 'userPartitions', type: FIELD_TYPE.JSON },
+    ],
+  },
+  {
+    id: 'Content Blocks',
+    subcategoryOrder: ['Settings', 'Problems', 'Video'],
+    fields: [
+      // Settings
+      { key: 'advancedModules', type: FIELD_TYPE.JSON, subcategory: 'Settings' },
+      { key: 'ltiPassports', type: FIELD_TYPE.JSON, subcategory: 'Settings' },
+      { key: 'allowUnsupportedXblocks', type: FIELD_TYPE.BOOLEAN, subcategory: 'Settings' },
+      // Problems
+      { key: 'maxAttempts', type: FIELD_TYPE.NUMBER, subcategory: 'Problems' },
+      {
+        key: 'rerandomize',
+        type: FIELD_TYPE.ENUM,
+        subcategory: 'Problems',
+        enumOptions: [
+          { value: 'never', label: 'Never' },
+          { value: 'always', label: 'Always' },
+          { value: 'onreset', label: 'On reset' },
+          { value: 'per_student', label: 'Per student' },
+        ],
+      },
+      {
+        key: 'showanswer',
+        type: FIELD_TYPE.ENUM,
+        subcategory: 'Problems',
+        enumOptions: [
+          { value: 'always', label: 'Always' },
+          { value: 'answered', label: 'Answered' },
+          { value: 'attempted', label: 'Attempted' },
+          { value: 'closed', label: 'Closed' },
+          { value: 'finished', label: 'Finished' },
+          { value: 'correct_or_past_due', label: 'Correct or past due' },
+          { value: 'past_due', label: 'Past due' },
+          { value: 'never', label: 'Never' },
+          { value: 'after_attempts', label: 'After attempts' },
+          { value: 'after_all_attempts', label: 'After all attempts' },
+          { value: 'after_all_attempts_or_correct', label: 'After all attempts or correct' },
+          { value: 'attempted_no_past_due', label: 'Attempted (no past due)' },
+        ],
+      },
+      { key: 'showResetButton', type: FIELD_TYPE.BOOLEAN, subcategory: 'Problems' },
+      { key: 'forceOnFlexiblePeerOpenassessments', type: FIELD_TYPE.BOOLEAN, subcategory: 'Problems' },
+      { key: 'useLatexCompiler', type: FIELD_TYPE.BOOLEAN, subcategory: 'Problems' },
+      { key: 'matlabApiKey', type: FIELD_TYPE.STRING, subcategory: 'Problems' },
+      // Video
+      { key: 'videoSpeedOptimizations', type: FIELD_TYPE.BOOLEAN, subcategory: 'Video' },
+      {
+        key: 'videoSharingOptions',
+        type: FIELD_TYPE.ENUM,
+        subcategory: 'Video',
+        enumOptions: [
+          { value: 'per-video', label: 'Per video' },
+          { value: 'all-on', label: 'All on' },
+          { value: 'all-off', label: 'All off' },
+        ],
+      },
+      { key: 'videoUploadPipeline', type: FIELD_TYPE.JSON, subcategory: 'Video' },
+      { key: 'videoAutoAdvance', type: FIELD_TYPE.BOOLEAN, subcategory: 'Video' },
+      { key: 'videoBumper', type: FIELD_TYPE.JSON, subcategory: 'Video' },
+    ],
+  },
+  {
+    id: 'Grading',
+    fields: [
+      { key: 'noGrade', type: FIELD_TYPE.BOOLEAN },
+      { key: 'dueDateDisplayFormat', type: FIELD_TYPE.STRING },
+      { key: 'remoteGradebook', type: FIELD_TYPE.JSON },
+      { key: 'minimumGradeCredit', type: FIELD_TYPE.NUMBER },
+      {
+        key: 'showCorrectness',
+        type: FIELD_TYPE.ENUM,
+        enumOptions: [
+          { value: 'always', label: 'Always' },
+          { value: 'never', label: 'Never' },
+          { value: 'past_due', label: 'Past due' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'Schedule',
+    fields: [
+      { key: 'due', type: FIELD_TYPE.STRING },
+      { key: 'relativeWeeksDue', type: FIELD_TYPE.NUMBER },
+      { key: 'selfPaced', type: FIELD_TYPE.BOOLEAN },
+    ],
+  },
+  {
+    id: 'Certificates',
+    fields: [
+      { key: 'certNameLong', type: FIELD_TYPE.STRING },
+      { key: 'certNameShort', type: FIELD_TYPE.STRING },
+      { key: 'certHtmlViewOverrides', type: FIELD_TYPE.JSON },
+      { key: 'certHtmlViewEnabled', type: FIELD_TYPE.BOOLEAN },
+      { key: 'certificates', type: FIELD_TYPE.JSON },
+      {
+        key: 'certificatesDisplayBehavior',
+        type: FIELD_TYPE.ENUM,
+        enumOptions: [
+          { value: 'end', label: 'End of course' },
+          { value: 'early_no_info', label: 'Early (no info)' },
+          { value: 'early_with_info', label: 'Early (with info)' },
+        ],
+      },
+      { key: 'certificatesShowBeforeEnd', type: FIELD_TYPE.BOOLEAN },
+    ],
+  },
+  {
+    id: 'Enrollment Page',
+    fields: [
+      { key: 'cosmeticDisplayPrice', type: FIELD_TYPE.STRING },
+      { key: 'courseImage', type: FIELD_TYPE.STRING },
+      { key: 'advertisedStart', type: FIELD_TYPE.STRING },
+      { key: 'announcement', type: FIELD_TYPE.STRING },
+      { key: 'bannerImage', type: FIELD_TYPE.STRING },
+      { key: 'isNew', type: FIELD_TYPE.BOOLEAN },
+      { key: 'learningInfo', type: FIELD_TYPE.JSON },
+      { key: 'videoThumbnailImage', type: FIELD_TYPE.STRING },
+      {
+        key: 'catalogVisibility',
+        type: FIELD_TYPE.ENUM,
+        enumOptions: [
+          { value: 'both', label: 'Both (catalog and about page)' },
+          { value: 'about', label: 'About page only' },
+          { value: 'none', label: 'None' },
+        ],
+      },
+      { key: 'invitationOnly', type: FIELD_TYPE.BOOLEAN },
+      { key: 'courseSurveyName', type: FIELD_TYPE.STRING },
+      { key: 'courseSurveyRequired', type: FIELD_TYPE.BOOLEAN },
+      {
+        key: 'courseVisibility',
+        type: FIELD_TYPE.ENUM,
+        enumOptions: [
+          { value: 'private', label: 'Private' },
+          { value: 'public', label: 'Public' },
+          { value: 'public_outline', label: 'Public outline' },
+        ],
+      },
+      { key: 'endOfCourseSurveyUrl', type: FIELD_TYPE.STRING },
+      { key: 'socialSharingUrl', type: FIELD_TYPE.STRING },
+    ],
+  },
+  {
+    id: 'Pages & Resources',
+    fields: [
+      { key: 'allowPublicWikiAccess', type: FIELD_TYPE.BOOLEAN },
+      { key: 'disableProgressGraph', type: FIELD_TYPE.BOOLEAN },
+      { key: 'htmlTextbooks', type: FIELD_TYPE.JSON },
+      { key: 'showCalculator', type: FIELD_TYPE.BOOLEAN },
+      { key: 'teamsConfiguration', type: FIELD_TYPE.JSON },
+      { key: 'edxnotes', type: FIELD_TYPE.BOOLEAN },
+      { key: 'hideProgressTab', type: FIELD_TYPE.BOOLEAN },
+      { key: 'pdfTextbooks', type: FIELD_TYPE.JSON },
+      { key: 'discussionLink', type: FIELD_TYPE.STRING },
+      { key: 'discussionsSettings', type: FIELD_TYPE.JSON },
+    ],
+  },
+  {
+    id: 'Special Exams',
+    fields: [
+      { key: 'allowProctoringOptOut', type: FIELD_TYPE.BOOLEAN },
+      { key: 'createZendeskTickets', type: FIELD_TYPE.BOOLEAN },
+      { key: 'enableProctoredExams', type: FIELD_TYPE.BOOLEAN },
+      { key: 'enableTimedExams', type: FIELD_TYPE.BOOLEAN },
+      { key: 'proctoringProvider', type: FIELD_TYPE.STRING },
+      { key: 'proctoringEscalationEmail', type: FIELD_TYPE.STRING },
+    ],
+  },
+  {
+    id: 'Mobile',
+    fields: [
+      { key: 'mobileAvailable', type: FIELD_TYPE.BOOLEAN },
+    ],
+  },
+  {
+    id: 'Instructors',
+    fields: [
+      { key: 'instructorInfo', type: FIELD_TYPE.JSON },
+    ],
+  },
+  {
+    id: 'Legacy Discussion',
+    fields: [
+      { key: 'discussionBlackouts', type: FIELD_TYPE.JSON },
+      { key: 'allowAnonymous', type: FIELD_TYPE.BOOLEAN },
+      { key: 'allowAnonymousToPeers', type: FIELD_TYPE.BOOLEAN },
+      { key: 'discussionTopics', type: FIELD_TYPE.JSON },
+    ],
+  },
+  {
+    id: 'Libraries',
+    fields: [
+      { key: 'upstream', type: FIELD_TYPE.STRING },
+      { key: 'upstreamDisplayName', type: FIELD_TYPE.STRING },
+      { key: 'upstreamVersion', type: FIELD_TYPE.NUMBER },
+      { key: 'upstreamVersionDeclined', type: FIELD_TYPE.NUMBER },
+      { key: 'downstreamCustomized', type: FIELD_TYPE.BOOLEAN },
+      { key: 'topLevelDownstreamParentKey', type: FIELD_TYPE.STRING },
+    ],
+  },
+  {
+    id: 'Other',
+    fields: [
+      { key: 'courseWideCss', type: FIELD_TYPE.JSON },
+      { key: 'courseWideJs', type: FIELD_TYPE.JSON },
+      { key: 'daysEarlyForBeta', type: FIELD_TYPE.NUMBER },
+      { key: 'enrollmentDomain', type: FIELD_TYPE.STRING },
+      { key: 'staticAssetPath', type: FIELD_TYPE.STRING },
+      { key: 'giturl', type: FIELD_TYPE.STRING },
+      { key: 'enableCcx', type: FIELD_TYPE.BOOLEAN },
+      { key: 'ccxConnector', type: FIELD_TYPE.JSON },
+      { key: 'cssClass', type: FIELD_TYPE.STRING },
+      { key: 'otherCourseSettings', type: FIELD_TYPE.JSON },
+      { key: 'xqaKey', type: FIELD_TYPE.STRING },
+    ],
+  },
+];
diff --git a/src/advanced-settings/data/types.ts b/src/advanced-settings/data/types.ts
new file mode 100644
index 0000000000..121ba241e1
--- /dev/null
+++ b/src/advanced-settings/data/types.ts
@@ -0,0 +1,18 @@
+/**
+ * Shared types for the Advanced Settings subsystem.
+ */
+
+export interface SettingData {
+  deprecated?: boolean;
+  help?: string;
+  displayName: string;
+  value?: string | boolean | number | Record<string, unknown> | unknown[];
+}
+
+/** A [settingKey, settingData] tuple as returned by Object.entries on the settings map. */
+export type SettingEntry = [string, SettingData];
+
+/** Callback signatures shared across input components and section components. */
+export type SetEditedSettings = (
+  updater: (prev: Record<string, string>) => Record<string, string>,
+) => void;
diff --git a/src/advanced-settings/messages.ts b/src/advanced-settings/messages.ts
index 0652c1e8e3..72919a4c56 100644
--- a/src/advanced-settings/messages.ts
+++ b/src/advanced-settings/messages.ts
@@ -81,6 +81,10 @@ const messages = defineMessages({
     id: 'course-authoring.advanced-settings.alert.proctoring.error.aria.describedby',
     defaultMessage: 'alert-danger-description',
   },
+  noSearchResults: {
+    id: 'course-authoring.advanced-settings.no-search-results',
+    defaultMessage: 'No settings found for "{query}". Try a different search term.',
+  },
 });
 
 export default messages;
diff --git a/src/advanced-settings/scss/AdvancedSettings.scss b/src/advanced-settings/scss/AdvancedSettings.scss
index e973e11cee..d99a9b50c9 100644
--- a/src/advanced-settings/scss/AdvancedSettings.scss
+++ b/src/advanced-settings/scss/AdvancedSettings.scss
@@ -5,6 +5,7 @@
     margin-top: 8.75rem;
   }
 
+
   .setting-items-policies {
     .setting-items-deprecated-setting {
       float: right;
@@ -18,15 +19,27 @@
     }
   }
 
-  .setting-card {
-    margin-bottom: 1.75rem;
+}
 
-    .pgn__card-header .pgn__card-header-title-md {
-      font-size: 1.125rem;
-    }
+.settings-section-trigger {
+  cursor: pointer;
+  border-bottom: 1px solid var(--pgn-color-gray-200);
+
+  &:hover {
+    background-color: var(--pgn-color-gray-100);
+  }
+
+  // When collapsed, no border below the trigger
+  &[aria-expanded="false"] {
+    border-bottom-color: transparent;
   }
 }
 
+
+.settings-section-icon {
+  color: var(--pgn-color-gray-500);
+}
+
 .alert-toast {
   position: fixed;
   bottom: 0;
@@ -40,29 +53,28 @@
 }
 
 .setting-items-list {
-  li {
-    list-style: none;
-  }
+  list-style: none;
+}
 
-  .form-control {
-    min-height: 2.75rem;
-    flex-grow: 1;
+.subcategory-header {
+  .subcategory-header-title {
+    color: var(--pgn-color-headings-base);
   }
 
-  .pgn__card-header {
-    padding: 0 0 0 1.5rem;
+  .subcategory-header-divider {
+    border-color: var(--pgn-color-gray-200);
   }
+}
 
-  .pgn__card-status {
-    padding: .625rem;
-  }
+.display-overrides-nested-fields {
+  border-left: 3px solid var(--pgn-color-primary-300);
+}
 
-  .pgn__card-header-content {
-    margin-top: 1.438rem;
-    margin-bottom: 1.438rem;
-  }
+.display-overrides-blocked-message {
+  color: var(--pgn-color-danger-500);
 }
 
+
 .setting-sidebar-supplementary {
   .setting-sidebar-supplementary-about {
     .setting-sidebar-supplementary-about-title {
diff --git a/src/advanced-settings/setting-card/SettingCard.test.jsx b/src/advanced-settings/setting-card/SettingCard.test.jsx
index cb2fd25aba..8b9c4aef99 100644
--- a/src/advanced-settings/setting-card/SettingCard.test.jsx
+++ b/src/advanced-settings/setting-card/SettingCard.test.jsx
@@ -5,6 +5,10 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import SettingCard from './SettingCard';
 import messages from './messages';
 
+// Avoid pulling in CodeMirror for JSON-type cards; SettingCard behaviour is
+// what we're testing here, not JsonInput internals.
+jest.mock('./inputs/JsonInput', () => jest.fn(() => <div data-testid="json-input" />));
+
 const setEdited = jest.fn();
 const showSaveSettingsPrompt = jest.fn();
 const setIsEditableState = jest.fn();
@@ -17,14 +21,6 @@ const settingData = {
   value: 'Setting Value',
 };
 
-jest.mock('react-textarea-autosize', () =>
-  jest.fn((props) => (
-    <textarea
-      {...props}
-      onFocus={() => {}}
-    />
-  )));
-
 const RootWrapper = () => (
   <IntlProvider locale="en">
     <SettingCard
@@ -44,12 +40,12 @@ const RootWrapper = () => (
 describe('<SettingCard />', () => {
   afterEach(() => jest.clearAllMocks());
   it('renders the setting card with the provided data', () => {
-    const { getByText, getByLabelText } = render(<RootWrapper />);
+    const { getByText, getByRole } = render(<RootWrapper />);
     const cardTitle = getByText(/Setting Name/i);
-    const input = getByLabelText(/Setting Name/i);
+    const input = getByRole('textbox');
     expect(cardTitle).toBeInTheDocument();
     expect(input).toBeInTheDocument();
-    expect(input.value).toBe(JSON.stringify(settingData.value, null, 4));
+    expect(input.value).toBe(settingData.value);
   });
   it('displays the deprecated status when the setting is deprecated', () => {
     const deprecatedSettingData = { ...settingData, deprecated: true };
@@ -63,7 +59,7 @@ describe('<SettingCard />', () => {
           showSaveSettingsPrompt={showSaveSettingsPrompt}
           settingData={deprecatedSettingData}
           handleBlur={handleBlur}
-          isEditable={false}
+          isEditableState={false}
           saveSettingsPrompt
         />
       </IntlProvider>,
@@ -75,10 +71,149 @@ describe('<SettingCard />', () => {
     const { queryByText } = render(<RootWrapper />);
     expect(queryByText(messages.deprecated.defaultMessage)).toBeNull();
   });
+  // --- Input type rendering ---
+
+  it('renders a toggle switch for boolean settings', () => {
+    const { getByRole } = render(
+      <IntlProvider locale="en">
+        <SettingCard
+          name="selfPaced"
+          settingData={{ deprecated: false, help: 'help', displayName: 'Self Paced', value: true }}
+          handleBlur={handleBlur}
+          setEdited={setEdited}
+          showSaveSettingsPrompt={showSaveSettingsPrompt}
+          setIsEditableState={setIsEditableState}
+          isEditableState={false}
+          saveSettingsPrompt={false}
+        />
+      </IntlProvider>,
+    );
+    expect(getByRole('switch')).toBeChecked();
+  });
+
+  it('renders a number input for numeric settings', () => {
+    const { getByRole } = render(
+      <IntlProvider locale="en">
+        <SettingCard
+          name="maxAttempts"
+          settingData={{ deprecated: false, help: 'help', displayName: 'Max Attempts', value: 5 }}
+          handleBlur={handleBlur}
+          setEdited={setEdited}
+          showSaveSettingsPrompt={showSaveSettingsPrompt}
+          setIsEditableState={setIsEditableState}
+          isEditableState={false}
+          saveSettingsPrompt={false}
+        />
+      </IntlProvider>,
+    );
+    expect(getByRole('textbox')).toHaveValue('5');
+  });
+
+  it('renders a select for enum settings', () => {
+    const { getByRole } = render(
+      <IntlProvider locale="en">
+        <SettingCard
+          name="showanswer"
+          settingData={{ deprecated: false, help: 'help', displayName: 'Show Answer', value: 'always' }}
+          handleBlur={handleBlur}
+          setEdited={setEdited}
+          showSaveSettingsPrompt={showSaveSettingsPrompt}
+          setIsEditableState={setIsEditableState}
+          isEditableState={false}
+          saveSettingsPrompt={false}
+        />
+      </IntlProvider>,
+    );
+    expect(getByRole('combobox')).toHaveValue('always');
+  });
+
+  it('renders a JSON editor for array/object settings', () => {
+    const { getByTestId } = render(
+      <IntlProvider locale="en">
+        <SettingCard
+          name="allowedExtensions"
+          settingData={{ deprecated: false, help: 'help', displayName: 'Allowed Extensions', value: ['pdf'] }}
+          handleBlur={handleBlur}
+          setEdited={setEdited}
+          showSaveSettingsPrompt={showSaveSettingsPrompt}
+          setIsEditableState={setIsEditableState}
+          isEditableState={false}
+          saveSettingsPrompt={false}
+        />
+      </IntlProvider>,
+    );
+    expect(getByTestId('json-input')).toBeInTheDocument();
+  });
+
+  // --- handleImmediateChange: boolean and enum commit on change, not blur ---
+
+  it('calls setEdited immediately when a boolean setting is toggled', () => {
+    const { getByRole } = render(
+      <IntlProvider locale="en">
+        <SettingCard
+          name="selfPaced"
+          settingData={{ deprecated: false, help: 'help', displayName: 'Self Paced', value: false }}
+          handleBlur={handleBlur}
+          setEdited={setEdited}
+          showSaveSettingsPrompt={showSaveSettingsPrompt}
+          setIsEditableState={setIsEditableState}
+          isEditableState={false}
+          saveSettingsPrompt={false}
+        />
+      </IntlProvider>,
+    );
+    fireEvent.click(getByRole('switch'));
+    expect(setEdited).toHaveBeenCalled();
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  it('calls setEdited immediately when an enum setting is changed', () => {
+    const { getByRole } = render(
+      <IntlProvider locale="en">
+        <SettingCard
+          name="showanswer"
+          settingData={{ deprecated: false, help: 'help', displayName: 'Show Answer', value: 'always' }}
+          handleBlur={handleBlur}
+          setEdited={setEdited}
+          showSaveSettingsPrompt={showSaveSettingsPrompt}
+          setIsEditableState={setIsEditableState}
+          isEditableState={false}
+          saveSettingsPrompt={false}
+        />
+      </IntlProvider>,
+    );
+    fireEvent.change(getByRole('combobox'), { target: { value: 'never' } });
+    expect(setEdited).toHaveBeenCalled();
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  // --- getDisplayValue catch branch ---
+
+  it('falls back to raw value when JSON.parse throws in getDisplayValue', () => {
+    // value: undefined → initialValue = JSON.stringify(undefined) = undefined
+    // JSON.parse(undefined) throws → catch returns raw (line 61)
+    const { getByRole } = render(
+      <IntlProvider locale="en">
+        <SettingCard
+          name="settingName"
+          settingData={{ deprecated: false, help: 'help', displayName: 'Setting Name', value: undefined }}
+          handleBlur={handleBlur}
+          setEdited={setEdited}
+          showSaveSettingsPrompt={showSaveSettingsPrompt}
+          setIsEditableState={setIsEditableState}
+          isEditableState={false}
+          saveSettingsPrompt={false}
+        />
+      </IntlProvider>,
+    );
+    // StringInput renders with '' as fallback (undefined → default prop value)
+    expect(getByRole('textbox')).toHaveValue('');
+  });
+
   it('calls setEdited on blur', async () => {
     const user = userEvent.setup();
-    const { getByLabelText } = render(<RootWrapper />);
-    const inputBox = getByLabelText(/Setting Name/i);
+    const { getByRole } = render(<RootWrapper />);
+    const inputBox = getByRole('textbox');
     fireEvent.focus(inputBox);
     await user.clear(inputBox);
     await user.type(inputBox, '3, 2, 1');
diff --git a/src/advanced-settings/setting-card/SettingCard.tsx b/src/advanced-settings/setting-card/SettingCard.tsx
index e7dedd7df4..529fbdca70 100644
--- a/src/advanced-settings/setting-card/SettingCard.tsx
+++ b/src/advanced-settings/setting-card/SettingCard.tsx
@@ -1,20 +1,31 @@
 import React, { useState } from 'react';
 import {
-  ActionRow,
-  Card,
+  Badge,
   Form,
   Icon,
   IconButton,
   ModalPopup,
   useToggle,
 } from '@openedx/paragon';
-import { InfoOutline, Warning } from '@openedx/paragon/icons';
+import { InfoOutline } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import { capitalize } from 'lodash';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import TextareaAutosize from 'react-textarea-autosize';
 
 import messages from './messages';
+import {
+  FIELD_TYPE,
+  getFieldType,
+  serializeValue,
+} from '../data/fieldTypes';
+import { FIELD_PLACEHOLDER_MESSAGES } from '../data/fieldTypeMessages';
+import {
+  BooleanInput,
+  EnumInput,
+  JsonInput,
+  NumberInput,
+  StringInput,
+} from './inputs';
 
 const SettingCard = ({
   name,
@@ -33,20 +44,38 @@ const SettingCard = ({
   const [target, setTarget] = useState<HTMLButtonElement | null>(null);
   const [newValue, setNewValue] = useState(initialValue);
 
-  const handleSettingChange = (e) => {
-    const { value } = e.target;
-    setNewValue(e.target.value);
-    if (value !== initialValue) {
-      if (!saveSettingsPrompt) {
-        showSaveSettingsPrompt(true);
-      }
-      if (!isEditableState) {
-        setIsEditableState(true);
-      }
+  const fieldType = getFieldType(name, settingData.value);
+  const placeholder = FIELD_PLACEHOLDER_MESSAGES[name]
+    ? intl.formatMessage(FIELD_PLACEHOLDER_MESSAGES[name])
+    : '';
+
+  /**
+   * Returns the native (parsed) value for display in the input.
+   * For JSON type, returns the raw JSON string (CodeMirror handles it as text).
+   */
+  const getDisplayValue = () => {
+    const raw = isEditableState ? newValue : initialValue;
+    if (fieldType === FIELD_TYPE.JSON) { return raw; }
+    try {
+      const parsed = JSON.parse(raw);
+      return parsed ?? '';
+    } catch {
+      return raw;
     }
   };
 
-  const handleCardBlur = () => {
+  /**
+   * Marks the field as edited and shows the save prompt.
+   * Does not commit to the parent — call handleCommit() for that.
+   */
+  const markEdited = (serialized: string) => {
+    setNewValue(serialized);
+    if (!saveSettingsPrompt) { showSaveSettingsPrompt(true); }
+    if (!isEditableState) { setIsEditableState(true); }
+  };
+
+  /** Commits the current newValue to the parent edited state and validates. */
+  const handleCommit = () => {
     setEdited((prevEditedSettings) => ({
       ...prevEditedSettings,
       [name]: newValue,
@@ -54,61 +83,126 @@ const SettingCard = ({
     handleBlur();
   };
 
+  /**
+   * For immediate inputs (Boolean, Enum): serialize, mark, and commit in one step.
+   */
+  const handleImmediateChange = (nativeValue) => {
+    const serialized = serializeValue(nativeValue, fieldType);
+    setNewValue(serialized);
+    if (!saveSettingsPrompt) { showSaveSettingsPrompt(true); }
+    if (!isEditableState) { setIsEditableState(true); }
+    setEdited((prev) => ({ ...prev, [name]: serialized }));
+    handleBlur();
+  };
+
+  /**
+   * For lazy inputs (Number, String, JSON): serialize and mark only.
+   * The parent is updated on blur via handleCommit().
+   */
+  const handleLazyChange = (rawValue) => {
+    const serialized = serializeValue(rawValue, fieldType);
+    markEdited(serialized);
+  };
+
+  const renderInput = () => {
+    const displayValue = getDisplayValue();
+
+    switch (fieldType) {
+      case FIELD_TYPE.BOOLEAN:
+        return (
+          <BooleanInput
+            value={displayValue as boolean}
+            name={name}
+            displayName={displayName}
+            onChange={handleImmediateChange}
+          />
+        );
+      case FIELD_TYPE.NUMBER:
+        return (
+          <NumberInput
+            value={displayValue as number}
+            name={name}
+            displayName={displayName}
+            onChange={handleLazyChange}
+            onBlur={handleCommit}
+            placeholder={placeholder}
+          />
+        );
+      case FIELD_TYPE.ENUM:
+        return (
+          <EnumInput
+            value={displayValue as string}
+            name={name}
+            displayName={displayName}
+            onChange={handleImmediateChange}
+          />
+        );
+      case FIELD_TYPE.STRING:
+        return (
+          <StringInput
+            value={displayValue as string}
+            name={name}
+            displayName={displayName}
+            onChange={handleLazyChange}
+            onBlur={handleCommit}
+            placeholder={placeholder}
+          />
+        );
+      case FIELD_TYPE.JSON:
+        return (
+          <JsonInput
+            initialValue={displayValue as string}
+            onChange={handleLazyChange}
+            onBlur={handleCommit}
+            isEditableState={isEditableState}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
-    <li className="field-group course-advanced-policy-list-item">
-      <Card className="flex-column setting-card">
-        <Card.Body className="d-flex row m-0 align-items-center">
-          <Card.Header
-            className="col-6"
-            title={
-              <ActionRow>
-                {capitalize(displayName)}
-                <IconButton
-                  ref={setTarget}
-                  onClick={open}
-                  src={InfoOutline}
-                  iconAs={Icon}
-                  alt={intl.formatMessage(messages.helpButtonText)}
-                  variant="primary"
-                  className="flex-shrink-0 ml-1 mr-2"
-                />
-                <ModalPopup
-                  hasArrow
-                  placement="right"
-                  positionRef={target}
-                  isOpen={isOpen}
-                  onClose={close}
-                  className="pgn__modal-popup__arrow"
-                >
-                  <div
-                    className="p-2 x-small rounded modal-popup-content"
-                    // eslint-disable-next-line react/no-danger
-                    dangerouslySetInnerHTML={{ __html: help }}
-                  />
-                </ModalPopup>
-                <ActionRow.Spacer />
-              </ActionRow>
-            }
+    <li className="setting-row">
+      <div className="d-flex align-items-center px-4 py-3">
+        <div className="setting-row-label col-6 d-flex align-items-center flex-wrap">
+          <span className="setting-row-name font-weight-bold mr-1">
+            {capitalize(displayName)}
+          </span>
+          {deprecated && (
+            <Badge variant="danger" className="mx-1">
+              {intl.formatMessage(messages.deprecated)}
+            </Badge>
+          )}
+          <IconButton
+            ref={setTarget}
+            onClick={open}
+            src={InfoOutline}
+            iconAs={Icon}
+            alt={intl.formatMessage(messages.helpButtonText)}
+            size="sm"
           />
-          <Card.Section className="col-6 flex-grow-1">
-            <Form.Group className="m-0">
-              <Form.Control
-                as={TextareaAutosize}
-                value={isEditableState ? newValue : initialValue}
-                name={name}
-                onChange={handleSettingChange}
-                aria-label={displayName}
-                onBlur={handleCardBlur}
-              />
-            </Form.Group>
-          </Card.Section>
-        </Card.Body>
-        {deprecated && (
-          <Card.Status icon={Warning} variant="danger">
-            {intl.formatMessage(messages.deprecated)}
-          </Card.Status>
-        )}
-      </Card>
+          <ModalPopup
+            hasArrow
+            placement="right"
+            positionRef={target}
+            isOpen={isOpen}
+            onClose={close}
+            className="pgn__modal-popup__arrow"
+          >
+            <div
+              className="p-2 x-small rounded modal-popup-content"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: help }}
+            />
+          </ModalPopup>
+        </div>
+        <div className="setting-row-input col-6">
+          <Form.Group className="m-0">
+            {renderInput()}
+          </Form.Group>
+        </div>
+      </div>
     </li>
   );
 };
diff --git a/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
new file mode 100644
index 0000000000..dcb6aac2dd
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
@@ -0,0 +1,49 @@
+import userEvent from '@testing-library/user-event';
+import { render, initializeMocks } from '@src/testUtils';
+import BooleanInput, { BooleanInputProps } from './BooleanInput';
+
+const renderInput = ({
+  name = 'selfPaced',
+  displayName = 'Self Paced',
+  value = false,
+  onChange = jest.fn(),
+}: Partial<BooleanInputProps> = {}) =>
+  render(<BooleanInput name={name} displayName={displayName} value={value} onChange={onChange} />);
+
+describe('<BooleanInput />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    initializeMocks();
+    user = userEvent.setup();
+  });
+
+  it('renders as checked when value is true', () => {
+    const { getByRole } = renderInput({ value: true, onChange: jest.fn() });
+    expect(getByRole('switch')).toBeChecked();
+  });
+
+  it('renders as unchecked when value is false', () => {
+    const { getByRole } = renderInput({ value: false, onChange: jest.fn() });
+    expect(getByRole('switch')).not.toBeChecked();
+  });
+
+  it('calls onChange with true when toggled from false', async () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: false, onChange });
+    await user.click(getByRole('switch'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onChange with false when toggled from true', async () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: true, onChange });
+    await user.click(getByRole('switch'));
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it('uses name as aria-label when displayName is empty', () => {
+    const { getByRole } = renderInput({ value: true, onChange: jest.fn(), displayName: '' });
+    expect(getByRole('switch')).toHaveAttribute('aria-label', 'selfPaced');
+  });
+});
diff --git a/src/advanced-settings/setting-card/inputs/BooleanInput.tsx b/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
new file mode 100644
index 0000000000..c8f06f8238
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
@@ -0,0 +1,25 @@
+import { Form } from '@openedx/paragon';
+
+export interface BooleanInputProps {
+  value: boolean;
+  name: string;
+  displayName: string;
+  onChange: (value: boolean) => void;
+}
+
+const BooleanInput = ({
+  value,
+  name,
+  displayName,
+  onChange,
+}: BooleanInputProps) => (
+  <Form.Switch
+    id={`setting-bool-${name}`}
+    checked={!!value}
+    onChange={(e) => onChange(e.target.checked)}
+    aria-label={displayName || name}
+    className="m-0"
+  />
+);
+
+export default BooleanInput;
diff --git a/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
new file mode 100644
index 0000000000..0df9a98bd7
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
@@ -0,0 +1,79 @@
+import userEvent from '@testing-library/user-event';
+import { render, initializeMocks } from '@src/testUtils';
+import EnumInput, { EnumInputProps } from './EnumInput';
+import { ENUM_OPTIONS } from '../../data/fieldTypes';
+
+const renderInput = ({
+  name = 'showanswer',
+  displayName = 'Show Answer',
+  value = 'always',
+  onChange = jest.fn(),
+}: Partial<EnumInputProps> = {}) =>
+  render(<EnumInput name={name} displayName={displayName} value={value} onChange={onChange} />);
+
+describe('<EnumInput />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    initializeMocks();
+    user = userEvent.setup();
+  });
+
+  it('renders the correct options for the given field name', () => {
+    const { getAllByRole } = renderInput({ value: 'always', onChange: jest.fn() });
+    const options = getAllByRole('option');
+    const expectedValues = ENUM_OPTIONS.showanswer.map((o) => o.value);
+    expect(options.map((o: HTMLOptionElement) => o.value)).toEqual(expectedValues);
+  });
+
+  it('shows the current value as selected', () => {
+    const { getByRole } = renderInput({ value: 'never', onChange: jest.fn() });
+    expect(getByRole('combobox')).toHaveValue('never');
+  });
+
+  it('calls onChange with the selected value when the selection changes', async () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 'always', onChange });
+    await user.selectOptions(getByRole('combobox'), 'never');
+    expect(onChange).toHaveBeenCalledWith('never');
+  });
+
+  it('calls onChange only once per change event', async () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 'always', onChange });
+    await user.selectOptions(getByRole('combobox'), 'past_due');
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onChange when the field is blurred', async () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 'always', onChange });
+    await user.click(getByRole('combobox'));
+    await user.tab();
+    expect(onChange).toHaveBeenCalledWith('always');
+  });
+
+  it('uses name as aria-label when displayName is empty', () => {
+    const { getByRole } = renderInput({ value: 'always', onChange: jest.fn(), displayName: '' });
+    expect(getByRole('combobox')).toHaveAttribute('aria-label', 'showanswer');
+  });
+
+  it('renders an empty select when the field name has no ENUM_OPTIONS entry', () => {
+    const { getByRole } = renderInput({ name: 'unknownField', value: '', onChange: jest.fn() });
+    expect(getByRole('combobox')).toBeInTheDocument();
+    expect(getByRole('combobox').children).toHaveLength(0);
+  });
+
+  it('renders without crashing when no value prop is provided', () => {
+    // Covers the default value='' parameter branch (L13).
+    const { getByRole } = renderInput({ onChange: jest.fn() });
+    expect(getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('renders without crashing when value is null', () => {
+    // Covers the `value ?? ""` null branch (L24).
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { getByRole } = renderInput({ value: null as any, onChange: jest.fn() });
+    expect(getByRole('combobox')).toBeInTheDocument();
+  });
+});
diff --git a/src/advanced-settings/setting-card/inputs/EnumInput.tsx b/src/advanced-settings/setting-card/inputs/EnumInput.tsx
new file mode 100644
index 0000000000..c8d161351e
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.tsx
@@ -0,0 +1,44 @@
+import { Form } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ENUM_OPTIONS } from '../../data/fieldTypes';
+import { ENUM_LABEL_MESSAGES } from '../../data/fieldTypeMessages';
+
+export interface EnumInputProps {
+  value?: string;
+  name: string;
+  displayName: string;
+  onChange: (value: string) => void;
+}
+
+const EnumInput = ({
+  value = '',
+  name,
+  displayName,
+  onChange,
+}: EnumInputProps) => {
+  const intl = useIntl();
+  const options = ENUM_OPTIONS[name] || [];
+
+  return (
+    <Form.Control
+      as="select"
+      value={value ?? ''}
+      name={name}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={(e) => onChange(e.target.value)}
+      aria-label={displayName || name}
+    >
+      {options.map(({ value: optValue, label }) => {
+        const msgDescriptor = ENUM_LABEL_MESSAGES[name]?.[optValue];
+        const localizedLabel = msgDescriptor ? intl.formatMessage(msgDescriptor) : label;
+        return (
+          <option key={optValue} value={optValue}>
+            {localizedLabel}
+          </option>
+        );
+      })}
+    </Form.Control>
+  );
+};
+
+export default EnumInput;
diff --git a/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
new file mode 100644
index 0000000000..6c39af0453
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
@@ -0,0 +1,153 @@
+import { render, initializeMocks } from '@src/testUtils';
+import JsonInput from './JsonInput';
+
+/**
+ * Captures the blur handler registered by CodeMirror during mount.
+ *
+ * JsonInput initializes CodeMirror once (useEffect with [] deps). The blur
+ * handler is registered at that point and never replaced. The bug that was
+ * fixed is: without refs, the blur handler captures `onBlur` from the FIRST
+ * render and never updates it. After the user types (triggering re-renders
+ * with a new `handleCommit` that closes over the latest `newValue`), the
+ * stale handler would still commit the ORIGINAL value, discarding all edits.
+ *
+ * With the fix (onBlurRef), the registered handler always calls
+ * `onBlurRef.current`, which is kept up-to-date on every render.
+ */
+let registeredBlurHandler: (() => void) | null = null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let capturedUpdateListener: ((update: any) => void) | null = null;
+
+jest.mock('codemirror', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const EditorViewMock: any = jest.fn().mockImplementation(() => ({
+    destroy: jest.fn(),
+    dispatch: jest.fn(),
+    state: { doc: { length: 0, toString: () => '' } },
+  }));
+  EditorViewMock.theme = jest.fn(() => ({}));
+  EditorViewMock.updateListener = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    of: jest.fn((cb: (update: any) => void) => {
+      capturedUpdateListener = cb;
+      return {};
+    }),
+  };
+  EditorViewMock.domEventHandlers = jest.fn((handlers: { blur: () => void; }) => {
+    registeredBlurHandler = handlers.blur;
+    return {};
+  });
+  return { minimalSetup: [], EditorView: EditorViewMock };
+});
+
+jest.mock('@codemirror/state', () => ({
+  EditorState: {
+    create: jest.fn(({ doc, extensions }: { doc: string; extensions: unknown[]; }) => ({ doc, extensions })),
+  },
+  Annotation: {
+    define: jest.fn(() => ({ of: jest.fn((val: boolean) => ({ type: 'programmatic', val })) })),
+  },
+}));
+
+jest.mock('@codemirror/lang-json', () => ({ json: jest.fn(() => ({})) }));
+
+describe('<JsonInput />', () => {
+  beforeEach(() => {
+    initializeMocks();
+    registeredBlurHandler = null;
+    capturedUpdateListener = null;
+  });
+
+  it('calls the latest onBlur after re-renders, not the stale initial one', () => {
+    /**
+     * Regression test for the stale closure bug.
+     *
+     * Scenario that was broken:
+     *   1. JsonInput mounts → CodeMirror registers `blur: () => onBlur()`
+     *      with `onBlur` captured from the FIRST render (= initial handleCommit,
+     *      which closes over newValue = initialValue).
+     *   2. User types → parent re-renders with a new `onBlur` (new handleCommit
+     *      that closes over the updated newValue).
+     *   3. User blurs → the stale handler fires the FIRST onBlur → commits
+     *      initialValue → changes are lost on save.
+     *
+     * After the fix (using onBlurRef):
+     *   The registered handler calls `onBlurRef.current()`, which is updated
+     *   on every render via useEffect. Blur always calls the latest onBlur.
+     */
+    const onBlurInitial = jest.fn(); // onBlur from the first render (stale)
+    const onBlurUpdated = jest.fn(); // onBlur from a subsequent render (latest)
+    const onChange = jest.fn();
+
+    // First render — CodeMirror mounts and registers the blur handler
+    const { rerender } = render(
+      <JsonInput
+        initialValue='["module_a"]'
+        onChange={onChange}
+        onBlur={onBlurInitial}
+        isEditableState={false}
+      />,
+    );
+
+    // Simulate parent re-render after the user has typed (new handleCommit
+    // that closes over the updated newValue is passed as onBlur)
+    rerender(
+      <JsonInput
+        initialValue='["module_a"]'
+        onChange={onChange}
+        onBlur={onBlurUpdated}
+        isEditableState={false}
+      />,
+    );
+
+    // Trigger the blur handler that was registered by CodeMirror on mount —
+    // this is the exact handler that fires when the user clicks away from the editor
+    expect(registeredBlurHandler).not.toBeNull();
+    registeredBlurHandler!();
+
+    // The LATEST onBlur must be called so the current newValue gets committed
+    expect(onBlurUpdated).toHaveBeenCalledTimes(1);
+    // The stale initial onBlur must NOT be called (that would commit initialValue)
+    expect(onBlurInitial).not.toHaveBeenCalled();
+  });
+
+  it('calls onChange when a user-driven document change occurs', () => {
+    const onChange = jest.fn();
+    render(
+      <JsonInput
+        initialValue="[]"
+        onChange={onChange}
+        onBlur={jest.fn()}
+        isEditableState={false}
+      />,
+    );
+    expect(capturedUpdateListener).not.toBeNull();
+    // Simulate a user-driven change: docChanged=true, no programmatic annotation
+    capturedUpdateListener!({
+      docChanged: true,
+      transactions: [{ annotation: jest.fn().mockReturnValue(undefined) }],
+      state: { doc: { toString: () => '["new"]' } },
+    });
+    expect(onChange).toHaveBeenCalledWith('["new"]');
+  });
+
+  it('does not call onChange for programmatic dispatches', () => {
+    const onChange = jest.fn();
+    render(
+      <JsonInput
+        initialValue="[]"
+        onChange={onChange}
+        onBlur={jest.fn()}
+        isEditableState={false}
+      />,
+    );
+    expect(capturedUpdateListener).not.toBeNull();
+    // Simulate a programmatic dispatch (e.g. reset after cancel)
+    capturedUpdateListener!({
+      docChanged: true,
+      transactions: [{ annotation: jest.fn().mockReturnValue(true) }],
+      state: { doc: { toString: () => '["reset"]' } },
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/advanced-settings/setting-card/inputs/JsonInput.tsx b/src/advanced-settings/setting-card/inputs/JsonInput.tsx
new file mode 100644
index 0000000000..a0fa6b23f1
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/JsonInput.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useRef } from 'react';
+import { minimalSetup, EditorView } from 'codemirror';
+import { EditorState, Annotation } from '@codemirror/state';
+import { json } from '@codemirror/lang-json';
+
+// Marks a dispatch as programmatic so the updateListener ignores it
+const programmaticUpdate = Annotation.define<boolean>();
+
+const jsonEditorTheme = EditorView.theme({
+  '&': { fontSize: '0.875rem', borderRadius: '0.375rem', border: '1px solid #ced4da' },
+  '.cm-editor': { borderRadius: '0.375rem' },
+  '.cm-focused': { outline: 'none' },
+  '.cm-scroller': { fontFamily: 'monospace', minHeight: '5rem' },
+});
+
+interface JsonInputProps {
+  initialValue: string;
+  onChange: (value: string) => void;
+  onBlur: () => void;
+  isEditableState: boolean;
+}
+
+const JsonInput = ({
+  initialValue,
+  onChange,
+  onBlur,
+  isEditableState,
+}: JsonInputProps) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  const onBlurRef = useRef(onBlur);
+
+  // Keep refs pointing to the latest callbacks so the CodeMirror
+  // event handlers (created once on mount) always call the current versions.
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    onBlurRef.current = onBlur;
+  }, [onBlur]);
+
+  useEffect(() => {
+    if (!divRef.current) { return undefined; }
+
+    const state = EditorState.create({
+      doc: initialValue,
+      extensions: [
+        minimalSetup,
+        json(),
+        jsonEditorTheme,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged && !update.transactions.some((tr) => tr.annotation(programmaticUpdate))) {
+            onChangeRef.current(update.state.doc.toString());
+          }
+        }),
+        EditorView.domEventHandlers({
+          blur: () => onBlurRef.current(),
+        }),
+      ],
+    });
+
+    viewRef.current = new EditorView({ state, parent: divRef.current });
+
+    return () => {
+      viewRef.current?.destroy();
+      viewRef.current = null;
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Reset editor content when edits are cancelled or saved
+  useEffect(() => {
+    if (!isEditableState && viewRef.current) {
+      const current = viewRef.current.state.doc.toString();
+      if (current !== initialValue) {
+        viewRef.current.dispatch({
+          changes: { from: 0, to: viewRef.current.state.doc.length, insert: initialValue },
+          annotations: programmaticUpdate.of(true),
+        });
+      }
+    }
+  }, [isEditableState, initialValue]);
+
+  return <div ref={divRef} className="setting-json-editor" />;
+};
+
+export default JsonInput;
diff --git a/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
new file mode 100644
index 0000000000..709985c871
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
@@ -0,0 +1,91 @@
+import userEvent from '@testing-library/user-event';
+import { render, fireEvent, initializeMocks } from '@src/testUtils';
+import NumberInput, { NumberInputProps } from './NumberInput';
+
+const renderInput = ({
+  name = 'maxAttempts',
+  displayName = 'Maximum Attempts',
+  onChange = jest.fn(),
+  onBlur = jest.fn(),
+  value,
+  placeholder,
+}: Partial<NumberInputProps> = {}) =>
+  render(
+    <NumberInput
+      name={name}
+      displayName={displayName}
+      onChange={onChange}
+      onBlur={onBlur}
+      value={value}
+      placeholder={placeholder}
+    />,
+  );
+
+describe('<NumberInput />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    initializeMocks();
+    user = userEvent.setup();
+  });
+
+  it('renders with the correct numeric value', () => {
+    const { getByRole } = renderInput({ value: 3, onChange: jest.fn() });
+    expect(getByRole('textbox')).toHaveValue('3');
+  });
+
+  it('renders empty when value is null', () => {
+    const { getByRole } = renderInput({ value: null, onChange: jest.fn() });
+    expect(getByRole('textbox')).toHaveValue('');
+  });
+
+  it('calls onChange with the new numeric string when a number is typed', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 3, onChange });
+    fireEvent.change(getByRole('textbox'), { target: { value: '35' } });
+    expect(onChange).toHaveBeenCalledWith('35');
+  });
+
+  it('does not call onChange when a non-numeric character is typed', () => {
+    // Regression test: typing a letter was triggering the save prompt
+    // even though the field value was unchanged (the letter was filtered out).
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 3, onChange });
+    fireEvent.change(getByRole('textbox'), { target: { value: '3a' } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('does not call onChange when a letter is typed into an empty field', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: null, onChange });
+    fireEvent.change(getByRole('textbox'), { target: { value: 'abc' } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('calls onChange when the field is cleared', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 3, onChange });
+    fireEvent.change(getByRole('textbox'), { target: { value: '' } });
+    expect(onChange).toHaveBeenCalledWith('');
+  });
+
+  it('calls onBlur when focus leaves the field', async () => {
+    const onBlur = jest.fn();
+    const { getByRole } = renderInput({ value: 3, onChange: jest.fn(), onBlur });
+    await user.click(getByRole('textbox'));
+    await user.tab();
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it('renders with empty value when no value prop is provided', () => {
+    // Covers the default value='' parameter branch (L14).
+    const { getByRole } = renderInput({ onChange: jest.fn() });
+    expect(getByRole('textbox')).toHaveValue('');
+  });
+
+  it('uses name as aria-label when displayName is empty', () => {
+    // Covers the displayName || name fallback branch (L36).
+    const { getByRole } = renderInput({ value: 3, onChange: jest.fn(), displayName: '' });
+    expect(getByRole('textbox')).toHaveAttribute('aria-label', 'maxAttempts');
+  });
+});
diff --git a/src/advanced-settings/setting-card/inputs/NumberInput.tsx b/src/advanced-settings/setting-card/inputs/NumberInput.tsx
new file mode 100644
index 0000000000..73494f57cf
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.tsx
@@ -0,0 +1,42 @@
+import { ChangeEvent } from 'react';
+import { Form } from '@openedx/paragon';
+
+export interface NumberInputProps {
+  value?: number | string | null;
+  name: string;
+  displayName: string;
+  onChange: (value: string) => void;
+  onBlur: () => void;
+  placeholder?: string;
+}
+
+const NumberInput = ({
+  value = '',
+  name,
+  displayName,
+  onChange,
+  onBlur,
+  placeholder = '',
+}: NumberInputProps) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const filtered = e.target.value.replace(/[^0-9.-]/g, '');
+    if (filtered !== String(value ?? '')) {
+      onChange(filtered);
+    }
+  };
+
+  return (
+    <Form.Control
+      type="text"
+      inputMode="numeric"
+      value={value ?? ''}
+      name={name}
+      onChange={handleChange}
+      onBlur={onBlur}
+      aria-label={displayName || name}
+      placeholder={placeholder}
+    />
+  );
+};
+
+export default NumberInput;
diff --git a/src/advanced-settings/setting-card/inputs/StringInput.test.tsx b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
new file mode 100644
index 0000000000..a65e936a41
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
@@ -0,0 +1,78 @@
+import userEvent from '@testing-library/user-event';
+import { render, fireEvent, initializeMocks } from '@src/testUtils';
+import StringInput from './StringInput';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderInput = (props: Record<string, any> = {}) =>
+  render(
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <StringInput name="displayName" displayName="Display Name" onBlur={jest.fn()} {...(props as any)} />,
+  );
+
+describe('<StringInput />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    initializeMocks();
+    user = userEvent.setup();
+  });
+
+  it('renders with the correct value', () => {
+    const { getByRole } = renderInput({ value: 'My Course', onChange: jest.fn() });
+    expect(getByRole('textbox')).toHaveValue('My Course');
+  });
+
+  it('renders empty when value is an empty string', () => {
+    const { getByRole } = renderInput({ value: '', onChange: jest.fn() });
+    expect(getByRole('textbox')).toHaveValue('');
+  });
+
+  it('calls onChange with the new value when text is entered', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: '', onChange });
+    fireEvent.change(getByRole('textbox'), { target: { value: 'New Course Name' } });
+    expect(onChange).toHaveBeenCalledWith('New Course Name');
+  });
+
+  it('calls onChange on every keystroke', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 'My', onChange });
+    fireEvent.change(getByRole('textbox'), { target: { value: 'My ' } });
+    fireEvent.change(getByRole('textbox'), { target: { value: 'My C' } });
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+
+  it('calls onBlur when focus leaves the field', async () => {
+    const onBlur = jest.fn();
+    const { getByRole } = renderInput({ value: 'My Course', onChange: jest.fn(), onBlur });
+    await user.click(getByRole('textbox'));
+    await user.tab();
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it('does not call onBlur when the field is changed (only on focus loss)', () => {
+    const onBlur = jest.fn();
+    const { getByRole } = renderInput({ value: '', onChange: jest.fn(), onBlur });
+    fireEvent.change(getByRole('textbox'), { target: { value: 'typing...' } });
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+
+  it('renders with empty value when no value prop is provided', () => {
+    // Covers the default value='' parameter branch (L13).
+    const { getByRole } = renderInput({ onChange: jest.fn() });
+    expect(getByRole('textbox')).toHaveValue('');
+  });
+
+  it('uses name as aria-label when displayName is empty', () => {
+    // Covers the displayName || name fallback branch (L26).
+    const { getByRole } = renderInput({ value: 'test', onChange: jest.fn(), displayName: '' });
+    expect(getByRole('textbox')).toHaveAttribute('aria-label', 'displayName');
+  });
+
+  it('renders with empty value when value is null', () => {
+    // Covers the `value ?? ""` null branch (L22).
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { getByRole } = renderInput({ value: null as any, onChange: jest.fn() });
+    expect(getByRole('textbox')).toHaveValue('');
+  });
+});
diff --git a/src/advanced-settings/setting-card/inputs/StringInput.tsx b/src/advanced-settings/setting-card/inputs/StringInput.tsx
new file mode 100644
index 0000000000..3670f6b5d7
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/StringInput.tsx
@@ -0,0 +1,31 @@
+import { Form } from '@openedx/paragon';
+
+interface StringInputProps {
+  value?: string;
+  name: string;
+  displayName: string;
+  onChange: (value: string) => void;
+  onBlur: () => void;
+  placeholder?: string;
+}
+
+const StringInput = ({
+  value = '',
+  name,
+  displayName,
+  onChange,
+  onBlur,
+  placeholder = '',
+}: StringInputProps) => (
+  <Form.Control
+    type="text"
+    value={value ?? ''}
+    name={name}
+    onChange={(e) => onChange(e.target.value)}
+    onBlur={onBlur}
+    aria-label={displayName || name}
+    placeholder={placeholder}
+  />
+);
+
+export default StringInput;
diff --git a/src/advanced-settings/setting-card/inputs/index.ts b/src/advanced-settings/setting-card/inputs/index.ts
new file mode 100644
index 0000000000..aeb76964b4
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/index.ts
@@ -0,0 +1,5 @@
+export { default as BooleanInput } from './BooleanInput';
+export { default as EnumInput } from './EnumInput';
+export { default as JsonInput } from './JsonInput';
+export { default as NumberInput } from './NumberInput';
+export { default as StringInput } from './StringInput';
diff --git a/src/advanced-settings/settings-filters/SettingsFilters.test.tsx b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
new file mode 100644
index 0000000000..d06c1983bc
--- /dev/null
+++ b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
@@ -0,0 +1,96 @@
+import userEvent from '@testing-library/user-event';
+import { render, fireEvent, initializeMocks } from '@src/testUtils';
+import SettingsFilters from './SettingsFilters';
+import messages from './messages';
+
+const renderFilters = (props = {}) =>
+  render(
+    <SettingsFilters
+      filterText=""
+      onFilterChange={jest.fn()}
+      showDeprecated={false}
+      onDeprecatedChange={jest.fn()}
+      expandAll
+      onExpandAllChange={jest.fn()}
+      {...props}
+    />,
+  );
+
+describe('<SettingsFilters />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    initializeMocks();
+    user = userEvent.setup();
+  });
+
+  it('renders the search field', () => {
+    const { getByRole } = renderFilters({});
+    expect(getByRole('searchbox')).toBeInTheDocument();
+  });
+
+  it('calls onFilterChange when the search value changes', () => {
+    const onFilterChange = jest.fn();
+    const { getByRole } = renderFilters({ onFilterChange });
+    fireEvent.change(getByRole('searchbox'), { target: { value: 'proctoring' } });
+    expect(onFilterChange).toHaveBeenCalledWith('proctoring');
+  });
+
+  it('shows "Collapse all" when expandAll is true', () => {
+    const { getByText } = renderFilters({ expandAll: true });
+    expect(getByText(messages.collapseAll.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('shows "Expand all" when expandAll is false', () => {
+    const { getByText } = renderFilters({ expandAll: false });
+    expect(getByText(messages.expandAll.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls onExpandAllChange with false when "Collapse all" is clicked', async () => {
+    const onExpandAllChange = jest.fn();
+    const { getByText } = renderFilters({ expandAll: true, onExpandAllChange });
+    await user.click(getByText(messages.collapseAll.defaultMessage));
+    expect(onExpandAllChange).toHaveBeenCalledWith(false);
+  });
+
+  it('calls onExpandAllChange with true when "Expand all" is clicked', async () => {
+    const onExpandAllChange = jest.fn();
+    const { getByText } = renderFilters({ expandAll: false, onExpandAllChange });
+    await user.click(getByText(messages.expandAll.defaultMessage));
+    expect(onExpandAllChange).toHaveBeenCalledWith(true);
+  });
+
+  it('shows "Show deprecated" when showDeprecated is false', () => {
+    const { getByText } = renderFilters({ showDeprecated: false });
+    expect(getByText(messages.showDeprecated.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('shows "Hide deprecated" when showDeprecated is true', () => {
+    const { getByText } = renderFilters({ showDeprecated: true });
+    expect(getByText(messages.hideDeprecated.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls onDeprecatedChange with true when "Show deprecated" is clicked', async () => {
+    const onDeprecatedChange = jest.fn();
+    const { getByText } = renderFilters({ showDeprecated: false, onDeprecatedChange });
+    await user.click(getByText(messages.showDeprecated.defaultMessage));
+    expect(onDeprecatedChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onDeprecatedChange with false when "Hide deprecated" is clicked', async () => {
+    const onDeprecatedChange = jest.fn();
+    const { getByText } = renderFilters({ showDeprecated: true, onDeprecatedChange });
+    await user.click(getByText(messages.hideDeprecated.defaultMessage));
+    expect(onDeprecatedChange).toHaveBeenCalledWith(false);
+  });
+
+  it('calls onFilterChange with empty string when the search is cleared', () => {
+    const onFilterChange = jest.fn();
+    // Trigger the form reset event — this is what Paragon's SearchField fires
+    // when the clear (type="reset") button is clicked.
+    const { container } = renderFilters({ onFilterChange });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    fireEvent.reset(container.querySelector('form')!);
+    expect(onFilterChange).toHaveBeenCalledWith('');
+  });
+});
diff --git a/src/advanced-settings/settings-filters/SettingsFilters.tsx b/src/advanced-settings/settings-filters/SettingsFilters.tsx
new file mode 100644
index 0000000000..67c579617d
--- /dev/null
+++ b/src/advanced-settings/settings-filters/SettingsFilters.tsx
@@ -0,0 +1,60 @@
+import {
+  Button,
+  SearchField,
+  Stack,
+} from '@openedx/paragon';
+import { OpenInFull, CloseFullscreen } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+interface SettingsFiltersProps {
+  filterText: string;
+  onFilterChange: (value: string) => void;
+  showDeprecated: boolean;
+  onDeprecatedChange: (value: boolean) => void;
+  expandAll: boolean;
+  onExpandAllChange: (value: boolean) => void;
+}
+
+const SettingsFilters = ({
+  filterText,
+  onFilterChange,
+  showDeprecated,
+  onDeprecatedChange,
+  expandAll,
+  onExpandAllChange,
+}: SettingsFiltersProps) => {
+  const intl = useIntl();
+
+  return (
+    <Stack direction="horizontal" gap={3} className="flex-wrap align-items-center mb-4">
+      <SearchField
+        onSubmit={onFilterChange}
+        onChange={onFilterChange}
+        onClear={() => onFilterChange('')}
+        value={filterText}
+        placeholder={intl.formatMessage(messages.searchPlaceholder)}
+        screenReaderText={{
+          label: intl.formatMessage(messages.searchLabel),
+          submitButton: intl.formatMessage(messages.searchSubmitButton),
+        }}
+        size="sm"
+      />
+      <Button
+        variant="outline-primary"
+        iconBefore={expandAll ? CloseFullscreen : OpenInFull}
+        onClick={() => onExpandAllChange(!expandAll)}
+      >
+        {expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)}
+      </Button>
+      <Button
+        variant={showDeprecated ? 'outline-brand' : 'outline-primary'}
+        onClick={() => onDeprecatedChange(!showDeprecated)}
+      >
+        {showDeprecated ? intl.formatMessage(messages.hideDeprecated) : intl.formatMessage(messages.showDeprecated)}
+      </Button>
+    </Stack>
+  );
+};
+
+export default SettingsFilters;
diff --git a/src/advanced-settings/settings-filters/messages.ts b/src/advanced-settings/settings-filters/messages.ts
new file mode 100644
index 0000000000..75a361cc18
--- /dev/null
+++ b/src/advanced-settings/settings-filters/messages.ts
@@ -0,0 +1,41 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  searchPlaceholder: {
+    id: 'course-authoring.advanced-settings.settings-filters.search.placeholder',
+    defaultMessage: 'Search settings...',
+    description: 'Placeholder text shown inside the search input on the Advanced Settings filter bar',
+  },
+  searchLabel: {
+    id: 'course-authoring.advanced-settings.settings-filters.search.label',
+    defaultMessage: 'Search advanced settings',
+    description: 'Screen-reader label for the search input on the Advanced Settings filter bar',
+  },
+  searchSubmitButton: {
+    id: 'course-authoring.advanced-settings.settings-filters.search.submit',
+    defaultMessage: 'Search',
+    description: 'Screen-reader label for the search submit button on the Advanced Settings filter bar',
+  },
+  collapseAll: {
+    id: 'course-authoring.advanced-settings.settings-filters.collapse-all',
+    defaultMessage: 'Collapse all',
+    description: 'Label for the button that collapses all setting sections on the Advanced Settings page',
+  },
+  expandAll: {
+    id: 'course-authoring.advanced-settings.settings-filters.expand-all',
+    defaultMessage: 'Expand all',
+    description: 'Label for the button that expands all setting sections on the Advanced Settings page',
+  },
+  hideDeprecated: {
+    id: 'course-authoring.advanced-settings.settings-filters.hide-deprecated',
+    defaultMessage: 'Hide deprecated',
+    description: 'Label for the button that hides deprecated settings on the Advanced Settings page',
+  },
+  showDeprecated: {
+    id: 'course-authoring.advanced-settings.settings-filters.show-deprecated',
+    defaultMessage: 'Show deprecated',
+    description: 'Label for the button that shows deprecated settings on the Advanced Settings page',
+  },
+});
+
+export default messages;
diff --git a/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx b/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
new file mode 100644
index 0000000000..205293052f
--- /dev/null
+++ b/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
@@ -0,0 +1,126 @@
+import userEvent from '@testing-library/user-event';
+import { render, initializeMocks } from '@src/testUtils';
+import CourseDisplayOverrides from './CourseDisplayOverrides';
+import messages from './messages';
+import type { SettingEntry } from '../data/types';
+
+// Mock SettingCard to avoid pulling in CodeMirror and other heavy dependencies.
+jest.mock(
+  '../setting-card/SettingCard',
+  () => jest.fn(({ name }: { name: string; }) => <div data-testid={`setting-card-${name}`}>{name}</div>),
+);
+
+const emptyEntry = (name: string): SettingEntry => [name, {
+  displayName: name,
+  value: '',
+  help: '',
+  deprecated: false,
+}];
+const filledEntry = (name: string): SettingEntry => [name, {
+  displayName: name,
+  value: 'My Course',
+  help: '',
+  deprecated: false,
+}];
+
+const defaultProps = {
+  showSaveSettingsPrompt: jest.fn(),
+  saveSettingsPrompt: false,
+  setEditedSettings: jest.fn(),
+  handleSettingBlur: jest.fn(),
+  isEditableState: false,
+  setIsEditableState: jest.fn(),
+};
+
+const renderOverrides = (displaySettingsEntries: SettingEntry[], props = {}) =>
+  render(
+    <CourseDisplayOverrides
+      {...defaultProps}
+      displaySettingsEntries={displaySettingsEntries}
+      {...props}
+    />,
+  );
+
+describe('<CourseDisplayOverrides />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    initializeMocks();
+    user = userEvent.setup();
+  });
+
+  it('renders the Course Display Overrides label', () => {
+    const { getByText } = renderOverrides([emptyEntry('displayName')]);
+    expect(getByText(messages.courseDisplayOverridesLabel.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('toggle is off when all fields are empty', () => {
+    const { getByRole } = renderOverrides([
+      emptyEntry('displayName'),
+      emptyEntry('displayCoursenumber'),
+      emptyEntry('displayOrganization'),
+    ]);
+    expect(getByRole('switch')).not.toBeChecked();
+  });
+
+  it('toggle is on when at least one field has content', () => {
+    const { getByRole } = renderOverrides([
+      filledEntry('displayName'),
+      emptyEntry('displayCoursenumber'),
+      emptyEntry('displayOrganization'),
+    ]);
+    expect(getByRole('switch')).toBeChecked();
+  });
+
+  it('hides nested fields when toggle is off', () => {
+    const { queryByTestId } = renderOverrides([
+      emptyEntry('displayName'),
+      emptyEntry('displayCoursenumber'),
+      emptyEntry('displayOrganization'),
+    ]);
+    expect(queryByTestId('setting-card-displayName')).toBeNull();
+  });
+
+  it('shows nested fields when toggle is on', () => {
+    const { getByTestId } = renderOverrides([
+      filledEntry('displayName'),
+      emptyEntry('displayCoursenumber'),
+    ]);
+    expect(getByTestId('setting-card-displayName')).toBeInTheDocument();
+  });
+
+  it('shows nested fields after enabling the toggle', async () => {
+    const { getByRole, getByTestId } = renderOverrides([
+      emptyEntry('displayName'),
+    ]);
+    await user.click(getByRole('switch'));
+    expect(getByTestId('setting-card-displayName')).toBeInTheDocument();
+  });
+
+  it('shows the blocked message when trying to disable the toggle while fields have content', async () => {
+    const { getByRole, getByText } = renderOverrides([
+      filledEntry('displayName'),
+      emptyEntry('displayCoursenumber'),
+    ]);
+    // Toggle is currently on — try to turn it off
+    await user.click(getByRole('switch'));
+    expect(getByText(messages.courseDisplayOverridesBlockedMessage.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('does not show the blocked message initially', () => {
+    const { queryByText } = renderOverrides([emptyEntry('displayName')]);
+    expect(queryByText(messages.courseDisplayOverridesBlockedMessage.defaultMessage)).toBeNull();
+  });
+
+  it('allows disabling the toggle when all fields are empty', async () => {
+    const { getByRole, queryByTestId } = renderOverrides([
+      emptyEntry('displayName'),
+    ]);
+    // Enable first
+    await user.click(getByRole('switch'));
+    expect(queryByTestId('setting-card-displayName')).toBeInTheDocument();
+    // Disable — should work because no content
+    await user.click(getByRole('switch'));
+    expect(queryByTestId('setting-card-displayName')).toBeNull();
+  });
+});
diff --git a/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx b/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
new file mode 100644
index 0000000000..f8550e3913
--- /dev/null
+++ b/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import {
+  Form,
+  Icon,
+  IconButton,
+  ModalPopup,
+  useToggle,
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import SettingCard from '../setting-card/SettingCard';
+import type { SettingEntry, SetEditedSettings } from '../data/types';
+import messages from './messages';
+
+interface CourseDisplayOverridesProps {
+  displaySettingsEntries: SettingEntry[];
+  showSaveSettingsPrompt: (value: boolean) => void;
+  saveSettingsPrompt: boolean;
+  setEditedSettings: SetEditedSettings;
+  handleSettingBlur: () => void;
+  isEditableState: boolean;
+  setIsEditableState: (value: boolean) => void;
+}
+
+const CourseDisplayOverrides = ({
+  displaySettingsEntries,
+  showSaveSettingsPrompt,
+  saveSettingsPrompt,
+  setEditedSettings,
+  handleSettingBlur,
+  isEditableState,
+  setIsEditableState,
+}: CourseDisplayOverridesProps) => {
+  const hasContent = displaySettingsEntries.some(([, data]) => {
+    const val = data.value;
+    return val !== null && val !== undefined && val !== '';
+  });
+
+  const intl = useIntl();
+  const [isEnabled, setIsEnabled] = useState(hasContent);
+
+  // Re-sync toggle state when entries change (e.g. after a successful save)
+  useEffect(() => {
+    setIsEnabled(hasContent);
+  }, [hasContent]);
+  const [showBlockedMessage, setShowBlockedMessage] = useState(false);
+  const [isInfoOpen, openInfo, closeInfo] = useToggle(false);
+  const [infoTarget, setInfoTarget] = useState<HTMLElement | null>(null);
+
+  const handleToggle = (checked: boolean) => {
+    if (!checked && hasContent) {
+      setShowBlockedMessage(true);
+    } else {
+      setShowBlockedMessage(false);
+      setIsEnabled(checked);
+    }
+  };
+
+  return (
+    <>
+      <li className="setting-row">
+        <div className="d-flex align-items-center px-4 py-3">
+          <div className="setting-row-label col-6 d-flex align-items-center flex-wrap">
+            <span className="setting-row-name font-weight-bold mr-1">
+              {intl.formatMessage(messages.courseDisplayOverridesLabel)}
+            </span>
+            <IconButton
+              ref={setInfoTarget}
+              onClick={openInfo}
+              src={InfoOutline}
+              iconAs={Icon}
+              alt={intl.formatMessage(messages.courseDisplayOverridesInfoAlt)}
+              size="sm"
+            />
+            <ModalPopup
+              hasArrow
+              placement="right"
+              positionRef={infoTarget}
+              isOpen={isInfoOpen}
+              onClose={closeInfo}
+              className="pgn__modal-popup__arrow"
+            >
+              <div className="p-2 x-small rounded modal-popup-content">
+                {intl.formatMessage(messages.courseDisplayOverridesInfoText)}
+              </div>
+            </ModalPopup>
+          </div>
+          <div className="setting-row-input col-6">
+            <Form.Group className="m-0">
+              <Form.Switch
+                id="course-display-overrides-toggle"
+                checked={isEnabled}
+                onChange={(e) => handleToggle(e.target.checked)}
+                aria-label={intl.formatMessage(messages.courseDisplayOverridesLabel)}
+                className="m-0"
+              />
+            </Form.Group>
+          </div>
+        </div>
+        {showBlockedMessage && (
+          <p className="display-overrides-blocked-message px-4 pb-3 my-0">
+            {intl.formatMessage(messages.courseDisplayOverridesBlockedMessage)}
+          </p>
+        )}
+      </li>
+
+      {isEnabled && (
+        <li className="display-overrides-nested-fields ml-4 mr-3 mb-2">
+          <ul className="setting-items-list m-0 p-0">
+            {displaySettingsEntries.map(([settingName, settingData]) => (
+              <SettingCard
+                key={settingName}
+                settingData={settingData}
+                name={settingName}
+                showSaveSettingsPrompt={showSaveSettingsPrompt}
+                saveSettingsPrompt={saveSettingsPrompt}
+                setEdited={setEditedSettings}
+                handleBlur={handleSettingBlur}
+                isEditableState={isEditableState}
+                setIsEditableState={setIsEditableState}
+              />
+            ))}
+          </ul>
+        </li>
+      )}
+    </>
+  );
+};
+
+export default CourseDisplayOverrides;
diff --git a/src/advanced-settings/settings-section/SettingsSection.test.tsx b/src/advanced-settings/settings-section/SettingsSection.test.tsx
new file mode 100644
index 0000000000..5ad8e719d6
--- /dev/null
+++ b/src/advanced-settings/settings-section/SettingsSection.test.tsx
@@ -0,0 +1,157 @@
+import userEvent from '@testing-library/user-event';
+import { render, initializeMocks } from '@src/testUtils';
+import SettingsSection, { SettingsSectionProps } from './SettingsSection';
+import messages from './messages';
+import type { SettingEntry } from '../data/types';
+
+// Mock SettingCard to avoid pulling in CodeMirror and other heavy dependencies.
+jest.mock(
+  '../setting-card/SettingCard',
+  () => jest.fn(({ name }: { name: string; }) => <div data-testid={`setting-card-${name}`}>{name}</div>),
+);
+
+// Mock CourseDisplayOverrides to isolate SettingsSection behaviour.
+jest.mock(
+  './CourseDisplayOverrides',
+  () => jest.fn(() => <div data-testid="course-display-overrides" />),
+);
+
+const defaultProps: SettingsSectionProps = {
+  category: 'Grading',
+  settingsEntries: [] as SettingEntry[],
+  showDeprecated: false,
+  showSaveSettingsPrompt: jest.fn(),
+  saveSettingsPrompt: false,
+  setEditedSettings: jest.fn(),
+  handleSettingBlur: jest.fn(),
+  isEditableState: false,
+  setIsEditableState: jest.fn(),
+};
+
+const makeEntry = (name: string, deprecated = false): SettingEntry => [
+  name,
+  { displayName: name, value: 'test', help: '', deprecated },
+];
+
+const renderSection = (props: Partial<SettingsSectionProps> = {}) =>
+  render(
+    <SettingsSection
+      {...defaultProps}
+      {...props}
+    />,
+  );
+
+describe('<SettingsSection />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    initializeMocks();
+    user = userEvent.setup();
+  });
+
+  it('renders the category title', () => {
+    const { getByText } = renderSection({
+      settingsEntries: [makeEntry('noGrade')],
+    });
+    expect(getByText(messages.categoryGrading.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders a SettingCard for each visible setting', () => {
+    const { getByTestId } = renderSection({
+      settingsEntries: [makeEntry('noGrade'), makeEntry('showCorrectness')],
+    });
+    expect(getByTestId('setting-card-noGrade')).toBeInTheDocument();
+    expect(getByTestId('setting-card-showCorrectness')).toBeInTheDocument();
+  });
+
+  it('hides deprecated settings when showDeprecated is false', () => {
+    const { queryByTestId } = renderSection({
+      settingsEntries: [makeEntry('noGrade'), makeEntry('oldSetting', true)],
+      showDeprecated: false,
+    });
+    expect(queryByTestId('setting-card-noGrade')).toBeInTheDocument();
+    expect(queryByTestId('setting-card-oldSetting')).toBeNull();
+  });
+
+  it('shows deprecated settings when showDeprecated is true', () => {
+    const { getByTestId } = renderSection({
+      settingsEntries: [makeEntry('noGrade'), makeEntry('oldSetting', true)],
+      showDeprecated: true,
+    });
+    expect(getByTestId('setting-card-noGrade')).toBeInTheDocument();
+    expect(getByTestId('setting-card-oldSetting')).toBeInTheDocument();
+  });
+
+  it('renders nothing when all settings are deprecated and showDeprecated is false', () => {
+    const { queryByText, queryByRole } = renderSection({
+      settingsEntries: [makeEntry('oldSetting', true)],
+      showDeprecated: false,
+    });
+    expect(queryByText(messages.categoryGrading.defaultMessage)).toBeNull();
+    expect(queryByRole('button')).toBeNull();
+  });
+
+  it('collapses the section when the trigger is clicked', async () => {
+    const { getByRole } = renderSection({
+      settingsEntries: [makeEntry('noGrade')],
+    });
+    const trigger = getByRole('button');
+    // Section is open by default
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    // Click the trigger to collapse
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('re-opens the section when forceOpen changes to true after being collapsed', () => {
+    const { getByRole, rerender } = renderSection({
+      settingsEntries: [makeEntry('noGrade')],
+      expandAll: false, // start collapsed
+      forceOpen: false,
+    });
+    expect(getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+
+    rerender(
+      <SettingsSection
+        {...defaultProps}
+        settingsEntries={[makeEntry('noGrade')]}
+        expandAll={false}
+        forceOpen
+      />,
+    );
+    expect(getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('renders CourseDisplayOverrides for display-override keys in the General Setting category', () => {
+    const { getByTestId, queryByTestId } = renderSection({
+      category: 'General Setting',
+      settingsEntries: [
+        makeEntry('displayName'),
+        makeEntry('displayCoursenumber'),
+        makeEntry('otherSetting'),
+      ],
+    });
+    expect(getByTestId('course-display-overrides')).toBeInTheDocument();
+    expect(getByTestId('setting-card-otherSetting')).toBeInTheDocument();
+    expect(queryByTestId('setting-card-displayName')).toBeNull();
+  });
+
+  it('renders only SettingCards when no display-override keys are in the General Setting category', () => {
+    const { queryByTestId, getByTestId } = renderSection({
+      category: 'General Setting',
+      settingsEntries: [makeEntry('otherSetting')],
+    });
+    expect(queryByTestId('course-display-overrides')).toBeNull();
+    expect(getByTestId('setting-card-otherSetting')).toBeInTheDocument();
+  });
+
+  it('renders subcategory headers when a subcategoryMap is provided', () => {
+    const { getByText } = renderSection({
+      settingsEntries: [makeEntry('maxAttempts'), makeEntry('videoAutoAdvance')],
+      subcategoryMap: { maxAttempts: 'Problems', videoAutoAdvance: 'Video' },
+      subcategoryOrder: ['Problems', 'Video'],
+    });
+    expect(getByText(messages.subcategoryProblems.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.subcategoryVideo.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/advanced-settings/settings-section/SettingsSection.tsx b/src/advanced-settings/settings-section/SettingsSection.tsx
new file mode 100644
index 0000000000..6ede737fc1
--- /dev/null
+++ b/src/advanced-settings/settings-section/SettingsSection.tsx
@@ -0,0 +1,203 @@
+import { Fragment, useEffect, useState } from 'react';
+import { Card, Collapsible, Icon } from '@openedx/paragon';
+import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import SettingCard from '../setting-card/SettingCard';
+import CourseDisplayOverrides from './CourseDisplayOverrides';
+import {
+  CATEGORY_GENERAL_SETTING,
+  CATEGORY_CONTENT_BLOCKS,
+  CATEGORY_GRADING,
+  CATEGORY_SCHEDULE,
+  CATEGORY_CERTIFICATES,
+  CATEGORY_ENROLLMENT_PAGE,
+  CATEGORY_PAGES_AND_RESOURCES,
+  CATEGORY_SPECIAL_EXAMS,
+  CATEGORY_MOBILE,
+  CATEGORY_INSTRUCTORS,
+  CATEGORY_LEGACY_DISCUSSION,
+  CATEGORY_LIBRARIES,
+  CATEGORY_OTHER,
+} from '../data/settingsCategories';
+import type { SettingEntry, SetEditedSettings } from '../data/types';
+import messages from './messages';
+
+const DISPLAY_OVERRIDE_KEYS = new Set(['displayName', 'displayCoursenumber', 'displayOrganization']);
+
+const CATEGORY_MESSAGE_MAP = {
+  [CATEGORY_GENERAL_SETTING]: messages.categoryGeneralSetting,
+  [CATEGORY_CONTENT_BLOCKS]: messages.categoryContentBlocks,
+  [CATEGORY_GRADING]: messages.categoryGrading,
+  [CATEGORY_SCHEDULE]: messages.categorySchedule,
+  [CATEGORY_CERTIFICATES]: messages.categoryCertificates,
+  [CATEGORY_ENROLLMENT_PAGE]: messages.categoryEnrollmentPage,
+  [CATEGORY_PAGES_AND_RESOURCES]: messages.categoryPagesAndResources,
+  [CATEGORY_SPECIAL_EXAMS]: messages.categorySpecialExams,
+  [CATEGORY_MOBILE]: messages.categoryMobile,
+  [CATEGORY_INSTRUCTORS]: messages.categoryInstructors,
+  [CATEGORY_LEGACY_DISCUSSION]: messages.categoryLegacyDiscussion,
+  [CATEGORY_LIBRARIES]: messages.categoryLibraries,
+  [CATEGORY_OTHER]: messages.categoryOther,
+};
+
+const SUBCATEGORY_MESSAGE_MAP: Record<string, { id: string; defaultMessage: string; }> = {
+  Settings: messages.subcategorySettings,
+  Problems: messages.subcategoryProblems,
+  Video: messages.subcategoryVideo,
+  Other: messages.subcategoryOther,
+};
+
+const groupBySubcategory = (
+  settings: SettingEntry[],
+  subcategoryMap: Record<string, string>,
+  subcategoryOrder: string[],
+): Record<string, SettingEntry[]> => {
+  const groups: Record<string, SettingEntry[]> = {};
+  settings.forEach(([key, value]) => {
+    const sub = subcategoryMap[key] || 'Other';
+    if (!groups[sub]) { groups[sub] = []; }
+    groups[sub].push([key, value]);
+  });
+  const ordered: Record<string, SettingEntry[]> = {};
+  subcategoryOrder.forEach((sub) => {
+    if (groups[sub]) { ordered[sub] = groups[sub]; }
+  });
+  Object.keys(groups).forEach((sub) => {
+    if (!ordered[sub]) { ordered[sub] = groups[sub]; }
+  });
+  return ordered;
+};
+
+export interface SettingsSectionProps {
+  category: string;
+  settingsEntries: SettingEntry[];
+  showDeprecated: boolean;
+  showSaveSettingsPrompt: (value: boolean) => void;
+  saveSettingsPrompt: boolean;
+  setEditedSettings: SetEditedSettings;
+  handleSettingBlur: () => void;
+  isEditableState: boolean;
+  setIsEditableState: (value: boolean) => void;
+  forceOpen?: boolean;
+  expandAll?: boolean;
+  subcategoryMap?: Record<string, string> | null;
+  subcategoryOrder?: string[];
+}
+
+const SettingsSection = ({
+  category,
+  settingsEntries,
+  showDeprecated,
+  showSaveSettingsPrompt,
+  saveSettingsPrompt,
+  setEditedSettings,
+  handleSettingBlur,
+  isEditableState,
+  setIsEditableState,
+  forceOpen = false,
+  expandAll = true,
+  subcategoryMap = null,
+  subcategoryOrder = [],
+}: SettingsSectionProps) => {
+  const intl = useIntl();
+  const [isOpen, setIsOpen] = useState(true);
+
+  useEffect(() => {
+    if (forceOpen) {
+      setIsOpen(true);
+    }
+  }, [forceOpen]);
+
+  useEffect(() => {
+    setIsOpen(expandAll);
+  }, [expandAll]);
+
+  const visibleSettings = settingsEntries.filter(
+    ([, settingData]) => !settingData.deprecated || showDeprecated,
+  );
+
+  if (visibleSettings.length === 0) {
+    return null;
+  }
+
+  const renderSettingCard = (settingName: string, settingData: SettingEntry[1]) => (
+    <SettingCard
+      key={settingName}
+      settingData={settingData}
+      name={settingName}
+      showSaveSettingsPrompt={showSaveSettingsPrompt}
+      saveSettingsPrompt={saveSettingsPrompt}
+      setEdited={setEditedSettings}
+      handleBlur={handleSettingBlur}
+      isEditableState={isEditableState}
+      setIsEditableState={setIsEditableState}
+    />
+  );
+
+  const renderSettingsList = () => {
+    if (subcategoryMap) {
+      return Object.entries(groupBySubcategory(visibleSettings, subcategoryMap, subcategoryOrder)).map(
+        ([subcat, items]) => (
+          <Fragment key={subcat}>
+            <li className="subcategory-header px-4 pt-4 pb-0">
+              <p className="subcategory-header-title font-weight-bold mb-2">
+                {SUBCATEGORY_MESSAGE_MAP[subcat]
+                  ? intl.formatMessage(SUBCATEGORY_MESSAGE_MAP[subcat])
+                  : subcat}
+              </p>
+              <hr className="subcategory-header-divider my-0" />
+            </li>
+            {items.map(([settingName, settingData]) => renderSettingCard(settingName, settingData))}
+          </Fragment>
+        ),
+      );
+    }
+
+    if (category === CATEGORY_GENERAL_SETTING) {
+      const displayOverrideEntries = visibleSettings.filter(([key]) => DISPLAY_OVERRIDE_KEYS.has(key));
+      const otherEntries = visibleSettings.filter(([key]) => !DISPLAY_OVERRIDE_KEYS.has(key));
+      return (
+        <>
+          {displayOverrideEntries.length > 0 && (
+            <CourseDisplayOverrides
+              displaySettingsEntries={displayOverrideEntries}
+              showSaveSettingsPrompt={showSaveSettingsPrompt}
+              saveSettingsPrompt={saveSettingsPrompt}
+              setEditedSettings={setEditedSettings}
+              handleSettingBlur={handleSettingBlur}
+              isEditableState={isEditableState}
+              setIsEditableState={setIsEditableState}
+            />
+          )}
+          {otherEntries.map(([settingName, settingData]) => renderSettingCard(settingName, settingData))}
+        </>
+      );
+    }
+
+    return visibleSettings.map(([settingName, settingData]) => renderSettingCard(settingName, settingData));
+  };
+
+  return (
+    <Card className="settings-section mb-4">
+      <Collapsible.Advanced open={isOpen} onToggle={setIsOpen}>
+        <Collapsible.Trigger className="settings-section-trigger">
+          <div className="d-flex align-items-center justify-content-between px-4 py-3">
+            <h3 className="settings-section-title font-weight-bold m-0">
+              {CATEGORY_MESSAGE_MAP[category]
+                ? intl.formatMessage(CATEGORY_MESSAGE_MAP[category])
+                : category}
+            </h3>
+            <Icon src={isOpen ? ExpandLess : ExpandMore} className="settings-section-icon" />
+          </div>
+        </Collapsible.Trigger>
+        <Collapsible.Body>
+          <ul className="setting-items-list m-0 p-0">
+            {renderSettingsList()}
+          </ul>
+        </Collapsible.Body>
+      </Collapsible.Advanced>
+    </Card>
+  );
+};
+
+export default SettingsSection;
diff --git a/src/advanced-settings/settings-section/messages.ts b/src/advanced-settings/settings-section/messages.ts
new file mode 100644
index 0000000000..5a7c6b6e32
--- /dev/null
+++ b/src/advanced-settings/settings-section/messages.ts
@@ -0,0 +1,116 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  // ── CourseDisplayOverrides ─────────────────────────────────────────────────
+  courseDisplayOverridesLabel: {
+    id: 'course-authoring.advanced-settings.settings-section.course-display-overrides.label',
+    defaultMessage: 'Course Display Overrides',
+    description: 'Label for the Course Display Overrides toggle section in Advanced Settings',
+  },
+  courseDisplayOverridesInfoAlt: {
+    id: 'course-authoring.advanced-settings.settings-section.course-display-overrides.info-alt',
+    defaultMessage: 'More information about Course Display Overrides',
+    description: 'Alt text for the info icon button that opens the Course Display Overrides help popup',
+  },
+  courseDisplayOverridesInfoText: {
+    id: 'course-authoring.advanced-settings.settings-section.course-display-overrides.info-text',
+    defaultMessage: 'Override the default display values for Course Name, Course Number, and Course Organization shown to learners. Leave empty to use the values set during course creation.',
+    description: 'Explanatory text shown in the info popup for the Course Display Overrides section',
+  },
+  courseDisplayOverridesBlockedMessage: {
+    id: 'course-authoring.advanced-settings.settings-section.course-display-overrides.blocked-message',
+    defaultMessage: 'These fields have content. Clear all three fields to disable Course Display Overrides.',
+    description: 'Warning message shown when the course author tries to disable Course Display Overrides but one or more fields still have content',
+  },
+
+  // ── Category names (section headers) ──────────────────────────────────────
+  categoryGeneralSetting: {
+    id: 'course-authoring.advanced-settings.category.general-setting',
+    defaultMessage: 'General Setting',
+    description: 'Header label for the General Setting section on the Advanced Settings page',
+  },
+  categoryContentBlocks: {
+    id: 'course-authoring.advanced-settings.category.content-blocks',
+    defaultMessage: 'Content Blocks',
+    description: 'Header label for the Content Blocks section on the Advanced Settings page',
+  },
+  categoryGrading: {
+    id: 'course-authoring.advanced-settings.category.grading',
+    defaultMessage: 'Grading',
+    description: 'Header label for the Grading section on the Advanced Settings page',
+  },
+  categorySchedule: {
+    id: 'course-authoring.advanced-settings.category.schedule',
+    defaultMessage: 'Schedule',
+    description: 'Header label for the Schedule section on the Advanced Settings page',
+  },
+  categoryCertificates: {
+    id: 'course-authoring.advanced-settings.category.certificates',
+    defaultMessage: 'Certificates',
+    description: 'Header label for the Certificates section on the Advanced Settings page',
+  },
+  categoryEnrollmentPage: {
+    id: 'course-authoring.advanced-settings.category.enrollment-page',
+    defaultMessage: 'Enrollment Page',
+    description: 'Header label for the Enrollment Page section on the Advanced Settings page',
+  },
+  categoryPagesAndResources: {
+    id: 'course-authoring.advanced-settings.category.pages-and-resources',
+    defaultMessage: 'Pages & Resources',
+    description: 'Header label for the Pages & Resources section on the Advanced Settings page',
+  },
+  categorySpecialExams: {
+    id: 'course-authoring.advanced-settings.category.special-exams',
+    defaultMessage: 'Special Exams',
+    description: 'Header label for the Special Exams section on the Advanced Settings page',
+  },
+  categoryMobile: {
+    id: 'course-authoring.advanced-settings.category.mobile',
+    defaultMessage: 'Mobile',
+    description: 'Header label for the Mobile section on the Advanced Settings page',
+  },
+  categoryInstructors: {
+    id: 'course-authoring.advanced-settings.category.instructors',
+    defaultMessage: 'Instructors',
+    description: 'Header label for the Instructors section on the Advanced Settings page',
+  },
+  categoryLegacyDiscussion: {
+    id: 'course-authoring.advanced-settings.category.legacy-discussion',
+    defaultMessage: 'Legacy Discussion',
+    description: 'Header label for the Legacy Discussion section on the Advanced Settings page',
+  },
+  categoryLibraries: {
+    id: 'course-authoring.advanced-settings.category.libraries',
+    defaultMessage: 'Libraries',
+    description: 'Header label for the Libraries section on the Advanced Settings page',
+  },
+  categoryOther: {
+    id: 'course-authoring.advanced-settings.category.other',
+    defaultMessage: 'Other',
+    description: 'Header label for the Other (uncategorized) section on the Advanced Settings page',
+  },
+
+  // ── Subcategory names (Content Blocks sub-headers) ─────────────────────────
+  subcategorySettings: {
+    id: 'course-authoring.advanced-settings.subcategory.settings',
+    defaultMessage: 'Settings',
+    description: 'Sub-header label for the Settings group inside the Content Blocks section',
+  },
+  subcategoryProblems: {
+    id: 'course-authoring.advanced-settings.subcategory.problems',
+    defaultMessage: 'Problems',
+    description: 'Sub-header label for the Problems group inside the Content Blocks section',
+  },
+  subcategoryVideo: {
+    id: 'course-authoring.advanced-settings.subcategory.video',
+    defaultMessage: 'Video',
+    description: 'Sub-header label for the Video group inside the Content Blocks section',
+  },
+  subcategoryOther: {
+    id: 'course-authoring.advanced-settings.subcategory.other',
+    defaultMessage: 'Other',
+    description: 'Sub-header label for uncategorized items inside the Content Blocks section',
+  },
+});
+
+export default messages;
diff --git a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
index 982c5a4008..35ebb30c95 100644
--- a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
+++ b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
@@ -226,7 +226,11 @@ describe('<CreateOrRerunCourseForm />', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText(messages.totalLengthError.defaultMessage)).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          `The combined length of the organization, course number and course run fields cannot be more than 65 characters.`,
+        ),
+      ).toBeInTheDocument();
     });
   });
 
diff --git a/src/generic/create-or-rerun-course/hooks.jsx b/src/generic/create-or-rerun-course/hooks.jsx
index 906fd485cc..023d1bc3a8 100644
--- a/src/generic/create-or-rerun-course/hooks.jsx
+++ b/src/generic/create-or-rerun-course/hooks.jsx
@@ -60,13 +60,20 @@ const useCreateOrRerunCourse = (initialValues) => {
         intl.formatMessage(messages.disallowedCharsError),
       )
       .matches(noSpaceRule, intl.formatMessage(messages.noSpaceError)),
-  }).test(TOTAL_LENGTH_KEY, intl.formatMessage(messages.totalLengthError), function validateTotalLength() {
-    const { org, number, run } = this?.options.originalValue || {};
-    if ((org?.length || 0) + (number?.length || 0) + (run?.length || 0) > MAX_TOTAL_LENGTH) {
-      return this.createError({ path: TOTAL_LENGTH_KEY, message: intl.formatMessage(messages.totalLengthError) });
-    }
-    return true;
-  });
+  }).test(
+    TOTAL_LENGTH_KEY,
+    intl.formatMessage(messages.totalLengthError, { maxLength: MAX_TOTAL_LENGTH }),
+    function validateTotalLength() {
+      const { org, number, run } = this?.options.originalValue || {};
+      if ((org?.length || 0) + (number?.length || 0) + (run?.length || 0) > MAX_TOTAL_LENGTH) {
+        return this.createError({
+          path: TOTAL_LENGTH_KEY,
+          message: intl.formatMessage(messages.totalLengthError, { maxLength: MAX_TOTAL_LENGTH }),
+        });
+      }
+      return true;
+    },
+  );
 
   const {
     values,
diff --git a/src/generic/create-or-rerun-course/messages.ts b/src/generic/create-or-rerun-course/messages.ts
index 194271d544..944ff292c8 100644
--- a/src/generic/create-or-rerun-course/messages.ts
+++ b/src/generic/create-or-rerun-course/messages.ts
@@ -1,5 +1,4 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
-import { MAX_TOTAL_LENGTH } from '../../data/constants';
 
 const messages = defineMessages({
   courseDisplayNameLabel: {
@@ -120,7 +119,7 @@ const messages = defineMessages({
   },
   totalLengthError: {
     id: 'course-authoring.create-or-rerun-course.total-length-error.error',
-    defaultMessage: `The combined length of the organization, course number and course run fields cannot be more than ${MAX_TOTAL_LENGTH} characters.`,
+    defaultMessage: 'The combined length of the organization, course number and course run fields cannot be more than {maxLength} characters.',
   },
   alertErrorExistsAriaLabelledBy: {
     id: 'course-authoring.create-or-rerun-course.error.already-exists.labelledBy',
diff --git a/src/generic/sub-header/SubHeader.tsx b/src/generic/sub-header/SubHeader.tsx
index 95b1801fcc..b63c72e787 100644
--- a/src/generic/sub-header/SubHeader.tsx
+++ b/src/generic/sub-header/SubHeader.tsx
@@ -12,6 +12,7 @@ interface SubHeaderProps {
   titleActions?: ReactElement | ReactElement[] | null;
   hideBorder?: boolean;
   withSubHeaderContent?: boolean;
+  headerClassName?: string;
 }
 
 const SubHeader = ({
@@ -25,10 +26,11 @@ const SubHeader = ({
   titleActions,
   hideBorder = false,
   withSubHeaderContent = true,
+  headerClassName = '',
 }: SubHeaderProps) => (
   <div className={`${!hideBorder && 'border-bottom border-light-400'} mb-2`}>
     {breadcrumbs && <div className="sub-header-breadcrumbs">{breadcrumbs}</div>}
-    <header className="sub-header">
+    <header className={`sub-header ${headerClassName}`.trim()}>
       <h2 className="sub-header-title">
         <small className="sub-header-title-subtitle">{subtitle}</small>
         {title}