diff --git a/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/ChatTrigger.node.ts b/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/ChatTrigger.node.ts
index 27fb1bcd35..fab05be8ec 100644
--- a/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/ChatTrigger.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/ChatTrigger.node.ts
@@ -12,6 +12,7 @@ import type {
 	INodeProperties,
 } from 'n8n-workflow';
 
+import { cssVariables } from './constants';
 import { validateAuth } from './GenericFunctions';
 import { createPage } from './templates';
 import type { LoadPreviousSessionChatOption } from './types';
@@ -378,6 +379,29 @@ export class ChatTrigger extends Node {
 						placeholder: 'e.g. Welcome',
 						description: 'Shown at the top of the chat',
 					},
+					{
+						displayName: 'Custom Chat Styling',
+						name: 'customCss',
+						type: 'string',
+						typeOptions: {
+							rows: 10,
+							editor: 'cssEditor',
+						},
+						displayOptions: {
+							show: {
+								'/mode': ['hostedChat'],
+							},
+						},
+						default: `
+${cssVariables}
+
+/* You can override any class styles, too. Right-click inspect in Chat UI to find class to override. */
+.chat-message {
+	max-width: 50%;
+}
+`.trim(),
+						description: 'Override default styling of the public chat interface with CSS',
+					},
 				],
 			},
 		],
@@ -466,6 +490,7 @@ export class ChatTrigger extends Node {
 			title?: string;
 			allowFileUploads?: boolean;
 			allowedFilesMimeTypes?: string;
+			customCss?: string;
 		};
 
 		const req = ctx.getRequestObject();
@@ -517,6 +542,7 @@ export class ChatTrigger extends Node {
 					authentication,
 					allowFileUploads: options.allowFileUploads,
 					allowedFilesMimeTypes: options.allowedFilesMimeTypes,
+					customCss: options.customCss,
 				});
 
 				res.status(200).send(page).end();
diff --git a/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/constants.ts b/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/constants.ts
new file mode 100644
index 0000000000..379629a896
--- /dev/null
+++ b/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/constants.ts
@@ -0,0 +1,122 @@
+// CSS Variables are defined in `@n8n/chat/src/css/_tokens.scss`
+export const cssVariables = `
+:root {
+  /* Colors */
+  --chat--color-primary: #e74266;
+  --chat--color-primary-shade-50: #db4061;
+  --chat--color-primary-shade-100: #cf3c5c;
+  --chat--color-secondary: #20b69e;
+  --chat--color-secondary-shade-50: #1ca08a;
+  --chat--color-white: #ffffff;
+  --chat--color-light: #f2f4f8;
+  --chat--color-light-shade-50: #e6e9f1;
+  --chat--color-light-shade-100: #c2c5cc;
+  --chat--color-medium: #d2d4d9;
+  --chat--color-dark: #101330;
+  --chat--color-disabled: #777980;
+  --chat--color-typing: #404040;
+
+  /* Base Layout */
+  --chat--spacing: 1rem;
+  --chat--border-radius: 0.25rem;
+  --chat--transition-duration: 0.15s;
+  --chat--font-family: (
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen-Sans,
+    Ubuntu,
+    Cantarell,
+    'Helvetica Neue',
+    sans-serif
+  );
+
+  /* Window Dimensions */
+  --chat--window--width: 400px;
+  --chat--window--height: 600px;
+  --chat--window--bottom: var(--chat--spacing);
+  --chat--window--right: var(--chat--spacing);
+  --chat--window--z-index: 9999;
+  --chat--window--border: 1px solid var(--chat--color-light-shade-50);
+  --chat--window--border-radius: var(--chat--border-radius);
+  --chat--window--margin-bottom: var(--chat--spacing);
+
+  /* Header Styles */
+  --chat--header-height: auto;
+  --chat--header--padding: var(--chat--spacing);
+  --chat--header--background: var(--chat--color-dark);
+  --chat--header--color: var(--chat--color-light);
+  --chat--header--border-top: none;
+  --chat--header--border-bottom: none;
+  --chat--header--border-left: none;
+  --chat--header--border-right: none;
+  --chat--heading--font-size: 2em;
+  --chat--subtitle--font-size: inherit;
+  --chat--subtitle--line-height: 1.8;
+
+  /* Message Styles */
+  --chat--message--font-size: 1rem;
+  --chat--message--padding: var(--chat--spacing);
+  --chat--message--border-radius: var(--chat--border-radius);
+  --chat--message-line-height: 1.5;
+  --chat--message--margin-bottom: calc(var(--chat--spacing) * 1);
+  --chat--message--bot--background: var(--chat--color-white);
+  --chat--message--bot--color: var(--chat--color-dark);
+  --chat--message--bot--border: none;
+  --chat--message--user--background: var(--chat--color-secondary);
+  --chat--message--user--color: var(--chat--color-white);
+  --chat--message--user--border: none;
+  --chat--message--pre--background: rgba(0, 0, 0, 0.05);
+  --chat--messages-list--padding: var(--chat--spacing);
+
+  /* Toggle Button */
+  --chat--toggle--size: 64px;
+  --chat--toggle--width: var(--chat--toggle--size);
+  --chat--toggle--height: var(--chat--toggle--size);
+  --chat--toggle--border-radius: 50%;
+  --chat--toggle--background: var(--chat--color-primary);
+  --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
+  --chat--toggle--active--background: var(--chat--color-primary-shade-100);
+  --chat--toggle--color: var(--chat--color-white);
+
+  /* Input Area */
+  --chat--textarea--height: 50px;
+  --chat--textarea--max-height: 30rem;
+  --chat--input--font-size: inherit;
+  --chat--input--border: 0;
+  --chat--input--border-radius: 0;
+  --chat--input--padding: 0.8rem;
+  --chat--input--background: var(--chat--color-white);
+  --chat--input--text-color: initial;
+  --chat--input--line-height: 1.5;
+  --chat--input--placeholder--font-size: var(--chat--input--font-size);
+  --chat--input--border-active: 0;
+  --chat--input--left--panel--width: 2rem;
+
+  /* Button Styles */
+  --chat--button--color: var(--chat--color-light);
+  --chat--button--background: var(--chat--color-primary);
+  --chat--button--padding: calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing);
+  --chat--button--border-radius: var(--chat--border-radius);
+  --chat--button--hover--color: var(--chat--color-light);
+  --chat--button--hover--background: var(--chat--color-primary-shade-50);
+  --chat--close--button--color-hover: var(--chat--color-primary);
+
+  /* Send and File Buttons */
+  --chat--input--send--button--background: var(--chat--color-white);
+  --chat--input--send--button--color: var(--chat--color-light);
+  --chat--input--send--button--background-hover: var(--chat--color-primary-shade-50);
+  --chat--input--send--button--color-hover: var(--chat--color-secondary-shade-50);
+  --chat--input--file--button--background: var(--chat--color-white);
+  --chat--input--file--button--color: var(--chat--color-secondary);
+  --chat--input--file--button--background-hover: var(--chat--input--file--button--background);
+  --chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);
+  --chat--files-spacing: 0.25rem;
+
+  /* Body and Footer */
+  --chat--body--background: var(--chat--color-light);
+  --chat--footer--background: var(--chat--color-light);
+  --chat--footer--color: var(--chat--color-dark);
+}
+`;
diff --git a/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/templates.ts b/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/templates.ts
index 0435df59e8..d224a89361 100644
--- a/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/templates.ts
+++ b/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/templates.ts
@@ -1,5 +1,6 @@
-import type { AuthenticationChatOption, LoadPreviousSessionChatOption } from './types';
+import sanitizeHtml from 'sanitize-html';
 
+import type { AuthenticationChatOption, LoadPreviousSessionChatOption } from './types';
 export function createPage({
 	instanceId,
 	webhookUrl,
@@ -10,6 +11,7 @@ export function createPage({
 	authentication,
 	allowFileUploads,
 	allowedFilesMimeTypes,
+	customCss,
 }: {
 	instanceId: string;
 	webhookUrl?: string;
@@ -23,6 +25,7 @@ export function createPage({
 	authentication: AuthenticationChatOption;
 	allowFileUploads?: boolean;
 	allowedFilesMimeTypes?: string;
+	customCss?: string;
 }) {
 	const validAuthenticationOptions: AuthenticationChatOption[] = [
 		'none',
@@ -41,6 +44,11 @@ export function createPage({
 	const sanitizedShowWelcomeScreen = !!showWelcomeScreen;
 	const sanitizedAllowFileUploads = !!allowFileUploads;
 	const sanitizedAllowedFilesMimeTypes = allowedFilesMimeTypes?.toString() ?? '';
+	const sanitizedCustomCss = sanitizeHtml(`<style>${customCss?.toString() ?? ''}</style>`, {
+		allowedTags: ['style'],
+		allowedAttributes: false,
+	});
+
 	const sanitizedLoadPreviousSession = validLoadPreviousSessionOptions.includes(
 		loadPreviousSession as LoadPreviousSessionChatOption,
 	)
@@ -63,6 +71,7 @@ export function createPage({
 					height: 100%;
 				}
 			</style>
+			${sanitizedCustomCss}
 		</head>
 		<body>
 			<script type="module">
diff --git a/packages/@n8n/nodes-langchain/package.json b/packages/@n8n/nodes-langchain/package.json
index 4fa65208b0..b069dc39e5 100644
--- a/packages/@n8n/nodes-langchain/package.json
+++ b/packages/@n8n/nodes-langchain/package.json
@@ -130,6 +130,7 @@
     "@types/mime-types": "^2.1.0",
     "@types/pg": "^8.11.6",
     "@types/temp": "^0.9.1",
+    "@types/sanitize-html": "^2.11.0",
     "n8n-core": "workspace:*"
   },
   "dependencies": {
@@ -183,6 +184,7 @@
     "pdf-parse": "1.1.1",
     "pg": "8.12.0",
     "redis": "4.6.12",
+    "sanitize-html": "2.12.1",
     "sqlite3": "5.1.7",
     "temp": "0.9.4",
     "tmp-promise": "3.0.3",
diff --git a/packages/cli/templates/form-trigger-404.handlebars b/packages/cli/templates/form-trigger-404.handlebars
index db6a9da13b..553739a8ee 100644
--- a/packages/cli/templates/form-trigger-404.handlebars
+++ b/packages/cli/templates/form-trigger-404.handlebars
@@ -1,86 +1,147 @@
 <html lang='en'>
 
-	<head>
-		<meta charset='UTF-8' />
-		<meta name='viewport' content='width=device-width, initial-scale=1.0' />
-		<link rel='icon' type='image/png' href='https://n8n.io/favicon.ico' />
-		<link
-			href='https://fonts.googleapis.com/css?family=Open+Sans'
-			rel='stylesheet'
-			type='text/css'
-		/>
-		{{#if isTestWebhook}}
-			<title>Form Trigger isn't listening yet</title>
-		{{else}}
-			<title>Problem loading form</title>
-		{{/if}}
+<head>
+  <meta charset='UTF-8' />
+  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+  <link rel='icon' type='image/png' href='https://n8n.io/favicon.ico' />
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
+  {{#if isTestWebhook}}
+    <title>Form Trigger isn't listening yet</title>
+  {{else}}
+    <title>Problem loading form</title>
+  {{/if}}
+  <style>
+    :root {
+      /* Fonts */
+      --font-family: 'Open Sans', sans-serif;
+      --font-weight-normal: 400;
+      --font-weight-bold: 600;
+      --font-size-body: 12px;
+      --font-size-link: 12px;
+      --font-size-header: 20px;
+      --font-size-subheader: 14px;
+
+      /* Colors */
+      --color-background: #FBFCFE;
+      --color-card-bg: white;
+      --color-card-border: #DBDFE7;
+      --color-card-shadow: #634DFF0F;
+      --color-link: #7E8186;
+      --color-header: #525356;
+      --color-header-subtext: #7E8186;
+
+      /* Spacing & dimensions */
+      --padding-container-top: 24px;
+      --container-width: 448px;
+      --card-padding: 24px;
+      --card-border-radius: 8px;
+      --card-margin-bottom: 16px;
+    }
+
+    *,
+    ::after,
+    ::before {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-weight: var(--font-weight-normal);
+      font-size: var(--font-size-body);
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      background-color: var(--color-background);
+    }
+
+    .container {
+      margin: auto;
+      text-align: center;
+      padding-top: var(--padding-container-top);
+      width: var(--container-width);
+    }
+
+    .card {
+      padding: var(--card-padding);
+      background-color: var(--color-card-bg);
+      border: 1px solid var(--color-card-border);
+      border-radius: var(--card-border-radius);
+      box-shadow: 0px 4px 16px 0px var(--color-card-shadow);
+      margin-bottom: var(--card-margin-bottom);
+    }
+
+    .n8n-link a {
+      color: var(--color-link);
+      font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-link);
+      text-decoration: none;
+    }
+
+    .n8n-link svg {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .header h1 {
+      color: var(--color-header);
+      font-size: var(--font-size-header);
+      font-weight: var(--font-weight-normal);
+      padding-bottom: 8px;
+    }
+
+    .header p {
+      color: var(--color-header-subtext);
+      font-size: var(--font-size-subheader);
+      font-weight: var(--font-weight-normal);
+    }
+  </style>
+
+	{{#if dangerousCustomCss}}
 		<style>
-			*, ::after, ::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family:
-			Open Sans, sans-serif; font-weight: 400; font-size: 12px; display: flex; flex-direction:
-			column; justify-content: start; background-color: #FBFCFE; } .container { margin: auto;
-			text-align: center; padding-top: 24px; width: 448px; } .card { padding: 24px;
-			background-color: white; border: 1px solid #DBDFE7; border-radius: 8px; box-shadow: 0px 4px
-			16px 0px #634DFF0F; margin-bottom: 16px; } .n8n-link a { color: #7E8186; font-weight: 600;
-			font-size: 12px; text-decoration: none; } .n8n-link svg { display: inline-block;
-			vertical-align: middle; } .header h1 { color: #525356; font-size: 20px; font-weight: 400;
-			padding-bottom: 8px; } .header p { color: #7E8186; font-size: 14px; font-weight: 400; }
+			{{{ dangerousCustomCss }}}
 		</style>
-	</head>
+	{{/if}}
+</head>
 
-	<body>
-		<div class='container'>
-			<section>
-				<div class='card'>
-					{{#if isTestWebhook}}
-						<div class='header'>
-							<h1>Form Trigger isn't listening yet</h1>
-							<p>Click the <strong>"Test step"</strong> button in your form trigger</p>
-						</div>
-					{{else}}
-						<div class='header'>
-							<h1>Problem loading form</h1>
-							<p>This usually occurs if the n8n workflow serving this form is deactivated or no
-								longer exist</p>
-						</div>
-					{{/if}}
-				</div>
-				<div class='n8n-link'>
-					<a
-						href='https://n8n.io/?utm_source=n8n-internal&amp;utm_medium=form-trigger&amp'
-						target='_blank'
-					>
-						Form automated with
-						<svg
-							width='73'
-							height='20'
-							viewBox='0 0 73 20'
-							fill='none'
-							xmlns='http://www.w3.org/2000/svg'
-						>
-							<path
-								fill-rule='evenodd'
-								clip-rule='evenodd'
-								d='M40.2373 4C40.2373 6.20915 38.4464 8 36.2373 8C34.3735 8 32.8074 6.72525 32.3633 5H26.7787C25.801 5 24.9666 5.70685 24.8059 6.6712L24.6415 7.6576C24.4854 8.59415 24.0116 9.40925 23.3417 10C24.0116 10.5907 24.4854 11.4058 24.6415 12.3424L24.8059 13.3288C24.9666 14.2931 25.801 15 26.7787 15H28.3633C28.8074 13.2747 30.3735 12 32.2373 12C34.4464 12 36.2373 13.7908 36.2373 16C36.2373 18.2092 34.4464 20 32.2373 20C30.3735 20 28.8074 18.7253 28.3633 17H26.7787C24.8233 17 23.1546 15.5864 22.8331 13.6576L22.6687 12.6712C22.508 11.7069 21.6736 11 20.6959 11H19.0645C18.5652 12.64 17.0406 13.8334 15.2373 13.8334C13.434 13.8334 11.9094 12.64 11.4101 11H9.06449C8.56519 12.64 7.04059 13.8334 5.2373 13.8334C3.02817 13.8334 1.2373 12.0424 1.2373 9.83335C1.2373 7.6242 3.02817 5.83335 5.2373 5.83335C7.16069 5.83335 8.76699 7.19085 9.15039 9H11.3242C11.7076 7.19085 13.3139 5.83335 15.2373 5.83335C17.1607 5.83335 18.767 7.19085 19.1504 9H20.6959C21.6736 9 22.508 8.29315 22.6687 7.3288L22.8331 6.3424C23.1546 4.41365 24.8233 3 26.7787 3H32.3633C32.8074 1.27478 34.3735 0 36.2373 0C38.4464 0 40.2373 1.79086 40.2373 4ZM38.2373 4C38.2373 5.10455 37.3419 6 36.2373 6C35.1327 6 34.2373 5.10455 34.2373 4C34.2373 2.89543 35.1327 2 36.2373 2C37.3419 2 38.2373 2.89543 38.2373 4ZM5.2373 11.8334C6.34189 11.8334 7.23729 10.9379 7.23729 9.83335C7.23729 8.72875 6.34189 7.83335 5.2373 7.83335C4.13273 7.83335 3.2373 8.72875 3.2373 9.83335C3.2373 10.9379 4.13273 11.8334 5.2373 11.8334ZM15.2373 11.8334C16.3419 11.8334 17.2373 10.9379 17.2373 9.83335C17.2373 8.72875 16.3419 7.83335 15.2373 7.83335C14.1327 7.83335 13.2373 8.72875 13.2373 9.83335C13.2373 10.9379 14.1327 11.8334 15.2373 11.8334ZM32.2373 18C33.3419 18 34.2373 17.1045 34.2373 16C34.2373 14.8954 33.3419 14 32.2373 14C31.1327 14 30.2373 14.8954 30.2373 16C30.2373 17.1045 31.1327 18 32.2373 18Z'
-								fill='#EA4B71'
-							></path>
-							<path
-								d='M44.2393 15.0007H46.3277V10.5791C46.3277 9.12704 47.2088 8.49074 48.204 8.49074C49.183 8.49074 49.9498 9.14334 49.9498 10.4812V15.0007H52.038V10.057C52.038 7.91969 50.798 6.67969 48.8567 6.67969C47.633 6.67969 46.9477 7.16914 46.4582 7.80544H46.3277L46.1482 6.84284H44.2393V15.0007Z'
-								fill='#101330'
-							></path>
-							<path
-								d='M60.0318 9.50205V9.40415C60.7498 9.0452 61.4678 8.4252 61.4678 7.20155C61.4678 5.43945 60.0153 4.37891 58.0088 4.37891C55.9528 4.37891 54.4843 5.5047 54.4843 7.23415C54.4843 8.4089 55.1698 9.0452 55.9203 9.40415V9.50205C55.0883 9.79575 54.0928 10.6768 54.0928 12.1452C54.0928 13.9237 55.5613 15.1637 57.9923 15.1637C60.4233 15.1637 61.8428 13.9237 61.8428 12.1452C61.8428 10.6768 60.8638 9.81205 60.0318 9.50205ZM57.9923 5.87995C58.8083 5.87995 59.4118 6.40205 59.4118 7.2831C59.4118 8.16415 58.7918 8.6863 57.9923 8.6863C57.1928 8.6863 56.5238 8.16415 56.5238 7.2831C56.5238 6.38575 57.1603 5.87995 57.9923 5.87995ZM57.9923 13.5974C57.0458 13.5974 56.2793 12.9937 56.2793 11.9658C56.2793 11.0358 56.9153 10.3342 57.9758 10.3342C59.0203 10.3342 59.6568 11.0195 59.6568 11.9984C59.6568 12.9937 58.9223 13.5974 57.9923 13.5974Z'
-								fill='#101330'
-							></path>
-							<path
-								d='M63.9639 15.0007H66.0524V10.5791C66.0524 9.12704 66.9334 8.49074 67.9289 8.49074C68.9079 8.49074 69.6744 9.14334 69.6744 10.4812V15.0007H71.7629V10.057C71.7629 7.91969 70.5229 6.67969 68.5814 6.67969C67.3579 6.67969 66.6724 7.16914 66.1829 7.80544H66.0524L65.8729 6.84284H63.9639V15.0007Z'
-								fill='#101330'
-							></path>
-						</svg>
-
-					</a>
-				</div>
-			</section>
-		</div>
-	</body>
+<body>
+  <div class='container'>
+    <section>
+      <div class='card'>
+        {{#if isTestWebhook}}
+          <div class='header'>
+            <h1>Form Trigger isn't listening yet</h1>
+            <p>Click the <strong>"Test step"</strong> button in your form trigger</p>
+          </div>
+        {{else}}
+          <div class='header'>
+            <h1>Problem loading form</h1>
+            <p>This usually occurs if the n8n workflow serving this form is deactivated or no longer exist</p>
+          </div>
+        {{/if}}
+      </div>
+      <div class='n8n-link'>
+        <a href='https://n8n.io/?utm_source=n8n-internal&amp;utm_medium=form-trigger&amp' target='_blank'>
+          Form automated with
+          <svg width='73' height='20' viewBox='0 0 73 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <path fill-rule='evenodd' clip-rule='evenodd'
+              d='M40.2373 4C40.2373 6.20915 38.4464 8 36.2373 8C34.3735 8 32.8074 6.72525 32.3633 5H26.7787C25.801 5 24.9666 5.70685 24.8059 6.6712L24.6415 7.6576C24.4854 8.59415 24.0116 9.40925 23.3417 10C24.0116 10.5907 24.4854 11.4058 24.6415 12.3424L24.8059 13.3288C24.9666 14.2931 25.801 15 26.7787 15H28.3633C28.8074 13.2747 30.3735 12 32.2373 12C34.4464 12 36.2373 13.7908 36.2373 16C36.2373 18.2092 34.4464 20 32.2373 20C30.3735 20 28.8074 18.7253 28.3633 17H26.7787C24.8233 17 23.1546 15.5864 22.8331 13.6576L22.6687 12.6712C22.508 11.7069 21.6736 11 20.6959 11H19.0645C18.5652 12.64 17.0406 13.8334 15.2373 13.8334C13.434 13.8334 11.9094 12.64 11.4101 11H9.06449C8.56519 12.64 7.04059 13.8334 5.2373 13.8334C3.02817 13.8334 1.2373 12.0424 1.2373 9.83335C1.2373 7.6242 3.02817 5.83335 5.2373 5.83335C7.16069 5.83335 8.76699 7.19085 9.15039 9H11.3242C11.7076 7.19085 13.3139 5.83335 15.2373 5.83335C17.1607 5.83335 18.767 7.19085 19.1504 9H20.6959C21.6736 9 22.508 8.29315 22.6687 7.3288L22.8331 6.3424C23.1546 4.41365 24.8233 3 26.7787 3H32.3633C32.8074 1.27478 34.3735 0 36.2373 0C38.4464 0 40.2373 1.79086 40.2373 4ZM38.2373 4C38.2373 5.10455 37.3419 6 36.2373 6C35.1327 6 34.2373 5.10455 34.2373 4C34.2373 2.89543 35.1327 2 36.2373 2C37.3419 2 38.2373 2.89543 38.2373 4ZM5.2373 11.8334C6.34189 11.8334 7.23729 10.9379 7.23729 9.83335C7.23729 8.72875 6.34189 7.83335 5.2373 7.83335C4.13273 7.83335 3.2373 8.72875 3.2373 9.83335C3.2373 10.9379 4.13273 11.8334 5.2373 11.8334ZM15.2373 11.8334C16.3419 11.8334 17.2373 10.9379 17.2373 9.83335C17.2373 8.72875 16.3419 7.83335 15.2373 7.83335C14.1327 7.83335 13.2373 8.72875 13.2373 9.83335C13.2373 10.9379 14.1327 11.8334 15.2373 11.8334ZM32.2373 18C33.3419 18 34.2373 17.1045 34.2373 16C34.2373 14.8954 33.3419 14 32.2373 14C31.1327 14 30.2373 14.8954 30.2373 16C30.2373 17.1045 31.1327 18 32.2373 18Z'
+              fill='#EA4B71'></path>
+            <path
+              d='M44.2393 15.0007H46.3277V10.5791C46.3277 9.12704 47.2088 8.49074 48.204 8.49074C49.183 8.49074 49.9498 9.14334 49.9498 10.4812V15.0007H52.038V10.057C52.038 7.91969 50.798 6.67969 48.8567 6.67969C47.633 6.67969 46.9477 7.16914 46.4582 7.80544H46.3277L46.1482 6.84284H44.2393V15.0007Z'
+              fill='#101330'></path>
+            <path
+              d='M60.0318 9.50205V9.40415C60.7498 9.0452 61.4678 8.4252 61.4678 7.20155C61.4678 5.43945 60.0153 4.37891 58.0088 4.37891C55.9528 4.37891 54.4843 5.5047 54.4843 7.23415C54.4843 8.4089 55.1698 9.0452 55.9203 9.40415V9.50205C55.0883 9.79575 54.0928 10.6768 54.0928 12.1452C54.0928 13.9237 55.5613 15.1637 57.9923 15.1637C60.4233 15.1637 61.8428 13.9237 61.8428 12.1452C61.8428 10.6768 60.8638 9.81205 60.0318 9.50205ZM57.9923 5.87995C58.8083 5.87995 59.4118 6.40205 59.4118 7.2831C59.4118 8.16415 58.7918 8.6863 57.9923 8.6863C57.1928 8.6863 56.5238 8.16415 56.5238 7.2831C56.5238 6.38575 57.1603 5.87995 57.9923 5.87995ZM57.9923 13.5974C57.0458 13.5974 56.2793 12.9937 56.2793 11.9658C56.2793 11.0358 56.9153 10.3342 57.9758 10.3342C59.0203 10.3342 59.6568 11.0195 59.6568 11.9984C59.6568 12.9937 58.9223 13.5974 57.9923 13.5974Z'
+              fill='#101330'></path>
+            <path
+              d='M63.9639 15.0007H66.0524V10.5791C66.0524 9.12704 66.9334 8.49074 67.9289 8.49074C68.9079 8.49074 69.6744 9.14334 69.6744 10.4812V15.0007H71.7629V10.057C71.7629 7.91969 70.5229 6.67969 68.5814 6.67969C67.3579 6.67969 66.6724 7.16914 66.1829 7.80544H66.0524L65.8729 6.84284H63.9639V15.0007Z'
+              fill='#101330'></path>
+          </svg>
+        </a>
+      </div>
+    </section>
+  </div>
+</body>
 
 </html>
diff --git a/packages/cli/templates/form-trigger-409.handlebars b/packages/cli/templates/form-trigger-409.handlebars
index 95c14105d7..b4c671a4e0 100644
--- a/packages/cli/templates/form-trigger-409.handlebars
+++ b/packages/cli/templates/form-trigger-409.handlebars
@@ -1,74 +1,136 @@
 <html lang='en'>
 
-	<head>
-		<meta charset='UTF-8' />
-		<meta name='viewport' content='width=device-width, initial-scale=1.0' />
-		<link rel='icon' type='image/png' href='https://n8n.io/favicon.ico' />
-		<link
-			href='https://fonts.googleapis.com/css?family=Open+Sans'
-			rel='stylesheet'
-			type='text/css'
-		/>
-		<title>Problem loading form</title>
+<head>
+	<meta charset='UTF-8' />
+	<meta name='viewport' content='width=device-width, initial-scale=1.0' />
+	<link rel='icon' type='image/png' href='https://n8n.io/favicon.ico' />
+	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
+	<title>Problem loading form</title>
+	<style>
+		:root {
+			/* Fonts */
+			--font-family: 'Open Sans', sans-serif;
+			--font-weight-normal: 400;
+			--font-weight-bold: 600;
+			--font-size-body: 12px;
+			--font-size-link: 12px;
+			--font-size-header: 20px;
+			--font-size-subheader: 14px;
+
+			/* Colors */
+			--color-background: #FBFCFE;
+			--color-card-bg: white;
+			--color-card-border: #DBDFE7;
+			--color-card-shadow: #634DFF0F;
+			--color-link: #7E8186;
+			--color-header: #525356;
+			--color-header-subtext: #7E8186;
+
+			/* Spacing and dimensions */
+			--padding-container-top: 24px;
+			--container-width: 448px;
+			--card-padding: 24px;
+			--card-border-radius: 8px;
+			--card-margin-bottom: 16px;
+		}
+
+		*,
+		::after,
+		::before {
+			box-sizing: border-box;
+			margin: 0;
+			padding: 0;
+		}
+
+		body {
+			font-family: var(--font-family);
+			font-weight: var(--font-weight-normal);
+			font-size: var(--font-size-body);
+			display: flex;
+			flex-direction: column;
+			justify-content: start;
+			background-color: var(--color-background);
+		}
+
+		.container {
+			margin: auto;
+			text-align: center;
+			padding-top: var(--padding-container-top);
+			width: var(--container-width);
+		}
+
+		.card {
+			padding: var(--card-padding);
+			background-color: var(--color-card-bg);
+			border: 1px solid var(--color-card-border);
+			border-radius: var(--card-border-radius);
+			box-shadow: 0px 4px 16px 0px var(--color-card-shadow);
+			margin-bottom: var(--card-margin-bottom);
+		}
+
+		.n8n-link a {
+			color: var(--color-link);
+			font-weight: var(--font-weight-bold);
+			font-size: var(--font-size-link);
+			text-decoration: none;
+		}
+
+		.n8n-link svg {
+			display: inline-block;
+			vertical-align: middle;
+		}
+
+		.header h1 {
+			color: var(--color-header);
+			font-size: var(--font-size-header);
+			font-weight: var(--font-weight-normal);
+			padding-bottom: 8px;
+		}
+
+		.header p {
+			color: var(--color-header-subtext);
+			font-size: var(--font-size-subheader);
+			font-weight: var(--font-weight-normal);
+		}
+	</style>
+
+	{{#if dangerousCustomCss}}
 		<style>
-			*, ::after, ::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family:
-			Open Sans, sans-serif; font-weight: 400; font-size: 12px; display: flex; flex-direction:
-			column; justify-content: start; background-color: #FBFCFE; } .container { margin: auto;
-			text-align: center; padding-top: 24px; width: 448px; } .card { padding: 24px;
-			background-color: white; border: 1px solid #DBDFE7; border-radius: 8px; box-shadow: 0px 4px
-			16px 0px #634DFF0F; margin-bottom: 16px; } .n8n-link a { color: #7E8186; font-weight: 600;
-			font-size: 12px; text-decoration: none; } .n8n-link svg { display: inline-block;
-			vertical-align: middle; } .header h1 { color: #525356; font-size: 20px; font-weight: 400;
-			padding-bottom: 8px; } .header p { color: #7E8186; font-size: 14px; font-weight: 400; }
+			{{{ dangerousCustomCss }}}
 		</style>
-	</head>
+	{{/if}}
+</head>
 
-	<body>
-		<div class='container'>
-			<section>
-				<div class='card'>
-					<div class='header'>
-						<h1>Problem loading form</h1>
-						<p>{{message}}</p>
-					</div>
+<body>
+	<div class='container'>
+		<section>
+			<div class='card'>
+				<div class='header'>
+					<h1>Problem loading form</h1>
+					<p>{{message}}</p>
 				</div>
-				<div class='n8n-link'>
-					<a
-						href='https://n8n.io/?utm_source=n8n-internal&amp;utm_medium=form-trigger&amp'
-						target='_blank'
-					>
-						Form automated with
-						<svg
-							width='73'
-							height='20'
-							viewBox='0 0 73 20'
-							fill='none'
-							xmlns='http://www.w3.org/2000/svg'
-						>
-							<path
-								fill-rule='evenodd'
-								clip-rule='evenodd'
-								d='M40.2373 4C40.2373 6.20915 38.4464 8 36.2373 8C34.3735 8 32.8074 6.72525 32.3633 5H26.7787C25.801 5 24.9666 5.70685 24.8059 6.6712L24.6415 7.6576C24.4854 8.59415 24.0116 9.40925 23.3417 10C24.0116 10.5907 24.4854 11.4058 24.6415 12.3424L24.8059 13.3288C24.9666 14.2931 25.801 15 26.7787 15H28.3633C28.8074 13.2747 30.3735 12 32.2373 12C34.4464 12 36.2373 13.7908 36.2373 16C36.2373 18.2092 34.4464 20 32.2373 20C30.3735 20 28.8074 18.7253 28.3633 17H26.7787C24.8233 17 23.1546 15.5864 22.8331 13.6576L22.6687 12.6712C22.508 11.7069 21.6736 11 20.6959 11H19.0645C18.5652 12.64 17.0406 13.8334 15.2373 13.8334C13.434 13.8334 11.9094 12.64 11.4101 11H9.06449C8.56519 12.64 7.04059 13.8334 5.2373 13.8334C3.02817 13.8334 1.2373 12.0424 1.2373 9.83335C1.2373 7.6242 3.02817 5.83335 5.2373 5.83335C7.16069 5.83335 8.76699 7.19085 9.15039 9H11.3242C11.7076 7.19085 13.3139 5.83335 15.2373 5.83335C17.1607 5.83335 18.767 7.19085 19.1504 9H20.6959C21.6736 9 22.508 8.29315 22.6687 7.3288L22.8331 6.3424C23.1546 4.41365 24.8233 3 26.7787 3H32.3633C32.8074 1.27478 34.3735 0 36.2373 0C38.4464 0 40.2373 1.79086 40.2373 4ZM38.2373 4C38.2373 5.10455 37.3419 6 36.2373 6C35.1327 6 34.2373 5.10455 34.2373 4C34.2373 2.89543 35.1327 2 36.2373 2C37.3419 2 38.2373 2.89543 38.2373 4ZM5.2373 11.8334C6.34189 11.8334 7.23729 10.9379 7.23729 9.83335C7.23729 8.72875 6.34189 7.83335 5.2373 7.83335C4.13273 7.83335 3.2373 8.72875 3.2373 9.83335C3.2373 10.9379 4.13273 11.8334 5.2373 11.8334ZM15.2373 11.8334C16.3419 11.8334 17.2373 10.9379 17.2373 9.83335C17.2373 8.72875 16.3419 7.83335 15.2373 7.83335C14.1327 7.83335 13.2373 8.72875 13.2373 9.83335C13.2373 10.9379 14.1327 11.8334 15.2373 11.8334ZM32.2373 18C33.3419 18 34.2373 17.1045 34.2373 16C34.2373 14.8954 33.3419 14 32.2373 14C31.1327 14 30.2373 14.8954 30.2373 16C30.2373 17.1045 31.1327 18 32.2373 18Z'
-								fill='#EA4B71'
-							></path>
-							<path
-								d='M44.2393 15.0007H46.3277V10.5791C46.3277 9.12704 47.2088 8.49074 48.204 8.49074C49.183 8.49074 49.9498 9.14334 49.9498 10.4812V15.0007H52.038V10.057C52.038 7.91969 50.798 6.67969 48.8567 6.67969C47.633 6.67969 46.9477 7.16914 46.4582 7.80544H46.3277L46.1482 6.84284H44.2393V15.0007Z'
-								fill='#101330'
-							></path>
-							<path
-								d='M60.0318 9.50205V9.40415C60.7498 9.0452 61.4678 8.4252 61.4678 7.20155C61.4678 5.43945 60.0153 4.37891 58.0088 4.37891C55.9528 4.37891 54.4843 5.5047 54.4843 7.23415C54.4843 8.4089 55.1698 9.0452 55.9203 9.40415V9.50205C55.0883 9.79575 54.0928 10.6768 54.0928 12.1452C54.0928 13.9237 55.5613 15.1637 57.9923 15.1637C60.4233 15.1637 61.8428 13.9237 61.8428 12.1452C61.8428 10.6768 60.8638 9.81205 60.0318 9.50205ZM57.9923 5.87995C58.8083 5.87995 59.4118 6.40205 59.4118 7.2831C59.4118 8.16415 58.7918 8.6863 57.9923 8.6863C57.1928 8.6863 56.5238 8.16415 56.5238 7.2831C56.5238 6.38575 57.1603 5.87995 57.9923 5.87995ZM57.9923 13.5974C57.0458 13.5974 56.2793 12.9937 56.2793 11.9658C56.2793 11.0358 56.9153 10.3342 57.9758 10.3342C59.0203 10.3342 59.6568 11.0195 59.6568 11.9984C59.6568 12.9937 58.9223 13.5974 57.9923 13.5974Z'
-								fill='#101330'
-							></path>
-							<path
-								d='M63.9639 15.0007H66.0524V10.5791C66.0524 9.12704 66.9334 8.49074 67.9289 8.49074C68.9079 8.49074 69.6744 9.14334 69.6744 10.4812V15.0007H71.7629V10.057C71.7629 7.91969 70.5229 6.67969 68.5814 6.67969C67.3579 6.67969 66.6724 7.16914 66.1829 7.80544H66.0524L65.8729 6.84284H63.9639V15.0007Z'
-								fill='#101330'
-							></path>
-						</svg>
-
-					</a>
-				</div>
-			</section>
-		</div>
-	</body>
+			</div>
+			<div class='n8n-link'>
+				<a href='https://n8n.io/?utm_source=n8n-internal&amp;utm_medium=form-trigger&amp' target='_blank'>
+					Form automated with
+					<svg width='73' height='20' viewBox='0 0 73 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+						<path fill-rule='evenodd' clip-rule='evenodd'
+							d='M40.2373 4C40.2373 6.20915 38.4464 8 36.2373 8C34.3735 8 32.8074 6.72525 32.3633 5H26.7787C25.801 5 24.9666 5.70685 24.8059 6.6712L24.6415 7.6576C24.4854 8.59415 24.0116 9.40925 23.3417 10C24.0116 10.5907 24.4854 11.4058 24.6415 12.3424L24.8059 13.3288C24.9666 14.2931 25.801 15 26.7787 15H28.3633C28.8074 13.2747 30.3735 12 32.2373 12C34.4464 12 36.2373 13.7908 36.2373 16C36.2373 18.2092 34.4464 20 32.2373 20C30.3735 20 28.8074 18.7253 28.3633 17H26.7787C24.8233 17 23.1546 15.5864 22.8331 13.6576L22.6687 12.6712C22.508 11.7069 21.6736 11 20.6959 11H19.0645C18.5652 12.64 17.0406 13.8334 15.2373 13.8334C13.434 13.8334 11.9094 12.64 11.4101 11H9.06449C8.56519 12.64 7.04059 13.8334 5.2373 13.8334C3.02817 13.8334 1.2373 12.0424 1.2373 9.83335C1.2373 7.6242 3.02817 5.83335 5.2373 5.83335C7.16069 5.83335 8.76699 7.19085 9.15039 9H11.3242C11.7076 7.19085 13.3139 5.83335 15.2373 5.83335C17.1607 5.83335 18.767 7.19085 19.1504 9H20.6959C21.6736 9 22.508 8.29315 22.6687 7.3288L22.8331 6.3424C23.1546 4.41365 24.8233 3 26.7787 3H32.3633C32.8074 1.27478 34.3735 0 36.2373 0C38.4464 0 40.2373 1.79086 40.2373 4ZM38.2373 4C38.2373 5.10455 37.3419 6 36.2373 6C35.1327 6 34.2373 5.10455 34.2373 4C34.2373 2.89543 35.1327 2 36.2373 2C37.3419 2 38.2373 2.89543 38.2373 4ZM5.2373 11.8334C6.34189 11.8334 7.23729 10.9379 7.23729 9.83335C7.23729 8.72875 6.34189 7.83335 5.2373 7.83335C4.13273 7.83335 3.2373 8.72875 3.2373 9.83335C3.2373 10.9379 4.13273 11.8334 5.2373 11.8334ZM15.2373 11.8334C16.3419 11.8334 17.2373 10.9379 17.2373 9.83335C17.2373 8.72875 16.3419 7.83335 15.2373 7.83335C14.1327 7.83335 13.2373 8.72875 13.2373 9.83335C13.2373 10.9379 14.1327 11.8334 15.2373 11.8334ZM32.2373 18C33.3419 18 34.2373 17.1045 34.2373 16C34.2373 14.8954 33.3419 14 32.2373 14C31.1327 14 30.2373 14.8954 30.2373 16C30.2373 17.1045 31.1327 18 32.2373 18Z'
+							fill='#EA4B71'></path>
+						<path
+							d='M44.2393 15.0007H46.3277V10.5791C46.3277 9.12704 47.2088 8.49074 48.204 8.49074C49.183 8.49074 49.9498 9.14334 49.9498 10.4812V15.0007H52.038V10.057C52.038 7.91969 50.798 6.67969 48.8567 6.67969C47.633 6.67969 46.9477 7.16914 46.4582 7.80544H46.3277L46.1482 6.84284H44.2393V15.0007Z'
+							fill='#101330'></path>
+						<path
+							d='M60.0318 9.50205V9.40415C60.7498 9.0452 61.4678 8.4252 61.4678 7.20155C61.4678 5.43945 60.0153 4.37891 58.0088 4.37891C55.9528 4.37891 54.4843 5.5047 54.4843 7.23415C54.4843 8.4089 55.1698 9.0452 55.9203 9.40415V9.50205C55.0883 9.79575 54.0928 10.6768 54.0928 12.1452C54.0928 13.9237 55.5613 15.1637 57.9923 15.1637C60.4233 15.1637 61.8428 13.9237 61.8428 12.1452C61.8428 10.6768 60.8638 9.81205 60.0318 9.50205ZM57.9923 5.87995C58.8083 5.87995 59.4118 6.40205 59.4118 7.2831C59.4118 8.16415 58.7918 8.6863 57.9923 8.6863C57.1928 8.6863 56.5238 8.16415 56.5238 7.2831C56.5238 6.38575 57.1603 5.87995 57.9923 5.87995ZM57.9923 13.5974C57.0458 13.5974 56.2793 12.9937 56.2793 11.9658C56.2793 11.0358 56.9153 10.3342 57.9758 10.3342C59.0203 10.3342 59.6568 11.0195 59.6568 11.9984C59.6568 12.9937 58.9223 13.5974 57.9923 13.5974Z'
+							fill='#101330'></path>
+						<path
+							d='M63.9639 15.0007H66.0524V10.5791C66.0524 9.12704 66.9334 8.49074 67.9289 8.49074C68.9079 8.49074 69.6744 9.14334 69.6744 10.4812V15.0007H71.7629V10.057C71.7629 7.91969 70.5229 6.67969 68.5814 6.67969C67.3579 6.67969 66.6724 7.16914 66.1829 7.80544H66.0524L65.8729 6.84284H63.9639V15.0007Z'
+							fill='#101330'></path>
+					</svg>
+				</a>
+			</div>
+		</section>
+	</div>
+</body>
 
 </html>
diff --git a/packages/cli/templates/form-trigger-completion.handlebars b/packages/cli/templates/form-trigger-completion.handlebars
index 6895dd6736..55f43fa990 100644
--- a/packages/cli/templates/form-trigger-completion.handlebars
+++ b/packages/cli/templates/form-trigger-completion.handlebars
@@ -1,29 +1,107 @@
 <html lang='en'>
 
-	<head>
-		<meta charset='UTF-8' />
-		<meta name='viewport' content='width=device-width, initial-scale=1.0' />
-		<link rel='icon' type='image/png' href='https://n8n.io/favicon.ico' />
-		<link
-			href='https://fonts.googleapis.com/css?family=Open+Sans'
-			rel='stylesheet'
-			type='text/css'
-		/>
+<head>
+	<meta charset='UTF-8' />
+	<meta name='viewport' content='width=device-width, initial-scale=1.0' />
+	<link rel='icon' type='image/png' href='https://n8n.io/favicon.ico' />
+	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
 
-		<title>{{formTitle}}</title>
+	<title>{{formTitle}}</title>
 
+	<style>
+		:root {
+			/* Fonts */
+			--font-family: 'Open Sans', sans-serif;
+			--font-weight-normal: 400;
+			--font-weight-bold: 600;
+			--font-size-body: 12px;
+			--font-size-link: 12px;
+			--font-size-header: 20px;
+			--font-size-subheader: 14px;
+
+			/* Colors */
+			--color-background: #FBFCFE;
+			--color-card-bg: white;
+			--color-card-border: #DBDFE7;
+			--color-card-shadow: #634DFF0F;
+			--color-link: #7E8186;
+			--color-header: #525356;
+			--color-header-subtext: #7E8186;
+
+			/* Spacing and dimensions */
+			--padding-container-top: 24px;
+			--container-width: 448px;
+			--card-padding: 24px;
+			--card-margin-bottom: 16px;
+			--card-border-radius: 8px;
+		}
+
+		*,
+		::after,
+		::before {
+			box-sizing: border-box;
+			margin: 0;
+			padding: 0;
+		}
+
+		body {
+			font-family: var(--font-family);
+			font-weight: var(--font-weight-normal);
+			font-size: var(--font-size-body);
+			display: flex;
+			flex-direction: column;
+			justify-content: start;
+			background-color: var(--color-background);
+		}
+
+		.container {
+			margin: auto;
+			text-align: center;
+			padding-top: var(--padding-container-top);
+			width: var(--container-width);
+		}
+
+		.card {
+			padding: var(--card-padding);
+			background-color: var(--color-card-bg);
+			border: 1px solid var(--color-card-border);
+			border-radius: var(--card-border-radius);
+			box-shadow: 0px 4px 16px 0px var(--color-card-shadow);
+			margin-bottom: var(--card-margin-bottom);
+		}
+
+		.n8n-link a {
+			color: var(--color-link);
+			font-weight: var(--font-weight-bold);
+			font-size: var(--font-size-link);
+			text-decoration: none;
+		}
+
+		.n8n-link svg {
+			display: inline-block;
+			vertical-align: middle;
+		}
+
+		.header h1 {
+			color: var(--color-header);
+			font-size: var(--font-size-header);
+			font-weight: var(--font-weight-normal);
+			padding-bottom: 8px;
+		}
+
+		.header p {
+			color: var(--color-header-subtext);
+			font-size: var(--font-size-subheader);
+			font-weight: var(--font-weight-normal);
+		}
+	</style>
+
+	{{#if dangerousCustomCss}}
 		<style>
-			*, ::after, ::before { box-sizing: border-box; margin: 0; padding: 0; } body { font-family:
-			Open Sans, sans-serif; font-weight: 400; font-size: 12px; display: flex; flex-direction:
-			column; justify-content: start; background-color: #FBFCFE; } .container { margin: auto;
-			text-align: center; padding-top: 24px; width: 448px; } .card { padding: 24px;
-			background-color: white; border: 1px solid #DBDFE7; border-radius: 8px; box-shadow: 0px 4px
-			16px 0px #634DFF0F; margin-bottom: 16px; } .n8n-link a { color: #7E8186; font-weight: 600;
-			font-size: 12px; text-decoration: none; } .n8n-link svg { display: inline-block;
-			vertical-align: middle; } .header h1 { color: #525356; font-size: 20px; font-weight: 400;
-			padding-bottom: 8px; } .header p { color: #7E8186; font-size: 14px; font-weight: 400; }
+			{{{ dangerousCustomCss }}}
 		</style>
-	</head>
+	{{/if}}
+</head>
 
 	<body>
 		{{#if responseText}}
diff --git a/packages/cli/templates/form-trigger.handlebars b/packages/cli/templates/form-trigger.handlebars
index 133ed0cd63..4b85be7ab6 100644
--- a/packages/cli/templates/form-trigger.handlebars
+++ b/packages/cli/templates/form-trigger.handlebars
@@ -11,6 +11,69 @@
 		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
 		<title>{{formTitle}}</title>
 		<style>
+			:root {
+				/* Fonts */
+				--font-family: "Open Sans", sans-serif;
+				--font-size-body: 12px;
+				--font-size-label: 14px;
+				--font-size-test-notice: 12px;
+				--font-size-input: 14px;
+				--font-size-header: 20px;
+				--font-size-paragraph: 14px;
+				--font-size-link: 12px;
+				--font-size-error: 12px;
+				--font-size-html-h1: 28px;
+				--font-size-html-h2: 20px;
+				--font-size-html-h3: 16px;
+				--font-size-html-h4: 14px;
+				--font-size-html-h5: 12px;
+				--font-size-html-h6: 10px;
+
+				/* Colors */
+				--color-background: #fbfcfe;
+				--color-test-notice-text: #e6a23d;
+				--color-test-notice-bg: #fefaf6;
+				--color-test-notice-border: #f6dcb7;
+				--color-card-bg: #ffffff;
+				--color-card-border: #dbdfe7;
+				--color-card-shadow: rgba(99, 77, 255, 0.06);
+				--color-link: #7e8186;
+				--color-header: #525356;
+				--color-label: #555555;
+				--color-input-border: #dbdfe7;
+				--color-input-text: #71747A;
+				--color-focus-border: rgb(90, 76, 194);
+				--color-submit-btn-bg: #ff6d5a;
+				--color-submit-btn-text: #ffffff;
+				--color-error: #ea1f30;
+				--color-required: #ff6d5a;
+				--color-clear-button-bg: #7e8186;
+				--color-html-text: #555;
+				--color-html-link: #FF6D5A;
+
+				/* Border Radii */
+				--border-radius-card: 8px;
+				--border-radius-input: 6px;
+				--border-radius-clear-btn: 50%;
+
+				/* Spacing */
+				--padding-container-top: 24px;
+				--padding-card: 24px;
+				--padding-test-notice-vertical: 12px;
+				--padding-test-notice-horizontal: 24px;
+				--margin-bottom-card: 16px;
+				--padding-form-input: 12px;
+
+				/* Dimensions */
+				--container-width: 448px;
+				--submit-btn-height: 48px;
+				--checkbox-size: 18px;
+
+				/* Others */
+				--box-shadow-card: 0px 4px 16px 0px var(--color-card-shadow);
+				--opacity-placeholder: 0.5;
+			}
+
 			*,
 			::after,
 			::before {
@@ -20,53 +83,51 @@
 			}
 
 			body {
-				font-family:
-					"Open Sans",
-					sans-serif;
+				font-family: var(--font-family);
 				font-weight: 400;
-				font-size: 12px;
+				font-size: var(--font-size-body);
 				display: flex;
 				flex-direction: column;
 				justify-content: start;
-				background-color: #fbfcfe;
+				background-color: var(--color-background);
 			}
 
 			.container {
 				margin: auto;
 				text-align: center;
-				padding-top: 24px;
-				width: 448px;
+				padding-top: var(--padding-container-top);
+				width: var(--container-width);
 			}
 
 			.test-notice {
-				padding: 12px 24px;
-				color: #e6a23d;
-				background-color: #fefaf6;
-				border-radius: 8px;
-				border: 1px solid #f6dcb7;
-				font-size: 12px;
+				padding: var(--padding-test-notice-vertical) var(--padding-test-notice-horizontal);
+				color: var(--color-test-notice-text);
+				background-color: var(--color-test-notice-bg);
+				border-radius: var(--border-radius-card);
+				border: 1px solid var(--color-test-notice-border);
+				font-size: var(--font-size-test-notice);
 				font-weight: 400;
 				line-height: 16px;
 				text-align: left;
-				margin-bottom: 16px;
+				margin-bottom: var(--margin-bottom-card);
 			}
 
 			.card {
-				padding: 24px;
-				background-color: white;
-				border: 1px solid #dbdfe7;
-				border-radius: 8px;
-				box-shadow: 0px 4px 16px 0px #634dff0f;
-				margin-bottom: 16px;
+				padding: var(--padding-card);
+				background-color: var(--color-card-bg);
+				border: 1px solid var(--color-card-border);
+				border-radius: var(--border-radius-card);
+				box-shadow: var(--box-shadow-card);
+				margin-bottom: var(--margin-bottom-card);
 			}
 
 			.n8n-link {
-				padding-bottom: 24px;
+				padding-bottom: var(--padding-container-top);
 			}
 			.n8n-link a {
-				color: #7e8186;
+				color: var(--color-link);
 				font-weight: 600;
-				font-size: 12px;
+				font-size: var(--font-size-link);
 				text-decoration: none;
 			}
 
@@ -76,93 +137,89 @@
 			}
 
 			.form-header h1 {
-				color: #525356;
-				font-size: 20px;
+				color: var(--color-header);
+				font-size: var(--font-size-header);
 				font-weight: 400;
 			}
 
 			.form-header p {
 				padding-top: 8px;
-				color: #7e8186;
-				font-size: 14px;
+				color: var(--color-link);
+				font-size: var(--font-size-paragraph);
 				font-weight: 400;
 			}
 
 			.inputs-wrapper {
-				padding-top: 24px;
-				padding-bottom: 24px;
+				padding-top: var(--padding-container-top);
+				padding-bottom: var(--padding-container-top);
 			}
 
 			form label {
 				display: block;
 				text-align: left;
-				font-size: 14px;
+				font-size: var(--font-size-label);
 				font-weight: 600;
-				color: #555555;
+				color: var(--color-label);
 				padding-bottom: 6px;
 			}
 
 			form .form-input {
-				border: 1px solid #dbdfe7;
-				border-radius: 6px;
+				border: 1px solid var(--color-input-border);
+				border-radius: var(--border-radius-input);
 				width: 100%;
-				font-size: 14px;
-				color: #71747A;
+				font-size: var(--font-size-input);
+				color: var(--color-input-text);
 				font-weight: 400;
-				padding: 12px;
+				padding: var(--padding-form-input);
 			}
 
 			form textarea:focus,
 			form input:focus {
 				outline: none;
-				border-color: rgb(90, 76, 194);
+				border-color: var(--color-focus-border);
 			}
 
 			.select-input {
-				border: 1px solid #dbdfe7;
-				border-radius: 6px;
+				border: 1px solid var(--color-input-border);
+				border-radius: var(--border-radius-input);
 			}
 
 			.select-input:focus-within {
-				border: 1px solid rgb(90, 76, 194);
+				border: 1px solid var(--color-focus-border);
 			}
 
 			form select {
 				outline: transparent;
 				border: none;
-				border-radius: 6px;
+				border-radius: var(--border-radius-input);
 				width: 100%;
-				font-size: 14px;
-				color: #71747A;
+				font-size: var(--font-size-input);
+				color: var(--color-input-text);
 				font-weight: 400;
-				background-color: white;
-				padding: 12px;
+				background-color: var(--color-card-bg);
+				padding: var(--padding-form-input);
 				border-right: 12px solid transparent;
 			}
 
 			input[type='date'] {
-				font-family:
-					Open Sans,
-					sans-serif;
+				font-family: var(--font-family);
 			}
 
 			::placeholder {
-				opacity: 0.5;
+				opacity: var(--opacity-placeholder);
 			}
 
 			#submit-btn {
 				width: 100%;
-				height: 48px;
-				padding: 12px;
-				border-radius: 6px;
+				height: var(--submit-btn-height);
+				padding: var(--padding-form-input);
+				border-radius: var(--border-radius-input);
 				border: 0;
-				font-size: 14px;
+				font-size: var(--font-size-input);
 				font-weight: 600;
-				font-family:
-					Open Sans,
-					sans-serif;
-				background-color: #ff6d5a;
-				color: #ffffff;
+				font-family: var(--font-family);
+				background-color: var(--color-submit-btn-bg);
+				color: var(--color-submit-btn-text);
 				cursor: pointer;
 			}
 
@@ -174,7 +231,7 @@
 			#submit-btn span svg {
 				display: inline-block;
 				vertical-align: middle;
-				fill: #ffffff;
+				fill: var(--color-submit-btn-text);
 				animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 			}
 
@@ -194,9 +251,9 @@
 			.error-hidden {
 				display: block;
 				position: relative;
-				color: #ea1f30;
+				color: var(--color-error);
 				text-align: left;
-				font-size: 12px;
+				font-size: var(--font-size-error);
 				font-weight: 400;
 				visibility: hidden;
 				padding-top: 6px;
@@ -220,33 +277,33 @@
 
 			.multiselect-option label {
 				padding-left: 12px;
-				color: #7e8186;
+				color: var(--color-link);
 				font-weight: 400;
 				cursor: pointer;
 			}
 
 			.multiselect-checkbox {
 				vertical-align: middle;
-				min-width: 18px;
+				min-width: var(--checkbox-size);
 			}
 
 			input[type='checkbox'] {
-				width: 18px;
-				height: 18px;
+				width: var(--checkbox-size);
+				height: var(--checkbox-size);
 				cursor: pointer;
 			}
 			/* required field ----------------------------- */
 			.form-required {
 			}
 			label.form-required::after {
-					content: ' *';
-					color: #ff6d5a;
+				content: ' *';
+				color: var(--color-required);
 			}
 
 			hr {
 				border: 0;
 				height: 1px;
-				border-top: 1px solid #dbdfe7;
+				border-top: 1px solid var(--color-input-border);
 				margin-top: 24px;
 				margin-bottom: 24px;
 				display: none;
@@ -264,14 +321,12 @@
 				right: 5px;
 				top: 50%;
 				transform: translateY(-65%);
-				background-color: #7e8186;
+				background-color: var(--color-clear-button-bg);
 				border: none;
-				border-radius: 50%;
+				border-radius: var(--border-radius-clear-btn);
 				font-size: 14px;
 				font-weight: 600;
-				font-family:
-					Open Sans,
-					sans-serif;
+				font-family: var(--font-family);
 				color: white;
 				width: 20px;
 				height: 20px;
@@ -281,66 +336,66 @@
 				display: none;
 			}
 			input[type="file"]:not(:empty) + .clear-button {
-					display: inline-block;
+				display: inline-block;
 			}
 
 			div.html {
-					text-align: left;
-					color: #555;
-					font-size: 14px;
+				text-align: left;
+				color: var(--color-html-text);
+				font-size: var(--font-size-input);
 			}
 			div.html h1, div.html h2, div.html h3, div.html h4, div.html h5, div.html h6, div.html p, div.html ul, div.html ol, div.html a {
-					font-weight: 400;
-					font-style: normal;
-					margin-bottom: 8px;
+				font-weight: 400;
+				font-style: normal;
+				margin-bottom: 8px;
 			}
 			div.html li {
-					margin-bottom: 8px;
-					margin-left: 24px;
+				margin-bottom: 8px;
+				margin-left: 24px;
 			}
 			div.html ul, div.html ol {
-					font-size: 14px;
-					display: flex;
-					flex-direction: column;
-					align-self: stretch;
-					line-height: normal;
+				font-size: var(--font-size-input);
+				display: flex;
+				flex-direction: column;
+				align-self: stretch;
+				line-height: normal;
 			}
 			div.html b {
-					font-weight: 600;
+				font-weight: 600;
 			}
 			div.html h1 {
-					font-size: 28px;
-					line-height: 35px;
+				font-size: var(--font-size-html-h1);
+				line-height: 35px;
 			}
 			div.html h2 {
-					font-size: 20px;
-					line-height: 26px;
+				font-size: var(--font-size-html-h2);
+				line-height: 26px;
 			}
 			div.html h3 {
-					font-size: 16px;
-					line-height: 24px;
+				font-size: var(--font-size-html-h3);
+				line-height: 24px;
 			}
 			div.html h4 {
-					font-size: 14px;
-					line-height: 18px;
+				font-size: var(--font-size-html-h4);
+				line-height: 18px;
 			}
 			div.html h5 {
-					font-size: 12px;
+				font-size: var(--font-size-html-h5);
 			}
 			div.html h6 {
-					font-size: 10px;
+				font-size: var(--font-size-html-h6);
 			}
 			div.html p {
-					margin-bottom: 8px;
+				margin-bottom: 8px;
 			}
 			div.html a {
-					color:  #FF6D5A;
-					font-size: 14px;
+				color: var(--color-html-link);
+				font-size: var(--font-size-input);
 			}
 
 			@media only screen and (max-width: 500px) {
 				body {
-					background-color: white;
+					background-color: #ffffff;
 				}
 				hr {
 					display: block;
@@ -349,21 +404,27 @@
 					width: 95%;
 					min-height: 100vh;
 					padding: 24px;
-					background-color: white;
-					border: 0px solid #dbdfe7;
+					background-color: #ffffff;
+					border: 0px solid var(--color-input-border);
 					border-radius: 0px;
-					box-shadow: 0px 0px 0px 0px white;
+					box-shadow: 0px 0px 0px 0px #ffffff;
 				}
 				.card {
 					padding: 0px;
-					background-color: white;
-					border: 0px solid #dbdfe7;
+					background-color: #ffffff;
+					border: 0px solid var(--color-input-border);
 					border-radius: 0px;
-					box-shadow: 0px 0px 0px 0px white;
+					box-shadow: 0px 0px 0px 0px #ffffff;
 					margin-bottom: 0px;
 				}
 			}
 		</style>
+
+		{{#if dangerousCustomCss}}
+			<style>
+				{{{ dangerousCustomCss }}}
+			</style>
+		{{/if}}
 	</head>
 
 	<body>
@@ -376,8 +437,6 @@
 					<hr>
 				{{/if}}
 
-
-
 				{{#if validForm}}
 					<form class='card' action='#' method='POST' name='n8n-form' id='n8n-form' novalidate>
 						<div class='form-header'>
@@ -490,7 +549,7 @@
 									xmlns='http://www.w3.org/2000/svg'
 									height='18px'
 									viewBox='0 0 512 512'
-								><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+								>
 									<path
 										d='M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z'
 									/>
@@ -564,8 +623,6 @@
 					</div>
 				{{/if}}
 
-
-
 				{{#if redirectUrl}}
 					<a id='redirectUrl' href='{{redirectUrl}}' style='display: none;'></a>
 				{{/if}}
@@ -642,12 +699,12 @@
 			const form = document.querySelector('#n8n-form');
 
 			document.querySelectorAll("input[type=number]").forEach(function (element) {
-        element.addEventListener("wheel", function(event) {
-            if (document.activeElement === event.target) {
-                event.preventDefault();
-            }
-        });
-    	});
+				element.addEventListener("wheel", function(event) {
+					if (document.activeElement === event.target) {
+						event.preventDefault();
+					}
+				});
+			});
 
 			document.querySelectorAll('input[type="file"]').forEach(fileInput => {
 				const clearButton = fileInput.nextElementSibling;
@@ -657,8 +714,8 @@
 					const files = fileInput.files;
 
 					if (files.length > 0) {
-							previousFiles = Array.from(files);
-							clearButton.style.display = 'inline-block';
+						previousFiles = Array.from(files);
+						clearButton.style.display = 'inline-block';
 					} else {
 						if (previousFiles.length > 0) {
 							const dataTransfer = new DataTransfer();
@@ -702,15 +759,15 @@
 				const errorSelector = `.error-${input.id}`;
 				const error = document.querySelector(errorSelector);
 
-        input.addEventListener("input", function(event) {
+				input.addEventListener("input", function(event) {
 					const value = input.value.trim();
 					if (value === "") {
 						error.classList.remove('error-show');
 					} else {
 						validateEmailInput(value, error);
 					}
-        });
-    	});
+				});
+			});
 
 			form.addEventListener('submit', (e) => {
 				const valid = [];
@@ -753,11 +810,6 @@
 						}
 					}
 
-					document.querySelectorAll('.multiselect').forEach((multiselect) => {
-						const selectedValues = getSelectedValues(multiselect);
-						formData.append(multiselect.id, JSON.stringify(selectedValues));
-					});
-
 					document.querySelector('#submit-btn').disabled = true;
 					document.querySelector('#submit-btn').style.cursor = 'not-allowed';
 					document.querySelector('#submit-btn span').style.display = 'inline-block';
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 06f2e01ab4..39492b7071 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/commands": "^6.5.0",
+    "@codemirror/lang-css": "^6.0.1",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-python": "^6.1.6",
@@ -53,9 +54,9 @@
     "change-case": "^5.4.4",
     "chart.js": "^4.4.0",
     "codemirror-lang-html-n8n": "^1.0.0",
-    "curlconverter": "^4.12.0",
     "comlink": "^4.4.1",
     "core-js": "^3.40.0",
+    "curlconverter": "^4.12.0",
     "dateformat": "^3.0.3",
     "email-providers": "^2.0.1",
     "esprima-next": "5.8.4",
@@ -87,8 +88,8 @@
     "vue-router": "catalog:frontend",
     "vue-virtual-scroller": "2.0.0-beta.8",
     "vue3-touch-events": "^4.1.3",
-    "web-tree-sitter": "0.24.3",
     "vuedraggable": "4.1.0",
+    "web-tree-sitter": "0.24.3",
     "xss": "catalog:"
   },
   "devDependencies": {
diff --git a/packages/editor-ui/src/components/CssEditor/CssEditor.vue b/packages/editor-ui/src/components/CssEditor/CssEditor.vue
new file mode 100644
index 0000000000..a6ef3ffbb3
--- /dev/null
+++ b/packages/editor-ui/src/components/CssEditor/CssEditor.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { history } from '@codemirror/commands';
+import { cssLanguage } from '@codemirror/lang-css';
+import { LanguageSupport, bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
+import { Prec } from '@codemirror/state';
+import {
+	dropCursor,
+	highlightActiveLine,
+	highlightActiveLineGutter,
+	keymap,
+	lineNumbers,
+} from '@codemirror/view';
+import { computed, onMounted, ref, toRaw, watch } from 'vue';
+
+import { useExpressionEditor } from '@/composables/useExpressionEditor';
+import { n8nCompletionSources } from '@/plugins/codemirror/completions/addCompletions';
+import { editorKeymap } from '@/plugins/codemirror/keymap';
+import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
+import { codeEditorTheme } from '../CodeNodeEditor/theme';
+import { dropInExpressionEditor, mappingDropCursor } from '@/plugins/codemirror/dragAndDrop';
+import {
+	expressionCloseBrackets,
+	expressionCloseBracketsConfig,
+} from '@/plugins/codemirror/expressionCloseBrackets';
+
+type Props = {
+	modelValue: string;
+	rows?: number;
+	isReadOnly?: boolean;
+	fullscreen?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	rows: 4,
+	isReadOnly: false,
+	fullscreen: false,
+});
+
+const emit = defineEmits<{
+	'update:model-value': [value: string];
+}>();
+
+const cssEditor = ref<HTMLElement>();
+const editorValue = ref<string>(props.modelValue);
+
+const extensions = computed(() => [
+	bracketMatching(),
+	n8nAutocompletion(),
+	new LanguageSupport(cssLanguage, [
+		cssLanguage.data.of({ closeBrackets: expressionCloseBracketsConfig }),
+		n8nCompletionSources().map((source) => cssLanguage.data.of(source)),
+	]),
+	expressionCloseBrackets(),
+	Prec.highest(keymap.of(editorKeymap)),
+	indentOnInput(),
+	codeEditorTheme({
+		isReadOnly: props.isReadOnly,
+		maxHeight: props.fullscreen ? '100%' : '40vh',
+		minHeight: '20vh',
+		rows: props.rows,
+	}),
+	lineNumbers(),
+	highlightActiveLineGutter(),
+	history(),
+	foldGutter(),
+	dropCursor(),
+	indentOnInput(),
+	highlightActiveLine(),
+	mappingDropCursor(),
+]);
+
+const {
+	editor: editorRef,
+	segments,
+	readEditorValue,
+	isDirty,
+} = useExpressionEditor({
+	editorRef: cssEditor,
+	editorValue,
+	extensions,
+});
+
+watch(segments.display, () => {
+	emit('update:model-value', readEditorValue());
+});
+
+onMounted(() => {
+	if (isDirty.value) emit('update:model-value', readEditorValue());
+});
+
+async function onDrop(value: string, event: MouseEvent) {
+	if (!editorRef.value) return;
+
+	await dropInExpressionEditor(toRaw(editorRef.value), event, value);
+}
+</script>
+
+<template>
+	<div :class="$style.editor">
+		<DraggableTarget type="mapping" :disabled="isReadOnly" @drop="onDrop">
+			<template #default="{ activeDrop, droppable }">
+				<div
+					ref="cssEditor"
+					:class="[
+						$style.fillHeight,
+						{ [$style.activeDrop]: activeDrop, [$style.droppable]: droppable },
+					]"
+					data-test-id="css-editor-container"
+				></div
+			></template>
+		</DraggableTarget>
+		<slot name="suffix" />
+	</div>
+</template>
+
+<style lang="scss" module>
+.editor {
+	height: 100%;
+
+	& > div {
+		height: 100%;
+	}
+}
+
+.fillHeight {
+	height: 100%;
+}
+
+.droppable {
+	:global(.cm-editor) {
+		border-color: var(--color-ndv-droppable-parameter);
+		border-style: dashed;
+		border-width: 1.5px;
+	}
+}
+
+.activeDrop {
+	:global(.cm-editor) {
+		border-color: var(--color-success);
+		border-style: solid;
+		cursor: grabbing;
+		border-width: 1px;
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index c610185903..6c672ffe1d 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -67,6 +67,7 @@ import { createEventBus } from '@n8n/utils/event-bus';
 import { useRouter } from 'vue-router';
 import { useElementSize } from '@vueuse/core';
 import { completeExpressionSyntax, isStringWithExpressionSyntax } from '@/utils/expressions';
+import CssEditor from './CssEditor/CssEditor.vue';
 
 type Picker = { $emit: (arg0: string, arg1: Date) => void };
 
@@ -408,7 +409,7 @@ const displayIssues = computed(
 		getIssues.value.length > 0,
 );
 
-const editorType = computed<EditorType | 'json' | 'code'>(() => {
+const editorType = computed<EditorType | 'json' | 'code' | 'cssEditor'>(() => {
 	return getArgument<EditorType>('editor');
 });
 const editorIsReadOnly = computed<boolean>(() => {
@@ -1225,6 +1226,14 @@ onUpdated(async () => {
 							fullscreen
 							@update:model-value="valueChangedDebounced"
 						/>
+						<CssEditor
+							v-else-if="editorType === 'cssEditor' && codeEditDialogVisible"
+							:model-value="modelValueString"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							fullscreen
+							@update:model-value="valueChangedDebounced"
+						/>
 						<SqlEditor
 							v-else-if="editorType === 'sqlEditor' && codeEditDialogVisible"
 							:model-value="modelValueString"
@@ -1312,6 +1321,25 @@ onUpdated(async () => {
 					</template>
 				</HtmlEditor>
 
+				<CssEditor
+					v-else-if="editorType === 'cssEditor' && !codeEditDialogVisible"
+					:model-value="modelValueString"
+					:is-read-only="isReadOnly"
+					:rows="editorRows"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<N8nIcon
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="i18n.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</CssEditor>
+
 				<SqlEditor
 					v-else-if="editorType === 'sqlEditor'"
 					:model-value="modelValueString"
diff --git a/packages/frontend/@n8n/chat/src/components/Button.vue b/packages/frontend/@n8n/chat/src/components/Button.vue
index ca35153fc6..fe590facad 100644
--- a/packages/frontend/@n8n/chat/src/components/Button.vue
+++ b/packages/frontend/@n8n/chat/src/components/Button.vue
@@ -9,13 +9,13 @@
 	text-align: center;
 	vertical-align: middle;
 	user-select: none;
-	color: var(--chat--button--color, var(--chat--color-light));
-	background-color: var(--chat--button--background, var(--chat--color-primary));
+	color: var(--chat--button--color);
+	background-color: var(--chat--button--background);
 	border: 1px solid transparent;
-	padding: var(--chat--button--padding, calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing));
+	padding: var(--chat--button--padding);
 	font-size: 1rem;
 	line-height: 1.5;
-	border-radius: var(--chat--button--border-radius, var(--chat--border-radius));
+	border-radius: var(--chat--button--border-radius);
 	transition:
 		color var(--chat--transition-duration) ease-in-out,
 		background-color var(--chat--transition-duration) ease-in-out,
@@ -24,8 +24,8 @@
 	cursor: pointer;
 
 	&:hover {
-		color: var(--chat--button--hover--color, var(--chat--color-light));
-		background-color: var(--chat--button--hover--background, var(--chat--color-primary-shade-50));
+		color: var(--chat--button--hover--color);
+		background-color: var(--chat--button--hover--background);
 		text-decoration: none;
 	}
 
diff --git a/packages/frontend/@n8n/chat/src/components/ChatWindow.vue b/packages/frontend/@n8n/chat/src/components/ChatWindow.vue
index bd5ddbbb5b..39a3a092d4 100644
--- a/packages/frontend/@n8n/chat/src/components/ChatWindow.vue
+++ b/packages/frontend/@n8n/chat/src/components/ChatWindow.vue
@@ -40,9 +40,9 @@ function toggle() {
 	position: fixed;
 	display: flex;
 	flex-direction: column;
-	bottom: var(--chat--window--bottom, var(--chat--spacing));
-	right: var(--chat--window--right, var(--chat--spacing));
-	z-index: var(--chat--window--z-index, 9999);
+	bottom: var(--chat--window--bottom);
+	right: var(--chat--window--right);
+	z-index: var(--chat--window--z-index);
 
 	max-width: calc(100% - var(--chat--window--right, var(--chat--spacing)) * 2);
 	max-height: calc(100% - var(--chat--window--bottom, var(--chat--spacing)) * 2);
@@ -71,8 +71,8 @@ function toggle() {
 		background: var(--chat--toggle--background);
 		color: var(--chat--toggle--color);
 		cursor: pointer;
-		width: var(--chat--toggle--width, var(--chat--toggle--size));
-		height: var(--chat--toggle--height, var(--chat--toggle--size));
+		width: var(--chat--toggle--width);
+		height: var(--chat--toggle--height);
 		border-radius: var(--chat--toggle--border-radius, 50%);
 		display: inline-flex;
 		align-items: center;
diff --git a/packages/frontend/@n8n/chat/src/components/Input.vue b/packages/frontend/@n8n/chat/src/components/Input.vue
index 1b9e0b9608..428787950c 100644
--- a/packages/frontend/@n8n/chat/src/components/Input.vue
+++ b/packages/frontend/@n8n/chat/src/components/Input.vue
@@ -258,13 +258,13 @@ function adjustHeight(event: Event) {
 
 	textarea {
 		font-family: inherit;
-		font-size: var(--chat--input--font-size, inherit);
+		font-size: var(--chat--input--font-size);
 		width: 100%;
 		border: var(--chat--input--border, 0);
-		border-radius: var(--chat--input--border-radius, 0);
-		padding: var(--chat--input--padding, 0.8rem);
+		border-radius: var(--chat--input--border-radius);
+		padding: var(--chat--input--padding);
 		min-height: var(--chat--textarea--height, 2.5rem); // Set a smaller initial height
-		max-height: var(--chat--textarea--max-height, 30rem);
+		max-height: var(--chat--textarea--max-height);
 		height: var(--chat--textarea--height, 2.5rem); // Set initial height same as min-height
 		resize: none;
 		overflow-y: auto;
@@ -274,7 +274,7 @@ function adjustHeight(event: Event) {
 		line-height: var(--chat--input--line-height, 1.5);
 
 		&::placeholder {
-			font-size: var(--chat--input--placeholder--font-size, var(--chat--input--font-size, inherit));
+			font-size: var(--chat--input--placeholder--font-size, var(--chat--input--font-size));
 		}
 		&:focus,
 		&:hover {
@@ -315,20 +315,17 @@ function adjustHeight(event: Event) {
 				--chat--input--send--button--background-hover,
 				var(--chat--input--send--button--background)
 			);
-			color: var(--chat--input--send--button--color-hover, var(--chat--color-secondary-shade-50));
+			color: var(--chat--input--send--button--color-hover);
 		}
 	}
 }
 .chat-input-file-button {
 	background: var(--chat--input--file--button--background, white);
-	color: var(--chat--input--file--button--color, var(--chat--color-secondary));
+	color: var(--chat--input--file--button--color);
 
 	&:hover {
-		background: var(
-			--chat--input--file--button--background-hover,
-			var(--chat--input--file--button--background)
-		);
-		color: var(--chat--input--file--button--color-hover, var(--chat--color-secondary-shade-50));
+		background: var(--chat--input--file--button--background-hover);
+		color: var(--chat--input--file--button--color-hover);
 	}
 }
 
@@ -340,11 +337,11 @@ function adjustHeight(event: Event) {
 	flex-direction: row;
 	flex-wrap: wrap;
 	gap: 0.5rem;
-	padding: var(--chat--files-spacing, 0.25rem);
+	padding: var(--chat--files-spacing);
 }
 
 .chat-input-left-panel {
-	width: var(--chat--input--left--panel--width, 2rem);
+	width: var(--chat--input--left--panel--width);
 	margin-left: 0.4rem;
 }
 </style>
diff --git a/packages/frontend/@n8n/chat/src/components/Layout.vue b/packages/frontend/@n8n/chat/src/components/Layout.vue
index 3c1546e8d4..d1226146c2 100644
--- a/packages/frontend/@n8n/chat/src/components/Layout.vue
+++ b/packages/frontend/@n8n/chat/src/components/Layout.vue
@@ -43,46 +43,33 @@ onBeforeUnmount(() => {
 	display: flex;
 	overflow-y: auto;
 	flex-direction: column;
-	font-family: var(
-		--chat--font-family,
-		(
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI',
-			Roboto,
-			Oxygen-Sans,
-			Ubuntu,
-			Cantarell,
-			'Helvetica Neue',
-			sans-serif
-		)
-	);
+	font-family: var(--chat--font-family);
 
 	.chat-header {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		gap: 1em;
-		height: var(--chat--header-height, auto);
-		padding: var(--chat--header--padding, var(--chat--spacing));
-		background: var(--chat--header--background, var(--chat--color-dark));
-		color: var(--chat--header--color, var(--chat--color-light));
-		border-top: var(--chat--header--border-top, none);
-		border-bottom: var(--chat--header--border-bottom, none);
-		border-left: var(--chat--header--border-left, none);
-		border-right: var(--chat--header--border-right, none);
+		height: var(--chat--header-height);
+		padding: var(--chat--header--padding);
+		background: var(--chat--header--background);
+		color: var(--chat--header--color);
+		border-top: var(--chat--header--border-top);
+		border-bottom: var(--chat--header--border-bottom);
+		border-left: var(--chat--header--border-left);
+		border-right: var(--chat--header--border-right);
 		h1 {
 			font-size: var(--chat--heading--font-size);
-			color: var(--chat--header--color, var(--chat--color-light));
+			color: var(--chat--header--color);
 		}
 		p {
-			font-size: var(--chat--subtitle--font-size, inherit);
-			line-height: var(--chat--subtitle--line-height, 1.8);
+			font-size: var(--chat--subtitle--font-size);
+			line-height: var(--chat--subtitle--line-height);
 		}
 	}
 
 	.chat-body {
-		background: var(--chat--body--background, var(--chat--color-light));
+		background: var(--chat--body--background);
 		flex: 1;
 		display: flex;
 		flex-direction: column;
@@ -93,8 +80,8 @@ onBeforeUnmount(() => {
 
 	.chat-footer {
 		border-top: 1px solid var(--chat--color-light-shade-100);
-		background: var(--chat--footer--background, var(--chat--color-light));
-		color: var(--chat--footer--color, var(--chat--color-dark));
+		background: var(--chat--footer--background);
+		color: var(--chat--footer--color);
 	}
 }
 </style>
diff --git a/packages/frontend/@n8n/chat/src/components/Message.vue b/packages/frontend/@n8n/chat/src/components/Message.vue
index 4ee4514632..0cecd78cfc 100644
--- a/packages/frontend/@n8n/chat/src/components/Message.vue
+++ b/packages/frontend/@n8n/chat/src/components/Message.vue
@@ -133,9 +133,9 @@ onMounted(async () => {
 	display: block;
 	position: relative;
 	max-width: fit-content;
-	font-size: var(--chat--message--font-size, 1rem);
-	padding: var(--chat--message--padding, var(--chat--spacing));
-	border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
+	font-size: var(--chat--message--font-size);
+	padding: var(--chat--message--padding);
+	border-radius: var(--chat--message--border-radius);
 	scroll-margin: 3rem;
 
 	.chat-message-actions {
@@ -160,13 +160,13 @@ onMounted(async () => {
 	}
 
 	p {
-		line-height: var(--chat--message-line-height, 1.5);
+		line-height: var(--chat--message-line-height);
 		word-wrap: break-word;
 	}
 
 	// Default message gap is half of the spacing
 	+ .chat-message {
-		margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 1));
+		margin-top: var(--chat--message--margin-bottom);
 	}
 
 	// Spacing between messages from different senders is double the individual message gap
@@ -178,7 +178,7 @@ onMounted(async () => {
 	&.chat-message-from-bot {
 		&:not(.chat-message-transparent) {
 			background-color: var(--chat--message--bot--background);
-			border: var(--chat--message--bot--border, none);
+			border: var(--chat--message--bot--border);
 		}
 		color: var(--chat--message--bot--color);
 		border-bottom-left-radius: 0;
@@ -187,7 +187,7 @@ onMounted(async () => {
 	&.chat-message-from-user {
 		&:not(.chat-message-transparent) {
 			background-color: var(--chat--message--user--background);
-			border: var(--chat--message--user--border, none);
+			border: var(--chat--message--user--border);
 		}
 		color: var(--chat--message--user--color);
 		margin-left: auto;
diff --git a/packages/frontend/@n8n/chat/src/components/MessagesList.vue b/packages/frontend/@n8n/chat/src/components/MessagesList.vue
index 1a0cc31874..215e1baffe 100644
--- a/packages/frontend/@n8n/chat/src/components/MessagesList.vue
+++ b/packages/frontend/@n8n/chat/src/components/MessagesList.vue
@@ -51,6 +51,6 @@ watch(
 .chat-messages-list {
 	margin-top: auto;
 	display: block;
-	padding: var(--chat--messages-list--padding, var(--chat--spacing));
+	padding: var(--chat--messages-list--padding);
 }
 </style>
diff --git a/packages/frontend/@n8n/chat/src/css/_tokens.scss b/packages/frontend/@n8n/chat/src/css/_tokens.scss
index 872dfb99b2..d5357ee863 100644
--- a/packages/frontend/@n8n/chat/src/css/_tokens.scss
+++ b/packages/frontend/@n8n/chat/src/css/_tokens.scss
@@ -1,4 +1,5 @@
 :root {
+	/* Colors */
 	--chat--color-primary: #e74266;
 	--chat--color-primary-shade-50: #db4061;
 	--chat--color-primary-shade-100: #cf3c5c;
@@ -13,26 +14,106 @@
 	--chat--color-disabled: #777980;
 	--chat--color-typing: #404040;
 
+	/* Base Layout */
 	--chat--spacing: 1rem;
 	--chat--border-radius: 0.25rem;
 	--chat--transition-duration: 0.15s;
+	--chat--font-family: (
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Oxygen-Sans,
+		Ubuntu,
+		Cantarell,
+		'Helvetica Neue',
+		sans-serif
+	);
 
+	/* Window Dimensions */
 	--chat--window--width: 400px;
 	--chat--window--height: 600px;
+	--chat--window--bottom: var(--chat--spacing);
+	--chat--window--right: var(--chat--spacing);
+	--chat--window--z-index: 9999;
+	--chat--window--border: 1px solid var(--chat--color-light-shade-50);
+	--chat--window--border-radius: var(--chat--border-radius);
+	--chat--window--margin-bottom: var(--chat--spacing);
 
-	--chat--textarea--height: 50px;
+	/* Header Styles */
+	--chat--header-height: auto;
+	--chat--header--padding: var(--chat--spacing);
+	--chat--header--background: var(--chat--color-dark);
+	--chat--header--color: var(--chat--color-light);
+	--chat--header--border-top: none;
+	--chat--header--border-bottom: none;
+	--chat--header--border-left: none;
+	--chat--header--border-right: none;
+	--chat--heading--font-size: 2em;
+	--chat--subtitle--font-size: inherit;
+	--chat--subtitle--line-height: 1.8;
 
+	/* Message Styles */
+	--chat--message--font-size: 1rem;
+	--chat--message--padding: var(--chat--spacing);
+	--chat--message--border-radius: var(--chat--border-radius);
+	--chat--message-line-height: 1.5;
+	--chat--message--margin-bottom: calc(var(--chat--spacing) * 1);
 	--chat--message--bot--background: var(--chat--color-white);
 	--chat--message--bot--color: var(--chat--color-dark);
+	--chat--message--bot--border: none;
 	--chat--message--user--background: var(--chat--color-secondary);
 	--chat--message--user--color: var(--chat--color-white);
+	--chat--message--user--border: none;
 	--chat--message--pre--background: rgba(0, 0, 0, 0.05);
+	--chat--messages-list--padding: var(--chat--spacing);
 
+	/* Toggle Button */
+	--chat--toggle--size: 64px;
+	--chat--toggle--width: var(--chat--toggle--size);
+	--chat--toggle--height: var(--chat--toggle--size);
+	--chat--toggle--border-radius: 50%;
 	--chat--toggle--background: var(--chat--color-primary);
 	--chat--toggle--hover--background: var(--chat--color-primary-shade-50);
 	--chat--toggle--active--background: var(--chat--color-primary-shade-100);
 	--chat--toggle--color: var(--chat--color-white);
-	--chat--toggle--size: 64px;
 
-	--chat--heading--font-size: 2em;
+	/* Input Area */
+	--chat--textarea--height: 50px;
+	--chat--textarea--max-height: 30rem;
+	--chat--input--font-size: inherit;
+	--chat--input--border: 0;
+	--chat--input--border-radius: 0;
+	--chat--input--padding: 0.8rem;
+	--chat--input--background: var(--chat--color-white);
+	--chat--input--text-color: initial;
+	--chat--input--line-height: 1.5;
+	--chat--input--placeholder--font-size: var(--chat--input--font-size);
+	--chat--input--border-active: 0;
+	--chat--input--left--panel--width: 2rem;
+
+	/* Button Styles */
+	--chat--button--color: var(--chat--color-light);
+	--chat--button--background: var(--chat--color-primary);
+	--chat--button--padding: calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing);
+	--chat--button--border-radius: var(--chat--border-radius);
+	--chat--button--hover--color: var(--chat--color-light);
+	--chat--button--hover--background: var(--chat--color-primary-shade-50);
+	--chat--close--button--color-hover: var(--chat--color-primary);
+
+	/* Send and File Buttons */
+	--chat--input--send--button--background: var(--chat--color-white);
+	--chat--input--send--button--color: var(--chat--color-light);
+	--chat--input--send--button--background-hover: var(--chat--color-primary-shade-50);
+	--chat--input--send--button--color-hover: var(--chat--color-secondary-shade-50);
+	--chat--input--file--button--background: var(--chat--color-white);
+	--chat--input--file--button--color: var(--chat--color-secondary);
+	--chat--input--file--button--background-hover: var(--chat--input--file--button--background);
+	--chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);
+	--chat--files-spacing: 0.25rem;
+
+	/* Body and Footer */
+	--chat--body--background: var(--chat--color-light);
+	--chat--footer--background: var(--chat--color-light);
+	--chat--footer--color: var(--chat--color-dark);
 }
diff --git a/packages/nodes-base/nodes/Form/Form.node.ts b/packages/nodes-base/nodes/Form/Form.node.ts
index 7d7578a971..f060e3f815 100644
--- a/packages/nodes-base/nodes/Form/Form.node.ts
+++ b/packages/nodes-base/nodes/Form/Form.node.ts
@@ -18,6 +18,7 @@ import {
 	NodeConnectionType,
 } from 'n8n-workflow';
 
+import { cssVariables } from './cssVariables';
 import { renderFormCompletion } from './formCompletionUtils';
 import { renderFormNode } from './formNodeUtils';
 import { configureWaitTillDate } from '../../utils/sendAndWait/configureWaitTillDate.util';
@@ -107,6 +108,17 @@ const pageProperties = updateDisplayOptions(
 					type: 'string',
 					default: 'Submit',
 				},
+				{
+					displayName: 'Custom Form Styling',
+					name: 'customCss',
+					type: 'string',
+					typeOptions: {
+						rows: 10,
+						editor: 'cssEditor',
+					},
+					default: cssVariables.trim(),
+					description: 'Override default styling of the public form interface with CSS',
+				},
 			],
 		},
 	],
@@ -205,7 +217,20 @@ const completionProperties = updateDisplayOptions(
 			type: 'collection',
 			placeholder: 'Add option',
 			default: {},
-			options: [{ ...formTitle, required: false, displayName: 'Completion Page Title' }],
+			options: [
+				{ ...formTitle, required: false, displayName: 'Completion Page Title' },
+				{
+					displayName: 'Custom Form Styling',
+					name: 'customCss',
+					type: 'string',
+					typeOptions: {
+						rows: 10,
+						editor: 'cssEditor',
+					},
+					default: cssVariables.trim(),
+					description: 'Override default styling of the public form interface with CSS',
+				},
+			],
 			displayOptions: {
 				show: {
 					respondWith: ['text'],
diff --git a/packages/nodes-base/nodes/Form/cssVariables.ts b/packages/nodes-base/nodes/Form/cssVariables.ts
new file mode 100644
index 0000000000..2cd06dc01a
--- /dev/null
+++ b/packages/nodes-base/nodes/Form/cssVariables.ts
@@ -0,0 +1,70 @@
+export const cssVariables = `
+:root {
+	--font-family: 'Open Sans', sans-serif;
+	--font-weight-normal: 400;
+	--font-weight-bold: 600;
+	--font-size-body: 12px;
+	--font-size-label: 14px;
+	--font-size-test-notice: 12px;
+	--font-size-input: 14px;
+	--font-size-header: 20px;
+	--font-size-paragraph: 14px;
+	--font-size-link: 12px;
+	--font-size-error: 12px;
+	--font-size-html-h1: 28px;
+	--font-size-html-h2: 20px;
+	--font-size-html-h3: 16px;
+	--font-size-html-h4: 14px;
+	--font-size-html-h5: 12px;
+	--font-size-html-h6: 10px;
+	--font-size-subheader: 14px;
+
+	/* Colors */
+	--color-background: #fbfcfe;
+	--color-test-notice-text: #e6a23d;
+	--color-test-notice-bg: #fefaf6;
+	--color-test-notice-border: #f6dcb7;
+	--color-card-bg: #ffffff;
+	--color-card-border: #dbdfe7;
+	--color-card-shadow: rgba(99, 77, 255, 0.06);
+	--color-link: #7e8186;
+	--color-header: #525356;
+	--color-label: #555555;
+	--color-input-border: #dbdfe7;
+	--color-input-text: #71747A;
+	--color-focus-border: rgb(90, 76, 194);
+	--color-submit-btn-bg: #ff6d5a;
+	--color-submit-btn-text: #ffffff;
+	--color-error: #ea1f30;
+	--color-required: #ff6d5a;
+	--color-clear-button-bg: #7e8186;
+	--color-html-text: #555;
+	--color-html-link: #ff6d5a;
+	--color-header-subtext: #7e8186;
+
+	/* Border Radii */
+	--border-radius-card: 8px;
+	--border-radius-input: 6px;
+	--border-radius-clear-btn: 50%;
+	--card-border-radius: 8px;
+
+	/* Spacing */
+	--padding-container-top: 24px;
+	--padding-card: 24px;
+	--padding-test-notice-vertical: 12px;
+	--padding-test-notice-horizontal: 24px;
+	--margin-bottom-card: 16px;
+	--padding-form-input: 12px;
+	--card-padding: 24px;
+	--card-margin-bottom: 16px;
+
+	/* Dimensions */
+	--container-width: 448px;
+	--submit-btn-height: 48px;
+	--checkbox-size: 18px;
+
+	/* Others */
+	--box-shadow-card: 0px 4px 16px 0px var(--color-card-shadow);
+	--opacity-placeholder: 0.5;
+}
+`;
diff --git a/packages/nodes-base/nodes/Form/formCompletionUtils.ts b/packages/nodes-base/nodes/Form/formCompletionUtils.ts
index f2b19fabae..9f1e6e3f0d 100644
--- a/packages/nodes-base/nodes/Form/formCompletionUtils.ts
+++ b/packages/nodes-base/nodes/Form/formCompletionUtils.ts
@@ -5,7 +5,7 @@ import {
 	type IWebhookResponseData,
 } from 'n8n-workflow';
 
-import { sanitizeHtml } from './utils';
+import { sanitizeCustomCss, sanitizeHtml } from './utils';
 
 export const renderFormCompletion = async (
 	context: IWebhookFunctions,
@@ -15,7 +15,10 @@ export const renderFormCompletion = async (
 	const completionTitle = context.getNodeParameter('completionTitle', '') as string;
 	const completionMessage = context.getNodeParameter('completionMessage', '') as string;
 	const redirectUrl = context.getNodeParameter('redirectUrl', '') as string;
-	const options = context.getNodeParameter('options', {}) as { formTitle: string };
+	const options = context.getNodeParameter('options', {}) as {
+		formTitle: string;
+		customCss?: string;
+	};
 	const responseText = context.getNodeParameter('responseText', '') as string;
 
 	let title = options.formTitle;
@@ -32,6 +35,7 @@ export const renderFormCompletion = async (
 		formTitle: title,
 		appendAttribution,
 		responseText: sanitizeHtml(responseText),
+		dangerousCustomCss: sanitizeCustomCss(options.customCss),
 		redirectUrl,
 	});
 
diff --git a/packages/nodes-base/nodes/Form/formNodeUtils.ts b/packages/nodes-base/nodes/Form/formNodeUtils.ts
index 1d8aeebd40..4d33b1365d 100644
--- a/packages/nodes-base/nodes/Form/formNodeUtils.ts
+++ b/packages/nodes-base/nodes/Form/formNodeUtils.ts
@@ -19,6 +19,7 @@ export const renderFormNode = async (
 		formTitle: string;
 		formDescription: string;
 		buttonLabel: string;
+		customCss?: string;
 	};
 
 	let title = options.formTitle;
@@ -56,6 +57,7 @@ export const renderFormNode = async (
 		redirectUrl: undefined,
 		appendAttribution,
 		buttonLabel,
+		customCss: options.customCss,
 	});
 
 	return {
diff --git a/packages/nodes-base/nodes/Form/interfaces.ts b/packages/nodes-base/nodes/Form/interfaces.ts
index b04d30d1d3..23b0b31f3f 100644
--- a/packages/nodes-base/nodes/Form/interfaces.ts
+++ b/packages/nodes-base/nodes/Form/interfaces.ts
@@ -31,6 +31,7 @@ export type FormTriggerData = {
 	useResponseData?: boolean;
 	appendAttribution?: boolean;
 	buttonLabel?: string;
+	dangerousCustomCss?: string;
 };
 
 export const FORM_TRIGGER_AUTHENTICATION_PROPERTY = 'authentication';
diff --git a/packages/nodes-base/nodes/Form/test/Form.node.test.ts b/packages/nodes-base/nodes/Form/test/Form.node.test.ts
index ec5b1c93da..5998f2d20a 100644
--- a/packages/nodes-base/nodes/Form/test/Form.node.test.ts
+++ b/packages/nodes-base/nodes/Form/test/Form.node.test.ts
@@ -306,6 +306,90 @@ describe('Form Node', () => {
 			}
 		});
 
+		it('should pass customCss to form template', async () => {
+			const mockResponseObject = {
+				render: jest.fn(),
+			};
+			mockWebhookFunctions.getResponseObject.mockReturnValue(
+				mockResponseObject as unknown as Response,
+			);
+			mockWebhookFunctions.getRequestObject.mockReturnValue({ method: 'GET' } as Request);
+			mockWebhookFunctions.getParentNodes.mockReturnValue([
+				{
+					type: 'n8n-nodes-base.formTrigger',
+					name: 'Form Trigger',
+					typeVersion: 2.1,
+					disabled: false,
+				},
+			]);
+			mockWebhookFunctions.evaluateExpression.mockReturnValue('test');
+			mockWebhookFunctions.getNode.mockReturnValue(mock<INode>());
+			mockWebhookFunctions.getNodeParameter.mockImplementation((paramName: string) => {
+				if (paramName === 'operation') return 'page';
+				if (paramName === 'formFields.values') return [];
+				if (paramName === 'options') {
+					return {
+						customCss: '.form-container { background-color: #f5f5f5; }',
+					};
+				}
+				return undefined;
+			});
+
+			mockWebhookFunctions.getChildNodes.mockReturnValue([]);
+
+			await form.webhook(mockWebhookFunctions);
+
+			expect(mockResponseObject.render).toHaveBeenCalledWith(
+				'form-trigger',
+				expect.objectContaining({
+					dangerousCustomCss: '.form-container { background-color: #f5f5f5; }',
+				}),
+			);
+		});
+
+		it('should pass customCss to form completion template', async () => {
+			mockWebhookFunctions.getRequestObject.mockReturnValue({ method: 'GET' } as Request);
+			mockWebhookFunctions.getNodeParameter.mockImplementation((paramName) => {
+				if (paramName === 'operation') return 'completion';
+				if (paramName === 'respondWith') return 'text';
+				if (paramName === 'completionTitle') return 'Completion Title';
+				if (paramName === 'completionMessage') return 'Completion Message';
+				if (paramName === 'options')
+					return {
+						customCss: '.completion-container { color: blue; }',
+					};
+				if (paramName === 'formFields.values') return [];
+				return {};
+			});
+			mockWebhookFunctions.getParentNodes.mockReturnValue([
+				{
+					type: 'n8n-nodes-base.formTrigger',
+					name: 'Form Trigger',
+					typeVersion: 2.1,
+					disabled: false,
+				},
+			]);
+			mockWebhookFunctions.evaluateExpression.mockReturnValue('test');
+
+			const mockResponseObject = {
+				render: jest.fn(),
+			};
+			mockWebhookFunctions.getResponseObject.mockReturnValue(
+				mockResponseObject as unknown as Response,
+			);
+			mockWebhookFunctions.getNode.mockReturnValue(mock<INode>());
+
+			const result = await form.webhook(mockWebhookFunctions);
+
+			expect(result).toEqual({ noWebhookResponse: true });
+			expect(mockResponseObject.render).toHaveBeenCalledWith(
+				'form-trigger-completion',
+				expect.objectContaining({
+					dangerousCustomCss: '.completion-container { color: blue; }',
+				}),
+			);
+		});
+
 		it('should handle completion operation and redirect', async () => {
 			mockWebhookFunctions.getRequestObject.mockReturnValue({ method: 'GET' } as Request);
 			mockWebhookFunctions.getNodeParameter.mockImplementation((paramName) => {
diff --git a/packages/nodes-base/nodes/Form/test/FormTriggerV2.node.test.ts b/packages/nodes-base/nodes/Form/test/FormTriggerV2.node.test.ts
index fe2b9a5a41..f97c071976 100644
--- a/packages/nodes-base/nodes/Form/test/FormTriggerV2.node.test.ts
+++ b/packages/nodes-base/nodes/Form/test/FormTriggerV2.node.test.ts
@@ -241,6 +241,33 @@ describe('FormTrigger', () => {
 		);
 	});
 
+	it('should apply customCss property to form render', async () => {
+		const formFields = [{ fieldLabel: 'Name', fieldType: 'text', requiredField: true }];
+
+		const { response } = await testVersionedWebhookTriggerNode(FormTrigger, 2.2, {
+			mode: 'manual',
+			node: {
+				typeVersion: 2.2,
+				parameters: {
+					formTitle: 'Custom CSS Test',
+					formDescription: 'Testing custom CSS',
+					responseMode: 'onReceived',
+					formFields: { values: formFields },
+					options: {
+						customCss: '.form-input { border-color: red; }',
+					},
+				},
+			},
+		});
+
+		expect(response.render).toHaveBeenCalledWith(
+			'form-trigger',
+			expect.objectContaining({
+				dangerousCustomCss: '.form-input { border-color: red; }',
+			}),
+		);
+	});
+
 	it('should handle files', async () => {
 		const formFields = [
 			{
diff --git a/packages/nodes-base/nodes/Form/utils.ts b/packages/nodes-base/nodes/Form/utils.ts
index 40a2c64a0e..d23ebb73a0 100644
--- a/packages/nodes-base/nodes/Form/utils.ts
+++ b/packages/nodes-base/nodes/Form/utils.ts
@@ -72,6 +72,18 @@ export function sanitizeHtml(text: string) {
 	});
 }
 
+export function sanitizeCustomCss(css: string | undefined): string | undefined {
+	if (!css) return undefined;
+
+	// Use sanitize-html with custom settings for CSS
+	return sanitize(css, {
+		allowedTags: [], // No HTML tags allowed
+		allowedAttributes: {}, // No attributes allowed
+		// This ensures we're only keeping the text content
+		// which should be the CSS, while removing any HTML/script tags
+	});
+}
+
 export function createDescriptionMetadata(description: string) {
 	return description === ''
 		? 'n8n form'
@@ -91,6 +103,7 @@ export function prepareFormData({
 	useResponseData,
 	appendAttribution = true,
 	buttonLabel,
+	customCss,
 }: {
 	formTitle: string;
 	formDescription: string;
@@ -104,6 +117,7 @@ export function prepareFormData({
 	appendAttribution?: boolean;
 	buttonLabel?: string;
 	formSubmittedHeader?: string;
+	customCss?: string;
 }) {
 	const validForm = formFields.length > 0;
 	const utm_campaign = instanceId ? `&utm_campaign=${instanceId}` : '';
@@ -126,6 +140,7 @@ export function prepareFormData({
 		useResponseData,
 		appendAttribution,
 		buttonLabel,
+		dangerousCustomCss: sanitizeCustomCss(customCss),
 	};
 
 	if (redirectUrl) {
@@ -352,6 +367,7 @@ export function renderForm({
 	redirectUrl,
 	appendAttribution,
 	buttonLabel,
+	customCss,
 }: {
 	context: IWebhookFunctions;
 	res: Response;
@@ -364,6 +380,7 @@ export function renderForm({
 	redirectUrl?: string;
 	appendAttribution?: boolean;
 	buttonLabel?: string;
+	customCss?: string;
 }) {
 	formDescription = (formDescription || '').replace(/\\n/g, '\n').replace(/<br>/g, '\n');
 	const instanceId = context.getInstanceId();
@@ -406,6 +423,7 @@ export function renderForm({
 		useResponseData,
 		appendAttribution,
 		buttonLabel,
+		customCss,
 	});
 
 	res.render('form-trigger', data);
@@ -436,6 +454,7 @@ export async function formWebhook(
 		useWorkflowTimezone?: boolean;
 		appendAttribution?: boolean;
 		buttonLabel?: string;
+		customCss?: string;
 	};
 	const res = context.getResponseObject();
 	const req = context.getRequestObject();
@@ -526,6 +545,7 @@ export async function formWebhook(
 			redirectUrl,
 			appendAttribution,
 			buttonLabel,
+			customCss: options.customCss,
 		});
 
 		return {
diff --git a/packages/nodes-base/nodes/Form/v2/FormTriggerV2.node.ts b/packages/nodes-base/nodes/Form/v2/FormTriggerV2.node.ts
index da813c758d..46b45d2ef5 100644
--- a/packages/nodes-base/nodes/Form/v2/FormTriggerV2.node.ts
+++ b/packages/nodes-base/nodes/Form/v2/FormTriggerV2.node.ts
@@ -19,6 +19,7 @@ import {
 	respondWithOptions,
 	webhookPath,
 } from '../common.descriptions';
+import { cssVariables } from '../cssVariables';
 import { FORM_TRIGGER_AUTHENTICATION_PROPERTY } from '../interfaces';
 import { formWebhook } from '../utils';
 
@@ -180,6 +181,22 @@ const descriptionV2: INodeTypeDescription = {
 						},
 					},
 				},
+				{
+					displayName: 'Custom Form Styling',
+					name: 'customCss',
+					type: 'string',
+					typeOptions: {
+						rows: 10,
+						editor: 'cssEditor',
+					},
+					displayOptions: {
+						show: {
+							'@version': [{ _cnd: { gt: 2 } }],
+						},
+					},
+					default: cssVariables.trim(),
+					description: 'Override default styling of the public form interface with CSS',
+				},
 			],
 		},
 	],
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index fba34bc0a0..9ef38c4532 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1242,7 +1242,7 @@ export type NodePropertyTypes =
 
 export type CodeAutocompleteTypes = 'function' | 'functionItem';
 
-export type EditorType = 'codeNodeEditor' | 'jsEditor' | 'htmlEditor' | 'sqlEditor';
+export type EditorType = 'codeNodeEditor' | 'jsEditor' | 'htmlEditor' | 'sqlEditor' | 'cssEditor';
 export type CodeNodeEditorLanguage = (typeof CODE_LANGUAGES)[number];
 export type CodeExecutionMode = (typeof CODE_EXECUTION_MODES)[number];
 export type SQLDialect =
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b247ee1f0f..3b7f1f4d95 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -638,6 +638,9 @@ importers:
       redis:
         specifier: 4.6.12
         version: 4.6.12
+      sanitize-html:
+        specifier: 2.12.1
+        version: 2.12.1
       sqlite3:
         specifier: 5.1.7
         version: 5.1.7
@@ -672,6 +675,9 @@ importers:
       '@types/pg':
         specifier: ^8.11.6
         version: 8.11.6
+      '@types/sanitize-html':
+        specifier: ^2.11.0
+        version: 2.11.0
       '@types/temp':
         specifier: ^0.9.1
         version: 0.9.4
@@ -1434,6 +1440,9 @@ importers:
       '@codemirror/commands':
         specifier: ^6.5.0
         version: 6.5.0
+      '@codemirror/lang-css':
+        specifier: ^6.0.1
+        version: 6.0.1(@codemirror/view@6.26.3)(@lezer/common@1.1.0)
       '@codemirror/lang-javascript':
         specifier: ^6.2.2
         version: 6.2.2
@@ -8008,9 +8017,6 @@ packages:
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
-  domutils@3.0.1:
-    resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==}
-
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
 
@@ -21254,12 +21260,6 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 4.3.1
 
-  domutils@3.0.1:
-    dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-
   domutils@3.1.0:
     dependencies:
       dom-serializer: 2.0.0
@@ -22732,7 +22732,7 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      domutils: 3.0.1
+      domutils: 3.1.0
       entities: 4.5.0
 
   htmlparser2@9.1.0:
@@ -26350,7 +26350,7 @@ snapshots:
       htmlparser2: 8.0.2
       is-plain-object: 5.0.0
       parse-srcset: 1.0.2
-      postcss: 8.4.38
+      postcss: 8.4.49
 
   sass@1.64.1:
     dependencies: