diff --git a/demo/ts/components/theme-builder/accordion.tsx b/demo/ts/components/theme-builder/accordion.tsx
new file mode 100644
index 000000000..5578b4d5a
--- /dev/null
+++ b/demo/ts/components/theme-builder/accordion.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import clsx from "clsx";
+import { FaChevronDown } from "react-icons/fa";
+
+type AccordionProps = {
+  id: string;
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+};
+
+const Accordion = ({
+  id,
+  title,
+  children,
+  defaultOpen = false,
+}: AccordionProps) => {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  const toggleAccordion = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div id={id} className="group">
+      <h2 id={`${id}-heading`}>
+        <button
+          type="button"
+          className={clsx(
+            "flex items-center justify-between w-full px-5 py-3 text-sm font-bold rtl:text-right text-gray-500 border border-b-0 border-gray-200 gap-3 group-last:border-b",
+            { "group-last:border-b-0": isOpen },
+          )}
+          aria-expanded="true"
+          aria-controls={`${id}-body`}
+          onClick={toggleAccordion}
+        >
+          <span>{title}</span>
+          <FaChevronDown
+            className={clsx("w-3 h-3 shrink-0", { "rotate-180 ": isOpen })}
+          />
+        </button>
+      </h2>
+      <div
+        id={`${id}-body`}
+        className={isOpen ? "block" : "hidden"}
+        aria-labelledby={`${id}-heading`}
+      >
+        <div className="p-5 border border-b-0 border-gray-200 group-last:border-b">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Accordion;
diff --git a/demo/ts/components/theme-builder/color-picker.tsx b/demo/ts/components/theme-builder/color-picker.tsx
index 2759c2af0..ba1609469 100644
--- a/demo/ts/components/theme-builder/color-picker.tsx
+++ b/demo/ts/components/theme-builder/color-picker.tsx
@@ -6,7 +6,7 @@ type ColorPickerProps = {
   label?: string;
   color: string;
   id: string;
-  onColorChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onColorChange: (color: string) => void;
   showColorName?: boolean;
 };
 
@@ -21,7 +21,7 @@ const ColorPicker = ({
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (onColorChange) {
-      onColorChange(event);
+      onColorChange(event.target.value);
     }
   };
 
@@ -33,7 +33,7 @@ const ColorPicker = ({
         </label>
       )}
       <div
-        className={clsx("relative inline-flex rounded-full group", {
+        className={clsx("relative inline-flex rounded-full group/swatch", {
           "border-2 border-gray-200 p-0.5 cursor-pointer justify-between bg-gray-100":
             showColorName,
         })}
@@ -55,7 +55,7 @@ const ColorPicker = ({
             />
             {!showColorName && (
               <div
-                className={`absolute top-0 left-0 w-full h-full text-white flex justify-center items-center text-xl rounded-full opacity-0 group-hover:opacity-100 ${
+                className={`absolute top-0 left-0 w-full h-full text-white flex justify-center items-center text-xl rounded-full opacity-0 group-hover/swatch:opacity-100 ${
                   isPickerOpen ? "opacity-100" : ""
                 }`}
               >
@@ -82,7 +82,7 @@ const ColorPicker = ({
         )}
         <input
           id={id}
-          className={`absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 z-10 group-hover:border-currentColor ${
+          className={`absolute top-0 left-0 w-full h-full cursor-pointer opacity-0 z-10 group-hover/swatch:border-currentColor ${
             isPickerOpen ? "border-currentColor" : ""
           }`}
           type="color"
diff --git a/demo/ts/components/theme-builder/color-scale-options.tsx b/demo/ts/components/theme-builder/color-scale-options.tsx
index 8b691d044..019b372af 100644
--- a/demo/ts/components/theme-builder/color-scale-options.tsx
+++ b/demo/ts/components/theme-builder/color-scale-options.tsx
@@ -4,7 +4,7 @@ import Select from "./select";
 import ColorPicker from "./color-picker";
 
 export type ColorChangeArgs = {
-  event: React.ChangeEvent<HTMLInputElement>;
+  newColor: string;
   index: number;
   colorScale: string;
 };
@@ -13,7 +13,7 @@ type ColorScaleOptionsProps = {
   palette?: VictoryThemeDefinition["palette"];
   activeColorScale?: ColorScalePropType;
   onColorChange: (args: ColorChangeArgs) => void;
-  onColorScaleChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  onColorScaleChange: (colorScale: string) => void;
 };
 
 const colorScales = [
@@ -57,6 +57,7 @@ const ColorScaleOptions = ({
         onChange={onColorScaleChange}
         options={colorScales}
         label="Color Scale"
+        className="mb-5"
       />
       <div className="flex flex-wrap gap-3 mb-5">
         {palette?.[activeColorScale as string]?.map((color, i) => (
@@ -64,9 +65,9 @@ const ColorScaleOptions = ({
             key={i}
             color={color}
             id={`color-${i}`}
-            onColorChange={(event) =>
+            onColorChange={(newColor) =>
               onColorChange({
-                event,
+                newColor,
                 index: i,
                 colorScale: activeColorScale as string,
               })
diff --git a/demo/ts/components/theme-builder/config-mapper.tsx b/demo/ts/components/theme-builder/config-mapper.tsx
new file mode 100644
index 000000000..41f12a845
--- /dev/null
+++ b/demo/ts/components/theme-builder/config-mapper.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import optionsConfig from "./options-config";
+import Accordion from "./accordion";
+import Select from "./select";
+import Slider from "./slider";
+import ColorPicker from "./color-picker";
+import ColorScaleOptions from "./color-scale-options";
+import { getConfigValue } from "./utils";
+
+const ConfigMapper = ({
+  themeConfig,
+  activeColorScale,
+  updateThemeConfig,
+  handleColorScaleChange,
+}) => {
+  const handleColorChange = ({ newColor, index, colorScale }) => {
+    const updatedColors = themeConfig?.palette?.[colorScale]?.map((color, i) =>
+      i === index ? newColor : color,
+    );
+    updateThemeConfig(`palette.${colorScale}`, updatedColors);
+  };
+
+  return (
+    <>
+      {optionsConfig.map((section, index) => (
+        <Accordion
+          key={section.title}
+          title={section.title}
+          id={section.title}
+          defaultOpen={index === 0}
+        >
+          {section.fields.map((field) => {
+            if (field.type === "colorScale") {
+              return (
+                <ColorScaleOptions
+                  key={field.label}
+                  activeColorScale={activeColorScale}
+                  palette={themeConfig?.palette}
+                  onColorChange={handleColorChange}
+                  onColorScaleChange={handleColorScaleChange}
+                />
+              );
+            }
+            const configValue = getConfigValue(themeConfig, field.path);
+            if (field.type === "slider") {
+              return (
+                <Slider
+                  id={field.label}
+                  key={field.label}
+                  label={field.label}
+                  value={configValue as number}
+                  unit={field.unit}
+                  onChange={(newValue) =>
+                    updateThemeConfig(field.path, newValue)
+                  }
+                />
+              );
+            }
+            if (field.type === "select") {
+              return (
+                <Select
+                  id={field.label}
+                  key={field.label}
+                  label={field.label}
+                  value={configValue as string}
+                  options={field.options}
+                  onChange={(newValue) =>
+                    updateThemeConfig(field.path, newValue)
+                  }
+                />
+              );
+            }
+            if (field.type === "colorPicker") {
+              return (
+                <ColorPicker
+                  id={field.label}
+                  key={field.label}
+                  label={field.label}
+                  color={configValue as string}
+                  onColorChange={(newColor) =>
+                    updateThemeConfig(field.path, newColor)
+                  }
+                  showColorName
+                />
+              );
+            }
+            return null;
+          })}
+        </Accordion>
+      ))}
+    </>
+  );
+};
+
+export default ConfigMapper;
diff --git a/demo/ts/components/theme-builder/config-preview.tsx b/demo/ts/components/theme-builder/config-preview.tsx
index 899b27fc1..9012aea9c 100644
--- a/demo/ts/components/theme-builder/config-preview.tsx
+++ b/demo/ts/components/theme-builder/config-preview.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { VictoryThemeDefinition } from "victory-core/lib";
+import { VictoryThemeDefinition } from "victory-core";
 import Button from "./button";
 import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter";
 
diff --git a/demo/ts/components/theme-builder/index.tsx b/demo/ts/components/theme-builder/index.tsx
index 7c447ce4b..b0847411e 100644
--- a/demo/ts/components/theme-builder/index.tsx
+++ b/demo/ts/components/theme-builder/index.tsx
@@ -1,7 +1,8 @@
 import React from "react";
+import "./tailwind.css";
+
 import {
   ColorScalePropType,
-  LabelProps,
   VictoryTheme,
   VictoryThemeDefinition,
 } from "victory-core";
@@ -10,13 +11,11 @@ import { VictoryAxis } from "victory-axis";
 import { VictoryStack } from "victory-stack";
 import { VictoryBar } from "victory-bar";
 import { VictoryArea } from "victory-area";
-import ColorScaleOptions, { ColorChangeArgs } from "./color-scale-options";
 import Select from "./select";
 import ConfigPreview from "./config-preview";
 import Button from "./button";
-
-import "./tailwind.css";
-import LabelOptions from "./label-options";
+import ConfigMapper from "./config-mapper";
+import { setNestedConfigValue } from "./utils";
 
 export type ThemeOption = {
   name: string;
@@ -83,50 +82,24 @@ const ThemeBuilder = () => {
   const [showThemeConfigPreview, setShowThemeConfigPreview] =
     React.useState(false);
 
-  const handleThemeSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const themeName = event.target.value;
+  const handleThemeSelect = (themeName: string) => {
     const theme = themes.find((t) => t.name === themeName);
     setBaseTheme(theme);
     setCustomThemeConfig({ ...theme?.config });
   };
 
-  const handleLabelConfigChange = (newLabelConfig: Partial<LabelProps>) => {
-    if (customThemeConfig) {
-      const updatedConfig = {
-        ...customThemeConfig,
-        axis: {
-          ...customThemeConfig.axis,
-          style: {
-            ...customThemeConfig.axis?.style,
-            axisLabel: {
-              ...customThemeConfig.axis?.style?.axisLabel,
-              ...newLabelConfig,
-            },
-          },
-        },
-      };
-      setCustomThemeConfig(updatedConfig as VictoryThemeDefinition);
-    }
-  };
-
-  const handleColorChange = ({ event, index, colorScale }: ColorChangeArgs) => {
-    const newColor = event.target.value;
-    const updatedConfig = {
-      ...customThemeConfig,
-      palette: {
-        ...customThemeConfig?.palette,
-        [colorScale]: customThemeConfig?.palette?.[colorScale]?.map(
-          (color, i) => (i === index ? newColor : color),
-        ),
-      },
-    };
+  const updateCustomThemeConfig = (path: string, newValue: unknown) => {
+    if (!customThemeConfig) return;
+    const updatedConfig = setNestedConfigValue(
+      customThemeConfig,
+      path,
+      newValue,
+    );
     setCustomThemeConfig(updatedConfig);
   };
 
-  const handleColorScaleChange = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-  ) => {
-    setActiveColorScale(event.target.value as ColorScalePropType);
+  const handleColorScaleChange = (colorScale: string) => {
+    setActiveColorScale(colorScale as ColorScalePropType);
   };
 
   const handleThemeConfigPreviewOpen = () => {
@@ -139,7 +112,7 @@ const ThemeBuilder = () => {
 
   return (
     <div className="flex flex-row flex-wrap items-start justify-start w-full">
-      <aside className="relative flex flex-col h-lvh w-[300px] border-r border-gray-200">
+      <aside className="relative flex flex-col h-lvh w-[350px] border-r border-gray-200">
         <div className="grow overflow-y-auto p-4 pb-[100px]">
           <h2 className="mb-0 text-lg font-bold">Customize Your Theme</h2>
           <p className="text-sm mb-4 text-gray-300">
@@ -154,18 +127,12 @@ const ThemeBuilder = () => {
           />
           {customThemeConfig && (
             <section>
-              <h2 className="text-lg font-bold mb-4">Customization Options</h2>
-              <ColorScaleOptions
+              <h2 className="text-lg font-bold my-4">Customization Options</h2>
+              <ConfigMapper
+                themeConfig={customThemeConfig}
                 activeColorScale={activeColorScale}
-                palette={customThemeConfig.palette}
-                onColorChange={handleColorChange}
-                onColorScaleChange={handleColorScaleChange}
-              />
-              <LabelOptions
-                labelConfig={
-                  customThemeConfig.axis?.style?.axisLabel as LabelProps
-                }
-                onLabelConfigChange={handleLabelConfigChange}
+                handleColorScaleChange={handleColorScaleChange}
+                updateThemeConfig={updateCustomThemeConfig}
               />
             </section>
           )}
diff --git a/demo/ts/components/theme-builder/label-options.tsx b/demo/ts/components/theme-builder/label-options.tsx
deleted file mode 100644
index 6370f999a..000000000
--- a/demo/ts/components/theme-builder/label-options.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import { LabelProps } from "victory-core";
-import Slider from "./slider";
-import ColorPicker from "./color-picker";
-
-type LabelOptionsProps = {
-  labelConfig?: LabelProps;
-  onLabelConfigChange: (labelConfig: LabelProps) => void;
-};
-
-const LabelOptions = ({
-  labelConfig,
-  onLabelConfigChange,
-}: LabelOptionsProps) => {
-  if (!labelConfig) return null;
-  return (
-    <div>
-      <h3 className="text-lg font-bold mb-4">Axis Label Options</h3>
-      <Slider
-        label="Font Size"
-        id="font-size"
-        defaultValue={labelConfig?.fontSize}
-        onChange={(event) =>
-          onLabelConfigChange({ fontSize: parseInt(event.target.value) })
-        }
-      />
-      <Slider
-        label="Padding"
-        id="padding"
-        defaultValue={labelConfig?.padding}
-        onChange={(event) =>
-          onLabelConfigChange({ padding: parseInt(event.target.value) })
-        }
-      />
-      <div>
-        <ColorPicker
-          color={labelConfig?.fill as string}
-          id="label-fill"
-          showColorName
-          label="Fill"
-          onColorChange={(event) =>
-            onLabelConfigChange({ fill: event.target.value })
-          }
-        />
-      </div>
-    </div>
-  );
-};
-export default LabelOptions;
diff --git a/demo/ts/components/theme-builder/options-config.ts b/demo/ts/components/theme-builder/options-config.ts
new file mode 100644
index 000000000..e5c285e91
--- /dev/null
+++ b/demo/ts/components/theme-builder/options-config.ts
@@ -0,0 +1,41 @@
+const optionsConfig = [
+  {
+    type: "section",
+    title: "Color Options",
+    fields: [
+      {
+        type: "colorScale",
+        label: "Color Scale",
+      },
+    ],
+  },
+  {
+    type: "section",
+    title: "Axis Label Options",
+    fields: [
+      {
+        type: "slider",
+        label: "Font Size",
+        min: 10,
+        max: 24,
+        unit: "px",
+        path: "axis.style.axisLabel.fontSize",
+      },
+      {
+        type: "slider",
+        label: "Padding",
+        min: 0,
+        max: 50,
+        unit: "px",
+        path: "axis.style.axisLabel.padding",
+      },
+      {
+        type: "colorPicker",
+        label: "Fill",
+        path: "axis.style.axisLabel.fill",
+      },
+    ],
+  },
+];
+
+export default optionsConfig;
diff --git a/demo/ts/components/theme-builder/select.tsx b/demo/ts/components/theme-builder/select.tsx
index cf8787c6f..0bb7b9d17 100644
--- a/demo/ts/components/theme-builder/select.tsx
+++ b/demo/ts/components/theme-builder/select.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 
 export type SelectOption = {
   label: string;
@@ -10,12 +11,25 @@ type SelectProps = {
   label?: string;
   options: SelectOption[];
   value: string;
-  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  onChange: (value: string) => void;
+  className?: string;
 };
 
-const Select = ({ id, label, options, value, onChange }: SelectProps) => {
+const Select = ({
+  id,
+  label,
+  options,
+  value,
+  onChange,
+  className,
+}: SelectProps) => {
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (onChange) {
+      onChange(event.target.value);
+    }
+  };
   return (
-    <div className="relative w-full mb-5">
+    <div className={clsx("relative w-full", className)}>
       {label && (
         <label htmlFor={id} className="block mb-1 text-sm font-bold">
           {label}
@@ -24,11 +38,11 @@ const Select = ({ id, label, options, value, onChange }: SelectProps) => {
       <select
         id={id}
         value={value}
-        onChange={onChange}
+        onChange={handleChange}
         className="p-2 w-full text-base border border-gray-200 bg-white appearance-none rounded-md bg-select-chevron bg-no-repeat bg-[right_8px_center] bg-[length:16px]"
       >
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
+        {options.map((option, i) => (
+          <option key={(option.value || "") + i} value={option.value}>
             {option.label}
           </option>
         ))}
diff --git a/demo/ts/components/theme-builder/slider.tsx b/demo/ts/components/theme-builder/slider.tsx
index 2b4934ccd..c6cb870c6 100644
--- a/demo/ts/components/theme-builder/slider.tsx
+++ b/demo/ts/components/theme-builder/slider.tsx
@@ -1,19 +1,31 @@
-import React, { useEffect } from "react";
+import React from "react";
 
-const Slider = ({ label, id, defaultValue, unit = "px", onChange }) => {
-  const [value, setValue] = React.useState(defaultValue);
+type SliderProps = {
+  label: string;
+  id: string;
+  value: number;
+  unit?: string;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+};
 
+const Slider = ({
+  label,
+  id,
+  value,
+  unit = "px",
+  onChange,
+  min,
+  max,
+}: SliderProps) => {
   const handleChange = (event) => {
-    setValue(event.target.value);
+    const newValue = event.target.value;
     if (onChange) {
-      onChange(event);
+      onChange(newValue);
     }
   };
 
-  useEffect(() => {
-    setValue(defaultValue);
-  }, [defaultValue]);
-
   return (
     <div className="my-4">
       <label
@@ -29,6 +41,8 @@ const Slider = ({ label, id, defaultValue, unit = "px", onChange }) => {
         value={value}
         onChange={handleChange}
         className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+        min={min}
+        max={max}
       />
     </div>
   );
diff --git a/demo/ts/components/theme-builder/utils.ts b/demo/ts/components/theme-builder/utils.ts
new file mode 100644
index 000000000..5dd43c36b
--- /dev/null
+++ b/demo/ts/components/theme-builder/utils.ts
@@ -0,0 +1,28 @@
+import { VictoryThemeDefinition } from "victory-core";
+
+export const setNestedConfigValue = (
+  config: VictoryThemeDefinition,
+  path: string,
+  value: unknown,
+) => {
+  const pathArray = path.split(".");
+  const updatedConfig = { ...config };
+  pathArray.reduce((acc, key, i) => {
+    if (i === pathArray.length - 1) {
+      acc[key] = value;
+    } else {
+      acc[key] = { ...acc[key] };
+    }
+    return acc[key];
+  }, updatedConfig);
+
+  return updatedConfig;
+};
+
+export const getConfigValue = (
+  config: VictoryThemeDefinition,
+  path: string,
+) => {
+  const pathArray = path.split(".");
+  return pathArray.reduce((acc, key) => acc[key], config);
+};