diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index a7a8c168ae..f2799371a9 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -123,7 +123,7 @@
 						selectedStyle={css?.selectedTab?.style}
 						disabled={resolvedDisabledTabs[index]}
 					>
-						<span class="font-semibold text-primary">{res}</span>
+						<span class="font-semibold">{res}</span>
 					</Tab>
 				{/each}
 			</Tabs>
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 811d78e0c3..1574c1a774 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -124,7 +124,8 @@
 	{/if}
 	<div
 		class={twMerge(
-			'h-full bg-surface/40 outline-1',
+			'h-full outline-1',
+			$mode === 'dnd' ? 'bg-surface/40' : '',
 			$hoverStore === component.id && $mode !== 'preview'
 				? $connectingInput.opened
 					? 'outline outline-orange-600'