diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx
index 7bad2bf..e0e7fbf 100644
--- a/webview-ui/src/components/ChatRow.tsx
+++ b/webview-ui/src/components/ChatRow.tsx
@@ -534,7 +534,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 							<div
 								style={{
 									borderRadius: 3,
-									border: "1px solid var(--vscode-sideBar-border)",
+									border: "1px solid var(--vscode-editorGroup-border)",
 									overflow: "hidden",
 									backgroundColor: CODE_BLOCK_BG_COLOR,
 								}}>
@@ -682,7 +682,7 @@ const Markdown = memo(({ markdown }: { markdown?: string }) => {
 							<div
 								style={{
 									borderRadius: 3,
-									border: "1px solid var(--vscode-sideBar-border)",
+									border: "1px solid var(--vscode-editorGroup-border)",
 									overflow: "hidden",
 								}}>
 								<CodeBlock
diff --git a/webview-ui/src/components/CodeAccordian.tsx b/webview-ui/src/components/CodeAccordian.tsx
index 358118c..6fd3dc7 100644
--- a/webview-ui/src/components/CodeAccordian.tsx
+++ b/webview-ui/src/components/CodeAccordian.tsx
@@ -1,6 +1,6 @@
 import { memo, useMemo } from "react"
 import { getLanguageFromPath } from "../utils/getLanguageFromPath"
-import CodeBlock from "./CodeBlock"
+import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
 
 interface CodeAccordianProps {
 	code?: string
@@ -30,7 +30,7 @@ const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onT
 		<div
 			style={{
 				borderRadius: 3,
-				backgroundColor: "var(--vscode-editor-background)",
+				backgroundColor: CODE_BLOCK_BG_COLOR,
 				overflow: "hidden", // This ensures the inner scrollable area doesn't overflow the rounded corners
 				border: "1px solid var(--vscode-editorGroup-border)",
 			}}>