From 6c0f6ccf8e533621eeac585eead6405c545f5876 Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Wed, 22 Apr 2026 21:21:18 -0500
Subject: [PATCH 01/10] feat: redesign Advanced Settings page with grouped
 sections and type-specific inputs

Redesigns the Advanced Settings page in Studio for course authors. Instead of a
flat alphabetical list of ~82 settings, settings are now organized into collapsible
sections by functional category, with type-aware input components and a search/filter bar.

New components:
- SettingsFilters: search bar with collapse/expand all and deprecated settings toggle
- SettingsSection: collapsible section using Paragon Collapsible.Advanced, renders
  settings grouped by category; supports subcategory grouping (Content Blocks)
- CourseDisplayOverrides: dedicated UI for display-override fields with enable/disable
  toggle and blocked state messaging
- BooleanInput, StringInput, NumberInput, EnumInput, JsonInput: type-specific inputs

New data layer:
- settingsCategories.ts: maps all settings keys to 13 categories with display order,
  exported constants, and subcategory map for Content Blocks
- fieldTypes.ts: getFieldType() and serializeValue() utilities; ENUM_OPTIONS definitions
- fieldTypeMessages.ts: i18n messages for enum labels and field placeholders
- types.ts: shared TypeScript interfaces (SettingData, SettingEntry, SetEditedSettings)

Modified:
- SettingCard.tsx: renders type-specific input components instead of a single generic
  field; passes displayName as aria-label for accessibility
- AdvancedSettings.tsx: groups settings via groupSettingsByCategory(), renders one
  SettingsSection per category; data layer (React Query, API calls, selectors) untouched
- AdvancedSettings.scss: styles for section headers, collapsible triggers, subcategory labels

Not modified: Redux store, API layer, thunks, selectors, routing.
---
 package-lock.json                             |  22 +
 package.json                                  |   1 +
 .../AdvancedSettings.test.tsx                 |  78 ++--
 src/advanced-settings/AdvancedSettings.tsx    | 125 +++---
 .../data/fieldTypeMessages.ts                 | 410 ++++++++++++++++++
 src/advanced-settings/data/fieldTypes.test.ts |  97 +++++
 src/advanced-settings/data/fieldTypes.ts      | 157 +++++++
 .../data/settingsCategories.test.ts           |  96 ++++
 .../data/settingsCategories.ts                | 199 +++++++++
 src/advanced-settings/data/types.ts           |  18 +
 .../scss/AdvancedSettings.scss                |  90 +++-
 .../setting-card/SettingCard.test.jsx         |  20 +-
 .../setting-card/SettingCard.tsx              | 228 +++++++---
 .../setting-card/inputs/BooleanInput.test.tsx |  36 ++
 .../setting-card/inputs/BooleanInput.tsx      |  22 +
 .../setting-card/inputs/EnumInput.test.tsx    |  39 ++
 .../setting-card/inputs/EnumInput.tsx         |  40 ++
 .../setting-card/inputs/JsonInput.test.tsx    | 104 +++++
 .../setting-card/inputs/JsonInput.tsx         |  80 ++++
 .../setting-card/inputs/NumberInput.test.tsx  |  59 +++
 .../setting-card/inputs/NumberInput.tsx       |  37 ++
 .../setting-card/inputs/StringInput.test.tsx  |  51 +++
 .../setting-card/inputs/StringInput.tsx       |  26 ++
 .../settings-filters/SettingsFilters.test.tsx |  79 ++++
 .../settings-filters/SettingsFilters.tsx      |  58 +++
 .../settings-filters/messages.ts              |  41 ++
 .../CourseDisplayOverrides.test.tsx           | 112 +++++
 .../CourseDisplayOverrides.tsx                | 128 ++++++
 .../settings-section/SettingsSection.test.tsx | 102 +++++
 .../settings-section/SettingsSection.tsx      | 203 +++++++++
 .../settings-section/messages.ts              | 116 +++++
 31 files changed, 2688 insertions(+), 186 deletions(-)
 create mode 100644 src/advanced-settings/data/fieldTypeMessages.ts
 create mode 100644 src/advanced-settings/data/fieldTypes.test.ts
 create mode 100644 src/advanced-settings/data/fieldTypes.ts
 create mode 100644 src/advanced-settings/data/settingsCategories.test.ts
 create mode 100644 src/advanced-settings/data/settingsCategories.ts
 create mode 100644 src/advanced-settings/data/types.ts
 create mode 100644 src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/BooleanInput.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/EnumInput.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/JsonInput.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/NumberInput.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/StringInput.test.tsx
 create mode 100644 src/advanced-settings/setting-card/inputs/StringInput.tsx
 create mode 100644 src/advanced-settings/settings-filters/SettingsFilters.test.tsx
 create mode 100644 src/advanced-settings/settings-filters/SettingsFilters.tsx
 create mode 100644 src/advanced-settings/settings-filters/messages.ts
 create mode 100644 src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
 create mode 100644 src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
 create mode 100644 src/advanced-settings/settings-section/SettingsSection.test.tsx
 create mode 100644 src/advanced-settings/settings-section/SettingsSection.tsx
 create mode 100644 src/advanced-settings/settings-section/messages.ts

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..ceabd89fc2 100644
--- a/src/advanced-settings/AdvancedSettings.test.tsx
+++ b/src/advanced-settings/AdvancedSettings.test.tsx
@@ -12,24 +12,27 @@ import { advancedSettingsMock } from './__mocks__';
 import { getCourseAdvancedSettingsApiUrl } from './data/api';
 import AdvancedSettings from './AdvancedSettings';
 import messages from './messages';
-
-let axiosMock;
-const mockPathname = '/foo-bar';
-const courseId = '123';
-
-// Mock the TextareaAutosize component
-jest.mock('react-textarea-autosize', () =>
-  jest.fn((props) => (
-    <textarea
-      {...props}
-      onFocus={() => {}}
-    />
-  )));
+import filterMessages from './settings-filters/messages';
+
+// 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
+    data-testid="json-input"
+    value={initialValue}
+    onChange={(e) => onChange(e.target.value)}
+    onBlur={onBlur}
+  />
+)));
 
 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 +65,13 @@ 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 +80,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 +90,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 +98,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 +106,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 +155,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 +177,13 @@ 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..44c349b570 100644
--- a/src/advanced-settings/AdvancedSettings.tsx
+++ b/src/advanced-settings/AdvancedSettings.tsx
@@ -8,7 +8,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 +24,28 @@ 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';
 
 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 +100,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 +160,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 +254,38 @@ const AdvancedSettings = () => {
               <SubHeader
                 subtitle={intl.formatMessage(messages.headingSubtitle)}
                 title={intl.formatMessage(messages.headingTitle)}
-                contentTitle={intl.formatMessage(messages.policy)}
               />
               <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),
-                          }}
+                    <SettingsFilters
+                      filterText={filterText}
+                      onFilterChange={setFilterText}
+                      showDeprecated={showDeprecated}
+                      onDeprecatedChange={setShowDeprecated}
+                      expandAll={expandAll}
+                      onExpandAllChange={setExpandAll}
+                    />
+                    {Object.entries(groupSettingsByCategory(advancedSettingsData, filterText)).map(
+                      ([category, settingsEntries]) => (
+                        <SettingsSection
+                          key={category}
+                          category={category}
+                          settingsEntries={settingsEntries as [string, object][]}
+                          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 : []}
                         />
-                      </Button>
-                    </div>
-                    <ul className="setting-items-list p-0">
-                      {Object.keys(advancedSettingsData).map((settingName) => {
-                        const settingData = advancedSettingsData[settingName];
-                        if (settingData.deprecated && !showDeprecated) {
-                          return null;
-                        }
-                        return (
-                          <SettingCard
-                            key={settingName}
-                            settingData={settingData}
-                            name={settingName}
-                            showSaveSettingsPrompt={showSaveSettingsPrompt}
-                            saveSettingsPrompt={saveSettingsPrompt}
-                            setEdited={setEditedSettings}
-                            handleBlur={handleSettingBlur}
-                            isEditableState={isEditableState}
-                            setIsEditableState={setIsEditableState}
-                          />
-                        );
-                      })}
-                    </ul>
+                      ),
+                    )}
                   </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..e27d5a6d5e
--- /dev/null
+++ b/src/advanced-settings/data/fieldTypeMessages.ts
@@ -0,0 +1,410 @@
+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..57af990701
--- /dev/null
+++ b/src/advanced-settings/data/fieldTypes.test.ts
@@ -0,0 +1,97 @@
+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..8f6143adc4
--- /dev/null
+++ b/src/advanced-settings/data/fieldTypes.ts
@@ -0,0 +1,157 @@
+/**
+ * Field type classification for all Advanced Settings.
+ * Type is detected at runtime by getFieldType(key, value) based on typeof value + this enum map.
+ *
+ * BOOLEAN (Form.Switch):
+ *   certHtmlViewEnabled, selfPaced, enableTimedExams, enableProctoredExams, showResetButton,
+ *   mobileAvailable, invitationOnly, isNew, noGrade, highlightsEnabledForMessaging,
+ *   allowUnsupportedXblocks, allowProctoringOptOut, createZendeskTickets, enableSubsectionGating,
+ *   entranceExamEnabled, allowPublicWikiAccess, disableProgressGraph, showCalculator,
+ *   hideProgressTab, edxnotes, videoAutoAdvance, videoSpeedOptimizations, useLatexCompiler,
+ *   courseSurveyRequired, allowAnonymous, allowAnonymousToPeers, enableCcx,
+ *   forceOnFlexiblePeerOpenassessments, downstreamCustomized, certificatesShowBeforeEnd
+ *
+ * NUMBER (text input, no letters):
+ *   maxAttempts, maxStudentEnrollmentsAllowed, entranceExamMinimumScorePct, daysEarlyForBeta,
+ *   relativeWeeksDue, minimumGradeCredit, upstreamVersion, upstreamVersionDeclined
+ *
+ * ENUM (<select> with fixed options — see ENUM_OPTIONS below):
+ *   showanswer, rerandomize, catalogVisibility, courseVisibility, showCorrectness,
+ *   videoSharingOptions, courseEditMethod, certificatesDisplayBehavior
+ *
+ * STRING (text input):
+ *   displayName, displayCoursenumber, displayOrganization, giturl, staticAssetPath,
+ *   announcement, courseSurveyName, proctoringEscalationEmail, proctoringProvider,
+ *   matlabApiKey, xqaKey, cssClass, enrollmentDomain, cosmeticDisplayPrice,
+ *   advertisedStart, socialSharingUrl, endOfCourseSurveyUrl, discussionLink, language,
+ *   dueDateDisplayFormat, courseImage, bannerImage, videoThumbnailImage, entranceExamId,
+ *   upstream, upstreamDisplayName, topLevelDownstreamParentKey, certNameLong, certNameShort, due
+ *
+ * JSON (CodeMirror editor with JSON syntax highlighting):
+ *   advancedModules, cohortConfig, userPartitions, ltiPassports, discussionBlackouts,
+ *   discussionTopics, discussionsSettings, teamsConfiguration, certHtmlViewOverrides,
+ *   certificates, instructorInfo, htmlTextbooks, pdfTextbooks, videoBumper,
+ *   videoUploadPipeline, courseWideCss, courseWideJs, learningInfo, preRequisiteCourses,
+ *   remoteGradebook, otherCourseSettings, ccxConnector
+ */
+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];
+
+interface EnumOption {
+  value: string;
+  /** English-only fallback. See JSDoc on ENUM_OPTIONS for usage warning. */
+  label: string;
+}
+
+/**
+ * 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, EnumOption[]> = {
+  showanswer: [
+    { 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)' },
+  ],
+  rerandomize: [
+    { value: 'never', label: 'Never' },
+    { value: 'always', label: 'Always' },
+    { value: 'onreset', label: 'On reset' },
+    { value: 'per_student', label: 'Per student' },
+  ],
+  catalogVisibility: [
+    { value: 'both', label: 'Both (catalog and about page)' },
+    { value: 'about', label: 'About page only' },
+    { value: 'none', label: 'None' },
+  ],
+  courseVisibility: [
+    { value: 'private', label: 'Private' },
+    { value: 'public', label: 'Public' },
+    { value: 'public_outline', label: 'Public outline' },
+  ],
+  showCorrectness: [
+    { value: 'always', label: 'Always' },
+    { value: 'never', label: 'Never' },
+    { value: 'past_due', label: 'Past due' },
+  ],
+  videoSharingOptions: [
+    { value: 'per-video', label: 'Per video' },
+    { value: 'all-on', label: 'All on' },
+    { value: 'all-off', label: 'All off' },
+  ],
+  courseEditMethod: [
+    { value: 'Studio', label: 'Studio' },
+    { value: 'XML', label: 'XML' },
+  ],
+  certificatesDisplayBehavior: [
+    { value: 'end', label: 'End of course' },
+    { value: 'early_no_info', label: 'Early (no info)' },
+    { value: 'early_with_info', label: 'Early (with info)' },
+  ],
+};
+
+/**
+ * Explicit key → type overrides.
+ * Used when the runtime value could be null/empty but the field has a known type.
+ */
+const NUMBER_KEYS = new Set([
+  'maxAttempts', 'maxStudentEnrollmentsAllowed', 'entranceExamMinimumScorePct',
+  'daysEarlyForBeta', 'relativeWeeksDue', 'minimumGradeCredit',
+  'upstreamVersion', 'upstreamVersionDeclined',
+]);
+
+const BOOLEAN_KEYS = new Set([
+  'certHtmlViewEnabled', 'selfPaced', 'enableTimedExams', 'enableProctoredExams',
+  'showResetButton', 'mobileAvailable', 'invitationOnly', 'isNew', 'noGrade',
+  'highlightsEnabledForMessaging', 'allowUnsupportedXblocks', 'allowProctoringOptOut',
+  'createZendeskTickets', 'enableSubsectionGating', 'entranceExamEnabled',
+  'allowPublicWikiAccess', 'disableProgressGraph', 'showCalculator', 'hideProgressTab',
+  'edxnotes', 'videoAutoAdvance', 'videoSpeedOptimizations', 'useLatexCompiler',
+  'courseSurveyRequired', 'allowAnonymous', 'allowAnonymousToPeers', 'enableCcx',
+  'forceOnFlexiblePeerOpenassessments', 'downstreamCustomized', 'certificatesShowBeforeEnd',
+]);
+
+/**
+ * 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..5518b81585
--- /dev/null
+++ b/src/advanced-settings/data/settingsCategories.ts
@@ -0,0 +1,199 @@
+/**
+ * Maps each advanced setting key (camelCase, as returned by the API)
+ * to its display category.
+ *
+ * Settings not present in this map will fall into the "Other" category.
+ */
+export const SETTINGS_CATEGORY_MAP: Record<string, string> = {
+  // ── General Setting ──────────────────────────────────────────────────────
+  displayName: 'General Setting',
+  displayCoursenumber: 'General Setting',
+  displayOrganization: 'General Setting',
+  maxStudentEnrollmentsAllowed: 'General Setting',
+  enableSubsectionGating: 'General Setting',
+  language: 'General Setting',
+  cohortConfig: 'General Setting',
+  courseEditMethod: 'General Setting',
+  entranceExamEnabled: 'General Setting',
+  entranceExamId: 'General Setting',
+  entranceExamMinimumScorePct: 'General Setting',
+  highlightsEnabledForMessaging: 'General Setting',
+  preRequisiteCourses: 'General Setting',
+  userPartitions: 'General Setting',
+
+  // ── Content Blocks ────────────────────────────────────────────────────────
+  advancedModules: 'Content Blocks',
+  useLatexCompiler: 'Content Blocks',
+  videoSpeedOptimizations: 'Content Blocks',
+  forceOnFlexiblePeerOpenassessments: 'Content Blocks',
+  ltiPassports: 'Content Blocks',
+  matlabApiKey: 'Content Blocks',
+  maxAttempts: 'Content Blocks',
+  rerandomize: 'Content Blocks',
+  showanswer: 'Content Blocks',
+  showResetButton: 'Content Blocks',
+  videoSharingOptions: 'Content Blocks',
+  videoUploadPipeline: 'Content Blocks',
+  videoAutoAdvance: 'Content Blocks',
+  videoBumper: 'Content Blocks',
+  allowUnsupportedXblocks: 'Content Blocks',
+
+  // ── Grading ───────────────────────────────────────────────────────────────
+  noGrade: 'Grading',
+  dueDateDisplayFormat: 'Grading',
+  remoteGradebook: 'Grading',
+  minimumGradeCredit: 'Grading',
+  showCorrectness: 'Grading',
+
+  // ── Schedule ──────────────────────────────────────────────────────────────
+  due: 'Schedule',
+  relativeWeeksDue: 'Schedule',
+  selfPaced: 'Schedule',
+
+  // ── Certificates ─────────────────────────────────────────────────────────
+  certNameLong: 'Certificates',
+  certNameShort: 'Certificates',
+  certHtmlViewOverrides: 'Certificates',
+  certHtmlViewEnabled: 'Certificates',
+  certificates: 'Certificates',
+  certificatesDisplayBehavior: 'Certificates',
+  certificatesShowBeforeEnd: 'Certificates',
+
+  // ── Enrollment Page ───────────────────────────────────────────────────────
+  cosmeticDisplayPrice: 'Enrollment Page',
+  courseImage: 'Enrollment Page',
+  advertisedStart: 'Enrollment Page',
+  announcement: 'Enrollment Page',
+  bannerImage: 'Enrollment Page',
+  isNew: 'Enrollment Page',
+  learningInfo: 'Enrollment Page',
+  videoThumbnailImage: 'Enrollment Page',
+  catalogVisibility: 'Enrollment Page',
+  invitationOnly: 'Enrollment Page',
+  courseSurveyName: 'Enrollment Page',
+  courseSurveyRequired: 'Enrollment Page',
+  courseVisibility: 'Enrollment Page',
+  endOfCourseSurveyUrl: 'Enrollment Page',
+  socialSharingUrl: 'Enrollment Page',
+
+  // ── Pages & Resources ─────────────────────────────────────────────────────
+  allowPublicWikiAccess: 'Pages & Resources',
+  disableProgressGraph: 'Pages & Resources',
+  htmlTextbooks: 'Pages & Resources',
+  showCalculator: 'Pages & Resources',
+  teamsConfiguration: 'Pages & Resources',
+  edxnotes: 'Pages & Resources',
+  hideProgressTab: 'Pages & Resources',
+  pdfTextbooks: 'Pages & Resources',
+  discussionLink: 'Pages & Resources',
+  discussionsSettings: 'Pages & Resources',
+
+  // ── Special Exams ─────────────────────────────────────────────────────────
+  allowProctoringOptOut: 'Special Exams',
+  createZendeskTickets: 'Special Exams',
+  enableProctoredExams: 'Special Exams',
+  enableTimedExams: 'Special Exams',
+  proctoringProvider: 'Special Exams',
+  proctoringEscalationEmail: 'Special Exams',
+
+  // ── Mobile ────────────────────────────────────────────────────────────────
+  mobileAvailable: 'Mobile',
+
+  // ── Instructors ───────────────────────────────────────────────────────────
+  instructorInfo: 'Instructors',
+
+  // ── Legacy Discussion ─────────────────────────────────────────────────────
+  discussionBlackouts: 'Legacy Discussion',
+  allowAnonymous: 'Legacy Discussion',
+  allowAnonymousToPeers: 'Legacy Discussion',
+  discussionTopics: 'Legacy Discussion',
+
+  // ── Libraries ─────────────────────────────────────────────────────────────
+  upstream: 'Libraries',
+  upstreamDisplayName: 'Libraries',
+  upstreamVersion: 'Libraries',
+  upstreamVersionDeclined: 'Libraries',
+  downstreamCustomized: 'Libraries',
+  topLevelDownstreamParentKey: 'Libraries',
+
+  // ── Other ─────────────────────────────────────────────────────────────────
+  courseWideCss: 'Other',
+  courseWideJs: 'Other',
+  daysEarlyForBeta: 'Other',
+  enrollmentDomain: 'Other',
+  staticAssetPath: 'Other',
+  giturl: 'Other',
+  enableCcx: 'Other',
+  ccxConnector: 'Other',
+  cssClass: 'Other',
+  otherCourseSettings: 'Other',
+  xqaKey: 'Other',
+};
+
+/**
+ * Display order for categories in the UI.
+ * Categories not listed here will appear after these, alphabetically.
+ */
+export const CATEGORY_ORDER: string[] = [
+  'General Setting',
+  'Content Blocks',
+  'Grading',
+  'Schedule',
+  'Certificates',
+  'Enrollment Page',
+  'Pages & Resources',
+  'Special Exams',
+  'Mobile',
+  'Instructors',
+  'Legacy Discussion',
+  'Libraries',
+  'Other',
+];
+
+/**
+ * Fallback category for settings not present in SETTINGS_CATEGORY_MAP.
+ */
+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';
+
+/**
+ * Subcategory map for Content Blocks settings.
+ * Maps each setting key to its subcategory label.
+ */
+export const CONTENT_BLOCKS_SUBCATEGORY_MAP: Record<string, string> = {
+  // Settings
+  advancedModules: 'Settings',
+  ltiPassports: 'Settings',
+  allowUnsupportedXblocks: 'Settings',
+
+  // Problems
+  maxAttempts: 'Problems',
+  rerandomize: 'Problems',
+  showanswer: 'Problems',
+  showResetButton: 'Problems',
+  forceOnFlexiblePeerOpenassessments: 'Problems',
+  useLatexCompiler: 'Problems',
+  matlabApiKey: 'Problems',
+
+  // Video
+  videoSpeedOptimizations: 'Video',
+  videoSharingOptions: 'Video',
+  videoUploadPipeline: 'Video',
+  videoAutoAdvance: 'Video',
+  videoBumper: 'Video',
+};
+
+export const CONTENT_BLOCKS_SUBCATEGORY_ORDER: string[] = ['Settings', 'Problems', 'Video'];
diff --git a/src/advanced-settings/data/types.ts b/src/advanced-settings/data/types.ts
new file mode 100644
index 0000000000..e36a0f5f8f
--- /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/scss/AdvancedSettings.scss b/src/advanced-settings/scss/AdvancedSettings.scss
index e973e11cee..b8eef7ecdb 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,13 +19,48 @@
     }
   }
 
-  .setting-card {
-    margin-bottom: 1.75rem;
+  // Section is now a Card; individual setting rows replace per-setting Cards
+  .settings-section {
+    overflow: hidden;
+  }
 
-    .pgn__card-header .pgn__card-header-title-md {
-      font-size: 1.125rem;
-    }
+  .sub-header {
+    padding-bottom: 1.5rem;
+  }
+}
+
+.settings-filters {
+  flex-wrap: wrap;
+  gap: .75rem;
+
+  .settings-filters-search {
+    width: 280px;
   }
+
+}
+
+.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-title {
+  font: normal var(--pgn-typography-font-weight-bold) 1.125rem/1.5rem var(--pgn-typography-font-family-base);
+  color: var(--pgn-color-headings-base);
+}
+
+.settings-section-icon {
+  color: var(--pgn-color-gray-500);
+  flex-shrink: 0;
 }
 
 .alert-toast {
@@ -40,26 +76,44 @@
 }
 
 .setting-items-list {
-  li {
-    list-style: none;
-  }
+  list-style: none;
+}
 
-  .form-control {
-    min-height: 2.75rem;
-    flex-grow: 1;
+.subcategory-header {
+  list-style: none;
+
+  .subcategory-header-title {
+    font-size: 1rem;
+    font-weight: var(--pgn-typography-font-weight-bold);
+    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 {
+  list-style: none;
+  border-left: 3px solid var(--pgn-color-primary-300);
+  margin-left: 2rem;
+  margin-right: 1rem;
+  margin-bottom: .5rem;
+}
+
+.display-overrides-blocked-message {
+  font-size: .8125rem;
+  color: var(--pgn-color-danger-500);
+}
+
+.setting-row {
+  .setting-row-name {
+    font-size: .9375rem;
   }
 
-  .pgn__card-header-content {
-    margin-top: 1.438rem;
-    margin-bottom: 1.438rem;
+  .form-control {
+    min-height: 2.75rem;
+    flex-grow: 1;
   }
 }
 
diff --git a/src/advanced-settings/setting-card/SettingCard.test.jsx b/src/advanced-settings/setting-card/SettingCard.test.jsx
index cb2fd25aba..98be16c57a 100644
--- a/src/advanced-settings/setting-card/SettingCard.test.jsx
+++ b/src/advanced-settings/setting-card/SettingCard.test.jsx
@@ -17,14 +17,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 +36,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 +55,7 @@ describe('<SettingCard />', () => {
           showSaveSettingsPrompt={showSaveSettingsPrompt}
           settingData={deprecatedSettingData}
           handleBlur={handleBlur}
-          isEditable={false}
+          isEditableState={false}
           saveSettingsPrompt
         />
       </IntlProvider>,
@@ -77,8 +69,8 @@ describe('<SettingCard />', () => {
   });
   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..6a3bef6ccd 100644
--- a/src/advanced-settings/setting-card/SettingCard.tsx
+++ b/src/advanced-settings/setting-card/SettingCard.tsx
@@ -1,20 +1,27 @@
 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 from './inputs/BooleanInput';
+import NumberInput from './inputs/NumberInput';
+import EnumInput from './inputs/EnumInput';
+import StringInput from './inputs/StringInput';
+import JsonInput from './inputs/JsonInput';
 
 const SettingCard = ({
   name,
@@ -33,20 +40,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 +79,128 @@ 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="ml-1 mr-1">
+              {intl.formatMessage(messages.deprecated)}
+            </Badge>
+          )}
+          <IconButton
+            ref={setTarget}
+            onClick={open}
+            src={InfoOutline}
+            iconAs={Icon}
+            alt={intl.formatMessage(messages.helpButtonText)}
+            variant="primary"
+            size="sm"
+            className="flex-shrink-0"
           />
-          <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..46c4593c6b
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
@@ -0,0 +1,36 @@
+import { render, fireEvent, initializeMocks } from '@src/testUtils';
+import BooleanInput from './BooleanInput';
+
+// 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
+  <BooleanInput name="selfPaced" displayName="Self Paced" {...(props as any)} />,
+);
+
+describe('<BooleanInput />', () => {
+  beforeEach(() => { initializeMocks(); });
+
+  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', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: false, onChange });
+    fireEvent.click(getByRole('switch'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onChange with false when toggled from true', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: true, onChange });
+    fireEvent.click(getByRole('switch'));
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+});
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..5ac156bf0b
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
@@ -0,0 +1,22 @@
+import { Form } from '@openedx/paragon';
+
+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..ddda04f4ec
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
@@ -0,0 +1,39 @@
+import { render, fireEvent, initializeMocks } from '@src/testUtils';
+import EnumInput from './EnumInput';
+import { ENUM_OPTIONS } from '../../data/fieldTypes';
+
+// 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
+  <EnumInput name="showanswer" displayName="Show Answer" {...(props as any)} />,
+);
+
+describe('<EnumInput />', () => {
+  beforeEach(() => { initializeMocks(); });
+
+  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', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 'always', onChange });
+    fireEvent.change(getByRole('combobox'), { target: { value: 'never' } });
+    expect(onChange).toHaveBeenCalledWith('never');
+  });
+
+  it('calls onChange only once per change event', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 'always', onChange });
+    fireEvent.change(getByRole('combobox'), { target: { value: 'past_due' } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+});
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..54d6592c40
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.tsx
@@ -0,0 +1,40 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ENUM_OPTIONS } from '../../data/fieldTypes';
+import { ENUM_LABEL_MESSAGES } from '../../data/fieldTypeMessages';
+
+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 (
+    <select
+      className="form-control"
+      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>
+        );
+      })}
+    </select>
+  );
+};
+
+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..417a1f8811
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
@@ -0,0 +1,104 @@
+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;
+
+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 = { of: jest.fn(() => ({})) };
+  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;
+  });
+
+  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();
+  });
+});
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..ce6c7b5f4f
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/JsonInput.tsx
@@ -0,0 +1,80 @@
+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..a10d03cb00
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
@@ -0,0 +1,59 @@
+import { render, fireEvent, initializeMocks } from '@src/testUtils';
+import NumberInput from './NumberInput';
+
+// 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
+  <NumberInput name="maxAttempts" displayName="Maximum Attempts" onBlur={jest.fn()} {...(props as any)} />,
+);
+
+describe('<NumberInput />', () => {
+  beforeEach(() => { initializeMocks(); });
+
+  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', () => {
+    const onBlur = jest.fn();
+    const { getByRole } = renderInput({ value: 3, onChange: jest.fn(), onBlur });
+    fireEvent.blur(getByRole('textbox'));
+    expect(onBlur).toHaveBeenCalled();
+  });
+});
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..8e1c85c876
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.tsx
@@ -0,0 +1,37 @@
+import { ChangeEvent } from 'react';
+import { Form } from '@openedx/paragon';
+
+interface NumberInputProps {
+  value?: number | string;
+  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..df0218747d
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
@@ -0,0 +1,51 @@
+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 />', () => {
+  beforeEach(() => { initializeMocks(); });
+
+  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', () => {
+    const onBlur = jest.fn();
+    const { getByRole } = renderInput({ value: 'My Course', onChange: jest.fn(), onBlur });
+    fireEvent.blur(getByRole('textbox'));
+    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();
+  });
+});
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..be15f0086e
--- /dev/null
+++ b/src/advanced-settings/setting-card/inputs/StringInput.tsx
@@ -0,0 +1,26 @@
+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/settings-filters/SettingsFilters.test.tsx b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
new file mode 100644
index 0000000000..bce630eaab
--- /dev/null
+++ b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
@@ -0,0 +1,79 @@
+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 />', () => {
+  beforeEach(() => { initializeMocks(); });
+
+  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', () => {
+    const onExpandAllChange = jest.fn();
+    const { getByText } = renderFilters({ expandAll: true, onExpandAllChange });
+    fireEvent.click(getByText(messages.collapseAll.defaultMessage));
+    expect(onExpandAllChange).toHaveBeenCalledWith(false);
+  });
+
+  it('calls onExpandAllChange with true when "Expand all" is clicked', () => {
+    const onExpandAllChange = jest.fn();
+    const { getByText } = renderFilters({ expandAll: false, onExpandAllChange });
+    fireEvent.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', () => {
+    const onDeprecatedChange = jest.fn();
+    const { getByText } = renderFilters({ showDeprecated: false, onDeprecatedChange });
+    fireEvent.click(getByText(messages.showDeprecated.defaultMessage));
+    expect(onDeprecatedChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onDeprecatedChange with false when "Hide deprecated" is clicked', () => {
+    const onDeprecatedChange = jest.fn();
+    const { getByText } = renderFilters({ showDeprecated: true, onDeprecatedChange });
+    fireEvent.click(getByText(messages.hideDeprecated.defaultMessage));
+    expect(onDeprecatedChange).toHaveBeenCalledWith(false);
+  });
+});
diff --git a/src/advanced-settings/settings-filters/SettingsFilters.tsx b/src/advanced-settings/settings-filters/SettingsFilters.tsx
new file mode 100644
index 0000000000..21c03938ea
--- /dev/null
+++ b/src/advanced-settings/settings-filters/SettingsFilters.tsx
@@ -0,0 +1,58 @@
+import { Button, Icon, SearchField } 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 (
+    <div className="settings-filters d-flex align-items-center gap-3 mb-4">
+      <div className="settings-filters-search">
+        <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"
+        />
+      </div>
+      <Button
+        variant="outline-primary"
+        onClick={() => onExpandAllChange(!expandAll)}
+      >
+        <Icon src={expandAll ? CloseFullscreen : OpenInFull} className="mr-1" />
+        {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>
+    </div>
+  );
+};
+
+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..423837edf2
--- /dev/null
+++ b/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
@@ -0,0 +1,112 @@
+import { render, fireEvent, 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 />', () => {
+  beforeEach(() => { initializeMocks(); });
+
+  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', () => {
+    const { getByRole, getByTestId } = renderOverrides([
+      emptyEntry('displayName'),
+    ]);
+    fireEvent.click(getByRole('switch'));
+    expect(getByTestId('setting-card-displayName')).toBeInTheDocument();
+  });
+
+  it('shows the blocked message when trying to disable the toggle while fields have content', () => {
+    const { getByRole, getByText } = renderOverrides([
+      filledEntry('displayName'),
+      emptyEntry('displayCoursenumber'),
+    ]);
+    // Toggle is currently on — try to turn it off
+    fireEvent.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', () => {
+    const { getByRole, queryByTestId } = renderOverrides([
+      emptyEntry('displayName'),
+    ]);
+    // Enable first
+    fireEvent.click(getByRole('switch'));
+    expect(queryByTestId('setting-card-displayName')).toBeInTheDocument();
+    // Disable — should work because no content
+    fireEvent.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..771930891d
--- /dev/null
+++ b/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
@@ -0,0 +1,128 @@
+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)}
+              variant="primary"
+              size="sm"
+              className="flex-shrink-0"
+            />
+            <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 mt-0 mb-0">
+            {intl.formatMessage(messages.courseDisplayOverridesBlockedMessage)}
+          </p>
+        )}
+      </li>
+
+      {isEnabled && (
+        <li className="display-overrides-nested-fields">
+          <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..cb20a89180
--- /dev/null
+++ b/src/advanced-settings/settings-section/SettingsSection.test.tsx
@@ -0,0 +1,102 @@
+import { render, fireEvent, initializeMocks } from '@src/testUtils';
+import SettingsSection 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>
+)));
+
+const defaultProps = {
+  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 },
+];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderSection = (props: Record<string, any> = {}) => render(
+  <SettingsSection
+    {...defaultProps}
+    {...props}
+  />,
+);
+
+describe('<SettingsSection />', () => {
+  beforeEach(() => { initializeMocks(); });
+
+  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', () => {
+    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
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  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..17ef750fab
--- /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;
+};
+
+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 mb-2">
+                {SUBCATEGORY_MESSAGE_MAP[subcat]
+                  ? intl.formatMessage(SUBCATEGORY_MESSAGE_MAP[subcat])
+                  : subcat}
+              </p>
+              <hr className="subcategory-header-divider mt-0 mb-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 w-100 p-0 border-0 bg-transparent text-left">
+          <div className="d-flex align-items-center justify-content-between px-4 py-3">
+            <h3 className="settings-section-title 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;

From e59aea0c06d7fc65231329b741eaaaaa2baaff06 Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Wed, 22 Apr 2026 22:00:33 -0500
Subject: [PATCH 02/10] fix: apply dprint formatting and fix i18n template
 literal in messages.ts

- Run dprint fmt on all new advanced-settings files to comply with the
  project's code formatting configuration
- Fix i18n extraction error in src/generic/create-or-rerun-course/messages.ts:
  replace template literal defaultMessage with FormatJS {maxLength} placeholder;
  update hooks.jsx to pass maxLength value at runtime; update test assertion
---
 .../AdvancedSettings.test.tsx                 | 33 +++++++------
 src/advanced-settings/AdvancedSettings.tsx    |  4 +-
 .../data/fieldTypeMessages.ts                 | 20 +++++---
 src/advanced-settings/data/fieldTypes.test.ts | 10 +++-
 src/advanced-settings/data/fieldTypes.ts      | 49 ++++++++++++++-----
 src/advanced-settings/data/types.ts           |  2 +-
 .../setting-card/SettingCard.tsx              |  4 +-
 .../setting-card/inputs/BooleanInput.test.tsx | 13 +++--
 .../setting-card/inputs/BooleanInput.tsx      |  5 +-
 .../setting-card/inputs/EnumInput.test.tsx    | 13 +++--
 .../setting-card/inputs/EnumInput.tsx         |  5 +-
 .../setting-card/inputs/JsonInput.test.tsx    |  4 +-
 .../setting-card/inputs/JsonInput.tsx         | 13 +++--
 .../setting-card/inputs/NumberInput.test.tsx  | 13 +++--
 .../setting-card/inputs/NumberInput.tsx       |  7 ++-
 .../setting-card/inputs/StringInput.test.tsx  | 13 +++--
 .../setting-card/inputs/StringInput.tsx       |  7 ++-
 .../settings-filters/SettingsFilters.test.tsx | 27 +++++-----
 .../CourseDisplayOverrides.test.tsx           | 36 +++++++++-----
 .../CourseDisplayOverrides.tsx                |  6 ++-
 .../settings-section/SettingsSection.test.tsx | 24 +++++----
 .../settings-section/SettingsSection.tsx      |  2 +-
 .../CreateOrRerunCourseForm.test.jsx          |  2 +-
 src/generic/create-or-rerun-course/hooks.jsx  |  4 +-
 .../create-or-rerun-course/messages.ts        |  3 +-
 25 files changed, 211 insertions(+), 108 deletions(-)

diff --git a/src/advanced-settings/AdvancedSettings.test.tsx b/src/advanced-settings/AdvancedSettings.test.tsx
index ceabd89fc2..53d04c6151 100644
--- a/src/advanced-settings/AdvancedSettings.test.tsx
+++ b/src/advanced-settings/AdvancedSettings.test.tsx
@@ -16,14 +16,15 @@ import filterMessages from './settings-filters/messages';
 
 // 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
-    data-testid="json-input"
-    value={initialValue}
-    onChange={(e) => onChange(e.target.value)}
-    onBlur={onBlur}
-  />
-)));
+jest.mock('./setting-card/inputs/JsonInput', () =>
+  jest.fn(({ initialValue, onChange, onBlur }) => (
+    <textarea
+      data-testid="json-input"
+      value={initialValue}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+    />
+  )));
 
 jest.mock('@src/authz/data/apiHooks', () => ({
   useUserPermissions: jest.fn(),
@@ -65,9 +66,11 @@ describe('<AdvancedSettings />', () => {
 
   it('should render without errors', async () => {
     render();
-    expect(await screen.findByText(messages.headingSubtitle.defaultMessage, {
-      selector: 'small.sub-header-title-subtitle',
-    })).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();
@@ -177,9 +180,11 @@ describe('<AdvancedSettings />', () => {
       data: { canManageAdvancedSettings: true },
     } as unknown as ReturnType<typeof useUserPermissions>);
     render();
-    expect(await screen.findByText(messages.headingSubtitle.defaultMessage, {
-      selector: 'small.sub-header-title-subtitle',
-    })).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();
diff --git a/src/advanced-settings/AdvancedSettings.tsx b/src/advanced-settings/AdvancedSettings.tsx
index 44c349b570..ab24ef76ae 100644
--- a/src/advanced-settings/AdvancedSettings.tsx
+++ b/src/advanced-settings/AdvancedSettings.tsx
@@ -282,7 +282,9 @@ const AdvancedSettings = () => {
                           forceOpen={filterText.trim() !== ''}
                           expandAll={expandAll}
                           subcategoryMap={category === CATEGORY_CONTENT_BLOCKS ? CONTENT_BLOCKS_SUBCATEGORY_MAP : null}
-                          subcategoryOrder={category === CATEGORY_CONTENT_BLOCKS ? CONTENT_BLOCKS_SUBCATEGORY_ORDER : []}
+                          subcategoryOrder={category === CATEGORY_CONTENT_BLOCKS
+                            ? CONTENT_BLOCKS_SUBCATEGORY_ORDER
+                            : []}
                         />
                       ),
                     )}
diff --git a/src/advanced-settings/data/fieldTypeMessages.ts b/src/advanced-settings/data/fieldTypeMessages.ts
index e27d5a6d5e..cb7f42c45a 100644
--- a/src/advanced-settings/data/fieldTypeMessages.ts
+++ b/src/advanced-settings/data/fieldTypeMessages.ts
@@ -31,12 +31,14 @@ const enumOptionMessages = defineMessages({
   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',
+    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',
+    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',
@@ -61,7 +63,8 @@ const enumOptionMessages = defineMessages({
   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',
+    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',
@@ -141,12 +144,14 @@ const enumOptionMessages = defineMessages({
   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',
+    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',
+    description:
+      'Option label for Certificates Display Behavior: certificates are displayed early with additional information shown to learners',
   },
 });
 
@@ -155,7 +160,7 @@ const enumOptionMessages = defineMessages({
  * 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 }>> = {
+export const ENUM_LABEL_MESSAGES: Record<string, Record<string, { id: string; defaultMessage: string; }>> = {
   showanswer: {
     always: enumOptionMessages.always,
     answered: enumOptionMessages.answered,
@@ -349,7 +354,8 @@ export const FIELD_PLACEHOLDER_MESSAGES = defineMessages({
   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)',
+    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',
diff --git a/src/advanced-settings/data/fieldTypes.test.ts b/src/advanced-settings/data/fieldTypes.test.ts
index 57af990701..5154983040 100644
--- a/src/advanced-settings/data/fieldTypes.test.ts
+++ b/src/advanced-settings/data/fieldTypes.test.ts
@@ -77,8 +77,14 @@ describe('serializeValue()', () => {
 describe('ENUM_OPTIONS', () => {
   it('contains options for all 8 enum fields', () => {
     const expectedFields = [
-      'showanswer', 'rerandomize', 'catalogVisibility', 'courseVisibility',
-      'showCorrectness', 'videoSharingOptions', 'courseEditMethod', 'certificatesDisplayBehavior',
+      'showanswer',
+      'rerandomize',
+      'catalogVisibility',
+      'courseVisibility',
+      'showCorrectness',
+      'videoSharingOptions',
+      'courseEditMethod',
+      'certificatesDisplayBehavior',
     ];
     expectedFields.forEach((field) => {
       expect(ENUM_OPTIONS[field]).toBeDefined();
diff --git a/src/advanced-settings/data/fieldTypes.ts b/src/advanced-settings/data/fieldTypes.ts
index 8f6143adc4..397847d573 100644
--- a/src/advanced-settings/data/fieldTypes.ts
+++ b/src/advanced-settings/data/fieldTypes.ts
@@ -113,20 +113,47 @@ export const ENUM_OPTIONS: Record<string, EnumOption[]> = {
  * Used when the runtime value could be null/empty but the field has a known type.
  */
 const NUMBER_KEYS = new Set([
-  'maxAttempts', 'maxStudentEnrollmentsAllowed', 'entranceExamMinimumScorePct',
-  'daysEarlyForBeta', 'relativeWeeksDue', 'minimumGradeCredit',
-  'upstreamVersion', 'upstreamVersionDeclined',
+  'maxAttempts',
+  'maxStudentEnrollmentsAllowed',
+  'entranceExamMinimumScorePct',
+  'daysEarlyForBeta',
+  'relativeWeeksDue',
+  'minimumGradeCredit',
+  'upstreamVersion',
+  'upstreamVersionDeclined',
 ]);
 
 const BOOLEAN_KEYS = new Set([
-  'certHtmlViewEnabled', 'selfPaced', 'enableTimedExams', 'enableProctoredExams',
-  'showResetButton', 'mobileAvailable', 'invitationOnly', 'isNew', 'noGrade',
-  'highlightsEnabledForMessaging', 'allowUnsupportedXblocks', 'allowProctoringOptOut',
-  'createZendeskTickets', 'enableSubsectionGating', 'entranceExamEnabled',
-  'allowPublicWikiAccess', 'disableProgressGraph', 'showCalculator', 'hideProgressTab',
-  'edxnotes', 'videoAutoAdvance', 'videoSpeedOptimizations', 'useLatexCompiler',
-  'courseSurveyRequired', 'allowAnonymous', 'allowAnonymousToPeers', 'enableCcx',
-  'forceOnFlexiblePeerOpenassessments', 'downstreamCustomized', 'certificatesShowBeforeEnd',
+  'certHtmlViewEnabled',
+  'selfPaced',
+  'enableTimedExams',
+  'enableProctoredExams',
+  'showResetButton',
+  'mobileAvailable',
+  'invitationOnly',
+  'isNew',
+  'noGrade',
+  'highlightsEnabledForMessaging',
+  'allowUnsupportedXblocks',
+  'allowProctoringOptOut',
+  'createZendeskTickets',
+  'enableSubsectionGating',
+  'entranceExamEnabled',
+  'allowPublicWikiAccess',
+  'disableProgressGraph',
+  'showCalculator',
+  'hideProgressTab',
+  'edxnotes',
+  'videoAutoAdvance',
+  'videoSpeedOptimizations',
+  'useLatexCompiler',
+  'courseSurveyRequired',
+  'allowAnonymous',
+  'allowAnonymousToPeers',
+  'enableCcx',
+  'forceOnFlexiblePeerOpenassessments',
+  'downstreamCustomized',
+  'certificatesShowBeforeEnd',
 ]);
 
 /**
diff --git a/src/advanced-settings/data/types.ts b/src/advanced-settings/data/types.ts
index e36a0f5f8f..121ba241e1 100644
--- a/src/advanced-settings/data/types.ts
+++ b/src/advanced-settings/data/types.ts
@@ -14,5 +14,5 @@ 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>
+  updater: (prev: Record<string, string>) => Record<string, string>,
 ) => void;
diff --git a/src/advanced-settings/setting-card/SettingCard.tsx b/src/advanced-settings/setting-card/SettingCard.tsx
index 6a3bef6ccd..cc4b08a8d7 100644
--- a/src/advanced-settings/setting-card/SettingCard.tsx
+++ b/src/advanced-settings/setting-card/SettingCard.tsx
@@ -14,7 +14,9 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import {
-  FIELD_TYPE, getFieldType, serializeValue,
+  FIELD_TYPE,
+  getFieldType,
+  serializeValue,
 } from '../data/fieldTypes';
 import { FIELD_PLACEHOLDER_MESSAGES } from '../data/fieldTypeMessages';
 import BooleanInput from './inputs/BooleanInput';
diff --git a/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
index 46c4593c6b..3653b5f251 100644
--- a/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
@@ -2,13 +2,16 @@ import { render, fireEvent, initializeMocks } from '@src/testUtils';
 import BooleanInput from './BooleanInput';
 
 // 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
-  <BooleanInput name="selfPaced" displayName="Self Paced" {...(props as any)} />,
-);
+const renderInput = (props: Record<string, any> = {}) =>
+  render(
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BooleanInput name="selfPaced" displayName="Self Paced" {...(props as any)} />,
+  );
 
 describe('<BooleanInput />', () => {
-  beforeEach(() => { initializeMocks(); });
+  beforeEach(() => {
+    initializeMocks();
+  });
 
   it('renders as checked when value is true', () => {
     const { getByRole } = renderInput({ value: true, onChange: jest.fn() });
diff --git a/src/advanced-settings/setting-card/inputs/BooleanInput.tsx b/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
index 5ac156bf0b..1c39fe67d7 100644
--- a/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
@@ -8,7 +8,10 @@ interface BooleanInputProps {
 }
 
 const BooleanInput = ({
-  value, name, displayName, onChange,
+  value,
+  name,
+  displayName,
+  onChange,
 }: BooleanInputProps) => (
   <Form.Switch
     id={`setting-bool-${name}`}
diff --git a/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
index ddda04f4ec..493e851ffc 100644
--- a/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
@@ -3,13 +3,16 @@ import EnumInput from './EnumInput';
 import { ENUM_OPTIONS } from '../../data/fieldTypes';
 
 // 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
-  <EnumInput name="showanswer" displayName="Show Answer" {...(props as any)} />,
-);
+const renderInput = (props: Record<string, any> = {}) =>
+  render(
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <EnumInput name="showanswer" displayName="Show Answer" {...(props as any)} />,
+  );
 
 describe('<EnumInput />', () => {
-  beforeEach(() => { initializeMocks(); });
+  beforeEach(() => {
+    initializeMocks();
+  });
 
   it('renders the correct options for the given field name', () => {
     const { getAllByRole } = renderInput({ value: 'always', onChange: jest.fn() });
diff --git a/src/advanced-settings/setting-card/inputs/EnumInput.tsx b/src/advanced-settings/setting-card/inputs/EnumInput.tsx
index 54d6592c40..7ccb808492 100644
--- a/src/advanced-settings/setting-card/inputs/EnumInput.tsx
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.tsx
@@ -10,7 +10,10 @@ interface EnumInputProps {
 }
 
 const EnumInput = ({
-  value = '', name, displayName, onChange,
+  value = '',
+  name,
+  displayName,
+  onChange,
 }: EnumInputProps) => {
   const intl = useIntl();
   const options = ENUM_OPTIONS[name] || [];
diff --git a/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
index 417a1f8811..27ed02fc2b 100644
--- a/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
@@ -25,7 +25,7 @@ jest.mock('codemirror', () => {
   }));
   EditorViewMock.theme = jest.fn(() => ({}));
   EditorViewMock.updateListener = { of: jest.fn(() => ({})) };
-  EditorViewMock.domEventHandlers = jest.fn((handlers: { blur: () => void }) => {
+  EditorViewMock.domEventHandlers = jest.fn((handlers: { blur: () => void; }) => {
     registeredBlurHandler = handlers.blur;
     return {};
   });
@@ -34,7 +34,7 @@ jest.mock('codemirror', () => {
 
 jest.mock('@codemirror/state', () => ({
   EditorState: {
-    create: jest.fn(({ doc, extensions }: { doc: string; extensions: unknown[] }) => ({ doc, extensions })),
+    create: jest.fn(({ doc, extensions }: { doc: string; extensions: unknown[]; }) => ({ doc, extensions })),
   },
   Annotation: {
     define: jest.fn(() => ({ of: jest.fn((val: boolean) => ({ type: 'programmatic', val })) })),
diff --git a/src/advanced-settings/setting-card/inputs/JsonInput.tsx b/src/advanced-settings/setting-card/inputs/JsonInput.tsx
index ce6c7b5f4f..a0fa6b23f1 100644
--- a/src/advanced-settings/setting-card/inputs/JsonInput.tsx
+++ b/src/advanced-settings/setting-card/inputs/JsonInput.tsx
@@ -21,7 +21,10 @@ interface JsonInputProps {
 }
 
 const JsonInput = ({
-  initialValue, onChange, onBlur, isEditableState,
+  initialValue,
+  onChange,
+  onBlur,
+  isEditableState,
 }: JsonInputProps) => {
   const divRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
@@ -30,8 +33,12 @@ const JsonInput = ({
 
   // 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(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    onBlurRef.current = onBlur;
+  }, [onBlur]);
 
   useEffect(() => {
     if (!divRef.current) { return undefined; }
diff --git a/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
index a10d03cb00..563e7a51fc 100644
--- a/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
@@ -2,13 +2,16 @@ import { render, fireEvent, initializeMocks } from '@src/testUtils';
 import NumberInput from './NumberInput';
 
 // 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
-  <NumberInput name="maxAttempts" displayName="Maximum Attempts" onBlur={jest.fn()} {...(props as any)} />,
-);
+const renderInput = (props: Record<string, any> = {}) =>
+  render(
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <NumberInput name="maxAttempts" displayName="Maximum Attempts" onBlur={jest.fn()} {...(props as any)} />,
+  );
 
 describe('<NumberInput />', () => {
-  beforeEach(() => { initializeMocks(); });
+  beforeEach(() => {
+    initializeMocks();
+  });
 
   it('renders with the correct numeric value', () => {
     const { getByRole } = renderInput({ value: 3, onChange: jest.fn() });
diff --git a/src/advanced-settings/setting-card/inputs/NumberInput.tsx b/src/advanced-settings/setting-card/inputs/NumberInput.tsx
index 8e1c85c876..d4454aae44 100644
--- a/src/advanced-settings/setting-card/inputs/NumberInput.tsx
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.tsx
@@ -11,7 +11,12 @@ interface NumberInputProps {
 }
 
 const NumberInput = ({
-  value = '', name, displayName, onChange, onBlur, placeholder = '',
+  value = '',
+  name,
+  displayName,
+  onChange,
+  onBlur,
+  placeholder = '',
 }: NumberInputProps) => {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const filtered = e.target.value.replace(/[^0-9.-]/g, '');
diff --git a/src/advanced-settings/setting-card/inputs/StringInput.test.tsx b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
index df0218747d..3e9f9fbbb7 100644
--- a/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
@@ -2,13 +2,16 @@ 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)} />,
-);
+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 />', () => {
-  beforeEach(() => { initializeMocks(); });
+  beforeEach(() => {
+    initializeMocks();
+  });
 
   it('renders with the correct value', () => {
     const { getByRole } = renderInput({ value: 'My Course', onChange: jest.fn() });
diff --git a/src/advanced-settings/setting-card/inputs/StringInput.tsx b/src/advanced-settings/setting-card/inputs/StringInput.tsx
index be15f0086e..3670f6b5d7 100644
--- a/src/advanced-settings/setting-card/inputs/StringInput.tsx
+++ b/src/advanced-settings/setting-card/inputs/StringInput.tsx
@@ -10,7 +10,12 @@ interface StringInputProps {
 }
 
 const StringInput = ({
-  value = '', name, displayName, onChange, onBlur, placeholder = '',
+  value = '',
+  name,
+  displayName,
+  onChange,
+  onBlur,
+  placeholder = '',
 }: StringInputProps) => (
   <Form.Control
     type="text"
diff --git a/src/advanced-settings/settings-filters/SettingsFilters.test.tsx b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
index bce630eaab..31239f38c6 100644
--- a/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
+++ b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
@@ -2,20 +2,23 @@ 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}
-  />,
-);
+const renderFilters = (props = {}) =>
+  render(
+    <SettingsFilters
+      filterText=""
+      onFilterChange={jest.fn()}
+      showDeprecated={false}
+      onDeprecatedChange={jest.fn()}
+      expandAll
+      onExpandAllChange={jest.fn()}
+      {...props}
+    />,
+  );
 
 describe('<SettingsFilters />', () => {
-  beforeEach(() => { initializeMocks(); });
+  beforeEach(() => {
+    initializeMocks();
+  });
 
   it('renders the search field', () => {
     const { getByRole } = renderFilters({});
diff --git a/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx b/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
index 423837edf2..95d040579e 100644
--- a/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
+++ b/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
@@ -4,15 +4,22 @@ 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>
-)));
+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,
+  displayName: name,
+  value: '',
+  help: '',
+  deprecated: false,
 }];
 const filledEntry = (name: string): SettingEntry => [name, {
-  displayName: name, value: 'My Course', help: '', deprecated: false,
+  displayName: name,
+  value: 'My Course',
+  help: '',
+  deprecated: false,
 }];
 
 const defaultProps = {
@@ -24,16 +31,19 @@ const defaultProps = {
   setIsEditableState: jest.fn(),
 };
 
-const renderOverrides = (displaySettingsEntries: SettingEntry[], props = {}) => render(
-  <CourseDisplayOverrides
-    {...defaultProps}
-    displaySettingsEntries={displaySettingsEntries}
-    {...props}
-  />,
-);
+const renderOverrides = (displaySettingsEntries: SettingEntry[], props = {}) =>
+  render(
+    <CourseDisplayOverrides
+      {...defaultProps}
+      displaySettingsEntries={displaySettingsEntries}
+      {...props}
+    />,
+  );
 
 describe('<CourseDisplayOverrides />', () => {
-  beforeEach(() => { initializeMocks(); });
+  beforeEach(() => {
+    initializeMocks();
+  });
 
   it('renders the Course Display Overrides label', () => {
     const { getByText } = renderOverrides([emptyEntry('displayName')]);
diff --git a/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx b/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
index 771930891d..2da8e9cc97 100644
--- a/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
+++ b/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react';
 import {
-  Form, Icon, IconButton, ModalPopup, useToggle,
+  Form,
+  Icon,
+  IconButton,
+  ModalPopup,
+  useToggle,
 } from '@openedx/paragon';
 import { InfoOutline } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
diff --git a/src/advanced-settings/settings-section/SettingsSection.test.tsx b/src/advanced-settings/settings-section/SettingsSection.test.tsx
index cb20a89180..25030b6bfe 100644
--- a/src/advanced-settings/settings-section/SettingsSection.test.tsx
+++ b/src/advanced-settings/settings-section/SettingsSection.test.tsx
@@ -4,9 +4,10 @@ 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>
-)));
+jest.mock(
+  '../setting-card/SettingCard',
+  () => jest.fn(({ name }: { name: string; }) => <div data-testid={`setting-card-${name}`}>{name}</div>),
+);
 
 const defaultProps = {
   category: 'Grading',
@@ -26,15 +27,18 @@ const makeEntry = (name: string, deprecated = false): SettingEntry => [
 ];
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const renderSection = (props: Record<string, any> = {}) => render(
-  <SettingsSection
-    {...defaultProps}
-    {...props}
-  />,
-);
+const renderSection = (props: Record<string, any> = {}) =>
+  render(
+    <SettingsSection
+      {...defaultProps}
+      {...props}
+    />,
+  );
 
 describe('<SettingsSection />', () => {
-  beforeEach(() => { initializeMocks(); });
+  beforeEach(() => {
+    initializeMocks();
+  });
 
   it('renders the category title', () => {
     const { getByText } = renderSection({
diff --git a/src/advanced-settings/settings-section/SettingsSection.tsx b/src/advanced-settings/settings-section/SettingsSection.tsx
index 17ef750fab..d590dd73a7 100644
--- a/src/advanced-settings/settings-section/SettingsSection.tsx
+++ b/src/advanced-settings/settings-section/SettingsSection.tsx
@@ -40,7 +40,7 @@ const CATEGORY_MESSAGE_MAP = {
   [CATEGORY_OTHER]: messages.categoryOther,
 };
 
-const SUBCATEGORY_MESSAGE_MAP: Record<string, { id: string; defaultMessage: string }> = {
+const SUBCATEGORY_MESSAGE_MAP: Record<string, { id: string; defaultMessage: string; }> = {
   Settings: messages.subcategorySettings,
   Problems: messages.subcategoryProblems,
   Video: messages.subcategoryVideo,
diff --git a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
index 982c5a4008..81e8fd3bde 100644
--- a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
+++ b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
@@ -226,7 +226,7 @@ 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..be5c6dc34a 100644
--- a/src/generic/create-or-rerun-course/hooks.jsx
+++ b/src/generic/create-or-rerun-course/hooks.jsx
@@ -60,10 +60,10 @@ const useCreateOrRerunCourse = (initialValues) => {
         intl.formatMessage(messages.disallowedCharsError),
       )
       .matches(noSpaceRule, intl.formatMessage(messages.noSpaceError)),
-  }).test(TOTAL_LENGTH_KEY, intl.formatMessage(messages.totalLengthError), function validateTotalLength() {
+  }).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) });
+      return this.createError({ path: TOTAL_LENGTH_KEY, message: intl.formatMessage(messages.totalLengthError, { maxLength: MAX_TOTAL_LENGTH }) });
     }
     return true;
   });
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',

From 66fa33a17cb575cd28dcea068f74dd7920df8e4e Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Wed, 22 Apr 2026 22:07:03 -0500
Subject: [PATCH 03/10] fix: apply dprint formatting to hooks.jsx

---
 src/generic/create-or-rerun-course/hooks.jsx | 21 +++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/generic/create-or-rerun-course/hooks.jsx b/src/generic/create-or-rerun-course/hooks.jsx
index be5c6dc34a..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, { 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;
-  });
+  }).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,

From e639b8afb35733f0cf9e0602a4e3db7936e4ceea Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Wed, 22 Apr 2026 22:12:56 -0500
Subject: [PATCH 04/10] fix: apply dprint formatting to
 CreateOrRerunCourseForm.test.jsx

---
 .../create-or-rerun-course/CreateOrRerunCourseForm.test.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
index 81e8fd3bde..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(`The combined length of the organization, course number and course run fields cannot be more than 65 characters.`)).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          `The combined length of the organization, course number and course run fields cannot be more than 65 characters.`,
+        ),
+      ).toBeInTheDocument();
     });
   });
 

From fcfb41b26f73d5dcde6ef451ed44b66990702831 Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Wed, 22 Apr 2026 22:16:45 -0500
Subject: [PATCH 05/10] fix: correct TypeScript cast for settingsEntries in
 AdvancedSettings

Replace incorrect `as [string, object][]` cast with `as SettingEntry[]`
so the type checker can verify the prop against SettingsSection's expected
type. Also adds the missing `SettingEntry` type import.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/advanced-settings/AdvancedSettings.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/advanced-settings/AdvancedSettings.tsx b/src/advanced-settings/AdvancedSettings.tsx
index ab24ef76ae..6d6ee1bd8c 100644
--- a/src/advanced-settings/AdvancedSettings.tsx
+++ b/src/advanced-settings/AdvancedSettings.tsx
@@ -39,6 +39,7 @@ import {
   CONTENT_BLOCKS_SUBCATEGORY_MAP,
   CONTENT_BLOCKS_SUBCATEGORY_ORDER,
 } from './data/settingsCategories';
+import type { SettingEntry } from './data/types';
 
 const AdvancedSettings = () => {
   const intl = useIntl();
@@ -271,7 +272,7 @@ const AdvancedSettings = () => {
                         <SettingsSection
                           key={category}
                           category={category}
-                          settingsEntries={settingsEntries as [string, object][]}
+                          settingsEntries={settingsEntries as SettingEntry[]}
                           showDeprecated={showDeprecated}
                           showSaveSettingsPrompt={showSaveSettingsPrompt}
                           saveSettingsPrompt={saveSettingsPrompt}

From 486d5890ac16f74ddb07fa398c25a790f4f7d605 Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Thu, 23 Apr 2026 21:14:29 -0500
Subject: [PATCH 06/10] test: improve branch coverage across Advanced Settings
 components

- SettingCard: add tests for boolean, number, enum and JSON input
  rendering; handleImmediateChange for boolean/enum; catch branch in
  getDisplayValue when JSON.parse throws
- SettingsSection: add tests for forceOpen re-expand behaviour and
  CATEGORY_GENERAL_SETTING branch (CourseDisplayOverrides rendering)
- SettingsFilters: add test for onClear callback via form reset
- BooleanInput: add test for displayName || name aria-label fallback
- EnumInput: add tests for onBlur, displayName fallback, null value
  and unknown field name
- StringInput: add tests for default value param, displayName fallback
  and null value
- NumberInput: add tests for default value param and displayName fallback
- JsonInput: capture updateListener callback; add tests for user-driven
  onChange and programmatic dispatch suppression

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../setting-card/SettingCard.test.jsx         | 143 ++++++++++++++++++
 .../setting-card/inputs/BooleanInput.test.tsx |   5 +
 .../setting-card/inputs/EnumInput.test.tsx    |  31 ++++
 .../setting-card/inputs/JsonInput.test.tsx    |  51 ++++++-
 .../setting-card/inputs/NumberInput.test.tsx  |  12 ++
 .../setting-card/inputs/StringInput.test.tsx  |  19 +++
 .../settings-filters/SettingsFilters.test.tsx |  10 ++
 .../settings-section/SettingsSection.test.tsx |  48 ++++++
 8 files changed, 318 insertions(+), 1 deletion(-)

diff --git a/src/advanced-settings/setting-card/SettingCard.test.jsx b/src/advanced-settings/setting-card/SettingCard.test.jsx
index 98be16c57a..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();
@@ -67,6 +71,145 @@ 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 { getByRole } = render(<RootWrapper />);
diff --git a/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
index 3653b5f251..58d55b5568 100644
--- a/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
@@ -36,4 +36,9 @@ describe('<BooleanInput />', () => {
     fireEvent.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/EnumInput.test.tsx b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
index 493e851ffc..b6ead4caf2 100644
--- a/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
@@ -39,4 +39,35 @@ describe('<EnumInput />', () => {
     fireEvent.change(getByRole('combobox'), { target: { value: 'past_due' } });
     expect(onChange).toHaveBeenCalledTimes(1);
   });
+
+  it('calls onChange when the field is blurred', () => {
+    const onChange = jest.fn();
+    const { getByRole } = renderInput({ value: 'always', onChange });
+    fireEvent.blur(getByRole('combobox'));
+    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/JsonInput.test.tsx b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
index 27ed02fc2b..00bbd8a069 100644
--- a/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
@@ -15,6 +15,8 @@ import JsonInput from './JsonInput';
  * `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
@@ -24,7 +26,13 @@ jest.mock('codemirror', () => {
     state: { doc: { length: 0, toString: () => '' } },
   }));
   EditorViewMock.theme = jest.fn(() => ({}));
-  EditorViewMock.updateListener = { of: 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 {};
@@ -47,6 +55,7 @@ describe('<JsonInput />', () => {
   beforeEach(() => {
     initializeMocks();
     registeredBlurHandler = null;
+    capturedUpdateListener = null;
   });
 
   it('calls the latest onBlur after re-renders, not the stale initial one', () => {
@@ -101,4 +110,44 @@ describe('<JsonInput />', () => {
     // 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/NumberInput.test.tsx b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
index 563e7a51fc..b654bbd5ba 100644
--- a/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
@@ -59,4 +59,16 @@ describe('<NumberInput />', () => {
     fireEvent.blur(getByRole('textbox'));
     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/StringInput.test.tsx b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
index 3e9f9fbbb7..9d48886388 100644
--- a/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
@@ -51,4 +51,23 @@ describe('<StringInput />', () => {
     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/settings-filters/SettingsFilters.test.tsx b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
index 31239f38c6..603b91a9dc 100644
--- a/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
+++ b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
@@ -79,4 +79,14 @@ describe('<SettingsFilters />', () => {
     fireEvent.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-section/SettingsSection.test.tsx b/src/advanced-settings/settings-section/SettingsSection.test.tsx
index 25030b6bfe..feea498a2a 100644
--- a/src/advanced-settings/settings-section/SettingsSection.test.tsx
+++ b/src/advanced-settings/settings-section/SettingsSection.test.tsx
@@ -9,6 +9,12 @@ jest.mock(
   () => 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 = {
   category: 'Grading',
   settingsEntries: [] as SettingEntry[],
@@ -94,6 +100,48 @@ describe('<SettingsSection />', () => {
     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')],

From e0ad11156d413d85aa315cf4e56fe42b8b2595e7 Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Thu, 23 Apr 2026 21:29:07 -0500
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20apply=20dprint=20formatting=20to?=
 =?UTF-8?q?=20JsonInput.test.tsx=20(single=20=E2=86=92=20double=20quotes)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/advanced-settings/setting-card/inputs/JsonInput.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
index 00bbd8a069..6c39af0453 100644
--- a/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/JsonInput.test.tsx
@@ -115,7 +115,7 @@ describe('<JsonInput />', () => {
     const onChange = jest.fn();
     render(
       <JsonInput
-        initialValue='[]'
+        initialValue="[]"
         onChange={onChange}
         onBlur={jest.fn()}
         isEditableState={false}
@@ -135,7 +135,7 @@ describe('<JsonInput />', () => {
     const onChange = jest.fn();
     render(
       <JsonInput
-        initialValue='[]'
+        initialValue="[]"
         onChange={onChange}
         onBlur={jest.fn()}
         isEditableState={false}

From 3963d93b13d00cf9c411b8e5ad9f72cc7270a79e Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Fri, 1 May 2026 02:16:16 -0500
Subject: [PATCH 08/10] fix: address PR review comments from PKulkoRaccoonGang
 and bradenmacdonald
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unify settingsCategories + fieldTypes into single settingsConfig.ts source of truth
- Replace custom SCSS with Paragon utility classes (mx-1, my-0, font-weight-bold, etc.)
- Use Paragon Stack component in SettingsFilters instead of manual flex layout
- Use Form.Control as="select" in EnumInput instead of raw <select>
- Use Button iconBefore prop instead of manual Icon child in SettingsFilters
- Remove redundant variant="primary" from IconButton (Paragon default)
- Remove unnecessary CSS classes confirmed to have no visual effect
- Add barrel file inputs/index.ts and import all inputs from it in SettingCard
- Migrate fireEvent → userEvent in all new test files
- Export and use typed interfaces (BooleanInputProps, EnumInputProps,
  NumberInputProps, SettingsSectionProps) in tests instead of Record<string, any>
- Add headerClassName prop to SubHeader for injecting utility classes
- Show Alert when search returns no results
- Add Badge mx-1 shorthand and other margin shorthands throughout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/advanced-settings/AdvancedSettings.tsx    |  19 +-
 src/advanced-settings/data/fieldTypes.ts      | 167 ++--------
 .../data/settingsCategories.ts                | 191 +-----------
 src/advanced-settings/data/settingsConfig.ts  | 288 ++++++++++++++++++
 src/advanced-settings/messages.ts             |   4 +
 .../scss/AdvancedSettings.scss                |  42 ---
 .../setting-card/SettingCard.tsx              |  16 +-
 .../setting-card/inputs/BooleanInput.test.tsx |  29 +-
 .../setting-card/inputs/BooleanInput.tsx      |   2 +-
 .../setting-card/inputs/EnumInput.test.tsx    |  34 ++-
 .../setting-card/inputs/EnumInput.tsx         |   9 +-
 .../setting-card/inputs/NumberInput.test.tsx  |  31 +-
 .../setting-card/inputs/NumberInput.tsx       |   4 +-
 .../setting-card/inputs/StringInput.test.tsx  |   9 +-
 .../setting-card/inputs/index.ts              |   5 +
 .../settings-filters/SettingsFilters.test.tsx |  20 +-
 .../settings-filters/SettingsFilters.tsx      |  36 +--
 .../CourseDisplayOverrides.test.tsx           |  20 +-
 .../CourseDisplayOverrides.tsx                |   6 +-
 .../settings-section/SettingsSection.test.tsx |  17 +-
 .../settings-section/SettingsSection.tsx      |  10 +-
 src/generic/sub-header/SubHeader.tsx          |   4 +-
 22 files changed, 495 insertions(+), 468 deletions(-)
 create mode 100644 src/advanced-settings/data/settingsConfig.ts
 create mode 100644 src/advanced-settings/setting-card/inputs/index.ts

diff --git a/src/advanced-settings/AdvancedSettings.tsx b/src/advanced-settings/AdvancedSettings.tsx
index 6d6ee1bd8c..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,
@@ -255,6 +256,7 @@ const AdvancedSettings = () => {
               <SubHeader
                 subtitle={intl.formatMessage(messages.headingSubtitle)}
                 title={intl.formatMessage(messages.headingTitle)}
+                headerClassName="pb-4"
               />
               <article>
                 <div>
@@ -267,8 +269,17 @@ const AdvancedSettings = () => {
                       expandAll={expandAll}
                       onExpandAllChange={setExpandAll}
                     />
-                    {Object.entries(groupSettingsByCategory(advancedSettingsData, filterText)).map(
-                      ([category, settingsEntries]) => (
+                    {(() => {
+                      const grouped = groupSettingsByCategory(advancedSettingsData, filterText);
+                      const entries = Object.entries(grouped);
+                      if (filterText.trim() && entries.length === 0) {
+                        return (
+                          <Alert variant="info">
+                            {intl.formatMessage(messages.noSearchResults, { query: filterText.trim() })}
+                          </Alert>
+                        );
+                      }
+                      return entries.map(([category, settingsEntries]) => (
                         <SettingsSection
                           key={category}
                           category={category}
@@ -287,8 +298,8 @@ const AdvancedSettings = () => {
                             ? CONTENT_BLOCKS_SUBCATEGORY_ORDER
                             : []}
                         />
-                      ),
-                    )}
+                      ));
+                    })()}
                   </section>
                 </div>
               </article>
diff --git a/src/advanced-settings/data/fieldTypes.ts b/src/advanced-settings/data/fieldTypes.ts
index 397847d573..845f267ec9 100644
--- a/src/advanced-settings/data/fieldTypes.ts
+++ b/src/advanced-settings/data/fieldTypes.ts
@@ -1,54 +1,13 @@
 /**
- * Field type classification for all Advanced Settings.
- * Type is detected at runtime by getFieldType(key, value) based on typeof value + this enum map.
- *
- * BOOLEAN (Form.Switch):
- *   certHtmlViewEnabled, selfPaced, enableTimedExams, enableProctoredExams, showResetButton,
- *   mobileAvailable, invitationOnly, isNew, noGrade, highlightsEnabledForMessaging,
- *   allowUnsupportedXblocks, allowProctoringOptOut, createZendeskTickets, enableSubsectionGating,
- *   entranceExamEnabled, allowPublicWikiAccess, disableProgressGraph, showCalculator,
- *   hideProgressTab, edxnotes, videoAutoAdvance, videoSpeedOptimizations, useLatexCompiler,
- *   courseSurveyRequired, allowAnonymous, allowAnonymousToPeers, enableCcx,
- *   forceOnFlexiblePeerOpenassessments, downstreamCustomized, certificatesShowBeforeEnd
- *
- * NUMBER (text input, no letters):
- *   maxAttempts, maxStudentEnrollmentsAllowed, entranceExamMinimumScorePct, daysEarlyForBeta,
- *   relativeWeeksDue, minimumGradeCredit, upstreamVersion, upstreamVersionDeclined
- *
- * ENUM (<select> with fixed options — see ENUM_OPTIONS below):
- *   showanswer, rerandomize, catalogVisibility, courseVisibility, showCorrectness,
- *   videoSharingOptions, courseEditMethod, certificatesDisplayBehavior
- *
- * STRING (text input):
- *   displayName, displayCoursenumber, displayOrganization, giturl, staticAssetPath,
- *   announcement, courseSurveyName, proctoringEscalationEmail, proctoringProvider,
- *   matlabApiKey, xqaKey, cssClass, enrollmentDomain, cosmeticDisplayPrice,
- *   advertisedStart, socialSharingUrl, endOfCourseSurveyUrl, discussionLink, language,
- *   dueDateDisplayFormat, courseImage, bannerImage, videoThumbnailImage, entranceExamId,
- *   upstream, upstreamDisplayName, topLevelDownstreamParentKey, certNameLong, certNameShort, due
- *
- * JSON (CodeMirror editor with JSON syntax highlighting):
- *   advancedModules, cohortConfig, userPartitions, ltiPassports, discussionBlackouts,
- *   discussionTopics, discussionsSettings, teamsConfiguration, certHtmlViewOverrides,
- *   certificates, instructorInfo, htmlTextbooks, pdfTextbooks, videoBumper,
- *   videoUploadPipeline, courseWideCss, courseWideJs, learningInfo, preRequisiteCourses,
- *   remoteGradebook, otherCourseSettings, ccxConnector
+ * 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.
  */
-export const FIELD_TYPE = {
-  BOOLEAN: 'boolean',
-  NUMBER: 'number',
-  ENUM: 'enum',
-  STRING: 'string',
-  JSON: 'json',
-} as const;
+import { FIELD_TYPE, SETTINGS_CONFIG } from './settingsConfig';
+import type { FieldType } from './settingsConfig';
 
-export type FieldType = typeof FIELD_TYPE[keyof typeof FIELD_TYPE];
-
-interface EnumOption {
-  value: string;
-  /** English-only fallback. See JSDoc on ENUM_OPTIONS for usage warning. */
-  label: string;
-}
+export type { FieldType, EnumOption } from './settingsConfig';
+export { FIELD_TYPE };
 
 /**
  * NOTE: The `label` field in each option is an English-only fallback used when
@@ -56,105 +15,23 @@ interface EnumOption {
  * 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, EnumOption[]> = {
-  showanswer: [
-    { 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)' },
-  ],
-  rerandomize: [
-    { value: 'never', label: 'Never' },
-    { value: 'always', label: 'Always' },
-    { value: 'onreset', label: 'On reset' },
-    { value: 'per_student', label: 'Per student' },
-  ],
-  catalogVisibility: [
-    { value: 'both', label: 'Both (catalog and about page)' },
-    { value: 'about', label: 'About page only' },
-    { value: 'none', label: 'None' },
-  ],
-  courseVisibility: [
-    { value: 'private', label: 'Private' },
-    { value: 'public', label: 'Public' },
-    { value: 'public_outline', label: 'Public outline' },
-  ],
-  showCorrectness: [
-    { value: 'always', label: 'Always' },
-    { value: 'never', label: 'Never' },
-    { value: 'past_due', label: 'Past due' },
-  ],
-  videoSharingOptions: [
-    { value: 'per-video', label: 'Per video' },
-    { value: 'all-on', label: 'All on' },
-    { value: 'all-off', label: 'All off' },
-  ],
-  courseEditMethod: [
-    { value: 'Studio', label: 'Studio' },
-    { value: 'XML', label: 'XML' },
-  ],
-  certificatesDisplayBehavior: [
-    { value: 'end', label: 'End of course' },
-    { value: 'early_no_info', label: 'Early (no info)' },
-    { value: 'early_with_info', label: 'Early (with info)' },
-  ],
-};
+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!])),
+);
 
-/**
- * Explicit key → type overrides.
- * Used when the runtime value could be null/empty but the field has a known type.
- */
-const NUMBER_KEYS = new Set([
-  'maxAttempts',
-  'maxStudentEnrollmentsAllowed',
-  'entranceExamMinimumScorePct',
-  'daysEarlyForBeta',
-  'relativeWeeksDue',
-  'minimumGradeCredit',
-  'upstreamVersion',
-  'upstreamVersionDeclined',
-]);
+const BOOLEAN_KEYS = new Set<string>(
+  SETTINGS_CONFIG.flatMap((cat) => cat.fields
+    .filter((f) => f.type === FIELD_TYPE.BOOLEAN)
+    .map((f) => f.key)),
+);
 
-const BOOLEAN_KEYS = new Set([
-  'certHtmlViewEnabled',
-  'selfPaced',
-  'enableTimedExams',
-  'enableProctoredExams',
-  'showResetButton',
-  'mobileAvailable',
-  'invitationOnly',
-  'isNew',
-  'noGrade',
-  'highlightsEnabledForMessaging',
-  'allowUnsupportedXblocks',
-  'allowProctoringOptOut',
-  'createZendeskTickets',
-  'enableSubsectionGating',
-  'entranceExamEnabled',
-  'allowPublicWikiAccess',
-  'disableProgressGraph',
-  'showCalculator',
-  'hideProgressTab',
-  'edxnotes',
-  'videoAutoAdvance',
-  'videoSpeedOptimizations',
-  'useLatexCompiler',
-  'courseSurveyRequired',
-  'allowAnonymous',
-  'allowAnonymousToPeers',
-  'enableCcx',
-  'forceOnFlexiblePeerOpenassessments',
-  'downstreamCustomized',
-  'certificatesShowBeforeEnd',
-]);
+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.
diff --git a/src/advanced-settings/data/settingsCategories.ts b/src/advanced-settings/data/settingsCategories.ts
index 5518b81585..8f7fdf0e49 100644
--- a/src/advanced-settings/data/settingsCategories.ts
+++ b/src/advanced-settings/data/settingsCategories.ts
@@ -1,158 +1,16 @@
 /**
- * Maps each advanced setting key (camelCase, as returned by the API)
- * to its display category.
- *
- * Settings not present in this map will fall into the "Other" category.
+ * Derives all category-related exports from SETTINGS_CONFIG.
+ * This file exists for backward compatibility — consumers can import
+ * directly from settingsConfig.ts in the future.
  */
-export const SETTINGS_CATEGORY_MAP: Record<string, string> = {
-  // ── General Setting ──────────────────────────────────────────────────────
-  displayName: 'General Setting',
-  displayCoursenumber: 'General Setting',
-  displayOrganization: 'General Setting',
-  maxStudentEnrollmentsAllowed: 'General Setting',
-  enableSubsectionGating: 'General Setting',
-  language: 'General Setting',
-  cohortConfig: 'General Setting',
-  courseEditMethod: 'General Setting',
-  entranceExamEnabled: 'General Setting',
-  entranceExamId: 'General Setting',
-  entranceExamMinimumScorePct: 'General Setting',
-  highlightsEnabledForMessaging: 'General Setting',
-  preRequisiteCourses: 'General Setting',
-  userPartitions: 'General Setting',
+import { SETTINGS_CONFIG } from './settingsConfig';
 
-  // ── Content Blocks ────────────────────────────────────────────────────────
-  advancedModules: 'Content Blocks',
-  useLatexCompiler: 'Content Blocks',
-  videoSpeedOptimizations: 'Content Blocks',
-  forceOnFlexiblePeerOpenassessments: 'Content Blocks',
-  ltiPassports: 'Content Blocks',
-  matlabApiKey: 'Content Blocks',
-  maxAttempts: 'Content Blocks',
-  rerandomize: 'Content Blocks',
-  showanswer: 'Content Blocks',
-  showResetButton: 'Content Blocks',
-  videoSharingOptions: 'Content Blocks',
-  videoUploadPipeline: 'Content Blocks',
-  videoAutoAdvance: 'Content Blocks',
-  videoBumper: 'Content Blocks',
-  allowUnsupportedXblocks: 'Content Blocks',
+export const SETTINGS_CATEGORY_MAP: Record<string, string> = Object.fromEntries(
+  SETTINGS_CONFIG.flatMap((cat) => cat.fields.map((f) => [f.key, cat.id])),
+);
 
-  // ── Grading ───────────────────────────────────────────────────────────────
-  noGrade: 'Grading',
-  dueDateDisplayFormat: 'Grading',
-  remoteGradebook: 'Grading',
-  minimumGradeCredit: 'Grading',
-  showCorrectness: 'Grading',
+export const CATEGORY_ORDER: string[] = SETTINGS_CONFIG.map((cat) => cat.id);
 
-  // ── Schedule ──────────────────────────────────────────────────────────────
-  due: 'Schedule',
-  relativeWeeksDue: 'Schedule',
-  selfPaced: 'Schedule',
-
-  // ── Certificates ─────────────────────────────────────────────────────────
-  certNameLong: 'Certificates',
-  certNameShort: 'Certificates',
-  certHtmlViewOverrides: 'Certificates',
-  certHtmlViewEnabled: 'Certificates',
-  certificates: 'Certificates',
-  certificatesDisplayBehavior: 'Certificates',
-  certificatesShowBeforeEnd: 'Certificates',
-
-  // ── Enrollment Page ───────────────────────────────────────────────────────
-  cosmeticDisplayPrice: 'Enrollment Page',
-  courseImage: 'Enrollment Page',
-  advertisedStart: 'Enrollment Page',
-  announcement: 'Enrollment Page',
-  bannerImage: 'Enrollment Page',
-  isNew: 'Enrollment Page',
-  learningInfo: 'Enrollment Page',
-  videoThumbnailImage: 'Enrollment Page',
-  catalogVisibility: 'Enrollment Page',
-  invitationOnly: 'Enrollment Page',
-  courseSurveyName: 'Enrollment Page',
-  courseSurveyRequired: 'Enrollment Page',
-  courseVisibility: 'Enrollment Page',
-  endOfCourseSurveyUrl: 'Enrollment Page',
-  socialSharingUrl: 'Enrollment Page',
-
-  // ── Pages & Resources ─────────────────────────────────────────────────────
-  allowPublicWikiAccess: 'Pages & Resources',
-  disableProgressGraph: 'Pages & Resources',
-  htmlTextbooks: 'Pages & Resources',
-  showCalculator: 'Pages & Resources',
-  teamsConfiguration: 'Pages & Resources',
-  edxnotes: 'Pages & Resources',
-  hideProgressTab: 'Pages & Resources',
-  pdfTextbooks: 'Pages & Resources',
-  discussionLink: 'Pages & Resources',
-  discussionsSettings: 'Pages & Resources',
-
-  // ── Special Exams ─────────────────────────────────────────────────────────
-  allowProctoringOptOut: 'Special Exams',
-  createZendeskTickets: 'Special Exams',
-  enableProctoredExams: 'Special Exams',
-  enableTimedExams: 'Special Exams',
-  proctoringProvider: 'Special Exams',
-  proctoringEscalationEmail: 'Special Exams',
-
-  // ── Mobile ────────────────────────────────────────────────────────────────
-  mobileAvailable: 'Mobile',
-
-  // ── Instructors ───────────────────────────────────────────────────────────
-  instructorInfo: 'Instructors',
-
-  // ── Legacy Discussion ─────────────────────────────────────────────────────
-  discussionBlackouts: 'Legacy Discussion',
-  allowAnonymous: 'Legacy Discussion',
-  allowAnonymousToPeers: 'Legacy Discussion',
-  discussionTopics: 'Legacy Discussion',
-
-  // ── Libraries ─────────────────────────────────────────────────────────────
-  upstream: 'Libraries',
-  upstreamDisplayName: 'Libraries',
-  upstreamVersion: 'Libraries',
-  upstreamVersionDeclined: 'Libraries',
-  downstreamCustomized: 'Libraries',
-  topLevelDownstreamParentKey: 'Libraries',
-
-  // ── Other ─────────────────────────────────────────────────────────────────
-  courseWideCss: 'Other',
-  courseWideJs: 'Other',
-  daysEarlyForBeta: 'Other',
-  enrollmentDomain: 'Other',
-  staticAssetPath: 'Other',
-  giturl: 'Other',
-  enableCcx: 'Other',
-  ccxConnector: 'Other',
-  cssClass: 'Other',
-  otherCourseSettings: 'Other',
-  xqaKey: 'Other',
-};
-
-/**
- * Display order for categories in the UI.
- * Categories not listed here will appear after these, alphabetically.
- */
-export const CATEGORY_ORDER: string[] = [
-  'General Setting',
-  'Content Blocks',
-  'Grading',
-  'Schedule',
-  'Certificates',
-  'Enrollment Page',
-  'Pages & Resources',
-  'Special Exams',
-  'Mobile',
-  'Instructors',
-  'Legacy Discussion',
-  'Libraries',
-  'Other',
-];
-
-/**
- * Fallback category for settings not present in SETTINGS_CATEGORY_MAP.
- */
 export const UNCATEGORIZED = 'Other';
 
 export const CATEGORY_GENERAL_SETTING = 'General Setting';
@@ -169,31 +27,12 @@ export const CATEGORY_LEGACY_DISCUSSION = 'Legacy Discussion';
 export const CATEGORY_LIBRARIES = 'Libraries';
 export const CATEGORY_OTHER = 'Other';
 
-/**
- * Subcategory map for Content Blocks settings.
- * Maps each setting key to its subcategory label.
- */
-export const CONTENT_BLOCKS_SUBCATEGORY_MAP: Record<string, string> = {
-  // Settings
-  advancedModules: 'Settings',
-  ltiPassports: 'Settings',
-  allowUnsupportedXblocks: 'Settings',
-
-  // Problems
-  maxAttempts: 'Problems',
-  rerandomize: 'Problems',
-  showanswer: 'Problems',
-  showResetButton: 'Problems',
-  forceOnFlexiblePeerOpenassessments: 'Problems',
-  useLatexCompiler: 'Problems',
-  matlabApiKey: 'Problems',
+const contentBlocksCat = SETTINGS_CONFIG.find((cat) => cat.id === CATEGORY_CONTENT_BLOCKS)!;
 
-  // Video
-  videoSpeedOptimizations: 'Video',
-  videoSharingOptions: 'Video',
-  videoUploadPipeline: 'Video',
-  videoAutoAdvance: 'Video',
-  videoBumper: 'Video',
-};
+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[] = ['Settings', 'Problems', 'Video'];
+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/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 b8eef7ecdb..d99a9b50c9 100644
--- a/src/advanced-settings/scss/AdvancedSettings.scss
+++ b/src/advanced-settings/scss/AdvancedSettings.scss
@@ -19,24 +19,6 @@
     }
   }
 
-  // Section is now a Card; individual setting rows replace per-setting Cards
-  .settings-section {
-    overflow: hidden;
-  }
-
-  .sub-header {
-    padding-bottom: 1.5rem;
-  }
-}
-
-.settings-filters {
-  flex-wrap: wrap;
-  gap: .75rem;
-
-  .settings-filters-search {
-    width: 280px;
-  }
-
 }
 
 .settings-section-trigger {
@@ -53,14 +35,9 @@
   }
 }
 
-.settings-section-title {
-  font: normal var(--pgn-typography-font-weight-bold) 1.125rem/1.5rem var(--pgn-typography-font-family-base);
-  color: var(--pgn-color-headings-base);
-}
 
 .settings-section-icon {
   color: var(--pgn-color-gray-500);
-  flex-shrink: 0;
 }
 
 .alert-toast {
@@ -80,11 +57,7 @@
 }
 
 .subcategory-header {
-  list-style: none;
-
   .subcategory-header-title {
-    font-size: 1rem;
-    font-weight: var(--pgn-typography-font-weight-bold);
     color: var(--pgn-color-headings-base);
   }
 
@@ -94,28 +67,13 @@
 }
 
 .display-overrides-nested-fields {
-  list-style: none;
   border-left: 3px solid var(--pgn-color-primary-300);
-  margin-left: 2rem;
-  margin-right: 1rem;
-  margin-bottom: .5rem;
 }
 
 .display-overrides-blocked-message {
-  font-size: .8125rem;
   color: var(--pgn-color-danger-500);
 }
 
-.setting-row {
-  .setting-row-name {
-    font-size: .9375rem;
-  }
-
-  .form-control {
-    min-height: 2.75rem;
-    flex-grow: 1;
-  }
-}
 
 .setting-sidebar-supplementary {
   .setting-sidebar-supplementary-about {
diff --git a/src/advanced-settings/setting-card/SettingCard.tsx b/src/advanced-settings/setting-card/SettingCard.tsx
index cc4b08a8d7..529fbdca70 100644
--- a/src/advanced-settings/setting-card/SettingCard.tsx
+++ b/src/advanced-settings/setting-card/SettingCard.tsx
@@ -19,11 +19,13 @@ import {
   serializeValue,
 } from '../data/fieldTypes';
 import { FIELD_PLACEHOLDER_MESSAGES } from '../data/fieldTypeMessages';
-import BooleanInput from './inputs/BooleanInput';
-import NumberInput from './inputs/NumberInput';
-import EnumInput from './inputs/EnumInput';
-import StringInput from './inputs/StringInput';
-import JsonInput from './inputs/JsonInput';
+import {
+  BooleanInput,
+  EnumInput,
+  JsonInput,
+  NumberInput,
+  StringInput,
+} from './inputs';
 
 const SettingCard = ({
   name,
@@ -168,7 +170,7 @@ const SettingCard = ({
             {capitalize(displayName)}
           </span>
           {deprecated && (
-            <Badge variant="danger" className="ml-1 mr-1">
+            <Badge variant="danger" className="mx-1">
               {intl.formatMessage(messages.deprecated)}
             </Badge>
           )}
@@ -178,9 +180,7 @@ const SettingCard = ({
             src={InfoOutline}
             iconAs={Icon}
             alt={intl.formatMessage(messages.helpButtonText)}
-            variant="primary"
             size="sm"
-            className="flex-shrink-0"
           />
           <ModalPopup
             hasArrow
diff --git a/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
index 58d55b5568..dcb6aac2dd 100644
--- a/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.test.tsx
@@ -1,16 +1,21 @@
-import { render, fireEvent, initializeMocks } from '@src/testUtils';
-import BooleanInput from './BooleanInput';
+import userEvent from '@testing-library/user-event';
+import { render, initializeMocks } from '@src/testUtils';
+import BooleanInput, { BooleanInputProps } from './BooleanInput';
 
-// 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
-    <BooleanInput name="selfPaced" displayName="Self Paced" {...(props as any)} />,
-  );
+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', () => {
@@ -23,17 +28,17 @@ describe('<BooleanInput />', () => {
     expect(getByRole('switch')).not.toBeChecked();
   });
 
-  it('calls onChange with true when toggled from false', () => {
+  it('calls onChange with true when toggled from false', async () => {
     const onChange = jest.fn();
     const { getByRole } = renderInput({ value: false, onChange });
-    fireEvent.click(getByRole('switch'));
+    await user.click(getByRole('switch'));
     expect(onChange).toHaveBeenCalledWith(true);
   });
 
-  it('calls onChange with false when toggled from true', () => {
+  it('calls onChange with false when toggled from true', async () => {
     const onChange = jest.fn();
     const { getByRole } = renderInput({ value: true, onChange });
-    fireEvent.click(getByRole('switch'));
+    await user.click(getByRole('switch'));
     expect(onChange).toHaveBeenCalledWith(false);
   });
 
diff --git a/src/advanced-settings/setting-card/inputs/BooleanInput.tsx b/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
index 1c39fe67d7..c8f06f8238 100644
--- a/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
+++ b/src/advanced-settings/setting-card/inputs/BooleanInput.tsx
@@ -1,6 +1,6 @@
 import { Form } from '@openedx/paragon';
 
-interface BooleanInputProps {
+export interface BooleanInputProps {
   value: boolean;
   name: string;
   displayName: string;
diff --git a/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
index b6ead4caf2..0df9a98bd7 100644
--- a/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.test.tsx
@@ -1,17 +1,22 @@
-import { render, fireEvent, initializeMocks } from '@src/testUtils';
-import EnumInput from './EnumInput';
+import userEvent from '@testing-library/user-event';
+import { render, initializeMocks } from '@src/testUtils';
+import EnumInput, { EnumInputProps } from './EnumInput';
 import { ENUM_OPTIONS } from '../../data/fieldTypes';
 
-// 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
-    <EnumInput name="showanswer" displayName="Show Answer" {...(props as any)} />,
-  );
+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', () => {
@@ -26,24 +31,25 @@ describe('<EnumInput />', () => {
     expect(getByRole('combobox')).toHaveValue('never');
   });
 
-  it('calls onChange with the selected value when the selection changes', () => {
+  it('calls onChange with the selected value when the selection changes', async () => {
     const onChange = jest.fn();
     const { getByRole } = renderInput({ value: 'always', onChange });
-    fireEvent.change(getByRole('combobox'), { target: { value: 'never' } });
+    await user.selectOptions(getByRole('combobox'), 'never');
     expect(onChange).toHaveBeenCalledWith('never');
   });
 
-  it('calls onChange only once per change event', () => {
+  it('calls onChange only once per change event', async () => {
     const onChange = jest.fn();
     const { getByRole } = renderInput({ value: 'always', onChange });
-    fireEvent.change(getByRole('combobox'), { target: { value: 'past_due' } });
+    await user.selectOptions(getByRole('combobox'), 'past_due');
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onChange when the field is blurred', () => {
+  it('calls onChange when the field is blurred', async () => {
     const onChange = jest.fn();
     const { getByRole } = renderInput({ value: 'always', onChange });
-    fireEvent.blur(getByRole('combobox'));
+    await user.click(getByRole('combobox'));
+    await user.tab();
     expect(onChange).toHaveBeenCalledWith('always');
   });
 
diff --git a/src/advanced-settings/setting-card/inputs/EnumInput.tsx b/src/advanced-settings/setting-card/inputs/EnumInput.tsx
index 7ccb808492..c8d161351e 100644
--- a/src/advanced-settings/setting-card/inputs/EnumInput.tsx
+++ b/src/advanced-settings/setting-card/inputs/EnumInput.tsx
@@ -1,8 +1,9 @@
+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';
 
-interface EnumInputProps {
+export interface EnumInputProps {
   value?: string;
   name: string;
   displayName: string;
@@ -19,8 +20,8 @@ const EnumInput = ({
   const options = ENUM_OPTIONS[name] || [];
 
   return (
-    <select
-      className="form-control"
+    <Form.Control
+      as="select"
       value={value ?? ''}
       name={name}
       onChange={(e) => onChange(e.target.value)}
@@ -36,7 +37,7 @@ const EnumInput = ({
           </option>
         );
       })}
-    </select>
+    </Form.Control>
   );
 };
 
diff --git a/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
index b654bbd5ba..709985c871 100644
--- a/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.test.tsx
@@ -1,16 +1,32 @@
+import userEvent from '@testing-library/user-event';
 import { render, fireEvent, initializeMocks } from '@src/testUtils';
-import NumberInput from './NumberInput';
+import NumberInput, { NumberInputProps } from './NumberInput';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const renderInput = (props: Record<string, any> = {}) =>
+const renderInput = ({
+  name = 'maxAttempts',
+  displayName = 'Maximum Attempts',
+  onChange = jest.fn(),
+  onBlur = jest.fn(),
+  value,
+  placeholder,
+}: Partial<NumberInputProps> = {}) =>
   render(
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <NumberInput name="maxAttempts" displayName="Maximum Attempts" onBlur={jest.fn()} {...(props as any)} />,
+    <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', () => {
@@ -53,10 +69,11 @@ describe('<NumberInput />', () => {
     expect(onChange).toHaveBeenCalledWith('');
   });
 
-  it('calls onBlur when focus leaves the field', () => {
+  it('calls onBlur when focus leaves the field', async () => {
     const onBlur = jest.fn();
     const { getByRole } = renderInput({ value: 3, onChange: jest.fn(), onBlur });
-    fireEvent.blur(getByRole('textbox'));
+    await user.click(getByRole('textbox'));
+    await user.tab();
     expect(onBlur).toHaveBeenCalled();
   });
 
diff --git a/src/advanced-settings/setting-card/inputs/NumberInput.tsx b/src/advanced-settings/setting-card/inputs/NumberInput.tsx
index d4454aae44..73494f57cf 100644
--- a/src/advanced-settings/setting-card/inputs/NumberInput.tsx
+++ b/src/advanced-settings/setting-card/inputs/NumberInput.tsx
@@ -1,8 +1,8 @@
 import { ChangeEvent } from 'react';
 import { Form } from '@openedx/paragon';
 
-interface NumberInputProps {
-  value?: number | string;
+export interface NumberInputProps {
+  value?: number | string | null;
   name: string;
   displayName: string;
   onChange: (value: string) => void;
diff --git a/src/advanced-settings/setting-card/inputs/StringInput.test.tsx b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
index 9d48886388..a65e936a41 100644
--- a/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
+++ b/src/advanced-settings/setting-card/inputs/StringInput.test.tsx
@@ -1,3 +1,4 @@
+import userEvent from '@testing-library/user-event';
 import { render, fireEvent, initializeMocks } from '@src/testUtils';
 import StringInput from './StringInput';
 
@@ -9,8 +10,11 @@ const renderInput = (props: Record<string, any> = {}) =>
   );
 
 describe('<StringInput />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
   beforeEach(() => {
     initializeMocks();
+    user = userEvent.setup();
   });
 
   it('renders with the correct value', () => {
@@ -38,10 +42,11 @@ describe('<StringInput />', () => {
     expect(onChange).toHaveBeenCalledTimes(2);
   });
 
-  it('calls onBlur when focus leaves the field', () => {
+  it('calls onBlur when focus leaves the field', async () => {
     const onBlur = jest.fn();
     const { getByRole } = renderInput({ value: 'My Course', onChange: jest.fn(), onBlur });
-    fireEvent.blur(getByRole('textbox'));
+    await user.click(getByRole('textbox'));
+    await user.tab();
     expect(onBlur).toHaveBeenCalled();
   });
 
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
index 603b91a9dc..d06c1983bc 100644
--- a/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
+++ b/src/advanced-settings/settings-filters/SettingsFilters.test.tsx
@@ -1,3 +1,4 @@
+import userEvent from '@testing-library/user-event';
 import { render, fireEvent, initializeMocks } from '@src/testUtils';
 import SettingsFilters from './SettingsFilters';
 import messages from './messages';
@@ -16,8 +17,11 @@ const renderFilters = (props = {}) =>
   );
 
 describe('<SettingsFilters />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
   beforeEach(() => {
     initializeMocks();
+    user = userEvent.setup();
   });
 
   it('renders the search field', () => {
@@ -42,17 +46,17 @@ describe('<SettingsFilters />', () => {
     expect(getByText(messages.expandAll.defaultMessage)).toBeInTheDocument();
   });
 
-  it('calls onExpandAllChange with false when "Collapse all" is clicked', () => {
+  it('calls onExpandAllChange with false when "Collapse all" is clicked', async () => {
     const onExpandAllChange = jest.fn();
     const { getByText } = renderFilters({ expandAll: true, onExpandAllChange });
-    fireEvent.click(getByText(messages.collapseAll.defaultMessage));
+    await user.click(getByText(messages.collapseAll.defaultMessage));
     expect(onExpandAllChange).toHaveBeenCalledWith(false);
   });
 
-  it('calls onExpandAllChange with true when "Expand all" is clicked', () => {
+  it('calls onExpandAllChange with true when "Expand all" is clicked', async () => {
     const onExpandAllChange = jest.fn();
     const { getByText } = renderFilters({ expandAll: false, onExpandAllChange });
-    fireEvent.click(getByText(messages.expandAll.defaultMessage));
+    await user.click(getByText(messages.expandAll.defaultMessage));
     expect(onExpandAllChange).toHaveBeenCalledWith(true);
   });
 
@@ -66,17 +70,17 @@ describe('<SettingsFilters />', () => {
     expect(getByText(messages.hideDeprecated.defaultMessage)).toBeInTheDocument();
   });
 
-  it('calls onDeprecatedChange with true when "Show deprecated" is clicked', () => {
+  it('calls onDeprecatedChange with true when "Show deprecated" is clicked', async () => {
     const onDeprecatedChange = jest.fn();
     const { getByText } = renderFilters({ showDeprecated: false, onDeprecatedChange });
-    fireEvent.click(getByText(messages.showDeprecated.defaultMessage));
+    await user.click(getByText(messages.showDeprecated.defaultMessage));
     expect(onDeprecatedChange).toHaveBeenCalledWith(true);
   });
 
-  it('calls onDeprecatedChange with false when "Hide deprecated" is clicked', () => {
+  it('calls onDeprecatedChange with false when "Hide deprecated" is clicked', async () => {
     const onDeprecatedChange = jest.fn();
     const { getByText } = renderFilters({ showDeprecated: true, onDeprecatedChange });
-    fireEvent.click(getByText(messages.hideDeprecated.defaultMessage));
+    await user.click(getByText(messages.hideDeprecated.defaultMessage));
     expect(onDeprecatedChange).toHaveBeenCalledWith(false);
   });
 
diff --git a/src/advanced-settings/settings-filters/SettingsFilters.tsx b/src/advanced-settings/settings-filters/SettingsFilters.tsx
index 21c03938ea..262092bd79 100644
--- a/src/advanced-settings/settings-filters/SettingsFilters.tsx
+++ b/src/advanced-settings/settings-filters/SettingsFilters.tsx
@@ -1,4 +1,6 @@
-import { Button, Icon, SearchField } from '@openedx/paragon';
+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';
@@ -23,26 +25,24 @@ const SettingsFilters = ({
   const intl = useIntl();
 
   return (
-    <div className="settings-filters d-flex align-items-center gap-3 mb-4">
-      <div className="settings-filters-search">
-        <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"
-        />
-      </div>
+    <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)}
       >
-        <Icon src={expandAll ? CloseFullscreen : OpenInFull} className="mr-1" />
         {expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)}
       </Button>
       <Button
@@ -51,7 +51,7 @@ const SettingsFilters = ({
       >
         {showDeprecated ? intl.formatMessage(messages.hideDeprecated) : intl.formatMessage(messages.showDeprecated)}
       </Button>
-    </div>
+    </Stack>
   );
 };
 
diff --git a/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx b/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
index 95d040579e..205293052f 100644
--- a/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
+++ b/src/advanced-settings/settings-section/CourseDisplayOverrides.test.tsx
@@ -1,4 +1,5 @@
-import { render, fireEvent, initializeMocks } from '@src/testUtils';
+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';
@@ -41,8 +42,11 @@ const renderOverrides = (displaySettingsEntries: SettingEntry[], props = {}) =>
   );
 
 describe('<CourseDisplayOverrides />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
   beforeEach(() => {
     initializeMocks();
+    user = userEvent.setup();
   });
 
   it('renders the Course Display Overrides label', () => {
@@ -85,21 +89,21 @@ describe('<CourseDisplayOverrides />', () => {
     expect(getByTestId('setting-card-displayName')).toBeInTheDocument();
   });
 
-  it('shows nested fields after enabling the toggle', () => {
+  it('shows nested fields after enabling the toggle', async () => {
     const { getByRole, getByTestId } = renderOverrides([
       emptyEntry('displayName'),
     ]);
-    fireEvent.click(getByRole('switch'));
+    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', () => {
+  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
-    fireEvent.click(getByRole('switch'));
+    await user.click(getByRole('switch'));
     expect(getByText(messages.courseDisplayOverridesBlockedMessage.defaultMessage)).toBeInTheDocument();
   });
 
@@ -108,15 +112,15 @@ describe('<CourseDisplayOverrides />', () => {
     expect(queryByText(messages.courseDisplayOverridesBlockedMessage.defaultMessage)).toBeNull();
   });
 
-  it('allows disabling the toggle when all fields are empty', () => {
+  it('allows disabling the toggle when all fields are empty', async () => {
     const { getByRole, queryByTestId } = renderOverrides([
       emptyEntry('displayName'),
     ]);
     // Enable first
-    fireEvent.click(getByRole('switch'));
+    await user.click(getByRole('switch'));
     expect(queryByTestId('setting-card-displayName')).toBeInTheDocument();
     // Disable — should work because no content
-    fireEvent.click(getByRole('switch'));
+    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
index 2da8e9cc97..f8550e3913 100644
--- a/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
+++ b/src/advanced-settings/settings-section/CourseDisplayOverrides.tsx
@@ -70,9 +70,7 @@ const CourseDisplayOverrides = ({
               src={InfoOutline}
               iconAs={Icon}
               alt={intl.formatMessage(messages.courseDisplayOverridesInfoAlt)}
-              variant="primary"
               size="sm"
-              className="flex-shrink-0"
             />
             <ModalPopup
               hasArrow
@@ -100,14 +98,14 @@ const CourseDisplayOverrides = ({
           </div>
         </div>
         {showBlockedMessage && (
-          <p className="display-overrides-blocked-message px-4 pb-3 mt-0 mb-0">
+          <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">
+        <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
diff --git a/src/advanced-settings/settings-section/SettingsSection.test.tsx b/src/advanced-settings/settings-section/SettingsSection.test.tsx
index feea498a2a..5ad8e719d6 100644
--- a/src/advanced-settings/settings-section/SettingsSection.test.tsx
+++ b/src/advanced-settings/settings-section/SettingsSection.test.tsx
@@ -1,5 +1,6 @@
-import { render, fireEvent, initializeMocks } from '@src/testUtils';
-import SettingsSection from './SettingsSection';
+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';
 
@@ -15,7 +16,7 @@ jest.mock(
   () => jest.fn(() => <div data-testid="course-display-overrides" />),
 );
 
-const defaultProps = {
+const defaultProps: SettingsSectionProps = {
   category: 'Grading',
   settingsEntries: [] as SettingEntry[],
   showDeprecated: false,
@@ -32,8 +33,7 @@ const makeEntry = (name: string, deprecated = false): SettingEntry => [
   { displayName: name, value: 'test', help: '', deprecated },
 ];
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const renderSection = (props: Record<string, any> = {}) =>
+const renderSection = (props: Partial<SettingsSectionProps> = {}) =>
   render(
     <SettingsSection
       {...defaultProps}
@@ -42,8 +42,11 @@ const renderSection = (props: Record<string, any> = {}) =>
   );
 
 describe('<SettingsSection />', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
   beforeEach(() => {
     initializeMocks();
+    user = userEvent.setup();
   });
 
   it('renders the category title', () => {
@@ -88,7 +91,7 @@ describe('<SettingsSection />', () => {
     expect(queryByRole('button')).toBeNull();
   });
 
-  it('collapses the section when the trigger is clicked', () => {
+  it('collapses the section when the trigger is clicked', async () => {
     const { getByRole } = renderSection({
       settingsEntries: [makeEntry('noGrade')],
     });
@@ -96,7 +99,7 @@ describe('<SettingsSection />', () => {
     // Section is open by default
     expect(trigger).toHaveAttribute('aria-expanded', 'true');
     // Click the trigger to collapse
-    fireEvent.click(trigger);
+    await user.click(trigger);
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
 
diff --git a/src/advanced-settings/settings-section/SettingsSection.tsx b/src/advanced-settings/settings-section/SettingsSection.tsx
index d590dd73a7..6ede737fc1 100644
--- a/src/advanced-settings/settings-section/SettingsSection.tsx
+++ b/src/advanced-settings/settings-section/SettingsSection.tsx
@@ -68,7 +68,7 @@ const groupBySubcategory = (
   return ordered;
 };
 
-interface SettingsSectionProps {
+export interface SettingsSectionProps {
   category: string;
   settingsEntries: SettingEntry[];
   showDeprecated: boolean;
@@ -140,12 +140,12 @@ const SettingsSection = ({
         ([subcat, items]) => (
           <Fragment key={subcat}>
             <li className="subcategory-header px-4 pt-4 pb-0">
-              <p className="subcategory-header-title mb-2">
+              <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 mt-0 mb-0" />
+              <hr className="subcategory-header-divider my-0" />
             </li>
             {items.map(([settingName, settingData]) => renderSettingCard(settingName, settingData))}
           </Fragment>
@@ -180,9 +180,9 @@ const SettingsSection = ({
   return (
     <Card className="settings-section mb-4">
       <Collapsible.Advanced open={isOpen} onToggle={setIsOpen}>
-        <Collapsible.Trigger className="settings-section-trigger w-100 p-0 border-0 bg-transparent text-left">
+        <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 m-0">
+            <h3 className="settings-section-title font-weight-bold m-0">
               {CATEGORY_MESSAGE_MAP[category]
                 ? intl.formatMessage(CATEGORY_MESSAGE_MAP[category])
                 : category}
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}

From 040c312dcc0e2cfec4ae50984b2947a549912bd2 Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Fri, 1 May 2026 02:24:08 -0500
Subject: [PATCH 09/10] fix: apply dprint formatting to SettingsFilters.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/advanced-settings/settings-filters/SettingsFilters.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/advanced-settings/settings-filters/SettingsFilters.tsx b/src/advanced-settings/settings-filters/SettingsFilters.tsx
index 262092bd79..67c579617d 100644
--- a/src/advanced-settings/settings-filters/SettingsFilters.tsx
+++ b/src/advanced-settings/settings-filters/SettingsFilters.tsx
@@ -1,5 +1,7 @@
 import {
-  Button, SearchField, Stack,
+  Button,
+  SearchField,
+  Stack,
 } from '@openedx/paragon';
 import { OpenInFull, CloseFullscreen } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';

From 109abc02e9f4a27b4e75dff0f8c7450f653b00be Mon Sep 17 00:00:00 2001
From: Santiago Suarez <santiagosh96@gmail.com>
Date: Fri, 1 May 2026 02:26:43 -0500
Subject: [PATCH 10/10] fix: apply dprint formatting to fieldTypes.ts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/advanced-settings/data/fieldTypes.ts | 26 +++++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/advanced-settings/data/fieldTypes.ts b/src/advanced-settings/data/fieldTypes.ts
index 845f267ec9..9cf365fa83 100644
--- a/src/advanced-settings/data/fieldTypes.ts
+++ b/src/advanced-settings/data/fieldTypes.ts
@@ -15,22 +15,28 @@ export { FIELD_TYPE };
  * 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!])),
+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)),
+  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)),
+  SETTINGS_CONFIG.flatMap((cat) =>
+    cat.fields
+      .filter((f) => f.type === FIELD_TYPE.NUMBER)
+      .map((f) => f.key)
+  ),
 );
 
 /**