diff --git a/src/pages/Harmonies.tsx b/src/pages/Harmonies.tsx
index b72a6d6..5714fac 100644
--- a/src/pages/Harmonies.tsx
+++ b/src/pages/Harmonies.tsx
@@ -1,9 +1,104 @@
 import cx from 'clsx';
-import { Outlet } from 'react-router-dom';
+import { useMemo, useState } from 'react';
+import { useColorFunction } from '../ColorFunctionContext';
+import { ColorPicker } from '../components/ColorPicker';
 import { VSegmentedControl } from '../components/VSegmentedControl';
+import { HarmonyColor } from '../models';
+import { HarmonyPreview } from '../page-components/harmonies/HarmonyPreview';
 import styles from './Harmonies.module.css';
 
 export function Harmonies() {
+  const { colorFn } = useColorFunction();
+  const [seletedColor, setSelectedColor] = useState('000000');
+  const [selectedMode, setSelectedMode] = useState('complementary');
+  const generatedColors = useMemo(() => {
+    try {
+      console.debug('[Mode]', selectedMode);
+      const colors: HarmonyColor[] = [];
+      switch (selectedMode) {
+        case 'complementary':
+          {
+            colors.push({ color: seletedColor, ratio: 65 });
+            const compColor = colorFn?.complementary(seletedColor) ?? '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: 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: analogousColors[0], ratio: 35 });
+            colors.push({ color: analogousColors[1], ratio: 10 });
+            const compColor = colorFn?.complementary(seletedColor) ?? '000000';
+            colors.push({ color: compColor, ratio: 10 });
+          }
+          break;
+        case 'triadic':
+          {
+            colors.push({ color: seletedColor, ratio: 60 });
+            const triadicColors = colorFn?.triadic(seletedColor) ?? [];
+            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: 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: tetradicColors[0], ratio: 35 });
+            colors.push({ color: tetradicColors[1], ratio: 10 });
+            colors.push({ color: tetradicColors[2], ratio: 10 });
+          }
+          break;
+        case 'flip_tetradic':
+          {
+            colors.push({ color: seletedColor, ratio: 55 });
+            const color120 = colorFn?.shift_hue(seletedColor, 120) ?? '000000';
+            colors.push({ color: color120, ratio: 35 });
+            const compColor = colorFn?.complementary(seletedColor) ?? '000000';
+            colors.push({ color: compColor, ratio: 10 });
+            const color240 = colorFn?.shift_hue(seletedColor, 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: color90, ratio: 35 });
+            const compColor = colorFn?.complementary(seletedColor) ?? '000000';
+            colors.push({ color: compColor, ratio: 10 });
+            const color270 = colorFn?.shift_hue(seletedColor, 270) ?? '000000';
+            colors.push({ color: color270, ratio: 10 });
+          }
+          break;
+        default:
+          break;
+      }
+      console.debug('[Generated colors]', colors);
+      return colors;
+    } catch (error) {
+      console.error('[Generate Color Series]', error);
+    }
+    return [] as HarmonyColor[];
+  }, [seletedColor, selectedMode]);
+
   return (
     <div className={cx('workspace', styles.harmonies_workspace)}>
       <header>
@@ -14,10 +109,12 @@ export function Harmonies() {
         <aside className={styles.function_side}>
           <div>
             <h5>Basic color</h5>
+            <ColorPicker onSelect={setSelectedColor} />
           </div>
           <div className={styles.mode_navigation}>
             <h5>Color selection method</h5>
             <VSegmentedControl
+              onChange={setSelectedMode}
               options={[
                 { label: 'Complementary', value: 'complementary' },
                 { label: 'Analogous', value: 'analogous' },
@@ -32,7 +129,7 @@ export function Harmonies() {
           </div>
         </aside>
         <div className={styles.preview_side}>
-          <Outlet />
+          <HarmonyPreview colors={generatedColors} />
         </div>
       </section>
     </div>