diff --git a/src/pages/Tones.tsx b/src/pages/Tones.tsx
index e68d6bc..8477a5d 100644
--- a/src/pages/Tones.tsx
+++ b/src/pages/Tones.tsx
@@ -7,6 +7,7 @@ import { ColorPicker } from '../components/ColorPicker';
 import { FlexColorStand } from '../components/FlexColorStand';
 import { HSegmentedControl } from '../components/HSegmentedControl';
 import { LabeledPicker } from '../components/LabeledPicker';
+import { ScrollArea } from '../components/ScrollArea';
 import { currentPickedColor } from '../stores/colors';
 import styles from './Tones.module.css';
 
@@ -42,66 +43,68 @@ export function Tones() {
         <h3>Color Tones</h3>
         <p>By regularly changing the color hue to generate a series of light and dark colors.</p>
       </header>
-      <section className={styles.explore_section}>
-        <aside className={styles.function_side}>
-          <div>
-            <h5>Basic color</h5>
-            <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
+      <ScrollArea enableY>
+        <section className={styles.explore_section}>
+          <aside className={styles.function_side}>
+            <div>
+              <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={(value) => {
+                  setTones(toInteger(value));
+                  setSeedBias(0);
+                }}
+              />
+              <LabeledPicker
+                title="Basic Bias"
+                min={-(tones - 1)}
+                max={tones - 1}
+                value={seedBias}
+                onChange={(value) => setSeedBias(toInteger(value))}
+              />
+              <LabeledPicker
+                title="Tone Step"
+                min={10}
+                max={25}
+                step={1}
+                unit="%"
+                value={steps}
+                onChange={setSteps}
+              />
+            </div>
+          </aside>
+          <div className={styles.tones_content}>
+            <h5>Color Tones</h5>
+            <div className={styles.color_value_mode}>
+              <label>Copy color value in</label>
+              <HSegmentedControl
+                options={[
+                  { label: 'HEX', value: 'hex' },
+                  { label: 'RGB', value: 'rgb' },
+                  { label: 'HSL', value: 'hsl' },
+                  { label: 'LAB', value: 'lab' },
+                  { label: 'OKLCH', value: 'oklch' },
+                ]}
+                valu={mode}
+                onChange={setMode}
+              />
+            </div>
+            <div className={styles.colors_booth}>
+              {colors.map((c, index) => (
+                <FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
+              ))}
+            </div>
           </div>
-          <div>
-            <h5>Series Setting</h5>
-            <LabeledPicker
-              title="Expand Tones"
-              min={1}
-              max={5}
-              step={1}
-              value={tones}
-              onChange={(value) => {
-                setTones(toInteger(value));
-                setSeedBias(0);
-              }}
-            />
-            <LabeledPicker
-              title="Basic Bias"
-              min={-(tones - 1)}
-              max={tones - 1}
-              value={seedBias}
-              onChange={(value) => setSeedBias(toInteger(value))}
-            />
-            <LabeledPicker
-              title="Tone Step"
-              min={10}
-              max={25}
-              step={1}
-              unit="%"
-              value={steps}
-              onChange={setSteps}
-            />
-          </div>
-        </aside>
-        <div className={styles.tones_content}>
-          <h5>Color Tones</h5>
-          <div className={styles.color_value_mode}>
-            <label>Copy color value in</label>
-            <HSegmentedControl
-              options={[
-                { label: 'HEX', value: 'hex' },
-                { label: 'RGB', value: 'rgb' },
-                { label: 'HSL', value: 'hsl' },
-                { label: 'LAB', value: 'lab' },
-                { label: 'OKLCH', value: 'oklch' },
-              ]}
-              valu={mode}
-              onChange={setMode}
-            />
-          </div>
-          <div className={styles.colors_booth}>
-            {colors.map((c, index) => (
-              <FlexColorStand key={`${c}-${index}`} color={c} valueMode={mode} />
-            ))}
-          </div>
-        </div>
-      </section>
+        </section>
+      </ScrollArea>
     </div>
   );
 }