diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 8fb5de5450..5d85421028 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../types'
-	import { allItems } from '../utils'
+	import { allItems, allItemsWithParent } from '../utils'
 	import PanelSection from './settingsPanel/common/PanelSection.svelte'
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
 	import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
@@ -10,9 +10,9 @@
 	const { selectedComponent, app } = getContext<AppEditorContext>('AppEditorContext')
 </script>
 
-{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+{#each allItemsWithParent($app.grid, $app.subgrids) as [gridItem, parent] (gridItem.data.id)}
 	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel bind:component={gridItem.data} />
+		<ComponentPanel {parent} bind:component={gridItem.data} />
 	{:else if gridItem.data.type === 'tablecomponent'}
 		<TablePanel bind:component={gridItem.data} />
 	{/if}
diff --git a/frontend/src/lib/components/apps/editor/TablePanel.svelte b/frontend/src/lib/components/apps/editor/TablePanel.svelte
index 7663f55fc3..6ef87d7760 100644
--- a/frontend/src/lib/components/apps/editor/TablePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/TablePanel.svelte
@@ -11,6 +11,8 @@
 {#each component.actionButtons as actionButton (actionButton.id)}
 	{#if actionButton.id === $selectedComponent}
 		<ComponentPanel
+			parent={undefined}
+			noGrid
 			rowColumns
 			bind:component={actionButton}
 			onDelete={() => {
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index f5ba678c81..100883b18a 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -1,6 +1,6 @@
 import { getNextId } from '$lib/components/flows/flowStateUtils'
 import type { App, FocusedGrid, GridItem } from '../types'
-import { getRecommendedDimensionsByComponent, type AppComponent } from './component'
+import { Component, getRecommendedDimensionsByComponent, type AppComponent } from './component'
 import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
 import { gridColumns } from '../gridUtils'
 
@@ -117,32 +117,48 @@ 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
+export function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]] {
+	const subgrids: string[] = []
+	let components: string[] = [component.id]
+	if (app.subgrids && component.numberOfSubgrids) {
+		for (let i = 0; i < component.numberOfSubgrids; i++) {
+			const subgrid = app.subgrids[`${component.id}-${i}`]
+			if (subgrid) {
+				for (const item of subgrid) {
+					let [recSubgrids, recComponents] = getAllSubgridsAndComponentIds(app, item.data)
+					subgrids.push(...recSubgrids)
+					components.push(...recComponents)
 				}
 			}
 		}
 	}
+	return [subgrids, components]
+}
+
+export function deleteGridItem(app: App, component: AppComponent, parent: string | undefined): string[] {
+	let [subgrids, components] = getAllSubgridsAndComponentIds(app, component)
+	if (app.subgrids) {
+		subgrids.forEach((id) => {
+			delete app.subgrids![id]
+		})
+	}
+	if (!parent) {
+		let index = app.grid.findIndex((x) => x.id == component.id)
+		if (index > -1) {
+			app.grid.splice(index, 1)
+		}
+	} else {
+		let grid = app.subgrids![parent]
+		let index = grid.findIndex((x) => x.id == component.id)
+		if (index > -1) {
+			grid.splice(index, 1)
+		}
+	}
+
+	return components
+
 }
 
 export function duplicateGridItem(
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 2a5b381ade..623885de87 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -22,10 +22,13 @@
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 	import GridTab from './GridTab.svelte'
 	import { duplicateGridItem } from '../appUtils'
+	import { deleteGridItem } from '../appUtils'
 
-	export let component: AppComponent | undefined
+	export let component: AppComponent
 	export let rowColumns = false
 	export let onDelete: (() => void) | undefined = undefined
+	export let parent: string | undefined
+	export let noGrid = false
 
 	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
 		getContext<AppEditorContext>('AppEditorContext')
@@ -37,17 +40,23 @@
 	}
 
 	function removeGridElement() {
-		/*
 		$selectedComponent = undefined
 		$focusedGrid = undefined
-		if (component) {
-			deleteComponent(gridItems, component, $app, $staticOutputs, $runnableComponents)
+		if (component && !noGrid) {
+			let ids = deleteGridItem($app, component, parent)
+			for (const key in ids) {
+				delete $staticOutputs[key]
+				delete $runnableComponents[key]
+			}
 		}
+
+		delete $staticOutputs[component.id]
+		delete $runnableComponents[component.id]
+		$app = $app
 		$staticOutputs = $staticOutputs
 		$runnableComponents = $runnableComponents
 
 		onDelete?.()
-		*/
 	}
 
 	$: extraLib =
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 1a47caf88d..55238c81eb 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -54,6 +54,14 @@ export function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]>
 	return [...grid, ...Object.values(subgrids).flat()]
 }
 
+export function allItemsWithParent(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): [GridItem, string | undefined][] {
+	const items: [GridItem, string | undefined][] = grid.map((item) => [item, undefined])
+	if (subgrids == undefined) {
+		return items
+	}
+	return [...items, ...Object.entries(subgrids).flatMap(([k, v]) => v.map((g) => [g, k] as [GridItem, string]))]
+}
+
 export async function loadSchema(
 	workspace: string,
 	path: string,