diff --git a/src/lib/KratosForm.svelte b/src/lib/KratosForm.svelte
index 474dff5..6008566 100644
--- a/src/lib/KratosForm.svelte
+++ b/src/lib/KratosForm.svelte
@@ -9,10 +9,21 @@
 		isUiNodeImageAttributes,
 		isUiNodeInputAttributes,
 		isUiNodeScriptAttributes,
-		isUiNodeTextAttributes
+		isUiNodeTextAttributes,
+		filterNodesByGroups
 	} from '@ory/integrations/ui';
 
 	export let ui: UiContainer;
+
+	let groups = [
+		...new Set(ui.nodes.map((node) => node.group).filter((group) => group != 'default'))
+	];
+	export let grouped_nodes = groups.map((group) =>
+		filterNodesByGroups({
+			nodes: ui.nodes,
+			groups: group
+		})
+	);
 </script>
 
 {#if ui.messages}
@@ -48,38 +59,68 @@
 	{/each}
 {/if}
 
-<form action={ui.action} method={ui.method} class="space-y-3">
-	{#each ui.nodes as node}
-		{#if isUiNodeTextAttributes(node.attributes)}
-			{node.attributes.text.text}
-		{:else if isUiNodeInputAttributes(node.attributes)}
-			{#if node.attributes.type == 'button' || node.attributes.type == 'submit'}
-				<div class="form-control">
-					<button
-						class="btn btn-primary"
-						on:click={eval(node.attributes.onclick ?? '')}
-						disabled={node.attributes.disabled}
-						name={node.attributes.name}
-						type={node.attributes.type}
-						value={node.attributes.value ?? ''}
-					>
-						{getNodeLabel(node)}
-					</button>
-				</div>
-			{:else if node.attributes.type == 'text' || node.attributes.type == 'password' || node.attributes.type == 'number' || node.attributes.type == 'email' || node.attributes.type == 'tel' || node.attributes.type == 'datetime-local' || node.attributes.type == 'date' || node.attributes.type == 'url'}
-				<div class="form-control">
-					{#if node.meta.label}
-						<label class="label" for={node.attributes.name}>
+{#each grouped_nodes as node_group}
+	<form action={ui.action} method={ui.method} class="space-y-3">
+		{#each node_group as node}
+			{#if isUiNodeTextAttributes(node.attributes)}
+				{node.attributes.text.text}
+			{:else if isUiNodeInputAttributes(node.attributes)}
+				{#if node.attributes.type == 'button' || node.attributes.type == 'submit'}
+					<div class="form-control">
+						<button
+							class="btn btn-primary"
+							on:click={eval(node.attributes.onclick ?? '')}
+							disabled={node.attributes.disabled}
+							name={node.attributes.name}
+							type={node.attributes.type}
+							value={node.attributes.value ?? ''}
+						>
+							{getNodeLabel(node)}
+						</button>
+					</div>
+				{:else if node.attributes.type == 'text' || node.attributes.type == 'password' || node.attributes.type == 'number' || node.attributes.type == 'email' || node.attributes.type == 'tel' || node.attributes.type == 'datetime-local' || node.attributes.type == 'date' || node.attributes.type == 'url'}
+					<div class="form-control">
+						{#if node.meta.label}
+							<label class="label" for={node.attributes.name}>
+								<span class="label-text">{getNodeLabel(node)}</span>
+								{#if node.attributes.required}
+									<span class="label-text-alt">Required</span>
+								{/if}
+							</label>
+						{/if}
+						<input
+							on:click={eval(node.attributes.onclick ?? '')}
+							class="input input-bordered"
+							id={node.attributes.name}
+							autocomplete={node.attributes.autocomplete}
+							disabled={node.attributes.disabled}
+							name={node.attributes.name}
+							pattern={node.attributes.pattern}
+							required={node.attributes.required}
+							type={node.attributes.type}
+							value={node.attributes.value ?? ''}
+						/>
+					</div>
+				{:else if node.attributes.type == 'checkbox'}
+					<div class="form-control">
+						<label class="label cursor-pointer">
 							<span class="label-text">{getNodeLabel(node)}</span>
-							{#if node.attributes.required}
-								<span class="label-text-alt">Required</span>
-							{/if}
+							<input
+								on:click={eval(node.attributes.onclick ?? '')}
+								class="checkbox"
+								autocomplete={node.attributes.autocomplete}
+								disabled={node.attributes.disabled}
+								name={node.attributes.name}
+								pattern={node.attributes.pattern}
+								required={node.attributes.required}
+								type={node.attributes.type}
+								value={node.attributes.value ?? ''}
+							/>
 						</label>
-					{/if}
+					</div>
+				{:else if node.attributes.type == 'hidden'}
 					<input
 						on:click={eval(node.attributes.onclick ?? '')}
-						class="input input-bordered"
-						id={node.attributes.name}
 						autocomplete={node.attributes.autocomplete}
 						disabled={node.attributes.disabled}
 						name={node.attributes.name}
@@ -88,46 +129,18 @@
 						type={node.attributes.type}
 						value={node.attributes.value ?? ''}
 					/>
-				</div>
-			{:else if node.attributes.type == 'checkbox'}
-				<div class="form-control">
-					<label class="label cursor-pointer">
-						<span class="label-text">{getNodeLabel(node)}</span>
-						<input
-							on:click={eval(node.attributes.onclick ?? '')}
-							class="checkbox"
-							autocomplete={node.attributes.autocomplete}
-							disabled={node.attributes.disabled}
-							name={node.attributes.name}
-							pattern={node.attributes.pattern}
-							required={node.attributes.required}
-							type={node.attributes.type}
-							value={node.attributes.value ?? ''}
-						/>
-					</label>
-				</div>
-			{:else if node.attributes.type == 'hidden'}
-				<input
-					on:click={eval(node.attributes.onclick ?? '')}
-					autocomplete={node.attributes.autocomplete}
-					disabled={node.attributes.disabled}
-					name={node.attributes.name}
-					pattern={node.attributes.pattern}
-					required={node.attributes.required}
-					type={node.attributes.type}
-					value={node.attributes.value ?? ''}
-				/>
-			{/if}
-		{:else if isUiNodeImageAttributes(node.attributes)}
-			<img alt={getNodeLabel(node)} {...node.attributes} />
-		{:else if isUiNodeAnchorAttributes(node.attributes)}
-			<a class="btn btn-primary" href={node.attributes.href} id={node.attributes.id}>
-				{getNodeLabel(node)}
-			</a>
-		{:else if isUiNodeScriptAttributes(node.attributes)}
-			{#if browser}
-				<script {...node.attributes}></script>
+				{/if}
+			{:else if isUiNodeImageAttributes(node.attributes)}
+				<img alt={getNodeLabel(node)} {...node.attributes} />
+			{:else if isUiNodeAnchorAttributes(node.attributes)}
+				<a class="btn btn-primary" href={node.attributes.href} id={node.attributes.id}>
+					{getNodeLabel(node)}
+				</a>
+			{:else if isUiNodeScriptAttributes(node.attributes)}
+				{#if browser}
+					<script {...node.attributes}></script>
+				{/if}
 			{/if}
-		{/if}
-	{/each}
-</form>
+		{/each}
+	</form>
+{/each}