diff --git a/demo/ts/components/theme-builder/accordion.tsx b/demo/ts/components/theme-builder/accordion.tsx
index 02ac5a557..5578b4d5a 100644
--- a/demo/ts/components/theme-builder/accordion.tsx
+++ b/demo/ts/components/theme-builder/accordion.tsx
@@ -2,8 +2,20 @@ import React from "react";
 import clsx from "clsx";
 import { FaChevronDown } from "react-icons/fa";
 
-const Accordion = ({ id, title, children }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+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);
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
index 1c069426d..41f12a845 100644
--- a/demo/ts/components/theme-builder/config-mapper.tsx
+++ b/demo/ts/components/theme-builder/config-mapper.tsx
@@ -4,39 +4,68 @@ 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,
-  handleLabelConfigChange,
 }) => {
+  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) => (
-        <Accordion key={section.title} title={section.title} id={section.title}>
+      {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 (
-                <Select
+                <ColorScaleOptions
                   key={field.label}
-                  id="color-scale-select"
-                  value={activeColorScale}
-                  onChange={handleColorScaleChange}
-                  options={field.options}
-                  label={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}
-                  defaultValue={field.default}
+                  value={configValue as number}
                   unit={field.unit}
-                  onChange={(value) =>
-                    handleLabelConfigChange({ [field.label]: value })
+                  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)
                   }
                 />
               );
@@ -47,10 +76,11 @@ const ConfigMapper = ({
                   id={field.label}
                   key={field.label}
                   label={field.label}
-                  color={field.default}
-                  onColorChange={(color) =>
-                    handleLabelConfigChange({ [field.label]: color })
+                  color={configValue as string}
+                  onColorChange={(newColor) =>
+                    updateThemeConfig(field.path, newColor)
                   }
+                  showColorName
                 />
               );
             }
diff --git a/demo/ts/components/theme-builder/index.tsx b/demo/ts/components/theme-builder/index.tsx
index 83a4f252c..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,14 +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;
@@ -84,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 = () => {
@@ -155,29 +127,12 @@ const ThemeBuilder = () => {
           />
           {customThemeConfig && (
             <section>
-              <h2 className="text-lg font-bold mb-4">Customization Options</h2>
+              <h2 className="text-lg font-bold my-4">Customization Options</h2>
               <ConfigMapper
+                themeConfig={customThemeConfig}
                 activeColorScale={activeColorScale}
                 handleColorScaleChange={handleColorScaleChange}
-                handleLabelConfigChange={handleLabelConfigChange}
-              />
-            </section>
-          )}
-          {false && (
-            <section>
-              <h2 className="text-lg font-bold mb-4">Customization Options</h2>
-              <h3 className="text-lg font-bold mb-4">Color Options</h3>
-              <ColorScaleOptions
-                activeColorScale={activeColorScale}
-                palette={customThemeConfig?.palette}
-                onColorChange={handleColorChange}
-                onColorScaleChange={handleColorScaleChange}
-              />
-              <LabelOptions
-                labelConfig={
-                  customThemeConfig?.axis?.style?.axisLabel as LabelProps
-                }
-                onLabelConfigChange={handleLabelConfigChange}
+                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
index dad4d267b..e5c285e91 100644
--- a/demo/ts/components/theme-builder/options-config.ts
+++ b/demo/ts/components/theme-builder/options-config.ts
@@ -6,8 +6,6 @@ const optionsConfig = [
       {
         type: "colorScale",
         label: "Color Scale",
-        options: ["Qualitative", "Sequential", "Diverging"],
-        default: "Qualitative",
       },
     ],
   },
@@ -20,21 +18,21 @@ const optionsConfig = [
         label: "Font Size",
         min: 10,
         max: 24,
-        default: 12,
         unit: "px",
+        path: "axis.style.axisLabel.fontSize",
       },
       {
         type: "slider",
         label: "Padding",
         min: 0,
         max: 50,
-        default: 35,
         unit: "px",
+        path: "axis.style.axisLabel.padding",
       },
       {
         type: "colorPicker",
         label: "Fill",
-        default: "#292929",
+        path: "axis.style.axisLabel.fill",
       },
     ],
   },
diff --git a/demo/ts/components/theme-builder/select.tsx b/demo/ts/components/theme-builder/select.tsx
index 675fa5a6b..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,25 +11,38 @@ 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">
+    <div className={clsx("relative w-full", className)}>
       {label && (
-        <label htmlFor={id} className="block mb-1 text-sm">
+        <label htmlFor={id} className="block mb-1 text-sm font-bold">
           {label}
         </label>
       )}
       <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..a259519e0
--- /dev/null
+++ b/demo/ts/components/theme-builder/utils.ts
@@ -0,0 +1,28 @@
+import { VictoryThemeDefinition } from "victory-core/lib";
+
+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);
+};