diff --git a/frontend/src/lib/assets/tokens/tokens.json b/frontend/src/lib/assets/tokens/tokens.json
index d4749e0e2d..f4f35c81d9 100644
--- a/frontend/src/lib/assets/tokens/tokens.json
+++ b/frontend/src/lib/assets/tokens/tokens.json
@@ -226,7 +226,17 @@
 			"yellow-700": "#8a6e31",
 			"yellow-800": "#61512d",
 			"yellow-900": "#443d22",
-			"yellow-950": "#3a351a"
+			"yellow-950": "#3a351a",
+			"magenta-100": "#fae8fd",
+			"magenta-200": "#f0c6fb",
+			"magenta-300": "#e89ffa",
+			"magenta-400": "#de75f8",
+			"magenta-500": "#d551f5",
+			"magenta-600": "#bf41dd",
+			"magenta-700": "#b03dd8",
+			"magenta-800": "#963cc7",
+			"magenta-900": "#8537c0",
+			"magenta-950": "#6e2ba1"
 		}
 	},
 	"guidelines": { "mode-1": { "blue": "#5e81ac", "demo-background": "#ffffff00" } },
diff --git a/frontend/src/lib/components/copilot/chat/AIButtonStyle.ts b/frontend/src/lib/components/copilot/chat/AIButtonStyle.ts
index f7d6ed6fa7..3ef1ed8709 100644
--- a/frontend/src/lib/components/copilot/chat/AIButtonStyle.ts
+++ b/frontend/src/lib/components/copilot/chat/AIButtonStyle.ts
@@ -1,11 +1,13 @@
-export function AIBtnClasses(state: 'default' | 'selected' | 'green' = 'default') {
+export function AIBtnClasses(state: 'default' | 'selected' | 'green' | 'accent' = 'default') {
 	return twMerge(
 		['selected', 'default'].includes(state) ? 'text-ai !border-ai/20 hover:bg-ai/15' : '',
 		{
 			default: '',
 			selected: 'bg-ai/10',
 			green:
-				'bg-green-50 hover:bg-green-50 dark:bg-green-400/15 dark:hover:bg-green-400/15 text-green-800 border-green-200 dark:border-green-300/60 dark:text-green-400'
+				'bg-green-50 hover:bg-green-50 dark:bg-green-400/15 dark:hover:bg-green-400/15 text-green-800 border-green-200 dark:border-green-300/60 dark:text-green-400',
+			accent:
+				'dark:bg-magenta-900 bg-magenta-600 text-white hover:bg-magenta-700 dark:hover:bg-magenta-950'
 		}[state]
 	)
 }
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
index d48191bbc8..bd694080e7 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
@@ -34,6 +34,7 @@
 	import { aiChatManager, AIMode } from '$lib/components/copilot/chat/AIChatManager.svelte'
 	import TextInput from '$lib/components/text_input/TextInput.svelte'
 	import { Alert } from '$lib/components/common'
+	import { AIBtnClasses } from '$lib/components/copilot/chat/AIButtonStyle'
 
 	let nodraft = $page.url.searchParams.get('nodraft')
 	const templatePath = $page.url.searchParams.get('template')
@@ -573,7 +574,7 @@
 							!initialPrompt.trim() ||
 							newSchemaAlreadyExists}
 						startIcon={{ icon: Sparkles }}
-						btnClasses="bg-ai text-white"
+						btnClasses={AIBtnClasses('accent')}
 					>
 						Start with AI
 					</Button>
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 7b83cf1939..bae0531c17 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -225,6 +225,18 @@ const config = {
 				900: `rgb(${primitives['yellow-900']})`,
 				950: `rgb(${primitives['yellow-950']})`
 			},
+			magenta: {
+				100: `rgb(${primitives['magenta-100']})`,
+				200: `rgb(${primitives['magenta-200']})`,
+				300: `rgb(${primitives['magenta-300']})`,
+				400: `rgb(${primitives['magenta-400']})`,
+				500: `rgb(${primitives['magenta-500']})`,
+				600: `rgb(${primitives['magenta-600']})`,
+				700: `rgb(${primitives['magenta-700']})`,
+				800: `rgb(${primitives['magenta-800']})`,
+				900: `rgb(${primitives['magenta-900']})`,
+				950: `rgb(${primitives['magenta-950']})`
+			},
 			slate: {
 				50: '#f8fafc',
 				100: '#f1f5f9',