diff --git a/apps/web/store/store.ts b/apps/web/store/store.ts
index 73c7d14..afba0c3 100644
--- a/apps/web/store/store.ts
+++ b/apps/web/store/store.ts
@@ -1,178 +1,37 @@
-// import Zustand and immer
-import { create } from "zustand";
-import { produce } from "immer";
-import {
-  BaseColorTypes,
-  BaseColors,
-  ColorMode,
-  ColorPalettes,
-  ColorValue,
-  RawColor,
-} from "@/types/app";
-import { generateBaseColors } from "@/lib/generateBaseColors";
-
-import {
-  persist,
-  createJSONStorage,
-  devtools,
-  PersistOptions,
-} from "zustand/middleware";
-import { generateColorPalette } from "@/lib/colorCalculator";
-import { updateCSSVariables } from "@/lib/updateCssVariables";
-import { generateReadability } from "@/lib/generateReadability";
+import { getColorNames } from '@/app/actions'
+import { generateColors } from '@/data/generate-colors'
+import { ColorNames, ColorOptions, GeneratedColors } from '@/types/app'
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
 
 // Zustand store type
 export type ColorStore = {
-  colorMode: ColorMode;
-  baseColors: Omit<BaseColors, "gray">;
-  colorPalettes: ColorPalettes;
-  showReadability: boolean;
-  setColorMode: (mode: ColorMode) => void;
-  generatePalette: (existing?: boolean) => void;
-  updateBaseColor: (newBaseColor: keyof BaseColors, newColor: RawColor) => void;
-};
-
-let localAndUrlStore = (set, get) => ({
-  colorMode: ColorMode.HEX,
-  baseColors: undefined,
-  colorPalettes: {
-    primary: [],
-    secondary: [],
-    accent: [],
-    gray: [],
-  },
-  showReadability: false,
-  setColorMode: (mode) => set({ colorMode: mode }),
-  updateBaseColor: (type: BaseColorTypes, newColor: RawColor) => {
-    const [newPalette, grayPalette] = [
-      generateColorPalette({
-        color: newColor,
-        type: type,
-        colorMode: get().colorMode,
-      }),
-      generateColorPalette({
-        color: type === "primary" ? newColor : get().baseColors.primary,
-        type: "gray",
-        colorMode: get().colorMode,
-      }),
-    ];
-    /* Calculate WCAG 2.0 */
-    const foreground = grayPalette[0];
-    const background = grayPalette[10];
-    const palettesWithReadability = generateReadability({
-      foreground,
-      background,
-      primaryPalette: newPalette,
-      secondaryPalette: get().colorPalettes.secondary,
-      accentPalette: get().colorPalettes.accent,
-      grayPalette,
-    });
-    set(
-      produce((state: ColorStore) => {
-        state.baseColors[type] = newColor;
-        state.colorPalettes[type] = palettesWithReadability[type];
-        state.colorPalettes.gray = palettesWithReadability.gray;
-      }),
-    );
-    const { colorPalettes, baseColors, colorMode } = get();
-    updateCSSVariables(
-      {
-        primary: type === "primary" ? newPalette : colorPalettes.primary,
-        secondary: type === "secondary" ? newPalette : colorPalettes.secondary,
-        accent: type === "accent" ? newPalette : colorPalettes.accent,
-        gray: grayPalette,
-      },
-      baseColors,
-      colorMode,
-    );
-  },
-  generatePalette: (existing = false) => {
-    const newBaseColors = existing ? get().baseColors : generateBaseColors();
-    // short-hand
-    const [primaryPalette, secondaryPalette, accentPalette, grayPalette] = [
-      "primary",
-      "secondary",
-      "accent",
-      "gray",
-    ].map((color) =>
-      generateColorPalette({
-        color: color === "gray" ? newBaseColors.primary : newBaseColors[color],
-        type: color as BaseColorTypes,
-        colorMode: get().colorMode,
-      }),
-    );
-    /* Calculate WCAG 2.0 */
-    const foreground = grayPalette[0];
-    const background = grayPalette[10];
-    const palettesWithReadability = generateReadability({
-      foreground,
-      background,
-      primaryPalette,
-      secondaryPalette,
-      accentPalette,
-      grayPalette,
-    });
-    set(
-      produce((state: ColorStore) => {
-        state.baseColors = newBaseColors;
-        state.colorPalettes = {
-          primary: palettesWithReadability.primary,
-          secondary: palettesWithReadability.secondary,
-          accent: palettesWithReadability.accent,
-          gray: palettesWithReadability.gray,
-        };
-      }),
-    );
-    const { baseColors, colorMode } = get();
-    updateCSSVariables(
-      {
-        primary: primaryPalette,
-        secondary: secondaryPalette,
-        accent: accentPalette,
-        gray: grayPalette,
-      },
-      baseColors,
-      colorMode,
-    );
-  },
-});
-
-const localColorStorageOptions: PersistOptions<ColorStore> = {
-  name: "colorStore",
-  storage: createJSONStorage(() => localStorage),
-};
-
-// Zustand store definition
-export const useColorStore = create<ColorStore>()(
-  devtools(persist(localAndUrlStore, localColorStorageOptions)),
-);
-
-/* Another store for site settings */
-
-export enum Performance {
-  low = "low",
-  medium = "medium",
-  high = "high",
+  primary: string
+  secondary: string
+  accent: string
+  colors: GeneratedColors
+  colorNames: ColorNames
+  generateColorNames: (colors: ColorNames) => Promise<ColorNames>
+  generateColors: (colors: ColorOptions) => GeneratedColors
+  setColor: (type: 'primary' | 'secondary' | 'accent', color: string) => void
+  setColors: (colors: GeneratedColors) => void
+  setColorNames: (colorNames: ColorNames) => void
+  setBaseColors: (colors: { primary: string; secondary: string; accent: string }) => void
 }
 
-export type SiteSettingsStore = {
-  performance: Performance;
-  setPerformance: (performance: Performance) => void;
-};
+export type ColorsHydrateValues = Pick<ColorStore, 'primary' | 'secondary' | 'accent' | 'colors' | 'colorNames'>
 
-const localSettingsStorageOptions: PersistOptions<SiteSettingsStore> = {
-  name: "siteSettings",
-  storage: createJSONStorage(() => localStorage),
-};
-
-export const useSiteSettingsStore = create<SiteSettingsStore>()(
-  devtools(
-    persist(
-      (set, get) => ({
-        performance: Performance.medium,
-        setPerformance: (performance) => set({ performance }),
-      }),
-      localSettingsStorageOptions,
-    ),
-  ),
-);
+export const createColorStore = (props: ColorsHydrateValues) =>
+  create<ColorStore>()(
+    immer((set) => ({
+      ...props,
+      generateColors,
+      generateColorNames: async (colors) => {
+        return await getColorNames(colors)
+      },
+      setColor: (type, color) => set({ [type]: color }),
+      setColors: (colors) => set({ colors }),
+      setColorNames: (colorNames) => set({ colorNames }),
+      setBaseColors: (colors) => set({ ...colors }),
+    }))
+  )
diff --git a/apps/web/store/toolStore.ts b/apps/web/store/toolStore.ts
index d9cbf03..db43401 100644
--- a/apps/web/store/toolStore.ts
+++ b/apps/web/store/toolStore.ts
@@ -1,42 +1,42 @@
-import { create } from "zustand";
-import { produce } from "immer";
-import { FinalColor } from "extract-colors/lib/types/Color";
-import {
-  PersistOptions,
-  createJSONStorage,
-  devtools,
-  persist,
-} from "zustand/middleware";
+import { ColorMode } from '@/types/app'
+import { FinalColor } from 'extract-colors/lib/types/Color'
+import { produce } from 'immer'
+import { create } from 'zustand'
+import { PersistOptions, createJSONStorage, devtools, persist } from 'zustand/middleware'
 
 export enum PresistTool {
-  IMAGE_COLOR_EXTRACTOR = "imageColorExtractor",
+  IMAGE_COLOR_EXTRACTOR = 'imageColorExtractor',
 }
 
 export type ToolStore = {
-  openImageColorExtractor: boolean;
-  setOpenImageColorExtractor: (openImageColorExtractor: boolean) => void;
+  colorMode: ColorMode
+  setColorMode: (colorMode: ColorMode) => void
+  showReadability: boolean
+  setShowReadability: (showReadability: boolean) => void
+  openImageColorExtractor: boolean
+  setOpenImageColorExtractor: (openImageColorExtractor: boolean) => void
   imageColorExtractor: {
-    baseColors: FinalColor[];
-    colors: FinalColor[];
-  };
-  updateImageColorExtractor: (things: {
-    baseColors: FinalColor[];
-    colors: FinalColor[];
-  }) => void;
-};
+    baseColors: FinalColor[]
+    colors: FinalColor[]
+  }
+  updateImageColorExtractor: (things: { baseColors: FinalColor[]; colors: FinalColor[] }) => void
+}
 
 const localToolStorageOptions: PersistOptions<ToolStore> = {
-  name: "siteTool",
+  name: 'siteTool',
   storage: createJSONStorage(() => localStorage),
-};
+}
 
 export const useToolStore = create<ToolStore>()(
   devtools(
     persist(
       (set, get) => ({
+        colorMode: ColorMode.HEX,
+        setColorMode: (colorMode) => set({ colorMode }),
+        showReadability: false,
+        setShowReadability: (showReadability) => set({ showReadability }),
         openImageColorExtractor: false,
-        setOpenImageColorExtractor: (openImageColorExtractor) =>
-          set({ openImageColorExtractor }),
+        setOpenImageColorExtractor: (openImageColorExtractor) => set({ openImageColorExtractor }),
         imageColorExtractor: {
           image: null,
           baseColors: [],
@@ -45,13 +45,13 @@ export const useToolStore = create<ToolStore>()(
         updateImageColorExtractor: ({ baseColors, colors }) => {
           set(
             produce((state) => {
-              state.imageColorExtractor.baseColors = baseColors;
-              state.imageColorExtractor.colors = colors;
-            }),
-          );
+              state.imageColorExtractor.baseColors = baseColors
+              state.imageColorExtractor.colors = colors
+            })
+          )
         },
       }),
-      localToolStorageOptions,
-    ),
-  ),
-);
+      localToolStorageOptions
+    )
+  )
+)