diff --git a/client/src/components/Messages/Content/CodeBar.tsx b/client/src/components/Messages/Content/CodeBar.tsx
index 52c4060465..1d8b7465b6 100644
--- a/client/src/components/Messages/Content/CodeBar.tsx
+++ b/client/src/components/Messages/Content/CodeBar.tsx
@@ -13,7 +13,7 @@ const CodeBar: React.FC<CodeBarProps> = React.memo(
     const { isCopied, handleCopy } = useCopyCode(codeRef);
 
     return (
-      <div className="flex items-center justify-between bg-surface-primary-alt px-1.5 py-1.5 font-sans text-xs text-text-secondary dark:bg-transparent">
+      <div className="flex items-center justify-between bg-surface-primary-alt px-1.5 py-1.5 font-sans text-xs text-text-secondary dark:bg-transparent [.user-turn_&]:bg-surface-code">
         <span className="flex items-center gap-1.5 text-xs font-medium">
           <LangIcon lang={lang} className="size-3.5" />
           {lang}
diff --git a/client/src/components/Messages/Content/CodeBlock.tsx b/client/src/components/Messages/Content/CodeBlock.tsx
index 1d1fe21b80..2b82a381bb 100644
--- a/client/src/components/Messages/Content/CodeBlock.tsx
+++ b/client/src/components/Messages/Content/CodeBlock.tsx
@@ -140,7 +140,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
       />
       {allowExecution === true && toolCalls && toolCalls.length > 0 && (
         <>
-          <div className="border-t border-border-light bg-surface-primary-alt p-4 text-xs dark:bg-transparent">
+          <div className="border-t border-border-light bg-surface-primary-alt p-4 text-xs dark:bg-transparent [.user-turn_&]:bg-surface-code">
             <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-text-secondary">
               {localize('com_ui_output')}
             </div>
diff --git a/client/src/components/Messages/Content/ResultSwitcher.tsx b/client/src/components/Messages/Content/ResultSwitcher.tsx
index ee67e9b11a..cd6b10c439 100644
--- a/client/src/components/Messages/Content/ResultSwitcher.tsx
+++ b/client/src/components/Messages/Content/ResultSwitcher.tsx
@@ -26,7 +26,7 @@ export default function ResultSwitcher({
   return (
     <nav
       aria-label={localize('com_ui_navigate_results')}
-      className="flex items-center justify-center gap-1.5 border-t border-border-light px-3 py-1.5 text-xs"
+      className="flex items-center justify-center gap-1.5 border-t border-border-light px-3 py-1.5 text-xs [.user-turn_&]:bg-surface-code"
     >
       <button
         type="button"
diff --git a/client/src/style.css b/client/src/style.css
index 748354a531..2bfde286f8 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -183,6 +183,7 @@ html {
   --surface-destructive: var(--red-700);
   --surface-destructive-hover: var(--red-800);
   --surface-chat: var(--white);
+  --surface-code: var(--surface-primary-alt);
   --surface-qr: var(--white);
   --border-light: var(--gray-200);
   --border-light-alpha: 1;
@@ -280,6 +281,7 @@ html {
   --surface-destructive: var(--red-800);
   --surface-destructive-hover: var(--red-900);
   --surface-chat: var(--gray-700);
+  --surface-code: var(--presentation);
   --surface-qr: var(--white);
   --border-light: var(--gray-700);
   --border-medium-alt: var(--gray-600);
diff --git a/packages/client/src/theme/utils/createTailwindColors.js b/packages/client/src/theme/utils/createTailwindColors.js
index fe5408bc8c..00f82ba2e0 100644
--- a/packages/client/src/theme/utils/createTailwindColors.js
+++ b/packages/client/src/theme/utils/createTailwindColors.js
@@ -104,6 +104,7 @@ function createTailwindColors() {
     'surface-destructive': cssVar('--surface-destructive'),
     'surface-destructive-hover': cssVar('--surface-destructive-hover'),
     'surface-chat': cssVar('--surface-chat'),
+    'surface-code': cssVar('--surface-code'),
     'surface-qr': cssVar('--surface-qr'),
     'surface-inverted': cssVar('--surface-inverted'),
     'surface-inverted-hover': cssVar('--surface-inverted-hover'),