diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 8700c4bfad..2e2e9eff88 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -8,14 +8,13 @@
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
-
 	export let configuration: Record<string, AppInput>
 	export let subGrids: GridItem[][] | undefined = undefined
 	export let componentContainerHeight: number
 	export let tabs: string[]
 
 	export const staticOutputs: string[] = ['selectedTabIndex']
-	const { worldStore, focusedGrid, selectedComponent } =
+	const { app, worldStore, focusedGrid, selectedComponent } =
 		getContext<AppEditorContext>('AppEditorContext')
 
 	let selected: string = ''
@@ -36,6 +35,7 @@
 	}
 
 	$: selectedIndex >= 0 && handleTabSelection()
+
 	let tabHeight: number = 0
 
 	function onFocus() {
@@ -62,12 +62,10 @@
 			{/each}
 		</Tabs>
 	</div>
-	{#if subGrids && subGrids[selectedIndex]}
+	{#if $app.subgrids?.[`${id}-${selectedIndex}`]}
 		<SubGridEditor
-			parentId={id}
-			index={selectedIndex}
+			bind:subGrid={$app.subgrids[`${id}-${selectedIndex}`]}
 			{noPadding}
-			bind:subGrid={subGrids[selectedIndex]}
 			containerHeight={componentContainerHeight - tabHeight}
 			on:focus={() => {
 				$selectedComponent = id
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 675bf52d4e..4afe2f84aa 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -123,3 +123,31 @@ export function insertNewGridItem(
 
 	return id
 }
+
+export function deleteGridItem(app: App, id: string) {
+	const index = app.grid.findIndex((item) => item.id === id)
+	if (index !== -1) {
+		app.grid.splice(index, 1)
+		return
+	}
+
+	const gridItem = findGridItem(app, id)
+	const keys = Object.keys(app.subgrids ?? {})
+
+	if (app.subgrids) {
+		if (keys.includes(id)) {
+			for (let i = 0; i < gridItem?.data.numberOfSubgrids; i++) {
+				delete app.subgrids[`${id}-${i}`]
+			}
+		} else {
+			for (const key of keys) {
+				const subgrid = app.subgrids[key]
+				const index = subgrid.findIndex((item) => item.id === id)
+				if (index !== -1) {
+					subgrid.splice(index, 1)
+					return
+				}
+			}
+		}
+	}
+}
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 042a10452d..aa1df588a7 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -200,9 +200,7 @@
 			<AppRangeInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'tabscomponent'}
 			<AppTabs
-				id={component.id}
-				configuration={component.configuration}
-				tabs={component.tabs}
+				{...component}
 				bind:staticOutputs={$staticOutputs[component.id]}
 				{componentContainerHeight}
 			/>