diff --git a/src/pages/Harmonies.tsx b/src/pages/Harmonies.tsx
index 864934b..af77d58 100644
--- a/src/pages/Harmonies.tsx
+++ b/src/pages/Harmonies.tsx
@@ -11,7 +11,7 @@ import styles from './Harmonies.module.css';
 
 export function Harmonies() {
   const { colorFn } = useColorFunction();
-  const [seletedColor, setSelectedColor] = useAtom(currentPickedColor);
+  const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [selectedMode, setSelectedMode] = useState('complementary');
   const generatedColors = useMemo(() => {
     try {
@@ -19,49 +19,49 @@ export function Harmonies() {
       switch (selectedMode) {
         case 'complementary':
           {
-            colors.push({ color: seletedColor, ratio: 65 });
-            const compColor = colorFn?.complementary(seletedColor) ?? '000000';
+            colors.push({ color: selectedColor, ratio: 65 });
+            const compColor = colorFn?.complementary(selectedColor) ?? '000000';
             colors.push({ color: compColor, ratio: 35 });
           }
           break;
         case 'analogous':
           {
-            colors.push({ color: seletedColor, ratio: 60 });
-            const analogousColors = colorFn?.analogous_30(seletedColor) ?? [];
+            colors.push({ color: selectedColor, ratio: 60 });
+            const analogousColors = colorFn?.analogous_30(selectedColor) ?? [];
             colors.push({ color: analogousColors[0], ratio: 30 });
             colors.push({ color: analogousColors[1], ratio: 10 });
           }
           break;
         case 'analogous_with_complementary':
           {
-            colors.push({ color: seletedColor, ratio: 55 });
-            const analogousColors = colorFn?.analogous_30(seletedColor) ?? [];
+            colors.push({ color: selectedColor, ratio: 55 });
+            const analogousColors = colorFn?.analogous_30(selectedColor) ?? [];
             colors.push({ color: analogousColors[0], ratio: 35 });
             colors.push({ color: analogousColors[1], ratio: 10 });
-            const compColor = colorFn?.complementary(seletedColor) ?? '000000';
+            const compColor = colorFn?.complementary(selectedColor) ?? '000000';
             colors.push({ color: compColor, ratio: 10 });
           }
           break;
         case 'triadic':
           {
-            colors.push({ color: seletedColor, ratio: 60 });
-            const triadicColors = colorFn?.triadic(seletedColor) ?? [];
+            colors.push({ color: selectedColor, ratio: 60 });
+            const triadicColors = colorFn?.triadic(selectedColor) ?? [];
             colors.push({ color: triadicColors[0], ratio: 30 });
             colors.push({ color: triadicColors[1], ratio: 10 });
           }
           break;
         case 'split_complementary':
           {
-            colors.push({ color: seletedColor, ratio: 60 });
-            const splitCompColors = colorFn?.split_complementary(seletedColor) ?? [];
+            colors.push({ color: selectedColor, ratio: 60 });
+            const splitCompColors = colorFn?.split_complementary(selectedColor) ?? [];
             colors.push({ color: splitCompColors[0], ratio: 30 });
             colors.push({ color: splitCompColors[1], ratio: 10 });
           }
           break;
         case 'tetradic':
           {
-            colors.push({ color: seletedColor, ratio: 55 });
-            const tetradicColors = colorFn?.tetradic(seletedColor) ?? [];
+            colors.push({ color: selectedColor, ratio: 55 });
+            const tetradicColors = colorFn?.tetradic(selectedColor) ?? [];
             colors.push({ color: tetradicColors[0], ratio: 35 });
             colors.push({ color: tetradicColors[1], ratio: 10 });
             colors.push({ color: tetradicColors[2], ratio: 10 });
@@ -69,23 +69,23 @@ export function Harmonies() {
           break;
         case 'flip_tetradic':
           {
-            colors.push({ color: seletedColor, ratio: 55 });
-            const color120 = colorFn?.shift_hue(seletedColor, 120) ?? '000000';
+            colors.push({ color: selectedColor, ratio: 55 });
+            const color120 = colorFn?.shift_hue(selectedColor, 120) ?? '000000';
             colors.push({ color: color120, ratio: 35 });
-            const compColor = colorFn?.complementary(seletedColor) ?? '000000';
+            const compColor = colorFn?.complementary(selectedColor) ?? '000000';
             colors.push({ color: compColor, ratio: 10 });
-            const color240 = colorFn?.shift_hue(seletedColor, 240) ?? '000000';
+            const color240 = colorFn?.shift_hue(selectedColor, 240) ?? '000000';
             colors.push({ color: color240, ratio: 10 });
           }
           break;
         case 'square':
           {
-            colors.push({ color: seletedColor, ratio: 55 });
-            const color90 = colorFn?.shift_hue(seletedColor, 90) ?? '000000';
+            colors.push({ color: selectedColor, ratio: 55 });
+            const color90 = colorFn?.shift_hue(selectedColor, 90) ?? '000000';
             colors.push({ color: color90, ratio: 35 });
-            const compColor = colorFn?.complementary(seletedColor) ?? '000000';
+            const compColor = colorFn?.complementary(selectedColor) ?? '000000';
             colors.push({ color: compColor, ratio: 10 });
-            const color270 = colorFn?.shift_hue(seletedColor, 270) ?? '000000';
+            const color270 = colorFn?.shift_hue(selectedColor, 270) ?? '000000';
             colors.push({ color: color270, ratio: 10 });
           }
           break;
@@ -97,7 +97,7 @@ export function Harmonies() {
       console.error('[Generate Color Series]', error);
     }
     return [] as HarmonyColor[];
-  }, [seletedColor, selectedMode]);
+  }, [selectedColor, selectedMode]);
 
   return (
     <div className={cx('workspace', styles.harmonies_workspace)}>
@@ -109,7 +109,7 @@ export function Harmonies() {
         <aside className={styles.function_side}>
           <div>
             <h5>Basic color</h5>
-            <ColorPicker color={seletedColor} onSelect={(color) => setSelectedColor(color)} />
+            <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
           </div>
           <div className={styles.mode_navigation}>
             <h5>Color selection method</h5>