diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 5d85421028..0c4785e17e 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -8,16 +8,29 @@
 	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent, app } = getContext<AppEditorContext>('AppEditorContext')
+	$: subgridKeys = Object.keys($app.subgrids ?? {})
 </script>
 
-{#each allItemsWithParent($app.grid, $app.subgrids) as [gridItem, parent] (gridItem.data.id)}
+{#each $app.grid as gridItem (gridItem.data.id)}
 	{#if gridItem.data.id === $selectedComponent}
-		<ComponentPanel {parent} bind:component={gridItem.data} />
+		<ComponentPanel parent={undefined} bind:component={gridItem.data} />
 	{:else if gridItem.data.type === 'tablecomponent'}
 		<TablePanel bind:component={gridItem.data} />
 	{/if}
 {/each}
 
+{#if $app.subgrids}
+	{#each subgridKeys as key (key)}
+		{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
+			{#if gridItem.data.id === $selectedComponent}
+				<ComponentPanel parent={key} bind:component={gridItem.data} />
+			{:else if gridItem.data.type === 'tablecomponent'}
+				<TablePanel bind:component={gridItem.data} />
+			{/if}
+		{/each}
+	{/each}
+{/if}
+
 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
 		<PanelSection title={`Background script inputs`}>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index 5c9728d679..904ded4a6c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -3,13 +3,15 @@
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../../types'
+	import { deleteGridItem } from '../appUtils'
 	import type { AppComponent } from '../component'
 	import PanelSection from './common/PanelSection.svelte'
 
 	export let tabs: string[]
 	export let component: AppComponent
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, staticOutputs, runnableComponents } =
+		getContext<AppEditorContext>('AppEditorContext')
 
 	function addTab() {
 		const numberOfTabs = tabs.length
@@ -24,19 +26,17 @@
 	}
 
 	function deleteSubgrid(index: number) {
-		/*
-		$focusedGrid = undefined
-		subGrids[index].forEach((x) => {
-			//deleteComponent(undefined, x.data, $app, $staticOutputs, $runnableComponents)
-		})
 		tabs.splice(index, 1)
-		subGrids.splice(index, 1)
 		tabs = tabs
-		subGrids = subGrids
-		$app.grid = $app.grid
-		$staticOutputs = $staticOutputs
-		$runnableComponents = $runnableComponents
-		*/
+		let subgrid = `${component.id}-${index}`
+		for (const item of $app!.subgrids![subgrid]) {
+			const components = deleteGridItem($app, item.data, subgrid)
+			for (const key in components) {
+				delete $staticOutputs[key]
+				delete $runnableComponents[key]
+			}
+		}
+		delete $app!.subgrids![subgrid]
 	}
 </script>