diff --git a/front/src/layouts/MainHeaderBar.tsx b/front/src/layouts/MainHeaderBar.tsx
index 9e4652d..811d1f6 100644
--- a/front/src/layouts/MainHeaderBar.tsx
+++ b/front/src/layouts/MainHeaderBar.tsx
@@ -1,9 +1,8 @@
 import { type ReactNode } from 'react'
-import { cn } from '@/components'
+import { cn } from '@/lib'
 
-// 우측 상단 다크 헤더 바
 const HEADER_BASE =
-  'flex w-full h-[56px] py-[18px] items-center rounded-t-[8px] bg-foreground text-background'
+  'flex w-full h-[56px] py-[18px] items-center rounded-t-[8px] bg-primary text-primary-foreground'
 
 const HEADER_ALIGN = {
   left: 'justify-start',
diff --git a/front/src/layouts/MainLayout.tsx b/front/src/layouts/MainLayout.tsx
index 1ae4894..76c3751 100644
--- a/front/src/layouts/MainLayout.tsx
+++ b/front/src/layouts/MainLayout.tsx
@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react'
-import { Logo, cn } from '@/components'
+import { Logo } from '@/components'
+import { cn } from '@/lib'
 
 // 좌측 폭: list=반응형 비율 / chat=고정 350px
 const SIDEBAR_WIDTH = {
@@ -18,8 +19,8 @@ const styles = {
   logoHeader:
     'flex w-full h-[56px] pl-[32px] pr-[24px] py-[8px] items-center justify-between shrink-0',
   main: 'flex flex-1 flex-col h-screen overflow-hidden pt-2 pr-2 pb-2 pl-0',
-  // 헤더 아래 콘텐츠 면 (다크 헤더 rounded-t 와 합쳐져 카드 형태)
-  content: 'flex flex-1 flex-col min-h-0 w-full overflow-hidden rounded-b-[8px] bg-muted',
+  // 다크 헤더와 합쳐져 카드 형태
+  content: 'flex flex-1 flex-col min-h-0 w-full overflow-hidden rounded-b-[8px] bg-surface',
 } as const
 
 export type SidebarWidth = keyof typeof SIDEBAR_WIDTH
@@ -28,7 +29,6 @@ export interface MainLayoutProps {
   sidebarWidth?: SidebarWidth
   /** 루트 가로 스크롤 + 최소폭 (chat 전용) */
   scrollX?: boolean
-  /** 로고 우측 컨트롤 */
   logoAction?: ReactNode
   sidebar: ReactNode
   header: ReactNode