diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx
index 76a031a43d5f..30163c49c62a 100644
--- a/ui/desktop/src/components/MarkdownContent.tsx
+++ b/ui/desktop/src/components/MarkdownContent.tsx
@@ -127,6 +127,7 @@ const CodeBlock = memo(function CodeBlock({
         language={language}
         PreTag="div"
         customStyle={{
+          background: 'var(--code-block-background, #282c34)',
           margin: 0,
           width: '100%',
           maxWidth: '100%',
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 280048b8b56e..b1406695b2a2 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -586,10 +586,15 @@ pre:has(> code.bg-inline-code) {
 }
 
 .dark .user-message-bubble {
+  --code-block-background: #0f1628;
   background-color: #171d30;
   color: #d2dae6;
 }
 
+.dark .user-message pre {
+  background-color: var(--code-block-background);
+}
+
 .dark .user-message :is(h1, h2, h3, h4, h5, h6, strong) {
   color: #e7ebf2 !important;
 }
@@ -616,6 +621,18 @@ pre:has(> code.bg-inline-code) {
   padding: 0.625rem 1rem;
 }
 
+.dark :is(.agent-message-bubble, .user-message-bubble) :not(pre) > code.bg-inline-code {
+  background-color: transparent;
+  color: #8cd3d6;
+  padding: 0;
+}
+
+.dark :is(.agent-message-bubble, .user-message-bubble) pre > code.bg-inline-code {
+  background-color: transparent;
+  color: #b8c4d1;
+  padding: 0;
+}
+
 .scrollbar-thin {
   scrollbar-width: thin;
 }