diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index 7d3a931ce4ba6..1554c6c0bbea0 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -2,7 +2,7 @@
 	import { Copy, MoveLeft, MoveRight, Paintbrush2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
-	import { addWhitespaceBeforeCapitals, copyToClipboard } from '../../../../utils'
+	import { addWhitespaceBeforeCapitals, copyToClipboard, sendUserToast } from '../../../../utils'
 	import { Button, ClearableInput } from '../../../common'
 	import Popover from '../../../Popover.svelte'
 	import type { ComponentCssProperty } from '../../types'
@@ -13,6 +13,7 @@
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import CssEval from './CssEval.svelte'
+	import parse from 'style-to-object'
 
 	export let name: string
 	export let value: ComponentCssProperty = {}
@@ -33,8 +34,16 @@
 	$: dispatch('change', value)
 
 	function toggleQuickMenu() {
-		isQuickMenuOpen = !isQuickMenuOpen
+		try {
+			if (value.style) {
+				parse(value.style)
+				isQuickMenuOpen = !isQuickMenuOpen
+			}
+		} catch {
+			sendUserToast('Invalid CSS: Rich editor cannot be open', true)
+		}
 	}
+
 	let dynamicClass: boolean = value.evalClass !== undefined
 </script>
 
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
index c780bbbaf448f..6e8a7739bc005 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
@@ -184,8 +184,8 @@
 				{prefix}
 				openByDefault={true}
 				wrapperClasses="!px-0 !pt-0"
-				toggleClasses="border-b border-gray-300 !rounded-b-none !py-0
-				{isOpen[prefix] ? '!bg-gray-100 hover:!bg-gray-200' : ''}"
+				toggleClasses="border-b !rounded-b-none !py-0
+				{isOpen[prefix] ? '!bg-surface-secondary hover:!bg-surface-hover' : ''}"
 			>
 				<svelte:fragment slot="title">
 					<span class="font-semibold text-tertiary capitalize">
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
index 2e14e7dbff302..2276569a84dab 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
@@ -91,7 +91,7 @@
 				<Menu
 					let:close
 					noMinW
-					wrapperClasses="h-full bg-surface rounded-r-md border-y border-r border-gray-300 pr-0.5"
+					wrapperClasses="h-full bg-surface rounded-r-md border-y border-r pr-0.5"
 					popupClasses="!mt-0"
 				>
 					<button