diff --git a/src/pages/Wheels.tsx b/src/pages/Wheels.tsx
index a2cd2a7..1ae852c 100644
--- a/src/pages/Wheels.tsx
+++ b/src/pages/Wheels.tsx
@@ -2,6 +2,7 @@ import cx from 'clsx';
 import { useAtom } from 'jotai';
 import { useState } from 'react';
 import { ColorPicker } from '../components/ColorPicker';
+import { LabeledPicker } from '../components/LabeledPicker';
 import { VSegmentedControl } from '../components/VSegmentedControl';
 import { ColorWheel } from '../page-components/wheels/ColorWheel';
 import { currentPickedColor } from '../stores/colors';
@@ -10,6 +11,8 @@ import styles from './Wheels.module.css';
 export function Wheels() {
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [selectedMode, setSelectedMode] = useState('complementary');
+  const [steps, setSteps] = useState(10);
+  const [tones, setTones] = useState(4);
 
   return (
     <div className={cx('workspace', styles.wheels_workspace)}>
@@ -23,6 +26,26 @@ export function Wheels() {
             <h5>Basic color</h5>
             <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
           </div>
+          <div>
+            <h5>Series Setting</h5>
+            <LabeledPicker
+              title="Expand Tones"
+              min={1}
+              max={5}
+              step={1}
+              value={tones}
+              onChange={setTones}
+            />
+            <LabeledPicker
+              title="Tone Step"
+              min={5}
+              max={50}
+              step={1}
+              unit="%"
+              value={steps}
+              onChange={setSteps}
+            />
+          </div>
           <div className={styles.mode_navigation}>
             <h5>Color selection method</h5>
             <VSegmentedControl