diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 5df2943847..1bbefe48a7 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -26,7 +26,14 @@
 	export let render: boolean
 	export let initializing: boolean | undefined = true
 
-	const { worldStore, app } = getContext<AppViewerContext>('AppViewerContext')
+	export let controls: { left: () => boolean; right: () => boolean | string } | undefined =
+		undefined
+
+	const { worldStore, app, componentControl } = getContext<AppViewerContext>('AppViewerContext')
+
+	if (controls) {
+		$componentControl[id] = controls
+	}
 
 	let labelValue: string
 	let color: ButtonType.Color
diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
index e79f9c9859..5dc60aff40 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -50,7 +50,8 @@
 
 	let table = createSvelteTable(options)
 
-	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore, componentControl, selectedComponent } =
+		getContext<AppViewerContext>('AppViewerContext')
 
 	let selectedRowIndex = -1
 
@@ -138,6 +139,22 @@
 	$: result && rerender()
 
 	$: css = concatCustomCss($app.css?.tablecomponent, customCss)
+
+	$componentControl[id] = {
+		right: (skipActions: boolean | undefined) => {
+			if (skipActions) {
+				return false
+			}
+
+			const hasActions = actionButtons.length >= 1
+
+			if (hasActions) {
+				$selectedComponent = actionButtons[0].id
+				return true
+			}
+			return false
+		}
+	}
 </script>
 
 <InputValue {id} input={configuration.search} bind:value={search} />
@@ -239,31 +256,69 @@
 										on:keypress={() => toggleRow(row, rowIndex)}
 										on:click={() => toggleRow(row, rowIndex)}
 									>
-										<div class="center-center h-full w-full flex-wrap gap-1">
+										<div class="center-center h-full w-full flex-wrap gap-1 ">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
-												{#if rowIndex == 0}
-													<AppButton
-														{render}
-														noWFull
-														{...actionButton}
-														preclickAction={async () => {
-															toggleRow(row, rowIndex)
-														}}
-														extraQueryParams={{ row: row.original }}
-														bind:componentInput={actionButton.componentInput}
-													/>
-												{:else}
-													<AppButton
-														{render}
-														noWFull
-														{...actionButton}
-														preclickAction={async () => {
-															toggleRow(row, rowIndex)
-														}}
-														extraQueryParams={{ row: row.original }}
-														bind:componentInput={actionButton.componentInput}
-													/>
-												{/if}
+												<div
+													class={actionButton.id === $selectedComponent
+														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
+														: ''}
+												>
+													{#if actionButton.id === $selectedComponent}
+														<span
+															title={`Id: ${actionButton.id}`}
+															class={classNames(
+																'px-2 text-2xs font-bold w-fit absolute shadow -top-5 -left-[2px] border z-50 rounded-sm',
+																'bg-indigo-500/90 border-indigo-600 text-white'
+															)}
+														>
+															{actionButton.id}
+														</span>
+													{/if}
+													{#if rowIndex == 0}
+														<AppButton
+															{render}
+															noWFull
+															{...actionButton}
+															preclickAction={async () => {
+																toggleRow(row, rowIndex)
+															}}
+															extraQueryParams={{ row: row.original }}
+															bind:componentInput={actionButton.componentInput}
+															controls={{
+																left: () => {
+																	if (actionIndex === 0) {
+																		$selectedComponent = id
+																		return true
+																	} else if (actionIndex > 0) {
+																		$selectedComponent = actionButtons[actionIndex - 1].id
+																		return true
+																	}
+																	return false
+																},
+																right: () => {
+																	if (actionIndex === actionButtons.length - 1) {
+																		return id
+																	} else if (actionIndex < actionButtons.length - 1) {
+																		$selectedComponent = actionButtons[actionIndex + 1].id
+																		return true
+																	}
+																	return false
+																}
+															}}
+														/>
+													{:else}
+														<AppButton
+															{render}
+															noWFull
+															{...actionButton}
+															preclickAction={async () => {
+																toggleRow(row, rowIndex)
+															}}
+															extraQueryParams={{ row: row.original }}
+															bind:componentInput={actionButton.componentInput}
+														/>
+													{/if}
+												</div>
 											{/each}
 										</div>
 									</td>
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
index 250bfb77fe..ada7387d42 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
@@ -52,7 +52,15 @@
 			const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent)
 
 			if (currentIndex !== -1 && currentIndex > 0) {
-				$selectedComponent = sortedGridItems[currentIndex - 1].id
+				const left = sortedGridItems[currentIndex - 1]
+
+				if (left.data.type === 'tablecomponent') {
+					if (left.data.actionButtons.length >= 1) {
+						$selectedComponent = left.data.actionButtons[left.data.actionButtons.length - 1].id
+					} else {
+						$selectedComponent = left.id
+					}
+				}
 			}
 		}
 
@@ -61,6 +69,12 @@
 
 	function right(event: KeyboardEvent) {
 		let r = $componentControl[$selectedComponent!]?.right?.()
+
+		if (typeof r === 'string') {
+			$selectedComponent = r
+			r = $componentControl[r]?.right?.(true)
+		}
+
 		if (!r) {
 			const sortedGridItems = getGridItems()
 			const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent)
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 9d33b856a2..2c7c12d319 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -134,7 +134,11 @@ export type AppViewerContext = {
 	componentControl: Writable<
 		Record<
 			string,
-			{ left?: () => boolean; right?: () => boolean; setTab?: (index: number) => void }
+			{
+				left?: () => boolean
+				right?: (skipTableActions?: boolean | undefined) => string | boolean
+				setTab?: (index: number) => void
+			}
 		>
 	>
 }