diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 3011823808..b45aba20b1 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -7,7 +7,7 @@
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
 	import { AppService, type CompletedJob } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
+	import { faArrowsRotate, faRefresh } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import type { Output } from '../../rx'
@@ -206,14 +206,17 @@
 
 {#if autoRefresh === true}
 	{#if isValid}
-		<Button size="xs" color="dark" on:click={() => executeComponent()} disabled={!isValid}>
-			<div>
-				{Object.keys(args).length > 0 ? 'Submit' : 'Refresh'}
-				{#if testIsLoading}
-					<Icon data={faArrowsRotate} class="animate-spin ml-2" scale={0.8} />
-				{/if}
-			</div>
-		</Button>
+		<div class="flex flex-row-reverse">
+			<Button
+				size="xs"
+				color="light"
+				variant="border"
+				on:click={() => executeComponent()}
+				disabled={!isValid}
+				startIcon={{ icon: faRefresh, classes: testIsLoading ? 'animate-spin' : '' }}
+				iconOnly
+			/>
+		</div>
 		<slot />
 	{:else}
 		<Alert type="warning" size="xs" class="mt-2" title="Missing inputs">
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 6e44558f14..84d75c9b86 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -64,55 +64,53 @@
 			})
 		}
 	})
+
+	$: previewing = $mode === 'preview'
 </script>
 
 <AppEditorHeader bind:title={$appStore.title} bind:mode={$mode} />
 <SplitPanesWrapper>
-	<Pane size={20} minSize={20} maxSize={40}>
-		{#if $mode === 'dnd'}
-			<ContextPanel appPath={path} />
-		{/if}
+	<Pane size={previewing ? 0 : 20} minSize={20} maxSize={40}>
+		<ContextPanel appPath={path} />
 	</Pane>
-	<Pane size={60} maxSize={100}>
+	<Pane size={previewing ? 100 : 60}>
 		<div class="p-4 bg-gray-100 h-full" id="faton">
 			{#if $appStore.grid}
 				<GridEditor />
 			{/if}
 		</div>
 	</Pane>
-	<Pane size={25} minSize={20} maxSize={40}>
-		{#if $mode === 'dnd'}
-			<Tabs bind:selected={selectedTab}>
-				<Tab value="insert" size="xs">
-					<div class="m-1 flex flex-row gap-2">
-						<Icon data={faPlus} />
-						<span>Insert</span>
-					</div>
-				</Tab>
-				<Tab value="settings" size="xs">
-					<div class="m-1 flex flex-row gap-2">
-						<Icon data={faSliders} />
-						<span>Settings</span>
-					</div>
-				</Tab>
-				<svelte:fragment slot="content">
-					<TabContent value="settings">
-						{#if $selectedComponent !== undefined}
-							{#each $appStore.grid as gridItem (gridItem.id)}
-								{#if gridItem.data.id === $selectedComponent}
-									<ComponentPanel bind:component={gridItem.data} />
-								{/if}
-							{/each}
-						{/if}
-						{#if $selectedComponent === undefined}
-							<div class="p-4 text-sm">No component selected.</div>
-						{/if}
-					</TabContent>
-					<TabContent value="insert">
-						<ComponentList />
-					</TabContent>
-				</svelte:fragment>
-			</Tabs>
-		{/if}
+	<Pane size={previewing ? 0 : 25} minSize={20} maxSize={40}>
+		<Tabs bind:selected={selectedTab}>
+			<Tab value="insert" size="xs">
+				<div class="m-1 flex flex-row gap-2">
+					<Icon data={faPlus} />
+					<span>Insert</span>
+				</div>
+			</Tab>
+			<Tab value="settings" size="xs">
+				<div class="m-1 flex flex-row gap-2">
+					<Icon data={faSliders} />
+					<span>Settings</span>
+				</div>
+			</Tab>
+			<svelte:fragment slot="content">
+				<TabContent value="settings">
+					{#if $selectedComponent !== undefined}
+						{#each $appStore.grid as gridItem (gridItem.id)}
+							{#if gridItem.data.id === $selectedComponent}
+								<ComponentPanel bind:component={gridItem.data} />
+							{/if}
+						{/each}
+					{/if}
+					{#if $selectedComponent === undefined}
+						<div class="p-4 text-sm">No component selected.</div>
+					{/if}
+				</TabContent>
+				<TabContent value="insert">
+					<ComponentList />
+				</TabContent>
+			</svelte:fragment>
+		</Tabs>
 	</Pane>
 </SplitPanesWrapper>