diff --git a/.vscode/settings.json b/.vscode/settings.json
index 55d62472..d5288243 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -86,6 +86,75 @@
   "files.autoSave": "afterDelay",
   "files.autoSaveDelay": 1000,
   "files.exclude": {
+    ".DS_Store": true,
+    ".changeset": true,
+    ".dockerignore": true,
+    ".editorconfig": true,
+    ".env": true,
+    ".env.example": true,
+    ".env.prod": true,
+    ".env.prod.example": true,
+    ".git": true,
+    ".gitattributes": true,
+    ".github": true,
+    ".gitignore": true,
+    ".markdownlintignore": true,
+    ".markuplintrc.cjs": true,
+    ".nhost": true,
+    ".npmrc": true,
+    ".secrets": true,
+    ".secrets.example": true,
+    ".secrets.prod": true,
+    ".secrets.prod.example": true,
+    ".textlintignore": true,
+    ".turbo": true,
+    ".vercelignore": true,
+    ".vscode": true,
+    "CHANGELOG.md": true,
+    "CODE_OF_CONDUCT.md": true,
+    "CONTRIBUTING.md": true,
+    "DEVELOPERS.md": true,
+    "Dockerfile": true,
+    "LICENSE": true,
+    "Makefile": true,
+    "README.md": true,
+    "biome.jsonc": true,
+    "bun.Dockerfile": true,
+    "bun.lockb": true,
+    "cog.toml": true,
+    "compose.override.yml": true,
+    "compose.yml": true,
+    "config": true,
+    "config.yaml": true,
+    "degit.json": true,
+    "docs": true,
+    "flake.nix": true,
+    "functions": true,
+    "infra": true,
+    "nhost": true,
+    "node_modules": true,
+    "package.json": true,
+    "packages": true,
+    "patches": true,
+    "pnpm-lock.yaml": true,
+    "pnpm-workspace.yaml": true,
+    "scripts": true,
+    "turbo.json": true,
+    "vercel.json": true,
+    "vitest.config.ts": true,
+    "vitest.workspaces.ts": true,
+    "apps/console-fb": true,
+    "apps/console-sc": true,
+    "apps/docs": true,
+    "apps/playground": true,
+    "apps/web": true,
+    "packages/assets": true,
+    "packages/biome-config": true,
+    "packages/role-houdini": true,
+    "packages/skeleton-ui": true,
+    "packages/typescript-config": true,
+    "packages/ui": true,
+    "packages/utils": true,
     "**/.git": true,
     "**/.DS_Store": true,
     ".idea": true,
@@ -318,5 +387,81 @@
   "[yaml]": {
     "editor.defaultFormatter": "redhat.vscode-yaml"
   },
-  "redhat.telemetry.enabled": false
+  "redhat.telemetry.enabled": false,
+  "monorepoFocusWorkspace.internal": {
+    "spectacular": {
+      "managedFilesIgnoreEntries": [
+        ".DS_Store",
+        ".changeset",
+        ".dockerignore",
+        ".editorconfig",
+        ".env",
+        ".env.example",
+        ".env.prod",
+        ".env.prod.example",
+        ".git",
+        ".gitattributes",
+        ".github",
+        ".gitignore",
+        ".markdownlintignore",
+        ".markuplintrc.cjs",
+        ".nhost",
+        ".npmrc",
+        ".secrets",
+        ".secrets.example",
+        ".secrets.prod",
+        ".secrets.prod.example",
+        ".textlintignore",
+        ".turbo",
+        ".vercelignore",
+        ".vscode",
+        "CHANGELOG.md",
+        "CODE_OF_CONDUCT.md",
+        "CONTRIBUTING.md",
+        "DEVELOPERS.md",
+        "Dockerfile",
+        "LICENSE",
+        "Makefile",
+        "README.md",
+        "biome.jsonc",
+        "bun.Dockerfile",
+        "bun.lockb",
+        "cog.toml",
+        "compose.override.yml",
+        "compose.yml",
+        "config",
+        "config.yaml",
+        "degit.json",
+        "docs",
+        "flake.nix",
+        "functions",
+        "infra",
+        "nhost",
+        "node_modules",
+        "package.json",
+        "packages",
+        "patches",
+        "pnpm-lock.yaml",
+        "pnpm-workspace.yaml",
+        "scripts",
+        "turbo.json",
+        "vercel.json",
+        "vitest.config.ts",
+        "vitest.workspaces.ts",
+        "apps/console-fb",
+        "apps/console-sc",
+        "apps/docs",
+        "apps/playground",
+        "apps/web",
+        "packages/assets",
+        "packages/biome-config",
+        "packages/role-houdini",
+        "packages/skeleton-ui",
+        "packages/typescript-config",
+        "packages/ui",
+        "packages/utils"
+      ],
+      "focusedWorkspace": "console"
+    }
+  }
 }
diff --git a/apps/console/src/lib/api/index.ts b/apps/console/src/lib/api/index.ts
deleted file mode 100644
index 90f6e792..00000000
--- a/apps/console/src/lib/api/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { loadOptions } from './svelte_select_fetches';
diff --git a/apps/console/src/lib/components/form/Checkbox.svelte b/apps/console/src/lib/components/form/Checkbox.svelte
deleted file mode 100644
index 8ef41aba..00000000
--- a/apps/console/src/lib/components/form/Checkbox.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-	/**
-	 * <div class="flex justify-start">
-	 *   <Checkbox field={keys.active} class="toggle toggle-secondary" labelPosition="before" disabled={editMode}>Active</Checkbox>
-	 *   <Checkbox field={keys.active} class="toggle toggle-secondary" disabled={editMode}>Active</Checkbox>
-	 *   <Checkbox field={keys.active} class="w-4 h-4" disabled={editMode}>Active</Checkbox>
-	 * </div>
-	 */
-	import { clsx } from 'clsx';
-	import { Helper } from 'flowbite-svelte';
-	import type { Writable } from 'svelte/store';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms/client';
-	import type { AnyZodObject, z } from 'zod';
-	import { getFormContext } from './forms';
-
-	// eslint-disable-next-line no-undef
-	type T = $$Generic<AnyZodObject>;
-	export let field: FormPathLeaves<z.infer<T>>;
-	export let labelClasses = '';
-	export let labelPosition: 'before' | 'after' = 'after';
-
-	const defaultLabelClasses = 'label cursor-pointer';
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-	$: checked = value as Writable<boolean>;
-</script>
-
-<label class={clsx(defaultLabelClasses, labelClasses)}>
-	{#if labelPosition == 'before'}
-		<span class:text-error={$errors} class="label-text pr-2"><slot /></span>
-	{/if}
-	<input
-		type="checkbox"
-		name={field}
-		bind:checked={$checked}
-		data-invalid={$errors}
-		aria-invalid={Boolean($errors)}
-		aria-errormessage={Array($errors).join('. ')}
-		aria-required={$constraints?.required}
-		{...$constraints}
-		{...$$restProps}
-	/>
-	{#if labelPosition == 'after'}
-		<span class:text-error={$errors} class="label-text pl-2"><slot /></span>
-	{/if}
-</label>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/CheckboxFB.svelte b/apps/console/src/lib/components/form/CheckboxFB.svelte
deleted file mode 100644
index a82456cb..00000000
--- a/apps/console/src/lib/components/form/CheckboxFB.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { Checkbox, Helper } from 'flowbite-svelte';
-	import type { Writable } from 'svelte/store';
-	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms/client';
-	import { getFormContext } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-	$: checked = value as Writable<boolean>;
-</script>
-
-<Checkbox
-	name={field}
-	color={$errors ? 'red' : 'green'}
-	bind:checked={$checked}
-	data-invalid={$errors}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required={$constraints?.required}
-	{...$constraints}
-	{...$$restProps}
->
-	<span class:text-error={$errors} class="label-text"><slot /></span>
-</Checkbox>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/DateInput.svelte b/apps/console/src/lib/components/form/DateInput.svelte
deleted file mode 100644
index 485c7cd4..00000000
--- a/apps/console/src/lib/components/form/DateInput.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import type { Writable } from 'svelte/store';
-	import { FloatingLabelInput, Helper } from 'flowbite-svelte';
-	import type { SuperForm, FormPathLeaves } from 'sveltekit-superforms';
-	import { dateProxy, formFieldProxy } from 'sveltekit-superforms';
-	import { getFormContext } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-	export let label = '';
-	export let type: 'date' | 'datetime-local' = 'date';
-	export let size: 'small' | 'default' = 'default';
-	export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-	let proxy: Writable<string> | undefined;
-	if (type === 'date') {
-		proxy = dateProxy(superform.form, field, { format: 'date', empty: 'null' });
-	} else if (type === 'datetime-local') {
-		// proxy = dateProxy(superform.form, field, { format: 'datetime-utc', empty: 'null' });
-		proxy = dateProxy(superform.form, field, { format: 'datetime-local', empty: 'null' });
-	}
-	// $: console.log('date proxy----', path, $proxy)
-	// $: console.log('date value----', path, $value)
-</script>
-
-<FloatingLabelInput
-	{type}
-	{style}
-	{size}
-	{label}
-	name={field}
-	bind:value={$proxy}
-	data-invalid={$errors}
-	class="input input-bordered"
-	color={$errors ? 'red' : 'base'}
-	aria-describedby={`${path}_help`}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required="{$constraints?.required},"
-	{...$constraints}
-	{...$$restProps}
-/>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
-
-<style lang="postcss">
-	[data-invalid],
-	.invalid {
-		color: red;
-	}
-</style>
diff --git a/apps/console/src/lib/components/form/DateInput.svelte.bak b/apps/console/src/lib/components/form/DateInput.svelte.bak
deleted file mode 100644
index a3e48d4d..00000000
--- a/apps/console/src/lib/components/form/DateInput.svelte.bak
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-	import { format } from 'date-fns';
-	import { createField } from 'felte';
-	import { FloatingLabelInput } from 'flowbite-svelte';
-
-	const DATE_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSS";
-	// timestampz (ISO 8601 time zone) format, reset to UTC (e.g., 2018-04-25T14:05:15.953Z)
-	export let value: string | null | undefined = null; // isoStr
-	export let name: string;
-	export let label: string;
-	export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
-	export let error: string | undefined;
-
-	// yyyy-MM-dd'T'HH:mm:ss.SSSX       >>>  2018-04-25T14:05:15.953Z
-	// yyyy-MM-dd'T'HH:mm:ss.SSSXX      >>>  2001-07-04T12:08:56.235-0700
-	// yyyy-MM-dd'T'HH:mm:ss.SSSXXX     >>>  2001-07-04T12:08:56.235-07:00 // (ISO 8601 time zone)
-	// yyyy-MM-dd'T'HH:mm:ss.SSSSXXX    >>>  2014-12-03T10:05:59.5646+08:00
-	// yyyy-MM-dd'T'HH:mm:ss.SSSSSSXXX  >>>  2022-12-14T21:33:47.453082+00:00
-	let internal = value ? format(new Date(value), DATE_FORMAT) : undefined;
-
-	const input = (value: string | null | undefined) =>
-		(internal = value ? format(new Date(value), DATE_FORMAT) : undefined);
-	const output = (internal: string | undefined) =>
-		(value = internal ? new Date(internal).toISOString() : null);
-
-	$: input(value);
-	$: output(internal);
-
-	const { field, onInput, onBlur } = createField({
-		name,
-		defaultValue: value,
-		touchOnChange: true
-	});
-	$: onInput(value); // 2022-12-14T16:11:35.915Z // check null
-</script>
-
-<div use:field on:blur={onBlur} role="textbox">
-	<FloatingLabelInput
-		type="datetime-local"
-		step="0.001"
-		{style}
-		class="input-bordered input"
-		bind:value={internal}
-		{...$$restProps}
-		color={error ? 'red' : null}
-		aria-describedby={`${name}_help`}
-		{label}
-	/>
-	{#if error}
-		<p id={`${name}_help`} class="mt-2 text-xs font-normal text-red-700 dark:text-red-500">
-			<span class="font-medium">Oh, snapp!</span> {error}</p
-		>
-	{/if}
-</div>
diff --git a/apps/console/src/lib/components/form/DeleteForm.svelte b/apps/console/src/lib/components/form/DeleteForm.svelte
deleted file mode 100644
index a229712d..00000000
--- a/apps/console/src/lib/components/form/DeleteForm.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import { TrashBinOutline } from 'flowbite-svelte-icons';
-
-	export let id: string;
-</script>
-
-<form method="POST" action="?/delete" use:enhance>
-	<input type="hidden" name="id" hidden value={id} />
-	<!-- <button type="submit" on:click={(e) => !confirm('Are you sure?') && e.preventDefault()}> -->
-	<button type="submit">
-		<TrashBinOutline class="text-red-500 dark:text-blue-400" />
-	</button>
-</form>
-
-<!-- <script lang="ts">
-	// Paired with this form action
-	import { DeleteRuleStore } from '$houdini';
-	import { ToastLevel } from '$lib/components/toast';
-	import { ruleDeleteSchema as schema } from '$lib/models/schema';
-	import { Logger } from '$lib/utils';
-	import { fail } from '@sveltejs/kit';
-	import type { GraphQLError } from 'graphql';
-	import { redirect } from 'sveltekit-flash-message/server';
-	import { setError, setMessage, superValidate } from 'sveltekit-superforms/server';
-
-	const log = new Logger('rule.action.server');
-
-	const deleteRuleStore = new DeleteRuleStore();
-	export const actions = {
-		delete: async (event) => {
-			const { request, locals } = event;
-			const session = await locals.auth();
-			if (session?.user == undefined) {
-				throw redirect(307, '/auth/signin?callbackUrl=/dashboard/rules');
-			}
-
-			const form = await superValidate(request,zod(schema));
-			log.debug({ form });
-
-			// superform validation
-			if (!form.valid) return fail(400, { form });
-
-			const variables = { id: form.data.id, deletedAt: new Date() };
-			log.debug('DELETE action variables:', variables);
-			const { errors, data } = await deleteRuleStore.mutate(variables, {
-				metadata: { logResult: true },
-				event
-			});
-			if (errors) {
-				errors.forEach((error) => {
-					log.error('delete rule gql error', error);
-					setError(form, '', (error as GraphQLError).message);
-				});
-				return setMessage(form, 'Delete rule failed');
-			}
-
-			const result = data?.update_rules_by_pk;
-			if (!result) return setMessage(form, 'Delete rule failed: responce empty', { status: 404 });
-			const message = {
-				message: `Rule: ${result.displayName} deleted`,
-				dismissible: true,
-				duration: 10000,
-				type: ToastLevel.Success
-			} as const;
-			throw redirect(302, '/dashboard/rules', message, event);
-		}
-	};
-</script> -->
diff --git a/apps/console/src/lib/components/form/ErrorMessage.svelte b/apps/console/src/lib/components/form/ErrorMessage.svelte
deleted file mode 100644
index 6dcb9702..00000000
--- a/apps/console/src/lib/components/form/ErrorMessage.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { twMerge } from 'tailwind-merge';
-	export let error: string | undefined;
-</script>
-
-{#if error}
-	<p
-		{...$$restProps}
-		class={twMerge('mt-2 text-xs font-normal text-red-700 dark:text-red-500', $$props.class)}
-	>
-		<span class="font-medium">Oh, snapp!</span>
-		{error}
-	</p>
-{/if}
diff --git a/apps/console/src/lib/components/form/Fieldset.svelte b/apps/console/src/lib/components/form/Fieldset.svelte
deleted file mode 100644
index d0b6d172..00000000
--- a/apps/console/src/lib/components/form/Fieldset.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-	export let name: string;
-	export let labelBg = 'bg-surface-50-900-token';
-</script>
-
-<div class="border-surface-300-600-token relative space-y-4 rounded-lg border p-4">
-	<h6 class="absolute top-[-12px] text-sm {labelBg} text-surface-600-300-token px-2">{name}</h6>
-	<slot />
-</div>
diff --git a/apps/console/src/lib/components/form/FloatingTextInput.svelte b/apps/console/src/lib/components/form/FloatingTextInput.svelte
deleted file mode 100644
index 4aca65c8..00000000
--- a/apps/console/src/lib/components/form/FloatingTextInput.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { FloatingLabelInput, Helper } from 'flowbite-svelte';
-	import type { InputType } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import { getFormContext } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-	export let label = '';
-	export let type: InputType = 'text';
-	export let size: 'small' | 'default' = 'default';
-	export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-<FloatingLabelInput
-	{type}
-	{style}
-	{size}
-	name={field}
-	bind:value={$value}
-	data-invalid={$errors}
-	color={$errors ? 'red' : 'base'}
-	aria-describedby={`${path}_help`}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required="{$constraints?.required},"
-	{...$constraints}
-	{...$$restProps}
->
-	{label}
-</FloatingLabelInput>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/Form.svelte b/apps/console/src/lib/components/form/Form.svelte
deleted file mode 100644
index 3142ffcd..00000000
--- a/apps/console/src/lib/components/form/Form.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { Alert, Button, ButtonGroup, Modal, Spinner } from 'flowbite-svelte';
-	import {
-		AdjustmentsHorizontalOutline,
-		ArrowLeftOutline,
-		CloudArrowUpOutline
-	} from 'flowbite-svelte-icons';
-	import { setContext } from 'svelte';
-	import type { HTMLFormAttributes } from 'svelte/elements';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { page } from '$app/stores';
-	import { FORM_KEY } from './forms';
-	import type { FormContext } from './forms';
-	interface $$restProps extends HTMLFormAttributes {}
-
-	export let superform: SuperForm<T, unknown>;
-	export let showButtons = true;
-	export let showAlerts = true;
-	export let submitButtonText = 'Submit';
-	export let resetButtonText = 'Reset';
-	export let backButtonText = 'Back';
-	export let className = 'space-y-6';
-
-	const {
-		posted,
-		allErrors,
-		form,
-		errors,
-		enhance,
-		delayed,
-		message,
-		reset,
-		tainted,
-		submitting
-	} = superform;
-	setContext<FormContext<T>>(FORM_KEY, { superform });
-</script>
-
-<form class={className} method="post" {...$$restProps} use:enhance>
-	<slot />
-
-	{#if showAlerts && ($message || $errors._errors)}
-		<Alert
-			color={$page.status >= 400 ? 'red' : 'blue'}
-			dismissable={false}
-			class="!items-start"
-		>
-			<span slot="icon"
-				><svg
-					aria-hidden="true"
-					class="h-5 w-5"
-					fill="currentColor"
-					viewBox="0 0 20 20"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						fill-rule="evenodd"
-						d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-						clip-rule="evenodd"
-					/></svg
-				>
-				<span class="sr-only">{$page.status >= 400 ? 'Error' : 'Info'}</span>
-			</span>
-			<p class="font-medium">{$message ?? 'Got Errors:'}</p>
-			{#if $errors._errors}
-				<ul class="ml-4 mt-1.5 list-inside list-disc">
-					{#each $errors._errors as error, index}
-						<li>{error}</li>
-					{/each}
-				</ul>
-			{/if}
-		</Alert>
-	{/if}
-
-	{#if showButtons}
-		<ButtonGroup>
-			<Button outline on:click={() => history.back()}>
-				<ArrowLeftOutline
-					width="18"
-					height="18"
-					class="mr-2 text-blue-500 dark:text-green-500"
-				/>{backButtonText}
-			</Button>
-			<Button outline disabled={!$tainted} on:click={() => reset()}>
-				<AdjustmentsHorizontalOutline
-					width="18"
-					height="18"
-					class="mr-2 text-blue-500 dark:text-green-500"
-				/>{resetButtonText}
-			</Button>
-			<!-- <Button outline type="submit" disabled={!$tainted || $errors || $submitting}></Button> -->
-			<Button outline type="submit" disabled={!$tainted || $submitting}>
-				{#if $submitting}
-					<Spinner class="mr-3" size="4" color="white" />Saveing ...
-				{:else}
-					<CloudArrowUpOutline
-						class="mr-2 text-blue-500 dark:text-green-500"
-					/>{submitButtonText}
-				{/if}
-			</Button>
-		</ButtonGroup>
-	{/if}
-	<slot name="action" />
-
-	{#if $delayed}
-		<div class="m-0 p-0">
-			<Modal open={$delayed}>
-				<Spinner />
-			</Modal>
-		</div>
-	{/if}
-</form>
diff --git a/apps/console/src/lib/components/form/FormAlerts.svelte b/apps/console/src/lib/components/form/FormAlerts.svelte
deleted file mode 100644
index 89bbfb47..00000000
--- a/apps/console/src/lib/components/form/FormAlerts.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-	// Usage: To display Form-level message or errors
-	import { Alert } from 'flowbite-svelte';
-	import { page } from '$app/stores';
-	// import { List, Li, Heading } from 'flowbite-svelte';
-	// import { CheckCircleSolid, CloseCircleSolid } from 'flowbite-svelte-icons';
-
-	export let message: string | undefined;
-	export let errors: string[] | undefined;
-</script>
-
-{#if message || errors}
-	<Alert color={$page.status >= 400 ? 'red' : 'blue'} dismissable={false} class="!items-start">
-		<span slot="icon"
-			><svg
-				aria-hidden="true"
-				class="h-5 w-5"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-					clip-rule="evenodd"
-				/></svg
-			>
-			<span class="sr-only">{$page.status >= 400 ? 'Error' : 'Info'}</span>
-		</span>
-		<p class="font-medium">{message ?? 'Got Errors:'}</p>
-		{#if errors}
-			<ul class="ml-4 mt-1.5 list-inside list-disc">
-				{#each errors as error, index}
-					<li>{error}</li>
-				{/each}
-			</ul>
-			<!-- <List tag="ul" class="space-y-1 text-gray-500 dark:text-gray-400" list="none">
-				{#each errors as error, index}
-					<Li icon>
-						<CloseCircleSolid class="w-3.5 h-3.5 mr-2 text-gray-500 dark:text-gray-400" />
-						{error}
-					</Li>
-				{/each}
-			</List> -->
-		{/if}
-	</Alert>
-{/if}
diff --git a/apps/console/src/lib/components/form/Radio.svelte b/apps/console/src/lib/components/form/Radio.svelte
deleted file mode 100644
index b06713db..00000000
--- a/apps/console/src/lib/components/form/Radio.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { Helper, Label } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms/client';
-	import type { AnyZodObject, z } from 'zod';
-	import { getFormContext, type RadioOptionType } from './forms';
-
-	// eslint-disable-next-line no-undef
-	type T = $$Generic<AnyZodObject>;
-	export let field: FormPathLeaves<z.infer<T>>;
-	export let label = '';
-	export let labelClasses = '';
-	export let items: RadioOptionType[] = [];
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-{#if label}
-	<Label color={$errors ? 'red' : 'gray'} for={field} class={labelClasses}>{label ?? path}</Label>
-{/if}
-<div class="join">
-	{#each items as item}
-		<input
-			type="radio"
-			name={field}
-			bind:group={$value}
-			data-invalid={$errors}
-			on:blur
-			on:change
-			on:click
-			value={item.value}
-			aria-label={item.label}
-			class="btn join-item"
-			{...$constraints}
-			{...$$restProps}
-		/>
-	{/each}
-</div>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/RadioFB.svelte b/apps/console/src/lib/components/form/RadioFB.svelte
deleted file mode 100644
index 75a3a934..00000000
--- a/apps/console/src/lib/components/form/RadioFB.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { ButtonGroup, RadioButton, Helper, Label } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import generateId from '$lib/utils/generateId';
-	import { getFormContext } from './forms';
-	import type { RadioOptionType } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-
-	export let label = '';
-	export let labelClasses = '';
-	export let items: RadioOptionType[] = [];
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-{#if label}
-	<Label color={$errors ? 'red' : 'gray'} for={field} class={labelClasses}>{label ?? path}</Label>
-{/if}
-<ButtonGroup>
-	{#each items as item}
-		{@const id = generateId()}
-		<!-- <Button outline class="checked-label" {...$$restProps}>
-			<input
-				type="radio"
-				{id}
-				name={field}
-				bind:group={$value}
-				data-invalid={$errors}
-				on:blur
-				on:change
-				on:click
-				value={item.value}
-				aria-label={item.label}
-				class="peer hidden"
-				{...$constraints}
-				{...$$restProps}
-			/>
-			<label for={id} >{item.label}</label>
-	</Button> -->
-		<RadioButton
-			outline
-			{...$$restProps}
-			{id}
-			name={field}
-			value={item.value}
-			bind:group={$value}
-			on:blur
-			on:change
-			on:click
-			aria-label={item.label}
-			data-invalid={$errors}
-			{...$constraints}
-			{...$$restProps}
-		>
-			{item.label}
-		</RadioButton>
-	{/each}
-</ButtonGroup>
-
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
-
-<style lang="postcss">
-	/* TODO: has to define in apps/console/src/app.pcss */
-	/* @layer components {
-  .checked-label:has(input:checked) {
-    @apply bg-primary-700 text-white;
-  }
-} */
-</style>
diff --git a/apps/console/src/lib/components/form/RangeDU.svelte b/apps/console/src/lib/components/form/RangeDU.svelte
deleted file mode 100644
index e21b7805..00000000
--- a/apps/console/src/lib/components/form/RangeDU.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-	import { clsx } from 'clsx';
-	import { Helper } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms/client';
-	import type { AnyZodObject, z } from 'zod';
-	import { getFormContext } from './forms';
-
-	// eslint-disable-next-line no-undef
-	type T = $$Generic<AnyZodObject>;
-	export let field: FormPathLeaves<z.infer<T>>;
-	export let labelClasses = '';
-	export let labelPosition: 'before' | 'after' = 'before';
-
-	const defaultClasses = 'range';
-	const defaultLabelClasses = 'label';
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-<label class={clsx(defaultLabelClasses, labelClasses)}>
-	{#if labelPosition == 'before'}
-		<span class:text-error={$errors} class="label-text"><slot /></span>
-	{/if}
-	<input
-		type="range"
-		name={field}
-		bind:value={$value}
-		on:change
-		on:click
-		on:keydown
-		on:keypress
-		on:keyup
-		data-invalid={$errors}
-		aria-invalid={Boolean($errors)}
-		aria-errormessage={Array($errors).join('. ')}
-		{...$constraints}
-		{...$$restProps}
-		class={clsx(defaultClasses, $$props.class)}
-	/>
-	{#if labelPosition == 'after'}
-		<span class:text-error={$errors} class="label-text"><slot /></span>
-	{/if}
-</label>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/RangeFB.svelte b/apps/console/src/lib/components/form/RangeFB.svelte
deleted file mode 100644
index 7e1654e7..00000000
--- a/apps/console/src/lib/components/form/RangeFB.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { Helper, Label, Range } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import { getFormContext } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-<Label><slot /></Label>
-<Range
-	name={field}
-	bind:value={$value}
-	data-invalid={$errors}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	{...$constraints}
-	{...$$restProps}
-/>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/Select.svelte b/apps/console/src/lib/components/form/Select.svelte
deleted file mode 100644
index bb71f437..00000000
--- a/apps/console/src/lib/components/form/Select.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { Helper, Label } from 'flowbite-svelte';
-	import type { SelectOptionType } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import { getFormContext } from './forms';
-
-	// eslint-disable-next-line no-undef
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-	export let label = '';
-	export let labelClasses = '';
-	export let items: SelectOptionType<any>[] = [];
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-{#if label}
-	<Label color={$errors ? 'red' : 'gray'} for={field} class={labelClasses}>{label ?? path}</Label>
-{/if}
-<select
-	class="select select-bordered w-full focus:outline-none"
-	name={field}
-	bind:value={$value}
-	data-invalid={$errors}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required={$constraints?.required}
-	{...$constraints}
-	{...$$restProps}
->
-	{#each items as item}
-		<option value={item.value}>
-			{item.name}
-		</option>
-	{/each}
-</select>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/SelectDU.svelte b/apps/console/src/lib/components/form/SelectDU.svelte
deleted file mode 100644
index 6bc89452..00000000
--- a/apps/console/src/lib/components/form/SelectDU.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { Helper, Label } from 'flowbite-svelte';
-	import type { SelectOptionType } from 'flowbite-svelte/dist/types';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms/client';
-	import type { AnyZodObject, z } from 'zod';
-	import { getFormContext } from './forms';
-
-	// eslint-disable-next-line no-undef
-	type T = $$Generic<AnyZodObject>;
-	export let field: FormPathLeaves<z.infer<T>>;
-	export let label = '';
-	export let labelClasses = '';
-	export let items: SelectOptionType[] = [];
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-{#if label}
-	<Label color={$errors ? 'red' : 'gray'} for={field} class={labelClasses}>{label ?? path}</Label>
-{/if}
-<select
-	class="select select-bordered w-full focus:outline-none"
-	name={field}
-	bind:value={$value}
-	data-invalid={$errors}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required={$constraints?.required}
-	{...$constraints}
-	{...$$restProps}
->
-	{#each items as item}
-		<option value={item.value}>
-			{item.name}
-		</option>
-	{/each}
-</select>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/SelectFB.svelte b/apps/console/src/lib/components/form/SelectFB.svelte
deleted file mode 100644
index c7446b81..00000000
--- a/apps/console/src/lib/components/form/SelectFB.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { Helper, Label, Select } from 'flowbite-svelte';
-	import type { SelectOptionType } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import { getFormContext } from './forms';
-
-	// eslint-disable-next-line no-undef
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-	export let label = '';
-	export let labelClasses = '';
-	export let items: SelectOptionType<any>[] = [];
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-<Label color={$errors ? 'red' : 'gray'} for={field} class={labelClasses}>
-	{label ?? path}
-</Label>
-<Select
-	name={field}
-	bind:value={$value}
-	data-invalid={$errors}
-	{items}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required={$constraints?.required}
-	{...$constraints}
-	{...$$restProps}
-/>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/TagsInput.svelte b/apps/console/src/lib/components/form/TagsInput.svelte
deleted file mode 100644
index 88e44b6f..00000000
--- a/apps/console/src/lib/components/form/TagsInput.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { Helper } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import { Tags } from '$lib/components';
-	import { getFormContext } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-	export let label = '';
-	export let disabled = false;
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-	$: console.log($errors);
-</script>
-
-<!-- FIXME: add {...$constraints} -->
-<div class="my-tag" color={$errors ? 'red' : 'base'}>
-	<Tags
-		name={field}
-		bind:tags={$value}
-		data-invalid={$errors}
-		onlyUnique={true}
-		minChars={3}
-		labelText={label ?? path}
-		labelShow
-		disable={disabled}
-		{...$$restProps}
-	/>
-</div>
-
-{#if $errors}
-	{#each Object.entries($errors) as [pos, errs]}
-		{#if pos == '_errors'}
-			<Helper class="mt-2" color="red">{errs}</Helper>
-		{:else}
-			<Helper class="mt-2" color="red">{pos}: {errs}</Helper>
-		{/if}
-	{/each}
-{/if}
-
-<style lang="postcss">
-	.my-tag :global(.svelte-tags-input-layout.sti-layout-disable),
-	.my-tag :global(.svelte-tags-input:disabled) {
-		background: rgb(249 250 251 / var(--tw-bg-opacity));
-		cursor: not-allowed;
-	}
-
-	/*override svelte-tags-input default styles*/
-	.my-tag :global(.svelte-tags-input-tag-remove) {
-		cursor: pointer;
-		padding-left: 1rem;
-		font-size: 1rem;
-		color: red;
-	}
-
-	.my-tag :global(.svelte-tags-input-layout) {
-		@apply relative  rounded-lg  text-gray-900;
-	}
-
-	.my-tag :global(.svelte-tags-input-layout label) {
-		/* eslint-disable */
-		@apply absolute left-1 top-0.5 z-10 origin-[0] -translate-y-4 scale-75 transform bg-white px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-blue-600 dark:bg-gray-900 dark:text-gray-400 peer-focus:dark:text-blue-500;
-	}
-
-	.my-tag :global(.svelte-tags-input) {
-		@apply block w-full appearance-none rounded-lg border-gray-300 bg-transparent p-2 text-sm text-gray-900 focus:border-blue-700 focus:outline-none focus:ring-0 dark:border-gray-600 dark:text-white dark:focus:border-blue-500;
-	}
-
-	.my-tag :global(.svelte-tags-input-layout:focus-within) {
-		outline: -webkit-focus-ring-color;
-	}
-
-	.my-tag :global(.svelte-tags-input-layout:focus) {
-		border: solid 1px var(--tw-ring-color);
-	}
-	.my-tag :global(.svelte-tags-input-layout:hover) {
-		/* border: solid 1px var(--tw-ring-color); */
-		@apply border-blue-700;
-	}
-
-	[data-invalid],
-	.invalid {
-		color: red;
-	}
-</style>
diff --git a/apps/console/src/lib/components/form/TextInput.svelte b/apps/console/src/lib/components/form/TextInput.svelte
deleted file mode 100644
index 5c27bc80..00000000
--- a/apps/console/src/lib/components/form/TextInput.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<script lang="ts">
-	import { Helper, Input, Label } from 'flowbite-svelte';
-	import type { InputType } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import { getFormContext } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-	export let label = '';
-	export let type: InputType = 'text';
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-<Label color={$errors ? 'red' : 'gray'} for={field} class="mb-2">{label ?? path}</Label>
-<Input
-	{type}
-	name={field}
-	bind:value={$value}
-	data-invalid={$errors}
-	color={$errors ? 'red' : 'base'}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required="{$constraints?.required},"
-	{...$constraints}
-	{...$$restProps}
-/>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/Textarea.svelte b/apps/console/src/lib/components/form/Textarea.svelte
deleted file mode 100644
index 0cc69ab6..00000000
--- a/apps/console/src/lib/components/form/Textarea.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { Helper, Label, Textarea } from 'flowbite-svelte';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import { getFormContext } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-	export let label = '';
-
-	const { superform } = getFormContext();
-	const { value, errors, constraints } = formFieldProxy(superform, field);
-</script>
-
-{#if label}
-	<Label color={$errors ? 'red' : 'gray'} for={field} class="mb-2">{label}</Label>
-{/if}
-<Textarea
-	name={field}
-	bind:value={$value}
-	data-invalid={$errors}
-	rows="4"
-	color={$errors ? 'red' : 'base'}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required="{$constraints?.required},"
-	{...$constraints}
-	{...$$restProps}
-/>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/ToggleFB.svelte b/apps/console/src/lib/components/form/ToggleFB.svelte
deleted file mode 100644
index 7a25e8b6..00000000
--- a/apps/console/src/lib/components/form/ToggleFB.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts" context="module">
-	type T = Record<string, unknown>;
-</script>
-
-<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
-<script lang="ts">
-	import { Toggle, Helper } from 'flowbite-svelte';
-	import type { Writable } from 'svelte/store';
-	import type { FormPathLeaves } from 'sveltekit-superforms';
-	import type { SuperForm } from 'sveltekit-superforms';
-	import { formFieldProxy } from 'sveltekit-superforms';
-	import { getFormContext } from './forms';
-
-	export let form: SuperForm<T, unknown>;
-	export let field: FormPathLeaves<T>;
-
-	const { superform } = getFormContext();
-	const { path, value, errors, constraints } = formFieldProxy(superform, field);
-	$: checked = value as Writable<boolean>;
-</script>
-
-<Toggle
-	name={field}
-	color={$errors ? 'red' : 'green'}
-	bind:checked={$checked}
-	data-invalid={$errors}
-	aria-invalid={Boolean($errors)}
-	aria-errormessage={Array($errors).join('. ')}
-	aria-required={$constraints?.required}
-	{...$constraints}
-	{...$$restProps}
->
-	<span class:text-error={$errors} class="label-text"><slot /></span>
-</Toggle>
-{#if $errors}
-	<Helper class="mt-2" color="red">{$errors}</Helper>
-{/if}
diff --git a/apps/console/src/lib/components/form/forms.ts b/apps/console/src/lib/components/form/forms.ts
deleted file mode 100644
index f8469aa3..00000000
--- a/apps/console/src/lib/components/form/forms.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getContext, hasContext } from 'svelte';
-import type { SuperForm } from 'sveltekit-superforms';
-export const FORM_KEY = Symbol('form');
-
-export type RadioOptionType = {
-	value: string | number;
-	label: string;
-};
-
-export type FormContext<T extends Record<string, unknown>> = {
-	superform: SuperForm<T, unknown>;
-};
-
-export function getFormContext<T extends Record<string, unknown>>(): FormContext<T> {
-	if (!hasContext(FORM_KEY)) {
-		throw new Error('FormField must be used within a Form component');
-	}
-	return getContext(FORM_KEY);
-}
diff --git a/apps/console/src/lib/components/form/index.ts b/apps/console/src/lib/components/form/index.ts
deleted file mode 100644
index 30acc4cf..00000000
--- a/apps/console/src/lib/components/form/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export { default as Toggle } from './ToggleFB.svelte';
-export { default as Checkbox } from './CheckboxFB.svelte';
-export { default as DateInput } from './DateInput.svelte';
-export { default as DeleteForm } from './DeleteForm.svelte';
-export { default as ErrorMessage } from './ErrorMessage.svelte';
-export { default as FloatingTextInput } from './FloatingTextInput.svelte';
-export { default as Form } from './Form.svelte';
-export { default as FormAlerts } from './FormAlerts.svelte';
-export { default as Radio } from './RadioFB.svelte';
-export { default as Range } from './RangeFB.svelte';
-export { default as Select } from './Select.svelte';
-export { default as SelectDU } from './SelectDU.svelte';
-export { default as SelectFB } from './SelectFB.svelte';
-export { default as TagsInput } from './TagsInput.svelte';
-export { default as TextInput } from './TextInput.svelte';
-export { default as Textarea } from './Textarea.svelte';
diff --git a/apps/console/src/lib/components/form/inputChip/InputChip.svelte b/apps/console/src/lib/components/form/inputChip/InputChip.svelte
deleted file mode 100644
index 674024bf..00000000
--- a/apps/console/src/lib/components/form/inputChip/InputChip.svelte
+++ /dev/null
@@ -1,369 +0,0 @@
-<script lang="ts" context="module">
-	import { fly, scale } from 'svelte/transition';
-	import { type Transition, type TransitionParams, prefersReducedMotionStore } from './index';
-	import { dynamicTransition } from './transitions';
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	type FlyTransition = typeof fly;
-	type ListTransitionIn = Transition;
-	type ListTransitionOut = Transition;
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	type ScaleTransition = typeof scale;
-	type ChipTransitionIn = Transition;
-	type ChipTransitionOut = Transition;
-</script>
-
-<script
-	lang="ts"
-	generics="ListTransitionIn extends Transition = FlyTransition, ListTransitionOut extends Transition = FlyTransition, ChipTransitionIn extends Transition = ScaleTransition, ChipTransitionOut extends Transition = ScaleTransition"
->
-	import { cn } from '$lib/components/utils/ui';
-	import { createEventDispatcher, onMount } from 'svelte';
-	import { flip } from 'svelte/animate';
-
-	// Types
-	import type { SvelteEvent } from './index';
-	import { CloseOutline } from 'flowbite-svelte-icons';
-
-	// Event Dispatcher
-	type InputChipEvent = {
-		add: { event: SubmitEvent; chipIndex: number; chipValue: string };
-		remove: { event: MouseEvent; chipIndex: number; chipValue: string };
-		addManually: { chipIndex: number; chipValue: string };
-		removeManually: { chipValue: string };
-		invalid: { event: SubmitEvent; input: string };
-		invalidManually: { input: string };
-	};
-	const dispatch = createEventDispatcher<InputChipEvent>();
-
-	// Props
-	/** Bind the input value. */
-	export let input = '';
-	/**
-	 * Set a unique select input name.
-	 * @type {string}
-	 */
-	export let name: string;
-	/** An array of values. */
-	export let value: any[] = [];
-	/**
-	 * Provide a whitelist of accepted values.
-	 * @type {string[]}
-	 */
-	export let whitelist: string[] = [];
-	/** Maximum number of chips. Set -1 to disable. */
-	export let max = -1;
-	/** Set the minimum character length. */
-	export let minlength = -1;
-	/** Set the maximum character length. */
-	export let maxlength = -1;
-	/** When enabled, allows for uppercase values. */
-	export let allowUpperCase = false;
-	/** When enabled, allows for duplicate values. */
-	export let allowDuplicates = false;
-	export let placeholder = 'Enter values followed by return';
-
-	/**
-	 * Provide a custom validator function.
-	 * @type {function}
-	 */
-	export let validation: (...args: any[]) => boolean = () => true;
-
-	/** The duration of the flip (first, last, invert, play) animation. */
-	export let duration = 150;
-	/** Set the required state for this input field. */
-	export let required = false;
-
-	// Props (transition)
-	/**
-	 * Enable/Disable transitions
-	 * @type {boolean}
-	 */
-	export let transitions = !$prefersReducedMotionStore;
-	/**
-	 * Provide the transition used in list on entry.
-	 * @type {ListTransitionIn}
-	 */
-	export let listTransitionIn: ListTransitionIn = fly as ListTransitionIn;
-	/**
-	 * Transition params provided to `ListTransitionIn`.
-	 * @type {TransitionParams}
-	 */
-	export let listTransitionInParams: TransitionParams<ListTransitionIn> = {
-		duration: 150,
-		opacity: 0,
-		y: -20
-	};
-	/**
-	 * Provide the transition used in list on exit.
-	 * @type {ListTransitionOut}
-	 */
-	export let listTransitionOut: ListTransitionOut = fly as ListTransitionOut;
-	/**
-	 * Transition params provided to `ListTransitionOut`.
-	 * @type {TransitionParams}
-	 */
-	export let listTransitionOutParams: TransitionParams<ListTransitionOut> = {
-		duration: 150,
-		opacity: 0,
-		y: -20
-	};
-	/**
-	 * Provide the transition used in chip on entry.
-	 * @type {ChipTransitionIn}
-	 */
-	export let chipTransitionIn: ChipTransitionIn = scale as ChipTransitionIn;
-	/**
-	 * Transition params provided to `ChipTransitionIn`.
-	 * @type {TransitionParams}
-	 */
-	export let chipTransitionInParams: TransitionParams<ChipTransitionIn> = {
-		duration: 150,
-		opacity: 0
-	};
-	/**
-	 * Provide the transition used in chip on exit.
-	 * @type {ChipTransitionOut}
-	 */
-	export let chipTransitionOut: ChipTransitionOut = scale as ChipTransitionOut;
-	/**
-	 * Transition params provided to `ChipTransitionOut`.
-	 * @type {TransitionParams}
-	 */
-	export let chipTransitionOutParams: TransitionParams<ChipTransitionOut> = {
-		duration: 150,
-		opacity: 0
-	};
-
-	// Local
-	let inputValid = true;
-	let chipValues: Array<{ val: (typeof value)[0]; id: number }> =
-		value?.map((val) => {
-			return { val: val, id: Math.random() };
-		}) || [];
-
-	// Reset Form
-	function resetFormHandler() {
-		value = [];
-	}
-	let selectElement: HTMLSelectElement;
-	onMount(() => {
-		// Verify external form is present
-		if (!selectElement.form) return;
-
-		const externalForm = selectElement.form as HTMLFormElement;
-
-		// Attach reset event listener to external form
-		externalForm.addEventListener('reset', resetFormHandler);
-
-		// Return onDestroy handler that will remove the event listener from the external form
-		return () => {
-			externalForm.removeEventListener('reset', resetFormHandler);
-		};
-	});
-
-	function onInputHandler(): void {
-		inputValid = true;
-	}
-
-	function validateCustom(chip: string) {
-		return validation === undefined || validation(chip);
-	}
-
-	function validateCount() {
-		return max === -1 || value.length < max;
-	}
-
-	function validateLength(chip: string) {
-		return (
-			(minlength === -1 || chip.length >= minlength) &&
-			(maxlength === -1 || chip.length <= maxlength)
-		);
-	}
-
-	function validateWhiteList(chip: string) {
-		return whitelist.length === 0 || whitelist.includes(chip);
-	}
-
-	function validateDuplicates(chip: string) {
-		return allowDuplicates || !value.includes(chip);
-	}
-
-	function validate(chip: string = ''): boolean {
-		if (!chip && !input) return false;
-		// Format: trim value
-		chip = chip !== '' ? chip.trim() : input.trim();
-		return (
-			validateCustom(chip) &&
-			validateCount() &&
-			validateLength(chip) &&
-			validateWhiteList(chip) &&
-			validateDuplicates(chip)
-		);
-	}
-
-	function addChipCommon(chip: string) {
-		// Format: to lowercase (if enabled)
-		chip = allowUpperCase ? chip : chip.toLowerCase();
-		// Append value to array
-		value.push(chip);
-		value = value;
-		chipValues.push({ val: chip, id: Math.random() });
-		chipValues = chipValues;
-	}
-
-	function removeChipCommon(chip: string) {
-		let chipIndex = value.indexOf(chip);
-		// Remove value from array
-		value.splice(chipIndex, 1);
-		value = value;
-		chipValues.splice(chipIndex, 1);
-		chipValues = chipValues;
-	}
-
-	function addChipInternally(event: SvelteEvent<SubmitEvent, HTMLFormElement>): void {
-		event.preventDefault();
-		// Validate
-		inputValid = validate();
-		// When the onInvalid hook is present
-		if (inputValid === false) {
-			/** @event {{ event: Event, input: any  }} invalid - Fires when the input value is invalid. */
-			dispatch('invalid', { event, input });
-			return;
-		}
-		addChipCommon(input);
-		/** @event {{ event: Event, chipIndex: number, chipValue: string }} add - Fires when a chip is added. */
-		dispatch('add', { event, chipIndex: value.length - 1, chipValue: input });
-		// Clear input value
-		input = '';
-	}
-
-	function removeChipInternally(
-		event: SvelteEvent<MouseEvent, HTMLButtonElement>,
-		chipIndex: number,
-		chipValue: string
-	): void {
-		if ($$restProps.disabled) return;
-		removeChipCommon(chipValue);
-		/** @event {{ event: Event, chipIndex: number, chipValue: string }} remove - Fires when a chip is removed. */
-		dispatch('remove', { event, chipIndex, chipValue });
-	}
-
-	// Export functions
-	export function addChip(chip: string) {
-		// Validate
-		inputValid = validate(chip);
-		// When the onInvalid hook is present
-		if (inputValid === false) {
-			/** @event {{ input: string  }} invalidManually - Fires when the manually added value is invalid. */
-			dispatch('invalidManually', { input: chip });
-			return;
-		}
-		addChipCommon(chip);
-		/** @event {{ chipIndex: number, chipValue: string }} addManually - Fires when a chip is added manually. */
-		dispatch('addManually', { chipIndex: value.length - 1, chipValue: chip });
-	}
-
-	export function removeChip(chip: string) {
-		if ($$restProps.disabled) return;
-		removeChipCommon(chip);
-		/** @event {{ chipValue: string }} removeManually - Fires when a chip is removed manually. */
-		dispatch('removeManually', { chipValue: chip });
-	}
-
-	// Reactive
-	$: chipValues =
-		value?.map((val, i) => {
-			if (chipValues[i]?.val === val) return chipValues[i];
-			return { id: Math.random(), val: val };
-		}) || [];
-</script>
-
-<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
-<div class="h-0 overflow-hidden">
-	<select bind:this={selectElement} bind:value {name} multiple {required} tabindex="-1">
-		<!-- NOTE: options are required! -->
-		{#each value as option}<option value={option}>{option}</option>{/each}
-	</select>
-</div>
-<!-- Chip Wrapper -->
-<div
-	class={cn(
-		`m-1 block w-full cursor-pointer items-center justify-center space-y-2 rounded-lg border-[1px] px-2.5 pb-2.5 pt-4 text-sm`,
-		`${inputValid === false ? ' border-red-500 bg-red-200 focus:border-red-500 dark:text-red-500 dark:focus:border-red-500' : 'border-gray-300 bg-transparent text-gray-900 focus:border-blue-600 dark:border-gray-600 dark:text-white dark:focus:border-blue-500'}`
-	)}
->
-	<!-- Input Field -->
-	<form on:submit={addChipInternally}>
-		<input
-			type="text"
-			bind:value={input}
-			{...$$restProps}
-			class={cn(
-				`border-1 peer block w-full appearance-none rounded-lg px-2.5 pb-2.5 pt-4 text-sm`,
-				`${inputValid === false ? 'border-red-500 bg-red-200 focus:border-red-500 dark:text-red-500 dark:focus:border-red-500' : 'border-gray-300 bg-transparent text-gray-900  focus:border-blue-600 dark:border-gray-600 dark:text-white dark:focus:border-blue-500'}`
-			)}
-			{placeholder}
-			on:input={onInputHandler}
-			on:input
-			on:focus
-			on:blur
-			disabled={$$restProps.disabled}
-		/>
-	</form>
-	<!-- Chip List -->
-	{#if chipValues.length}
-		<div
-			class="flex flex-wrap gap-1"
-			in:dynamicTransition|local={{
-				transition: listTransitionIn,
-				params: listTransitionInParams,
-				enabled: transitions
-			}}
-			out:dynamicTransition|local={{
-				transition: listTransitionOut,
-				params: listTransitionOutParams,
-				enabled: transitions
-			}}
-		>
-			{#each chipValues as { id, val }, i (id)}
-				<!-- Wrapping div required for FLIP animation -->
-				<div animate:flip={{ duration }}>
-					<span
-						class={cn(
-							'inline-flex items-center rounded  px-2 font-medium ',
-							`${inputValid === false ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300' : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300'}`
-						)}
-					>
-						{val}
-						<button
-							type="button"
-							class={cn(
-								`ml-1 inline-flex items-center rounded-sm text-sm`,
-								`${inputValid === false ? 'text-red-400 hover:bg-red-200 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300' : 'text-blue-400 hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300'}`
-							)}
-							on:click={(e) => removeChipInternally(e, i, val)}
-							on:click
-							on:keypress
-							on:keydown
-							on:keyup
-							in:dynamicTransition|local={{
-								transition: chipTransitionIn,
-								params: chipTransitionInParams,
-								enabled: transitions
-							}}
-							out:dynamicTransition|local={{
-								transition: chipTransitionOut,
-								params: chipTransitionOutParams,
-								enabled: transitions
-							}}
-						>
-							<CloseOutline size="sm" />
-						</button>
-					</span>
-				</div>
-			{/each}
-		</div>
-	{/if}
-</div>
diff --git a/apps/console/src/lib/components/form/inputChip/PrefersReducedMotion.ts b/apps/console/src/lib/components/form/inputChip/PrefersReducedMotion.ts
deleted file mode 100644
index d8f6b58a..00000000
--- a/apps/console/src/lib/components/form/inputChip/PrefersReducedMotion.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { readable } from 'svelte/store';
-import { BROWSER } from 'esm-env';
-
-/** Prefers reduced motion  */
-const reducedMotionQuery = '(prefers-reduced-motion: reduce)';
-
-function prefersReducedMotion() {
-	if (!BROWSER) return false;
-	return window.matchMedia(reducedMotionQuery).matches;
-}
-
-/**
- * Indicates that the user has enabled reduced motion on their device.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- */
-export const prefersReducedMotionStore = readable(prefersReducedMotion(), (set) => {
-	if (BROWSER) {
-		const setReducedMotion = (event: MediaQueryListEvent) => {
-			set(event.matches);
-		};
-		const mediaQueryList = window.matchMedia(reducedMotionQuery);
-		mediaQueryList.addEventListener('change', setReducedMotion);
-
-		return () => {
-			mediaQueryList.removeEventListener('change', setReducedMotion);
-		};
-	}
-});
diff --git a/apps/console/src/lib/components/form/inputChip/clipboard.ts b/apps/console/src/lib/components/form/inputChip/clipboard.ts
deleted file mode 100644
index 66493c76..00000000
--- a/apps/console/src/lib/components/form/inputChip/clipboard.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { ActionReturn } from 'svelte/action';
-
-// Action: Clipboard
-type ClipboardArgs = string | { element: string } | { input: string };
-type ClipboardAttributes = { 'on:copyComplete'?: () => void };
-export function clipboard(node: HTMLElement, args: ClipboardArgs): ActionReturn<ClipboardArgs, ClipboardAttributes> {
-	if (!window.isSecureContext) {
-		console.error(
-			'Clipboard action failed: app not running in secure context, see: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard'
-		);
-		return {};
-	}
-	const fireCopyCompleteEvent = () => {
-		node.dispatchEvent(new CustomEvent('copyComplete'));
-	};
-	const onClick = () => {
-		// Handle `data-clipboard` target based on object key
-		if (typeof args === 'object') {
-			// Element Inner HTML
-			if ('element' in args) {
-				const element = document.querySelector<HTMLElement>(`[data-clipboard="${args.element}"]`);
-				if (!element) throw new Error(`Missing HTMLElement with an attribute of [data-clipboard="${args.element}"]`);
-				copyToClipboard(element.innerHTML, 'text/html').then(fireCopyCompleteEvent);
-				return;
-			}
-			// Form Input Value
-			if ('input' in args) {
-				const input = document.querySelector<HTMLInputElement>(`[data-clipboard="${args.input}"]`);
-				if (!input) throw new Error(`Missing HTMLInputElement with an attribute of [data-clipboard="${args.input}"]`);
-				copyToClipboard(input.value).then(fireCopyCompleteEvent);
-				return;
-			}
-		}
-		// Handle everything else.
-		copyToClipboard(args).then(fireCopyCompleteEvent);
-	};
-	// Event Listener
-	node.addEventListener('click', onClick);
-	// Lifecycle
-	return {
-		update(newArgs: ClipboardArgs) {
-			args = newArgs;
-		},
-		destroy() {
-			node.removeEventListener('click', onClick);
-		}
-	};
-}
-
-// Shared copy method
-async function copyToClipboard(data: BlobPart, mimeType = 'text/plain') {
-	if (navigator.clipboard.write) {
-		await navigator.clipboard.write([
-			new ClipboardItem({
-				[mimeType]: new Blob([data], {
-					type: mimeType
-				}),
-				['text/plain']: new Blob([data], {
-					type: 'text/plain'
-				})
-			})
-		]);
-	} else {
-		// fallback since .writeText has wider browser support
-		await new Promise((resolve) => {
-			resolve(navigator.clipboard.writeText(String(data)));
-		});
-	}
-}
diff --git a/apps/console/src/lib/components/form/inputChip/focusTrap.ts b/apps/console/src/lib/components/form/inputChip/focusTrap.ts
deleted file mode 100644
index 31eb182f..00000000
--- a/apps/console/src/lib/components/form/inputChip/focusTrap.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-// Action: Focus Trap
-export function focusTrap(node: HTMLElement, enabled: boolean) {
-	const elemWhitelist =
-		'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), details:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
-	let elemFirst: HTMLElement;
-	let elemLast: HTMLElement;
-
-	// When the first element is selected, shift+tab pressed, jump to the last selectable item.
-	function onFirstElemKeydown(e: KeyboardEvent): void {
-		if (e.shiftKey && e.code === 'Tab') {
-			e.preventDefault();
-			elemLast.focus();
-		}
-	}
-
-	// When the last item selected, tab pressed, jump to the first selectable item.
-	function onLastElemKeydown(e: KeyboardEvent): void {
-		if (!e.shiftKey && e.code === 'Tab') {
-			e.preventDefault();
-			elemFirst.focus();
-		}
-	}
-
-	// Sort focusable elements by tabindex, positive first, then 0
-	const sortByTabIndex = (focusableElems: HTMLElement[]): HTMLElement[] => {
-		return focusableElems
-			.filter((elem) => elem.tabIndex >= 0)
-			.sort((a, b) => {
-				if (a.tabIndex === 0 && b.tabIndex > 0)
-					return 1; // Move 0 to end of array
-				else if (a.tabIndex > 0 && b.tabIndex === 0)
-					return -1; // Move 0 to end of array
-				else return a.tabIndex - b.tabIndex; // Sort non-zero values in ascending order
-			});
-	};
-
-	type FocusindexElement = HTMLElement & { dataset: { focusindex: string } };
-
-	// Get element with smallest focusindex value, or first focusable element
-	const getFocusTrapTarget = (elemFirst: HTMLElement) => {
-		// Get elements with data-focusindex attribute
-		const focusindexElements = [...node.querySelectorAll<FocusindexElement>('[data-focusindex]')];
-		if (!focusindexElements || focusindexElements.length === 0) return elemFirst;
-		// return smallest focusindex element or elemFirst
-		return (
-			focusindexElements.sort((a, b) => {
-				return +a.dataset.focusindex - +b.dataset.focusindex;
-			})[0] || elemFirst
-		);
-	};
-
-	const onScanElements = (fromObserver: boolean) => {
-		if (enabled === false) return;
-		// Gather all focusable elements, sorted according to tabindex
-		const focusableElems: HTMLElement[] = sortByTabIndex(Array.from(node.querySelectorAll(elemWhitelist)));
-		if (focusableElems.length) {
-			// Set first/last focusable elements
-			elemFirst = focusableElems[0];
-			elemLast = focusableElems[focusableElems.length - 1];
-			// Auto-focus focusTrapTarget or first focusable element only when not called from observer
-			if (!fromObserver) getFocusTrapTarget(elemFirst).focus();
-			// Listen for keydown on first & last element
-			elemFirst.addEventListener('keydown', onFirstElemKeydown);
-			elemLast.addEventListener('keydown', onLastElemKeydown);
-		}
-	};
-	onScanElements(false);
-
-	function onCleanUp(): void {
-		if (elemFirst) elemFirst.removeEventListener('keydown', onFirstElemKeydown);
-		if (elemLast) elemLast.removeEventListener('keydown', onLastElemKeydown);
-	}
-
-	// When children of node are changed (added or removed)
-	const onObservationChange = (mutationRecords: MutationRecord[], observer: MutationObserver) => {
-		if (mutationRecords.length) {
-			onCleanUp();
-			onScanElements(true);
-		}
-		return observer;
-	};
-	const observer = new MutationObserver(onObservationChange);
-	observer.observe(node, { childList: true, subtree: true });
-
-	// Lifecycle
-	return {
-		update(newArgs: boolean) {
-			enabled = newArgs;
-			newArgs ? onScanElements(false) : onCleanUp();
-		},
-		destroy() {
-			onCleanUp();
-			observer.disconnect();
-		}
-	};
-}
diff --git a/apps/console/src/lib/components/form/inputChip/index.ts b/apps/console/src/lib/components/form/inputChip/index.ts
deleted file mode 100644
index f933c24e..00000000
--- a/apps/console/src/lib/components/form/inputChip/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// This file defines the short path imports for the package (ex: @skeletonlabs/skeleton/*)
-
-// Types ---
-export type { Transition, TransitionParams } from './transitions.js';
-export type { CssClasses, SvelteEvent } from './types.js';
-
-// Prefers-reduced-motion
-export { prefersReducedMotionStore } from './PrefersReducedMotion.js';
-
-// Svelte Components
-export { default as InputChip } from './InputChip.svelte';
diff --git a/apps/console/src/lib/components/form/inputChip/transitions.ts b/apps/console/src/lib/components/form/inputChip/transitions.ts
deleted file mode 100644
index d98b94a5..00000000
--- a/apps/console/src/lib/components/form/inputChip/transitions.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { TransitionConfig } from 'svelte/transition';
-
-// Transitions ---
-export function dynamicTransition<T extends Transition>(node: Element, dynParams: DynamicTransitionParams<T>): TransitionConfig {
-	const { transition, params, enabled } = dynParams;
-
-	if (enabled) return transition(node, params);
-
-	// it's better to just set the `duration` to 0 to prevent flickering
-	if ('duration' in params) return transition(node, { duration: 0 });
-
-	// if the transition doesn't provide a `duration` prop, then we'll just return this as a last resort
-	return { duration: 0 };
-}
-
-type DynamicTransitionParams<T extends Transition> = {
-	transition: T;
-	params: TransitionParams<T>;
-	enabled: boolean;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Transition = (node: Element, params?: any) => TransitionConfig;
-export type TransitionParams<T extends Transition> = Parameters<T>[1];
diff --git a/apps/console/src/lib/components/form/inputChip/types.ts b/apps/console/src/lib/components/form/inputChip/types.ts
deleted file mode 100644
index 79e4e625..00000000
--- a/apps/console/src/lib/components/form/inputChip/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * This type alias is to identify CSS classes within component props,
- * which enables Tailwind IntelliSense
- */
-export type CssClasses = string;
-
-export type SvelteEvent<E extends Event = Event, T extends EventTarget = Element> = E & { currentTarget: EventTarget & T };
diff --git a/apps/console/src/lib/components/toast/README.md b/apps/console/src/lib/components/toast/README.md
deleted file mode 100644
index 5d136bde..00000000
--- a/apps/console/src/lib/components/toast/README.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# Toast
-
-## Usage
-
-1. Add `<Toasts />` component somewhere in your layout component (e.g. App.svelte or \_layout.svelte, etc).
-
-   ```svelte
-   <script lang="ts">
-   	import { Toasts } from '$lib/components/toast';
-   </script>
-
-   <Toasts placements="bottom-right" />
-
-   <div>
-   	<Header />
-   	<div>
-   		<SideMenu />
-   		<main>
-   			<slot />
-   		</main>
-   	</div>
-   	<Footer />
-   </div>
-   ```
-
-2. Use `addToast()` method to emit notifications in a svelte component or in `ts` file.
-
-   ```svelte
-   <script lang="ts">
-   	import { addToast, ToastLevel } from '$lib/components/toast';
-   	import { Button } from 'flowbite-svelte';
-   </script>
-
-   <svelte:head>
-   	<title>Dashboard/test</title>
-   	<meta name="description" content="Dashboard test" />
-   </svelte:head>
-
-   <h2>Settings</h2>
-   <Button
-   	on:click={() =>
-   		addToast({
-   			message: 'Hello, World!',
-   			dismissible: false,
-   			duration: 6000,
-   			type: ToastLevel.Error
-   		})}>Error</Button
-   >
-   <Button
-   	on:click={() =>
-   		addToast({
-   			message: 'Hello, World!',
-   			dismissible: true,
-   			duration: 6000,
-   			type: ToastLevel.Warning
-   		})}>Warning</Button
-   >
-   <Button
-   	on:click={() =>
-   		addToast({
-   			message: 'Hello, World!',
-   			dismissible: false,
-   			duration: 6000,
-   			type: ToastLevel.Success
-   		})}>Success</Button
-   >
-   <Button
-   	on:click={() =>
-   		addToast({
-   			message: 'Hello, World!',
-   			dismissible: true,
-   			duration: 6000,
-   			type: ToastLevel.Info
-   		})}>Info</Button
-   >
-   ```
-
-## Configuration
-
-```html
-<!-- +layout.svelte -->
-
-<Toaster placement="bottom-right" />
-```
-
-| Property Name | Property Type                                                                                               | Property Default |
-| :------------ | :---------------------------------------------------------------------------------------------------------- | :--------------- |
-| placement     | 'top-left' \| 'top-center' \| 'top-right' \| 'center' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right' | 'center'         |
-
-```svelte
-<!-- +page.svelte -->
-<script lang="ts">
-	function newToast() {
-		new Slice({
-			message: 'Hello, World!',
-			dismissible: false,
-			duration: 6000,
-			type: ToastLevel.Warning
-		});
-	}
-</script>
-```
-
-| Property Name | Property Type                               | Property Default |
-| :------------ | :------------------------------------------ | :--------------- |
-| message       | string                                      |                  |
-| type          | 'Error' \| 'Warning' \| 'Success' \| 'Info' | Info             |
-| dismissible   | boolean                                     | true             |
-| duration      | number                                      | 9000             |
diff --git a/apps/console/src/lib/components/toast/Toasts.svelte b/apps/console/src/lib/components/toast/Toasts.svelte
deleted file mode 100644
index d902364b..00000000
--- a/apps/console/src/lib/components/toast/Toasts.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts">
-	import { twMerge } from 'tailwind-merge';
-	import { CloseButton } from 'flowbite-svelte';
-	import {
-		CloseCircleSolid,
-		CheckCircleSolid,
-		ExclamationCircleOutline,
-		InfoCircleOutline
-	} from 'flowbite-svelte-icons';
-	import { slide } from 'svelte/transition';
-	import { default as Frame } from '$lib/components/utils/Frame.svelte';
-	import { ToastLevel, dismissToast, toasts } from './store';
-
-	export let divClass = 'w-full max-w-xs p-4 z-50';
-
-	export let placement:
-		| 'top-left'
-		| 'top-center'
-		| 'top-right'
-		| 'center'
-		| 'bottom-left'
-		| 'bottom-center'
-		| 'bottom-right' = 'center';
-	const placements = {
-		'top-left': 'absolute top-0 left-0',
-		'top-center': 'absolute top-0 left-1/2 -translate-x-1/2',
-		'top-right': 'absolute top-0 right-0',
-		center: 'absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2',
-		'bottom-left': 'absolute bottom-0 left-0',
-		'bottom-center': 'absolute bottom-0 left-1/2 -translate-x-1/2',
-		'bottom-right': 'absolute bottom-0 right-0'
-	};
-
-	let toastsClass: string;
-	$: toastsClass = twMerge(divClass, placements[placement], $$props.class);
-
-	let iconClass: string;
-	$: iconClass = twMerge('inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3');
-</script>
-
-{#if $toasts}
-	<section class={toastsClass}>
-		{#each $toasts as toast (toast.id)}
-			<Frame
-				rounded
-				border
-				transition={slide}
-				class="mb-2 w-full max-w-xs p-4"
-				{...$$restProps}
-				role="alert"
-			>
-				<div class="flex items-center">
-					<Frame color={toast.type} rounded class={iconClass}>
-						{#if toast.type === ToastLevel.Success}
-							<CheckCircleSolid size="xs" ariaLabel="Success icon" />
-						{:else if toast.type === ToastLevel.Error}
-							<CloseCircleSolid size="xs" ariaLabel="Error icon" />
-						{:else if toast.type === ToastLevel.Warning}
-							<ExclamationCircleOutline size="xs" ariaLabel="Warning icon" />
-						{:else}
-							<InfoCircleOutline size="xs" ariaLabel="Info icon" />
-						{/if}
-					</Frame>
-					<div class="w-full text-sm font-normal">
-						{toast.message}
-					</div>
-					{#if toast.dismissible}
-						<CloseButton aria-label="Close" on:click={() => dismissToast(toast.id)} />
-					{/if}
-				</div>
-			</Frame>
-		{/each}
-	</section>
-{/if}
diff --git a/apps/console/src/lib/components/toast/index.ts b/apps/console/src/lib/components/toast/index.ts
deleted file mode 100644
index afdc77cc..00000000
--- a/apps/console/src/lib/components/toast/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { addToast, ToastLevel } from './store';
-export type { Toast } from './store';
-export { default as Toasts } from './Toasts.svelte';
diff --git a/apps/console/src/lib/components/toast/store.ts b/apps/console/src/lib/components/toast/store.ts
deleted file mode 100644
index 144ef6f5..00000000
--- a/apps/console/src/lib/components/toast/store.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { writable } from 'svelte/store';
-
-interface ToastModel {
-	id: string;
-	message: string;
-	type: ToastLevel;
-	duration: number;
-	dismissible: boolean;
-}
-
-export interface Toast {
-	message: string;
-	type?: ToastLevel;
-	duration?: number;
-	dismissible?: boolean;
-}
-
-export enum ToastLevel {
-	Info = 'blue',
-	Success = 'green',
-	Warning = 'indigo',
-	Error = 'red'
-}
-
-export const toasts = writable<ToastModel[]>([]);
-
-// Setup some sensible defaults for a toast.
-const defaults = {
-	type: ToastLevel.Info,
-	dismissible: true,
-	duration: 9000
-};
-
-export const dismissToast = (id: string) => {
-	toasts.update((all) => all.filter((t) => t.id !== id));
-};
-
-export const addToast = (toast: Toast) => {
-	// Create a unique ID so we can easily find/remove it
-	// if it is dismissible/has a timeout.
-	const id = crypto.randomUUID();
-
-	// Push the toast to the top of the list of toasts
-	const t = { ...defaults, ...toast, id };
-	toasts.update((all) => [t, ...all]);
-
-	// If toast is dismissible, dismiss it after "duration" amount of time.
-	if (t.duration) setTimeout(() => dismissToast(id), t.duration);
-};
diff --git a/apps/console/src/lib/models/enums/index copy.ts b/apps/console/src/lib/models/enums/index copy.ts
deleted file mode 100644
index d3aac502..00000000
--- a/apps/console/src/lib/models/enums/index copy.ts	
+++ /dev/null
@@ -1,77 +0,0 @@
-export const limits = [
-	{ value: 5, name: '5' },
-	{ value: 10, name: '10' },
-	{ value: 20, name: '20' },
-	{ value: 50, name: '50' },
-	{ value: 100, name: '100' }
-];
-
-export const rows = [
-	{ value: 5, name: '5' },
-	{ value: 10, name: '10' },
-	{ value: 20, name: '20' },
-	{ value: 50, name: '50' },
-	{ value: 100, name: '100' }
-];
-
-export const subjectTypeOptions = [
-	{ value: '', name: 'All' },
-	{ value: 'user', name: 'User' },
-	{ value: 'group', name: 'Group' },
-	{ value: 'service_account', name: 'Service' },
-	{ value: 'device', name: 'Device' },
-	{ value: 'device_pool', name: 'Device Pool' }
-];
-
-export const subjectTypeOptions2 = [
-	{
-		value: 'user',
-		label: 'User'
-	},
-	{
-		value: 'group',
-		label: 'Group'
-	},
-	{
-		value: 'device',
-		label: 'Device'
-	},
-	{
-		value: 'device_pool',
-		label: 'Device Pool'
-	}
-];
-
-export const protocols = [
-	{ value: 'Any', name: 'Any' },
-	{ value: 'IP', name: 'IP' },
-	{ value: 'ICMP', name: 'ICMP' },
-	{ value: 'IGMP', name: 'IGMP' },
-	{ value: 'TCP', name: 'TCP' },
-	{ value: 'UDP', name: 'UDP' },
-	{ value: 'IPV6', name: 'IPV6' },
-	{ value: 'ICMPV6', name: 'ICMPV6' },
-	{ value: 'RM', name: 'RM' }
-];
-
-export const actionOptions = [
-	{
-		value: 'permit',
-		label: 'Allow'
-	},
-	{
-		value: 'block',
-		label: 'Deny'
-	}
-];
-
-export const directionOptions = [
-	{
-		value: 'egress',
-		label: 'Egress' // Outbound
-	},
-	{
-		value: 'ingress',
-		label: 'Ingress' // Inbound
-	}
-];
diff --git a/apps/console/src/lib/models/enums/index.ts b/apps/console/src/lib/models/enums/index.ts
deleted file mode 100644
index c771c176..00000000
--- a/apps/console/src/lib/models/enums/index.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-export const limits = [
-	{ value: 5, name: '5' },
-	{ value: 10, name: '10' },
-	{ value: 20, name: '20' },
-	{ value: 50, name: '50' },
-	{ value: 100, name: '100' }
-];
-
-export const rows = [
-	{ value: 5, name: '5' },
-	{ value: 10, name: '10' },
-	{ value: 20, name: '20' },
-	{ value: 50, name: '50' },
-	{ value: 100, name: '100' }
-];
-
-export const subjectTypeOptions = [
-	{ value: '', name: 'All' },
-	{ value: 'user', name: 'User' },
-	{ value: 'group', name: 'Group' },
-	{ value: 'service_account', name: 'Service' },
-	{ value: 'device', name: 'Device' },
-	{ value: 'device_pool', name: 'Device Pool' }
-];
-
-export enum Flow_Log_Events_Tag_Keys_Enum {
-	ALL = 'all',
-	USER = 'user-id',
-	DEVICE = 'hostname',
-	APPLICATION = 'app'
-}
-
-export const subjectTypeOptions2 = [
-	{
-		value: 'user',
-		label: 'User'
-	},
-	{
-		value: 'group',
-		label: 'Group'
-	},
-	{
-		value: 'device',
-		label: 'Device'
-	},
-	{
-		value: 'device_pool',
-		label: 'Device Pool'
-	}
-];
-
-export const protocols = [
-	{ value: 'Any', name: 'Any' },
-	{ value: 'IP', name: 'IP' },
-	{ value: 'ICMP', name: 'ICMP' },
-	{ value: 'IGMP', name: 'IGMP' },
-	{ value: 'TCP', name: 'TCP' },
-	{ value: 'UDP', name: 'UDP' },
-	{ value: 'IPV6', name: 'IPV6' },
-	{ value: 'ICMPV6', name: 'ICMPV6' },
-	{ value: 'RM', name: 'RM' }
-];
-
-export const actionOptions = [
-	{
-		value: 'permit',
-		label: 'Allow'
-	},
-	{
-		value: 'block',
-		label: 'Deny'
-	}
-];
-
-export const directionOptions = [
-	{
-		value: 'egress',
-		label: 'Egress' // Outbound
-	},
-	{
-		value: 'ingress',
-		label: 'Ingress' // Inbound
-	}
-];
diff --git a/apps/console/src/lib/schema/rule.ts b/apps/console/src/lib/schema/rule.ts
index d60f3b80..4816bc61 100644
--- a/apps/console/src/lib/schema/rule.ts
+++ b/apps/console/src/lib/schema/rule.ts
@@ -1,39 +1,63 @@
-import { z } from 'zod';
 import { action_enum, direction_enum, protocol_enum } from '$houdini';
+import { z } from 'zod';
 
+/**
+ * Rule Schema
+ */
 export const ruleSchema = z.object({
-  id: z.string().uuid(),
-  displayName: z.string().min(1).max(255),
-  description: z.string().optional(),
-  tags: z.array(z.string()).optional(),
-  annotations: z.string().optional(),
-  source: z.string().optional(),
-  sourcePort: z.string().optional(),
-  destination: z.string().optional(),
-  destinationPort: z.string().optional(),
+  id: z.string().trim().uuid(),
+  displayName: z.string().trim().min(4).max(256),
+  description: z.string().trim().max(256).nullish(),
+  tags: z.string().trim().min(2).array().max(5).default([]),
+  annotations: z.string().trim().nullish(), // TODO: validate map string
+  source: z.string().ip().nullish(),
+  sourcePort: z.string().trim().nullish(),
+  destination: z.string().ip().nullish(),
+  destinationPort: z.string().trim().nullish(),
   protocol: z.nativeEnum(protocol_enum).default(protocol_enum.Any),
   action: z.nativeEnum(action_enum).default(action_enum.block),
   direction: z.nativeEnum(direction_enum).default(direction_enum.egress),
-  appId: z.string().optional(),
-  throttleRate: z.number().min(0).max(100).optional(),
-  weight: z.number().min(0).max(1000).optional(),
-  shared: z.boolean().default(false),
-  updatedAt: z.date().optional(),
+  appId: z.string().trim().nullish(),
+  throttleRate: z.coerce.number().min(0).max(100).optional().default(80),
+  weight: z.coerce.number().min(0).max(1000).optional().default(1000),
+  shared: z.boolean().optional().default(false),
 });
 
-export const createRuleSchema = ruleSchema.omit({ id: true, updatedAt: true });
-export const updateRuleSchema = ruleSchema.partial().omit({ id: true });
+export type RuleSchema = typeof ruleSchema;
+export type Rule = z.infer<typeof ruleSchema>;
 
+/**
+ * Search Rule Schema
+ */
 export const ruleSearchSchema = z.object({
-  displayName: z.string().optional(),
-  limit: z.number().int().min(1).max(100).default(50),
+  limit: z.number().int().min(5).max(100).default(10),
   offset: z.number().int().min(0).default(0),
+  displayName: z.string().trim().optional(),
+  tags: z.array(z.string()).optional(),
 });
-
-export type Rule = z.infer<typeof ruleSchema>;
-export type CreateRule = z.infer<typeof createRuleSchema>;
-export type UpdateRule = z.infer<typeof updateRuleSchema>;
+export type RuleSearchSchema = typeof ruleSearchSchema;
 export type RuleSearch = z.infer<typeof ruleSearchSchema>;
 
+/**
+ * Create Rule Schema
+ */
+export const createRuleSchema = ruleSchema.omit({ id: true });
+
+export type CreateRuleSchema = typeof createRuleSchema;
+export type CreateRule = z.infer<typeof createRuleSchema>;
 export const createRuleKeys = createRuleSchema.keyof().Enum;
+
+/**
+ * Update Rule Schema
+ */
+export const updateRuleSchema = ruleSchema.partial().omit({ id: true }).extend({
+  originalShared: ruleSchema.shape.shared,
+});
+
+export type UpdateRuleSchema = typeof updateRuleSchema;
+export type UpdateRule = z.infer<typeof updateRuleSchema>;
 export const updateRuleKeys = updateRuleSchema.keyof().Enum;
+
+/**
+ * Refine functions can be added here if needed
+ */
diff --git a/apps/console/src/lib/utils/logger.ts b/apps/console/src/lib/utils/logger.ts
deleted file mode 100644
index 1fb1094b..00000000
--- a/apps/console/src/lib/utils/logger.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export enum LogLevel {
-	off = 0,
-	Debug,
-	Error,
-	Warning,
-	Info
-}
-
-export class Logger {
-	static level = LogLevel.Debug;
-
-	private source: string;
-
-	/**
-	 * Enables production mode.
-	 * Sets logging level to LogLevel.Warning.
-	 */
-	static enableProductionMode() {
-		Logger.level = LogLevel.Warning;
-	}
-
-	constructor(component: string) {
-		this.source = component;
-	}
-
-	public debug(...data: unknown[]): void {
-		this.log(console.info, LogLevel.Debug, data);
-	}
-
-	public info(...data: unknown[]): void {
-		this.log(console.info, LogLevel.Info, data);
-	}
-
-	public warn(...data: unknown[]): void {
-		this.log(console.warn, LogLevel.Warning, data);
-	}
-
-	public error(...data: unknown[]): void {
-		this.log(console.error, LogLevel.Error, data);
-	}
-
-	private log = (fun: () => void, level: LogLevel, objects: unknown[]): void => {
-		if (level >= Logger.level) {
-			const log = this.source ? [`[${this.source}]`].concat(objects as string[]) : objects;
-			fun.apply<Console, unknown[], void>(console, log);
-		}
-	};
-}
diff --git a/apps/console/src/routes/(app)/rules/create/+page.server.ts b/apps/console/src/routes/(app)/rules/create/+page.server.ts
index a25c1966..e69de29b 100644
--- a/apps/console/src/routes/(app)/rules/create/+page.server.ts
+++ b/apps/console/src/routes/(app)/rules/create/+page.server.ts
@@ -1,68 +0,0 @@
-import { CreateRuleStore, type rules_insert_input } from '$houdini';
-import { ToastLevel } from '$lib/components/toast';
-import { createRuleSchema as schema } from '$lib/schema/rule';
-import { Logger, cleanClone } from '$lib/utils';
-import { fail } from '@sveltejs/kit';
-import type { GraphQLError } from 'graphql';
-import { redirect } from 'sveltekit-flash-message/server';
-import { setError, setMessage, superValidate } from 'sveltekit-superforms';
-import { zod } from 'sveltekit-superforms/adapters';
-
-const log = new Logger('rule.create.server');
-
-const createRuleStore = new CreateRuleStore();
-export const actions = {
-	default: async (event) => {
-		const { request, locals } = event;
-		const session = await locals.auth();
-		if (session?.user == undefined) {
-			throw redirect(307, '/auth/signin?callbackUrl=/dashboard/rules/create');
-		}
-
-		const form = await superValidate(request, zod(schema));
-		log.debug({ form });
-
-		// superform validation
-		if (!form.valid) return fail(400, { form });
-
-		log.debug('before cleanClone with strip:', form.data);
-		const dataCopy = cleanClone(form.data, { empty: 'strip' });
-		log.debug('after cleanClone with strip:', dataCopy);
-
-		const payload: rules_insert_input = {
-			...dataCopy,
-			shared: true,
-			...(dataCopy.tags && { tags: `{${dataCopy.tags}}` }),
-			...(dataCopy.throttleRate >= 0 ? { throttleRate: `${dataCopy.throttleRate}` } : { throttleRate: '0' })
-		};
-		const variables = { data: payload };
-		log.debug('CREATE action variables:', variables);
-		const { errors, data } = await createRuleStore.mutate(variables, {
-			metadata: { logResult: true },
-			event
-		});
-		if (errors) {
-			errors.forEach((error) => {
-				log.error('create rule api error', error);
-				// NOTE: you can add multiple errors, send all along with a message
-				if (error.message.includes('Uniqueness violation')) {
-					setError(form, 'displayName', 'Display Name already taken');
-				} else {
-					setError(form, '', (error as GraphQLError).message);
-				}
-			});
-			return setMessage(form, 'Create rule failed');
-		}
-
-		const result = data?.insert_rules_one;
-		if (!result) return setMessage(form, 'Create rule failed: responce empty', { status: 404 });
-
-		const message = {
-			message: `Rule: ${result.displayName} created`,
-			dismissible: true,
-			duration: 10000,
-			type: ToastLevel.Success
-		} as const;
-		throw redirect(302, '/dashboard/rules', message, event);
-	}
-};
diff --git a/apps/console/src/routes/(app)/rules/create/+page.svelte b/apps/console/src/routes/(app)/rules/create/+page.svelte
index 0e7aa33e..aa7da02b 100644
--- a/apps/console/src/routes/(app)/rules/create/+page.svelte
+++ b/apps/console/src/routes/(app)/rules/create/+page.svelte
@@ -1,183 +1,420 @@
 <script lang="ts">
-	import { dev } from '$app/environment';
-	import { loadOptions } from '$lib/api';
-	import {
-		Checkbox,
-		FloatingTextInput,
-		Form,
-		Select as FormSelect,
-		Radio,
-		Range,
-		TagsInput
-	} from '$lib/components/form';
-	import { actionOptions, directionOptions, protocols } from '$lib/models/enums';
-	import { createRuleKeys as keys } from '$lib/schema/rule';
-	import { Logger } from '$lib/utils';
-	import { Breadcrumb, BreadcrumbItem, Heading, Helper } from 'flowbite-svelte';
-	import Select from 'svelte-select';
-	import { superForm } from 'sveltekit-superforms/client';
-	import SuperDebug from 'sveltekit-superforms';
-
-	const log = new Logger('routes:rules:create');
-	export let data;
-	// Client API:
-	const superform = superForm(data.form, {
-		dataType: 'json',
-		taintedMessage: null,
-		syncFlashMessage: false,
-		onError({ result, message }) {
-			log.error('superForm', { result }, { message });
-		}
-	});
-	const {
-		form,
-		delayed,
-		errors,
-		constraints,
-		message,
-		tainted,
-		posted,
-
-		submitting,
-		capture,
-		restore
-	} = superform;
-	export const snapshot = { capture, restore };
+	import Footer from './../../../../lib/components/layout/footer.svelte';
+
+import { browser } from '$app/environment';
+import { goto } from '$app/navigation';
+import { graphql, type policies_insert_input } from '$houdini';
+import * as m from '$i18n/messages';
+import { searchRulesFn } from '$lib/api/search-rules';
+import { searchSubjects } from '$lib/api/search-subjects';
+import { handleMessage } from '$lib/components/layout/toast-manager';
+import { i18n } from '$lib/i18n.js';
+import { createRuleSchema } from '$lib/schema/rule';
+import { createRuleKeys as keys } from '$lib/schema/rule';
+import { getLoadingState } from '$lib/stores/loading';
+import { actionOptions, directionOptions, protocols, subjectTypeOptions } from '$lib/utils/options';
+import { InputChip, RadioGroup, RadioItem, RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
+import { getToastStore } from '@skeletonlabs/skeleton';
+import { DebugShell, GraphQLErrors } from '@spectacular/skeleton';
+import { Alerts } from '@spectacular/skeleton/components/form';
+import { Logger, cleanClone } from '@spectacular/utils';
+import * as Form from 'formsnap';
+import type { GraphQLError } from 'graphql';
+import {
+  Loader,
+  MonitorSmartphone,
+  MoreHorizontal,
+  Search,
+  Server,
+  User,
+  UserRound,
+  Users,
+  UsersRound,
+} from 'lucide-svelte';
+import Select from 'svelte-select';
+import SuperDebug, { dateProxy, defaults, setError, setMessage, superForm } from 'sveltekit-superforms';
+import { zod, zodClient } from 'sveltekit-superforms/adapters';
+
+
+
+const log = new Logger('rules.create.browser');
+
+// Variables
+// export let data: PageData;
+const toastStore = getToastStore();
+const loadingState = getLoadingState();
+let gqlErrors: Partial<GraphQLError>[] | null;
+// let subjects: Subject[] | undefined;
+
+const createRule = graphql(`
+  mutation CreateRule($data: rules_insert_input!) {
+    insert_rules_one(object: $data) {
+      id
+      displayName
+      description
+      tags
+      annotations
+      source
+      sourcePort
+      destination
+      destinationPort
+      protocol
+      action
+      direction
+      appId
+      throttleRate
+      weight
+      shared
+      createdBy
+      createdAt
+      updatedAt
+      updatedBy
+      organization
+    }
+  }
+`);
+
+
+
+
+const superform = superForm(defaults(zod(createRuleSchema)), {
+  SPA: true,
+  dataType: 'json',
+  taintedMessage: null,
+  syncFlashMessage: false,
+  resetForm: true,
+  delayMs: 100,
+  timeoutMs: 4000,
+  validators: zodClient(createRuleSchema),
+  async onUpdate({ form, cancel }) {
+    if (!form.valid) return;
+  }
+
+});
+
+
+  const {
+  form,
+  delayed,
+  enhance,
+  errors,
+  constraints,
+  message,
+  isTainted,
+  tainted,
+  posted,
+  allErrors,
+  reset,
+  submitting,
+  timeout,
+  capture,
+  restore,
+} = superform;
+
 </script>
 
 <svelte:head>
-	<title>Rules | Create</title>
-	<meta name="description" content="Create Rule" />
+  <title>Rules</title>
+  <meta name="description" content="rules" />
 </svelte:head>
 
-<Breadcrumb aria-label="Default breadcrumb example" class="mb-6">
-	<BreadcrumbItem href="/dashboard" home>Home</BreadcrumbItem>
-	<BreadcrumbItem href="/dashboard/rules">Rules</BreadcrumbItem>
-	<BreadcrumbItem>Create Rule</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading tag="h4" class="pb-5">Create Rule</Heading>
-
-<Form {superform} submitButtonText="Create" class="space-y-6">
-	<div class="mb-6 grid gap-6 md:grid-cols-3 lg:grid-cols-6">
-		<div class="col-span-2">
-			<FloatingTextInput field={keys.displayName} label="Display Name" />
-		</div>
-		<div class="col-span-4">
-			<FloatingTextInput field={keys.description} label="Description" />
-		</div>
-		<div class="col-span-3">
-			<TagsInput field={keys.tags} label="Tags" placeholder={'Enter tags...'} />
-		</div>
-		<div class="col-span-3">
-			<FloatingTextInput field={keys.annotations} label="Annotations" />
-			<Helper class="mt-2 text-sm italic">
-				Format: key1=>value1 (or) "key2" => "value2 with space"
-			</Helper>
-		</div>
-		<div class="col-span-3">
-			<Select
-				bind:justValue={$form.source}
-				name="source"
-				itemId="displayName"
-				label="displayName"
-				placeholder="Select Source or Local"
-				{loadOptions}
-				--list-z-index="100"
-				--border-radius="8px"
-				--border-focused="1px solid blue"
-			/>
-			<Helper class="mt-2 text-sm italic">
-				Format: Prefix entry with "device:" or "pool:" to filter by device or pool OR enter
-				an IP Address
-			</Helper>
-			{#if $errors['rule.source']}
-				<Helper class="mt-2 text-sm italic text-red-500">
-					{$errors['rule.source']}
-				</Helper>
-			{/if}
-		</div>
-		<div class="col-span-3">
-			<FloatingTextInput field={keys.sourcePort} label="Source or Local Port" />
-		</div>
-		<div class="col-span-3">
-			<Select
-				bind:justValue={$form.destination}
-				name="destination"
-				itemId="displayName"
-				label="displayName"
-				{loadOptions}
-				placeholder="Select Destination or Remote"
-				--list-z-index="100"
-				--border-radius="8px"
-				--border-focused="1px solid blue"
-			/>
-			<Helper class="mt-2 text-sm italic">
-				Format: Prefix entry with "device:" or "pool:" to filter by device or pool OR enter
-				an IP Address
-			</Helper>
-			{#if $errors?.destination}
-				<Helper class="mt-2 text-sm italic text-red-500">
-					{$errors?.destination}
-				</Helper>
-			{/if}
-		</div>
-		<div class="col-span-3">
-			<FloatingTextInput field={keys.destinationPort} label="Destination or Remote Port" />
-		</div>
-		<div>
-			<FormSelect field={keys.protocol} items={protocols} />
-		</div>
-		<div>
-			<Radio field={keys.action} items={actionOptions} />
-		</div>
-		<div>
-			<Radio field={keys.direction} items={directionOptions} />
-		</div>
-		<div class="col-start-5 flex justify-end">
-			<Checkbox
-				field={keys.shared}
-				class="toggle toggle-secondary"
-				labelPosition="before"
-				disabled>Shared</Checkbox
-			>
-		</div>
-		<div class="col-end-7">
-			<FloatingTextInput field={keys.weight} type="number" label="Weight" />
-		</div>
-		<div class="col-span-4">
-			<FloatingTextInput field={keys.appId} label="App id" />
-			<Helper class="mt-2 text-sm italic"
-				>If no app is selected, throttle rate applied system wide.</Helper
-			>
-		</div>
-		<div class="col-span-2">
-			<Range
-				field={keys.throttleRate}
-				class="range-primary range-md"
-				min="0"
-				max="100"
-				label="Bandwidth limit">Throttle Rate {$form.throttleRate}</Range
-			>
-		</div>
-	</div>
-</Form>
-
-{#if dev}
-	<br />
-	<SuperDebug
-		label="Miscellaneous"
-		status={false}
-		data={{ message: $message, submitting: $submitting, delayed: $delayed, posted: $posted }}
-	/>
-	<br />
-	<SuperDebug label="Form" data={$form} />
-	<br />
-	<SuperDebug label="Tainted" status={false} data={$tainted} />
-	<br />
-	<SuperDebug label="Errors" status={false} data={$errors} />
-	<br />
-	<SuperDebug label="Constraints" status={false} data={$constraints} />
-	<!-- <br />
- <SuperDebug label="$page data" status={false} data={$page} /> -->
-{/if}
+<div class="page-container">
+  <section class="space-y-4">
+    <h1 class="h1">Rules</h1>
+    <p>create Rules</p>
+  </section>
+
+  <section class="space-y-4">
+    <!-- Form Level Errors / Messages -->
+    <Alerts errors={$errors._errors} message={$message} />
+    <!-- GraphQL Errors  -->
+    <GraphQLErrors errors={gqlErrors} />
+    <!-- Update User Details Form -->
+
+    <form class="card md:space-y-8" method="POST" use:enhance>
+      <header class="card-header">
+          <div class="text-xl">Create Rule</div>
+          <!-- <div>Create new Rule</div> -->
+      </header>
+
+      <section class="p-4 grid gap-6 md:grid-cols-3 lg:grid-cols-6">
+        <div class="col-span-2">
+          <Form.Field form={superform} name='rule.displayName'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Display Name</Form.Label>
+              <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+
+                placeholder="Display Name"
+
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter the displayName</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+
+        <div class="col-span-4">
+          <Form.Field form={superform} name='rule.description'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Description</Form.Label>
+              <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+                placeholder="Display Name"
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter the description</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-span-3">
+          <Form.Field form={superform} name='rule.tags'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Tags</Form.Label>
+              <!-- <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+                {disabled}
+                placeholder="Enter tags..."
+                bind:value={$form.rule.tags}
+              /> -->
+              <InputChip {...attrs}   placeholder="Enter tags..." class="input data-[fs-error]:input-error"  />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter the tags</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-span-3">
+          <Form.Field form={superform} name='rule.annotations'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Annotations</Form.Label>
+              <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+                placeholder="Enter Annotations..."
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Format: key1=>value1 (or) "key2" => "value2 with space"</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-span-3">
+          <Form.Field form={superform} name='rule.source'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Source</Form.Label>
+              <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+                placeholder="Enter Source..."
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter the source</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-span-3">
+          <Form.Field form={superform} name='rule.sourcePort'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Source port</Form.Label>
+              <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+                placeholder="Enter Source port..."
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter the source port</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-span-3">
+          <Form.Field form={superform} name='rule.destination'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Destination</Form.Label>
+              <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+                placeholder="Enter Destination..."
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter the destination</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-span-3">
+          <Form.Field form={superform} name='rule.destinationPort'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Destination port</Form.Label>
+              <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+                placeholder="Enter Destination port..."
+
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter the destination port</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div>
+          <Form.Field form={superform} name='rule.protocol'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Protocols</Form.Label>
+              <select
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+
+              >
+               {#each protocols as protocol}
+                <option value={protocol.value}>{protocol.name}</option>
+              {/each}
+            </select>
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter Protocols</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div>
+          <Form.Fieldset form={superform} name='rule.action'>
+            <Form.Legend>Action</Form.Legend>
+            <RadioGroup active="variant-filled-secondary" >
+            {#each actionOptions as action}
+            <Form.Control let:attrs>
+
+            </Form.Control>
+            {/each}
+            </RadioGroup>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Select action</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Fieldset>
+        </div>
+        <div>
+          <Form.Fieldset form={superform} name='rule.direction'>
+            <Form.Legend>Direction</Form.Legend>
+            <RadioGroup active="variant-filled-secondary" >
+            {#each directionOptions as direction}
+            <Form.Control let:attrs>
+
+            </Form.Control>
+            {/each}
+            </RadioGroup>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Select direction</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Fieldset>
+        </div>
+        <div class="col-start-5 flex justify-end">
+          <Form.Field form={superform} name='rule.shared'>
+            <Form.Control let:attrs>
+              <SlideToggle
+                active="variant-filled-secondary"
+                size="md"
+                {...attrs}
+
+              >
+              <Form.Label class="inline-block w-[100px] text-left"> Shared</Form.Label>
+						</SlideToggle>
+            </Form.Control>
+            <!-- <Form.Description>Temporarily disable policy</Form.Description> -->
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-end-7">
+          <Form.Field form={superform} name={keys.weight}>
+            <Form.Control let:attrs>
+              <Form.Label class="label">Weight</Form.Label>
+              <input
+                type="number"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Enter Weight</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+
+        <div class="col-span-4">
+          <Form.Field form={superform} name='rule.appId'>
+            <Form.Control let:attrs>
+              <Form.Label class="label">App id</Form.Label>
+              <input
+                type="text"
+                class="input data-[fs-error]:input-error"
+                {...attrs}
+                placeholder="Display Name"
+              />
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">If no app is selected, throttle rate applied system wide.</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-span-2">
+          <Form.Field form={superform} name='rule.throttleRate'>
+            <Form.Control let:attrs>
+              <RangeSlider
+                 {...attrs}
+                 min={0}
+                 max={100}
+                 step={1}
+                 ticked
+              >
+                <div class="flex justify-between items-center">
+                  <Form.Label class="label">Bandwidth limit</Form.Label>
+                  <div class="text-xs"> </div>
+                </div>
+            </RangeSlider>
+            </Form.Control>
+            <Form.Description class="sr-only md:not-sr-only text-sm text-gray-500">Set Bandwidth limit</Form.Description>
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="flex justify-start">
+          <Form.Field form={superform} name='active'>
+            <Form.Control let:attrs>
+              <SlideToggle
+                active="variant-filled-secondary"
+                size="md"
+                {...attrs}
+              >
+              <Form.Label class="inline-block w-[100px] text-left">Active </Form.Label>
+						</SlideToggle>
+            </Form.Control>
+            <!-- <Form.Description>Temporarily disable policy</Form.Description> -->
+            <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+          </Form.Field>
+        </div>
+        <div class="col-start-5">
+
+        </div>
+        <div class="col-end-auto">
+
+        </div>
+
+      </section>
+
+
+
+
+
+      <footer class="card-footer flex justify-end">
+
+      </footer>
+    </form>
+  </section>
+
+  <section class="space-y-4">
+
+  </section>
+
+
+</div>
diff --git a/apps/console/src/routes/(app)/rules/create/+page.ts b/apps/console/src/routes/(app)/rules/create/+page.ts
index 17d5c4d0..e69de29b 100644
--- a/apps/console/src/routes/(app)/rules/create/+page.ts
+++ b/apps/console/src/routes/(app)/rules/create/+page.ts
@@ -1,11 +0,0 @@
-import { superValidate } from 'sveltekit-superforms/client';
-import { createRuleSchema as schema } from '$lib/schema/rule';
-import { zod } from 'sveltekit-superforms/adapters';
-
-export const load = async () => {
-	// Client API:
-	const form = await superValidate(zod(schema));
-
-	// Always return { form } in load and form actions.
-	return { schema, form };
-};