diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index 326a59fa4..e2332f046 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -12,20 +12,20 @@ type ChartPanelProps = {
 const ChartPanel = ({
   config: { title, description, selectLabel, types },
 }: ChartPanelProps) => {
-  const [chartType, setChartType] = React.useState(Object.keys(types)[0]);
-  const { setExampleContent } = usePreviewOptions();
+  const { activeChartType, setActiveChartType, setExampleContent } =
+    usePreviewOptions();
 
   useEffect(() => {
     const newChartType = Object.keys(types)[0];
-    setChartType((prevChartType) =>
-      prevChartType !== newChartType ? newChartType : prevChartType,
+    setActiveChartType((prevChartType) =>
+      prevChartType === null ? newChartType : prevChartType,
     );
-  }, [types]);
+  }, [types, setActiveChartType]);
 
   useEffect(() => {
-    const examples = types[chartType]?.content ?? [];
+    const examples = types[activeChartType]?.content ?? [];
     setExampleContent(examples);
-  }, [types, chartType, setExampleContent]);
+  }, [types, activeChartType, setExampleContent]);
 
   const options = useMemo(
     () =>
@@ -36,12 +36,12 @@ const ChartPanel = ({
     [types],
   );
   const controls = useMemo(
-    () => types[chartType]?.controls || [],
-    [types, chartType],
+    () => types[activeChartType]?.controls || [],
+    [types, activeChartType],
   );
 
   const onChartTypeChange = (newValue: string) => {
-    setChartType(newValue);
+    setActiveChartType(newValue);
   };
 
   return (
@@ -49,7 +49,7 @@ const ChartPanel = ({
       <PanelHeader title={title} description={description} />
       <Select
         id="chart-type-select"
-        value={chartType}
+        value={activeChartType}
         onChange={onChartTypeChange}
         options={options}
         label={selectLabel}
diff --git a/website/src/pages/themes/_components/examples/area.tsx b/website/src/pages/themes/_components/examples/area.tsx
index 818787497..b8adf118a 100644
--- a/website/src/pages/themes/_components/examples/area.tsx
+++ b/website/src/pages/themes/_components/examples/area.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryArea, VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const AreaExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.AREA,
     title: "VictoryArea",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/axis.tsx b/website/src/pages/themes/_components/examples/axis.tsx
index 3b9be9c98..d6cf03e35 100644
--- a/website/src/pages/themes/_components/examples/axis.tsx
+++ b/website/src/pages/themes/_components/examples/axis.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const AxisExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.AXIS,
     title: "VictoryAxis",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/bar.tsx b/website/src/pages/themes/_components/examples/bar.tsx
index d4ca918b0..93940d5d6 100644
--- a/website/src/pages/themes/_components/examples/bar.tsx
+++ b/website/src/pages/themes/_components/examples/bar.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryBar, VictoryAxis, VictoryChart } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const BarExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.BAR,
     title: "VictoryBar",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/box-plot.tsx b/website/src/pages/themes/_components/examples/box-plot.tsx
index 147156eb5..3e450fc43 100644
--- a/website/src/pages/themes/_components/examples/box-plot.tsx
+++ b/website/src/pages/themes/_components/examples/box-plot.tsx
@@ -4,9 +4,11 @@ import React from "react";
 import { VictoryBoxPlot } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const BoxPlotExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.BOX_PLOT,
     title: "VictoryBoxPlot",
     content: (props) => (
       <VictoryBoxPlot
diff --git a/website/src/pages/themes/_components/examples/candlestick.tsx b/website/src/pages/themes/_components/examples/candlestick.tsx
index c4845a2d0..b6dca24d5 100644
--- a/website/src/pages/themes/_components/examples/candlestick.tsx
+++ b/website/src/pages/themes/_components/examples/candlestick.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryCandlestick } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const CandlestickExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.CANDLESTICK,
     title: "VictoryCandlestick",
     content: (props) => (
       <VictoryCandlestick
diff --git a/website/src/pages/themes/_components/examples/errorbar.tsx b/website/src/pages/themes/_components/examples/errorbar.tsx
index a0a48b42c..3fa2cf012 100644
--- a/website/src/pages/themes/_components/examples/errorbar.tsx
+++ b/website/src/pages/themes/_components/examples/errorbar.tsx
@@ -3,9 +3,11 @@ import React from "react";
 import { VictoryErrorBar } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const ErrorBarExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.ERROR_BAR,
     title: "VictoryErrorBar",
     content: (props) => (
       <VictoryErrorBar
diff --git a/website/src/pages/themes/_components/examples/example.ts b/website/src/pages/themes/_components/examples/example.ts
index 48a1ef537..1e93fac18 100644
--- a/website/src/pages/themes/_components/examples/example.ts
+++ b/website/src/pages/themes/_components/examples/example.ts
@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { ColorScalePropType, VictoryThemeDefinition } from "victory";
+import { VictoryComponentType } from "../../_const";
 
 type ExampleRenderProps = {
   colorScale: ColorScalePropType;
@@ -9,6 +10,7 @@ type ExampleRenderProps = {
 };
 
 export type ExampleConfig = {
+  key: VictoryComponentType;
   title: string;
   content: (props: ExampleRenderProps) => ReactElement;
   hasVictoryChart?: boolean;
diff --git a/website/src/pages/themes/_components/examples/group.tsx b/website/src/pages/themes/_components/examples/group.tsx
index a1579983b..90a996f3f 100644
--- a/website/src/pages/themes/_components/examples/group.tsx
+++ b/website/src/pages/themes/_components/examples/group.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const GroupExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.GROUP,
     title: "VictoryGroup",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/histogram.tsx b/website/src/pages/themes/_components/examples/histogram.tsx
index 6e147dd63..865b5658a 100644
--- a/website/src/pages/themes/_components/examples/histogram.tsx
+++ b/website/src/pages/themes/_components/examples/histogram.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryHistogram } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const HistogramExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.HISTOGRAM,
     title: "VictoryHistogram",
     content: (props) => (
       <VictoryHistogram
diff --git a/website/src/pages/themes/_components/examples/legend.tsx b/website/src/pages/themes/_components/examples/legend.tsx
index 87bf1f113..6094dc51b 100644
--- a/website/src/pages/themes/_components/examples/legend.tsx
+++ b/website/src/pages/themes/_components/examples/legend.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryBar, VictoryChart, VictoryLegend } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const LegendExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.LEGEND,
     title: "VictoryLegend",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/line.tsx b/website/src/pages/themes/_components/examples/line.tsx
index 2b231c764..faf5ce909 100644
--- a/website/src/pages/themes/_components/examples/line.tsx
+++ b/website/src/pages/themes/_components/examples/line.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryAxis, VictoryChart, VictoryLine } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const LineExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.LINE,
     title: "VictoryLine",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/pie.tsx b/website/src/pages/themes/_components/examples/pie.tsx
index 9e4609f59..633b4a4c0 100644
--- a/website/src/pages/themes/_components/examples/pie.tsx
+++ b/website/src/pages/themes/_components/examples/pie.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryPie } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PieExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.PIE,
     title: "VictoryPie",
     content: (props) => (
       <VictoryPie
diff --git a/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx b/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
index 6d470155c..987748d17 100644
--- a/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
+++ b/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
@@ -3,9 +3,11 @@ import React from "react";
 import { VictoryChart, VictoryPolarAxis } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PolarAxisDependentExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.POLAR_DEPENDENT_AXIS,
     title: "VictoryPolarAxis - Dependent",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/polar-axis.tsx b/website/src/pages/themes/_components/examples/polar-axis.tsx
index aedd3efc5..b73db6b6e 100644
--- a/website/src/pages/themes/_components/examples/polar-axis.tsx
+++ b/website/src/pages/themes/_components/examples/polar-axis.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryChart, VictoryPolarAxis } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const PolarAxisExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.POLAR_AXIS,
     title: "VictoryPolarAxis",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/scatter.tsx b/website/src/pages/themes/_components/examples/scatter.tsx
index b2fa3b54b..af8d67815 100644
--- a/website/src/pages/themes/_components/examples/scatter.tsx
+++ b/website/src/pages/themes/_components/examples/scatter.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryScatter } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const ScatterExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.SCATTER,
     title: "VictoryScatter",
     content: (props) => (
       <VictoryScatter
diff --git a/website/src/pages/themes/_components/examples/stack.tsx b/website/src/pages/themes/_components/examples/stack.tsx
index a68074d8e..a515cf395 100644
--- a/website/src/pages/themes/_components/examples/stack.tsx
+++ b/website/src/pages/themes/_components/examples/stack.tsx
@@ -1,11 +1,16 @@
 import React from "react";
 import { VictoryArea, VictoryAxis, VictoryChart, VictoryStack } from "victory";
-import { NUM_STACKS, sampleStackData } from "../../_const";
+import {
+  NUM_STACKS,
+  sampleStackData,
+  VictoryComponentType,
+} from "../../_const";
 
 import { ExampleConfig } from "./example";
 
 export const StackExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.STACK,
     title: "VictoryStack",
     content: (props) => (
       <VictoryChart theme={props.theme} domainPadding={20}>
diff --git a/website/src/pages/themes/_components/examples/voronoi.tsx b/website/src/pages/themes/_components/examples/voronoi.tsx
index bc57e3e8a..5f952af50 100644
--- a/website/src/pages/themes/_components/examples/voronoi.tsx
+++ b/website/src/pages/themes/_components/examples/voronoi.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { VictoryVoronoi } from "victory";
 
 import { ExampleConfig } from "./example";
+import { VictoryComponentType } from "../../_const";
 
 export const VoronoiExamples: ExampleConfig[] = [
   {
+    key: VictoryComponentType.VORONOI,
     title: "VictoryVoronoi",
     content: (props) => (
       <VictoryVoronoi
diff --git a/website/src/pages/themes/_components/sideNavButton.tsx b/website/src/pages/themes/_components/sideNavButton.tsx
index 18ff2bd3c..330d1a2a9 100644
--- a/website/src/pages/themes/_components/sideNavButton.tsx
+++ b/website/src/pages/themes/_components/sideNavButton.tsx
@@ -36,7 +36,7 @@ const SideNavButton = ({
           isActive
             ? "text-orange-100"
             : "text-grayscale-300 group-hover:text-white group-disabled:text-grayscale-800",
-          "size-6",
+          "size-5",
         )}
       />
       <span className="mt-2">{item.title}</span>
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index 56f9aa993..feee8ad19 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -1,9 +1,3 @@
-import {
-  AdjustmentsVerticalIcon,
-  CircleStackIcon,
-  GlobeAmericasIcon,
-  SwatchIcon,
-} from "@heroicons/react/24/outline";
 import clsx from "clsx";
 import React from "react";
 import {
@@ -19,7 +13,6 @@ import {
   defaultColorScale,
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
-import { TiExportOutline } from "react-icons/ti";
 import {
   AllExamples,
   ExampleConfig,
@@ -27,10 +20,12 @@ import {
   PieExamples,
   StackExamples,
 } from "./examples";
-import { HiOutlineCode } from "react-icons/hi";
 import SideNavButton from "./sideNavButton";
 import { useSideNavContext } from "../_providers/sideNavProvider";
-import { TbAxisX } from "react-icons/tb";
+import { AxisOptionsIcon, ChartOptionsIcon, ExportIcon } from "../_icons";
+import { FiGlobe } from "react-icons/fi";
+import { LuDatabase } from "react-icons/lu";
+import { HiOutlineColorSwatch, HiCode } from "react-icons/hi";
 
 export type NavItem = {
   title: string;
@@ -50,53 +45,63 @@ export type NavItem = {
     }
 );
 
+export const baseThemeItem: NavItem = {
+  title: "Base Theme",
+  Icon: LuDatabase,
+  panelType: "theme",
+  content: AllExamples,
+};
+
+export const colorPaletteItem: NavItem = {
+  title: "Color Palette",
+  Icon: HiOutlineColorSwatch,
+  config: paletteOptionsConfig,
+  panelType: "default",
+  content: [...StackExamples, ...GroupExamples, ...PieExamples],
+};
+
+export const globalOptionsItem: NavItem = {
+  title: "Global Options",
+  Icon: FiGlobe,
+  config: globalOptionsConfig,
+  panelType: "default",
+  content: AllExamples,
+};
+
+export const axisOptionsItem: NavItem = {
+  title: "Axis Options",
+  Icon: AxisOptionsIcon,
+  config: axisOptionsConfig,
+  panelType: "chart",
+  content: [],
+};
+
+export const chartOptionsItem: NavItem = {
+  title: "Chart Options",
+  Icon: ChartOptionsIcon,
+  config: chartOptionsConfig,
+  panelType: "chart",
+  content: [],
+};
+
 export const NAV_ITEMS: NavItem[] = [
-  {
-    title: "Base Theme",
-    Icon: CircleStackIcon,
-    panelType: "theme",
-    content: AllExamples,
-  },
-  {
-    title: "Color Palette",
-    Icon: SwatchIcon,
-    config: paletteOptionsConfig,
-    panelType: "default",
-    content: [...StackExamples, ...GroupExamples, ...PieExamples],
-  },
-  {
-    title: "Global Options",
-    Icon: GlobeAmericasIcon,
-    config: globalOptionsConfig,
-    panelType: "default",
-    content: AllExamples,
-  },
-  {
-    title: "Axis Options",
-    Icon: TbAxisX,
-    config: axisOptionsConfig,
-    panelType: "chart",
-    content: [],
-  },
-  {
-    title: "Chart Options",
-    Icon: AdjustmentsVerticalIcon,
-    config: chartOptionsConfig,
-    panelType: "chart",
-    content: [],
-  },
+  baseThemeItem,
+  colorPaletteItem,
+  globalOptionsItem,
+  axisOptionsItem,
+  chartOptionsItem,
 ];
 
 export const codeItem: NavItem = {
   title: "Theme Code",
-  Icon: HiOutlineCode,
+  Icon: HiCode,
   panelType: "code",
   content: [],
 };
 
 export const exportItem: NavItem = {
   title: "Export Theme",
-  Icon: TiExportOutline,
+  Icon: ExportIcon,
   panelType: "export",
   content: [],
 };
@@ -104,10 +109,12 @@ export const exportItem: NavItem = {
 const SideNav = () => {
   const { baseTheme } = useTheme();
   const { activeSideNavItem, setActiveSideNavItem } = useSideNavContext();
-  const { setExampleContent, updateColorScale } = usePreviewOptions();
+  const { setExampleContent, updateColorScale, setActiveChartType } =
+    usePreviewOptions();
   const isBaseThemeSelected = !!baseTheme;
 
   const handleItemSelect = (item: NavItem) => {
+    setActiveChartType(null);
     setActiveSideNavItem(item);
     updateColorScale(defaultColorScale);
     setExampleContent(item.content);
@@ -147,7 +154,7 @@ const SideNav = () => {
           onClick={() => handleItemSelect(exportItem)}
           disabled={!isBaseThemeSelected}
           className={clsx(
-            "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer text-theme-2 hover:underline disabled:bg-grayscale-400 disabled:text-grayscale-800 disabled:cursor-not-allowed",
+            "group flex w-full flex-col items-center rounded-md p-3 text-xs font-bold cursor-pointer text-theme-2 disabled:bg-grayscale-400 disabled:text-grayscale-800 disabled:cursor-not-allowed",
             isExportItemActive
               ? "bg-theme-1/100"
               : "bg-theme-1/80 hover:bg-theme-1/100",
@@ -155,7 +162,7 @@ const SideNav = () => {
         >
           <exportItem.Icon
             aria-hidden="true"
-            className={"size-6 group-disabled:text-grayscale-800"}
+            className={"size-5 group-disabled:text-grayscale-800"}
           />
           <span className="mt-2">{exportItem.title}</span>
         </button>
diff --git a/website/src/pages/themes/_components/theme-preview/index.tsx b/website/src/pages/themes/_components/theme-preview/index.tsx
index 37279970c..ab214274c 100644
--- a/website/src/pages/themes/_components/theme-preview/index.tsx
+++ b/website/src/pages/themes/_components/theme-preview/index.tsx
@@ -25,6 +25,7 @@ export function ThemePreview() {
               colorScale={colorScale as ColorScalePropType}
               showTooltips={showTooltips}
               theme={customThemeConfig}
+              showOptions={exampleContent.length > 1}
             />
           ))}
         </div>
diff --git a/website/src/pages/themes/_components/theme-preview/preview.tsx b/website/src/pages/themes/_components/theme-preview/preview.tsx
index 92790b187..079732cfd 100644
--- a/website/src/pages/themes/_components/theme-preview/preview.tsx
+++ b/website/src/pages/themes/_components/theme-preview/preview.tsx
@@ -6,20 +6,61 @@ import {
   VictoryTooltip,
 } from "victory";
 import { ExampleConfig } from "../examples";
+import { useSideNavContext } from "../../_providers/sideNavProvider";
+import { axisOptionsItem, chartOptionsItem } from "../sidenav";
+import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
+import { VictoryComponentType } from "../../_const";
+import { AdjustmentsVerticalIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   config: ExampleConfig;
   theme: VictoryThemeDefinition;
   colorScale: ColorScalePropType;
   showTooltips: boolean;
+  showOptions: boolean;
 };
 
-export function Preview({ config, theme, colorScale, showTooltips }: Props) {
-  const { content: Content, title } = config;
+export function Preview({
+  config,
+  theme,
+  colorScale,
+  showTooltips,
+  showOptions = true,
+}: Props) {
+  const { content: Content, title, key } = config;
+  const { setActiveChartType } = usePreviewOptions();
+  const { setActiveSideNavItem } = useSideNavContext();
+
+  const handleOptionsClick = () => {
+    if (
+      [
+        VictoryComponentType.AXIS,
+        VictoryComponentType.POLAR_AXIS,
+        VictoryComponentType.POLAR_DEPENDENT_AXIS,
+      ].includes(key)
+    ) {
+      setActiveSideNavItem(axisOptionsItem);
+    } else {
+      setActiveSideNavItem(chartOptionsItem);
+    }
+    setActiveChartType(key);
+    if (typeof window !== "undefined") window.scrollTo(0, 0);
+  };
 
   return (
     <div className="border border-solid border-gray-200 p-8">
-      <h3 className="text-lg font-bold mb-3">{title}</h3>
+      <div className="flex justify-between items-center mb-3">
+        <h3 className="text-lg font-bold mb-0">{title}</h3>
+        {showOptions && (
+          <button
+            onClick={handleOptionsClick}
+            className="bg-transparent border border-gray-200 font-sans font-medium cursor-pointer p-1.5 -m-1 rounded-md hover:bg-gray-200 flex items-center justify-center text-gray-500"
+          >
+            Chart Options
+            <AdjustmentsVerticalIcon className="ml-1 size-5" />
+          </button>
+        )}
+      </div>
       {Content({
         labels: ({ datum }) => datum.y || datum.x,
         colorScale: colorScale as ColorScalePropType,
diff --git a/website/src/pages/themes/_config/axis.tsx b/website/src/pages/themes/_config/axis.tsx
index 83f258804..977245706 100644
--- a/website/src/pages/themes/_config/axis.tsx
+++ b/website/src/pages/themes/_config/axis.tsx
@@ -1,5 +1,5 @@
 import { getBaseLabelsConfig, getBaseStrokeConfig } from "../_utils";
-import { StrokeProps } from "../_const";
+import { StrokeProps, VictoryComponentType } from "../_const";
 import { ControlConfig } from ".";
 import {
   AxisExamples,
@@ -150,9 +150,10 @@ const axisOptionsConfig = {
   description: "Customize the appearance of axes.",
   selectLabel: "Axis Type",
   types: {
-    base: generalAxisOptionsConfig,
-    polarAxis: polarAxisOptionsConfig,
-    polarDependentAxis: polarDependentAxisOptionsConfig,
+    [VictoryComponentType.AXIS]: generalAxisOptionsConfig,
+    [VictoryComponentType.POLAR_AXIS]: polarAxisOptionsConfig,
+    [VictoryComponentType.POLAR_DEPENDENT_AXIS]:
+      polarDependentAxisOptionsConfig,
   },
 };
 
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index 5c50be22e..6eef98e57 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -4,7 +4,7 @@ import {
   getNestedColorScaleConfig,
 } from "../_utils";
 import { ControlConfig } from ".";
-import { StrokeProps } from "../_const";
+import { VictoryComponentType, StrokeProps } from "../_const";
 import {
   AreaExamples,
   BarExamples,
@@ -24,7 +24,7 @@ import {
 const chartConfigs: {
   [key: string]: ControlConfig;
 } = {
-  area: {
+  [VictoryComponentType.AREA]: {
     type: "section",
     label: "Area Chart",
     content: AreaExamples,
@@ -59,7 +59,7 @@ const chartConfigs: {
       },
     ],
   },
-  bar: {
+  [VictoryComponentType.BAR]: {
     type: "section",
     label: "Bar Chart",
     content: BarExamples,
@@ -101,7 +101,7 @@ const chartConfigs: {
       },
     ],
   },
-  boxPlot: {
+  [VictoryComponentType.BOX_PLOT]: {
     type: "section",
     label: "Box Plot",
     content: BoxPlotExamples,
@@ -189,7 +189,7 @@ const chartConfigs: {
       },
     ],
   },
-  candlestick: {
+  [VictoryComponentType.CANDLESTICK]: {
     type: "section",
     label: "Candlestick Chart",
     content: CandlestickExamples,
@@ -242,7 +242,7 @@ const chartConfigs: {
       },
     ],
   },
-  errorBar: {
+  [VictoryComponentType.ERROR_BAR]: {
     type: "section",
     label: "Error Bar",
     content: ErrorBarExamples,
@@ -273,7 +273,7 @@ const chartConfigs: {
       },
     ],
   },
-  histogram: {
+  [VictoryComponentType.HISTOGRAM]: {
     type: "section",
     label: "Histogram",
     content: HistogramExamples,
@@ -319,7 +319,7 @@ const chartConfigs: {
       },
     ],
   },
-  group: {
+  [VictoryComponentType.GROUP]: {
     type: "section",
     label: "Group",
     content: GroupExamples,
@@ -341,7 +341,7 @@ const chartConfigs: {
       },
     ],
   },
-  legend: {
+  [VictoryComponentType.LEGEND]: {
     type: "section",
     label: "Legend",
     content: LegendExamples,
@@ -419,7 +419,7 @@ const chartConfigs: {
       },
     ],
   },
-  line: {
+  [VictoryComponentType.LINE]: {
     type: "section",
     label: "Line Chart",
     content: LineExamples,
@@ -441,7 +441,7 @@ const chartConfigs: {
       },
     ],
   },
-  pie: {
+  [VictoryComponentType.PIE]: {
     type: "section",
     label: "Pie Chart",
     content: PieExamples,
@@ -472,7 +472,7 @@ const chartConfigs: {
       },
     ],
   },
-  scatter: {
+  [VictoryComponentType.SCATTER]: {
     type: "section",
     label: "Scatter Chart",
     content: ScatterExamples,
@@ -507,7 +507,7 @@ const chartConfigs: {
       },
     ],
   },
-  stack: {
+  [VictoryComponentType.STACK]: {
     type: "section",
     label: "Stack",
     content: StackExamples,
@@ -529,7 +529,7 @@ const chartConfigs: {
       },
     ],
   },
-  tooltip: {
+  [VictoryComponentType.TOOLTIP]: {
     type: "section",
     label: "Tooltip",
     controls: [
@@ -580,7 +580,7 @@ const chartConfigs: {
       },
     ],
   },
-  voronoi: {
+  [VictoryComponentType.VORONOI]: {
     type: "section",
     label: "Voronoi",
     content: VoronoiExamples,
diff --git a/website/src/pages/themes/_const.tsx b/website/src/pages/themes/_const.tsx
index d5f992692..a98caf14c 100644
--- a/website/src/pages/themes/_const.tsx
+++ b/website/src/pages/themes/_const.tsx
@@ -65,3 +65,23 @@ export enum StrokeProps {
   STROKE_LINE_CAP = "Stroke Line Cap",
   STROKE_LINE_JOIN = "Stroke Line Join",
 }
+
+export enum VictoryComponentType {
+  AREA = "area",
+  AXIS = "axis",
+  BAR = "bar",
+  BOX_PLOT = "boxPlot",
+  CANDLESTICK = "candlestick",
+  ERROR_BAR = "errorBar",
+  HISTOGRAM = "histogram",
+  GROUP = "group",
+  LEGEND = "legend",
+  LINE = "line",
+  PIE = "pie",
+  POLAR_AXIS = "polarAxis",
+  POLAR_DEPENDENT_AXIS = "polarDependentAxis",
+  SCATTER = "scatter",
+  STACK = "stack",
+  TOOLTIP = "tooltip",
+  VORONOI = "voronoi",
+}
diff --git a/website/src/pages/themes/_icons/axis-options-icon.tsx b/website/src/pages/themes/_icons/axis-options-icon.tsx
new file mode 100644
index 000000000..c32eda722
--- /dev/null
+++ b/website/src/pages/themes/_icons/axis-options-icon.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const AxisOptionsIcon = ({ className, ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M3.75 3.75C3.75 2.98945 3.13555 2.375 2.375 2.375C1.61445 2.375 1 2.98945 1 3.75V18.1875C1 20.0867 2.53828 21.625 4.4375 21.625H21.625C22.3855 21.625 23 21.0105 23 20.25C23 19.4895 22.3855 18.875 21.625 18.875H4.4375C4.05938 18.875 3.75 18.5656 3.75 18.1875V3.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.6207 7.34081C21.0752 7.79523 21.0752 8.53321 20.6207 8.98763L20.6244 8.99126L15.9711 13.6445C15.5167 14.0989 14.7787 14.0989 14.3243 13.6445L12.2376 11.5578L8.98763 14.8042C8.53321 15.2586 7.79523 15.2586 7.34081 14.8042C6.8864 14.3498 6.8864 13.6118 7.34081 13.1574L11.4124 9.08578C11.8668 8.63136 12.6048 8.63136 13.0592 9.08578L15.1459 11.1725L18.9739 7.34081C19.4283 6.8864 20.1663 6.8864 20.6207 7.34081Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+export default AxisOptionsIcon;
diff --git a/website/src/pages/themes/_icons/chart-options-icon.tsx b/website/src/pages/themes/_icons/chart-options-icon.tsx
new file mode 100644
index 000000000..82f6379c7
--- /dev/null
+++ b/website/src/pages/themes/_icons/chart-options-icon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+const ChartOptionsIcon = ({ className, ...props }) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <g clipPath="url(#clip0_398_1136)">
+      <path
+        d="M8.66656 17.5556H6.44434V10.7778C6.44434 10.2255 6.89205 9.77778 7.44434 9.77778H7.66656C8.21884 9.77778 8.66656 10.2255 8.66656 10.7778V17.5556ZM13.111 17.5556H10.8888V7.44444C10.8888 6.89216 11.3365 6.44444 11.8888 6.44444H12.111C12.6633 6.44444 13.111 6.89216 13.111 7.44444V17.5556ZM17.5554 17.5556H15.3332V14.1111C15.3332 13.5588 15.7809 13.1111 16.3332 13.1111H16.5554C17.1077 13.1111 17.5554 13.5588 17.5554 14.1111V17.5556ZM20.3332 19.8889H3.66656V4.22222H20.3332V19.8889ZM20.3332 2H3.66656C2.44434 2 1.44434 3 1.44434 4.22222V19.7778C1.44434 21 2.44434 22 3.66656 22H20.3332C21.5554 22 22.5554 21 22.5554 19.7778V4.22222C22.5554 3 21.5554 2 20.3332 2Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_398_1136">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default ChartOptionsIcon;
diff --git a/website/src/pages/themes/_icons/export-icon.tsx b/website/src/pages/themes/_icons/export-icon.tsx
new file mode 100644
index 000000000..f903c9072
--- /dev/null
+++ b/website/src/pages/themes/_icons/export-icon.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const ExportIcon = ({ className, ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M8.3335 5.61003H5.00016C4.55814 5.61003 4.13421 5.78562 3.82165 6.09818C3.50909 6.41074 3.3335 6.83467 3.3335 7.27669V15.61C3.3335 16.0521 3.50909 16.476 3.82165 16.7885C4.13421 17.1011 4.55814 17.2767 5.00016 17.2767H13.3335C13.7755 17.2767 14.1994 17.1011 14.512 16.7885C14.8246 16.476 15.0002 16.0521 15.0002 15.61V12.2767M11.6668 3.94336H16.6668M16.6668 3.94336V8.94336M16.6668 3.94336L8.3335 12.2767"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+export default ExportIcon;
diff --git a/website/src/pages/themes/_icons/index.tsx b/website/src/pages/themes/_icons/index.tsx
new file mode 100644
index 000000000..4575afcba
--- /dev/null
+++ b/website/src/pages/themes/_icons/index.tsx
@@ -0,0 +1,3 @@
+export { default as ChartOptionsIcon } from "./chart-options-icon";
+export { default as AxisOptionsIcon } from "./axis-options-icon";
+export { default as ExportIcon } from "./export-icon";
diff --git a/website/src/pages/themes/_providers/previewOptionsProvider.tsx b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
index fa1e22e7d..cf34384f1 100644
--- a/website/src/pages/themes/_providers/previewOptionsProvider.tsx
+++ b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
@@ -1,14 +1,19 @@
 import React, { createContext, useContext } from "react";
 import { AllExamples, ExampleConfig } from "../_components/examples";
+import { VictoryComponentType } from "../_const";
 
 type PreviewOptionsContextType = {
   colorScale?: string;
   updateColorScale: (newColorScale?: string) => void;
   showTooltips: boolean;
-  setShowTooltips: (showTooltips: boolean) => void;
+  setShowTooltips: React.Dispatch<React.SetStateAction<boolean>>;
   resetPreviewOptions: () => void;
   exampleContent: ExampleConfig[];
-  setExampleContent: (content: ExampleConfig[]) => void;
+  setExampleContent: React.Dispatch<React.SetStateAction<ExampleConfig[]>>;
+  activeChartType: VictoryComponentType | null;
+  setActiveChartType: React.Dispatch<
+    React.SetStateAction<VictoryComponentType | null>
+  >;
 };
 
 export const defaultColorScale = undefined;
@@ -23,6 +28,8 @@ export const PreviewOptionsProvider = ({ children }) => {
     defaultColorScale,
   );
   const [showTooltips, setShowTooltips] = React.useState(defaultShowTooltips);
+  const [activeChartType, setActiveChartType] =
+    React.useState<VictoryComponentType | null>(null);
   const [exampleContent, setExampleContent] = React.useState(AllExamples);
 
   const updateColorScale = (newColorScale?: string) => {
@@ -45,6 +52,8 @@ export const PreviewOptionsProvider = ({ children }) => {
         resetPreviewOptions,
         exampleContent,
         setExampleContent,
+        activeChartType,
+        setActiveChartType,
       }}
     >
       {children}