diff --git a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
index 3dc02d3b28..52d390c337 100644
--- a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
@@ -66,10 +66,10 @@
 {/each}
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	<div class="flex flex-col w-full h-full">
+	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				'w-full border-b p-2 text-xs font-semibold text-primary bg-surface-secondary',
 				css?.header?.class,
 				'wm-rich-result-header'
 			)}
diff --git a/frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte b/frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte
index 15bd1bfdf8..7faa8ddc8e 100644
--- a/frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte
@@ -57,10 +57,10 @@
 {/each}
 
 <RunnableWrapper {outputs} {render} {componentInput} {id}>
-	<div class="flex flex-col w-full h-full">
+	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				'w-full border-b p-2 text-xs font-semibold text-primary bg-surface-secondary',
 				css?.header?.class
 			)}
 			style={css?.header?.style}
diff --git a/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte b/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
index 84aecc0427..b79c844b3c 100644
--- a/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
@@ -68,10 +68,10 @@
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
 
 <RunnableWrapper {outputs} {render} {componentInput} {id}>
-	<div class="flex flex-col w-full h-full">
+	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				'w-full border-b p-2 text-xs font-semibold text-primary bg-surface-secondary',
 				css?.header?.class
 			)}
 			style={css?.header?.style}
@@ -80,7 +80,7 @@
 		</div>
 		<div
 			style={css?.container?.style}
-			class={twMerge('p-2 grow overflow-auto', css?.container?.class, 'wm-log-container')}
+			class={twMerge('grow overflow-auto', css?.container?.class, 'wm-log-container')}
 		>
 			<LogViewer
 				jobId={testJob?.id}