diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e444873ab4..db67e4c9f2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -48,7 +48,6 @@
 				"@types/vscode": "~1.74.0",
 				"@typescript-eslint/eslint-plugin": "^5.49.0",
 				"@typescript-eslint/parser": "^5.48.0",
-				"@windmill-labs/svelte-grid": "^5.1.6",
 				"@zerodevx/svelte-toast": "^0.8.1",
 				"autoprefixer": "^10.4.13",
 				"cssnano": "^5.1.14",
@@ -1601,12 +1600,6 @@
 				"url": "https://opencollective.com/typescript-eslint"
 			}
 		},
-		"node_modules/@windmill-labs/svelte-grid": {
-			"version": "5.1.6",
-			"resolved": "https://registry.npmjs.org/@windmill-labs/svelte-grid/-/svelte-grid-5.1.6.tgz",
-			"integrity": "sha512-wXHIG7XeMxwxnfaHajhjvz9c0u5uGgiQtTk/QxAVyViGdshsclfIfIWZF113QQBKCKp2jY/zP1cj64BrqioRoQ==",
-			"dev": true
-		},
 		"node_modules/@zeit/schemas": {
 			"version": "2.21.0",
 			"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
@@ -9284,12 +9277,6 @@
 				"eslint-visitor-keys": "^3.3.0"
 			}
 		},
-		"@windmill-labs/svelte-grid": {
-			"version": "5.1.6",
-			"resolved": "https://registry.npmjs.org/@windmill-labs/svelte-grid/-/svelte-grid-5.1.6.tgz",
-			"integrity": "sha512-wXHIG7XeMxwxnfaHajhjvz9c0u5uGgiQtTk/QxAVyViGdshsclfIfIWZF113QQBKCKp2jY/zP1cj64BrqioRoQ==",
-			"dev": true
-		},
 		"@zeit/schemas": {
 			"version": "2.21.0",
 			"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9785c52395..ba89ee1bdd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,7 +27,6 @@
 		"@types/vscode": "~1.74.0",
 		"@typescript-eslint/eslint-plugin": "^5.49.0",
 		"@typescript-eslint/parser": "^5.48.0",
-		"@windmill-labs/svelte-grid": "^5.1.6",
 		"@zerodevx/svelte-toast": "^0.8.1",
 		"autoprefixer": "^10.4.13",
 		"cssnano": "^5.1.14",
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
index c4e228d7e6..6d1590fd4b 100644
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -1,79 +1,2 @@
 /// <reference types="@sveltejs/kit" />
 
-declare type Item = import('svelte-dnd-action').Item
-declare type DndEvent<ItemType = Item> = import('svelte-dnd-action').DndEvent<ItemType>
-declare namespace svelte.JSX {
-	interface HTMLAttributes<T> {
-		onconsider?: (event: CustomEvent<DndEvent<ItemType>> & { target: EventTarget & T }) => void
-		onfinalize?: (event: CustomEvent<DndEvent<ItemType>> & { target: EventTarget & T }) => void
-	}
-}
-
-declare module '@windmill-labs/svelte-grid' {
-	import type { SvelteComponentTyped } from 'svelte'
-
-	export interface Size {
-		w: number
-		h: number
-	}
-
-	export interface Positon {
-		x: number
-		y: number
-	}
-
-	interface ItemLayout extends Size, Positon {
-		fixed?: boolean
-		resizable?: boolean
-		draggable?: boolean
-		customDragger?: boolean
-		customResizer?: boolean
-		min?: Size
-		max?: Size
-	}
-
-	export type Item<T> = T & { [width: number]: ItemLayout; data: any }
-	export type FilledItem<T> = T & { [width: number]: Required<ItemLayout>; data: any }
-
-	export interface Props<T> {
-		fillSpace?: boolean
-		items: FilledItem<T>[]
-		rowHeight: number
-		cols: [number, number][]
-		gap?: [number, number]
-		fastStart?: boolean
-		throttleUpdate?: number
-		throttleResize?: number
-		onTopId?: string
-		scroller?: undefined
-		sensor?: number
-		parentWidth?: number
-	}
-
-	export interface Slots<T> {
-		default: { item: ItemLayout; dataItem: Item<T> }
-	}
-
-	export default class Grid<T = {}> extends SvelteComponentTyped<
-		Props<T>,
-		{
-			pointerup: CustomEvent<{ id: string }>
-			mount: CustomEvent<>
-		},
-		Slots<T>
-	> { }
-}
-
-declare module '@windmill-labs/svelte-grid/build/helper/index.mjs' {
-	import { ItemLayout } from '@windmill-labs/svelte-grid'
-
-	const x: {
-		normalize(items: any[], col: any): unknown[]
-		adjust(items: any[], col: any): unknown[]
-		findSpace(item: any, items: any, cols: any): unknown
-
-		item<T>(obj: ItemLayout): Required<ItemLayout>
-	}
-
-	export default x
-}
diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index 3f36cc07fb..2ca0e28b5a 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -2,9 +2,10 @@
 	import type { DropdownItem } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import { MoreHorizontal } from 'lucide-svelte'
+	import { MoreVertical } from 'lucide-svelte'
 	import { Button, Menu } from './common'
 	import { goto } from '$app/navigation'
+	import { twMerge } from 'tailwind-merge'
 
 	type Alignment = 'start' | 'end'
 	type Side = 'top' | 'bottom'
@@ -13,15 +14,24 @@
 	export let dropdownItems: DropdownItem[]
 	export let name: string | undefined = undefined
 	export let placement: Placement = 'bottom-start'
-	export let btnClasses = '!text-blue-500 bg-transparent'
+	export let btnClasses = ''
+	$: buttonClass = twMerge('!border-0 bg-transparent !p-[6px]', btnClasses)
 
 	const dispatch = createEventDispatcher()
 </script>
 
 <Menu {placement} let:close>
-	<Button nonCaptureEvent color="light" size="xs" {btnClasses} {...$$restProps} slot="trigger">
+	<Button
+		nonCaptureEvent
+		color="dark"
+		variant="border"
+		size="xs"
+		btnClasses={buttonClass}
+		{...$$restProps}
+		slot="trigger"
+	>
 		{#if !$$slots.default}
-			<MoreHorizontal size={20} />
+			<MoreVertical size={20} />
 		{:else}
 			<slot />
 		{/if}
diff --git a/frontend/src/lib/components/FolderUsageInfo.svelte b/frontend/src/lib/components/FolderUsageInfo.svelte
index 9145cd0aa9..f1bf3919b2 100644
--- a/frontend/src/lib/components/FolderUsageInfo.svelte
+++ b/frontend/src/lib/components/FolderUsageInfo.svelte
@@ -3,6 +3,8 @@
 	import { workspaceStore } from '$lib/stores'
 
 	export let name: string
+	export let tabular = false
+	export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources']
 
 	$: $workspaceStore && loadUsage()
 
@@ -13,10 +15,18 @@
 	}
 </script>
 
-<div class="flex flex-col text-xs text-gray-600">
-	{#each Object.entries(usage) as [k, v]}
-		<div>
-			{k}: {v}
-		</div>
+{#if tabular}
+	{#each order as key}
+		<td class="text-center">
+			{usage[key] ?? ''}
+		</td>
 	{/each}
-</div>
+{:else}
+	<div class="flex flex-col text-xs text-gray-600">
+		{#each Object.entries(usage) as [k, v]}
+			<div>
+				{k}: {v}
+			</div>
+		{/each}
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
index 627d37df18..96e67f75dd 100644
--- a/frontend/src/lib/components/PageHeader.svelte
+++ b/frontend/src/lib/components/PageHeader.svelte
@@ -11,7 +11,7 @@
 		<span class="flex items-center space-x-2 mb-2">
 			<h1>{title}</h1>
 			{#if tooltip}
-				<Tooltip>{tooltip}</Tooltip>
+				<Tooltip scale={0.9}>{tooltip}</Tooltip>
 			{/if}
 		</span>
 	{:else}
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 4bdb06902f..8903921018 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -23,6 +23,7 @@
 	import FolderEditor from './FolderEditor.svelte'
 	import GroupEditor from './GroupEditor.svelte'
 	import { random_adj } from './random_positive_adjetive'
+	import Badge from './common/badge/Badge.svelte'
 
 	type PathKind = 'resource' | 'script' | 'variable' | 'flow' | 'schedule' | 'app'
 	let meta: Meta | undefined = undefined
@@ -306,7 +307,7 @@
 		{#if meta != undefined}
 			<div class="flex gap-4 shrink">
 				<label class="block">
-					<span class="text-gray-700 text-sm whitespace-nowrap">&nbsp;</span>
+					<span class="text-gray-700 text-sm whitespace-nowrap">Owner</span>
 
 					<ToggleButtonGroup
 						class="mt-0.5"
@@ -409,8 +410,26 @@
 		{/if}
 	</div>
 
-	<div class="flex-row flex justify-between w-full">
-		<div><span class="font-mono text-sm break-all">{path}</span></div>
+	<div class="flex flex-col w-full mt-4">
+		<div class="flex justify-start w-full">
+			<Badge
+				color="gray"
+				class="center-center !bg-gray-300 !text-gray-600 !w-[70px] !h-[24px] rounded-r-none"
+			>
+				Full path
+			</Badge>
+			<input
+				type="text"
+				readonly
+				value={path}
+				size={path?.length || 50}
+				class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+				on:focus={({ currentTarget }) => {
+					currentTarget.select()
+				}}
+			/>
+			<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+		</div>
 		<div class="text-red-600 text-2xs">{error}</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index a06b406d60..450b82b4f6 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
 	import { Script, ScriptService } from '$lib/gen'
-
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import { inferArgs } from '$lib/infer'
-	import { initialCode, isInitialCode } from '$lib/script_helpers'
+	import { initialCode } from '$lib/script_helpers'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '$lib/utils'
 	import Path from './Path.svelte'
-	import RadioButton from './RadioButton.svelte'
 	import ScriptEditor from './ScriptEditor.svelte'
 	import ScriptSchema from './ScriptSchema.svelte'
 	import CenteredPage from './CenteredPage.svelte'
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
 	import { Button, ButtonPopup, ButtonPopupItem, Kbd } from './common'
-	import { faChevronDown, faChevronUp, faPen, faSave } from '@fortawesome/free-solid-svg-icons'
+	import { faPen, faSave } from '@fortawesome/free-solid-svg-icons'
 	import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte'
 	import LanguageIcon from './common/languageIcons/LanguageIcon.svelte'
 	import type { SupportedLanguage } from '$lib/common'
+	import Tooltip from './Tooltip.svelte'
+	import SettingSection from './SettingSection.svelte'
 
 	export let script: Script
 	export let initialPath: string = ''
@@ -31,12 +31,32 @@
 		['Go', Script.language.GO],
 		['Bash', Script.language.BASH]
 	]
-	let viewScriptKind = script.kind !== Script.kind.SCRIPT
+	const scriptKindOptions: { value: Script.kind; title: string; desc?: string }[] = [
+		{
+			value: Script.kind.SCRIPT,
+			title: 'Action'
+		},
+		{
+			value: Script.kind.TRIGGER,
+			title: 'Trigger',
+			desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.'
+		},
+		{
+			value: Script.kind.APPROVAL,
+			title: 'Approval',
+			desc: 'Send notifications externally to ask for approval to continue a flow.'
+		},
+		{
+			value: Script.kind.FAILURE,
+			title: 'Error Handler',
+			desc: 'Handle errors in flows after all retry attempts have been exhausted.'
+		}
+	]
 
 	let pathError = ''
-
 	let summaryC: HTMLInputElement | undefined = undefined
 	let pathC: Path | undefined = undefined
+	let loadingSave = false
 
 	$: setQueryWithoutLoad($page.url, [{ key: 'state', value: encodeState(script) }])
 	$: step = Number($page.url.searchParams.get('step')) || 1
@@ -53,7 +73,6 @@
 		script.content = initialCode(language, kind, template)
 	}
 
-	let loadingSave = false
 	async function editScript(leave: boolean): Promise<void> {
 		loadingSave = true
 		try {
@@ -250,7 +269,8 @@
 							}}
 							disabled={lockedLanguage}
 						>
-							<LanguageIcon {lang} /><span class="ml-2 py-4">{label}</span>
+							<LanguageIcon {lang} />
+							<span class="ml-2 py-2">{label}</span>
 						</Button>
 					{/each}
 					<Button
@@ -265,7 +285,7 @@
 							initContent(script.language, script.kind, template)
 						}}
 					>
-						<LanguageIcon lang="pgsql" /><span class="ml-2 py-4">PostgreSQL</span>
+						<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
 					</Button>
 					<!-- <Button
 						size="sm"
@@ -278,65 +298,41 @@
 							initContent(script.language, script.kind, template)
 						}}
 					>
-						<LanguageIcon lang="mysql" /><span class="ml-2 py-4">MySQL</span>
+						<LanguageIcon lang="mysql" /><span class="ml-2 py-2">MySQL</span>
 					</Button> -->
 				</div>
-				<div class="mt-16 mb-4">
-					<Button
-						color="light"
-						size="sm"
-						endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
-						on:click={() => (viewScriptKind = !viewScriptKind)}
-					>
-						Tag this script as having a specific purpose inside flows
-					</Button>
-				</div>
-				{#if viewScriptKind}
-					<div class="max-w-lg">
-						<RadioButton
-							label="Script Type"
-							options={[
-								['Action', Script.kind.SCRIPT],
-								[
-									{
-										title: 'Trigger',
-										desc: `First module of flows to trigger them based on watching changes external periodically using an internal state`
-									},
-									Script.kind.TRIGGER
-								],
-								[
-									{
-										title: 'Approval',
-										desc: `Send notification externally to ask for approval to continue a flow`
-									},
-									Script.kind.APPROVAL
-								],
-								[
-									{
-										title: 'Error Handler',
-										desc: `Handle errors for flows after all retries attempts have been exhausted`
-									},
-									Script.kind.FAILURE
-								]
-
-								// ['Command Handler', Script.kind.COMMAND]
-							]}
-							on:change={(e) => {
-								if (isInitialCode(script.content)) {
+				<SettingSection
+					title="Script kind"
+					element="h3"
+					tooltip="Tag this script as having a specific purpose inside flows. If it won't be used in flows,
+				you don't have to worry about this."
+					accordion
+				>
+					<div class="flex flex-wrap gap-2">
+						{#each scriptKindOptions as { value, title, desc }}
+							{@const isPicked = script.kind === value}
+							<Button
+								size="sm"
+								variant="border"
+								color={isPicked ? 'blue' : 'dark'}
+								btnClasses="font-medium {isPicked ? '!bg-blue-50/75' : ''}"
+								on:click={() => {
 									template = 'script'
-									initContent(script.language, e.detail, template)
-								}
-							}}
-							bind:value={script.kind}
-						/>
+									script.kind = value
+									initContent(script.language, value, template)
+								}}
+								disabled={lockedLanguage}
+							>
+								{title}
+								{#if desc}
+									<Tooltip class="mb-0.5 ml-1">
+										{desc}
+									</Tooltip>
+								{/if}
+							</Button>
+						{/each}
 					</div>
-				{/if}
-				<!-- <div class="ml-3">
-					<Toggle
-						bind:checked={script.is_template}
-						options={{ right: 'Save as a workspace template' }}
-					/>
-				</div> -->
+				</SettingSection>
 			</CenteredPage>
 		{:else if step === 2}
 			<ScriptEditor
diff --git a/frontend/src/lib/components/SettingSection.svelte b/frontend/src/lib/components/SettingSection.svelte
new file mode 100644
index 0000000000..1d3aa47aa9
--- /dev/null
+++ b/frontend/src/lib/components/SettingSection.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { ChevronDown } from 'lucide-svelte'
+	import { slide } from 'svelte/transition'
+	import type { IntRange } from '../common'
+	import Tooltip from './Tooltip.svelte'
+
+	export let title: string
+	export let tooltip: string
+	export let element: `h${IntRange<1, 6>}` = 'h2'
+	export let accordion = false
+	let showContent = !accordion
+</script>
+
+<div class="border-b [&:has(button:hover)]:border-gray-400 duration-200 pb-1 mt-8 mb-2">
+	{#if accordion}
+		<button
+			class="flex w-full justify-between items-center"
+			on:click={() => (showContent = !showContent)}
+		>
+			<svelte:element this={element}>
+				{title}
+				<Tooltip scale={0.9} class="mb-0.5">
+					{tooltip}
+				</Tooltip>
+			</svelte:element>
+			<span class="rounded-full hover:bg-gray-100 focus:bg-gray-100 p-1">
+				<ChevronDown size={22} class="rotate-0 duration-300 {showContent ? '!rotate-180' : ''}" />
+			</span>
+		</button>
+	{:else}
+		<svelte:element this={element}>
+			{title}
+			<Tooltip scale={0.9} class="mb-0.5">
+				{tooltip}
+			</Tooltip>
+		</svelte:element>
+	{/if}
+</div>
+{#if showContent}
+	<div transition:slide={{ duration: 300 }}>
+		<slot />
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index eb79fae9e7..a9511d55d5 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -18,5 +18,7 @@
 		data={faInfoCircle}
 		{scale}
 	/>
-	<span slot="text"> <slot /> </span>
+	<svelte:fragment slot="text">
+		<slot />
+	</svelte:fragment>
 </Popover>
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 4256e86729..ff07a5523b 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -127,6 +127,7 @@
 <InputValue
 	{id}
 	input={configuration.disabled}
+	extraContext={extraQueryParams}
 	bind:value={disabled}
 	bind:error={errors.disabled}
 />
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index f2effd3066..6a515b3c08 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -12,6 +12,7 @@
 	export let value: T
 	export let id: string | undefined = undefined
 	export let error: string = ''
+	export let extraContext: Record<string, any> = {}
 
 	let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined
 
@@ -72,16 +73,19 @@
 	}
 
 	function computeGlobalContext() {
-		return Object.fromEntries(
-			Object.entries($worldStore?.outputsById ?? {})
-				.filter(([k, _]) => k != id)
-				.map(([key, value]) => {
-					return [
-						key,
-						Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
-					]
-				})
-		)
+		return {
+			...Object.fromEntries(
+				Object.entries($worldStore?.outputsById ?? {})
+					.filter(([k, _]) => k != id)
+					.map(([key, value]) => {
+						return [
+							key,
+							Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
+						]
+					})
+			),
+			...extraContext
+		}
 	}
 
 	export function getValue(input: AppInput) {
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 945cab6a19..6faad73a96 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -558,7 +558,7 @@
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px] hidden lg:block"
+			btnClasses="hidden lg:block"
 			dropdownItems={[
 				{
 					displayName: 'JSON',
@@ -583,9 +583,7 @@
 					}
 				}
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 		<span class="hidden md:inline">
 			<Button on:click={() => (inputsDrawerOpen = true)} color="light" size="xs" variant="border">
 				<span class="flex gap-2">
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index c1e15567ce..9b259d0baa 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { getContext, afterUpdate, setContext } from 'svelte'
+	import { getContext, afterUpdate } from 'svelte'
 	import type { App, AppEditorContext, AppViewerContext, GridItem } from '../types'
-	import Grid from '@windmill-labs/svelte-grid'
 	import { classNames } from '$lib/utils'
 	import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils'
 	import { twMerge } from 'tailwind-merge'
@@ -11,8 +10,9 @@
 	import HiddenComponent from '../components/helpers/HiddenComponent.svelte'
 	import Component from './component/Component.svelte'
 	import { deepEqual } from 'fast-equals'
-	import { push, type History } from '$lib/history'
+	import { push } from '$lib/history'
 	import { expandGriditem, findGridItem } from './appUtils'
+	import Grid from '../svelte-grid/Grid.svelte'
 
 	export let policy: Policy
 
@@ -215,6 +215,7 @@
 									if (gridItem) {
 										toggleFixed(gridItem)
 									}
+									$app = $app
 								}}
 								on:expand={() => {
 									push(history, $app)
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 8e38521068..a194d3f073 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher, getContext } from 'svelte'
-	import Grid from '@windmill-labs/svelte-grid'
 	import { twMerge } from 'tailwind-merge'
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
 	import type { AppEditorContext, AppViewerContext, GridItem } from '../types'
 	import Component from './component/Component.svelte'
 	import { expandGriditem, findGridItem } from './appUtils'
 	import { push } from '$lib/history'
+	import Grid from '../svelte-grid/Grid.svelte'
 
 	export let containerHeight: number
 	let classes = ''
@@ -63,6 +63,7 @@
 		if (fComponent) {
 			fComponent = toggleFixed(fComponent)
 		}
+		$app = $app
 	}
 
 	// @ts-ignore
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 971a711b43..a0e5dfe138 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -1,10 +1,10 @@
 import { getNextId } from '$lib/components/flows/flowStateUtils'
 import type { App, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types'
 import { getRecommendedDimensionsByComponent, type AppComponent } from './component'
-import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
 import { gridColumns } from '../gridUtils'
 import { allItems } from '../utils'
 import type { Output, World } from '../rx'
+import gridHelp from '../svelte-grid/utils/helper'
 
 function findGridItemById(
 	root: GridItem[],
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 3f4eab49a5..0c74ece4ee 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -1,4 +1,3 @@
-import type { Size } from '@windmill-labs/svelte-grid'
 import type { IntRange } from '../../../../common'
 import type { NARROW_GRID_COLUMNS, WIDE_GRID_COLUMNS } from '../../gridUtils'
 import { defaultAlignement } from '../componentsPanel/componentDefaultProps'
@@ -36,6 +35,7 @@ import {
 	AtSignIcon
 } from 'lucide-svelte'
 import type { BaseAppComponent } from '../../types'
+import type { Size } from '../../svelte-grid/types'
 
 type BaseComponent<T extends string> = {
 	type: T
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
index 1d39328453..36d04bb5d1 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
@@ -43,7 +43,8 @@
 				disabled: {
 					fieldType: 'boolean',
 					type: 'eval',
-					expr: 'false'
+					expr: 'false',
+					tooltip: "Disabled based on a predicate.  Use `row` to access the current row's data"
 				},
 				goto: {
 					tooltip: 'Go to an url on success if not empty',
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
index 017560c282..9cf280e70b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
@@ -2,6 +2,7 @@
 	import type { AppInput, StaticInput } from '../../../inputType'
 	import { Loader2, X } from 'lucide-svelte'
 	import { Popup } from '../../../../common'
+	import { fade } from 'svelte/transition'
 
 	export let componentInput: StaticInput<string> & Extract<AppInput, { fieldType: 'icon-select' }>
 	let anchor: HTMLElement
@@ -9,6 +10,7 @@
 	let items: { label: string; icon: any }[]
 	let filteredItems: { label: string; icon: any }[]
 	let search = ''
+	let openPopup: () => void
 
 	$: if (search) {
 		filteredItems = items.filter((item) => {
@@ -19,13 +21,16 @@
 	}
 
 	async function getData() {
-		if (items) return
+		if (items) {
+			return openPopup()
+		}
 		loading = true
 		const data = await import('lucide-svelte/dist/svelte/icons')
 		filteredItems = items = Object.entries(data)
 			.filter(([key]) => !(key.endsWith('Icon') || key.startsWith('Lucide')))
 			.map(([key, icon]) => ({ label: key, icon }))
 		loading = false
+		openPopup()
 	}
 
 	function formatName(name?: string) {
@@ -54,7 +59,11 @@
 		on:focus={getData}
 		class="pr-8"
 	/>
-	{#if componentInput.value}
+	{#if loading}
+		<div class="center-center absolute right-2 top-1/2 transform -translate-y-1/2 p-0.5">
+			<Loader2 class="animate-spin" size={16} />
+		</div>
+	{:else if componentInput.value}
 		<button
 			class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
 			on:click|stopPropagation|preventDefault={() => (componentInput.value = undefined)}
@@ -66,48 +75,52 @@
 	{/if}
 </div>
 {#if anchor}
-	<Popup ref={anchor} options={{ placement: 'bottom' }} let:close>
-		<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
-			{#if loading}
-				<div class="center-center p-2">
-					<Loader2 class="animate-spin" size={18} />
-				</div>
-			{:else if filteredItems}
-				<input
-					on:keydown|stopPropagation
-					bind:value={search}
-					type="text"
-					placeholder="Search"
-					class="col-span-4 mb-2"
-				/>
-				<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
-					{#each filteredItems as { label, icon }}
-						{@const formatedLabel = formatName(label)}
-						<button
-							type="button"
-							title={formatedLabel}
-							on:click={() => {
-								select(label)
-								close()
-							}}
-							class="w-full center-center flex-col font-normal p-1 
-								hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 
-								{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
-						>
-							<svelte:component this={icon} size={22} />
-							<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
-								{formatedLabel}
-							</span>
-						</button>
-					{:else}
-						<div class="col-span-4 text-center text-gray-700 text-sm p-2">
-							No icons match your search
-						</div>
-					{/each}
-				</div>
-			{:else}
-				<div class="text-center text-sm text-gray-600 p-2"> Couldn't load options </div>
-			{/if}
-		</div>
+	<Popup
+		ref={anchor}
+		options={{ placement: 'bottom' }}
+		bind:open={openPopup}
+		let:close
+		transition={fade}
+	>
+		{#if !loading}
+			<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
+				{#if filteredItems}
+					<input
+						on:keydown|stopPropagation
+						bind:value={search}
+						type="text"
+						placeholder="Search"
+						class="col-span-4 mb-2"
+					/>
+					<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
+						{#each filteredItems as { label, icon }}
+							{@const formatedLabel = formatName(label)}
+							<button
+								type="button"
+								title={formatedLabel}
+								on:click={() => {
+									select(label)
+									close()
+								}}
+								class="w-full center-center flex-col font-normal p-1 
+									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 
+									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
+							>
+								<svelte:component this={icon} size={22} />
+								<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
+									{formatedLabel}
+								</span>
+							</button>
+						{:else}
+							<div class="col-span-4 text-center text-gray-700 text-sm p-2">
+								No icons match your search
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="text-center text-sm text-gray-600 p-2"> Couldn't load options </div>
+				{/if}
+			</div>
+		{/if}
 	</Popup>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
index 081b5ff1cd..6e9aeaae02 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
@@ -17,7 +17,7 @@
 
 <div class="flex flex-col w-full">
 	<div class="border border-gray-300 w-full">
-		<SimpleEditor autoHeight lang="json" bind:code />
+		<SimpleEditor on:change autoHeight lang="json" bind:code />
 	</div>
 	{#if error != ''}
 		<span class="text-red-600 text-xs">{error}</span>
diff --git a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
new file mode 100644
index 0000000000..56f564f406
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { getContainerHeight } from './utils/container'
+	import { moveItemsAroundItem, moveItem, getItemById, specifyUndefinedColumns } from './utils/item'
+	import { onMount, createEventDispatcher } from 'svelte'
+	import { getColumn, throttle } from './utils/other'
+	import MoveResize from './MoveResize.svelte'
+	import type { FilledItem } from './types'
+
+	const dispatch = createEventDispatcher()
+
+	type T = $$Generic
+
+	export let fillSpace = false
+	export let items: FilledItem<T>[]
+	export let rowHeight: number
+	export let cols: [number, number][]
+	export let gap = [10, 10]
+	export let fastStart = false
+	export let throttleUpdate = 100
+	export let throttleResize = 100
+	export let onTopId: string | undefined = undefined
+
+	export let scroller = undefined
+	export let sensor = 20
+
+	export let parentWidth: number | undefined = undefined
+
+	let getComputedCols
+
+	let container
+
+	$: [gapX, gapY] = gap
+
+	let xPerPx = 0
+	let yPerPx = rowHeight
+
+	let containerWidth
+
+	$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols)
+
+	const pointerup = (ev) => {
+		dispatch('pointerup', {
+			id: ev.detail.id,
+			cols: getComputedCols
+		})
+	}
+
+	const onResize = throttle(() => {
+		items = specifyUndefinedColumns(items, getComputedCols, cols)
+		dispatch('resize', {
+			cols: getComputedCols,
+			xPerPx,
+			yPerPx,
+			width: containerWidth
+		})
+	}, throttleUpdate)
+
+	onMount(() => {
+		const sizeObserver = new ResizeObserver((entries) => {
+			requestAnimationFrame(() => {
+				let width = entries[0].contentRect.width
+
+				if (width === containerWidth) return
+
+				getComputedCols = getColumn(parentWidth ?? width, cols)
+
+				xPerPx = width / getComputedCols
+
+				if (!containerWidth) {
+					items = specifyUndefinedColumns(items, getComputedCols, cols)
+
+					dispatch('mount', {
+						cols: getComputedCols,
+						xPerPx,
+						yPerPx // same as rowHeight
+					})
+				} else {
+					onResize()
+				}
+
+				containerWidth = width
+			})
+		})
+
+		sizeObserver.observe(container)
+
+		return () => sizeObserver.disconnect()
+	})
+
+	let initItems: FilledItem<T>[] | undefined = undefined
+	const updateMatrix = ({ detail }) => {
+		let isPointerUp = detail.isPointerUp
+		let citems: FilledItem<T>[]
+		if (isPointerUp) {
+			citems = JSON.parse(JSON.stringify(initItems))
+			initItems = undefined
+		} else {
+			if (initItems == undefined) {
+				initItems = JSON.parse(JSON.stringify(items))
+			}
+			citems = JSON.parse(JSON.stringify(initItems))
+		}
+
+		let activeItem = getItemById(detail.id, citems)
+
+		if (activeItem) {
+			activeItem = {
+				...activeItem,
+				[getComputedCols]: {
+					...activeItem[getComputedCols],
+					...detail.shadow
+				}
+			}
+
+			if (fillSpace) {
+				items = moveItemsAroundItem(
+					activeItem,
+					citems,
+					getComputedCols,
+					getItemById(detail.id, citems)
+				)
+			} else {
+				items = moveItem(activeItem, citems, getComputedCols, getItemById(detail.id, citems))
+			}
+
+			if (detail.onUpdate) detail.onUpdate()
+
+			dispatch('change', {
+				unsafeItem: activeItem,
+				id: activeItem.id,
+				cols: getComputedCols
+			})
+		}
+	}
+
+	const throttleMatrix = throttle(updateMatrix, throttleResize)
+
+	const handleRepaint = ({ detail }) => {
+		if (!detail.isPointerUp) {
+			throttleMatrix({ detail })
+		} else {
+			updateMatrix({ detail })
+		}
+	}
+</script>
+
+<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
+	{#if xPerPx || !fastStart}
+		{#each items as item, i (item.id)}
+			<MoveResize
+				on:repaint={handleRepaint}
+				on:pointerup={pointerup}
+				onTop={item.id == onTopId}
+				id={item.id}
+				resizable={item[getComputedCols] && item[getComputedCols].resizable}
+				draggable={item[getComputedCols] && item[getComputedCols].draggable}
+				{xPerPx}
+				{yPerPx}
+				width={Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) *
+					xPerPx -
+					gapX * 2}
+				height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
+				top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
+				left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
+				item={item[getComputedCols]}
+				min={item[getComputedCols] && item[getComputedCols].min}
+				max={item[getComputedCols] && item[getComputedCols].max}
+				cols={getComputedCols}
+				{gapX}
+				{gapY}
+				{sensor}
+				container={scroller}
+				nativeContainer={container}
+				let:resizePointerDown
+				let:movePointerDown
+			>
+				{#if item[getComputedCols]}
+					<slot
+						{movePointerDown}
+						{resizePointerDown}
+						dataItem={item}
+						item={item[getComputedCols]}
+						index={i}
+					/>
+				{/if}
+			</MoveResize>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.svlt-grid-container {
+		position: relative;
+		width: 100%;
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/svelte-grid/LICENSE b/frontend/src/lib/components/apps/svelte-grid/LICENSE
new file mode 100644
index 0000000000..8213ccca6b
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/LICENSE
@@ -0,0 +1,23 @@
+Anything under this repo was initially forked from svelte-grid whose LICENSE is below
+
+MIT License
+
+Copyright (c) 2019 Vahe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
new file mode 100644
index 0000000000..b516f6da71
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -0,0 +1,404 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte'
+
+	const dispatch = createEventDispatcher()
+
+	export let sensor
+	export let width
+	export let height
+	export let left
+	export let top
+
+	export let resizable
+	export let draggable
+
+	export let id
+	export let container
+
+	export let xPerPx
+	export let yPerPx
+
+	export let gapX
+	export let gapY
+	export let item
+
+	export let max
+	export let min
+
+	export let cols
+
+	export let nativeContainer
+	export let onTop
+
+	let shadowElement
+	let shadow: { x: number; y: number; w: number; h: number } | undefined = undefined
+
+	let active = false
+
+	let initX, initY
+
+	let capturePos = {
+		x: 0,
+		y: 0
+	}
+
+	let cordDiff = { x: 0, y: 0 }
+
+	let newSize = { width, height }
+	let trans = false
+
+	let anima
+
+	const inActivate = () => {
+		if (shadowElement && shadow) {
+			let subgrid = shadowElement.closest('.subgrid')
+			let irect = shadowElement.getBoundingClientRect()
+			let shadowBound
+
+			if (subgrid) {
+				let subGridParent = subgrid.parentElement
+				let subGridParentRect = subGridParent.getBoundingClientRect()
+				let prect = subgrid.getBoundingClientRect()
+
+				const subGridOffset = {
+					x: subGridParentRect.x - prect.x,
+					y: subGridParentRect.y - prect.y
+				}
+
+				shadowBound = {
+					x: irect.x - prect.left - subGridOffset.x,
+					y: irect.y - prect.top - subGridOffset.y
+				}
+			} else {
+				shadowBound = irect
+			}
+
+			const xdragBound = rect.left + cordDiff.x
+			const ydragBound = rect.top + cordDiff.y
+
+			cordDiff.x = shadow.x * xPerPx + gapX - (shadowBound.x - xdragBound)
+			cordDiff.y = shadow.y * yPerPx + gapY - (shadowBound.y - ydragBound)
+
+			active = false
+			trans = true
+
+			clearTimeout(anima)
+
+			anima = setTimeout(() => {
+				trans = false
+			}, 100)
+
+			dispatch('pointerup', {
+				id
+			})
+		}
+	}
+
+	let repaint = (cb: (() => void) | undefined, isPointerUp: boolean) => {
+		dispatch('repaint', {
+			id,
+			shadow,
+			isPointerUp,
+			onUpdate: cb
+		})
+	}
+
+	// Autoscroll
+	let _scrollTop = 0
+	let containerFrame
+	let rect
+	let scrollElement
+
+	const getContainerFrame = (element) => {
+		if (element === document.documentElement || !element) {
+			const { height, top, right, bottom, left } = nativeContainer.getBoundingClientRect()
+
+			return {
+				top: Math.max(0, top),
+				bottom: Math.min(window.innerHeight, bottom)
+			}
+		}
+
+		return element.getBoundingClientRect()
+	}
+
+	const getScroller = (element) => (!element ? document.documentElement : element)
+
+	function computeRect(target) {
+		let gridItem = target.closest('.svlt-grid-item')
+		let subgrid = gridItem.closest('.subgrid')
+
+		let irect = gridItem.getBoundingClientRect()
+		if (subgrid) {
+			let subGridParent = subgrid.parentElement
+			let subGridParentRect = subGridParent.getBoundingClientRect()
+
+			let prect = subgrid.getBoundingClientRect()
+
+			const subGridOffset = {
+				x: subGridParentRect.x - prect.x,
+				y: subGridParentRect.y - prect.y
+			}
+
+			rect = {
+				top: irect.top - prect.top - subGridOffset.y,
+				left: irect.left - prect.left - subGridOffset.x
+			}
+		} else {
+			rect = irect
+		}
+	}
+
+	const pointerdown = ({ clientX, clientY, target }) => {
+		initX = clientX
+		initY = clientY
+
+		capturePos = { x: left, y: top }
+		shadow = { x: item.x, y: item.y, w: item.w, h: item.h }
+		newSize = { width, height }
+
+		containerFrame = getContainerFrame(container)
+		scrollElement = getScroller(container)
+
+		cordDiff = { x: 0, y: 0 }
+
+		computeRect(target)
+
+		active = true
+		trans = false
+		_scrollTop = scrollElement.scrollTop
+
+		window.addEventListener('pointermove', pointermove)
+		window.addEventListener('pointerup', pointerup)
+	}
+
+	let sign = { x: 0, y: 0 }
+	let vel = { x: 0, y: 0 }
+	let intervalId: NodeJS.Timer | undefined = undefined
+
+	const stopAutoscroll = () => {
+		intervalId && clearInterval(intervalId)
+		intervalId = undefined
+		sign = { x: 0, y: 0 }
+		vel = { x: 0, y: 0 }
+	}
+
+	const update = () => {
+		const _newScrollTop = scrollElement.scrollTop - _scrollTop
+
+		const boundX = capturePos.x + cordDiff.x
+		const boundY = capturePos.y + (cordDiff.y + _newScrollTop)
+
+		let gridX = Math.round(boundX / xPerPx)
+		let gridY = Math.round(boundY / yPerPx)
+
+		if (shadow) {
+			shadow.x = Math.max(Math.min(gridX, cols - shadow.w), 0)
+			shadow.y = Math.max(gridY, 0)
+
+			if (max.y) {
+				shadow.y = Math.min(shadow.y, max.y)
+			}
+		}
+		repaint(undefined, false)
+	}
+
+	const pointermove = (event) => {
+		event.preventDefault()
+		event.stopPropagation()
+		event.stopImmediatePropagation()
+
+		const { clientX, clientY } = event
+		cordDiff = { x: clientX - initX, y: clientY - initY }
+
+		const Y_SENSOR = sensor
+
+		let velocityTop = Math.max(0, (containerFrame.top + Y_SENSOR - clientY) / Y_SENSOR)
+		let velocityBottom = Math.max(0, (clientY - (containerFrame.bottom - Y_SENSOR)) / Y_SENSOR)
+
+		const topSensor = velocityTop > 0 && velocityBottom === 0
+		const bottomSensor = velocityBottom > 0 && velocityTop === 0
+
+		sign.y = topSensor ? -1 : bottomSensor ? 1 : 0
+		vel.y = sign.y === -1 ? velocityTop : velocityBottom
+
+		if (vel.y > 0) {
+			if (!intervalId) {
+				// Start scrolling
+				// TODO Use requestAnimationFrame
+				intervalId = setInterval(() => {
+					scrollElement.scrollTop += 2 * (vel.y + Math.sign(vel.y)) * sign.y
+					update()
+				}, 10)
+			}
+		} else if (intervalId) {
+			stopAutoscroll()
+		} else {
+			update()
+		}
+	}
+
+	const pointerup = (e) => {
+		stopAutoscroll()
+
+		window.removeEventListener('pointerdown', pointerdown)
+		window.removeEventListener('pointermove', pointermove)
+		window.removeEventListener('pointerup', pointerup)
+		repaint(inActivate, true)
+	}
+
+	// Resize
+
+	let resizeInitPos = { x: 0, y: 0 }
+	let initSize = { width: 0, height: 0 }
+
+	const resizePointerDown = (e) => {
+		e.stopPropagation()
+		const { pageX, pageY, target } = e
+
+		resizeInitPos = { x: pageX, y: pageY }
+		initSize = { width, height }
+
+		cordDiff = { x: 0, y: 0 }
+
+		computeRect(target)
+
+		newSize = { width, height }
+
+		active = true
+		trans = false
+		shadow = { x: item.x, y: item.y, w: item.w, h: item.h }
+
+		containerFrame = getContainerFrame(container)
+		scrollElement = getScroller(container)
+
+		window.addEventListener('pointermove', resizePointerMove)
+		window.addEventListener('pointerup', resizePointerUp)
+	}
+
+	const resizePointerMove = ({ pageX, pageY }) => {
+		if (shadow) {
+			newSize.width = initSize.width + pageX - resizeInitPos.x
+			newSize.height = initSize.height + pageY - resizeInitPos.y
+
+			// Get max col number
+			let maxWidth = cols - shadow.x
+			maxWidth = Math.min(max.w, maxWidth) || maxWidth
+
+			// Limit bound
+			newSize.width = Math.max(
+				Math.min(newSize.width, maxWidth * xPerPx - gapX * 2),
+				min.w * xPerPx - gapX * 2
+			)
+
+			newSize.height = Math.max(newSize.height, min.h * yPerPx - gapY * 2)
+
+			if (max.h) {
+				newSize.height = Math.min(newSize.height, max.h * yPerPx - gapY * 2)
+			}
+			// Limit col & row
+			shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx)
+			shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx)
+
+			repaint(undefined, false)
+		}
+	}
+
+	const resizePointerUp = (e) => {
+		e.stopPropagation()
+
+		repaint(inActivate, true)
+
+		window.removeEventListener('pointermove', resizePointerMove)
+		window.removeEventListener('pointerup', resizePointerUp)
+	}
+</script>
+
+<div
+	draggable={false}
+	on:pointerdown={item && item.customDragger ? null : draggable && pointerdown}
+	class="svlt-grid-item"
+	class:svlt-grid-active={active || (trans && rect)}
+	style="width: {active ? newSize.width : width}px; height:{active
+		? newSize.height
+		: height}px; {onTop ? 'z-index: 100;' : ''}
+  {active
+		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
+		: trans
+		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
+		: `transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px); `} "
+>
+	<slot movePointerDown={pointerdown} {resizePointerDown} />
+	{#if resizable && !item.customResizer}
+		<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
+	{/if}
+</div>
+
+{#if (active || trans) && shadow}
+	<div
+		class="svlt-grid-shadow shadow-active"
+		style="width: {shadow.w * xPerPx - gapX * 2}px; height: {shadow.h * yPerPx -
+			gapY * 2}px; transform: translate({shadow.x * xPerPx + gapX}px, {shadow.y * yPerPx +
+			gapY}px); "
+		bind:this={shadowElement}
+	/>
+{/if}
+
+<style>
+	.svlt-grid-item {
+		touch-action: none;
+		position: absolute;
+		will-change: auto;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	.svlt-grid-resizer {
+		user-select: none;
+		width: 20px;
+		height: 20px;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		cursor: se-resize;
+	}
+	.svlt-grid-resizer::after {
+		content: '';
+		position: absolute;
+		right: 3px;
+		bottom: 3px;
+		width: 5px;
+		height: 5px;
+		border-right: 2px solid rgba(0, 0, 0, 0.4);
+		border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+	}
+
+	.svlt-grid-active {
+		z-index: 3;
+		cursor: grabbing;
+		position: fixed;
+		opacity: 0.5;
+
+		/*No user*/
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		-moz-backface-visibility: hidden;
+		-o-backface-visibility: hidden;
+		-ms-backface-visibility: hidden;
+		user-select: none;
+	}
+
+	.shadow-active {
+		z-index: 2;
+		transition: all 0.2s;
+	}
+
+	.svlt-grid-shadow {
+		position: absolute;
+		background: red;
+		will-change: transform;
+		background: pink;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/svelte-grid/types.d.ts b/frontend/src/lib/components/apps/svelte-grid/types.d.ts
new file mode 100644
index 0000000000..504c561549
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/types.d.ts
@@ -0,0 +1,25 @@
+
+export interface Size {
+    w: number
+    h: number
+}
+
+export interface Positon {
+    x: number
+    y: number
+}
+
+interface ItemLayout extends Size, Positon {
+    fixed?: boolean
+    resizable?: boolean
+    draggable?: boolean
+    customDragger?: boolean
+    customResizer?: boolean
+    min?: Size
+    max?: Size
+}
+
+export type FilledItem<T> = T & { [width: number]: Required<ItemLayout>; data: any, id: string }
+
+
+
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/container.ts b/frontend/src/lib/components/apps/svelte-grid/utils/container.ts
new file mode 100644
index 0000000000..7139bc407d
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/container.ts
@@ -0,0 +1,5 @@
+import { getRowsCount } from "./other";
+
+export function getContainerHeight(items, yPerPx, cols) {
+  return getRowsCount(items, cols) * yPerPx;
+}
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/helper.ts b/frontend/src/lib/components/apps/svelte-grid/utils/helper.ts
new file mode 100644
index 0000000000..9f248dd15c
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/helper.ts
@@ -0,0 +1,43 @@
+import { makeMatrixFromItems } from "./matrix";
+import { findFreeSpaceForItem, normalize, adjust } from "./item";
+import { getRowsCount } from "./other";
+
+function makeItem(item) {
+  const { min = { w: 1, h: 1 }, max } = item;
+  return {
+    fixed: false,
+    resizable: !item.fixed,
+    draggable: !item.fixed,
+    customDragger: false,
+    customResizer: false,
+    min: {
+      w: Math.max(1, min.w),
+      h: Math.max(1, min.h),
+    },
+    max: { ...max },
+    ...item,
+  };
+}
+
+const gridHelp = {
+  normalize(items, col) {
+    return normalize(items, col);
+  },
+
+  adjust(items, col) {
+    return adjust(items, col);
+  },
+
+  item(obj) {
+    return makeItem(obj);
+  },
+
+  findSpace(item, items, cols) {
+    let matrix = makeMatrixFromItems(items, getRowsCount(items, cols), cols);
+
+    let position = findFreeSpaceForItem(matrix, item[cols]);
+    return position;
+  },
+};
+
+export default gridHelp;
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/item.ts b/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
new file mode 100644
index 0000000000..555b4e4827
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/item.ts
@@ -0,0 +1,260 @@
+import type { FilledItem, ItemLayout } from '../types'
+import {
+	makeMatrix,
+	makeMatrixFromItemsIgnore,
+	findCloseBlocks,
+	findItemsById,
+	makeMatrixFromItems
+} from './matrix'
+import { getRowsCount } from './other'
+
+export function getItemById(id, items) {
+	return items.find((value) => value.id === id)
+}
+
+export function isEmpty(matrix: any[][], x: number, y: number, w: number, h: number) {
+	for (var i = 0; i < h; i++) {
+		if (matrix[y + i]) {
+			for (var j = 0; j < w; j++) {
+				if (matrix[y + i][x + j] != undefined) {
+					return false
+				}
+			}
+		}
+	}
+	return true
+}
+
+function distance(a, b): number {
+	return Math.abs(a.x - b.x + 0.25) + Math.abs(a.y - b.y + 0.25)
+}
+
+export function findFreeSpaceForItem<T>(matrix: FilledItem<T>[][], item: ItemLayout) {
+	const cols = matrix[0].length
+	const w = Math.min(cols, item.w)
+	const h = item.h
+	let xNtime = cols - w
+	let getMatrixRows = matrix.length
+
+	const range = Array.from({ length: getMatrixRows }, (_, y) =>
+		Array.from({ length: xNtime }, (_, x) => ({ x, y }))
+	)
+		.flat(1)
+		.sort((a, b) => {
+			let dst1 = distance(a, item)
+			let dst2 = distance(b, item)
+			if (dst1 > dst2) {
+				return 1
+			} else if (dst1 < dst2) {
+				return -1
+			} else {
+				return 0
+			}
+		})
+
+	for (const { x, y } of range.values()) {
+		if (isEmpty(matrix, x, y, w, h)) {
+			return { x, y }
+		}
+	}
+
+	return {
+		y: getMatrixRows,
+		x: 0
+	}
+}
+
+const getItem = (item, col) => {
+	return { ...item[col], id: item.id }
+}
+
+const updateItem = (elements, active, position, col) => {
+	return elements.map((value) => {
+		if (value.id === active.id) {
+			return { ...value, [col]: { ...value[col], ...position } }
+		}
+		return value
+	})
+}
+
+export function moveItemsAroundItem(active, items, cols, original) {
+	// Get current item from the breakpoint
+	const activeItem = getItem(active, cols)
+	const ids = items.map((value) => value.id).filter((value) => value !== activeItem.id)
+
+	const els = items.filter((value) => value.id !== activeItem.id)
+
+	// Update items
+	let newItems = updateItem(items, active, activeItem, cols)
+
+	let matrix = makeMatrixFromItemsIgnore(newItems, ids, getRowsCount(newItems, cols), cols)
+	let tempItems = newItems
+
+	// Exclude resolved elements ids in array
+	let exclude: string[] = []
+
+	els.forEach((item) => {
+		// Find position for element
+		let position = findFreeSpaceForItem(matrix, item[cols])
+		// Exclude item
+		exclude.push(item.id)
+
+		tempItems = updateItem(tempItems, item, position, cols)
+
+		// Recreate ids of elements
+		let getIgnoreItems = ids.filter((value) => exclude.indexOf(value) === -1)
+
+		// Update matrix for next iteration
+		matrix = makeMatrixFromItemsIgnore(
+			tempItems,
+			getIgnoreItems,
+			getRowsCount(tempItems, cols),
+			cols
+		)
+	})
+
+	// Return result
+	return tempItems
+}
+
+export function moveItem(active, items, cols, original) {
+	// Get current item from the breakpoint
+	const item = getItem(active, cols)
+
+	// Create matrix from the items expect the active
+	let matrix = makeMatrixFromItemsIgnore(items, [item.id], getRowsCount(items, cols), cols)
+	// Getting the ids of items under active Array<String>
+	const closeBlocks = findCloseBlocks(matrix, item)
+	// Getting the objects of items under active Array<Object>
+	let closeObj = findItemsById(closeBlocks, items)
+	// Getting whenever of these items is fixed
+	const fixed = closeObj.find((value) => value[cols].fixed)
+
+	// If found fixed, reset the active to its original position
+	if (fixed) return items
+
+	// Update items
+	items = updateItem(items, active, item, cols)
+
+	// Create matrix of items expect close elements
+	matrix = makeMatrixFromItemsIgnore(items, closeBlocks, getRowsCount(items, cols), cols)
+
+	// Create temp vars
+	let tempItems = items
+	let tempCloseBlocks = closeBlocks
+
+	// Exclude resolved elements ids in array
+	let exclude: string[] = []
+
+	// Iterate over close elements under active item
+	closeObj.forEach((item) => {
+		// Find position for element
+		let position = findFreeSpaceForItem(matrix, item[cols])
+		// Exclude item
+		exclude.push(item.id)
+
+		// Assign the position to the element in the column
+		tempItems = updateItem(tempItems, item, position, cols)
+
+		// Recreate ids of elements
+		let getIgnoreItems = tempCloseBlocks.filter((value) => exclude.indexOf(value) === -1)
+
+		// Update matrix for next iteration
+		matrix = makeMatrixFromItemsIgnore(
+			tempItems,
+			getIgnoreItems,
+			getRowsCount(tempItems, cols),
+			cols
+		)
+	})
+
+	// Return result
+	return tempItems
+}
+
+// Helper function
+export function normalize(items, col) {
+	let result = items.slice()
+
+	result.forEach((value) => {
+		const getItem = value[col]
+		if (!getItem.static) {
+			result = moveItem(getItem, result, col, { ...getItem })
+		}
+	})
+
+	return result
+}
+
+// Helper function
+export function adjust<T>(items: FilledItem<T>[], col) {
+	let matrix = makeMatrix(getRowsCount(items, col), col)
+
+	let res: FilledItem<T>[] = []
+
+	items.forEach((item) => {
+		let position = findFreeSpaceForItem(matrix, item[col])
+
+		res.push({
+			...item,
+			[col]: {
+				...item[col],
+				...position
+			}
+		})
+
+		matrix = makeMatrixFromItems(res, getRowsCount(res, col), col)
+	})
+
+	return res
+}
+
+export function getUndefinedItems(items, col, breakpoints) {
+	return items
+		.map((value) => {
+			if (!value[col]) {
+				return value.id
+			}
+		})
+		.filter(Boolean)
+}
+
+export function getClosestColumn(items, item, col, breakpoints) {
+	return breakpoints
+		.map(([_, column]) => item[column] && column)
+		.filter(Boolean)
+		.reduce(function (acc, value) {
+			const isLower = Math.abs(value - col) < Math.abs(acc - col)
+
+			return isLower ? value : acc
+		})
+}
+
+export function specifyUndefinedColumns(items, col, breakpoints) {
+	let matrix = makeMatrixFromItems(items, getRowsCount(items, col), col)
+
+	const getUndefinedElements = getUndefinedItems(items, col, breakpoints)
+
+	let newItems = [...items]
+
+	getUndefinedElements.forEach((elementId) => {
+		const getElement = items.find((item) => item.id === elementId)
+
+		const closestColumn = getClosestColumn(items, getElement, col, breakpoints)
+
+		const position = findFreeSpaceForItem(matrix, getElement[closestColumn])
+
+		const newItem = {
+			...getElement,
+			[col]: {
+				...getElement[closestColumn],
+				...position
+			}
+		}
+
+		newItems = newItems.map((value) => (value.id === elementId ? newItem : value))
+
+		matrix = makeMatrixFromItems(newItems, getRowsCount(newItems, col), col)
+	})
+	return newItems
+}
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/matrix.ts b/frontend/src/lib/components/apps/svelte-grid/utils/matrix.ts
new file mode 100644
index 0000000000..410b6027f6
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/matrix.ts
@@ -0,0 +1,65 @@
+import type { FilledItem } from "../types";
+
+export const makeMatrix: (w: number, h: number) => any[][] = (rows, cols) => Array.from(Array(rows), () => new Array(cols)); // make 2d array
+
+export function makeMatrixFromItems<T>(items: FilledItem<T>[], row: number, col: number): FilledItem<T>[][] {
+  let matrix = makeMatrix(row, col);
+
+  for (var i = 0; i < items.length; i++) {
+    const value = items[i][col];
+    if (value) {
+      const { x, y, h } = value;
+      const id = items[i].id;
+      const w = Math.min(col, value.w);
+
+      for (var j = y; j < y + h; j++) {
+        const row = matrix[j];
+        for (var k = x; k < x + w; k++) {
+          row[k] = { ...value, id };
+        }
+      }
+    }
+  }
+  return matrix;
+}
+
+export function findCloseBlocks<T>(matrix: FilledItem<T>[][], curObject) {
+  const { h, x, y } = curObject;
+
+  const w = Math.min(matrix[0].length, curObject.w);
+  const tempR = matrix.slice(y, y + h);
+
+  let result: string[] = [];
+  for (var i = 0; i < tempR.length; i++) {
+    let tempA = tempR[i].slice(x, x + w);
+    result = [...result, ...tempA.map((val) => val?.id).filter((id) => id !== undefined && id !== curObject.id)];
+  }
+
+  return [...new Set(result)];
+}
+
+export function makeMatrixFromItemsIgnore(items, ignoreList, _row, _col) {
+  let matrix = makeMatrix(_row, _col);
+  for (var i = 0; i < items.length; i++) {
+    const value = items[i][_col];
+    const id = items[i].id;
+    const { x, y, h } = value;
+    const w = Math.min(_col, value.w);
+
+    if (ignoreList.indexOf(id) === -1) {
+      for (var j = y; j < y + h; j++) {
+        const row = matrix[j];
+        if (row) {
+          for (var k = x; k < x + w; k++) {
+            row[k] = { ...value, id };
+          }
+        }
+      }
+    }
+  }
+  return matrix;
+}
+
+export function findItemsById<T>(closeBlocks: string[], items: FilledItem<T>[]) {
+  return items.filter((value) => closeBlocks.indexOf(value.id) !== -1);
+}
diff --git a/frontend/src/lib/components/apps/svelte-grid/utils/other.ts b/frontend/src/lib/components/apps/svelte-grid/utils/other.ts
new file mode 100644
index 0000000000..6ef8d167c1
--- /dev/null
+++ b/frontend/src/lib/components/apps/svelte-grid/utils/other.ts
@@ -0,0 +1,35 @@
+export function throttle(func, timeFrame) {
+  let lastTime = new Date().getTime();
+  return function (...args) {
+    let now = new Date().getTime();
+    if (now - lastTime >= timeFrame) {
+      func(...args);
+      lastTime = now;
+    }
+  };
+}
+
+export function getRowsCount(items, cols) {
+  const getItemsMaxHeight = items.map((val) => {
+    const item = val[cols];
+
+    return (item && item.y) + (item && item.h) || 0;
+  });
+
+  return Math.max(...getItemsMaxHeight, 1);
+}
+
+export const getColumn = (containerWidth, columns) => {
+  const sortColumns = columns.slice().sort((a, b) => a[0] - b[0]);
+
+  const breakpoint = sortColumns.find((value) => {
+    const [width] = value;
+    return containerWidth <= width;
+  });
+
+  if (breakpoint) {
+    return breakpoint[1];
+  } else {
+    return sortColumns[sortColumns.length - 1][1];
+  }
+};
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index c65386ed43..87bf06b923 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -1,9 +1,8 @@
 import type { Schema } from '$lib/common'
 import type { Preview } from '$lib/gen'
 import type { History } from '$lib/history'
-import type { FilledItem } from '@windmill-labs/svelte-grid'
+
 import type { Writable } from 'svelte/store'
-import type VariableEditor from '../VariableEditor.svelte'
 import type { AppComponent } from './editor/component/components'
 import type {
 	AppInput,
@@ -16,6 +15,7 @@ import type {
 	UserAppInput
 } from './inputType'
 import type { World } from './rx'
+import type { FilledItem } from './svelte-grid/types'
 
 export type HorizontalAlignment = 'left' | 'center' | 'right'
 export type VerticalAlignment = 'top' | 'center' | 'bottom'
diff --git a/frontend/src/lib/components/common/badge/Badge.svelte b/frontend/src/lib/components/common/badge/Badge.svelte
index a30e785f96..dde8358e02 100644
--- a/frontend/src/lib/components/common/badge/Badge.svelte
+++ b/frontend/src/lib/components/common/badge/Badge.svelte
@@ -9,6 +9,7 @@
 	export let href = ''
 	export let rounded = false
 	export let dismissable = false
+	export let wrapperClass = ''
 	export let baseClass = 'text-center'
 	export let capitalize = false
 	export let icon: BadgeIconProps | undefined = undefined
@@ -56,7 +57,11 @@
 	const handleHide = () => (hidden = !hidden)
 </script>
 
-<span on:click on:keydown class="inline-flex justify-center items-center whitespace-nowrap">
+<span
+	on:click
+	on:keydown
+	class="inline-flex justify-center items-center whitespace-nowrap {wrapperClass}"
+>
 	<svelte:element
 		this={href ? 'a' : 'span'}
 		{href}
diff --git a/frontend/src/lib/components/common/menu/Menu.svelte b/frontend/src/lib/components/common/menu/Menu.svelte
index 30a8f0265a..b1c8d906ab 100644
--- a/frontend/src/lib/components/common/menu/Menu.svelte
+++ b/frontend/src/lib/components/common/menu/Menu.svelte
@@ -63,7 +63,7 @@
 			}
 			show = !show
 		}}
-		class="relative cursor-pointer hover:bg-gray-100/30"
+		class="relative"
 	>
 		<slot class="triggerable" name="trigger" />
 	</div>
diff --git a/frontend/src/lib/components/common/popup/Popup.svelte b/frontend/src/lib/components/common/popup/Popup.svelte
index 571e5cefdd..37d2950b29 100644
--- a/frontend/src/lib/components/common/popup/Popup.svelte
+++ b/frontend/src/lib/components/common/popup/Popup.svelte
@@ -16,6 +16,7 @@
 	export let innerClasses = ''
 	export let outerClasses = ''
 	export let transition: (node: Element, params?: Record<string, any>) => TransitionConfig = slide
+	export { openFocusIn as open, closed as close }
 
 	const states = ['closed', 'open-focus-in', 'open-focus-out'] as const
 	const stateMachine = createStateMachine(states, {
@@ -158,7 +159,7 @@
 	{#if $stateMachine.currentState !== 'closed'}
 		<div transition:transition|local={{ duration: 200 }} class={outerClasses}>
 			<div class={innerClasses}>
-				<slot close={closed} />
+				<slot open={openFocusIn} close={closed} />
 			</div>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index 1cbf6de8c8..e24b3b9ae9 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -86,7 +86,6 @@
 		</span>
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View',
@@ -137,8 +136,6 @@
 					disabled: !canWrite
 				}
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 	</svelte:fragment>
 </Row>
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index 9f8da4da8b..c95122f15e 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -130,7 +130,6 @@
 
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View flow',
@@ -201,8 +200,6 @@
 					disabled: !canWrite
 				}
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 	</svelte:fragment>
 </Row>
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index ec7baeff5f..fa27a46661 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -146,7 +146,6 @@
 		</span>
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View script',
@@ -229,8 +228,6 @@
 							}
 					  ])
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 	</svelte:fragment>
 </Row>
diff --git a/frontend/src/lib/components/graph/svelvet/d3/controllers/README.md b/frontend/src/lib/components/graph/svelvet/d3/controllers/README.md
deleted file mode 100644
index fe976031d2..0000000000
--- a/frontend/src/lib/components/graph/svelvet/d3/controllers/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-d3 is responsible for zooming and panning.
-
-The code works but is obviously in a bad state. However, at least it is modularized so it doesn't clutter graphview anymore.
diff --git a/frontend/src/lib/components/graph/svelvet/d3/controllers/d3Old.ts b/frontend/src/lib/components/graph/svelvet/d3/controllers/d3Old.ts
deleted file mode 100644
index 567a2ac77a..0000000000
--- a/frontend/src/lib/components/graph/svelvet/d3/controllers/d3Old.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { writable, derived, get, readable } from 'svelte/store';
-
-export function d3ZoomCreator(
-  nodeSelected,
-  movementStore,
-  backgroundStore,
-  canvasId,
-  gridSize,
-  dotSize,
-  d3Scale,
-  d3
-) {
-  // TODO: Update d3Zoom type (refer to d3Zoom docs)
-  let d3Zoom: any = d3
-    .zoom()
-    .filter(() => !get(nodeSelected))
-    .scaleExtent([0.4, 2])
-    .on('zoom', handleZoom);
-
-  return d3Zoom;
-
-  // function to handle zoom events - arguments: d3ZoomEvent
-  function handleZoom(this: any, e: any): void {
-    if (!get(movementStore)) return;
-
-    //add a store that contains the current value of the d3-zoom's scale to be used in onMouseMove function
-    d3Scale.set(e.transform.k);
-    // should not run d3.select below if backgroundStore is false
-    if (get(backgroundStore)) {
-      d3.select(`#background-${canvasId}`)
-        .attr('x', e.transform.x)
-        .attr('y', e.transform.y)
-        .attr('width', gridSize * e.transform.k)
-        .attr('height', gridSize * e.transform.k)
-        .selectAll('#dot')
-        .attr('x', (gridSize * e.transform.k) / 2 - dotSize / 2)
-        .attr('y', (gridSize * e.transform.k) / 2 - dotSize / 2)
-        .attr('opacity', Math.min(e.transform.k, 1));
-    }
-    // transform 'g' SVG elements (edge, edge text, edge anchor)
-    d3.select(`.Edges-${canvasId} g`).attr('transform', e.transform);
-    // transform div elements (nodes)
-    let transform = d3.zoomTransform(this);
-    // selects and transforms all node divs from class 'Node' and performs transformation
-    d3.select(`.Node-${canvasId}`)
-      .style(
-        'transform',
-        'translate(' +
-          transform.x +
-          'px,' +
-          transform.y +
-          'px) scale(' +
-          transform.k +
-          ')'
-      )
-      .style('transform-origin', '0 0');
-  }
-}
diff --git a/frontend/src/lib/components/graph/svelvet/docs/CHANGELOG.md b/frontend/src/lib/components/graph/svelvet/docs/CHANGELOG.md
deleted file mode 100644
index 43d5b6b5f8..0000000000
--- a/frontend/src/lib/components/graph/svelvet/docs/CHANGELOG.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# CHANGELOG
-
-This article documents the changes from Svelvet5 to Svelvet6. It is for internal use.
-
-## custom-nodes
-
-https://www.svelvet.io/docs/custom-nodes/
-
-Anchor points no longer display on nodes in isolation. This is because anchor points are no longer tied to the node object.
-
-<img src="./images/custom-nodes-before.png" width="150" height="150">
-<img src="./images/custom-nodes-after.png" width="150" height="150">
-
-## custom-edges
-
-https://www.svelvet.io/docs/custom-edges/
-
-Edges now use adaptive anchors by default. Previously, source/target anchors were placed on the top/bottom of the node by default. It looks nice in the specific causes when target nodes are located below source nodes, but in the general case there will be intersecting edges.
-
-<img src="./images/custom-edges-before.png" width="150" height="150">
-<img src="./images/custom-edges-after.png" width="150" height="150">
-
-## panning and zooming
-
-https://www.svelvet.io/docs/pan-and-zoom/
-
-Panning and zooming is functional. Removed option to stop panning, lock nodes due to store pollution. This is simple to add back if it is a community requested feature.
-
-TODO: need to update this text in docs:
-
-```
-play around with the flow diagram below! If you wish to stop panning, set the movement prop to false. If you wish to stop node dragging, pass in the locked prop.
-```
-
-## usage with typescript
-
-https://www.svelvet.io/docs/typescript/
-
-Type names changed from Node, Edge ,to UserNodeType, UserEdgeType. The main reason for this is:
-
-- The internal state of Svelvet is stored in objects Node, Edge which are different from the specifications passed in by users (hereafter referred to as UserNode, UserEdge). For example, UserNodes have "sourcePosition" and "targetPosition" parameters. However, the internal node project does not have "sourcePosition" and "targetPosition"; instead that functionality has been abstracted to a separate Anchor class. This promotes greater code modularity.
-
-## CSS-Background
-
-https://www.svelvet.io/docs/CSS-Background/
-
-<img src="./images/css-background-before.png" width="150" height="150">
-<img src="./images/css-background-after.png" width="150" height="150">
-
-No visual changes. Moved background color out of store in order to minimize store pollution. This means that background color will not be serialized using the import-export-store feature. We talk more about this later in import-export-store section.
-
-## node-grouping
-
-https://www.svelvet.io/docs/node-grouping/
-
-No change in functionality.
-
-## snap-to-grid
-
-https://www.svelvet.io/docs/snap-to-grid/
-http://localhost:3000/compatability-8-snap-to-grid/
-
-No change in functionality
-
-## html-docs
-
-https://www.svelvet.io/docs/snap-to-grid/
-http://localhost:3000/compatability-8-snap-to-grid/
-
-<img src="./images/html-docs-before.png" width="150" height="150">
-<img src="./images/html-docs-after.png" width="150" height="150">
-
-no change in functionality
-
-## node-create
-
-https://www.svelvet.io/docs/Interactive-Nodes/
-http://localhost:3000/compatibility-10-node-create/
-
-<img src="./images/node-create-before.png" width="150" height="150">
-<img src="./images/node-create-after.png" width="150" height="150">
-
-- Previously, the new node inherits from the old node. Now, the new node is created with default parameters. Note that we have functionality to edit nodes.
-- edge creation works the same as before (not shown)
-- there are now 4 potential anchor points, rather than one source / on target anchor point.
-
-## custom-svelte-components
-
-https://www.svelvet.io/docs/Custom-Svelte/
-http://localhost:3000/compatibility-11-custom-svelte-components/
-
-<img src="./images/custom-svelte-components-before.png" width="150" height="150">
-<img src="./images/custom-svelte-components-after.png" width="150" height="150">
-
-Same functionality as before. The reason why it looks different is because I created my own dummy Svelte component to test.
-
-## Minimap
-
-http://localhost:3000/compatibility-12-minimap/
-https://www.svelvet.io/docs/Minimap/
-
-Same functionality as before. It looks like there is a big with HTML feature (unrelated to minimap)
-
-<img src="./images/minimap-before.png" width="150" height="150">
-<img src="./images/minimap-after.png" width="150" height="150">
-
-## Initial zoom and location
-
-Same functionality as Svelvet5. It appears the center of the canvas is 0,0
-
-## node classes
-
-<img src="./images/node-classes-before.png" width="150" height="150">
-<img src="./images/node-classes-after.png" width="150" height="150">
-
-You need to put !important in the CSS
-
-## ImportDiagrams
-
-https://www.svelvet.io/docs/importDiagrams/
-http://localhost:3000/featureImportExport/
-
-Feature works as expected. Note that previous version of Svelvet did not serialize callbacks (there is no general way to do this since callbacks can involve closures). We do not do serialize callbacks in Svelvet6; this includes anchors which are reset to adaptive upon serialization.
-
-As before, any canvas-wide parameters (such as nodeCreate, backgroundColor, etc.) will not be serialized.
-
-This feature is fragile since there is no guarantee that it will work with new features involving nodes and edges. In order to future-proof this feature, it would be best to specify that import/export of diagrams only serializes certain parameters.
-
-## Diagram Boundary
-
-http://localhost:3000/compatibility-15-diagramBoundary/
-https://www.svelvet.io/docs/boundary/
-
-Feature works as expected
-
-## Iteractive Editable nodes
-
-http://localhost:3000/compatibility-16-nodeEdit/
-https://www.svelvet.io/docs/editNodes/
-
-Feature works as expected. NodeEdit is now active by default. This is to reduce store pollution. In addition, node edit chaning width/height of nodes has been removed because this functionality is duplicated by resizableNodes
-
-## Deletable nodes
-
-This feature has been removed to reduce feature bloat. Its functionality is duplicated by Interactive Editable nodes feature.
diff --git a/frontend/src/lib/components/graph/svelvet/docs/DESIGN_PATTERNS.md b/frontend/src/lib/components/graph/svelvet/docs/DESIGN_PATTERNS.md
deleted file mode 100644
index c7d266125f..0000000000
--- a/frontend/src/lib/components/graph/svelvet/docs/DESIGN_PATTERNS.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# Design Patterns
-
-Svelvet was originally written as a monolith. This increased development speed but made the code fragile. Teams struggled to implement simple features such as deleting nodes and resizing nodes. One major goal of Svelvet6 was to re-design Svelvet with more robust design patterns. This document serves as an opinionated guide towards how Svelvet should be structured.
-
-## Each Svelvet feature should have its own folder
-
-Svelvet has a lot of features that interact with each other. In order to encourage modularity, each feature should be given its own folder. For example, code related to the "resizableNodes" feature can be found in the folder `$lib/resizableNodes`.
-
-## Svelvet should follow an MVC Architecture
-
-While Svelvet is a frontend libray, it has components that interact in a complex way. As such, code should adhere to an MVC architecture to increase modularity. One useful way to think about MVC is drawing an analogy to frontend/backend/database. The frontend is the "view" of MVC, the backend is the "controller" of MVC, and the database is the "model" of MVC. To that end, within each feature folder there should be four folders: models, views, controllers, types.
-
-- models: holds code related to the internal state of Svelvet
-- controllers: holds code used to interact with the Svelvet models. Ideally, all interaction with Svelvet models/stores should take place through controllers.
-- views: holds code used to visualize the Svelvet state. Ideally, views should not modify models directly.
-- types: holds types/interfaces for Typescript. This is unrelated to MVC.
-
-More comments: Explicitly labeling folders as model/view/controller increases verbosity and most projects do not do this. We feel that this increased verbosity is worth the tradeoff of reminding developers they should be following establshed design patterns when coding. If you are considering removing explicit model/view/controller folders, consider that Svelvet is an OSP where developers may have little to no prior coding experience; increased verbosity may be helpful in guiding developers towards established design principles.
-
-## Svelvet's internal state should be an object-relational data structure
-
-Too Long Didn't Read: The main takeaway can be summed up as: make the Svelvet store look more like PostgreSQL and less like mongoDB.
-
-### A longer explanation
-
-The store holds Svelvet's internal state. We urge future developers to structure the store as a relational object rather than an unstructured object. To give an analogy, if Svelvet was a full-stack app with a backend and database, you should use a postgreSQL instead of mongoDB to store the internal state of Svelvet because nodes/edges are inherently relational. We give an example of a bad design pattern and a good design pattern below.
-
-Suppose you want to implement a "resizableNodes" feature, where users can resize nodes by dragging a node corner. One (bad) way to do this is by could do this by hacking in an extra div on the Node component representing a draggable control point, then hacking in a "resizeNode" method on the Node object so that when the control point is dragged the node is resized. While it may be easier to throw everything on an unstructured Node object, this is bad for modularity. As more and more features get added in, the Node object becomes bloated, difficult to read, and difficult to debug.
-
-The better way to do this is to create a brand new resizableNodes model. This model should hold `nodeId` (a foreign key to a node object), `positionX` (its x-position), and `positionY` (its y-position). This model should also have a method `setPosition` that sets its x,y position, but also sets the width/height of the associated node defined by `nodeId`. Note the similarity of the process described above to adding extra data to a SQL database; a big advantage of SQL is that it is easy to add new relational data by creating a brand new table and linking with a foreign key.
-
-By creating new objects/tables whenever adding new features, you make the code more readable, more modular, and more testable.
-
-### Foreign keys
-
-One question you may come up with when adding new tables is how to structure foreign keys. In our resizableNodes example, we placed a foreign key `nodeId` on our ResizableNode object/table. Alternatively, we could have placed a foreign key `ResizableNodeId` on our Node object/table. How do we choose between these two alternatives (or maybe we could even do two foreign keys)?
-
-You can make the decision on foreign keys based on your component heirarchy. A Node can exist without functionality to resize itself, but a ResizableNode should not exist if its parent Node does not exist. Therefore, you should place a `nodeId` foreign key on ResizableNode.
-
-This decision has the following advantages:
-
-- Increased readability: When developers are reading the Node class definition, they are not overwhelmed by all the different Svelvet features. On the other hand, when developers are reading the ResizableNode class definition, they should realize that ResizableNodes are children of Nodes.
-- Increased modularity: You can remove a ResizableNode without disturbing core Node functionality.
-- Easy deletes: Previous teams struggled with implementing delete functionality. When you think about a SQL database, deleting rows is very simple. You simply delete the row, then specify cascade to delete other rows that reference the primary key of the row you deleted. Keeping a disciplined approach when structuring foreign keys makes the entity hierarchies clear, and makes operations such as delete easy to implement.
diff --git a/frontend/src/lib/components/graph/svelvet/docs/DOCUMENTATION.md b/frontend/src/lib/components/graph/svelvet/docs/DOCUMENTATION.md
deleted file mode 100644
index 0a30d726e3..0000000000
--- a/frontend/src/lib/components/graph/svelvet/docs/DOCUMENTATION.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Documentation
-
-- Documentation should be written assuming the developer working on Svelvet has coding experience equivalent to six weeks of bootcamp.
-- If you write documents in tsDoc format, you can use TypeDoc to generate documentation automatically. For instructions on how to use TypeDoc, see Tutorials.md
-- Write READMEs for every feature so that future teams can understand how they work. Put your email down if you want to be a resource for future teams.
diff --git a/frontend/src/lib/components/graph/svelvet/docs/README.md b/frontend/src/lib/components/graph/svelvet/docs/README.md
deleted file mode 100644
index 71f6258cab..0000000000
--- a/frontend/src/lib/components/graph/svelvet/docs/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# README
-
-This README provides suggestions to developers working on Svelvet.
-
-## What is Svelvet?
-
-Svelvet is a frontend library that allows users to programmatically create graph diagrams. Graphs are composed of nodes and edges; each edge connects two nodes. There are two main challenges when working with Svelvet: (1) nodes and edges interact in complex ways, making new features difficult to implement without interfering with old features, and (2) Svelvet has an active userbase, making breaking changes undesirable.
-
-## Things to think about as a Svelvet developer
-
-- Svelvet teams have 3.5 weeks to iterate on the project, less if you consider time spent on marketing/deployment. It is important for code to be readable, otherwise future teams will be unable to understand the codebase within a reasonable timeframe.
-- It is important to write documentation that is easy understand. Write comments/documentation assuming that developers have ~6 weeks of prior bootcamp experience.
-- Writing non-modular code with zero tests and zero documentation increases technical debt and puts future teams in a bad place. Accumulated technical debt can kill projects.
-- Svelvet has an active userbase. When possible, breaking changes should be avoided. However, if a breaking change must occur, it is better that it happen sooner rather than later.
-
-## Suggestions
-
-- Write modular code, separated by feature. For suggestions, see `./DESIGN_PATTERNS.md`
-
-- Write tests. Svelvet components interact with each other in complex ways, making it difficult to predict whether changes will break Svelvet without tests.
-
-- Writing tests and documentation is good for your resume. A long list of features by itself makes for poor resume; mentioning testing, documentation, and specific technologies used to implement specific features make for a stronger resume.
-
-- Don't leave typescript warnings unaddressed. This makes it so much easier to debug.
-
-## Where to start
-
-Here is one way to start understanding the Svelvet codebase
-
-(1) Read the Node class (`$lib/nodes/models/Node.ts`)
-(2) Create a new branch, delete all features except for nodes, containers, and store, then try to get Svelvet to running only rendering nodes to the screen. You can test Svelvet using routes such as `testingplayground` at `http://localhost:3000/testingplayground`.
-(3) Try to refactor Node.ts. You may notice that Node.ts has 16 fields, when really only six of them are important (id, canvasId, positionX, positionY, widthX, widthY). Create a new table `NodeAttributes` that links to Node via foreign key, move all attributes (bgColor, textColor, etc) to this new table and get Node rendering again.
-(4) After understanding how Node works, add back the "edges" folder. Try to get Svelvet working rendering only nodes and edges to the screen.
-(5) Node / Edge / Anchor form the core tables of Svelvet. All other feature build on top of these core tables.
diff --git a/frontend/src/lib/components/graph/svelvet/docs/TODO.md b/frontend/src/lib/components/graph/svelvet/docs/TODO.md
deleted file mode 100644
index 328a4b6ff9..0000000000
--- a/frontend/src/lib/components/graph/svelvet/docs/TODO.md
+++ /dev/null
@@ -1,14 +0,0 @@
-## custom node functionality should be refactored into its own table.''
-
-## tay10alan60@gmail.com - minimap, d3, node deletion, interactiveNodes
-
-## dillan - customSvelete components, deletable nodes, node classes
-
-## Minimap 75 boundless, 200 bounded
-
-## New team:
-
-- split up the website and the svelvet npm package
-- continue store refactoring
-- refactor store dispatch into flux architecture
-- testing - 1 full iteration
diff --git a/frontend/src/lib/components/graph/svelvet/docs/Tutorials.md b/frontend/src/lib/components/graph/svelvet/docs/Tutorials.md
deleted file mode 100644
index 1f7c029d27..0000000000
--- a/frontend/src/lib/components/graph/svelvet/docs/Tutorials.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Tutorials
-
-This file contains instructions on how to do useful things such as generating developer documentation, publishing to npm, etc.
-
-## TypeDoc
-
-You may notice TSDoc comments throughout our code. These TSDoc comments can be converted into documentation using TypeDoc:
-
-```
-npx typedoc --entryPointStrategy expand src/lib
-```
-
-This command will create documentation in root folder `./docs`.
-
-## Publishing to npm
-
-- create an account on npm.js. You can skip this step if you already have an account
-- log in with `$ npm login`
-- Within the `src/lib` directory, type `npm version patch` to increment version number. Or if you want a new name, you can modify `src/lib/package.json` directly
-- In the base directory, type `npm run package`. This will use svelte-kit's package feature to create an npm package in `./package`.
-- Within the `./package` directory, type `npm publish` to publish to npm. Note that you cannot "overwrite" previous publishes, you must increment the version number
-
-## Testing npm package
-
-- install locally with `npm install svelvet-lime@latest -f`, where svelvet-lime is replaced with whatever you named your package. Note that if you have a previously installed version of svelvet, you must force a re-install otherwise you will be using an outdated npm package.
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/css-background-after.png b/frontend/src/lib/components/graph/svelvet/docs/images/css-background-after.png
deleted file mode 100644
index 68c40c5881..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/css-background-after.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/css-background-before.png b/frontend/src/lib/components/graph/svelvet/docs/images/css-background-before.png
deleted file mode 100644
index c7f37de68f..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/css-background-before.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/custom-edges-after.png b/frontend/src/lib/components/graph/svelvet/docs/images/custom-edges-after.png
deleted file mode 100644
index b8267dce7a..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/custom-edges-after.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/custom-edges-before.png b/frontend/src/lib/components/graph/svelvet/docs/images/custom-edges-before.png
deleted file mode 100644
index a7466daa35..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/custom-edges-before.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/custom-nodes-after.png b/frontend/src/lib/components/graph/svelvet/docs/images/custom-nodes-after.png
deleted file mode 100644
index cc7a80074d..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/custom-nodes-after.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/custom-nodes-before.png b/frontend/src/lib/components/graph/svelvet/docs/images/custom-nodes-before.png
deleted file mode 100644
index c6e37ae783..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/custom-nodes-before.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/custom-svelte-components-after.png b/frontend/src/lib/components/graph/svelvet/docs/images/custom-svelte-components-after.png
deleted file mode 100644
index c81f5014f0..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/custom-svelte-components-after.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/custom-svelte-components-before.png b/frontend/src/lib/components/graph/svelvet/docs/images/custom-svelte-components-before.png
deleted file mode 100644
index f0026b36a8..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/custom-svelte-components-before.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/html-docs-after.png b/frontend/src/lib/components/graph/svelvet/docs/images/html-docs-after.png
deleted file mode 100644
index 37380b30ee..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/html-docs-after.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/html-docs-before.png b/frontend/src/lib/components/graph/svelvet/docs/images/html-docs-before.png
deleted file mode 100644
index bafc046b64..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/html-docs-before.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/minimap-after.png b/frontend/src/lib/components/graph/svelvet/docs/images/minimap-after.png
deleted file mode 100644
index e0dda0b5d5..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/minimap-after.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/minimap-before.png b/frontend/src/lib/components/graph/svelvet/docs/images/minimap-before.png
deleted file mode 100644
index 00e5322bdd..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/minimap-before.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/node-classes-after.png b/frontend/src/lib/components/graph/svelvet/docs/images/node-classes-after.png
deleted file mode 100644
index b303012849..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/node-classes-after.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/node-classes-before.png b/frontend/src/lib/components/graph/svelvet/docs/images/node-classes-before.png
deleted file mode 100644
index 606695e2d6..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/node-classes-before.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/node-create-after.png b/frontend/src/lib/components/graph/svelvet/docs/images/node-create-after.png
deleted file mode 100644
index 052f1d6461..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/node-create-after.png and /dev/null differ
diff --git a/frontend/src/lib/components/graph/svelvet/docs/images/node-create-before.png b/frontend/src/lib/components/graph/svelvet/docs/images/node-create-before.png
deleted file mode 100644
index dcff6fe63b..0000000000
Binary files a/frontend/src/lib/components/graph/svelvet/docs/images/node-create-before.png and /dev/null differ
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index e1f76c4834..6e8739f706 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -57,12 +57,12 @@
 		{/each}
 	</div>
 	<div>
-		<div class="mb-6 md:mb-10">
+		<div class="space-y-0.5 mb-6 md:mb-10">
 			{#each secondaryMenuLinks as menuLink (menuLink.href)}
 				<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
 			{/each}
 		</div>
-		<div>
+		<div class="space-y-0.5">
 			{#each thirdMenuLinks as menuLink (menuLink.href)}
 				<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
 			{/each}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 4bbf5c87f0..6e0fc22dde 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -130,7 +130,6 @@ export function clickOutside(node: Node): { destroy(): void } {
 	}
 }
 
-
 export interface DropdownItem {
 	// If a DropdownItem has an action, it will be declared as a button
 	// If a DropdownItem has no action and an href, it will be declared as a link
@@ -297,11 +296,14 @@ export async function setQuery(url: URL, key: string, value: string): Promise<vo
 }
 
 let debounced: NodeJS.Timeout | undefined = undefined
-export function setQueryWithoutLoad(url: URL, args: { key: string, value: string | null | undefined }[], bounceTime?: number): void {
+export function setQueryWithoutLoad(
+	url: URL,
+	args: { key: string; value: string | null | undefined }[],
+	bounceTime?: number
+): void {
 	debounced && clearTimeout(debounced)
 	debounced = setTimeout(() => {
 		const nurl = new URL(url.toString())
-		console.log(url.toString())
 		for (const { key, value } of args) {
 			if (value) {
 				nurl.searchParams.set(key, value)
diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
index 416e8ed6d5..c61b017ae9 100644
--- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
@@ -95,15 +95,21 @@
 	<div class="relative mb-20">
 		<TableCustom>
 			<tr slot="header-row">
+				<th class="!px-0" />
 				<th>Name</th>
-				<th>Usage</th>
+				<th class="!text-center">Scripts</th>
+				<th class="!text-center">Flows</th>
+				<th class="!text-center">Apps</th>
+				<th class="!text-center">Schedules</th>
+				<th class="!text-center">Variables</th>
+				<th class="!text-center">Resources</th>
 				<th>Participants</th>
 			</tr>
 			<tbody slot="body">
 				{#if folders === undefined}
-					{#each new Array(6) as _}
+					{#each new Array(4) as _}
 						<tr>
-							<td colspan="4">
+							<td colspan="9">
 								<Skeleton layout={[[2]]} />
 							</td>
 						</tr>
@@ -117,6 +123,9 @@
 
 					{#each folders as { name, extra_perms, owners, canWrite }}
 						<tr>
+							<td class="!px-0 text-center">
+								<SharedBadge {canWrite} extraPerms={extra_perms} />
+							</td>
 							<td>
 								<a
 									href="#{name}"
@@ -126,11 +135,8 @@
 									}}
 									>{name}
 								</a>
-								<div>
-									<SharedBadge {canWrite} extraPerms={extra_perms} />
-								</div>
 							</td>
-							<td><FolderUsageInfo {name} /></td>
+							<FolderUsageInfo {name} tabular />
 
 							<td><FolderInfo members={computeMembers(owners, extra_perms)} /></td>
 							<td>
@@ -170,6 +176,3 @@
 		</TableCustom>
 	</div>
 </CenteredPage>
-
-<style>
-</style>
diff --git a/frontend/src/routes/(root)/(logged)/groups/+page.svelte b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
index fd10610a27..3c1debb2ee 100644
--- a/frontend/src/routes/(root)/(logged)/groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
@@ -81,6 +81,7 @@
 	<div class="relative mb-20">
 		<TableCustom>
 			<tr slot="header-row">
+				<th class="!px-0" />
 				<th>Name</th>
 				<th>Summary</th>
 				<th>Members</th>
@@ -88,14 +89,19 @@
 			</tr>
 			<tbody slot="body">
 				{#if groups === undefined}
-					<tr>
-						<td colspan="4">
-							<Skeleton layout={[[2]]} />
-						</td>
-					</tr>
+					{#each new Array(4) as _}
+						<tr>
+							<td colspan="5">
+								<Skeleton layout={[[2]]} />
+							</td>
+						</tr>
+					{/each}
 				{:else}
 					{#each groups as { name, summary, extra_perms, canWrite }}
 						<tr>
+							<td class="!px-0 text-center">
+								<SharedBadge {canWrite} extraPerms={extra_perms} />
+							</td>
 							<td>
 								<a
 									href="#{name}"
@@ -105,9 +111,6 @@
 									}}
 									>{name}
 								</a>
-								<div>
-									<SharedBadge {canWrite} extraPerms={extra_perms} />
-								</div>
 							</td>
 							<td>{summary ?? ''}</td>
 							<td><GroupInfo {name} /></td>
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 18b1f6a4c0..1f9d7dfbfe 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -372,8 +372,8 @@
 			{:else}
 				<TableCustom>
 					<tr slot="header-row">
-						<th>path</th>
 						<th />
+						<th>path</th>
 						<th>resource type</th>
 						<th>description</th>
 						<th />
@@ -383,6 +383,9 @@
 						{#if filteredItems}
 							{#each filteredItems as { path, description, resource_type, extra_perms, canWrite, is_oauth, is_linked, account, refresh_error, is_expired, marked, is_refreshed }}
 								<tr>
+									<td class="!px-0 text-center">
+										<SharedBadge {canWrite} extraPerms={extra_perms} />
+									</td>
 									<td>
 										<a
 											class="break-all"
@@ -391,7 +394,6 @@
 											>{#if marked}{@html marked}{:else}{path}{/if}</a
 										>
 									</td>
-									<td><SharedBadge {canWrite} extraPerms={extra_perms} /></td>
 									<td class="px-2"
 										><a
 											href="#{name}"
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index c0db346ad4..54b75f7f6a 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -63,14 +63,14 @@
 
 	let filterTimeout: NodeJS.Timeout | undefined = undefined
 	function debounceSyncer() {
-		filterTimeout && clearTimeout(filterTimeout)
-		filterTimeout = setTimeout(() => {
-			loadJobs()
-		}, 1000)
+		if (resultError == '' && argError == '') {
+			filterTimeout && clearTimeout(filterTimeout)
+			filterTimeout = setTimeout(() => {
+				loadJobs()
+			}, 2000)
+		}
 	}
 
-	$: (true || argFilter || resultFilter) && debounceSyncer()
-
 	async function fetchJobs(
 		startedBefore: string | undefined,
 		startedAfter: string | undefined
@@ -159,7 +159,6 @@
 	}
 
 	async function syncTsWithURL(minTs?: string, maxTs?: string) {
-		console.log(minTs, maxTs)
 		setQueryWithoutLoad($page.url, [
 			{ key: 'min_ts', value: minTs },
 			{ key: 'max_ts', value: maxTs }
@@ -285,14 +284,22 @@
 					><Slider
 						text="Filter by args {argFilter ? '(set)' : ''}"
 						tooltip={'Filter by a json being a subset of the args. Try \'{"foo": "bar"}\''}
-						><JsonEditor bind:error={argError} bind:code={argFilter} /></Slider
+						><JsonEditor
+							on:change={debounceSyncer}
+							bind:error={argError}
+							bind:code={argFilter}
+						/></Slider
 					></div
 				>
 				<div
 					><Slider
 						text="Filter by result {resultFilter ? '(set)' : ''}"
 						tooltip={'Filter by a json being a subset of the result. Try \'{"foo": "bar"}\''}
-						><JsonEditor bind:error={resultError} bind:code={resultFilter} /></Slider
+						><JsonEditor
+							on:change={debounceSyncer}
+							bind:error={resultError}
+							bind:code={resultFilter}
+						/></Slider
 					></div
 				>
 			</div>
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index da0ebe0efa..ed08ce03d9 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -77,6 +77,7 @@
 		{:else}
 			<TableCustom>
 				<tr slot="header-row">
+					<th class="!px-0" />
 					<th>Schedule</th>
 					<th>Script/Flow</th>
 					<th>schedule</th>
@@ -89,13 +90,17 @@
 				<tbody slot="body">
 					{#each schedules as { path, error, edited_by, edited_at, schedule, offset_, enabled, script_path, is_flow, extra_perms, canWrite }}
 						<tr class={enabled ? '' : 'bg-gray-50'}>
-							<td class="max-w-sm"
-								><button
-									class="break-words text-left text-sm text-blue-600 font-normal"
-									on:click={() => scheduleEditor?.openEdit(path, is_flow)}>{path}</button
-								>
+							<td class="!px-0 text-center">
 								<SharedBadge {canWrite} extraPerms={extra_perms} />
 							</td>
+							<td class="max-w-sm">
+								<button
+									class="break-words text-left text-sm text-blue-600 font-normal"
+									on:click={() => scheduleEditor?.openEdit(path, is_flow)}
+								>
+									{path}
+								</button>
+							</td>
 							<td
 								><div class="inline-flex flex-row gap-x-2 align-middle w-full"
 									><div class="grow"
@@ -162,7 +167,6 @@
 									</Button>
 									<Dropdown
 										placement="bottom-end"
-										btnClasses="!text-gray-700"
 										dropdownItems={[
 											{
 												displayName: enabled ? 'Disable' : 'Enable',
@@ -206,9 +210,7 @@
 												}
 											}
 										]}
-									>
-										<MoreVertical size={20} />
-									</Dropdown>
+									/>
 								</div>
 							</td>
 						</tr>
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index 2c025fecc0..02ac25e467 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -26,7 +26,7 @@
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import { Alert, Badge, Skeleton } from '$lib/components/common'
 	import Popover from '$lib/components/Popover.svelte'
-	import { Building, DollarSign } from 'lucide-svelte'
+	import { Building, DollarSign, MoreVertical } from 'lucide-svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
@@ -155,25 +155,28 @@
 			{:else}
 				<TableCustom>
 					<tr slot="header-row">
-						<th>path</th>
-
-						<th>value</th>
-						<th>description</th>
+						<th class="!px-0" />
+						<th>Path</th>
+						<th>Value</th>
+						<th>Description</th>
 						<th />
 						<th />
 					</tr>
 					<tbody slot="body">
 						{#each filteredItems as { path, value, is_secret, description, extra_perms, canWrite, account, is_refreshed, is_expired, refresh_error, is_linked, marked }}
 							<tr>
-								<td
-									><a
+								<td class="!px-0 text-center">
+									<SharedBadge {canWrite} extraPerms={extra_perms} />
+								</td>
+								<td>
+									<a
 										class="break-all"
 										id="edit-{path}"
 										on:click={() => variableEditor.editVariable(path)}
 										href="#{path}"
-										>{#if marked}{@html marked}{:else}{path}{/if}</a
 									>
-									<div><SharedBadge {canWrite} extraPerms={extra_perms} /></div>
+										{#if marked}{@html marked}{:else}{path}{/if}
+									</a>
 								</td>
 								<td>
 									<span class="inline-flex flex-row">
@@ -275,8 +278,8 @@
 										{/if}
 									</div>
 								</td>
-								<td
-									><Dropdown
+								<td>
+									<Dropdown
 										placement="bottom-end"
 										dropdownItems={[
 											{
@@ -327,8 +330,8 @@
 												  ]
 												: [])
 										]}
-									/></td
-								>
+									/>
+								</td>
 							</tr>
 						{/each}
 					</tbody>
diff --git a/frontend/src/types.d.ts b/frontend/src/types.d.ts
index 1401dbbccc..c4007380ee 100644
--- a/frontend/src/types.d.ts
+++ b/frontend/src/types.d.ts
@@ -1,64 +1,3 @@
 import type { AppComponent } from '$lib/components/apps/types'
 
 declare module 'simple-svelte-autocomplete'
-
-declare module '@windmill-labs/svelte-grid' {
-	import type { SvelteComponentTyped } from 'svelte'
-
-	export interface Size {
-		w: number
-		h: number
-	}
-
-	export interface Positon {
-		x: number
-		y: number
-	}
-
-	interface ItemLayout extends Size, Positon {
-		fixed?: boolean
-		resizable?: boolean
-		draggable?: boolean
-		customDragger?: boolean
-		customResizer?: boolean
-		min?: Size
-		max?: Size
-	}
-
-	export type Item<T> = T & { [width: number]: ItemLayout }
-	export type FilledItem<T> = T & { [width: number]: Required<ItemLayout> }
-
-	export interface Props<T> {
-		fillSpace?: boolean
-		items: FilledItem<T>[]
-		rowHeight: number
-		cols: [number, number][]
-		gap?: [number, number]
-		fastStart?: boolean
-		throttleUpdate?: number
-		throttleResize?: number
-
-		scroller?: undefined
-		sensor?: number
-	}
-
-	export interface Slots<T> {
-		default: { item: ItemLayout; dataItem: Item<T> & { data: AppComponent } }
-	}
-
-	export default class Grid<T = {}> extends SvelteComponentTyped<Props<T>, {}, Slots<T>> { }
-}
-
-declare module '@windmill-labs/svelte-grid/build/helper/index.mjs' {
-	import { ItemLayout } from '@windmill-labs/svelte-grid'
-
-	const x: {
-		normalize(items: any[], col: any): unknown[]
-		adjust(items: any[], col: any): Item<unknown>[]
-		findSpace(item: any, items: any, cols: any): unknown[]
-
-		item<T>(obj: ItemLayout): Required<ItemLayout>
-	}
-
-	export default x
-}
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index a6b97ae108..ea9d9af8ad 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -498,14 +498,18 @@ const config = {
 						textTransform: 'capitalize'
 					},
 					'& td': {
-						paddingRight: theme('spacing.2'),
+						paddingLeft: theme('spacing.1'),
+						paddingRight: theme('spacing.1'),
 						paddingTop: theme('spacing.2'),
 						paddingBottom: theme('spacing.2'),
 						fontSize: theme('fontSize.sm'),
 						color: theme('colors.gray.700')
 					},
 					'& tbody > :not([hidden]) ~ :not([hidden])': {
-						borderTop: `1px solid ${theme('colors.gray.200')}`
+						borderTop: `1px solid ${theme('colors.gray.200')}`,
+					},
+					'& tbody > tr:hover': {
+						backgroundColor: theme('colors.gray.50')
 					}
 				},
 				'.commit-hash': {