diff --git a/src/renderer/components/communication/ChannelHeader.tsx b/src/renderer/components/communication/ChannelHeader.tsx
index 28914677..5504846b 100644
--- a/src/renderer/components/communication/ChannelHeader.tsx
+++ b/src/renderer/components/communication/ChannelHeader.tsx
@@ -47,7 +47,7 @@ export function ChannelHeader({
   const t = useT()
 
   return (
-    <div className="flex items-center gap-3 border-b border-border bg-card px-4 py-2.5">
+    <div className="flex items-center gap-3 border-b border-border bg-background px-4 py-2.5">
       {!showSidebar ? (
         <button
           type="button"
diff --git a/src/renderer/components/communication/ChannelSidebar.tsx b/src/renderer/components/communication/ChannelSidebar.tsx
index c39effd8..14033e18 100644
--- a/src/renderer/components/communication/ChannelSidebar.tsx
+++ b/src/renderer/components/communication/ChannelSidebar.tsx
@@ -105,7 +105,7 @@ export function ChannelSidebar({
       animate={{ width: 260, opacity: 1 }}
       exit={{ width: 0, opacity: 0 }}
       transition={{ duration: 0.2 }}
-      className="flex h-full shrink-0 flex-col overflow-hidden border-r border-border bg-card"
+      className="flex h-full shrink-0 flex-col overflow-hidden border-r border-border bg-background"
       style={{ width: 260 }}
     >
       <div className="flex-1 overflow-y-auto px-2 py-3">