diff --git a/config.dev.php b/config.dev.php
index 712f69b49..cbc7ad815 100755
--- a/config.dev.php
+++ b/config.dev.php
@@ -49,6 +49,7 @@ class Brizy_Config {
 	const CLOUD_SCREENSHOT = '/screenshot/%s';
 	const CLOUD_SCREENSHOTS = '/api/screenshots';
     const CLOUD_CUSTOM_FILES = '/api/custom_files';
+    const GENERATE_GLOBAL_STYLES_ENDPOINT = 'https://phplaravel-1109775-4163586.cloudwaysapps.com';
 	const WP_HTTP_TIMEOUT = 600;
 
 
diff --git a/config.php b/config.php
index 62260c2b7..2ac6d5502 100755
--- a/config.php
+++ b/config.php
@@ -49,6 +49,7 @@ class Brizy_Config {
 	const CLOUD_SCREENSHOT = '/screenshot/%s';
 	const CLOUD_SCREENSHOTS = '/api/screenshots';
 	const CLOUD_CUSTOM_FILES = '/api/custom_files';
+	const GENERATE_GLOBAL_STYLES_ENDPOINT = 'https://phplaravel-1109775-4163586.cloudwaysapps.com';
     const WP_HTTP_TIMEOUT = 30;
 
 	// this file will be stored in uploads/brizy/
diff --git a/editor/editor/editor.php b/editor/editor/editor.php
index 43ba16312..3d0fd9ee6 100755
--- a/editor/editor/editor.php
+++ b/editor/editor/editor.php
@@ -93,6 +93,7 @@ public function getClientConfig($context)
             'project' => array(
                 'status' => $this->getProjectStatus(),
             ),
+	        'aiGlobalStyleUrl' => Brizy_Config::GENERATE_GLOBAL_STYLES_ENDPOINT
         ];
 
         $config = $this->getApiConfigFields($config, $context);
diff --git a/public/editor-client/src/aiGlobalStyles/index.ts b/public/editor-client/src/aiGlobalStyles/index.ts
new file mode 100644
index 000000000..22a382f0b
--- /dev/null
+++ b/public/editor-client/src/aiGlobalStyles/index.ts
@@ -0,0 +1,30 @@
+import { getStyles, getTypography } from "@/api";
+import { Config } from "@/config";
+import { t } from "@/utils/i18n";
+import { AiGlobalStyles, FontStyle, Palette } from "../types/DefaultTemplate";
+
+export const getAIGlobalStyles = (
+  config: Config
+): AiGlobalStyles<Palette, FontStyle> => {
+  return {
+    async regenerateColors(res, rej) {
+      try {
+        const styles = await getStyles(config);
+
+        res(styles.colorPalette);
+      } catch (e) {
+        rej(t("Failed to load meta.json"));
+      }
+    },
+    async regenerateTypography(res, rej) {
+      try {
+        const data = await getTypography(config);
+
+        res(data.fontStyles);
+      } catch (e) {
+        rej(t("Failed to load resolves for selected DefaultTemplate"));
+      }
+    },
+    label: t("Regenerate with AI")
+  };
+};
diff --git a/public/editor-client/src/api/index.ts b/public/editor-client/src/api/index.ts
index 52a5c67e1..b16b4d238 100644
--- a/public/editor-client/src/api/index.ts
+++ b/public/editor-client/src/api/index.ts
@@ -1336,3 +1336,23 @@ export const deleteIcon = async (uid: string): Promise<Response> => {
   throw new Error(t("Failed to delete icon"));
 };
 //#endregion
+
+//#region AI Global Styles
+
+export const getStyles = async (config: Config) => {
+  const { aiGlobalStyleUrl } = config;
+
+  return await fetch(`${aiGlobalStyleUrl}/api/template/style`).then((r) =>
+    r.json()
+  );
+};
+
+export const getTypography = async (config: Config) => {
+  const { aiGlobalStyleUrl } = config;
+
+  return await fetch(`${aiGlobalStyleUrl}/api/template/typography`).then((r) =>
+    r.json()
+  );
+};
+
+//#endregion
diff --git a/public/editor-client/src/config.ts b/public/editor-client/src/config.ts
index d12a38c37..42e063d2a 100644
--- a/public/editor-client/src/config.ts
+++ b/public/editor-client/src/config.ts
@@ -86,6 +86,7 @@ export interface Config {
   api: API;
   l10n?: Record<string, string>;
   collectionTypes: CollectionType[];
+  aiGlobalStyleUrl: string;
 }
 
 const templatesReader = parseStrict<Record<string, unknown>, DefaultTemplates>({
@@ -355,6 +356,10 @@ const reader = parseStrict<PLUGIN_ENV, Config>({
       })
     ),
     throwOnNullish("Invalid: project")
+  ),
+  aiGlobalStyleUrl: pipe(
+    mPipe(Obj.readKey("aiGlobalStyleUrl"), Str.read),
+    throwOnNullish("Invalid: aiGlobalStyleUrl")
   )
 });
 
diff --git a/public/editor-client/src/index.ts b/public/editor-client/src/index.ts
index 9eb4f44fa..d30767d78 100644
--- a/public/editor-client/src/index.ts
+++ b/public/editor-client/src/index.ts
@@ -1,5 +1,6 @@
 import merge from "lodash/merge";
 import set from "lodash/set";
+import { getAIGlobalStyles } from "./aiGlobalStyles";
 import { doAiRequest } from "./aiText";
 import { autoSave } from "./autoSave";
 import { getCollectionItemsIds } from "./collectionItems/getCollectionItemsIds";
@@ -90,6 +91,11 @@ if (window.__VISUAL_CONFIG__) {
   // UI
   if (window.__VISUAL_CONFIG__.ui) {
     window.__VISUAL_CONFIG__.ui.publish = publish;
+    set(
+      window.__VISUAL_CONFIG__.ui,
+      ["leftSidebar", "styles"],
+      getAIGlobalStyles(config)
+    );
   }
 
   // Elements
diff --git a/public/editor-client/src/types/DefaultTemplate.ts b/public/editor-client/src/types/DefaultTemplate.ts
index c9d3ca17e..0fcb13ac1 100644
--- a/public/editor-client/src/types/DefaultTemplate.ts
+++ b/public/editor-client/src/types/DefaultTemplate.ts
@@ -5,6 +5,15 @@ export interface DefaultBlock {
   value: Record<string, unknown>;
 }
 
+export interface AiGlobalStyles<T1, T2> {
+  regenerateColors: (res: Response<T1>, rej: Response<string>) => void;
+  regenerateTypography: (
+    res: Response<Promise<T2>>,
+    rej: Response<string>
+  ) => void;
+  label: string;
+}
+
 export interface DefaultTemplate<T1, T2> {
   label?: string;
   getMeta: (res: Response<T1>, rej: Response<string>) => void;
@@ -101,14 +110,14 @@ export interface Style {
   fontStyles: Array<FontStyle>;
 }
 
-interface Palette {
+export interface Palette {
   id: string;
   hex: string;
 }
 
 type fontSizeUnits = "px" | "%";
 
-interface FontStyle {
+export interface FontStyle {
   id: number | string;
   title: string;
   deletable: "on" | "off";