diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index cb2fea28cd..8fb5de5450 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../types'
+	import { allItems } from '../utils'
 	import PanelSection from './settingsPanel/common/PanelSection.svelte'
+	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
 	import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
-	import SettingsPanelRec from './SettingsPanelRec.svelte'
+	import TablePanel from './TablePanel.svelte'
 
 	const { selectedComponent, app } = getContext<AppEditorContext>('AppEditorContext')
 </script>
 
-<SettingsPanelRec bind:gridItems={$app.grid} />
+{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
+	{#if gridItem.data.id === $selectedComponent}
+		<ComponentPanel bind:component={gridItem.data} />
+	{:else if gridItem.data.type === 'tablecomponent'}
+		<TablePanel bind:component={gridItem.data} />
+	{/if}
+{/each}
 
 {#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
deleted file mode 100644
index 1c008db020..0000000000
--- a/frontend/src/lib/components/apps/editor/SettingsPanelList.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { GridItem } from '../types'
-
-	import SettingsPanelRec from './SettingsPanelRec.svelte'
-
-	export let subgrids: GridItem[][]
-
-	let elems = subgrids
-	$: subgrids = elems
-</script>
-
-{#if subgrids}
-	{#each elems as subGrid, i (i)}
-		<SettingsPanelRec bind:gridItems={subGrid} />
-	{/each}
-{/if}
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte b/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
deleted file mode 100644
index 29dcff7b06..0000000000
--- a/frontend/src/lib/components/apps/editor/SettingsPanelRec.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import type { AppEditorContext, GridItem } from '../types'
-
-	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
-	import SettingsPanelList from './SettingsPanelList.svelte'
-	import TablePanel from './TablePanel.svelte'
-
-	const { selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
-
-	export let gridItems: GridItem[]
-</script>
-
-{#if gridItems}
-	{#each gridItems as gridItem (gridItem.data.id)}
-		{#if gridItem.data.id === $selectedComponent}
-			<ComponentPanel {gridItems} bind:component={gridItem.data} />
-		{:else if gridItem.data.type === 'tablecomponent'}
-			<TablePanel bind:component={gridItem.data} />
-		{:else if gridItem.data.subGrids}
-			<SettingsPanelList bind:subgrids={gridItem.data.subGrids} />
-		{/if}
-	{/each}
-{/if}
diff --git a/frontend/src/lib/components/apps/editor/TablePanel.svelte b/frontend/src/lib/components/apps/editor/TablePanel.svelte
index b5a12bb72f..7663f55fc3 100644
--- a/frontend/src/lib/components/apps/editor/TablePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/TablePanel.svelte
@@ -11,7 +11,6 @@
 {#each component.actionButtons as actionButton (actionButton.id)}
 	{#if actionButton.id === $selectedComponent}
 		<ComponentPanel
-			gridItems={undefined}
 			rowColumns
 			bind:component={actionButton}
 			onDelete={() => {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index a7cfb5244d..f080618bb9 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -24,7 +24,6 @@
 
 	export let component: AppComponent | undefined
 	export let rowColumns = false
-	export let gridItems: GridItem[] | undefined
 	export let onDelete: (() => void) | undefined = undefined
 
 	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index e6aee2b90b..1a47caf88d 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -47,6 +47,13 @@ export function deleteComponent(
 
 */
 
+export function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[] {
+	if (subgrids == undefined) {
+		return grid
+	}
+	return [...grid, ...Object.values(subgrids).flat()]
+}
+
 export async function loadSchema(
 	workspace: string,
 	path: string,