diff --git a/backend-node/src/controllers/mailAccountFileController.ts b/backend-node/src/controllers/mailAccountFileController.ts
index 702a5dd4..668dedf3 100644
--- a/backend-node/src/controllers/mailAccountFileController.ts
+++ b/backend-node/src/controllers/mailAccountFileController.ts
@@ -178,14 +178,19 @@ export class MailAccountFileController {
     try {
       const { id } = req.params;
       
-      // TODO: 실제 SMTP 연결 테스트 구현
-      // const account = await mailAccountFileService.getAccountById(id);
-      // nodemailer로 연결 테스트
+      const account = await mailAccountFileService.getAccountById(id);
+      if (!account) {
+        return res.status(404).json({
+          success: false,
+          message: '계정을 찾을 수 없습니다.',
+        });
+      }
 
-      return res.json({
-        success: true,
-        message: '연결 테스트 성공 (미구현)',
-      });
+      // mailSendSimpleService의 testConnection 사용
+      const { mailSendSimpleService } = require('../services/mailSendSimpleService');
+      const result = await mailSendSimpleService.testConnection(id);
+
+      return res.json(result);
     } catch (error: unknown) {
       const err = error as Error;
       return res.status(500).json({
diff --git a/backend-node/src/controllers/mailSendSimpleController.ts b/backend-node/src/controllers/mailSendSimpleController.ts
index cbd9b647..15a1bea0 100644
--- a/backend-node/src/controllers/mailSendSimpleController.ts
+++ b/backend-node/src/controllers/mailSendSimpleController.ts
@@ -7,10 +7,12 @@ export class MailSendSimpleController {
    */
   async sendMail(req: Request, res: Response) {
     try {
+      console.log('📧 메일 발송 요청 수신:', { accountId: req.body.accountId, to: req.body.to, subject: req.body.subject });
       const { accountId, templateId, to, subject, variables, customHtml } = req.body;
 
       // 필수 파라미터 검증
       if (!accountId || !to || !Array.isArray(to) || to.length === 0) {
+        console.log('❌ 필수 파라미터 누락');
         return res.status(400).json({
           success: false,
           message: '계정 ID와 수신자 이메일이 필요합니다.',
diff --git a/backend-node/src/routes/mailAccountFileRoutes.ts b/backend-node/src/routes/mailAccountFileRoutes.ts
index cc022cb8..35772d39 100644
--- a/backend-node/src/routes/mailAccountFileRoutes.ts
+++ b/backend-node/src/routes/mailAccountFileRoutes.ts
@@ -1,8 +1,12 @@
 import { Router } from 'express';
 import { mailAccountFileController } from '../controllers/mailAccountFileController';
+import { authenticateToken } from '../middleware/authMiddleware';
 
 const router = Router();
 
+// 모든 메일 계정 라우트에 인증 미들웨어 적용
+router.use(authenticateToken);
+
 router.get('/', (req, res) => mailAccountFileController.getAllAccounts(req, res));
 router.get('/:id', (req, res) => mailAccountFileController.getAccountById(req, res));
 router.post('/', (req, res) => mailAccountFileController.createAccount(req, res));
diff --git a/backend-node/src/routes/mailReceiveBasicRoutes.ts b/backend-node/src/routes/mailReceiveBasicRoutes.ts
index f8d0d670..d21df689 100644
--- a/backend-node/src/routes/mailReceiveBasicRoutes.ts
+++ b/backend-node/src/routes/mailReceiveBasicRoutes.ts
@@ -4,8 +4,12 @@
 
 import express from 'express';
 import { MailReceiveBasicController } from '../controllers/mailReceiveBasicController';
+import { authenticateToken } from '../middleware/authMiddleware';
 
 const router = express.Router();
+
+// 모든 메일 수신 라우트에 인증 미들웨어 적용
+router.use(authenticateToken);
 const controller = new MailReceiveBasicController();
 
 // 메일 목록 조회
diff --git a/backend-node/src/routes/mailSendSimpleRoutes.ts b/backend-node/src/routes/mailSendSimpleRoutes.ts
index db56b66d..726a220c 100644
--- a/backend-node/src/routes/mailSendSimpleRoutes.ts
+++ b/backend-node/src/routes/mailSendSimpleRoutes.ts
@@ -1,8 +1,12 @@
 import { Router } from 'express';
 import { mailSendSimpleController } from '../controllers/mailSendSimpleController';
+import { authenticateToken } from '../middleware/authMiddleware';
 
 const router = Router();
 
+// 모든 메일 발송 라우트에 인증 미들웨어 적용
+router.use(authenticateToken);
+
 // POST /api/mail/send/simple - 메일 발송
 router.post('/simple', (req, res) => mailSendSimpleController.sendMail(req, res));
 
diff --git a/backend-node/src/routes/mailTemplateFileRoutes.ts b/backend-node/src/routes/mailTemplateFileRoutes.ts
index eb79ed34..a4f81b1b 100644
--- a/backend-node/src/routes/mailTemplateFileRoutes.ts
+++ b/backend-node/src/routes/mailTemplateFileRoutes.ts
@@ -1,8 +1,12 @@
 import { Router } from 'express';
 import { mailTemplateFileController } from '../controllers/mailTemplateFileController';
+import { authenticateToken } from '../middleware/authMiddleware';
 
 const router = Router();
 
+// 모든 메일 템플릿 라우트에 인증 미들웨어 적용
+router.use(authenticateToken);
+
 // 템플릿 CRUD
 router.get('/', (req, res) => mailTemplateFileController.getAllTemplates(req, res));
 router.get('/:id', (req, res) => mailTemplateFileController.getTemplateById(req, res));
diff --git a/backend-node/src/services/mailSendSimpleService.ts b/backend-node/src/services/mailSendSimpleService.ts
index c5d2fc4f..473f3959 100644
--- a/backend-node/src/services/mailSendSimpleService.ts
+++ b/backend-node/src/services/mailSendSimpleService.ts
@@ -6,6 +6,7 @@
 import nodemailer from 'nodemailer';
 import { mailAccountFileService } from './mailAccountFileService';
 import { mailTemplateFileService } from './mailTemplateFileService';
+import { encryptionService } from './encryptionService';
 
 export interface SendMailRequest {
   accountId: string;
@@ -56,18 +57,39 @@ class MailSendSimpleService {
         throw new Error('메일 내용이 없습니다.');
       }
 
-      // 4. SMTP 연결 생성
+      // 4. 비밀번호 복호화
+      const decryptedPassword = encryptionService.decrypt(account.smtpPassword);
+      console.log('🔐 비밀번호 복호화 완료');
+      console.log('🔐 암호화된 비밀번호 (일부):', account.smtpPassword.substring(0, 30) + '...');
+      console.log('🔐 복호화된 비밀번호 길이:', decryptedPassword.length);
+
+      // 5. SMTP 연결 생성
+      // 포트 465는 SSL/TLS를 사용해야 함
+      const isSecure = account.smtpPort === 465 ? true : (account.smtpSecure || false);
+      
+      console.log('📧 SMTP 연결 설정:', {
+        host: account.smtpHost,
+        port: account.smtpPort,
+        secure: isSecure,
+        user: account.smtpUsername,
+      });
+
       const transporter = nodemailer.createTransport({
         host: account.smtpHost,
         port: account.smtpPort,
-        secure: account.smtpSecure, // SSL/TLS
+        secure: isSecure, // SSL/TLS (포트 465는 자동으로 true)
         auth: {
           user: account.smtpUsername,
-          pass: account.smtpPassword,
+          pass: decryptedPassword, // 복호화된 비밀번호 사용
         },
+        // 타임아웃 설정 (30초)
+        connectionTimeout: 30000,
+        greetingTimeout: 30000,
       });
 
-      // 5. 메일 발송
+      console.log('📧 메일 발송 시도 중...');
+
+      // 6. 메일 발송
       const info = await transporter.sendMail({
         from: `"${account.name}" <${account.email}>`,
         to: request.to.join(', '),
@@ -75,6 +97,12 @@ class MailSendSimpleService {
         html: htmlContent,
       });
 
+      console.log('✅ 메일 발송 성공:', {
+        messageId: info.messageId,
+        accepted: info.accepted,
+        rejected: info.rejected,
+      });
+
       return {
         success: true,
         messageId: info.messageId,
@@ -83,6 +111,8 @@ class MailSendSimpleService {
       };
     } catch (error) {
       const err = error as Error;
+      console.error('❌ 메일 발송 실패:', err.message);
+      console.error('❌ 에러 상세:', err);
       return {
         success: false,
         error: err.message,
@@ -178,22 +208,42 @@ class MailSendSimpleService {
    */
   async testConnection(accountId: string): Promise<{ success: boolean; message: string }> {
     try {
+      console.log('🔌 SMTP 연결 테스트 시작:', accountId);
+      
       const account = await mailAccountFileService.getAccountById(accountId);
       if (!account) {
         throw new Error('계정을 찾을 수 없습니다.');
       }
 
+      // 비밀번호 복호화
+      const decryptedPassword = encryptionService.decrypt(account.smtpPassword);
+      console.log('🔐 비밀번호 복호화 완료');
+
+      // 포트 465는 SSL/TLS를 사용해야 함
+      const isSecure = account.smtpPort === 465 ? true : (account.smtpSecure || false);
+
+      console.log('🔌 SMTP 연결 설정:', {
+        host: account.smtpHost,
+        port: account.smtpPort,
+        secure: isSecure,
+        user: account.smtpUsername,
+      });
+
       const transporter = nodemailer.createTransport({
         host: account.smtpHost,
         port: account.smtpPort,
-        secure: account.smtpSecure,
+        secure: isSecure,
         auth: {
           user: account.smtpUsername,
-          pass: account.smtpPassword,
+          pass: decryptedPassword, // 복호화된 비밀번호 사용
         },
+        connectionTimeout: 10000, // 10초 타임아웃
+        greetingTimeout: 10000,
       });
 
+      console.log('🔌 SMTP 연결 검증 중...');
       await transporter.verify();
+      console.log('✅ SMTP 연결 검증 성공!');
 
       return {
         success: true,
@@ -201,6 +251,7 @@ class MailSendSimpleService {
       };
     } catch (error) {
       const err = error as Error;
+      console.error('❌ SMTP 연결 실패:', err.message);
       return {
         success: false,
         message: `연결 실패: ${err.message}`,
diff --git a/docs/리포트_관리_시스템_구현_완료_기능.md b/docs/리포트_관리_시스템_구현_완료_기능.md
new file mode 100644
index 00000000..69ad5670
--- /dev/null
+++ b/docs/리포트_관리_시스템_구현_완료_기능.md
@@ -0,0 +1,1033 @@
+# 리포트 관리 시스템 - 구현 완료 기능
+
+## 📋 목차
+
+1. [리포트 목록 관리](#1-리포트-목록-관리)
+2. [리포트 디자이너](#2-리포트-디자이너)
+3. [쿼리 관리](#3-쿼리-관리)
+4. [컴포넌트 시스템](#4-컴포넌트-시스템)
+5. [레이아웃 도구](#5-레이아웃-도구)
+6. [템플릿 시스템](#6-템플릿-시스템)
+7. [페이지 관리](#7-페이지-관리)
+8. [미리보기 및 출력](#8-미리보기-및-출력)
+
+---
+
+## 1. 리포트 목록 관리
+
+### 1.1 리포트 목록 화면
+
+- **경로**: `/admin/report`
+- **기능**:
+  - 전체 리포트 목록 조회
+  - 검색 필터링 (리포트명)
+  - 정렬 (생성일, 수정일)
+
+### 1.2 리포트 기본 관리
+
+- 리포트 생성
+- 리포트 수정
+- 리포트 복사
+- 리포트 삭제
+- 리포트 상세 정보 표시
+
+### 1.3 UI 개선사항
+
+- 타입 컬럼 제거 (디자인 간소화)
+- 복사/삭제 액션 추가
+
+---
+
+## 2. 리포트 디자이너
+
+### 2.1 기본 구조
+
+- **경로**: `/admin/report/designer/[reportId]`
+- **레이아웃**:
+  - 좌측: 페이지 목록 패널
+  - 중앙 좌측: 컴포넌트 팔레트
+  - 중앙: 캔버스
+  - 우측: 속성/쿼리/페이지 설정 패널 (탭)
+
+### 2.2 캔버스 기능
+
+- 드래그 앤 드롭으로 컴포넌트 배치
+- 컴포넌트 선택/이동/크기 조절
+- 그리드 스냅 (10px 단위)
+- 정렬 가이드라인 (빨간색 라인)
+- 캔버스 중심선 가이드
+- 눈금자 표시 (상단/좌측)
+- 페이지 여백 가이드 (파란색 점선)
+- 컴포넌트가 여백 밖으로 나가지 않도록 제한
+
+### 2.3 컴포넌트 조작
+
+- 다중 선택 (Ctrl/Cmd + 클릭)
+- 복사/붙여넣기 (Ctrl/Cmd + C/V)
+- 실행 취소/재실행 (Ctrl/Cmd + Z/Y)
+- 키보드 화살표 이동 (1px, Shift + 10px)
+- 컴포넌트 잠금/해제
+- 레이어 순서 조정 (맨 앞/뒤, 앞/뒤로)
+
+### 2.4 정렬 도구
+
+- **그룹 정렬**:
+  - 왼쪽/오른쪽/상단/하단 정렬
+  - 수평/수직 중앙 정렬
+- **분산**:
+  - 수평 분산
+  - 수직 분산
+- **크기 조정**:
+  - 너비 맞춤
+  - 높이 맞춤
+  - 크기 맞춤 (너비+높이)
+
+### 2.5 컴포넌트 그룹화
+
+- 여러 컴포넌트를 그룹으로 묶기
+- 그룹 해제
+- 그룹 단위 이동
+
+---
+
+## 3. 쿼리 관리
+
+### 3.1 쿼리 목록
+
+- **UI**: 아코디언 방식 (피그마 스타일)
+- 쿼리 추가/삭제
+- 쿼리 타입: MASTER (1건) / DETAIL (반복)
+- 부드러운 열기/닫기 애니메이션
+
+### 3.2 쿼리 설정
+
+- 쿼리 이름 설정
+- SQL 쿼리 입력 (Textarea)
+- DB 연결 선택:
+  - 내부 DB (PostgreSQL)
+  - 외부 DB 연결 선택
+
+### 3.3 파라미터 관리
+
+- 자동 파라미터 감지 (`$1`, `$2` 등)
+- 작은따옴표 내부 파라미터 무시
+- 파라미터 타입 설정 (텍스트/숫자/날짜)
+- 파라미터 입력 필드 동적 생성
+- 등장 순서대로 정렬
+
+### 3.4 쿼리 실행 및 검증
+
+- SQL 안전성 검증:
+  - SELECT/WITH 쿼리만 허용
+  - 위험한 명령어 차단 (DELETE, DROP, UPDATE 등)
+  - 단일 쿼리만 실행 가능
+- 실행 버튼 (빨간색)
+- 파라미터 미입력 시 실행 버튼 비활성화
+- 실행 결과 표시 (필드명, 데이터 건수)
+- 실행 결과 Context에 저장
+
+### 3.5 외부 DB 연동
+
+- 외부 DB 연결 목록 조회
+- 쿼리별 외부 DB 선택 가능
+- PostgreSQL, MariaDB, MSSQL, Oracle 지원
+
+---
+
+## 4. 컴포넌트 시스템
+
+### 4.1 Text 컴포넌트
+
+- 기본 텍스트 표시
+- 쿼리 필드 바인딩
+- 스타일 설정:
+  - 글꼴 크기
+  - 글꼴 색상
+  - 글꼴 굵기 (보통/굵게)
+  - 텍스트 정렬 (왼쪽/가운데/오른쪽)
+  - 배경색
+  - 테두리 (두께, 색상)
+
+### 4.2 Label 컴포넌트
+
+- 고정 텍스트 레이블
+- Text와 동일한 스타일 옵션
+
+### 4.3 Image 컴포넌트
+
+- 이미지 파일 업로드 (로컬 파일)
+- 이미지 표시 옵션:
+  - Contain (원본 비율 유지)
+  - Cover (영역 채우기)
+  - Fill (늘려서 채우기)
+- 테두리 설정
+
+### 4.4 Divider 컴포넌트
+
+- 구분선 표시
+- 방향: 수평/수직
+- 선 스타일: 실선/점선/이중선
+- 선 두께 설정
+- 선 색상 설정
+
+### 4.5 Signature (서명란) 컴포넌트
+
+- 서명 이미지 업로드
+- 직접 서명 그리기 (마우스 드로잉)
+- 탭 방식 전환 (직접 서명/이미지 업로드)
+- 서명란 밑줄 표시 옵션
+- 레이블 표시 (서명:)
+- 레이블 위치 (좌/우/상/하)
+- 기본 테두리 없음
+
+### 4.6 Stamp (도장란) 컴포넌트
+
+- 도장 이미지 업로드
+- 이름 입력 (좌측 표시)
+- "(인)" 레이블 표시/숨김
+- 레이블이 도장 이미지와 겹침
+- 기본 테두리 없음
+
+### 4.7 Table 컴포넌트
+
+- 쿼리 결과를 테이블로 표시
+- 자동 컬럼 생성 (쿼리 필드 기반)
+- 컬럼 설정:
+  - 필드명
+  - 헤더명
+  - 너비
+  - 정렬 (좌/가운데/우)
+- 테이블 스타일:
+  - 헤더 배경색
+  - 헤더 텍스트 색상
+  - 테두리 표시/숨김
+  - 행 높이
+- 캔버스에서 전체 데이터 표시 (최대 20행 + "외 N건")
+
+### 4.8 컴포넌트 공통 기능
+
+- 위치 (X, Y)
+- 크기 (너비, 높이)
+- 배경색
+- 테두리 (두께, 색상)
+- Z-index (레이어 순서)
+- 잠금 상태
+
+---
+
+## 5. 레이아웃 도구
+
+### 5.1 그리드 스냅
+
+- 10px 단위 그리드 스냅
+- 컴포넌트 배치/크기 조절 시 자동 적용
+
+### 5.2 정렬 가이드라인
+
+- 드래그 중 다른 컴포넌트와 정렬 시 빨간색 라인 표시
+- 정렬 기준:
+  - 좌측/우측/상단/하단 가장자리
+  - 수평/수직 중앙
+- 캔버스 중심선 가이드
+
+### 5.3 눈금자
+
+- 캔버스 상단/좌측에 눈금자 표시
+- mm 단위 표시
+
+### 5.4 레이어 관리
+
+- 컴포넌트 레이어 순서 조정
+- 맨 앞으로 가져오기
+- 맨 뒤로 보내기
+- 앞으로 가져오기
+- 뒤로 보내기
+
+### 5.5 컴포넌트 잠금
+
+- 선택한 컴포넌트 잠금
+- 잠금 시 이동/크기 조절/삭제 불가
+- 잠금 해제
+
+---
+
+## 6. 템플릿 시스템
+
+### 6.1 시스템 템플릿
+
+- 기본 제공 템플릿:
+  - 구매 요청서
+  - 발주서
+  - 기본 템플릿
+- 템플릿 적용 시 레이아웃 및 쿼리 자동 로드
+
+### 6.2 사용자 정의 템플릿
+
+- 현재 레이아웃을 템플릿으로 저장
+- 템플릿 이름, 설명, 카테고리 설정
+- 저장 시 리포트 저장 불필요
+- 저장된 템플릿은 기본 템플릿 목록에 추가
+
+---
+
+## 7. 페이지 관리
+
+### 7.1 페이지 목록 (좌측 패널)
+
+- 페이지 목록 표시
+- 페이지 이름 표시
+- 페이지 크기 및 컴포넌트 개수 표시
+- 현재 선택된 페이지 하이라이트
+
+### 7.2 페이지 조작
+
+- 페이지 추가 (무제한)
+- 페이지 삭제 (최소 1개 유지)
+- 페이지 복제
+- 페이지 이름 변경 (인라인 편집)
+- 드래그로 페이지 순서 변경 (GripVertical 핸들)
+
+### 7.3 페이지 설정 (우측 패널)
+
+- 페이지 정보:
+  - 페이지 이름
+- 페이지 크기:
+  - 너비/높이 (mm)
+  - 방향 (세로/가로)
+  - A4 프리셋 (세로/가로)
+- 페이지 여백:
+  - 상단/하단/좌측/우측 (mm)
+  - 여백 프리셋 (좁게/보통/넓게)
+
+### 7.4 페이지별 컴포넌트 관리
+
+- 각 페이지마다 독립적인 컴포넌트 목록
+- 페이지 전환 시 해당 페이지의 컴포넌트만 표시
+- 컴포넌트는 여백 밖으로 이동 불가
+
+### 7.5 데이터 구조
+
+- JSONB 기반 페이지 저장
+- 기존 단일 페이지 레이아웃 자동 마이그레이션
+- 하위 호환성 유지
+
+---
+
+## 8. 미리보기 및 출력
+
+### 8.1 미리보기 모달
+
+- 모든 페이지 순서대로 렌더링
+- 페이지 번호 및 이름 표시
+- 실제 출력과 동일한 모습
+- 편집 UI 요소 제거 (섹션 라벨, 테두리 등)
+- 쿼리 실행 결과 반영
+
+### 8.2 인쇄 기능
+
+- 브라우저 네이티브 인쇄 대화상자
+- 모든 페이지 인쇄
+- 페이지 나누기 자동 처리
+- 이미지 로드 대기 후 인쇄
+
+### 8.3 PDF 출력
+
+- 브라우저 인쇄 기능 이용
+- "PDF로 저장" 안내 토스트
+
+### 8.4 WORD 출력
+
+- `docx` 라이브러리 사용
+- 순차적 흐름 방식 (절대 위치 미지원)
+- 텍스트 및 테이블 출력
+- 텍스트 편집 가능
+
+### 8.5 출력 옵션
+
+- 테이블 헤더:
+  - 첫 페이지에만 표시
+  - 다음 페이지부터 헤더 없이 데이터만 표시
+
+---
+
+## 9. 기술 스택
+
+### 9.1 Frontend
+
+- **Framework**: Next.js 14
+- **Language**: TypeScript
+- **UI Library**: Shadcn UI
+- **State Management**: React Context API
+- **Drag & Drop**: react-dnd
+- **File Upload**: Multer (Backend)
+- **Document Export**: docx
+
+### 9.2 Backend
+
+- **Runtime**: Node.js
+- **Language**: TypeScript
+- **Database**: PostgreSQL
+- **External DB**: DatabaseConnectorFactory
+  - PostgreSQL
+  - MariaDB
+  - MSSQL
+  - Oracle
+
+### 9.3 주요 라이브러리
+
+- `lucide-react`: 아이콘
+- `uuid`: 고유 ID 생성
+- `pg`: PostgreSQL 연결
+- `docx`: WORD 문서 생성
+
+---
+
+## 10. 주요 파일 구조
+
+### 10.1 Frontend
+
+```
+frontend/
+├── app/(main)/admin/report/
+│   ├── page.tsx                    # 리포트 목록
+│   └── designer/[reportId]/
+│       └── page.tsx                 # 리포트 디자이너
+├── components/report/
+│   ├── designer/
+│   │   ├── ReportDesignerCanvas.tsx        # 캔버스
+│   │   ├── ReportDesignerLeftPanel.tsx     # 좌측 패널
+│   │   ├── ReportDesignerRightPanel.tsx    # 우측 패널
+│   │   ├── ReportDesignerToolbar.tsx       # 툴바
+│   │   ├── PageListPanel.tsx               # 페이지 목록
+│   │   ├── QueryManager.tsx                # 쿼리 관리
+│   │   ├── CanvasComponent.tsx             # 캔버스 컴포넌트
+│   │   ├── ComponentPropertiesPanel.tsx    # 속성 패널
+│   │   ├── ReportPreviewModal.tsx          # 미리보기
+│   │   └── Ruler.tsx                       # 눈금자
+│   └── ReportList.tsx              # 리포트 목록
+├── contexts/
+│   └── ReportDesignerContext.tsx   # 디자이너 Context
+├── types/
+│   └── report.ts                   # 타입 정의
+└── lib/api/
+    └── reportApi.ts                # API 클라이언트
+```
+
+### 10.2 Backend
+
+```
+backend-node/
+├── src/
+│   ├── controllers/
+│   │   └── reportController.ts     # 리포트 컨트롤러
+│   ├── services/
+│   │   └── reportService.ts        # 리포트 서비스
+│   ├── routes/
+│   │   └── reportRoutes.ts         # 리포트 라우트
+│   └── database/
+│       └── connectors/             # 외부 DB 커넥터
+└── uploads/                        # 업로드 파일
+```
+
+---
+
+## 11. 데이터베이스 스키마
+
+### 11.1 주요 테이블
+
+- `REPORT`: 리포트 기본 정보
+- `REPORT_LAYOUT`: 레이아웃 설정 (JSONB)
+- `REPORT_QUERY`: 쿼리 정보
+- `REPORT_TEMPLATE`: 템플릿 정보
+- `EXTERNAL_DB_CONNECTION`: 외부 DB 연결 정보
+
+### 11.2 JSONB 구조
+
+```json
+{
+  "pages": [
+    {
+      "page_id": "uuid",
+      "page_name": "페이지 1",
+      "page_order": 0,
+      "width": 210,
+      "height": 297,
+      "orientation": "portrait",
+      "margins": {
+        "top": 10,
+        "bottom": 10,
+        "left": 10,
+        "right": 10
+      },
+      "background_color": "#ffffff",
+      "components": [
+        {
+          "id": "uuid",
+          "type": "text",
+          "x": 50,
+          "y": 50,
+          "width": 200,
+          "height": 30,
+          "defaultValue": "텍스트",
+          "queryId": "query_uuid",
+          "fieldName": "field_name",
+          "fontSize": 13,
+          "fontColor": "#000000",
+          "fontWeight": "normal",
+          "textAlign": "left",
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+          "borderColor": "#000000"
+        }
+      ]
+    }
+  ]
+}
+```
+
+---
+
+## 12. 보안 및 검증
+
+### 12.1 SQL 인젝션 방지
+
+- 파라미터 바인딩 사용
+- 위험한 SQL 명령어 차단
+- SELECT/WITH 쿼리만 허용
+- 단일 쿼리 실행만 가능
+
+### 12.2 파일 업로드 보안
+
+- 허용된 파일 확장자만 업로드
+- 파일 크기 제한
+- 안전한 파일명 생성
+
+### 12.3 권한 관리
+
+- 사용자별 리포트 접근 권한
+- 세션 기반 인증
+
+---
+
+## 13. 개선 예정 기능
+
+### 13.1 테이블 페이지 분할
+
+- 테이블이 페이지를 넘어갈 때 자동으로 다음 페이지로 분할
+- 현재는 단일 페이지에만 표시
+
+### 13.2 기업 사용자를 위한 필수 기능 ⭐
+
+> **현재는 기본 기능만 구현되어 있어, 기업 환경에서 사용하기 위해서는 아래 기능들이 추가로 필요합니다.**
+
+#### A. 보안 및 접근 제어 🔒
+
+##### 리포트 권한 관리
+
+- **조회 권한**: 부서별/팀별/역할별 조회 권한 설정
+- **수정 권한**: 작성자/관리자/공동 편집자 권한
+- **출력 권한**: 출력 권한 별도 관리, 워터마크 삽입
+- **삭제 권한**: 승인 프로세스, 논리적 삭제
+
+##### 데이터 보안
+
+- **민감 정보 마스킹**: 주민번호, 계좌번호 등 자동 마스킹
+- **데이터 필터링**: 사용자 권한에 따른 데이터 자동 필터링
+- **쿼리 실행 제한**: 실행 시간, 결과 행 수, 복잡도 제한
+
+##### 감사 로그 (Audit Trail)
+
+- **접근 로그**: 누가, 언제, 어떤 리포트를 조회했는지 기록
+- **수정 로그**: 수정 이력, 버전 관리, 롤백
+- **출력 로그**: 출력 이력, 다운로드 추적
+
+#### B. 문서 관리 📄
+
+##### 문서 번호 체계
+
+- **자동 채번**: 부서별/카테고리별/연도별 고유 번호 자동 부여
+  - 예: `SALES-2025-001`, `HR-2025-0001`
+- **문서 번호 포맷**: 커스터마이징 가능한 번호 형식
+- **문서 번호 컴포넌트**: 리포트에 문서 번호 자동 삽입, 바코드/QR코드 표시
+
+##### 문서 상태 관리
+
+- **작성 중** → **검토 중** → **승인 대기** → **승인 완료** / **반려** → **폐기**
+- 각 상태별 권한 및 동작 제어
+- 상태 변경 이력 추적
+
+##### 문서 생명주기
+
+- **보존 기간 설정**: 1년/3년/5년/영구 보존
+- **보존 기간 만료 알림**: 자동 알림 및 보관 이관
+- **보관 문서 관리**: 별도 보관 문서함, 조회 권한 제한
+
+#### C. 승인 워크플로우 ✅
+
+##### 승인 프로세스
+
+- **승인선 설정**: 부서별/직급별 자동 승인선 구성
+- **단계별 승인**: 1차(팀장) → 2차(부서장) → 최종(임원)
+- **병렬 승인**: 다수 승인자 동시 승인
+- **승인 알림**: 이메일/시스템/모바일 푸시 알림
+
+##### 승인 후 처리
+
+- **리포트 잠금**: 승인 완료 후 수정 불가
+- **배포 관리**: 자동 배포, 배포 대상자 지정
+- **승인 이력**: 승인자, 승인 시점, 승인 의견 기록
+
+#### D. 협업 기능 👥
+
+##### 공유 및 협업
+
+- **리포트 공유**: 링크 공유, 특정 사용자 공유, 공유 기간 설정
+- **공동 편집**: 실시간 편집, Lock 기능, 충돌 방지
+- **댓글 및 리뷰**: 컴포넌트별 댓글, 검토 의견
+
+##### 템플릿 공유
+
+- **템플릿 라이브러리**: 공용 템플릿, 부서별 템플릿
+- **템플릿 승인**: 공용 템플릿 등록 시 승인 필요
+- **템플릿 평점**: 사용자 평가 및 리뷰
+
+#### E. 조직 관리 🏢
+
+##### 부서/팀 관리
+
+- **부서별 리포트**: 부서별 리포트 목록 관리
+- **권한 상속**: 상위 부서 권한 자동 상속
+- **부서 이동 처리**: 부서 이동 시 리포트 이관
+
+##### 역할 관리
+
+- **역할 정의**: 작성자/검토자/승인자/관리자
+- **역할별 권한**: 조회/생성/수정/삭제 권한 세분화
+
+#### F. 규정 준수 (Compliance) ⚖️
+
+##### 전자문서법 준수
+
+- **전자서명**: 리포트에 전자서명 첨부, 서명 검증
+- **타임스탬프**: 생성/수정/승인 시점 타임스탬프, 위변조 방지
+
+##### 개인정보보호법 준수
+
+- **개인정보 표시**: 개인정보 포함 여부 표시, 처리 동의 기록
+- **개인정보 파기**: 보존 기간 만료 후 자동 파기, 복구 불가
+
+#### G. 통합 및 연동 🔗
+
+##### ERP 시스템 연동
+
+- **마스터 데이터 연동**: 거래처, 품목, 고객 정보 실시간 동기화
+- **워크플로우 연동**: 구매/영업 프로세스와 연계
+
+##### 외부 시스템 연동
+
+- **이메일 연동**: 리포트 자동 발송, 승인 알림
+- **클라우드 스토리지**: Google Drive, OneDrive 연동
+- **전자결재 시스템**: SSO 연동, 통합 승인선
+
+#### H. 사용자 편의 기능 💡
+
+##### 즐겨찾기 및 최근 문서
+
+- **즐겨찾기**: 자주 사용하는 리포트 북마크
+- **최근 문서**: 최근 조회/수정 리포트 목록
+
+##### 검색 및 필터링
+
+- **고급 검색**: 전체 텍스트 검색, 필드별 검색
+- **스마트 필터**: 나의 리포트, 공유된 리포트, 승인 대기
+
+##### 대시보드
+
+- **리포트 통계**: 생성 수, 조회수, 출력 횟수
+- **사용자 통계**: 부서별/사용자별 활동 내역
+
+#### I. 성능 및 최적화 ⚡
+
+##### 대용량 데이터 처리
+
+- **스트리밍 출력**: 대용량 데이터 효율적 처리
+- **캐싱**: 쿼리 결과/템플릿 캐싱 (Redis)
+
+##### 동시 접속 처리
+
+- **부하 분산**: 로드 밸런싱, 세션 클러스터링
+- **큐잉 시스템**: 대량 출력 요청 백그라운드 처리
+
+#### J. 모바일 지원 📱
+
+##### 모바일 웹
+
+- **반응형 디자인**: 모바일 화면 최적화
+- **모바일 기능**: 조회, 승인, 간단한 수정
+
+##### 모바일 앱
+
+- **네이티브 앱**: iOS/Android, 오프라인 모드
+- **푸시 알림**: 승인 요청, 문서 공유 알림
+
+#### K. AI/ML 기반 고급 기능 🤖
+
+##### 지능형 리포트 작성 지원
+
+- **AI 기반 템플릿 추천**: 사용자의 과거 리포트 패턴 분석하여 최적 템플릿 자동 추천
+- **스마트 레이아웃 제안**: 데이터 유형에 따라 최적의 컴포넌트 배치 자동 제안
+- **자동 데이터 매핑**: 쿼리 필드와 컴포넌트 자동 연결 제안
+
+##### 자연어 처리 (NLP)
+
+- **음성 명령**: "작년 매출 리포트 작성해줘" 같은 음성 명령으로 리포트 생성
+- **자동 요약 생성**: 긴 리포트 내용을 AI가 자동으로 요약
+- **다국어 자동 번역**: 리포트 내용을 여러 언어로 실시간 번역
+
+##### 이상 탐지 및 예측 분석
+
+- **데이터 이상 감지**: 리포트 데이터에서 비정상 패턴 자동 감지 및 경고
+- **트렌드 예측**: 과거 데이터 기반 미래 추세 예측 및 시각화
+- **자동 인사이트 생성**: 데이터에서 의미있는 패턴 발견 및 설명 제공
+
+#### L. 데이터 거버넌스 🏛️
+
+##### 데이터 품질 관리
+
+- **데이터 검증 규칙**: 입력 데이터 유효성 자동 검증
+- **데이터 표준화**: 일관된 데이터 형식 강제 적용
+- **중복 데이터 감지**: 중복 리포트 및 데이터 자동 감지
+
+##### 데이터 계보 (Data Lineage)
+
+- **데이터 흐름 추적**: 리포트 데이터의 출처부터 최종 사용까지 전체 흐름 시각화
+- **영향도 분석**: 데이터 변경 시 영향받는 리포트 자동 파악
+- **의존성 관리**: 리포트 간 의존 관계 매핑
+
+##### 데이터 카탈로그
+
+- **메타데이터 관리**: 모든 리포트 및 데이터셋의 메타데이터 중앙 관리
+- **데이터 검색**: 키워드로 관련 리포트 및 데이터 빠르게 검색
+- **데이터 사전**: 필드명, 설명, 데이터 타입 등 표준 용어 정의
+
+#### M. 고급 분석 및 BI 통합 📊
+
+##### 내장 분석 도구
+
+- **OLAP 큐브**: 다차원 데이터 분석 지원
+- **피벗 테이블**: 동적 데이터 집계 및 분석
+- **드릴다운/드릴업**: 계층적 데이터 탐색
+
+##### BI 도구 연동
+
+- **Power BI 커넥터**: Power BI와 원활한 데이터 연동
+- **Tableau 통합**: Tableau 대시보드 임베딩
+- **Google Data Studio 연결**: 클라우드 기반 시각화
+
+##### 고급 시각화
+
+- **인터랙티브 차트**: 사용자 상호작용 가능한 동적 차트
+- **지도 시각화**: 지역별 데이터 지도 표시 (Heatmap, Choropleth)
+- **네트워크 다이어그램**: 관계형 데이터 네트워크 시각화
+
+#### N. 자동화 및 스케줄링 ⏰
+
+##### 리포트 자동 생성
+
+- **스케줄 실행**: 일별/주별/월별 자동 리포트 생성
+- **트리거 기반 실행**: 특정 이벤트 발생 시 자동 생성
+- **배치 처리**: 대량 리포트 일괄 생성
+
+##### 자동 배포
+
+- **이메일 자동 발송**: 생성된 리포트 자동 이메일 발송
+- **FTP/SFTP 업로드**: 외부 서버로 자동 업로드
+- **클라우드 스토리지 동기화**: 자동 백업 및 동기화
+
+##### 워크플로우 자동화
+
+- **조건부 워크플로우**: IF-THEN 조건에 따른 자동 실행
+- **연쇄 작업**: 여러 리포트를 순차적으로 자동 생성
+- **실패 처리**: 실행 실패 시 자동 재시도 및 알림
+
+#### O. 버전 관리 및 변경 추적 📝
+
+##### 고급 버전 관리
+
+- **Git 방식 버전 관리**: Branch, Merge, Commit 개념 도입
+- **변경 사항 비교 (Diff)**: 버전 간 변경 내용 시각적 비교
+- **체크포인트 및 태그**: 주요 버전에 태그 부여
+
+##### 변경 승인 프로세스
+
+- **Pull Request 방식**: 변경 제안 및 리뷰 프로세스
+- **코드 리뷰**: 쿼리 및 레이아웃 변경 사항 동료 검토
+- **머지 승인**: 최종 승인 후 메인 버전에 반영
+
+#### P. 테스트 및 품질 관리 🧪
+
+##### 자동화 테스트
+
+- **쿼리 유효성 테스트**: 쿼리 실행 전 자동 검증
+- **레이아웃 테스트**: 다양한 데이터셋으로 레이아웃 검증
+- **출력 품질 테스트**: PDF/WORD 출력 품질 자동 검증
+
+##### A/B 테스트
+
+- **템플릿 A/B 테스트**: 여러 버전의 리포트 동시 배포 및 성과 비교
+- **사용자 피드백 수집**: 사용자 선호도 분석
+
+##### 품질 메트릭
+
+- **리포트 품질 점수**: 가독성, 데이터 정확도 등 자동 평가
+- **성능 모니터링**: 쿼리 실행 시간, 렌더링 속도 추적
+- **에러율 추적**: 실행 실패율 및 원인 분석
+
+#### Q. 커스터마이징 및 확장성 🔧
+
+##### 플러그인 시스템
+
+- **커스텀 컴포넌트**: 사용자 정의 컴포넌트 개발 및 등록
+- **확장 마켓플레이스**: 커뮤니티 개발 컴포넌트/템플릿 공유
+- **API 확장**: Custom Hook 및 이벤트 리스너 제공
+
+##### 스크립트 지원
+
+- **JavaScript 스크립트**: 고급 데이터 처리 로직 작성
+- **Python 통합**: 데이터 과학 라이브러리 활용
+- **SQL 함수 확장**: 사용자 정의 SQL 함수 등록
+
+##### 테마 및 브랜딩
+
+- **커스텀 테마**: 기업 CI/BI에 맞는 색상/폰트 적용
+- **로고 및 워터마크**: 자동 브랜딩 요소 삽입
+- **다국어 커스터마이징**: 기업별 용어 정의
+
+#### R. 비용 관리 및 최적화 💰
+
+##### 리소스 사용량 추적
+
+- **쿼리 비용 추적**: 각 쿼리의 DB 비용 계산
+- **저장소 사용량**: 리포트 저장 공간 모니터링
+- **API 호출 추적**: 외부 API 사용량 및 비용
+
+##### 비용 최적화 제안
+
+- **비효율적 쿼리 감지**: 성능이 낮은 쿼리 자동 식별
+- **캐싱 전략 제안**: 반복 쿼리에 대한 캐싱 권장
+- **아카이빙 제안**: 오래된 리포트 아카이빙 권장
+
+#### S. 고급 보안 기능 🔐
+
+##### 위협 탐지
+
+- **비정상 접근 패턴 감지**: AI 기반 이상 행동 탐지
+- **SQL 인젝션 방어**: 고급 SQL 인젝션 패턴 탐지
+- **브루트포스 공격 방어**: 로그인 시도 제한 및 차단
+
+##### 암호화 및 키 관리
+
+- **필드 레벨 암호화**: 민감 필드 개별 암호화
+- **키 로테이션**: 암호화 키 자동 교체
+- **Hardware Security Module (HSM) 연동**: 하드웨어 기반 보안
+
+##### 보안 인증
+
+- **SOC 2 준수**: 보안 감사 표준 준수
+- **ISO 27001 인증**: 정보 보안 관리 체계
+- **GDPR 준수**: 유럽 개인정보보호 규정 준수
+
+#### T. 사용자 교육 및 온보딩 📚
+
+##### 인터랙티브 튜토리얼
+
+- **가이드 투어**: 신규 사용자 대상 단계별 안내
+- **인터랙티브 도움말**: 각 기능에 대한 실시간 도움말
+- **비디오 튜토리얼**: 주요 기능 사용법 영상
+
+##### 학습 관리
+
+- **학습 경로 제공**: 초급/중급/고급 학습 코스
+- **인증 프로그램**: 사용자 숙련도 인증
+- **커뮤니티 포럼**: 사용자 간 지식 공유
+
+##### 컨텍스트 도움말
+
+- **AI 어시스턴트**: 자연어로 질문하고 답변 받기
+- **실시간 제안**: 작업 중 관련 팁 자동 제공
+- **오류 해결 가이드**: 오류 발생 시 해결 방법 제시
+
+#### U. 통합 협업 플랫폼 🤝
+
+##### 프로젝트 관리 통합
+
+- **Jira 연동**: 이슈와 리포트 연결
+- **Asana 통합**: 작업 관리와 리포트 동기화
+- **Monday.com 커넥터**: 워크플로우 통합
+
+##### 커뮤니케이션 도구
+
+- **Slack 봇**: 리포트 알림 및 명령 실행
+- **MS Teams 통합**: 팀즈 내에서 리포트 조회
+- **Zoom 통합**: 화상회의 중 리포트 공유
+
+##### 문서 관리 시스템
+
+- **SharePoint 연동**: 리포트 자동 업로드
+- **Confluence 통합**: 위키 페이지에 리포트 임베딩
+- **Notion 커넥터**: Notion 데이터베이스 동기화
+
+### 13.3 추가 컴포넌트
+
+- **Barcode**: 1D/2D 바코드 자동 생성
+- **QR Code**: URL/텍스트 QR코드 생성
+- **Chart**: 막대/선/파이/도넛/레이더/산점도 차트
+- **Gauge**: 게이지/미터기 시각화
+- **Watermark**: 반투명 워터마크 자동 삽입
+- **전자서명 필드**: 전자서명 영역 지정
+- **문서 번호 필드**: 자동 채번 번호 표시
+- **승인란**: 승인자 서명 및 날인 영역
+- **변경 이력**: 문서 변경 히스토리 자동 표시
+- **목차**: 다중 페이지 리포트 목차 자동 생성
+- **색인**: 키워드 색인 자동 생성
+- **각주/미주**: 참고 자료 삽입
+- **하이퍼링크**: 외부 링크 또는 페이지 내 링크
+- **북마크**: 특정 위치 마크 및 링크
+- **조건부 컴포넌트**: 데이터 조건에 따라 표시/숨김
+
+### 13.4 고급 기능
+
+#### 데이터 처리
+
+- **조건부 표시** (IF-THEN-ELSE): 데이터 값에 따른 조건부 렌더링
+- **반복 섹션** (DETAIL 쿼리 기반): 동적 행 반복
+- **계산 필드**: 런타임 계산 (price \* quantity)
+- **집계 함수**: SUM, AVG, COUNT, MIN, MAX, STDEV
+- **수식 필드**: 복잡한 수식 지원 (Excel 유사)
+- **룩업 함수**: 다른 데이터셋 참조
+- **문자열 함수**: CONCAT, SUBSTRING, REPLACE, FORMAT
+- **날짜 함수**: DATE_ADD, DATE_DIFF, DATE_FORMAT
+
+#### 레이아웃 고급 기능
+
+- **마스터 페이지**: 공통 헤더/푸터 템플릿
+- **섹션 구분**: Header/Body/Footer 섹션 분리
+- **컬럼 레이아웃**: 2단/3단 컬럼 지원
+- **플로팅 컴포넌트**: 고정 위치 컴포넌트 (페이지 상관없이)
+- **동적 높이**: 내용에 따라 자동 높이 조절
+- **페이지 번호/총 페이지 수**: 자동 계산
+- **현재 날짜/시간**: 출력 시점 시간 자동 삽입
+- **헤더/푸터 변수**: 챕터명, 섹션명 자동 표시
+
+#### 출력 고급 기능
+
+- **조건부 페이지 나누기**: 특정 조건에서만 페이지 분리
+- **그룹 단위 페이지 유지**: 그룹이 페이지 경계에서 분리 방지
+- **반복 헤더/푸터**: 페이지마다 헤더/푸터 반복
+- **챕터 구분**: 챕터별 페이지 번호 재시작
+- **대체 페이지 레이아웃**: 홀수/짝수 페이지 다른 레이아웃
+- **출력 형식별 최적화**: PDF/WORD/EXCEL 각각 최적화
+- **북마크 및 목차 자동 생성**: PDF 북마크 트리
+
+---
+
+## 14. 개발 가이드
+
+### 14.1 로컬 개발 환경
+
+```bash
+# Frontend
+cd frontend
+npm install
+npm run dev
+
+# Backend
+cd backend-node
+npm install
+npm run dev
+```
+
+### 14.2 환경 변수
+
+```env
+# Backend
+DATABASE_URL=postgresql://...
+PORT=3001
+
+# Frontend
+NEXT_PUBLIC_API_URL=http://localhost:3001
+```
+
+### 14.3 빌드 및 배포
+
+```bash
+# Frontend
+npm run build
+npm run start
+
+# Backend
+npm run build
+npm run start
+```
+
+---
+
+## 15. 구현 우선순위 및 로드맵
+
+### Phase 1: 현재 완료 ✅
+
+- 기본 리포트 디자이너
+- 컴포넌트 시스템
+- 쿼리 관리
+- 페이지 관리
+- 미리보기 및 출력
+
+### Phase 2: 기업 필수 기능 (우선순위 높음)
+
+1. **문서 번호 자동 채번 시스템**
+2. **문서 상태 관리** (작성중 → 검토 → 승인 → 완료)
+3. **기본 권한 관리** (조회/수정/삭제 권한)
+4. **감사 로그** (접근/수정/출력 이력)
+5. **승인 워크플로우** (단계별 승인)
+
+### Phase 3: 협업 및 보안 (우선순위 중간)
+
+1. **리포트 공유 기능**
+2. **댓글 및 리뷰 시스템**
+3. **민감 정보 마스킹**
+4. **전자서명 지원**
+5. **문서 보존 기간 관리**
+
+### Phase 4: 고급 기능 (우선순위 낮음)
+
+1. **모바일 지원**
+2. **대시보드 및 통계**
+3. **외부 시스템 연동** (이메일, 클라우드)
+4. **고급 컴포넌트** (차트, 바코드, QR코드)
+5. **성능 최적화** (캐싱, 큐잉)
+
+---
+
+## 16. 마무리
+
+### 현재 상태 📊
+
+현재 구현된 리포트 관리 시스템은 **기본적인 리포트 디자인, 쿼리 연동, 페이지 관리, 출력 기능**을 모두 갖추고 있습니다.
+
+사용자는 직관적인 **드래그 앤 드롭 인터페이스**로 리포트를 디자인하고, **데이터베이스 쿼리**를 연결하여 동적 리포트를 생성할 수 있으며, **다양한 형식(PDF, WORD)**으로 출력할 수 있습니다.
+
+### 기업 환경 적용을 위한 과제 🎯
+
+하지만 **기업 환경에서 실제로 사용**하기 위해서는 다음 기능들이 필수적으로 추가되어야 합니다:
+
+1. **문서 번호 관리**: 체계적인 문서 관리를 위한 자동 채번 시스템
+2. **승인 워크플로우**: 문서의 검토 및 승인 프로세스
+3. **권한 관리**: 부서별/역할별 세분화된 접근 권한
+4. **감사 로그**: 규정 준수를 위한 상세한 이력 관리
+5. **보안 강화**: 민감 정보 보호 및 데이터 보안
+
+### 향후 계획 🚀
+
+**Phase 2**의 기업 필수 기능부터 순차적으로 구현하여, 실제 기업 환경에서 안정적으로 사용할 수 있는 **엔터프라이즈급 리포트 관리 시스템**으로 발전시킬 계획입니다.
+
+특히 **문서 번호 자동 채번**, **승인 워크플로우**, **권한 관리**는 가장 먼저 구현되어야 할 핵심 기능으로 판단됩니다.
diff --git a/frontend/app/(main)/admin/mail/accounts/page.tsx b/frontend/app/(main)/admin/mail/accounts/page.tsx
index 0171f2b6..ca0cf0b9 100644
--- a/frontend/app/(main)/admin/mail/accounts/page.tsx
+++ b/frontend/app/(main)/admin/mail/accounts/page.tsx
@@ -10,6 +10,7 @@ import {
   createMailAccount,
   updateMailAccount,
   deleteMailAccount,
+  testMailAccountConnection,
   CreateMailAccountDto,
   UpdateMailAccountDto,
 } from "@/lib/api/mail";
@@ -104,6 +105,24 @@ export default function MailAccountsPage() {
     }
   };
 
+  const handleTestConnection = async (account: MailAccount) => {
+    try {
+      setLoading(true);
+      const result = await testMailAccountConnection(account.id);
+      
+      if (result.success) {
+        alert(`✅ SMTP 연결 성공!\n\n${result.message || '정상적으로 연결되었습니다.'}`);
+      } else {
+        alert(`❌ SMTP 연결 실패\n\n${result.message || '연결에 실패했습니다.'}`);
+      }
+    } catch (error: any) {
+      console.error('연결 테스트 실패:', error);
+      alert(`❌ SMTP 연결 테스트 실패\n\n${error.message || '알 수 없는 오류가 발생했습니다.'}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
@@ -148,6 +167,7 @@ export default function MailAccountsPage() {
                 onEdit={handleOpenEditModal}
                 onDelete={handleOpenDeleteModal}
                 onToggleStatus={handleToggleStatus}
+                onTestConnection={handleTestConnection}
               />
             </CardContent>
           </Card>
diff --git a/frontend/app/(main)/admin/mail/dashboard/page.tsx b/frontend/app/(main)/admin/mail/dashboard/page.tsx
index 1fa6a728..f2e737bc 100644
--- a/frontend/app/(main)/admin/mail/dashboard/page.tsx
+++ b/frontend/app/(main)/admin/mail/dashboard/page.tsx
@@ -14,6 +14,7 @@ import {
   Calendar,
   Clock
 } from "lucide-react";
+import { getMailAccounts, getMailTemplates } from "@/lib/api/mail";
 
 interface DashboardStats {
   totalAccounts: number;
@@ -38,17 +39,15 @@ export default function MailDashboardPage() {
   const loadStats = async () => {
     setLoading(true);
     try {
-      // 계정 수
-      const accountsRes = await fetch('/api/mail/accounts');
-      const accountsData = await accountsRes.json();
+      // 계정 수 (apiClient를 통해 토큰 포함)
+      const accounts = await getMailAccounts();
       
-      // 템플릿 수
-      const templatesRes = await fetch('/api/mail/templates-file');
-      const templatesData = await templatesRes.json();
+      // 템플릿 수 (apiClient를 통해 토큰 포함)
+      const templates = await getMailTemplates();
 
       setStats({
-        totalAccounts: accountsData.success ? accountsData.data.length : 0,
-        totalTemplates: templatesData.success ? templatesData.data.length : 0,
+        totalAccounts: accounts.length,
+        totalTemplates: templates.length,
         sentToday: 0, // TODO: 실제 발송 통계 API 연동
         receivedToday: 0,
         sentThisMonth: 0,
diff --git a/frontend/app/(main)/admin/screenMng/page.tsx b/frontend/app/(main)/admin/screenMng/page.tsx
index 88dff27f..54da701b 100644
--- a/frontend/app/(main)/admin/screenMng/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/page.tsx
@@ -83,7 +83,7 @@ export default function ScreenManagementPage() {
             <div className="space-y-8">
               <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-4">
                 <h2 className="text-xl font-semibold text-gray-800">{stepConfig.list.title}</h2>
-                <Button className="bg-blue-600 hover:bg-blue-700 shadow-sm" onClick={() => goToNextStep("design")}>
+                <Button variant="default" className="shadow-sm" onClick={() => goToNextStep("design")}>
                   화면 설계하기 <ArrowRight className="ml-2 h-4 w-4" />
                 </Button>
               </div>
@@ -121,7 +121,7 @@ export default function ScreenManagementPage() {
                     <ArrowLeft className="mr-2 h-4 w-4" />
                     이전 단계
                   </Button>
-                  <Button className="bg-blue-600 hover:bg-blue-700 shadow-sm" onClick={() => goToStep("list")}>
+                  <Button variant="default" className="shadow-sm" onClick={() => goToStep("list")}>
                     목록으로 돌아가기
                   </Button>
                 </div>
diff --git a/frontend/app/(main)/admin/validation-demo/page.tsx b/frontend/app/(main)/admin/validation-demo/page.tsx
index f84a06f5..2372c4ea 100644
--- a/frontend/app/(main)/admin/validation-demo/page.tsx
+++ b/frontend/app/(main)/admin/validation-demo/page.tsx
@@ -54,7 +54,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     required: true,
     style: {
       labelFontSize: "14px",
-      labelColor: "#3b83f6",
+      labelColor: "#212121",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -72,7 +72,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     required: true,
     style: {
       labelFontSize: "14px",
-      labelColor: "#3b83f6",
+      labelColor: "#212121",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -94,7 +94,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     },
     style: {
       labelFontSize: "14px",
-      labelColor: "#3b83f6",
+      labelColor: "#212121",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -112,7 +112,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     required: false,
     style: {
       labelFontSize: "14px",
-      labelColor: "#3b83f6",
+      labelColor: "#212121",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -130,7 +130,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     required: false,
     style: {
       labelFontSize: "14px",
-      labelColor: "#3b83f6",
+      labelColor: "#212121",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
@@ -152,7 +152,7 @@ const TEST_COMPONENTS: ComponentData[] = [
     },
     style: {
       labelFontSize: "14px",
-      labelColor: "#3b83f6",
+      labelColor: "#212121",
       labelFontWeight: "500",
     },
   } as WidgetComponent,
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index 93111ba8..8b186bfa 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -148,7 +148,7 @@ export default function ScreenViewPage() {
   const screenHeight = layout?.screenResolution?.height || 800;
 
   return (
-    <div className="h-full w-full overflow-auto bg-gradient-to-br from-gray-50 to-slate-100 pt-10">
+    <div className="h-full w-full overflow-auto bg-gradient-to-br from-gray-50 to-slate-100 p-10">
       {layout && layout.components.length > 0 ? (
         // 캔버스 컴포넌트들을 정확한 해상도로 표시
         <div
@@ -158,7 +158,6 @@ export default function ScreenViewPage() {
             height: `${screenHeight}px`,
             minWidth: `${screenWidth}px`,
             minHeight: `${screenHeight}px`,
-            margin: "0 auto 40px auto", // 하단 여백 추가
           }}
         >
           {layout.components
@@ -239,7 +238,7 @@ export default function ScreenViewPage() {
               const labelText = component.style?.labelText || component.label || "";
               const labelStyle = {
                 fontSize: component.style?.labelFontSize || "14px",
-                color: component.style?.labelColor || "#3b83f6",
+                color: component.style?.labelColor || "#212121",
                 fontWeight: component.style?.labelFontWeight || "500",
                 backgroundColor: component.style?.labelBackgroundColor || "transparent",
                 padding: component.style?.labelPadding || "0",
@@ -379,7 +378,7 @@ export default function ScreenViewPage() {
       ) : (
         // 빈 화면일 때도 깔끔하게 표시
         <div
-          className="mx-auto flex items-center justify-center bg-white"
+          className="mx-auto flex items-center justify-center bg-white rounded-xl border border-gray-200/60 shadow-lg shadow-gray-900/5"
           style={{
             width: `${screenWidth}px`,
             height: `${screenHeight}px`,
diff --git a/frontend/components/GlobalFileViewer.tsx b/frontend/components/GlobalFileViewer.tsx
index 6e7789d8..248de1d5 100644
--- a/frontend/components/GlobalFileViewer.tsx
+++ b/frontend/components/GlobalFileViewer.tsx
@@ -56,10 +56,10 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
   // 파일 아이콘 가져오기
   const getFileIcon = (fileName: string, size: number = 16) => {
     const extension = fileName.split('.').pop()?.toLowerCase() || '';
-    const iconProps = { size, className: "text-gray-600" };
+    const iconProps = { size, className: "text-muted-foreground" };
 
     if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(extension)) {
-      return <Image {...iconProps} className="text-blue-600" />;
+      return <Image {...iconProps} className="text-primary" />;
     }
     if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm'].includes(extension)) {
       return <Video {...iconProps} className="text-purple-600" />;
@@ -71,7 +71,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
       return <Archive {...iconProps} className="text-yellow-600" />;
     }
     if (['txt', 'md', 'doc', 'docx', 'pdf', 'rtf'].includes(extension)) {
-      return <FileText {...iconProps} className="text-red-600" />;
+      return <FileText {...iconProps} className="text-destructive" />;
     }
     return <File {...iconProps} />;
   };
@@ -272,7 +272,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
                             variant="ghost"
                             size="sm"
                             onClick={() => handleRemove(file)}
-                            className="flex items-center gap-1 text-red-600 hover:text-red-700"
+                            className="flex items-center gap-1 text-destructive hover:text-red-700"
                           >
                             <Trash2 className="w-3 h-3" />
                           </Button>
diff --git a/frontend/components/admin/BatchJobModal.tsx b/frontend/components/admin/BatchJobModal.tsx
index 21eb8df9..e7f75f77 100644
--- a/frontend/components/admin/BatchJobModal.tsx
+++ b/frontend/components/admin/BatchJobModal.tsx
@@ -179,7 +179,7 @@ export default function BatchJobModal({
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'Y': return 'bg-green-100 text-green-800';
-      case 'N': return 'bg-red-100 text-red-800';
+      case 'N': return 'bg-destructive/20 text-red-800';
       default: return 'bg-gray-100 text-gray-800';
     }
   };
@@ -314,29 +314,29 @@ export default function BatchJobModal({
               
               <div className="grid grid-cols-3 gap-4">
                 <div className="p-4 border rounded-lg">
-                  <div className="text-2xl font-bold text-blue-600">
+                  <div className="text-2xl font-bold text-primary">
                     {formData.execution_count || 0}
                   </div>
-                  <div className="text-sm text-gray-600">총 실행 횟수</div>
+                  <div className="text-sm text-muted-foreground">총 실행 횟수</div>
                 </div>
                 
                 <div className="p-4 border rounded-lg">
                   <div className="text-2xl font-bold text-green-600">
                     {formData.success_count || 0}
                   </div>
-                  <div className="text-sm text-gray-600">성공 횟수</div>
+                  <div className="text-sm text-muted-foreground">성공 횟수</div>
                 </div>
                 
                 <div className="p-4 border rounded-lg">
-                  <div className="text-2xl font-bold text-red-600">
+                  <div className="text-2xl font-bold text-destructive">
                     {formData.failure_count || 0}
                   </div>
-                  <div className="text-sm text-gray-600">실패 횟수</div>
+                  <div className="text-sm text-muted-foreground">실패 횟수</div>
                 </div>
               </div>
 
               {formData.last_executed_at && (
-                <div className="text-sm text-gray-600">
+                <div className="text-sm text-muted-foreground">
                   마지막 실행: {new Date(formData.last_executed_at).toLocaleString()}
                 </div>
               )}
diff --git a/frontend/components/admin/CategoryItem.tsx b/frontend/components/admin/CategoryItem.tsx
index 92b074b0..b5b34c17 100644
--- a/frontend/components/admin/CategoryItem.tsx
+++ b/frontend/components/admin/CategoryItem.tsx
@@ -55,7 +55,7 @@ export function CategoryItem({ category, isSelected, onSelect, onEdit, onDelete
                 "cursor-pointer transition-colors",
                 category.is_active === "Y"
                   ? "bg-green-100 text-green-800 hover:bg-green-200 hover:text-green-900"
-                  : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-700",
+                  : "bg-gray-100 text-muted-foreground hover:bg-gray-200 hover:text-gray-700",
                 updateCategoryMutation.isPending && "cursor-not-allowed opacity-50",
               )}
               onClick={(e) => {
@@ -71,7 +71,7 @@ export function CategoryItem({ category, isSelected, onSelect, onEdit, onDelete
               {category.is_active === "Y" ? "활성" : "비활성"}
             </Badge>
           </div>
-          <p className="mt-1 text-sm text-gray-600">{category.category_code}</p>
+          <p className="mt-1 text-sm text-muted-foreground">{category.category_code}</p>
           {category.description && <p className="mt-1 text-sm text-gray-500">{category.description}</p>}
         </div>
 
diff --git a/frontend/components/admin/CodeCategoryFormModal.tsx b/frontend/components/admin/CodeCategoryFormModal.tsx
index 8a6fbd34..67fe8993 100644
--- a/frontend/components/admin/CodeCategoryFormModal.tsx
+++ b/frontend/components/admin/CodeCategoryFormModal.tsx
@@ -180,11 +180,11 @@ export function CodeCategoryFormModal({
                 {...createForm.register("categoryCode")}
                 disabled={isLoading}
                 placeholder="카테고리 코드를 입력하세요"
-                className={createForm.formState.errors.categoryCode ? "border-red-500" : ""}
+                className={createForm.formState.errors.categoryCode ? "border-destructive" : ""}
                 onBlur={() => handleFieldBlur("categoryCode")}
               />
               {createForm.formState.errors.categoryCode && (
-                <p className="text-sm text-red-600">{createForm.formState.errors.categoryCode.message}</p>
+                <p className="text-sm text-destructive">{createForm.formState.errors.categoryCode.message}</p>
               )}
               {!createForm.formState.errors.categoryCode && (
                 <ValidationMessage
@@ -200,7 +200,7 @@ export function CodeCategoryFormModal({
           {isEditing && editingCategory && (
             <div className="space-y-2">
               <Label htmlFor="categoryCodeDisplay">카테고리 코드</Label>
-              <Input id="categoryCodeDisplay" value={editingCategory.category_code} disabled className="bg-gray-50" />
+              <Input id="categoryCodeDisplay" value={editingCategory.category_code} disabled className="bg-muted" />
               <p className="text-sm text-gray-500">카테고리 코드는 수정할 수 없습니다.</p>
             </div>
           )}
@@ -216,20 +216,20 @@ export function CodeCategoryFormModal({
               className={
                 isEditing
                   ? updateForm.formState.errors.categoryName
-                    ? "border-red-500"
+                    ? "border-destructive"
                     : ""
                   : createForm.formState.errors.categoryName
-                    ? "border-red-500"
+                    ? "border-destructive"
                     : ""
               }
               onBlur={() => handleFieldBlur("categoryName")}
             />
             {isEditing
               ? updateForm.formState.errors.categoryName && (
-                  <p className="text-sm text-red-600">{updateForm.formState.errors.categoryName.message}</p>
+                  <p className="text-sm text-destructive">{updateForm.formState.errors.categoryName.message}</p>
                 )
               : createForm.formState.errors.categoryName && (
-                  <p className="text-sm text-red-600">{createForm.formState.errors.categoryName.message}</p>
+                  <p className="text-sm text-destructive">{createForm.formState.errors.categoryName.message}</p>
                 )}
             {!(isEditing ? updateForm.formState.errors.categoryName : createForm.formState.errors.categoryName) && (
               <ValidationMessage
@@ -251,20 +251,20 @@ export function CodeCategoryFormModal({
               className={
                 isEditing
                   ? updateForm.formState.errors.categoryNameEng
-                    ? "border-red-500"
+                    ? "border-destructive"
                     : ""
                   : createForm.formState.errors.categoryNameEng
-                    ? "border-red-500"
+                    ? "border-destructive"
                     : ""
               }
               onBlur={() => handleFieldBlur("categoryNameEng")}
             />
             {isEditing
               ? updateForm.formState.errors.categoryNameEng && (
-                  <p className="text-sm text-red-600">{updateForm.formState.errors.categoryNameEng.message}</p>
+                  <p className="text-sm text-destructive">{updateForm.formState.errors.categoryNameEng.message}</p>
                 )
               : createForm.formState.errors.categoryNameEng && (
-                  <p className="text-sm text-red-600">{createForm.formState.errors.categoryNameEng.message}</p>
+                  <p className="text-sm text-destructive">{createForm.formState.errors.categoryNameEng.message}</p>
                 )}
             {!(isEditing
               ? updateForm.formState.errors.categoryNameEng
@@ -289,20 +289,20 @@ export function CodeCategoryFormModal({
               className={
                 isEditing
                   ? updateForm.formState.errors.description
-                    ? "border-red-500"
+                    ? "border-destructive"
                     : ""
                   : createForm.formState.errors.description
-                    ? "border-red-500"
+                    ? "border-destructive"
                     : ""
               }
               onBlur={() => handleFieldBlur("description")}
             />
             {isEditing
               ? updateForm.formState.errors.description && (
-                  <p className="text-sm text-red-600">{updateForm.formState.errors.description.message}</p>
+                  <p className="text-sm text-destructive">{updateForm.formState.errors.description.message}</p>
                 )
               : createForm.formState.errors.description && (
-                  <p className="text-sm text-red-600">{createForm.formState.errors.description.message}</p>
+                  <p className="text-sm text-destructive">{createForm.formState.errors.description.message}</p>
                 )}
           </div>
 
@@ -320,19 +320,19 @@ export function CodeCategoryFormModal({
               className={
                 isEditing
                   ? updateForm.formState.errors.sortOrder
-                    ? "border-red-500"
+                    ? "border-destructive"
                     : ""
                   : createForm.formState.errors.sortOrder
-                    ? "border-red-500"
+                    ? "border-destructive"
                     : ""
               }
             />
             {isEditing
               ? updateForm.formState.errors.sortOrder && (
-                  <p className="text-sm text-red-600">{updateForm.formState.errors.sortOrder.message}</p>
+                  <p className="text-sm text-destructive">{updateForm.formState.errors.sortOrder.message}</p>
                 )
               : createForm.formState.errors.sortOrder && (
-                  <p className="text-sm text-red-600">{createForm.formState.errors.sortOrder.message}</p>
+                  <p className="text-sm text-destructive">{createForm.formState.errors.sortOrder.message}</p>
                 )}
           </div>
 
diff --git a/frontend/components/admin/CodeCategoryPanel.tsx b/frontend/components/admin/CodeCategoryPanel.tsx
index 96f75d04..645193fc 100644
--- a/frontend/components/admin/CodeCategoryPanel.tsx
+++ b/frontend/components/admin/CodeCategoryPanel.tsx
@@ -82,7 +82,7 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
-          <p className="text-red-600">카테고리를 불러오는 중 오류가 발생했습니다.</p>
+          <p className="text-destructive">카테고리를 불러오는 중 오류가 발생했습니다.</p>
           <Button variant="outline" onClick={() => window.location.reload()} className="mt-2">
             다시 시도
           </Button>
@@ -116,7 +116,7 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
               onChange={(e) => setShowActiveOnly(e.target.checked)}
               className="rounded border-gray-300"
             />
-            <label htmlFor="activeOnly" className="text-sm text-gray-600">
+            <label htmlFor="activeOnly" className="text-sm text-muted-foreground">
               활성 카테고리만 표시
             </label>
           </div>
diff --git a/frontend/components/admin/CodeDetailPanel.tsx b/frontend/components/admin/CodeDetailPanel.tsx
index 680f59f4..3389ad5b 100644
--- a/frontend/components/admin/CodeDetailPanel.tsx
+++ b/frontend/components/admin/CodeDetailPanel.tsx
@@ -121,7 +121,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
-          <p className="text-red-600">코드를 불러오는 중 오류가 발생했습니다.</p>
+          <p className="text-destructive">코드를 불러오는 중 오류가 발생했습니다.</p>
           <Button variant="outline" onClick={() => window.location.reload()} className="mt-2">
             다시 시도
           </Button>
@@ -155,7 +155,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
               onChange={(e) => setShowActiveOnly(e.target.checked)}
               className="rounded border-gray-300"
             />
-            <label htmlFor="activeOnlyCodes" className="text-sm text-gray-600">
+            <label htmlFor="activeOnlyCodes" className="text-sm text-muted-foreground">
               활성 코드만 표시
             </label>
           </div>
@@ -221,13 +221,13 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
                                     "transition-colors",
                                     activeCode.isActive === "Y" || activeCode.is_active === "Y"
                                       ? "bg-green-100 text-green-800"
-                                      : "bg-gray-100 text-gray-600",
+                                      : "bg-gray-100 text-muted-foreground",
                                   )}
                                 >
                                   {activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "활성" : "비활성"}
                                 </Badge>
                               </div>
-                              <p className="mt-1 text-sm text-gray-600">
+                              <p className="mt-1 text-sm text-muted-foreground">
                                 {activeCode.codeValue || activeCode.code_value}
                               </p>
                               {activeCode.description && (
diff --git a/frontend/components/admin/CodeFormModal.tsx b/frontend/components/admin/CodeFormModal.tsx
index 6e915904..26b617a4 100644
--- a/frontend/components/admin/CodeFormModal.tsx
+++ b/frontend/components/admin/CodeFormModal.tsx
@@ -168,7 +168,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               {...form.register("codeValue")}
               disabled={isLoading || isEditing} // 수정 시에는 비활성화
               placeholder="코드값을 입력하세요"
-              className={(form.formState.errors as any)?.codeValue ? "border-red-500" : ""}
+              className={(form.formState.errors as any)?.codeValue ? "border-destructive" : ""}
               onBlur={(e) => {
                 const value = e.target.value.trim();
                 if (value && !isEditing) {
@@ -180,7 +180,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               }}
             />
             {(form.formState.errors as any)?.codeValue && (
-              <p className="text-sm text-red-600">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
             )}
             {!isEditing && !(form.formState.errors as any)?.codeValue && (
               <ValidationMessage
@@ -199,7 +199,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               {...form.register("codeName")}
               disabled={isLoading}
               placeholder="코드명을 입력하세요"
-              className={form.formState.errors.codeName ? "border-red-500" : ""}
+              className={form.formState.errors.codeName ? "border-destructive" : ""}
               onBlur={(e) => {
                 const value = e.target.value.trim();
                 if (value) {
@@ -211,7 +211,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               }}
             />
             {form.formState.errors.codeName && (
-              <p className="text-sm text-red-600">{getErrorMessage(form.formState.errors.codeName)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.codeName)}</p>
             )}
             {!form.formState.errors.codeName && (
               <ValidationMessage
@@ -230,7 +230,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               {...form.register("codeNameEng")}
               disabled={isLoading}
               placeholder="코드 영문명을 입력하세요"
-              className={form.formState.errors.codeNameEng ? "border-red-500" : ""}
+              className={form.formState.errors.codeNameEng ? "border-destructive" : ""}
               onBlur={(e) => {
                 const value = e.target.value.trim();
                 if (value) {
@@ -242,7 +242,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               }}
             />
             {form.formState.errors.codeNameEng && (
-              <p className="text-sm text-red-600">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
             )}
             {!form.formState.errors.codeNameEng && (
               <ValidationMessage
@@ -262,10 +262,10 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               disabled={isLoading}
               placeholder="설명을 입력하세요"
               rows={3}
-              className={form.formState.errors.description ? "border-red-500" : ""}
+              className={form.formState.errors.description ? "border-destructive" : ""}
             />
             {form.formState.errors.description && (
-              <p className="text-sm text-red-600">{getErrorMessage(form.formState.errors.description)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.description)}</p>
             )}
           </div>
 
@@ -278,10 +278,10 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               {...form.register("sortOrder", { valueAsNumber: true })}
               disabled={isLoading}
               min={1}
-              className={form.formState.errors.sortOrder ? "border-red-500" : ""}
+              className={form.formState.errors.sortOrder ? "border-destructive" : ""}
             />
             {form.formState.errors.sortOrder && (
-              <p className="text-sm text-red-600">{getErrorMessage(form.formState.errors.sortOrder)}</p>
+              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.sortOrder)}</p>
             )}
           </div>
 
diff --git a/frontend/components/admin/ColumnDefinitionTable.tsx b/frontend/components/admin/ColumnDefinitionTable.tsx
index c58ed39b..74fd4f33 100644
--- a/frontend/components/admin/ColumnDefinitionTable.tsx
+++ b/frontend/components/admin/ColumnDefinitionTable.tsx
@@ -188,7 +188,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
               const hasRowError = rowErrors.length > 0;
 
               return (
-                <TableRow key={index} className={hasRowError ? "bg-red-50" : ""}>
+                <TableRow key={index} className={hasRowError ? "bg-destructive/10" : ""}>
                   <TableCell>
                     <div className="space-y-1">
                       <Input
@@ -199,7 +199,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
                         className={hasRowError ? "border-red-300" : ""}
                       />
                       {rowErrors.length > 0 && (
-                        <div className="space-y-1 text-xs text-red-600">
+                        <div className="space-y-1 text-xs text-destructive">
                           {rowErrors.map((error, i) => (
                             <div key={i}>{error}</div>
                           ))}
diff --git a/frontend/components/admin/CreateTableModal.tsx b/frontend/components/admin/CreateTableModal.tsx
index 07dae653..7e075ad1 100644
--- a/frontend/components/admin/CreateTableModal.tsx
+++ b/frontend/components/admin/CreateTableModal.tsx
@@ -248,7 +248,7 @@ export function CreateTableModal({ isOpen, onClose, onSuccess }: CreateTableModa
                 placeholder="예: customer_info"
                 className={tableNameError ? "border-red-300" : ""}
               />
-              {tableNameError && <p className="text-sm text-red-600">{tableNameError}</p>}
+              {tableNameError && <p className="text-sm text-destructive">{tableNameError}</p>}
               <p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
             </div>
 
diff --git a/frontend/components/admin/DDLLogViewer.tsx b/frontend/components/admin/DDLLogViewer.tsx
index c978f162..e0184f38 100644
--- a/frontend/components/admin/DDLLogViewer.tsx
+++ b/frontend/components/admin/DDLLogViewer.tsx
@@ -271,14 +271,14 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
                               {log.success ? (
                                 <CheckCircle2 className="h-4 w-4 text-green-600" />
                               ) : (
-                                <XCircle className="h-4 w-4 text-red-600" />
+                                <XCircle className="h-4 w-4 text-destructive" />
                               )}
-                              <span className={log.success ? "text-green-600" : "text-red-600"}>
+                              <span className={log.success ? "text-green-600" : "text-destructive"}>
                                 {log.success ? "성공" : "실패"}
                               </span>
                             </div>
                             {log.error_message && (
-                              <div className="mt-1 max-w-xs truncate text-xs text-red-600">{log.error_message}</div>
+                              <div className="mt-1 max-w-xs truncate text-xs text-destructive">{log.error_message}</div>
                             )}
                           </TableCell>
 
@@ -325,7 +325,7 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
                       <CardTitle className="text-sm font-medium">실패</CardTitle>
                     </CardHeader>
                     <CardContent>
-                      <div className="text-2xl font-bold text-red-600">{statistics.failedExecutions}</div>
+                      <div className="text-2xl font-bold text-destructive">{statistics.failedExecutions}</div>
                     </CardContent>
                   </Card>
 
@@ -374,13 +374,13 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
                 {statistics.recentFailures.length > 0 && (
                   <Card>
                     <CardHeader>
-                      <CardTitle className="text-base text-red-600">최근 실패 로그</CardTitle>
+                      <CardTitle className="text-base text-destructive">최근 실패 로그</CardTitle>
                       <CardDescription>최근 발생한 DDL 실행 실패 내역입니다.</CardDescription>
                     </CardHeader>
                     <CardContent>
                       <div className="space-y-2">
                         {statistics.recentFailures.map((failure, index) => (
-                          <div key={index} className="rounded-lg border border-red-200 bg-red-50 p-3">
+                          <div key={index} className="rounded-lg border border-destructive/20 bg-destructive/10 p-3">
                             <div className="mb-1 flex items-center justify-between">
                               <div className="flex items-center gap-2">
                                 <Badge variant={getDDLTypeBadgeVariant(failure.ddl_type)}>{failure.ddl_type}</Badge>
@@ -390,7 +390,7 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
                                 {format(new Date(failure.executed_at), "MM-dd HH:mm", { locale: ko })}
                               </span>
                             </div>
-                            <div className="text-sm text-red-600">{failure.error_message}</div>
+                            <div className="text-sm text-destructive">{failure.error_message}</div>
                           </div>
                         ))}
                       </div>
diff --git a/frontend/components/admin/DiskUsageSummary.tsx b/frontend/components/admin/DiskUsageSummary.tsx
index 59af8455..096af5f8 100644
--- a/frontend/components/admin/DiskUsageSummary.tsx
+++ b/frontend/components/admin/DiskUsageSummary.tsx
@@ -120,7 +120,7 @@ export function DiskUsageSummary({ diskUsageInfo, isLoading, onRefresh }: DiskUs
           <div className="mt-2 h-2 w-full rounded-full bg-gray-200">
             <div
               className={`h-2 rounded-full transition-all duration-300 ${
-                summary.totalSizeMB > 1000 ? "bg-red-500" : summary.totalSizeMB > 500 ? "bg-yellow-500" : "bg-green-500"
+                summary.totalSizeMB > 1000 ? "bg-destructive/100" : summary.totalSizeMB > 500 ? "bg-yellow-500" : "bg-green-500"
               }`}
               style={{
                 width: `${Math.min((summary.totalSizeMB / 2000) * 100, 100)}%`,
diff --git a/frontend/components/admin/ExternalDbConnectionModal.tsx b/frontend/components/admin/ExternalDbConnectionModal.tsx
index cb23768f..b9075bc8 100644
--- a/frontend/components/admin/ExternalDbConnectionModal.tsx
+++ b/frontend/components/admin/ExternalDbConnectionModal.tsx
@@ -450,7 +450,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
                   className={`rounded-md border p-3 text-sm ${
                     testResult.success
                       ? "border-green-200 bg-green-50 text-green-800"
-                      : "border-red-200 bg-red-50 text-red-800"
+                      : "border-destructive/20 bg-destructive/10 text-red-800"
                   }`}
                 >
                   <div className="font-medium">{testResult.success ? "✅ 연결 성공" : "❌ 연결 실패"}</div>
@@ -469,7 +469,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
                   {!testResult.success && testResult.error && (
                     <div className="mt-2 text-xs">
                       <div>오류 코드: {testResult.error.code}</div>
-                      {testResult.error.details && <div className="mt-1 text-red-600">{testResult.error.details}</div>}
+                      {testResult.error.details && <div className="mt-1 text-destructive">{testResult.error.details}</div>}
                     </div>
                   )}
                 </div>
diff --git a/frontend/components/admin/LayoutFormModal.tsx b/frontend/components/admin/LayoutFormModal.tsx
index 972caa7c..b2fe9804 100644
--- a/frontend/components/admin/LayoutFormModal.tsx
+++ b/frontend/components/admin/LayoutFormModal.tsx
@@ -238,10 +238,10 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
         <div className="mb-6 flex items-center justify-center">
           <div className="flex items-center gap-4">
             <div
-              className={`flex items-center gap-2 ${step === "basic" ? "text-blue-600" : step === "template" || step === "advanced" ? "text-green-600" : "text-gray-400"}`}
+              className={`flex items-center gap-2 ${step === "basic" ? "text-primary" : step === "template" || step === "advanced" ? "text-green-600" : "text-gray-400"}`}
             >
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "basic" ? "bg-blue-100 text-blue-600" : step === "template" || step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "basic" ? "bg-primary/20 text-primary" : step === "template" || step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
               >
                 1
               </div>
@@ -249,19 +249,19 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
             </div>
             <div className="h-px w-8 bg-gray-300" />
             <div
-              className={`flex items-center gap-2 ${step === "template" ? "text-blue-600" : step === "advanced" ? "text-green-600" : "text-gray-400"}`}
+              className={`flex items-center gap-2 ${step === "template" ? "text-primary" : step === "advanced" ? "text-green-600" : "text-gray-400"}`}
             >
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "template" ? "bg-blue-100 text-blue-600" : step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "template" ? "bg-primary/20 text-primary" : step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
               >
                 2
               </div>
               <span className="text-sm font-medium">템플릿 선택</span>
             </div>
             <div className="h-px w-8 bg-gray-300" />
-            <div className={`flex items-center gap-2 ${step === "advanced" ? "text-blue-600" : "text-gray-400"}`}>
+            <div className={`flex items-center gap-2 ${step === "advanced" ? "text-primary" : "text-gray-400"}`}>
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "advanced" ? "bg-blue-100 text-blue-600" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "advanced" ? "bg-primary/20 text-primary" : "bg-gray-100"}`}
               >
                 3
               </div>
@@ -304,13 +304,13 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                       <Card
                         key={category.id}
                         className={`cursor-pointer transition-all ${
-                          formData.category === category.id ? "bg-blue-50 ring-2 ring-blue-500" : "hover:bg-gray-50"
+                          formData.category === category.id ? "bg-accent ring-2 ring-blue-500" : "hover:bg-gray-50"
                         }`}
                         onClick={() => setFormData((prev) => ({ ...prev, category: category.id }))}
                       >
                         <CardContent className="p-4">
                           <div className="flex items-center gap-3">
-                            <IconComponent className="h-5 w-5 text-gray-600" />
+                            <IconComponent className="h-5 w-5 text-muted-foreground" />
                             <div>
                               <div className="font-medium">{category.name}</div>
                               <div className="text-xs text-gray-500">{category.description}</div>
@@ -346,7 +346,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                     <Card
                       key={template.id}
                       className={`cursor-pointer transition-all ${
-                        formData.template === template.id ? "bg-blue-50 ring-2 ring-blue-500" : "hover:bg-gray-50"
+                        formData.template === template.id ? "bg-accent ring-2 ring-blue-500" : "hover:bg-gray-50"
                       }`}
                       onClick={() =>
                         setFormData((prev) => ({
@@ -362,7 +362,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                             <div className="font-medium">{template.name}</div>
                             <Badge variant="secondary">{template.zones}개 영역</Badge>
                           </div>
-                          <div className="text-sm text-gray-600">{template.description}</div>
+                          <div className="text-sm text-muted-foreground">{template.description}</div>
                           <div className="text-xs text-gray-500">예: {template.example}</div>
                           <div className="rounded bg-gray-100 p-2 text-center font-mono text-xs">{template.icon}</div>
                         </div>
@@ -427,7 +427,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
             <div className="space-y-4">
               {generationResult ? (
                 <Alert
-                  className={generationResult.success ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"}
+                  className={generationResult.success ? "border-green-200 bg-green-50" : "border-destructive/20 bg-destructive/10"}
                 >
                   <Info className="h-4 w-4" />
                   <AlertDescription className={generationResult.success ? "text-green-800" : "text-red-800"}>
@@ -479,7 +479,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                       <div>
                         <strong>생성될 파일:</strong>
                       </div>
-                      <ul className="ml-4 space-y-1 text-xs text-gray-600">
+                      <ul className="ml-4 space-y-1 text-xs text-muted-foreground">
                         <li>• {formData.name.toLowerCase()}/index.ts</li>
                         <li>
                           • {formData.name.toLowerCase()}/{formData.name}Layout.tsx
diff --git a/frontend/components/admin/MenuFormModal.tsx b/frontend/components/admin/MenuFormModal.tsx
index 501a0b8d..f8d80592 100644
--- a/frontend/components/admin/MenuFormModal.tsx
+++ b/frontend/components/admin/MenuFormModal.tsx
@@ -826,10 +826,10 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
 
                 {/* 선택된 화면 정보 표시 */}
                 {selectedScreen && (
-                  <div className="rounded-md border bg-blue-50 p-3">
+                  <div className="rounded-md border bg-accent p-3">
                     <div className="text-sm font-medium text-blue-900">{selectedScreen.screenName}</div>
-                    <div className="text-xs text-blue-600">코드: {selectedScreen.screenCode}</div>
-                    <div className="text-xs text-blue-600">생성된 URL: {formData.menuUrl}</div>
+                    <div className="text-xs text-primary">코드: {selectedScreen.screenCode}</div>
+                    <div className="text-xs text-primary">생성된 URL: {formData.menuUrl}</div>
                   </div>
                 )}
               </div>
diff --git a/frontend/components/admin/MenuManagement.tsx b/frontend/components/admin/MenuManagement.tsx
index 81c94ae0..ab7ec016 100644
--- a/frontend/components/admin/MenuManagement.tsx
+++ b/frontend/components/admin/MenuManagement.tsx
@@ -828,7 +828,7 @@ export const MenuManagement: React.FC = () => {
                       <CardContent className="space-y-3 pt-4">
                       <Card
                         className={`cursor-pointer transition-all ${
-                          selectedMenuType === "admin" ? "border-blue-500 bg-blue-50" : "hover:border-gray-300"
+                          selectedMenuType === "admin" ? "border-primary bg-accent" : "hover:border-gray-300"
                         }`}
                         onClick={() => handleMenuTypeChange("admin")}
                       >
@@ -836,7 +836,7 @@ export const MenuManagement: React.FC = () => {
                           <div className="flex items-center justify-between">
                             <div>
                               <h3 className="font-medium">{getUITextSync("menu.management.admin")}</h3>
-                              <p className="mt-1 text-sm text-gray-600">
+                              <p className="mt-1 text-sm text-muted-foreground">
                                 {getUITextSync("menu.management.admin.description")}
                               </p>
                             </div>
@@ -849,7 +849,7 @@ export const MenuManagement: React.FC = () => {
 
                       <Card
                         className={`cursor-pointer transition-all ${
-                          selectedMenuType === "user" ? "border-blue-500 bg-blue-50" : "hover:border-gray-300"
+                          selectedMenuType === "user" ? "border-primary bg-accent" : "hover:border-gray-300"
                         }`}
                         onClick={() => handleMenuTypeChange("user")}
                       >
@@ -857,7 +857,7 @@ export const MenuManagement: React.FC = () => {
                           <div className="flex items-center justify-between">
                             <div>
                               <h3 className="font-medium">{getUITextSync("menu.management.user")}</h3>
-                              <p className="mt-1 text-sm text-gray-600">
+                              <p className="mt-1 text-sm text-muted-foreground">
                                 {getUITextSync("menu.management.user.description")}
                               </p>
                             </div>
@@ -997,7 +997,7 @@ export const MenuManagement: React.FC = () => {
                         </div>
 
                         <div className="flex items-end">
-                          <div className="text-sm text-gray-600">
+                          <div className="text-sm text-muted-foreground">
                             {getUITextSync("menu.list.search.result", { count: getCurrentMenus().length })}
                           </div>
                         </div>
@@ -1006,7 +1006,7 @@ export const MenuManagement: React.FC = () => {
 
                         <div className="flex-1 overflow-hidden">
                           <div className="mb-4 flex items-center justify-between">
-                            <div className="text-sm text-gray-600">
+                            <div className="text-sm text-muted-foreground">
                               {getUITextSync("menu.list.total", { count: getCurrentMenus().length })}
                             </div>
                             <div className="flex space-x-2">
diff --git a/frontend/components/admin/MenuTable.tsx b/frontend/components/admin/MenuTable.tsx
index 40b01fa3..5df95d81 100644
--- a/frontend/components/admin/MenuTable.tsx
+++ b/frontend/components/admin/MenuTable.tsx
@@ -67,7 +67,7 @@ export const MenuTable: React.FC<MenuTableProps> = ({
   const getLevelBadge = (level: number) => {
     switch (level) {
       case 0:
-        return "bg-blue-100 text-blue-800";
+        return "bg-primary/20 text-blue-800";
       case 1:
         return "bg-green-100 text-green-800";
       case 2:
@@ -239,7 +239,7 @@ export const MenuTable: React.FC<MenuTableProps> = ({
                       </div>
                     </TableCell>
                     <TableCell>{seq}</TableCell>
-                    <TableCell className="text-sm text-gray-600">
+                    <TableCell className="text-sm text-muted-foreground">
                       <div className="flex flex-col">
                         <span
                           className={`font-medium ${companyName && companyName !== getText(MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED) ? "text-green-600" : "text-gray-500"}`}
@@ -253,12 +253,12 @@ export const MenuTable: React.FC<MenuTableProps> = ({
                         )}
                       </div>
                     </TableCell>
-                    <TableCell className="text-left text-sm text-gray-600">
+                    <TableCell className="text-left text-sm text-muted-foreground">
                       <div className="max-w-[200px]">
                         {menuUrl ? (
                           <div className="group relative">
                             <div
-                              className={`cursor-pointer transition-colors hover:text-blue-600 ${
+                              className={`cursor-pointer transition-colors hover:text-primary ${
                                 menuUrl.length > 30 ? "truncate" : ""
                               }`}
                               onClick={() => {
diff --git a/frontend/components/admin/MonitoringDashboard.tsx b/frontend/components/admin/MonitoringDashboard.tsx
index 43fc1819..500dd4fb 100644
--- a/frontend/components/admin/MonitoringDashboard.tsx
+++ b/frontend/components/admin/MonitoringDashboard.tsx
@@ -74,8 +74,8 @@ export default function MonitoringDashboard() {
   const getStatusBadge = (status: string) => {
     const variants = {
       completed: "bg-green-100 text-green-800",
-      failed: "bg-red-100 text-red-800",
-      running: "bg-blue-100 text-blue-800",
+      failed: "bg-destructive/20 text-red-800",
+      running: "bg-primary/20 text-blue-800",
       pending: "bg-yellow-100 text-yellow-800",
       cancelled: "bg-gray-100 text-gray-800",
     };
@@ -129,7 +129,7 @@ export default function MonitoringDashboard() {
             variant="outline"
             size="sm"
             onClick={toggleAutoRefresh}
-            className={autoRefresh ? "bg-blue-50 text-blue-600" : ""}
+            className={autoRefresh ? "bg-accent text-primary" : ""}
           >
             {autoRefresh ? <Pause className="h-4 w-4 mr-1" /> : <Play className="h-4 w-4 mr-1" />}
             자동 새로고침
@@ -167,7 +167,7 @@ export default function MonitoringDashboard() {
             <div className="text-2xl">🔄</div>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-blue-600">{monitoring.running_jobs}</div>
+            <div className="text-2xl font-bold text-primary">{monitoring.running_jobs}</div>
             <p className="text-xs text-muted-foreground">
               현재 실행 중인 작업
             </p>
@@ -193,7 +193,7 @@ export default function MonitoringDashboard() {
             <div className="text-2xl">❌</div>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-red-600">{monitoring.failed_jobs_today}</div>
+            <div className="text-2xl font-bold text-destructive">{monitoring.failed_jobs_today}</div>
             <p className="text-xs text-muted-foreground">
               주의가 필요한 작업
             </p>
@@ -269,7 +269,7 @@ export default function MonitoringDashboard() {
                     </TableCell>
                     <TableCell className="max-w-xs">
                       {execution.error_message ? (
-                        <span className="text-red-600 text-sm truncate block">
+                        <span className="text-destructive text-sm truncate block">
                           {execution.error_message}
                         </span>
                       ) : (
diff --git a/frontend/components/admin/MultiLang.tsx b/frontend/components/admin/MultiLang.tsx
index 0d9c2a98..abdadcdb 100644
--- a/frontend/components/admin/MultiLang.tsx
+++ b/frontend/components/admin/MultiLang.tsx
@@ -673,7 +673,7 @@ export default function MultiLangPage() {
         <button
           onClick={() => setActiveTab("keys")}
           className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-            activeTab === "keys" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+            activeTab === "keys" ? "bg-accent0 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
           }`}
         >
           다국어 키 관리
@@ -681,7 +681,7 @@ export default function MultiLangPage() {
         <button
           onClick={() => setActiveTab("languages")}
           className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-            activeTab === "languages" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+            activeTab === "languages" ? "bg-accent0 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
           }`}
         >
           언어 관리
@@ -698,7 +698,7 @@ export default function MultiLangPage() {
             </CardHeader>
             <CardContent>
               <div className="mb-4 flex items-center justify-between">
-                <div className="text-sm text-gray-600">총 {languages.length}개의 언어가 등록되어 있습니다.</div>
+                <div className="text-sm text-muted-foreground">총 {languages.length}개의 언어가 등록되어 있습니다.</div>
                 <div className="flex space-x-2">
                   {selectedLanguages.size > 0 && (
                     <Button variant="destructive" onClick={handleDeleteLanguages}>
@@ -759,13 +759,13 @@ export default function MultiLangPage() {
                   </div>
 
                   <div className="flex items-end">
-                    <div className="text-sm text-gray-600">검색 결과: {getFilteredLangKeys().length}건</div>
+                    <div className="text-sm text-muted-foreground">검색 결과: {getFilteredLangKeys().length}건</div>
                   </div>
                 </div>
 
                 {/* 테이블 영역 */}
                 <div>
-                  <div className="mb-2 text-sm text-gray-600">전체: {getFilteredLangKeys().length}건</div>
+                  <div className="mb-2 text-sm text-muted-foreground">전체: {getFilteredLangKeys().length}건</div>
                   <DataTable
                     columns={columns}
                     data={getFilteredLangKeys()}
diff --git a/frontend/components/admin/ScreenAssignmentTab.tsx b/frontend/components/admin/ScreenAssignmentTab.tsx
index 18c84e5c..e6554908 100644
--- a/frontend/components/admin/ScreenAssignmentTab.tsx
+++ b/frontend/components/admin/ScreenAssignmentTab.tsx
@@ -231,10 +231,10 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                         (selectedMenu as any).menu_name_kor ||
                         "메뉴"}
                     </h3>
-                    <p className="text-sm text-gray-600">
+                    <p className="text-sm text-muted-foreground">
                       URL: {selectedMenu.menu_url || selectedMenu.MENU_URL || (selectedMenu as any).menu_url || "없음"}
                     </p>
-                    <p className="text-sm text-gray-600">
+                    <p className="text-sm text-muted-foreground">
                       설명:{" "}
                       {selectedMenu.menu_desc || selectedMenu.MENU_DESC || (selectedMenu as any).menu_desc || "없음"}
                     </p>
@@ -294,7 +294,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                           {screen.isActive === "Y" ? "활성" : "비활성"}
                         </Badge>
                       </div>
-                      <p className="mt-1 text-sm text-gray-600">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         테이블: {screen.tableName} | 생성일: {screen.createdDate.toLocaleDateString()}
                       </p>
                       {screen.description && <p className="mt-1 text-sm text-gray-500">{screen.description}</p>}
@@ -306,7 +306,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                         setSelectedScreen(screen);
                         setShowUnassignDialog(true);
                       }}
-                      className="text-red-600 hover:text-red-700"
+                      className="text-destructive hover:text-red-700"
                     >
                       <X className="h-4 w-4" />
                     </Button>
@@ -347,7 +347,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                   <div
                     key={screen.screenId}
                     className={`cursor-pointer rounded-lg border p-3 transition-colors ${
-                      selectedScreen?.screenId === screen.screenId ? "border-blue-500 bg-blue-50" : "hover:bg-gray-50"
+                      selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-gray-50"
                     }`}
                     onClick={() => setSelectedScreen(screen)}
                   >
@@ -357,7 +357,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                         {screen.screenCode}
                       </Badge>
                     </div>
-                    <p className="mt-1 text-sm text-gray-600">테이블: {screen.tableName}</p>
+                    <p className="mt-1 text-sm text-muted-foreground">테이블: {screen.tableName}</p>
                   </div>
                 ))
               )}
diff --git a/frontend/components/admin/SortableCodeItem.tsx b/frontend/components/admin/SortableCodeItem.tsx
index c3731be0..21d456c7 100644
--- a/frontend/components/admin/SortableCodeItem.tsx
+++ b/frontend/components/admin/SortableCodeItem.tsx
@@ -83,7 +83,7 @@ export function SortableCodeItem({
                 "cursor-pointer transition-colors",
                 code.isActive === "Y" || code.is_active === "Y"
                   ? "bg-green-100 text-green-800 hover:bg-green-200 hover:text-green-900"
-                  : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-700",
+                  : "bg-gray-100 text-muted-foreground hover:bg-gray-200 hover:text-gray-700",
                 updateCodeMutation.isPending && "cursor-not-allowed opacity-50",
               )}
               onClick={(e) => {
@@ -100,7 +100,7 @@ export function SortableCodeItem({
               {code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
             </Badge>
           </div>
-          <p className="mt-1 text-sm text-gray-600">{code.codeValue || code.code_value}</p>
+          <p className="mt-1 text-sm text-muted-foreground">{code.codeValue || code.code_value}</p>
           {code.description && <p className="mt-1 text-sm text-gray-500">{code.description}</p>}
         </div>
 
diff --git a/frontend/components/admin/UserFormModal.tsx b/frontend/components/admin/UserFormModal.tsx
index 0e32a95c..8427fa00 100644
--- a/frontend/components/admin/UserFormModal.tsx
+++ b/frontend/components/admin/UserFormModal.tsx
@@ -24,9 +24,9 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
       case "success":
         return "text-green-600";
       case "error":
-        return "text-red-600";
+        return "text-destructive";
       default:
-        return "text-blue-600";
+        return "text-primary";
     }
   };
 
@@ -37,7 +37,7 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
           <DialogTitle className={getTypeColor()}>{title}</DialogTitle>
         </DialogHeader>
         <div className="py-4">
-          <p className="text-sm text-gray-600">{message}</p>
+          <p className="text-sm text-muted-foreground">{message}</p>
         </div>
         <div className="flex justify-end">
           <Button onClick={onClose} className="w-20">
@@ -398,7 +398,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess }: UserFormModalProps
                 {/* 중복확인 결과 메시지 */}
                 {duplicateCheckMessage && (
                   <div
-                    className={`mt-1 text-sm ${duplicateCheckType === "success" ? "text-green-600" : "text-red-600"}`}
+                    className={`mt-1 text-sm ${duplicateCheckType === "success" ? "text-green-600" : "text-destructive"}`}
                   >
                     {duplicateCheckMessage}
                   </div>
diff --git a/frontend/components/admin/UserPasswordResetModal.tsx b/frontend/components/admin/UserPasswordResetModal.tsx
index 46928bd3..086b1556 100644
--- a/frontend/components/admin/UserPasswordResetModal.tsx
+++ b/frontend/components/admin/UserPasswordResetModal.tsx
@@ -196,7 +196,7 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
             </div>
 
             {/* 비밀번호 일치 여부 표시 */}
-            {showMismatchError && <p className="text-sm text-red-600">비밀번호가 일치하지 않습니다.</p>}
+            {showMismatchError && <p className="text-sm text-destructive">비밀번호가 일치하지 않습니다.</p>}
             {isPasswordMatch && <p className="text-sm text-green-600">비밀번호가 일치합니다.</p>}
           </div>
 
diff --git a/frontend/components/admin/UserStatusConfirmDialog.tsx b/frontend/components/admin/UserStatusConfirmDialog.tsx
index 72ab1aa3..59a7c1df 100644
--- a/frontend/components/admin/UserStatusConfirmDialog.tsx
+++ b/frontend/components/admin/UserStatusConfirmDialog.tsx
@@ -33,8 +33,8 @@ export function UserStatusConfirmDialog({
   const currentStatusText = USER_STATUS_LABELS[user.status as keyof typeof USER_STATUS_LABELS] || user.status;
   const newStatusText = USER_STATUS_LABELS[newStatus as keyof typeof USER_STATUS_LABELS] || newStatus;
 
-  const currentStatusColor = user.status === "active" ? "text-blue-600" : "text-gray-600";
-  const newStatusColor = newStatus === "active" ? "text-blue-600" : "text-gray-600";
+  const currentStatusColor = user.status === "active" ? "text-primary" : "text-muted-foreground";
+  const newStatusColor = newStatus === "active" ? "text-primary" : "text-muted-foreground";
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
@@ -67,7 +67,7 @@ export function UserStatusConfirmDialog({
           <Button variant="outline" onClick={onCancel}>
             취소
           </Button>
-          <Button onClick={onConfirm} className={newStatus === "active" ? "bg-blue-500 hover:bg-blue-600" : ""}>
+          <Button onClick={onConfirm} variant="default">
             변경
           </Button>
         </DialogFooter>
diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx
index d7074aec..f5180379 100644
--- a/frontend/components/admin/dashboard/CanvasElement.tsx
+++ b/frontend/components/admin/dashboard/CanvasElement.tsx
@@ -227,7 +227,7 @@ export function CanvasElement({ element, isSelected, onUpdate, onRemove, onSelec
             <button
               className="
                 w-6 h-6 flex items-center justify-center
-                text-gray-400 hover:bg-blue-500 hover:text-white
+                text-gray-400 hover:bg-accent0 hover:text-white
                 rounded transition-colors duration-200
               "
               onClick={() => onConfigure(element)}
@@ -240,7 +240,7 @@ export function CanvasElement({ element, isSelected, onUpdate, onRemove, onSelec
           <button
             className="
               element-close w-6 h-6 flex items-center justify-center
-              text-gray-400 hover:bg-red-500 hover:text-white
+              text-gray-400 hover:bg-destructive/100 hover:text-white
               rounded transition-colors duration-200
             "
             onClick={handleRemove}
@@ -259,7 +259,7 @@ export function CanvasElement({ element, isSelected, onUpdate, onRemove, onSelec
             {isLoadingData ? (
               <div className="w-full h-full flex items-center justify-center text-gray-500">
                 <div className="text-center">
-                  <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-2" />
+                  <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-2" />
                   <div className="text-sm">데이터 로딩 중...</div>
                 </div>
               </div>
diff --git a/frontend/components/admin/dashboard/ChartConfigPanel.tsx b/frontend/components/admin/dashboard/ChartConfigPanel.tsx
index 5ba617a3..d67cfefb 100644
--- a/frontend/components/admin/dashboard/ChartConfigPanel.tsx
+++ b/frontend/components/admin/dashboard/ChartConfigPanel.tsx
@@ -225,7 +225,7 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartC
           {/* 설정 미리보기 */}
           <div className="p-3 bg-gray-50 rounded-lg">
             <div className="text-sm font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
-            <div className="text-xs text-gray-600 space-y-1">
+            <div className="text-xs text-muted-foreground space-y-1">
               <div><strong>X축:</strong> {currentConfig.xAxis || '미설정'}</div>
               <div>
                 <strong>Y축:</strong>{' '}
@@ -240,7 +240,7 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartC
               )}
               <div><strong>데이터 행 수:</strong> {queryResult.rows.length}개</div>
               {Array.isArray(currentConfig.yAxis) && currentConfig.yAxis.length > 1 && (
-                <div className="text-blue-600 mt-2">
+                <div className="text-primary mt-2">
                   ✨ 다중 시리즈 차트가 생성됩니다!
                 </div>
               )}
@@ -249,7 +249,7 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange }: ChartC
 
           {/* 필수 필드 확인 */}
           {(!currentConfig.xAxis || !currentConfig.yAxis) && (
-            <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+            <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
               <div className="text-red-800 text-sm">
                 ⚠️ X축과 Y축을 모두 설정해야 차트가 표시됩니다.
               </div>
diff --git a/frontend/components/admin/dashboard/DashboardCanvas.tsx b/frontend/components/admin/dashboard/DashboardCanvas.tsx
index ed0b253f..0b15e59f 100644
--- a/frontend/components/admin/dashboard/DashboardCanvas.tsx
+++ b/frontend/components/admin/dashboard/DashboardCanvas.tsx
@@ -75,7 +75,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
           w-full min-h-full relative
           bg-gray-100
           bg-grid-pattern
-          ${isDragOver ? 'bg-blue-50' : ''}
+          ${isDragOver ? 'bg-accent' : ''}
         `}
         style={{
           backgroundImage: `
diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx
index e13209f1..60d03747 100644
--- a/frontend/components/admin/dashboard/DashboardDesigner.tsx
+++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx
@@ -207,7 +207,7 @@ export default function DashboardDesigner() {
     return (
       <div className="flex h-full items-center justify-center bg-gray-50">
         <div className="text-center">
-          <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+          <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
           <div className="text-lg font-medium text-gray-700">대시보드 로딩 중...</div>
           <div className="text-sm text-gray-500 mt-1">잠시만 기다려주세요</div>
         </div>
@@ -221,7 +221,7 @@ export default function DashboardDesigner() {
       <div className="flex-1 relative overflow-auto border-r-2 border-gray-300">
         {/* 편집 중인 대시보드 표시 */}
         {dashboardTitle && (
-          <div className="absolute top-2 left-2 z-10 bg-blue-500 text-white px-3 py-1 rounded-lg text-sm font-medium shadow-lg">
+          <div className="absolute top-2 left-2 z-10 bg-accent0 text-white px-3 py-1 rounded-lg text-sm font-medium shadow-lg">
             📝 편집 중: {dashboardTitle}
           </div>
         )}
diff --git a/frontend/components/admin/dashboard/DashboardSidebar.tsx b/frontend/components/admin/dashboard/DashboardSidebar.tsx
index a10cbc7c..619f0dba 100644
--- a/frontend/components/admin/dashboard/DashboardSidebar.tsx
+++ b/frontend/components/admin/dashboard/DashboardSidebar.tsx
@@ -31,7 +31,7 @@ export function DashboardSidebar() {
             type="chart"
             subtype="bar"
             onDragStart={handleDragStart}
-            className="border-l-4 border-blue-500"
+            className="border-l-4 border-primary"
           />
           <DraggableItem
             icon="📚"
diff --git a/frontend/components/admin/dashboard/ElementConfigModal.tsx b/frontend/components/admin/dashboard/ElementConfigModal.tsx
index 765b4ef1..4155a00a 100644
--- a/frontend/components/admin/dashboard/ElementConfigModal.tsx
+++ b/frontend/components/admin/dashboard/ElementConfigModal.tsx
@@ -70,13 +70,13 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
             <h2 className="text-xl font-semibold text-gray-800">
               {element.title} 설정
             </h2>
-            <p className="text-sm text-gray-600 mt-1">
+            <p className="text-sm text-muted-foreground mt-1">
               데이터 소스와 차트 설정을 구성하세요
             </p>
           </div>
           <button
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 text-2xl"
+            className="text-gray-400 hover:text-muted-foreground text-2xl"
           >
             ×
           </button>
@@ -89,7 +89,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
             className={`
               px-6 py-3 text-sm font-medium border-b-2 transition-colors
               ${activeTab === 'query' 
-                ? 'border-blue-500 text-blue-600 bg-blue-50' 
+                ? 'border-primary text-primary bg-accent' 
                 : 'border-transparent text-gray-500 hover:text-gray-700'}
             `}
           >
@@ -100,7 +100,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
             className={`
               px-6 py-3 text-sm font-medium border-b-2 transition-colors
               ${activeTab === 'chart' 
-                ? 'border-blue-500 text-blue-600 bg-blue-50' 
+                ? 'border-primary text-primary bg-accent' 
                 : 'border-transparent text-gray-500 hover:text-gray-700'}
             `}
           >
@@ -147,7 +147,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
           <div className="flex gap-3">
             <button
               onClick={onClose}
-              className="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
+              className="px-4 py-2 text-muted-foreground border border-gray-300 rounded-lg hover:bg-gray-50"
             >
               취소
             </button>
@@ -155,7 +155,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
               onClick={handleSave}
               disabled={!dataSource.query || (!chartConfig.xAxis || !chartConfig.yAxis)}
               className="
-                px-4 py-2 bg-blue-500 text-white rounded-lg
+                px-4 py-2 bg-accent0 text-white rounded-lg
                 hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed
               "
             >
diff --git a/frontend/components/admin/dashboard/QueryEditor.tsx b/frontend/components/admin/dashboard/QueryEditor.tsx
index 671024cd..5aa70a80 100644
--- a/frontend/components/admin/dashboard/QueryEditor.tsx
+++ b/frontend/components/admin/dashboard/QueryEditor.tsx
@@ -153,7 +153,7 @@ ORDER BY Q4 DESC;`
             onClick={executeQuery}
             disabled={isExecuting || !query.trim()}
             className="
-              px-3 py-1 bg-blue-500 text-white rounded text-sm
+              px-3 py-1 bg-accent0 text-white rounded text-sm
               hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed
               flex items-center gap-1
             "
@@ -172,10 +172,10 @@ ORDER BY Q4 DESC;`
 
       {/* 샘플 쿼리 버튼들 */}
       <div className="flex gap-2 flex-wrap">
-        <span className="text-sm text-gray-600">샘플 쿼리:</span>
+        <span className="text-sm text-muted-foreground">샘플 쿼리:</span>
         <button
           onClick={() => insertSampleQuery('comparison')}
-          className="px-2 py-1 text-xs bg-blue-100 hover:bg-blue-200 rounded font-medium"
+          className="px-2 py-1 text-xs bg-primary/20 hover:bg-blue-200 rounded font-medium"
         >
           🔥 제품 비교
         </button>
@@ -224,7 +224,7 @@ ORDER BY Q4 DESC;`
 
       {/* 새로고침 간격 설정 */}
       <div className="flex items-center gap-3">
-        <label className="text-sm text-gray-600">자동 새로고침:</label>
+        <label className="text-sm text-muted-foreground">자동 새로고침:</label>
         <select
           value={dataSource?.refreshInterval || 30000}
           onChange={(e) => onDataSourceChange({
@@ -246,7 +246,7 @@ ORDER BY Q4 DESC;`
 
       {/* 오류 메시지 */}
       {error && (
-        <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+        <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
           <div className="text-red-800 text-sm font-medium">❌ 오류</div>
           <div className="text-red-700 text-sm mt-1">{error}</div>
         </div>
@@ -282,7 +282,7 @@ ORDER BY Q4 DESC;`
                   {queryResult.rows.slice(0, 10).map((row, idx) => (
                     <tr key={idx} className="border-b border-gray-100">
                       {queryResult.columns.map((col, colIdx) => (
-                        <td key={colIdx} className="py-1 px-2 text-gray-600">
+                        <td key={colIdx} className="py-1 px-2 text-muted-foreground">
                           {String(row[col] ?? '')}
                         </td>
                       ))}
diff --git a/frontend/components/auth/AuthGuard.tsx b/frontend/components/auth/AuthGuard.tsx
index 4a47de35..a02dce73 100644
--- a/frontend/components/auth/AuthGuard.tsx
+++ b/frontend/components/auth/AuthGuard.tsx
@@ -115,7 +115,7 @@ export function AuthGuard({
     console.log("AuthGuard: 로딩 중 - fallback 표시");
     return (
       <div>
-        <div className="mb-4 rounded bg-blue-100 p-4">
+        <div className="mb-4 rounded bg-primary/20 p-4">
           <h3 className="font-bold">AuthGuard 로딩 중...</h3>
           <pre className="text-xs">{JSON.stringify(authDebugInfo, null, 2)}</pre>
         </div>
@@ -129,10 +129,10 @@ export function AuthGuard({
     console.log("AuthGuard: 인증 실패 - fallback 표시");
     return (
       <div>
-        <div className="mb-4 rounded bg-red-100 p-4">
+        <div className="mb-4 rounded bg-destructive/20 p-4">
           <h3 className="font-bold">인증 실패</h3>
           {redirectCountdown !== null && (
-            <div className="mb-2 text-red-600">
+            <div className="mb-2 text-destructive">
               <strong>리다이렉트 카운트다운:</strong> {redirectCountdown}초 후 {redirectTo}로 이동
             </div>
           )}
@@ -150,7 +150,7 @@ export function AuthGuard({
         <div className="mb-4 rounded bg-orange-100 p-4">
           <h3 className="font-bold">관리자 권한 없음</h3>
           {redirectCountdown !== null && (
-            <div className="mb-2 text-red-600">
+            <div className="mb-2 text-destructive">
               <strong>리다이렉트 카운트다운:</strong> {redirectCountdown}초 후 {redirectTo}로 이동
             </div>
           )}
diff --git a/frontend/components/auth/ErrorMessage.tsx b/frontend/components/auth/ErrorMessage.tsx
index 698e275e..039c2ccd 100644
--- a/frontend/components/auth/ErrorMessage.tsx
+++ b/frontend/components/auth/ErrorMessage.tsx
@@ -9,6 +9,6 @@ export function ErrorMessage({ message }: ErrorMessageProps) {
   if (!message) return null;
 
   return (
-    <div className="my-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{message}</div>
+    <div className="my-4 rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-red-700">{message}</div>
   );
 }
diff --git a/frontend/components/auth/LoginHeader.tsx b/frontend/components/auth/LoginHeader.tsx
index 0dfd959c..ea02f782 100644
--- a/frontend/components/auth/LoginHeader.tsx
+++ b/frontend/components/auth/LoginHeader.tsx
@@ -1,4 +1,4 @@
-import { Shield } from "lucide-react";
+import Image from "next/image";
 import { UI_CONFIG } from "@/constants/auth";
 
 /**
@@ -7,10 +7,16 @@ import { UI_CONFIG } from "@/constants/auth";
 export function LoginHeader() {
   return (
     <div className="text-center">
-      <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-xl bg-slate-900 shadow-lg">
-        <Shield className="h-10 w-10 text-white" />
+      <div className="mx-auto mb-2 flex items-center justify-center">
+        <Image
+          src="/images/vexplor.png"
+          alt={UI_CONFIG.COMPANY_NAME}
+          width={180}
+          height={60}
+          className="object-contain"
+          priority
+        />
       </div>
-      <h1 className="mb-2 text-3xl font-bold text-slate-900">{UI_CONFIG.COMPANY_NAME}</h1>
     </div>
   );
 }
diff --git a/frontend/components/common/DataTable.tsx b/frontend/components/common/DataTable.tsx
index ebb5086e..a1a3f03e 100644
--- a/frontend/components/common/DataTable.tsx
+++ b/frontend/components/common/DataTable.tsx
@@ -263,7 +263,7 @@ export const createStatusColumn = (accessorKey: string, header: string) => ({
                 ? "bg-gray-50 text-gray-700"
                 : status === "pending" || status === "대기"
                   ? "bg-yellow-50 text-yellow-700"
-                  : "bg-red-50 text-red-700",
+                  : "bg-destructive/10 text-red-700",
           )}
         >
           {status || "-"}
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index 453ddfe8..bc483325 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -42,63 +42,36 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
 
   // 화면의 실제 크기 계산 함수
   const calculateScreenDimensions = (components: ComponentData[]) => {
-    let maxWidth = 800; // 최소 너비
-    let maxHeight = 600; // 최소 높이
+    // 모든 컴포넌트의 경계 찾기
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = 0;
+    let maxY = 0;
 
-    console.log("🔍 화면 크기 계산 시작:", { componentsCount: components.length });
-
-    components.forEach((component, index) => {
-      // position과 size는 BaseComponent에서 별도 속성으로 관리
+    components.forEach((component) => {
       const x = parseFloat(component.position?.x?.toString() || "0");
       const y = parseFloat(component.position?.y?.toString() || "0");
       const width = parseFloat(component.size?.width?.toString() || "100");
       const height = parseFloat(component.size?.height?.toString() || "40");
 
-      // 컴포넌트의 오른쪽 끝과 아래쪽 끝 계산
-      const rightEdge = x + width;
-      const bottomEdge = y + height;
-
-      console.log(
-        `📏 컴포넌트 ${index + 1} (${component.id}): x=${x}, y=${y}, w=${width}, h=${height}, rightEdge=${rightEdge}, bottomEdge=${bottomEdge}`,
-      );
-
-      const newMaxWidth = Math.max(maxWidth, rightEdge + 100); // 여백 증가
-      const newMaxHeight = Math.max(maxHeight, bottomEdge + 100); // 여백 증가
-
-      if (newMaxWidth > maxWidth || newMaxHeight > maxHeight) {
-        console.log(`🔄 크기 업데이트: ${maxWidth}×${maxHeight} → ${newMaxWidth}×${newMaxHeight}`);
-        maxWidth = newMaxWidth;
-        maxHeight = newMaxHeight;
-      }
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x + width);
+      maxY = Math.max(maxY, y + height);
     });
 
-    console.log("📊 컴포넌트 기반 계산 결과:", { maxWidth, maxHeight });
+    // 컨텐츠 실제 크기 + 넉넉한 여백 (양쪽 각 64px)
+    const contentWidth = maxX - minX;
+    const contentHeight = maxY - minY;
+    const padding = 128; // 좌우 또는 상하 합계 여백
 
-    // 브라우저 크기 제한 확인 (더욱 관대하게 설정)
-    const maxAllowedWidth = window.innerWidth * 0.98; // 95% -> 98%
-    const maxAllowedHeight = window.innerHeight * 0.95; // 90% -> 95%
+    const finalWidth = Math.max(contentWidth + padding, 400); // 최소 400px
+    const finalHeight = Math.max(contentHeight + padding, 300); // 최소 300px
 
-    console.log("📐 크기 제한 정보:", {
-      계산된크기: { maxWidth, maxHeight },
-      브라우저제한: { maxAllowedWidth, maxAllowedHeight },
-      브라우저크기: { width: window.innerWidth, height: window.innerHeight },
-    });
-
-    // 컴포넌트 기반 크기를 우선 적용하되, 브라우저 제한을 고려
-    const finalDimensions = {
-      width: Math.min(maxWidth, maxAllowedWidth),
-      height: Math.min(maxHeight, maxAllowedHeight),
+    return {
+      width: Math.min(finalWidth, window.innerWidth * 0.98),
+      height: Math.min(finalHeight, window.innerHeight * 0.95),
     };
-
-    console.log("✅ 최종 화면 크기:", finalDimensions);
-    console.log("🔧 크기 적용 분석:", {
-      width적용: maxWidth <= maxAllowedWidth ? "컴포넌트기준" : "브라우저제한",
-      height적용: maxHeight <= maxAllowedHeight ? "컴포넌트기준" : "브라우저제한",
-      컴포넌트크기: { maxWidth, maxHeight },
-      최종크기: finalDimensions,
-    });
-
-    return finalDimensions;
   };
 
   // 전역 모달 이벤트 리스너
@@ -113,10 +86,24 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       });
     };
 
+    const handleCloseModal = () => {
+      console.log("🚪 ScreenModal 닫기 이벤트 수신");
+      setModalState({
+        isOpen: false,
+        screenId: null,
+        title: "",
+        size: "md",
+      });
+      setScreenData(null);
+      setFormData({});
+    };
+
     window.addEventListener("openScreenModal", handleOpenModal as EventListener);
+    window.addEventListener("closeSaveModal", handleCloseModal);
 
     return () => {
       window.removeEventListener("openScreenModal", handleOpenModal as EventListener);
+      window.removeEventListener("closeSaveModal", handleCloseModal);
     };
   }, []);
 
@@ -190,17 +177,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       };
     }
 
-    // 헤더 높이와 패딩을 고려한 전체 높이 계산 (실제 측정값 기반)
-    const headerHeight = 80; // DialogHeader + 패딩 (더 정확한 값)
+    // 헤더 높이만 고려 (패딩 제거)
+    const headerHeight = 73; // DialogHeader 실제 높이 (border-b px-6 py-4 포함)
     const totalHeight = screenDimensions.height + headerHeight;
 
     return {
       className: "overflow-hidden p-0",
       style: {
-        width: `${Math.min(screenDimensions.width + 48, window.innerWidth * 0.98)}px`, // 브라우저 제한 적용
-        height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`, // 브라우저 제한 적용
-        maxWidth: "98vw", // 안전장치
-        maxHeight: "95vh", // 안전장치
+        width: `${Math.min(screenDimensions.width, window.innerWidth * 0.98)}px`, // 화면 크기 그대로
+        height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`, // 헤더 + 화면 높이
+        maxWidth: "98vw",
+        maxHeight: "95vh",
       },
     };
   };
@@ -215,12 +202,12 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           <DialogDescription>{loading ? "화면을 불러오는 중입니다..." : "화면 내용을 표시합니다."}</DialogDescription>
         </DialogHeader>
 
-        <div className="flex-1 p-4">
+        <div className="flex-1 flex items-center justify-center overflow-hidden">
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
                 <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
-                <p className="text-gray-600">화면을 불러오는 중...</p>
+                <p className="text-muted-foreground">화면을 불러오는 중...</p>
               </div>
             </div>
           ) : screenData ? (
@@ -229,6 +216,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
               style={{
                 width: screenDimensions?.width || 800,
                 height: screenDimensions?.height || 600,
+                transformOrigin: 'center center',
+                maxWidth: '100%',
+                maxHeight: '100%',
               }}
             >
               {screenData.components.map((component) => (
@@ -258,7 +248,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
             </div>
           ) : (
             <div className="flex h-full items-center justify-center">
-              <p className="text-gray-600">화면 데이터가 없습니다.</p>
+              <p className="text-muted-foreground">화면 데이터가 없습니다.</p>
             </div>
           )}
         </div>
diff --git a/frontend/components/common/ValidationMessage.tsx b/frontend/components/common/ValidationMessage.tsx
index b13cddd3..b46653b7 100644
--- a/frontend/components/common/ValidationMessage.tsx
+++ b/frontend/components/common/ValidationMessage.tsx
@@ -18,6 +18,6 @@ export function ValidationMessage({ message, isValid, isLoading, className }: Va
   }
 
   return (
-    <p className={cn("text-sm transition-colors", isValid ? "text-green-600" : "text-red-600", className)}>{message}</p>
+    <p className={cn("text-sm transition-colors", isValid ? "text-green-600" : "text-destructive", className)}>{message}</p>
   );
 }
diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index b745da3d..da75a511 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -105,10 +105,10 @@ export function DashboardViewer({ elements, dashboardId, refreshInterval }: Dash
   return (
     <div className="relative w-full h-full bg-gray-100 overflow-auto">
       {/* 새로고침 상태 표시 */}
-      <div className="absolute top-4 right-4 z-10 bg-white rounded-lg shadow-sm px-3 py-2 text-xs text-gray-600">
+      <div className="absolute top-4 right-4 z-10 bg-white rounded-lg shadow-sm px-3 py-2 text-xs text-muted-foreground">
         마지막 업데이트: {lastRefresh.toLocaleTimeString()}
         {Array.from(loadingElements).length > 0 && (
-          <span className="ml-2 text-blue-600">
+          <span className="ml-2 text-primary">
             ({Array.from(loadingElements).length}개 로딩 중...)
           </span>
         )}
@@ -164,7 +164,7 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
           <button
             onClick={onRefresh}
             disabled={isLoading}
-            className="text-gray-400 hover:text-gray-600 disabled:opacity-50"
+            className="text-gray-400 hover:text-muted-foreground disabled:opacity-50"
             title="새로고침"
           >
             {isLoading ? (
@@ -203,8 +203,8 @@ function ViewerElement({ element, data, isLoading, onRefresh }: ViewerElementPro
       {isLoading && (
         <div className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center">
           <div className="text-center">
-            <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-2" />
-            <div className="text-sm text-gray-600">업데이트 중...</div>
+            <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-2" />
+            <div className="text-sm text-muted-foreground">업데이트 중...</div>
           </div>
         </div>
       )}
diff --git a/frontend/components/dataflow/DataFlowList.tsx b/frontend/components/dataflow/DataFlowList.tsx
index 349b72ec..7f05d91a 100644
--- a/frontend/components/dataflow/DataFlowList.tsx
+++ b/frontend/components/dataflow/DataFlowList.tsx
@@ -244,7 +244,7 @@ export default function DataFlowList({ onDesignDiagram }: DataFlowListProps) {
                     </div>
                   </TableCell>
                   <TableCell>
-                    <div className="flex items-center text-sm text-gray-600">
+                    <div className="flex items-center text-sm text-muted-foreground">
                       <Calendar className="mr-1 h-3 w-3 text-gray-400" />
                       {new Date(diagram.updatedAt).toLocaleDateString()}
                     </div>
@@ -269,7 +269,7 @@ export default function DataFlowList({ onDesignDiagram }: DataFlowListProps) {
                           <Copy className="mr-2 h-4 w-4" />
                           복사
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleDelete(diagram)} className="text-red-600">
+                        <DropdownMenuItem onClick={() => handleDelete(diagram)} className="text-destructive">
                           <Trash2 className="mr-2 h-4 w-4" />
                           삭제
                         </DropdownMenuItem>
@@ -302,7 +302,7 @@ export default function DataFlowList({ onDesignDiagram }: DataFlowListProps) {
           >
             이전
           </Button>
-          <span className="text-sm text-gray-600">
+          <span className="text-sm text-muted-foreground">
             {currentPage} / {totalPages}
           </span>
           <Button
@@ -342,11 +342,11 @@ export default function DataFlowList({ onDesignDiagram }: DataFlowListProps) {
       <Dialog open={showDeleteModal} onOpenChange={setShowDeleteModal}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle className="text-red-600">관계 삭제</DialogTitle>
+            <DialogTitle className="text-destructive">관계 삭제</DialogTitle>
             <DialogDescription>
               &ldquo;{selectedDiagramForAction?.diagramName}&rdquo; 관계를 완전히 삭제하시겠습니까?
               <br />
-              <span className="font-medium text-red-600">
+              <span className="font-medium text-destructive">
                 이 작업은 되돌릴 수 없으며, 모든 관계 정보가 영구적으로 삭제됩니다.
               </span>
             </DialogDescription>
diff --git a/frontend/components/dataflow/DataFlowSidebar.tsx b/frontend/components/dataflow/DataFlowSidebar.tsx
index de757462..f38f4c3a 100644
--- a/frontend/components/dataflow/DataFlowSidebar.tsx
+++ b/frontend/components/dataflow/DataFlowSidebar.tsx
@@ -54,7 +54,7 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
 
           <button
             onClick={onClearAll}
-            className="w-full rounded-lg bg-red-500 p-3 font-medium text-white transition-colors hover:bg-red-600"
+            className="w-full rounded-lg bg-destructive/100 p-3 font-medium text-white transition-colors hover:bg-red-600"
           >
             🗑️ 전체 삭제
           </button>
@@ -72,7 +72,7 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
         {/* 통계 정보 */}
         <div className="mt-6 rounded-lg bg-gray-50 p-4">
           <div className="mb-2 text-sm font-semibold text-gray-700">통계</div>
-          <div className="space-y-1 text-sm text-gray-600">
+          <div className="space-y-1 text-sm text-muted-foreground">
             <div className="flex justify-between">
               <span>테이블 노드:</span>
               <span className="font-medium">{nodes.length}개</span>
diff --git a/frontend/components/dataflow/EdgeInfoPanel.tsx b/frontend/components/dataflow/EdgeInfoPanel.tsx
index ad9be50e..2fcfffd6 100644
--- a/frontend/components/dataflow/EdgeInfoPanel.tsx
+++ b/frontend/components/dataflow/EdgeInfoPanel.tsx
@@ -85,11 +85,11 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
 
         {/* 관계 화살표 */}
         <div className="flex justify-center">
-          <span className="text-l text-gray-600">→</span>
+          <span className="text-l text-muted-foreground">→</span>
         </div>
 
         {/* To 테이블 */}
-        <div className="rounded-lg border-l-4 border-blue-400 bg-blue-50 p-3">
+        <div className="rounded-lg border-l-4 border-blue-400 bg-accent p-3">
           <div className="mb-2 text-xs font-bold tracking-wide text-blue-700 uppercase">TO</div>
           <div className="mb-2 text-base font-bold text-gray-800">{edgeInfo.toTable}</div>
           <div className="space-y-1">
@@ -97,7 +97,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
               {edgeInfo.toColumns.map((column, index) => (
                 <span
                   key={index}
-                  className="inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 ring-1 ring-blue-200"
+                  className="inline-flex items-center rounded-md bg-primary/20 px-2.5 py-0.5 text-xs font-medium text-blue-800 ring-1 ring-blue-200"
                 >
                   {column}
                 </span>
diff --git a/frontend/components/dataflow/RelationshipListModal.tsx b/frontend/components/dataflow/RelationshipListModal.tsx
index 6df6c17b..fbbc445b 100644
--- a/frontend/components/dataflow/RelationshipListModal.tsx
+++ b/frontend/components/dataflow/RelationshipListModal.tsx
@@ -134,18 +134,18 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
   };
 
   return (
-    <div className="pointer-events-auto absolute top-4 right-4 z-40 w-80 rounded-xl border border-blue-200 bg-white shadow-lg">
+    <div className="pointer-events-auto absolute top-4 right-4 z-40 w-80 rounded-xl border border-primary/20 bg-white shadow-lg">
       {/* 헤더 */}
       <div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
         <div className="flex items-center gap-2">
-          <div className="rounded-full bg-blue-100 p-1">
-            <span className="text-sm text-blue-600">🔗</span>
+          <div className="rounded-full bg-primary/20 p-1">
+            <span className="text-sm text-primary">🔗</span>
           </div>
           <div className="text-sm font-semibold text-gray-800">테이블 간 관계 목록</div>
         </div>
         <button
           onClick={onClose}
-          className="flex h-6 w-6 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+          className="flex h-6 w-6 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-muted-foreground"
         >
           <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -159,7 +159,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
           {relationships.map((relationship) => (
             <div
               key={relationship.id}
-              className="rounded-lg border border-gray-200 p-3 transition-all hover:border-blue-300 hover:bg-blue-50"
+              className="rounded-lg border border-gray-200 p-3 transition-all hover:border-blue-300 hover:bg-accent"
             >
               <div className="mb-1 flex items-center justify-between">
                 <h4 className="text-sm font-medium text-gray-900">
@@ -172,7 +172,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
                       e.stopPropagation();
                       handleEdit(relationship);
                     }}
-                    className="flex h-6 w-6 items-center justify-center rounded text-gray-400 hover:bg-blue-100 hover:text-blue-600"
+                    className="flex h-6 w-6 items-center justify-center rounded text-gray-400 hover:bg-primary/20 hover:text-primary"
                     title="관계 편집"
                   >
                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -190,7 +190,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
                       e.stopPropagation();
                       handleDelete(relationship);
                     }}
-                    className="flex h-6 w-6 items-center justify-center rounded text-gray-400 hover:bg-red-100 hover:text-red-600"
+                    className="flex h-6 w-6 items-center justify-center rounded text-gray-400 hover:bg-destructive/20 hover:text-destructive"
                     title="관계 삭제"
                   >
                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -204,7 +204,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
                   </button>
                 </div>
               </div>
-              <div className="space-y-1 text-xs text-gray-600">
+              <div className="space-y-1 text-xs text-muted-foreground">
                 <p>타입: {relationship.connectionType}</p>
                 <p>From: {relationship.fromTable}</p>
                 <p>To: {relationship.toTable}</p>
diff --git a/frontend/components/dataflow/SaveDiagramModal.tsx b/frontend/components/dataflow/SaveDiagramModal.tsx
index 02ae7f99..4f87f69e 100644
--- a/frontend/components/dataflow/SaveDiagramModal.tsx
+++ b/frontend/components/dataflow/SaveDiagramModal.tsx
@@ -149,26 +149,26 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
                 onKeyPress={handleKeyPress}
                 placeholder="예: 사용자-부서 관계도"
                 disabled={isLoading}
-                className={nameError ? "border-red-500 focus:border-red-500" : ""}
+                className={nameError ? "border-destructive focus:border-destructive" : ""}
               />
-              {nameError && <p className="text-sm text-red-600">{nameError}</p>}
+              {nameError && <p className="text-sm text-destructive">{nameError}</p>}
             </div>
 
             {/* 관계 요약 정보 */}
             <div className="grid grid-cols-3 gap-4 rounded-lg bg-gray-50 p-4">
               <div className="text-center">
-                <div className="text-2xl font-bold text-blue-600">{relationships.length}</div>
-                <div className="text-sm text-gray-600">관계 수</div>
+                <div className="text-2xl font-bold text-primary">{relationships.length}</div>
+                <div className="text-sm text-muted-foreground">관계 수</div>
               </div>
               <div className="text-center">
                 <div className="text-2xl font-bold text-green-600">{connectedTables.length}</div>
-                <div className="text-sm text-gray-600">연결된 테이블</div>
+                <div className="text-sm text-muted-foreground">연결된 테이블</div>
               </div>
               <div className="text-center">
                 <div className="text-2xl font-bold text-purple-600">
                   {relationships.reduce((sum, rel) => sum + rel.fromColumns.length, 0)}
                 </div>
-                <div className="text-sm text-gray-600">연결된 컬럼</div>
+                <div className="text-sm text-muted-foreground">연결된 컬럼</div>
               </div>
             </div>
 
@@ -212,7 +212,7 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
                               {relationship.relationshipName || `${relationship.fromTable} → ${relationship.toTable}`}
                             </span>
                           </div>
-                          <div className="mt-1 text-xs text-gray-600">
+                          <div className="mt-1 text-xs text-muted-foreground">
                             {relationship.fromTable} → {relationship.toTable}
                           </div>
                         </div>
diff --git a/frontend/components/dataflow/SelectedTablesPanel.tsx b/frontend/components/dataflow/SelectedTablesPanel.tsx
index 7788ffda..9f1f1c55 100644
--- a/frontend/components/dataflow/SelectedTablesPanel.tsx
+++ b/frontend/components/dataflow/SelectedTablesPanel.tsx
@@ -24,12 +24,12 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
   canCreateConnection,
 }) => {
   return (
-    <div className="pointer-events-auto absolute top-4 left-4 z-40 w-80 rounded-xl border border-blue-200 bg-white shadow-lg">
+    <div className="pointer-events-auto absolute top-4 left-4 z-40 w-80 rounded-xl border border-primary/20 bg-white shadow-lg">
       {/* 헤더 */}
       <div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
         <div className="flex items-center gap-2">
-          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100">
-            <span className="text-sm text-blue-600">📋</span>
+          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/20">
+            <span className="text-sm text-primary">📋</span>
           </div>
           <div>
             <div className="text-sm font-semibold text-gray-800">선택된 테이블</div>
@@ -44,7 +44,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
         </div>
         <button
           onClick={onClose}
-          className="flex h-5 w-5 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+          className="flex h-5 w-5 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-muted-foreground"
         >
           ✕
         </button>
@@ -66,8 +66,8 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
                     index === 0
                       ? "border-l-4 border-emerald-400 bg-emerald-50"
                       : index === 1
-                        ? "border-l-4 border-blue-400 bg-blue-50"
-                        : "bg-gray-50"
+                        ? "border-l-4 border-blue-400 bg-accent"
+                        : "bg-muted"
                   }`}
                 >
                   <div className="mb-1 flex items-center justify-between">
@@ -88,7 +88,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
                       </div>
                     )}
                   </div>
-                  <div className="text-xs text-gray-600">{tableName}</div>
+                  <div className="text-xs text-muted-foreground">{tableName}</div>
                 </div>
 
                 {/* 연결 화살표 (마지막이 아닌 경우) */}
@@ -110,7 +110,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
           disabled={!canCreateConnection}
           className={`flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-medium transition-colors ${
             canCreateConnection
-              ? "bg-blue-500 text-white hover:bg-blue-600"
+              ? "bg-accent0 text-white hover:bg-blue-600"
               : "cursor-not-allowed bg-gray-300 text-gray-500"
           }`}
         >
@@ -119,7 +119,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
         </button>
         <button
           onClick={onClear}
-          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-gray-200 px-3 py-2 text-xs font-medium text-gray-600 hover:bg-gray-300"
+          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-gray-200 px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-gray-300"
         >
           <span>🗑️</span>
           <span>초기화</span>
diff --git a/frontend/components/dataflow/TableNode.tsx b/frontend/components/dataflow/TableNode.tsx
index 67fdf8b0..6837efc0 100644
--- a/frontend/components/dataflow/TableNode.tsx
+++ b/frontend/components/dataflow/TableNode.tsx
@@ -56,7 +56,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
               <div
                 key={columnKey}
                 className={`relative cursor-pointer rounded px-2 py-1 text-xs transition-colors ${
-                  isSelected ? "bg-blue-100 text-blue-800 ring-2 ring-blue-500" : "text-gray-700 hover:bg-gray-100"
+                  isSelected ? "bg-primary/20 text-blue-800 ring-2 ring-blue-500" : "text-gray-700 hover:bg-gray-100"
                 }`}
                 onClick={() => onColumnClick(table.tableName, columnKey)}
               >
diff --git a/frontend/components/dataflow/TableSelector.tsx b/frontend/components/dataflow/TableSelector.tsx
index 86fc676f..d2aa68ac 100644
--- a/frontend/components/dataflow/TableSelector.tsx
+++ b/frontend/components/dataflow/TableSelector.tsx
@@ -93,7 +93,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
       </div>
 
       {/* 오류 메시지 */}
-      {error && <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>}
+      {error && <div className="rounded-lg bg-destructive/10 p-4 text-sm text-destructive">{error}</div>}
 
       {/* 테이블 목록 */}
       <div className="max-h-96 space-y-2 overflow-y-auto">
@@ -114,7 +114,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
               <Card
                 key={table.tableName}
                 className={`cursor-pointer transition-all hover:shadow-md ${
-                  isSelected ? "cursor-not-allowed border-blue-500 bg-blue-50 opacity-60" : "hover:border-gray-300"
+                  isSelected ? "cursor-not-allowed border-primary bg-accent opacity-60" : "hover:border-gray-300"
                 }`}
                 onDoubleClick={() => !isSelected && handleAddTable(table)}
               >
@@ -126,10 +126,10 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
                 </CardHeader>
                 <CardContent className="pt-0">
                   <div className="space-y-2">
-                    <div className="flex items-center gap-2 text-xs text-gray-600">
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                       <Database className="h-3 w-3" />
                       <span className="font-mono">{table.tableName}</span>
-                      {isSelected && <span className="font-medium text-blue-600">(추가됨)</span>}
+                      {isSelected && <span className="font-medium text-primary">(추가됨)</span>}
                     </div>
 
                     {table.description && <p className="line-clamp-2 text-xs text-gray-500">{table.description}</p>}
@@ -142,7 +142,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
       </div>
 
       {/* 통계 정보 */}
-      <div className="rounded-lg bg-gray-50 p-3 text-xs text-gray-600">
+      <div className="rounded-lg bg-gray-50 p-3 text-xs text-muted-foreground">
         <div className="flex items-center justify-between">
           <span>전체 테이블: {tables.length}개</span>
           {searchTerm && <span>검색 결과: {filteredTables.length}개</span>}
diff --git a/frontend/components/dataflow/condition/ConditionRenderer.tsx b/frontend/components/dataflow/condition/ConditionRenderer.tsx
index 0b58bc02..4cb5b915 100644
--- a/frontend/components/dataflow/condition/ConditionRenderer.tsx
+++ b/frontend/components/dataflow/condition/ConditionRenderer.tsx
@@ -81,7 +81,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
                       value={condition.logicalOperator || "AND"}
                       onValueChange={(value: "AND" | "OR") => onUpdateCondition(index, "logicalOperator", value)}
                     >
-                      <SelectTrigger className="h-8 w-24 border-blue-200 bg-blue-50 text-xs">
+                      <SelectTrigger className="h-8 w-24 border-primary/20 bg-accent text-xs">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -92,11 +92,11 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
                   )}
                   {/* 그룹 레벨에 따른 들여쓰기 */}
                   <div
-                    className="flex items-center gap-2 rounded border-2 border-dashed border-blue-300 bg-blue-50/50 p-2"
+                    className="flex items-center gap-2 rounded border-2 border-dashed border-blue-300 bg-accent/50 p-2"
                     style={{ marginLeft: `${(condition.groupLevel || 0) * 20}px` }}
                   >
-                    <span className="font-mono text-sm text-blue-600">(</span>
-                    <span className="text-xs text-blue-600">그룹 시작</span>
+                    <span className="font-mono text-sm text-primary">(</span>
+                    <span className="text-xs text-primary">그룹 시작</span>
                     <Button size="sm" variant="ghost" onClick={() => onRemoveCondition(index)} className="h-6 w-6 p-0">
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -110,11 +110,11 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
               return (
                 <div key={condition.id} className="flex items-center gap-2">
                   <div
-                    className="flex items-center gap-2 rounded border-2 border-dashed border-blue-300 bg-blue-50/50 p-2"
+                    className="flex items-center gap-2 rounded border-2 border-dashed border-blue-300 bg-accent/50 p-2"
                     style={{ marginLeft: `${(condition.groupLevel || 0) * 20}px` }}
                   >
-                    <span className="font-mono text-sm text-blue-600">)</span>
-                    <span className="text-xs text-blue-600">그룹 끝</span>
+                    <span className="font-mono text-sm text-primary">)</span>
+                    <span className="text-xs text-primary">그룹 끝</span>
                     <Button size="sm" variant="ghost" onClick={() => onRemoveCondition(index)} className="h-6 w-6 p-0">
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -126,7 +126,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
                       value={conditions[index + 1]?.logicalOperator || "AND"}
                       onValueChange={(value: "AND" | "OR") => onUpdateCondition(index + 1, "logicalOperator", value)}
                     >
-                      <SelectTrigger className="h-8 w-24 border-blue-200 bg-blue-50 text-xs">
+                      <SelectTrigger className="h-8 w-24 border-primary/20 bg-accent text-xs">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -150,7 +150,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
                       value={condition.logicalOperator || "AND"}
                       onValueChange={(value: "AND" | "OR") => onUpdateCondition(index, "logicalOperator", value)}
                     >
-                      <SelectTrigger className="h-8 w-24 border-blue-200 bg-blue-50 text-xs">
+                      <SelectTrigger className="h-8 w-24 border-primary/20 bg-accent text-xs">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
diff --git a/frontend/components/dataflow/condition/WebTypeInput.tsx b/frontend/components/dataflow/condition/WebTypeInput.tsx
index 55c4310f..d92e663f 100644
--- a/frontend/components/dataflow/condition/WebTypeInput.tsx
+++ b/frontend/components/dataflow/condition/WebTypeInput.tsx
@@ -400,7 +400,7 @@ export const WebTypeInput: React.FC<WebTypeInputProps> = ({
             multiple={detailSettings.multiple as boolean}
           />
           {value && (
-            <div className="flex items-center gap-2 text-sm text-gray-600">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
               <Upload className="h-4 w-4" />
               <span>선택된 파일: {value}</span>
             </div>
diff --git a/frontend/components/dataflow/connection/ActionConditionsSection.tsx b/frontend/components/dataflow/connection/ActionConditionsSection.tsx
index ff498dc0..b22391ba 100644
--- a/frontend/components/dataflow/connection/ActionConditionsSection.tsx
+++ b/frontend/components/dataflow/connection/ActionConditionsSection.tsx
@@ -84,24 +84,24 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
         <summary
           className={`flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium hover:bg-gray-50 hover:text-gray-900 ${
             isConditionRequired && !hasValidConditions
-              ? "border-red-300 bg-red-50 text-red-700"
+              ? "border-red-300 bg-destructive/10 text-red-700"
               : "border-gray-200 text-gray-700"
           }`}
         >
           <div className="flex items-center gap-2">
             🔍 이 액션의 실행 조건
             {isConditionRequired ? (
-              <span className="rounded bg-red-100 px-1 py-0.5 text-xs font-semibold text-red-700">필수</span>
+              <span className="rounded bg-destructive/20 px-1 py-0.5 text-xs font-semibold text-red-700">필수</span>
             ) : (
               <span className="text-gray-500">(선택사항)</span>
             )}
             {action.conditions && action.conditions.length > 0 && (
-              <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-700">
+              <span className="rounded-full bg-primary/20 px-2 py-0.5 text-xs text-blue-700">
                 {action.conditions.length}개
               </span>
             )}
             {isConditionRequired && !hasValidConditions && (
-              <span className="rounded bg-red-100 px-1 py-0.5 text-xs text-red-600">⚠️ 조건 필요</span>
+              <span className="rounded bg-destructive/20 px-1 py-0.5 text-xs text-destructive">⚠️ 조건 필요</span>
             )}
           </div>
           {action.conditions && action.conditions.length > 0 && (
@@ -151,8 +151,8 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
             <div
               className={`rounded border p-3 text-xs ${
                 isConditionRequired
-                  ? "border-red-200 bg-red-50 text-red-700"
-                  : "border-gray-200 bg-gray-50 text-gray-600"
+                  ? "border-destructive/20 bg-destructive/10 text-red-700"
+                  : "border-gray-200 bg-gray-50 text-muted-foreground"
               }`}
             >
               {isConditionRequired ? (
diff --git a/frontend/components/dataflow/connection/ActionFieldMappings.tsx b/frontend/components/dataflow/connection/ActionFieldMappings.tsx
index 86034b05..91e5e1c9 100644
--- a/frontend/components/dataflow/connection/ActionFieldMappings.tsx
+++ b/frontend/components/dataflow/connection/ActionFieldMappings.tsx
@@ -228,7 +228,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
       <div className="mb-2 flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Label className="text-xs font-medium">필드 매핑</Label>
-          <span className="text-xs text-red-600">(필수)</span>
+          <span className="text-xs text-destructive">(필수)</span>
         </div>
         <Button size="sm" variant="outline" onClick={addFieldMapping} className="h-6 text-xs">
           <Plus className="mr-1 h-2 w-2" />
@@ -244,7 +244,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
             {/* 컴팩트한 매핑 표시 */}
             <div className="flex items-center gap-2 text-xs">
               {/* 소스 */}
-              <div className="flex items-center gap-1 rounded bg-blue-50 px-2 py-1">
+              <div className="flex items-center gap-1 rounded bg-accent px-2 py-1">
                 <Select
                   value={mapping.sourceTable || "__EMPTY__"}
                   onValueChange={(value) => {
@@ -277,7 +277,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                       updateFieldMapping(mappingIndex, "sourceTable", "");
                       updateFieldMapping(mappingIndex, "sourceField", "");
                     }}
-                    className="ml-1 flex h-4 w-4 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600"
+                    className="ml-1 flex h-4 w-4 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200 hover:text-muted-foreground"
                     title="소스 테이블 지우기"
                   >
                     ×
@@ -390,7 +390,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
 
         {/* 필드 매핑이 없을 때 안내 메시지 */}
         {action.fieldMappings.length === 0 && (
-          <div className="rounded border border-red-200 bg-red-50 p-3 text-xs text-red-700">
+          <div className="rounded border border-destructive/20 bg-destructive/10 p-3 text-xs text-red-700">
             <div className="flex items-start gap-2">
               <span className="text-red-500">⚠️</span>
               <div>
diff --git a/frontend/components/dataflow/connection/ColumnTableSection.tsx b/frontend/components/dataflow/connection/ColumnTableSection.tsx
index b34b768c..631403b0 100644
--- a/frontend/components/dataflow/connection/ColumnTableSection.tsx
+++ b/frontend/components/dataflow/connection/ColumnTableSection.tsx
@@ -190,7 +190,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                     : isMapped
                       ? "bg-gray-100 text-gray-700"
                       : oppositeSelectedColumn && !isTypeCompatible
-                        ? "cursor-not-allowed bg-red-50 text-red-400 opacity-60"
+                        ? "cursor-not-allowed bg-destructive/10 text-red-400 opacity-60"
                         : isClickable
                           ? "cursor-pointer hover:bg-gray-50"
                           : "cursor-not-allowed bg-gray-100 text-gray-400"
@@ -250,7 +250,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                       : hasDefaultValue
                         ? "bg-gray-100"
                         : oppositeSelectedColumn && !isTypeCompatible
-                          ? "bg-red-50 opacity-60"
+                          ? "bg-destructive/10 opacity-60"
                           : "bg-white"
                 }`}
               >
@@ -292,7 +292,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
 
                     {isMapped && (
                       <div className="mt-2 flex items-center gap-2">
-                        <span className="truncate text-xs text-blue-600">← {mapping.fromColumnName}</span>
+                        <span className="truncate text-xs text-primary">← {mapping.fromColumnName}</span>
                         <button
                           onClick={(e) => {
                             e.stopPropagation();
@@ -327,7 +327,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
       </div>
 
       {/* 하단 통계 */}
-      <div className="rounded-b-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
+      <div className="rounded-b-lg border border-gray-200 bg-gray-50 p-3 text-xs text-muted-foreground">
         <div className="flex items-center justify-between">
           <span>
             {isFromTable ? "매핑됨" : "설정됨"}: {mappedCount}/{columns.length}
diff --git a/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx b/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
index 1959582a..b4218bde 100644
--- a/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
+++ b/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
@@ -18,14 +18,14 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
         <div
           className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
             config.connectionType === "simple-key"
-              ? "border-blue-500 bg-blue-50"
+              ? "border-primary bg-accent"
               : "border-gray-200 hover:border-gray-300"
           }`}
           onClick={() => onConfigChange({ ...config, connectionType: "simple-key" })}
         >
           <Key className="mx-auto h-6 w-6 text-blue-500" />
           <div className="mt-1 text-xs font-medium">단순 키값 연결</div>
-          <div className="text-xs text-gray-600">중계 테이블 생성</div>
+          <div className="text-xs text-muted-foreground">중계 테이블 생성</div>
         </div>
 
         <div
@@ -38,7 +38,7 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
         >
           <Save className="mx-auto h-6 w-6 text-green-500" />
           <div className="mt-1 text-xs font-medium">데이터 저장</div>
-          <div className="text-xs text-gray-600">필드 매핑 저장</div>
+          <div className="text-xs text-muted-foreground">필드 매핑 저장</div>
         </div>
 
         <div
@@ -54,7 +54,7 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
         >
           <Globe className="mx-auto h-6 w-6 text-orange-500" />
           <div className="mt-1 text-xs font-medium">외부 호출</div>
-          <div className="text-xs text-gray-600">API/이메일 호출</div>
+          <div className="text-xs text-muted-foreground">API/이메일 호출</div>
         </div>
       </div>
     </div>
diff --git a/frontend/components/dataflow/connection/DeleteConditionPanel.tsx b/frontend/components/dataflow/connection/DeleteConditionPanel.tsx
index 7e60c9f9..d1468d64 100644
--- a/frontend/components/dataflow/connection/DeleteConditionPanel.tsx
+++ b/frontend/components/dataflow/connection/DeleteConditionPanel.tsx
@@ -299,7 +299,7 @@ export const DeleteConditionPanel: React.FC<DeleteConditionPanelProps> = ({
                   <SelectContent>
                     <SelectItem value="=">=</SelectItem>
                     <SelectItem value="!=">
-                      <span className="text-red-600">!=</span>
+                      <span className="text-destructive">!=</span>
                     </SelectItem>
                     <SelectItem value=">">&gt;</SelectItem>
                     <SelectItem value="<">&lt;</SelectItem>
@@ -308,11 +308,11 @@ export const DeleteConditionPanel: React.FC<DeleteConditionPanelProps> = ({
                     <SelectItem value="LIKE">LIKE</SelectItem>
                     <SelectItem value="IN">IN</SelectItem>
                     <SelectItem value="NOT IN">
-                      <span className="text-red-600">NOT IN</span>
+                      <span className="text-destructive">NOT IN</span>
                     </SelectItem>
                     <SelectItem value="EXISTS">EXISTS</SelectItem>
                     <SelectItem value="NOT EXISTS">
-                      <span className="text-red-600">NOT EXISTS</span>
+                      <span className="text-destructive">NOT EXISTS</span>
                     </SelectItem>
                   </SelectContent>
                 </Select>
diff --git a/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx b/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
index e55e23a6..b5b33362 100644
--- a/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
+++ b/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
@@ -446,9 +446,9 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
             <div className="flex items-center gap-3">
               <div>
                 <div className="font-semibold text-gray-800">매핑 진행 상황</div>
-                <div className="text-sm text-gray-600">
+                <div className="text-sm text-muted-foreground">
                   총 {toTableColumns.length}개 컬럼 중{" "}
-                  <span className="font-bold text-blue-600">
+                  <span className="font-bold text-primary">
                     {columnMappings.filter((m) => m.fromColumnName || (m.defaultValue && m.defaultValue.trim())).length}
                     개
                   </span>{" "}
diff --git a/frontend/components/dataflow/connection/SimpleKeySettings.tsx b/frontend/components/dataflow/connection/SimpleKeySettings.tsx
index 439d9e46..018fbb06 100644
--- a/frontend/components/dataflow/connection/SimpleKeySettings.tsx
+++ b/frontend/components/dataflow/connection/SimpleKeySettings.tsx
@@ -44,7 +44,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
         {/* 현재 선택된 테이블 표시 */}
         <div className="mb-4 grid grid-cols-2 gap-4">
           <div>
-            <Label className="text-xs font-medium text-gray-600">From 테이블</Label>
+            <Label className="text-xs font-medium text-muted-foreground">From 테이블</Label>
             <div className="mt-1">
               <span className="text-sm font-medium text-gray-800">
                 {availableTables.find((t) => t.tableName === selectedFromTable)?.displayName || selectedFromTable}
@@ -54,7 +54,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
           </div>
 
           <div>
-            <Label className="text-xs font-medium text-gray-600">To 테이블</Label>
+            <Label className="text-xs font-medium text-muted-foreground">To 테이블</Label>
             <div className="mt-1">
               <span className="text-sm font-medium text-gray-800">
                 {availableTables.find((t) => t.tableName === selectedToTable)?.displayName || selectedToTable}
@@ -67,7 +67,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
         {/* 컬럼 선택 */}
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <Label className="text-xs font-medium text-gray-600">From 컬럼</Label>
+            <Label className="text-xs font-medium text-muted-foreground">From 컬럼</Label>
             <div className="mt-2 max-h-32 overflow-y-auto rounded border bg-white p-2">
               {fromTableColumns.map((column) => (
                 <label key={column.columnName} className="flex items-center gap-2 py-1 text-sm">
@@ -100,7 +100,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
           </div>
 
           <div>
-            <Label className="text-xs font-medium text-gray-600">To 컬럼</Label>
+            <Label className="text-xs font-medium text-muted-foreground">To 컬럼</Label>
             <div className="mt-2 max-h-32 overflow-y-auto rounded border bg-white p-2">
               {toTableColumns.map((column) => (
                 <label key={column.columnName} className="flex items-center gap-2 py-1 text-sm">
@@ -137,7 +137,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
         {(selectedFromColumns.length > 0 || selectedToColumns.length > 0) && (
           <div className="mt-4 grid grid-cols-2 gap-4">
             <div>
-              <Label className="text-xs font-medium text-gray-600">선택된 From 컬럼</Label>
+              <Label className="text-xs font-medium text-muted-foreground">선택된 From 컬럼</Label>
               <div className="mt-1 flex flex-wrap gap-1">
                 {selectedFromColumns.length > 0 ? (
                   selectedFromColumns.map((column) => {
@@ -156,7 +156,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
             </div>
 
             <div>
-              <Label className="text-xs font-medium text-gray-600">선택된 To 컬럼</Label>
+              <Label className="text-xs font-medium text-muted-foreground">선택된 To 컬럼</Label>
               <div className="mt-1 flex flex-wrap gap-1">
                 {selectedToColumns.length > 0 ? (
                   selectedToColumns.map((column) => {
@@ -178,7 +178,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
       </div>
 
       {/* 단순 키값 연결 설정 */}
-      <div className="rounded-lg border border-l-4 border-l-blue-500 bg-blue-50/30 p-4">
+      <div className="rounded-lg border border-l-4 border-l-blue-500 bg-accent/30 p-4">
         <div className="mb-3 flex items-center gap-2">
           <Key className="h-4 w-4 text-blue-500" />
           <span className="text-sm font-medium">단순 키값 연결 설정</span>
diff --git a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
index 860724f2..cec7c238 100644
--- a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
+++ b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
@@ -37,7 +37,7 @@ export const DataConnectionDesigner: React.FC = () => {
         <h1 className="text-2xl font-bold text-gray-900">
           🎨 제어관리 - 데이터 연결 설정
         </h1>
-        <p className="text-gray-600 mt-1">
+        <p className="text-muted-foreground mt-1">
           시각적 필드 매핑으로 데이터 연결을 쉽게 설정하세요
                 </p>
               </div>
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
index 12dc4046..fa2cc2ad 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
@@ -51,7 +51,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
               <>
                 {/* 트랜잭션 설정 - 컴팩트 */}
                 <div className="space-y-2">
-                  <h4 className="text-xs font-medium text-gray-600">🔄 트랜잭션 설정</h4>
+                  <h4 className="text-xs font-medium text-muted-foreground">🔄 트랜잭션 설정</h4>
                   <div className="grid grid-cols-3 gap-2">
                     <div>
                       <Label htmlFor="batchSize" className="text-xs text-gray-500">
@@ -98,7 +98,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
               <>
                 {/* API 호출 설정 - 컴팩트 */}
                 <div className="space-y-2">
-                  <h4 className="text-xs font-medium text-gray-600">🌐 API 호출 설정</h4>
+                  <h4 className="text-xs font-medium text-muted-foreground">🌐 API 호출 설정</h4>
                   <div className="grid grid-cols-2 gap-2">
                     <div>
                       <Label htmlFor="timeout" className="text-xs text-gray-500">
@@ -131,7 +131,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
 
             {/* 로깅 설정 - 컴팩트 */}
             <div className="space-y-2">
-              <h4 className="text-xs font-medium text-gray-600">📝 로깅 설정</h4>
+              <h4 className="text-xs font-medium text-muted-foreground">📝 로깅 설정</h4>
               <div>
                 <Select value={settings.logLevel} onValueChange={(value) => handleSettingChange("logLevel", value)}>
                   <SelectTrigger className="h-7 text-xs">
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
index 0d5aa5e4..8c704beb 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
@@ -49,13 +49,13 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
               <div className={`p-2 rounded-lg ${
                 connectionType === type.id
                   ? "bg-orange-100 text-orange-600"
-                  : "bg-gray-100 text-gray-600"
+                  : "bg-gray-100 text-muted-foreground"
               }`}>
                 {type.icon}
               </div>
               <div>
                 <h3 className="font-medium text-gray-900">{type.label}</h3>
-                <p className="text-sm text-gray-600">{type.description}</p>
+                <p className="text-sm text-muted-foreground">{type.description}</p>
               </div>
             </div>
           </div>
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
index e574fefa..be62206b 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
@@ -88,9 +88,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
           {state.connectionType === "external_call" && (
             <>
               <Separator />
-              <div className="rounded-md bg-blue-50 p-3">
+              <div className="rounded-md bg-accent p-3">
                 <h3 className="mb-1 text-sm font-medium text-blue-800">외부 호출 모드</h3>
-                <p className="text-xs text-blue-600">우측 패널에서 REST API 설정을 구성하세요.</p>
+                <p className="text-xs text-primary">우측 패널에서 REST API 설정을 구성하세요.</p>
               </div>
             </>
           )}
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
index 92b79908..0618bcc6 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
@@ -35,9 +35,9 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
           </div>
         </div>
 
-        <div className="bg-red-50 p-3 rounded-lg border border-red-200">
+        <div className="bg-destructive/10 p-3 rounded-lg border border-destructive/20">
           <div className="flex items-center gap-2">
-            <XCircle className="w-4 h-4 text-red-600" />
+            <XCircle className="w-4 h-4 text-destructive" />
             <span className="text-sm font-medium text-red-800">오류 매핑</span>
           </div>
           <div className="text-2xl font-bold text-red-900 mt-1">
@@ -45,9 +45,9 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
           </div>
         </div>
 
-        <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
+        <div className="bg-accent p-3 rounded-lg border border-primary/20">
           <div className="flex items-center gap-2">
-            <Database className="w-4 h-4 text-blue-600" />
+            <Database className="w-4 h-4 text-primary" />
             <span className="text-sm font-medium text-blue-800">총 매핑</span>
           </div>
           <div className="text-2xl font-bold text-blue-900 mt-1">
@@ -88,7 +88,7 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
                     ? "border-orange-500 bg-orange-50"
                     : mapping.isValid
                     ? "border-green-200 bg-green-50 hover:border-green-300"
-                    : "border-red-200 bg-red-50 hover:border-red-300"
+                    : "border-destructive/20 bg-destructive/10 hover:border-red-300"
                 }`}
                 onClick={() => onMappingSelect(mapping.id)}
               >
@@ -126,13 +126,13 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
                     {mapping.isValid ? (
                       <CheckCircle className="w-4 h-4 text-green-600" />
                     ) : (
-                      <XCircle className="w-4 h-4 text-red-600" />
+                      <XCircle className="w-4 h-4 text-destructive" />
                     )}
                   </div>
                 </div>
                 
                 {mapping.validationMessage && (
-                  <p className="text-xs text-red-600 mt-1">
+                  <p className="text-xs text-destructive mt-1">
                     {mapping.validationMessage}
                   </p>
                 )}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
index 85c0656c..7b13e38c 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
@@ -273,7 +273,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                   .map((column) => (
                     <SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}>
                       <div className="flex items-center gap-2">
-                        <span className="text-blue-600">📤</span>
+                        <span className="text-primary">📤</span>
                         <span>{column.displayName || column.columnName}</span>
                         <Badge variant="outline" className="text-xs">
                           {column.webType || column.dataType}
@@ -359,7 +359,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
 
           {/* 선택된 날짜 타입에 대한 설명 */}
           {mapping.value?.startsWith("#") && mapping.value !== "#custom" && (
-            <div className="text-muted-foreground rounded bg-blue-50 p-2 text-xs">
+            <div className="text-muted-foreground rounded bg-accent p-2 text-xs">
               {mapping.value === "#NOW" && "⏰ 현재 날짜와 시간이 저장됩니다"}
               {mapping.value === "#TODAY" && "📅 현재 날짜 (00:00:00)가 저장됩니다"}
               {mapping.value === "#YESTERDAY" && "📅 어제 날짜가 저장됩니다"}
@@ -497,7 +497,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                             .map((column) => (
                               <SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}>
                                 <div className="flex items-center gap-2">
-                                  <span className="text-blue-600">📤</span>
+                                  <span className="text-primary">📤</span>
                                   <span>{column.displayName || column.columnName}</span>
                                 </div>
                               </SelectItem>
@@ -625,7 +625,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                                       .map((column) => (
                                         <SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}>
                                           <div className="flex items-center gap-2">
-                                            <span className="text-blue-600">📤</span>
+                                            <span className="text-primary">📤</span>
                                             <span>{column.displayName || column.columnName}</span>
                                           </div>
                                         </SelectItem>
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
index a26c9a0f..11b59d15 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
@@ -80,7 +80,7 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
         <h2 className="text-2xl font-bold text-gray-900 mb-2">
           연결 선택
         </h2>
-        <p className="text-gray-600">
+        <p className="text-muted-foreground">
           데이터를 가져올 연결과 저장할 연결을 선택하세요
         </p>
       </div>
@@ -89,8 +89,8 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
         {/* FROM 연결 */}
         <div className="space-y-4">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-              <span className="text-blue-600 font-bold">1</span>
+            <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
+              <span className="text-primary font-bold">1</span>
             </div>
             <h3 className="text-lg font-semibold text-gray-900">FROM 연결</h3>
             <span className="text-sm text-gray-500">(데이터 소스)</span>
@@ -102,20 +102,20 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
                 key={connection.id}
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedFrom === connection.id
-                    ? "border-blue-500 bg-blue-50 shadow-md"
+                    ? "border-primary bg-accent shadow-md"
                     : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
                 }`}
                 onClick={() => handleFromSelect(connection.id)}
               >
                 <div className="flex items-center gap-3">
-                  <Database className="w-6 h-6 text-blue-600" />
+                  <Database className="w-6 h-6 text-primary" />
                   <div className="flex-1">
                     <h4 className="font-medium text-gray-900">{connection.name}</h4>
-                    <p className="text-sm text-gray-600">{connection.type}</p>
+                    <p className="text-sm text-muted-foreground">{connection.type}</p>
                     <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
                   </div>
                   {selectedFrom === connection.id && (
-                    <CheckCircle className="w-5 h-5 text-blue-600" />
+                    <CheckCircle className="w-5 h-5 text-primary" />
                   )}
                 </div>
               </div>
@@ -155,7 +155,7 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
                   <Database className="w-6 h-6 text-green-600" />
                   <div className="flex-1">
                     <h4 className="font-medium text-gray-900">{connection.name}</h4>
-                    <p className="text-sm text-gray-600">{connection.type}</p>
+                    <p className="text-sm text-muted-foreground">{connection.type}</p>
                     <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
                   </div>
                   {selectedTo === connection.id && (
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx
index d4995b48..6254b807 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx
@@ -148,7 +148,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
       <CardContent className="flex h-full flex-col overflow-hidden p-0">
         <div className="min-h-0 flex-1 space-y-6 overflow-y-auto p-4">
           {/* 제어 실행 조건 안내 */}
-          <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
+          <div className="rounded-lg border border-primary/20 bg-accent p-4">
             <h4 className="mb-2 text-sm font-medium text-blue-800">제어 실행 조건이란?</h4>
             <div className="space-y-1 text-sm text-blue-700">
               <p>
@@ -363,7 +363,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
                           variant="ghost"
                           size="sm"
                           onClick={() => actions.deleteControlCondition(index)}
-                          className="text-red-600 hover:text-red-700"
+                          className="text-destructive hover:text-red-700"
                         >
                           <Trash2 className="h-4 w-4" />
                         </Button>
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
index b5f7bfb0..9513d42d 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
@@ -71,14 +71,14 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
         <h2 className="text-2xl font-bold text-gray-900 mb-2">
           필드 매핑
         </h2>
-        <p className="text-gray-600">
+        <p className="text-muted-foreground">
           소스 테이블의 필드를 대상 테이블의 필드에 드래그하여 매핑하세요
         </p>
       </div>
 
       {/* 매핑 통계 */}
       <div className="grid grid-cols-4 gap-4">
-        <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
+        <div className="bg-accent p-4 rounded-lg border border-primary/20">
           <div className="text-2xl font-bold text-blue-900">{fieldMappings.length}</div>
           <div className="text-sm text-blue-700">총 매핑</div>
         </div>
@@ -88,7 +88,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
           </div>
           <div className="text-sm text-green-700">유효한 매핑</div>
         </div>
-        <div className="bg-red-50 p-4 rounded-lg border border-red-200">
+        <div className="bg-destructive/10 p-4 rounded-lg border border-destructive/20">
           <div className="text-2xl font-bold text-red-900">
             {fieldMappings.filter(m => !m.isValid).length}
           </div>
@@ -107,8 +107,8 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
         {/* FROM 테이블 필드들 */}
         <div className="space-y-4">
           <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-            <div className="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
-              <span className="text-blue-600 font-bold text-sm">FROM</span>
+            <div className="w-6 h-6 bg-primary/20 rounded-full flex items-center justify-center">
+              <span className="text-primary font-bold text-sm">FROM</span>
             </div>
             {fromTable?.name} 필드들
           </h3>
@@ -122,13 +122,13 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                 className={`p-3 rounded-lg border-2 cursor-move transition-all duration-200 ${
                   isFieldMapped(field.name)
                     ? "border-green-300 bg-green-50 opacity-60"
-                    : "border-blue-200 bg-blue-50 hover:border-blue-400 hover:bg-blue-100"
+                    : "border-primary/20 bg-accent hover:border-blue-400 hover:bg-primary/20"
                 }`}
               >
                 <div className="flex items-center justify-between">
                   <div>
                     <div className="font-medium text-gray-900">{field.name}</div>
-                    <div className="text-sm text-gray-600">{field.type}</div>
+                    <div className="text-sm text-muted-foreground">{field.type}</div>
                     {field.primaryKey && (
                       <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
                         PK
@@ -170,7 +170,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                   <div className="flex items-center justify-between">
                     <div>
                       <div className="font-medium text-gray-900">{field.name}</div>
-                      <div className="text-sm text-gray-600">{field.type}</div>
+                      <div className="text-sm text-muted-foreground">{field.type}</div>
                       {field.primaryKey && (
                         <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
                           PK
@@ -196,7 +196,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                           {fieldMappings.find(m => m.toField.name === field.name)?.isValid ? (
                             <CheckCircle className="w-5 h-5 text-green-600" />
                           ) : (
-                            <AlertCircle className="w-5 h-5 text-red-600" />
+                            <AlertCircle className="w-5 h-5 text-destructive" />
                           )}
                         </div>
                       )}
@@ -213,7 +213,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
       <div className="flex justify-between">
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
         >
           <ArrowLeft className="w-4 h-4" />
           이전 단계
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx
index 5adb54cb..471f5ad4 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx
@@ -150,7 +150,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
   const getLogicalOperatorColor = (operator: string) => {
     switch (operator) {
       case "AND":
-        return "bg-blue-100 text-blue-800";
+        return "bg-primary/20 text-blue-800";
       case "OR":
         return "bg-orange-100 text-orange-800";
       default:
@@ -271,7 +271,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
 
               {/* 그룹 간 논리 연산자 선택 */}
               {actionGroups.length > 1 && (
-                <div className="rounded-md border bg-blue-50 p-3">
+                <div className="rounded-md border bg-accent p-3">
                   <div className="mb-2 flex items-center gap-2">
                     <h4 className="text-sm font-medium text-blue-900">그룹 간 실행 조건</h4>
                   </div>
@@ -649,9 +649,9 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
                             </div>
 
                             {/* 그룹 로직 설명 */}
-                            <div className="mt-4 rounded-md bg-blue-50 p-3">
+                            <div className="mt-4 rounded-md bg-accent p-3">
                               <div className="flex items-start gap-2">
-                                <AlertTriangle className="mt-0.5 h-4 w-4 text-blue-600" />
+                                <AlertTriangle className="mt-0.5 h-4 w-4 text-primary" />
                                 <div className="text-sm">
                                   <div className="font-medium text-blue-900">{group.logicalOperator} 조건 그룹</div>
                                   <div className="text-blue-700">
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
index 570256fc..f81b48fe 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
@@ -71,7 +71,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
             {/* 헤더 */}
             <div className="flex-shrink-0 px-4 py-2">
               <div className="flex items-center gap-3 border-b pb-2">
-                <Globe className="h-5 w-5 text-blue-600" />
+                <Globe className="h-5 w-5 text-primary" />
                 <h2 className="text-lg font-semibold">외부 호출 설정</h2>
               </div>
               <p className="text-muted-foreground mt-1 text-sm">
@@ -89,7 +89,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
                     value={state.relationshipName || ""}
                     onChange={(e) => actions.setRelationshipName(e.target.value)}
                     placeholder="외부호출 관계의 이름을 입력하세요"
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
                 <div>
@@ -99,7 +99,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
                     onChange={(e) => actions.setDescription(e.target.value)}
                     placeholder="외부호출의 용도나 설명을 입력하세요"
                     rows={2}
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
               </div>
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
index c7af4d75..d4d2eea3 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
@@ -35,7 +35,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
                     ? "bg-green-500 text-white"
                     : step.id === currentStep
                     ? "bg-orange-500 text-white"
-                    : "bg-gray-200 text-gray-600"
+                    : "bg-gray-200 text-muted-foreground"
                 }`}
               >
                 {step.id < currentStep ? (
@@ -52,7 +52,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
                   {step.title}
                 </h3>
                 <p className={`text-xs ${
-                  step.id <= currentStep ? "text-gray-600" : "text-gray-400"
+                  step.id <= currentStep ? "text-muted-foreground" : "text-gray-400"
                 }`}>
                   {step.description}
                 </p>
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
index d4423fc6..cb9bc04b 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
@@ -90,7 +90,7 @@ export const TableStep: React.FC<TableStepProps> = ({
         <h2 className="text-2xl font-bold text-gray-900 mb-2">
           테이블 선택
         </h2>
-        <p className="text-gray-600">
+        <p className="text-muted-foreground">
           소스 테이블과 대상 테이블을 선택하세요
         </p>
       </div>
@@ -99,7 +99,7 @@ export const TableStep: React.FC<TableStepProps> = ({
       <div className="bg-gray-50 rounded-lg p-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <Database className="w-5 h-5 text-blue-600" />
+            <Database className="w-5 h-5 text-primary" />
             <span className="font-medium text-gray-900">{fromConnection?.name}</span>
             <span className="text-sm text-gray-500">→</span>
             <Database className="w-5 h-5 text-green-600" />
@@ -112,8 +112,8 @@ export const TableStep: React.FC<TableStepProps> = ({
         {/* FROM 테이블 */}
         <div className="space-y-4">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-              <span className="text-blue-600 font-bold">1</span>
+            <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
+              <span className="text-primary font-bold">1</span>
             </div>
             <h3 className="text-lg font-semibold text-gray-900">소스 테이블</h3>
             <span className="text-sm text-gray-500">(FROM)</span>
@@ -125,20 +125,20 @@ export const TableStep: React.FC<TableStepProps> = ({
                 key={table.name}
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedFromTable === table.name
-                    ? "border-blue-500 bg-blue-50 shadow-md"
+                    ? "border-primary bg-accent shadow-md"
                     : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
                 }`}
                 onClick={() => handleFromTableSelect(table.name)}
               >
                 <div className="flex items-center gap-3">
-                  <Table className="w-6 h-6 text-blue-600" />
+                  <Table className="w-6 h-6 text-primary" />
                   <div className="flex-1">
                     <h4 className="font-medium text-gray-900">{table.name}</h4>
-                    <p className="text-sm text-gray-600">{table.columns.length}개 컬럼</p>
+                    <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
                     <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
                   </div>
                   {selectedFromTable === table.name && (
-                    <CheckCircle className="w-5 h-5 text-blue-600" />
+                    <CheckCircle className="w-5 h-5 text-primary" />
                   )}
                 </div>
               </div>
@@ -171,7 +171,7 @@ export const TableStep: React.FC<TableStepProps> = ({
                   <Table className="w-6 h-6 text-green-600" />
                   <div className="flex-1">
                     <h4 className="font-medium text-gray-900">{table.name}</h4>
-                    <p className="text-sm text-gray-600">{table.columns.length}개 컬럼</p>
+                    <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
                     <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
                   </div>
                   {selectedToTable === table.name && (
@@ -188,7 +188,7 @@ export const TableStep: React.FC<TableStepProps> = ({
       <div className="flex justify-between">
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
         >
           <ArrowLeft className="w-4 h-4" />
           이전 단계
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
index 44853bb5..b3deefd6 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
@@ -128,9 +128,9 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
               : isMapped
                 ? "border-green-500 bg-green-50 shadow-sm"
                 : isBlockedDropTarget
-                  ? "border-red-400 bg-red-50 shadow-md"
+                  ? "border-red-400 bg-destructive/10 shadow-md"
                   : isDropTarget
-                    ? "border-blue-400 bg-blue-50 shadow-md"
+                    ? "border-blue-400 bg-accent shadow-md"
                     : "border-border hover:bg-muted/50 hover:shadow-sm"
         } `}
         draggable={type === "from" && !isMapped}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx
index a3fc3b9d..718daf93 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldMappingCanvas.tsx
@@ -311,7 +311,7 @@ const FieldMappingCanvas: React.FC<FieldMappingCanvasProps> = ({
       </div>
 
       {/* 매핑 규칙 안내 */}
-      <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
+      <div className="mt-4 rounded-lg border border-primary/20 bg-accent p-3">
         <h4 className="mb-2 text-sm font-medium">📋 매핑 규칙</h4>
         <div className="text-muted-foreground space-y-1 text-xs">
           <p>✅ 1:N 매핑 허용 (하나의 소스 필드를 여러 대상 필드에 매핑)</p>
diff --git a/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx b/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
index 5a2b710e..1af3beed 100644
--- a/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
+++ b/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
@@ -411,7 +411,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
                     {testResult.responseTime !== undefined && (
                       <div>
                         <Label className="text-muted-foreground text-xs">응답 시간</Label>
-                        <div className="mt-1 rounded border bg-blue-50 p-2">
+                        <div className="mt-1 rounded border bg-accent p-2">
                           <span className="font-mono text-sm text-blue-700">{testResult.responseTime}ms</span>
                         </div>
                       </div>
diff --git a/frontend/components/dataflow/external-call/RestApiSettings.tsx b/frontend/components/dataflow/external-call/RestApiSettings.tsx
index c3d6b4b0..66a8e651 100644
--- a/frontend/components/dataflow/external-call/RestApiSettings.tsx
+++ b/frontend/components/dataflow/external-call/RestApiSettings.tsx
@@ -272,7 +272,7 @@ const RestApiSettings: React.FC<RestApiSettingsProps> = ({ settings, onSettingsC
                   value={settings.apiUrl}
                   onChange={(e) => handleUrlChange(e.target.value)}
                   disabled={readonly}
-                  className={validationErrors.some((e) => e.includes("URL")) ? "border-red-500" : ""}
+                  className={validationErrors.some((e) => e.includes("URL")) ? "border-destructive" : ""}
                 />
                 <div className="text-muted-foreground text-xs">호출할 API의 전체 URL을 입력하세요.</div>
               </div>
diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 7f365d29..01f17dd4 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -324,7 +324,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         <div
           className={`group flex h-10 cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out ${
             pathname === menu.url
-              ? "border-l-4 border-blue-500 bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
+              ? "border-l-4 border-primary bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
               : isExpanded
                 ? "bg-slate-100 text-slate-900"
                 : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
@@ -352,7 +352,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 key={child.id}
                 className={`flex cursor-pointer items-center rounded-lg px-3 py-2 text-sm transition-colors hover:cursor-pointer ${
                   pathname === child.url
-                    ? "border-l-4 border-blue-500 bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
+                    ? "border-l-4 border-primary bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
                     : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
                 }`}
                 onClick={() => handleMenuClick(child)}
@@ -376,7 +376,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     return (
       <div className="flex h-screen items-center justify-center">
         <div className="flex flex-col items-center">
-          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
+          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
           <p>로딩중...</p>
         </div>
       </div>
@@ -423,7 +423,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 className={`flex w-full items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 hover:cursor-pointer ${
                   isAdminMode
                     ? "border border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100"
-                    : "border border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100"
+                    : "border border-primary/20 bg-accent text-blue-700 hover:bg-primary/20"
                 }`}
               >
                 {isAdminMode ? (
@@ -486,7 +486,7 @@ export function AppLayout({ children }: AppLayoutProps) {
       fallback={
         <div className="flex h-screen items-center justify-center">
           <div className="flex flex-col items-center">
-            <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
+            <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
             <p>로딩중...</p>
           </div>
         </div>
diff --git a/frontend/components/layout/ProfileModal.tsx b/frontend/components/layout/ProfileModal.tsx
index b50eb657..672d538c 100644
--- a/frontend/components/layout/ProfileModal.tsx
+++ b/frontend/components/layout/ProfileModal.tsx
@@ -22,9 +22,9 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
       case "success":
         return "text-green-600";
       case "error":
-        return "text-red-600";
+        return "text-destructive";
       default:
-        return "text-blue-600";
+        return "text-primary";
     }
   };
 
@@ -35,7 +35,7 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
           <DialogTitle className={getTypeColor()}>{title}</DialogTitle>
         </DialogHeader>
         <div className="py-4">
-          <p className="text-sm text-gray-600">{message}</p>
+          <p className="text-sm text-muted-foreground">{message}</p>
         </div>
         <div className="flex justify-end">
           <Button onClick={onClose} className="w-20">
diff --git a/frontend/components/mail/ConfirmDeleteModal.tsx b/frontend/components/mail/ConfirmDeleteModal.tsx
index 9c8a8633..5a4537a9 100644
--- a/frontend/components/mail/ConfirmDeleteModal.tsx
+++ b/frontend/components/mail/ConfirmDeleteModal.tsx
@@ -49,7 +49,7 @@ export default function ConfirmDeleteModal({
         <div className="p-6 space-y-4">
           <p className="text-gray-700">{message}</p>
           {itemName && (
-            <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+            <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-3">
               <p className="text-sm font-medium text-red-800">
                 삭제 대상: <span className="font-bold">{itemName}</span>
               </p>
@@ -71,7 +71,8 @@ export default function ConfirmDeleteModal({
           </Button>
           <Button
             onClick={handleConfirm}
-            className="flex-1 bg-red-500 hover:bg-red-600"
+            variant="destructive"
+            className="flex-1"
           >
             삭제
           </Button>
diff --git a/frontend/components/mail/MailAccountModal.tsx b/frontend/components/mail/MailAccountModal.tsx
index 11497ff1..ddfd5df0 100644
--- a/frontend/components/mail/MailAccountModal.tsx
+++ b/frontend/components/mail/MailAccountModal.tsx
@@ -332,7 +332,8 @@ export default function MailAccountModal({
                 type="button"
                 onClick={handleTestConnection}
                 disabled={isTesting}
-                className="w-full bg-blue-500 hover:bg-blue-600"
+                variant="default"
+                className="w-full"
               >
                 {isTesting ? (
                   <>
@@ -351,14 +352,14 @@ export default function MailAccountModal({
                 <div
                   className={`mt-3 p-3 rounded-lg flex items-start gap-2 ${
                     testResult.success
-                      ? 'bg-green-50 border border-green-200'
-                      : 'bg-red-50 border border-red-200'
+                      ? 'bg-green-50 border border-green-500/20'
+                      : 'bg-destructive/10 border border-destructive/20'
                   }`}
                 >
                   {testResult.success ? (
                     <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                   ) : (
-                    <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
+                    <AlertCircle className="w-5 h-5 text-destructive flex-shrink-0 mt-0.5" />
                   )}
                   <p
                     className={`text-sm ${
@@ -385,7 +386,8 @@ export default function MailAccountModal({
             </Button>
             <Button
               type="submit"
-              className="flex-1 bg-orange-500 hover:bg-orange-600"
+              variant="default"
+              className="flex-1"
               disabled={isSubmitting}
             >
               {isSubmitting ? (
diff --git a/frontend/components/mail/MailAccountTable.tsx b/frontend/components/mail/MailAccountTable.tsx
index e4ff9680..ec88a466 100644
--- a/frontend/components/mail/MailAccountTable.tsx
+++ b/frontend/components/mail/MailAccountTable.tsx
@@ -21,6 +21,7 @@ interface MailAccountTableProps {
   onEdit: (account: MailAccount) => void;
   onDelete: (account: MailAccount) => void;
   onToggleStatus: (account: MailAccount) => void;
+  onTestConnection: (account: MailAccount) => void;
 }
 
 export default function MailAccountTable({
@@ -28,6 +29,7 @@ export default function MailAccountTable({
   onEdit,
   onDelete,
   onToggleStatus,
+  onTestConnection,
 }: MailAccountTableProps) {
   const [searchTerm, setSearchTerm] = useState('');
   const [sortField, setSortField] = useState<keyof MailAccount>('createdAt');
@@ -82,7 +84,7 @@ export default function MailAccountTable({
     return (
       <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-12 text-center border-2 border-dashed border-gray-300">
         <Mail className="w-16 h-16 text-gray-400 mx-auto mb-4" />
-        <p className="text-lg font-medium text-gray-600 mb-2">
+        <p className="text-lg font-medium text-muted-foreground mb-2">
           등록된 메일 계정이 없습니다
         </p>
         <p className="text-sm text-gray-500">
@@ -174,10 +176,10 @@ export default function MailAccountTable({
                     <div className="font-medium text-gray-900">{account.name}</div>
                   </td>
                   <td className="px-6 py-4">
-                    <div className="text-sm text-gray-600">{account.email}</div>
+                    <div className="text-sm text-muted-foreground">{account.email}</div>
                   </td>
                   <td className="px-6 py-4">
-                    <div className="text-sm text-gray-600">
+                    <div className="text-sm text-muted-foreground">
                       {account.smtpHost}:{account.smtpPort}
                     </div>
                     <div className="text-xs text-gray-400">
@@ -190,7 +192,7 @@ export default function MailAccountTable({
                       className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all hover:scale-105 ${
                         account.status === 'active'
                           ? 'bg-green-100 text-green-700 hover:bg-green-200'
-                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                          : 'bg-gray-100 text-muted-foreground hover:bg-gray-200'
                       }`}
                     >
                       {account.status === 'active' ? (
@@ -214,22 +216,29 @@ export default function MailAccountTable({
                     </div>
                   </td>
                   <td className="px-6 py-4 text-center">
-                    <div className="text-sm text-gray-600">
+                    <div className="text-sm text-muted-foreground">
                       {formatDate(account.createdAt)}
                     </div>
                   </td>
                   <td className="px-6 py-4">
                     <div className="flex items-center justify-center gap-2">
                       <button
-                        onClick={() => onEdit(account)}
+                        onClick={() => onTestConnection(account)}
                         className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                        title="SMTP 연결 테스트"
+                      >
+                        <Zap className="w-4 h-4" />
+                      </button>
+                      <button
+                        onClick={() => onEdit(account)}
+                        className="p-2 text-primary hover:bg-accent rounded-lg transition-colors"
                         title="수정"
                       >
                         <Edit2 className="w-4 h-4" />
                       </button>
                       <button
                         onClick={() => onDelete(account)}
-                        className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                        className="p-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
                         title="삭제"
                       >
                         <Trash2 className="w-4 h-4" />
@@ -244,7 +253,7 @@ export default function MailAccountTable({
       </div>
 
       {/* 결과 요약 */}
-      <div className="text-sm text-gray-600 text-center">
+      <div className="text-sm text-muted-foreground text-center">
         전체 {accounts.length}개 중 {sortedAccounts.length}개 표시
         {searchTerm && ` (검색: "${searchTerm}")`}
       </div>
diff --git a/frontend/components/mail/MailDesigner.tsx b/frontend/components/mail/MailDesigner.tsx
index 110156bf..7bcadf1c 100644
--- a/frontend/components/mail/MailDesigner.tsx
+++ b/frontend/components/mail/MailDesigner.tsx
@@ -63,7 +63,7 @@ export default function MailDesigner({
 
   // 컴포넌트 타입 정의
   const componentTypes = [
-    { type: "text", icon: Type, label: "텍스트", color: "bg-blue-100 hover:bg-blue-200" },
+    { type: "text", icon: Type, label: "텍스트", color: "bg-primary/20 hover:bg-blue-200" },
     { type: "button", icon: MousePointer, label: "버튼", color: "bg-green-100 hover:bg-green-200" },
     { type: "image", icon: ImageIcon, label: "이미지", color: "bg-purple-100 hover:bg-purple-200" },
     { type: "spacer", icon: Square, label: "여백", color: "bg-gray-100 hover:bg-gray-200" },
@@ -201,7 +201,7 @@ export default function MailDesigner({
             <Eye className="w-4 h-4 mr-2" />
             미리보기
           </Button>
-          <Button onClick={handleSend} className="w-full bg-orange-500 hover:bg-orange-600 text-white">
+          <Button onClick={handleSend} variant="default" className="w-full">
             <Send className="w-4 h-4 mr-2" />
             발송
           </Button>
@@ -253,7 +253,7 @@ export default function MailDesigner({
                         e.stopPropagation();
                         removeComponent(comp.id);
                       }}
-                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-red-500 text-white rounded-full p-1 hover:bg-red-600"
+                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-destructive text-white rounded-full p-1 hover:bg-destructive/90"
                     >
                       <Trash2 className="w-4 h-4" />
                     </button>
diff --git a/frontend/components/mail/MailDetailModal.tsx b/frontend/components/mail/MailDetailModal.tsx
index 671d9ac3..ef657a63 100644
--- a/frontend/components/mail/MailDetailModal.tsx
+++ b/frontend/components/mail/MailDetailModal.tsx
@@ -168,12 +168,12 @@ export default function MailDetailModal({
         {loading ? (
           <div className="flex justify-center items-center py-16">
             <Loader2 className="w-8 h-8 animate-spin text-orange-500" />
-            <span className="ml-3 text-gray-600">메일을 불러오는 중...</span>
+            <span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
           </div>
         ) : error ? (
           <div className="flex flex-col items-center justify-center py-16">
             <AlertCircle className="w-12 h-12 text-red-500 mb-4" />
-            <p className="text-red-600">{error}</p>
+            <p className="text-destructive">{error}</p>
             <Button onClick={loadMailDetail} variant="outline" className="mt-4">
               다시 시도
             </Button>
@@ -193,17 +193,17 @@ export default function MailDetailModal({
                   </div>
                   <div>
                     <span className="font-medium text-gray-700">받는사람:</span>{" "}
-                    <span className="text-gray-600">{mail.to}</span>
+                    <span className="text-muted-foreground">{mail.to}</span>
                   </div>
                   {mail.cc && (
                     <div>
                       <span className="font-medium text-gray-700">참조:</span>{" "}
-                      <span className="text-gray-600">{mail.cc}</span>
+                      <span className="text-muted-foreground">{mail.cc}</span>
                     </div>
                   )}
                   <div>
                     <span className="font-medium text-gray-700">날짜:</span>{" "}
-                    <span className="text-gray-600">
+                    <span className="text-muted-foreground">
                       {formatDate(mail.date)}
                     </span>
                   </div>
@@ -225,7 +225,7 @@ export default function MailDetailModal({
             {mail.attachments && mail.attachments.length > 0 && (
               <div className="bg-gray-50 rounded-lg p-4">
                 <div className="flex items-center gap-2 mb-3">
-                  <Paperclip className="w-4 h-4 text-gray-600" />
+                  <Paperclip className="w-4 h-4 text-muted-foreground" />
                   <span className="font-medium text-gray-700">
                     첨부파일 ({mail.attachments.length})
                   </span>
diff --git a/frontend/components/mail/MailTemplateCard.tsx b/frontend/components/mail/MailTemplateCard.tsx
index 4ab30c9f..558c35bf 100644
--- a/frontend/components/mail/MailTemplateCard.tsx
+++ b/frontend/components/mail/MailTemplateCard.tsx
@@ -30,7 +30,7 @@ export default function MailTemplateCard({
 
   const getCategoryColor = (category?: string) => {
     const colors: Record<string, string> = {
-      welcome: 'bg-blue-100 text-blue-700 border-blue-300',
+      welcome: 'bg-primary/20 text-blue-700 border-blue-300',
       promotion: 'bg-purple-100 text-purple-700 border-purple-300',
       notification: 'bg-green-100 text-green-700 border-green-300',
       newsletter: 'bg-orange-100 text-orange-700 border-orange-300',
@@ -52,7 +52,7 @@ export default function MailTemplateCard({
               <h3 className="font-semibold text-gray-900 truncate">
                 {template.name}
               </h3>
-              <p className="text-sm text-gray-600 truncate mt-1">
+              <p className="text-sm text-muted-foreground truncate mt-1">
                 {template.subject}
               </p>
             </div>
@@ -75,7 +75,7 @@ export default function MailTemplateCard({
           <p className="text-xs text-gray-500 mb-2">컴포넌트 {template.components.length}개</p>
           <div className="space-y-1">
             {template.components.slice(0, 3).map((component, idx) => (
-              <div key={idx} className="flex items-center gap-2 text-xs text-gray-600">
+              <div key={idx} className="flex items-center gap-2 text-xs text-muted-foreground">
                 <div className="w-1.5 h-1.5 rounded-full bg-orange-400" />
                 <span className="capitalize">{component.type}</span>
                 {component.type === 'text' && component.content && (
@@ -110,7 +110,7 @@ export default function MailTemplateCard({
         <Button
           size="sm"
           variant="outline"
-          className="flex-1 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300"
+          className="flex-1 hover:bg-accent hover:text-primary hover:border-blue-300"
           onClick={() => onPreview(template)}
         >
           <Eye className="w-4 h-4 mr-1" />
@@ -138,7 +138,7 @@ export default function MailTemplateCard({
         <Button
           size="sm"
           variant="outline"
-          className="hover:bg-red-50 hover:text-red-600 hover:border-red-300"
+          className="hover:bg-destructive/10 hover:text-destructive hover:border-red-300"
           onClick={() => onDelete(template)}
         >
           <Trash2 className="w-4 h-4" />
diff --git a/frontend/components/mail/MailTemplatePreviewModal.tsx b/frontend/components/mail/MailTemplatePreviewModal.tsx
index 7203762a..ebb1d6e5 100644
--- a/frontend/components/mail/MailTemplatePreviewModal.tsx
+++ b/frontend/components/mail/MailTemplatePreviewModal.tsx
@@ -106,7 +106,7 @@ export default function MailTemplatePreviewModal({
                   </div>
                 ))}
               </div>
-              <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+              <div className="mt-6 p-4 bg-accent border border-primary/20 rounded-lg">
                 <p className="text-xs text-blue-800">
                   💡 변수 값을 입력하면 미리보기에 반영됩니다.
                 </p>
@@ -122,15 +122,15 @@ export default function MailTemplatePreviewModal({
                 <div className="bg-gray-100 px-6 py-4 border-b border-gray-200">
                   <div className="space-y-2 text-sm">
                     <div className="flex">
-                      <span className="font-semibold text-gray-600 w-20">제목:</span>
+                      <span className="font-semibold text-muted-foreground w-20">제목:</span>
                       <span className="text-gray-900">{template.subject}</span>
                     </div>
                     <div className="flex">
-                      <span className="font-semibold text-gray-600 w-20">발신:</span>
+                      <span className="font-semibold text-muted-foreground w-20">발신:</span>
                       <span className="text-gray-700">your-email@company.com</span>
                     </div>
                     <div className="flex">
-                      <span className="font-semibold text-gray-600 w-20">수신:</span>
+                      <span className="font-semibold text-muted-foreground w-20">수신:</span>
                       <span className="text-gray-700">recipient@example.com</span>
                     </div>
                   </div>
diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx
index ee4d6fe5..ec109347 100644
--- a/frontend/components/screen/CopyScreenModal.tsx
+++ b/frontend/components/screen/CopyScreenModal.tsx
@@ -117,7 +117,7 @@ export default function CopyScreenModal({ isOpen, onClose, sourceScreen, onCopyS
           {/* 원본 화면 정보 */}
           <div className="rounded-md bg-gray-50 p-3">
             <h4 className="mb-2 text-sm font-medium text-gray-700">원본 화면 정보</h4>
-            <div className="space-y-1 text-sm text-gray-600">
+            <div className="space-y-1 text-sm text-muted-foreground">
               <div>
                 <span className="font-medium">화면명:</span> {sourceScreen?.screenName}
               </div>
diff --git a/frontend/components/screen/CreateScreenModal.tsx b/frontend/components/screen/CreateScreenModal.tsx
index 45c9e6d5..d1291328 100644
--- a/frontend/components/screen/CreateScreenModal.tsx
+++ b/frontend/components/screen/CreateScreenModal.tsx
@@ -148,7 +148,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated }: Cre
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>
             취소
           </Button>
-          <Button onClick={handleSubmit} disabled={!isValid || submitting} className="bg-blue-600 hover:bg-blue-700">
+          <Button onClick={handleSubmit} disabled={!isValid || submitting} variant="default">
             생성
           </Button>
         </DialogFooter>
diff --git a/frontend/components/screen/DesignerToolbar.tsx b/frontend/components/screen/DesignerToolbar.tsx
index 834a006f..301bff63 100644
--- a/frontend/components/screen/DesignerToolbar.tsx
+++ b/frontend/components/screen/DesignerToolbar.tsx
@@ -55,7 +55,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
   onToggleZoneBorders,
 }) => {
   return (
-    <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3 shadow-sm">
+    <div className="flex items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 py-3 shadow-sm">
       {/* 좌측: 네비게이션 및 화면 정보 */}
       <div className="flex items-center space-x-4">
         <Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
@@ -66,7 +66,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
         <div className="h-6 w-px bg-gray-300" />
 
         <div className="flex items-center space-x-3">
-          <Menu className="h-5 w-5 text-gray-600" />
+          <Menu className="h-5 w-5 text-muted-foreground" />
           <div>
             <h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
             {tableName && (
@@ -85,7 +85,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.tables?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("tables")}
-          className={cn("flex items-center space-x-2", panelStates.tables?.isOpen && "bg-blue-600 text-white")}
+          className="flex items-center space-x-2"
         >
           <Database className="h-4 w-4" />
           <span>테이블</span>
@@ -98,7 +98,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.templates?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("templates")}
-          className={cn("flex items-center space-x-2", panelStates.templates?.isOpen && "bg-blue-600 text-white")}
+          className="flex items-center space-x-2"
         >
           <Layout className="h-4 w-4" />
           <span>템플릿</span>
@@ -111,7 +111,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.components?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("components")}
-          className={cn("flex items-center space-x-2", panelStates.components?.isOpen && "bg-blue-600 text-white")}
+          className="flex items-center space-x-2"
         >
           <Cog className="h-4 w-4" />
           <span>컴포넌트</span>
@@ -124,7 +124,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.properties?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("properties")}
-          className={cn("flex items-center space-x-2", panelStates.properties?.isOpen && "bg-blue-600 text-white")}
+          className="flex items-center space-x-2"
         >
           <Settings className="h-4 w-4" />
           <span>속성</span>
@@ -137,7 +137,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.styles?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("styles")}
-          className={cn("flex items-center space-x-2", panelStates.styles?.isOpen && "bg-blue-600 text-white")}
+          className="flex items-center space-x-2"
         >
           <Palette className="h-4 w-4" />
           <span>스타일</span>
diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx
index 63ba80e8..e3bb0632 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -59,6 +59,20 @@ export const EditModal: React.FC<EditModalProps> = ({
 
   const dynamicSize = calculateModalSize();
 
+  // EditModal 전용 닫기 이벤트 리스너
+  useEffect(() => {
+    const handleCloseEditModal = () => {
+      console.log("🚪 EditModal: closeEditModal 이벤트 수신");
+      onClose();
+    };
+
+    window.addEventListener("closeEditModal", handleCloseEditModal);
+    
+    return () => {
+      window.removeEventListener("closeEditModal", handleCloseEditModal);
+    };
+  }, [onClose]);
+
   // DialogContent 크기 강제 적용
   useEffect(() => {
     if (isOpen && dynamicSize) {
@@ -256,7 +270,7 @@ export const EditModal: React.FC<EditModalProps> = ({
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
                 <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-500"></div>
-                <p className="text-gray-600">화면 로딩 중...</p>
+                <p className="text-muted-foreground">화면 로딩 중...</p>
               </div>
             </div>
           ) : screenData && components.length > 0 ? (
diff --git a/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx b/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
index 3207a522..245dbb22 100644
--- a/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
+++ b/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
@@ -232,7 +232,7 @@ export const EnhancedInteractiveScreenViewer: React.FC<EnhancedInteractiveScreen
           className={`mb-1 block text-sm font-medium ${hasError ? "text-destructive" : ""}`}
           style={{
             fontSize: labelStyle.labelFontSize || "14px",
-            color: hasError ? "#ef4444" : labelStyle.labelColor || "#3b83f6",
+            color: hasError ? "#ef4444" : labelStyle.labelColor || "#212121",
             fontWeight: labelStyle.labelFontWeight || "500",
             fontFamily: labelStyle.labelFontFamily,
             textAlign: labelStyle.labelTextAlign || "left",
diff --git a/frontend/components/screen/FileAttachmentDetailModal.tsx b/frontend/components/screen/FileAttachmentDetailModal.tsx
index 118b5e5d..835f8940 100644
--- a/frontend/components/screen/FileAttachmentDetailModal.tsx
+++ b/frontend/components/screen/FileAttachmentDetailModal.tsx
@@ -381,7 +381,7 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                   <div
                     className={`
                       border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors
-                      ${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
+                      ${dragOver ? 'border-blue-400 bg-accent' : 'border-gray-300'}
                       ${uploading ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
                     `}
                     onDragOver={handleDragOver}
@@ -505,7 +505,7 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                               variant="ghost"
                               size="sm"
                               onClick={() => handleFileDelete(file)}
-                              className="h-8 w-8 p-0 text-red-600 hover:text-red-700"
+                              className="h-8 w-8 p-0 text-destructive hover:text-red-700"
                               title="삭제"
                             >
                               <Trash2 className="w-4 h-4" />
diff --git a/frontend/components/screen/GridControls.tsx b/frontend/components/screen/GridControls.tsx
index 4b0ca8d7..b33dc654 100644
--- a/frontend/components/screen/GridControls.tsx
+++ b/frontend/components/screen/GridControls.tsx
@@ -145,9 +145,9 @@ export default function GridControls({ gridSettings, onGridSettingsChange, class
         </div>
 
         {/* 격자 변경 안내 */}
-        <div className="rounded-md bg-blue-50 p-2 text-xs text-blue-700">
+        <div className="rounded-md bg-accent p-2 text-xs text-blue-700">
           <div className="font-medium">💡 격자 변경 시 자동 조정</div>
-          <div className="mt-1 text-blue-600">
+          <div className="mt-1 text-primary">
             격자 설정을 변경하면 기존 컴포넌트들이 새 격자에 맞춰 자동으로 위치와 크기가 조정됩니다.
           </div>
         </div>
diff --git a/frontend/components/screen/GroupingToolbar.tsx b/frontend/components/screen/GroupingToolbar.tsx
index 5a8160a0..f1047139 100644
--- a/frontend/components/screen/GroupingToolbar.tsx
+++ b/frontend/components/screen/GroupingToolbar.tsx
@@ -116,7 +116,7 @@ export const GroupingToolbar: React.FC<GroupingToolbarProps> = ({
     <>
       <div className="flex items-center space-x-2 border-b bg-gray-50 p-2">
         <div className="flex items-center space-x-2">
-          <Group className="h-4 w-4 text-blue-600" />
+          <Group className="h-4 w-4 text-primary" />
           <span className="text-sm font-medium">그룹화</span>
         </div>
 
@@ -248,7 +248,7 @@ export const GroupingToolbar: React.FC<GroupingToolbarProps> = ({
             {/* 그룹 스타일 */}
             <div className="space-y-4">
               <div className="flex items-center space-x-2">
-                <Palette className="h-4 w-4 text-gray-600" />
+                <Palette className="h-4 w-4 text-muted-foreground" />
                 <Label className="text-sm font-medium">그룹 스타일</Label>
               </div>
 
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 4c552b39..70b2b111 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -48,6 +48,7 @@ import { downloadFile, getLinkedFiles, getFilePreviewUrl, getDirectFileUrl } fro
 import { toast } from "sonner";
 import { FileUpload } from "@/components/screen/widgets/FileUpload";
 import { AdvancedSearchFilters } from "./filters/AdvancedSearchFilters";
+import { SaveModal } from "./SaveModal";
 
 // 파일 데이터 타입 정의 (AttachedFileInfo와 호환)
 interface FileInfo {
@@ -87,12 +88,14 @@ interface InteractiveDataTableProps {
   component: DataTableComponent;
   className?: string;
   style?: React.CSSProperties;
+  onRefresh?: () => void; // 테이블 새로고침 콜백
 }
 
 export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   component,
   className = "",
   style = {},
+  onRefresh,
 }) => {
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
@@ -101,13 +104,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [totalPages, setTotalPages] = useState(1);
   const [total, setTotal] = useState(0);
   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
-  const [showAddModal, setShowAddModal] = useState(false);
-  const [addFormData, setAddFormData] = useState<Record<string, any>>({});
-  const [isAdding, setIsAdding] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [editFormData, setEditFormData] = useState<Record<string, any>>({});
-  const [editingRowData, setEditingRowData] = useState<Record<string, any> | null>(null);
-  const [isEditing, setIsEditing] = useState(false);
+  
+  // SaveModal 상태 (등록/수정 통합)
+  const [showSaveModal, setShowSaveModal] = useState(false);
+  const [saveModalData, setSaveModalData] = useState<Record<string, any> | undefined>(undefined);
+  const [saveModalScreenId, setSaveModalScreenId] = useState<number | undefined>(undefined);
 
   // 이미지 미리보기 상태
   const [previewImage, setPreviewImage] = useState<FileInfo | null>(null);
@@ -158,6 +159,22 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     [codeOptions],
   );
 
+  // 🆕 전역 테이블 새로고침 이벤트 리스너
+  useEffect(() => {
+    const handleRefreshTable = () => {
+      console.log("🔄 InteractiveDataTable: 전역 새로고침 이벤트 수신");
+      if (component.tableName) {
+        loadData(currentPage, searchValues);
+      }
+    };
+
+    window.addEventListener("refreshTable", handleRefreshTable);
+    
+    return () => {
+      window.removeEventListener("refreshTable", handleRefreshTable);
+    };
+  }, [currentPage, searchValues, loadData, component.tableName]);
+
   // 파일 상태 확인 함수
   const checkFileStatus = useCallback(
     async (rowData: Record<string, any>) => {
@@ -713,19 +730,21 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       }
     });
 
-    setAddFormData(initialData);
-    setShowAddModal(true);
+    // SaveModal 열기 (등록 모드)
+    const screenId = component.addModalConfig?.screenId;
+    
+    if (!screenId) {
+      toast.error("화면 설정이 필요합니다. 테이블 설정에서 추가 모달 화면을 지정해주세요.");
+      return;
+    }
+
+    // SaveModal 사용
+    setSaveModalData(undefined); // undefined = 등록 모드
+    setSaveModalScreenId(screenId);
+    setShowSaveModal(true);
   }, [getDisplayColumns, generateAutoValue, component.addModalConfig]);
 
-  // 추가 폼 데이터 변경 핸들러
-  const handleAddFormChange = useCallback((columnName: string, value: any) => {
-    setAddFormData((prev) => ({
-      ...prev,
-      [columnName]: value,
-    }));
-  }, []);
-
-  // 데이터 수정 핸들러
+  // 데이터 수정 핸들러 (SaveModal 사용)
   const handleEditData = useCallback(() => {
     if (selectedRows.size !== 1) return;
 
@@ -734,6 +753,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
     if (!selectedRowData) return;
 
+    const screenId = component.addModalConfig?.screenId;
+
+    if (!screenId) {
+      toast.error("화면 설정이 필요합니다. 테이블 설정에서 수정 모달 화면을 지정해주세요.");
+      return;
+    }
+
     // 수정할 데이터로 폼 초기화
     const initialData: Record<string, any> = {};
     const displayColumns = getDisplayColumns();
@@ -742,18 +768,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       initialData[col.columnName] = selectedRowData[col.columnName] || "";
     });
 
-    setEditFormData(initialData);
-    setEditingRowData(selectedRowData);
-    setShowEditModal(true);
-  }, [selectedRows, data, getDisplayColumns]);
-
-  // 수정 폼 데이터 변경 핸들러
-  const handleEditFormChange = useCallback((columnName: string, value: any) => {
-    setEditFormData((prev) => ({
-      ...prev,
-      [columnName]: value,
-    }));
-  }, []);
+    // SaveModal 사용
+    setSaveModalData(initialData); // 데이터 있음 = 수정 모드
+    setSaveModalScreenId(screenId);
+    setShowSaveModal(true);
+  }, [selectedRows, data, getDisplayColumns, component.addModalConfig]);
 
   // 파일 업로드 핸들러
   const handleFileUpload = useCallback(
@@ -863,7 +882,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           {currentFiles.map((file, index) => (
             <div key={index} className="flex items-center justify-between rounded border bg-gray-50 p-2">
               <div className="flex items-center space-x-2">
-                <div className="text-xs text-gray-600">📄</div>
+                <div className="text-xs text-muted-foreground">📄</div>
                 <div>
                   <p className="text-sm font-medium">{file.name}</p>
                   <p className="text-xs text-gray-500">{(file.size / 1024).toFixed(1)} KB</p>
@@ -881,9 +900,9 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             </div>
           ))}
           {isUploading && (
-            <div className="flex items-center space-x-2 rounded border bg-blue-50 p-2">
+            <div className="flex items-center space-x-2 rounded border bg-accent p-2">
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm text-blue-600">업로드 중...</span>
+              <span className="text-sm text-primary">업로드 중...</span>
             </div>
           )}
         </div>
@@ -1663,13 +1682,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 w-8 p-0 hover:bg-blue-50"
+            className="h-8 w-8 p-0 hover:bg-accent"
             onClick={() => handleColumnFileClick(rowData, column)}
             title={hasFiles ? `${fileCount}개 파일 보기` : "파일 업로드"}
           >
             {hasFiles ? (
               <div className="relative">
-                <FolderOpen className="h-4 w-4 text-blue-600" />
+                <FolderOpen className="h-4 w-4 text-primary" />
                 {fileCount > 0 && (
                   <div className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-blue-600 text-[10px] text-white">
                     {fileCount > 9 ? "9+" : fileCount}
@@ -1964,8 +1983,26 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         </div>
       </div>
 
-      {/* 데이터 추가 모달 */}
-      <Dialog open={showAddModal} onOpenChange={handleAddModalClose}>
+      {/* SaveModal (등록/수정 통합) */}
+      <SaveModal
+        isOpen={showSaveModal}
+        onClose={() => {
+          setShowSaveModal(false);
+          setSaveModalData(undefined);
+          setSaveModalScreenId(undefined);
+        }}
+        screenId={saveModalScreenId}
+        modalSize={component.addModalConfig?.modalSize || "lg"}
+        initialData={saveModalData}
+        onSaveSuccess={() => {
+          // 저장 성공 시 테이블 새로고침
+          loadData(currentPage, searchValues); // 현재 페이지로 다시 로드
+          setSelectedRows(new Set()); // 선택 해제
+        }}
+      />
+
+      {/* 기존 데이터 추가 모달 (제거 예정 - SaveModal로 대체됨) */}
+      <Dialog open={false} onOpenChange={() => {}}>
         <DialogContent className={`max-h-[80vh] overflow-y-auto ${getModalSizeClass()}`}>
           <DialogHeader>
             <DialogTitle>{component.addModalConfig?.title || "새 데이터 추가"}</DialogTitle>
@@ -2010,18 +2047,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         </DialogContent>
       </Dialog>
 
-      {/* 데이터 수정 모달 */}
-      <Dialog
-        open={showEditModal}
-        onOpenChange={(open) => {
-          if (!isEditing && !open) {
-            setShowEditModal(false);
-            setEditFormData({});
-            setEditingRowData(null);
-            setUploadedFiles({}); // 파일 상태 초기화
-          }
-        }}
-      >
+      {/* 기존 데이터 수정 모달 (제거 예정 - SaveModal로 대체됨) */}
+      <Dialog open={false} onOpenChange={() => {}}>
         <DialogContent className={`max-h-[80vh] overflow-y-auto ${getModalSizeClass()}`}>
           <DialogHeader>
             <DialogTitle>데이터 수정</DialogTitle>
@@ -2114,7 +2141,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           <h4 className="truncate font-medium text-gray-900" title={fileInfo.name}>
                             {fileInfo.name}
                           </h4>
-                          <div className="mt-1 space-y-1 text-sm text-gray-600">
+                          <div className="mt-1 space-y-1 text-sm text-muted-foreground">
                             <div className="flex items-center gap-4">
                               <span>크기: {(fileInfo.size / 1024 / 1024).toFixed(2)} MB</span>
                               <span>타입: {fileInfo.type || "알 수 없음"}</span>
@@ -2160,7 +2187,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
             {/* 요약 정보 */}
             {currentFileData && (
-              <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
+              <div className="mt-4 rounded-lg border border-primary/20 bg-accent p-3">
                 <h5 className="mb-2 font-medium text-blue-900">파일 요약</h5>
                 <div className="grid grid-cols-2 gap-4 text-sm text-blue-800">
                   <div>
@@ -2195,7 +2222,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             <DialogDescription>
               선택된 <strong>{selectedRows.size}개</strong>의 데이터를 삭제하시겠습니까?
               <br />
-              <span className="text-red-600">이 작업은 되돌릴 수 없습니다.</span>
+              <span className="text-destructive">이 작업은 되돌릴 수 없습니다.</span>
             </DialogDescription>
           </DialogHeader>
 
@@ -2304,7 +2331,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 {linkedFiles.map((file: any, index: number) => (
                   <div key={index} className="flex items-center justify-between rounded-lg border p-3">
                     <div className="flex items-center space-x-3">
-                      <File className="h-5 w-5 text-blue-600" />
+                      <File className="h-5 w-5 text-primary" />
                       <div>
                         <div className="font-medium">{file.realFileName}</div>
                         <div className="text-sm text-gray-500">
@@ -2363,7 +2390,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                         size="sm"
                         variant="outline"
                         onClick={() => handleDeleteLinkedFile(file.objid, file.realFileName)}
-                        className="text-red-500 hover:bg-red-50 hover:text-red-700"
+                        className="text-red-500 hover:bg-destructive/10 hover:text-red-700"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index 85b2a7c4..bd9b2ee7 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -291,6 +291,10 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             width: "100%",
             height: "100%",
           }}
+          onRefresh={() => {
+            // 테이블 내부에서 loadData 호출하므로 여기서는 빈 함수
+            console.log("🔄 InteractiveDataTable 새로고침 트리거됨");
+          }}
         />
       );
     }
@@ -963,7 +967,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                   ) : (
                     <>
                       <Upload className="mx-auto h-8 w-8 text-gray-400" />
-                      <p className="text-sm text-gray-600">
+                      <p className="text-sm text-muted-foreground">
                         {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
                       </p>
                       {(config?.accept || config?.maxSize) && (
@@ -1715,7 +1719,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   // 라벨 스타일 적용
   const labelStyle = {
     fontSize: component.style?.labelFontSize || "14px",
-    color: component.style?.labelColor || "#3b83f6",
+    color: component.style?.labelColor || "#212121",
     fontWeight: component.style?.labelFontWeight || "500",
     backgroundColor: component.style?.labelBackgroundColor || "transparent",
     padding: component.style?.labelPadding || "0",
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index 6d8b2efa..d0eacf74 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -153,25 +153,25 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             width: "100%",
             height: "100%",
           }}
+          onRefresh={() => {
+            // 테이블 자체에서 loadData를 호출하므로 여기서는 빈 함수
+            console.log("🔄 InteractiveDataTable 새로고침 트리거됨 (Dynamic)");
+          }}
         />
       );
     }
 
-    // 버튼 컴포넌트 처리
-    if (isButtonComponent(comp)) {
-      return renderButton(comp);
-    }
-
     // 파일 컴포넌트 처리
     if (isFileComponent(comp)) {
       return renderFileComponent(comp as FileComponent);
     }
 
-    // 위젯 컴포넌트가 아닌 경우 DynamicComponentRenderer 사용
+    // 버튼 컴포넌트 또는 위젯이 아닌 경우 DynamicComponentRenderer 사용
     if (comp.type !== "widget") {
       console.log("🎯 InteractiveScreenViewer - DynamicComponentRenderer 사용:", {
         componentId: comp.id,
         componentType: comp.type,
+        isButton: isButtonComponent(comp),
         componentConfig: comp.componentConfig,
         style: comp.style,
         size: comp.size,
@@ -187,12 +187,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           screenId={screenInfo?.id}
           tableName={screenInfo?.tableName}
           onRefresh={() => {
-            // 화면 새로고침 로직 (필요시 구현)
-            // console.log("화면 새로고침 요청");
+            console.log("🔄 버튼에서 테이블 새로고침 요청됨");
+            // 테이블 컴포넌트는 자체적으로 loadData 호출
           }}
           onClose={() => {
             // 화면 닫기 로직 (필요시 구현)
-            // console.log("화면 닫기 요청");
+            console.log("🚪 화면 닫기 요청");
           }}
         />
       );
diff --git a/frontend/components/screen/MenuAssignmentModal.tsx b/frontend/components/screen/MenuAssignmentModal.tsx
index a52f2369..2c4f883f 100644
--- a/frontend/components/screen/MenuAssignmentModal.tsx
+++ b/frontend/components/screen/MenuAssignmentModal.tsx
@@ -348,9 +348,9 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                   저장된 화면을 메뉴에 할당하여 사용자가 접근할 수 있도록 설정합니다.
                 </DialogDescription>
                 {screenInfo && (
-                  <div className="mt-2 rounded-lg border bg-blue-50 p-3">
+                  <div className="mt-2 rounded-lg border bg-accent p-3">
                     <div className="flex items-center gap-2">
-                      <Monitor className="h-4 w-4 text-blue-600" />
+                      <Monitor className="h-4 w-4 text-primary" />
                       <span className="font-medium text-blue-900">{screenInfo.screenName}</span>
                       <Badge variant="outline" className="font-mono text-xs">
                         {screenInfo.screenCode}
@@ -396,7 +396,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                                 e.stopPropagation();
                                 setSearchTerm("");
                               }}
-                              className="absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400 hover:text-gray-600"
+                              className="absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400 hover:text-muted-foreground"
                             >
                               <X className="h-3 w-3" />
                             </button>
@@ -421,7 +421,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                             {selectedMenu.status === "active" ? "활성" : "비활성"}
                           </Badge>
                         </div>
-                        <div className="mt-1 space-y-1 text-sm text-gray-600">
+                        <div className="mt-1 space-y-1 text-sm text-muted-foreground">
                           {selectedMenu.menu_url && <p>URL: {selectedMenu.menu_url}</p>}
                           {selectedMenu.menu_desc && <p>설명: {selectedMenu.menu_desc}</p>}
                           {selectedMenu.company_name && <p>회사: {selectedMenu.company_name}</p>}
@@ -494,7 +494,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
           <div className="space-y-4">
             {/* 기존 화면 목록 */}
-            <div className="rounded-lg border bg-red-50 p-3">
+            <div className="rounded-lg border bg-destructive/10 p-3">
               <p className="mb-2 text-sm font-medium text-red-800">제거될 화면 ({existingScreens.length}개):</p>
               <div className="space-y-1">
                 {existingScreens.map((screen) => (
diff --git a/frontend/components/screen/OptimizedButtonComponent.tsx b/frontend/components/screen/OptimizedButtonComponent.tsx
index 107c9d42..ea79c3ed 100644
--- a/frontend/components/screen/OptimizedButtonComponent.tsx
+++ b/frontend/components/screen/OptimizedButtonComponent.tsx
@@ -475,7 +475,7 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
         className={cn(
           "transition-all duration-200",
           isExecuting && "cursor-wait opacity-75",
-          backgroundJobs.size > 0 && "border-blue-200 bg-blue-50",
+          backgroundJobs.size > 0 && "border-primary/20 bg-accent",
           config?.backgroundColor && { backgroundColor: config.backgroundColor },
           config?.textColor && { color: config.textColor },
           config?.borderColor && { borderColor: config.borderColor },
diff --git a/frontend/components/screen/RealtimePreview.tsx b/frontend/components/screen/RealtimePreview.tsx
index 5841313a..603badfb 100644
--- a/frontend/components/screen/RealtimePreview.tsx
+++ b/frontend/components/screen/RealtimePreview.tsx
@@ -66,7 +66,7 @@ interface RealtimePreviewProps {
 const getAreaIcon = (layoutDirection?: "horizontal" | "vertical") => {
   switch (layoutDirection) {
     case "horizontal":
-      return <Layout className="h-4 w-4 text-blue-600" />;
+      return <Layout className="h-4 w-4 text-primary" />;
     case "vertical":
       return <Columns className="h-4 w-4 text-purple-600" />;
     default:
@@ -86,7 +86,7 @@ const renderArea = (component: ComponentData, children?: React.ReactNode) => {
     <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
       <div className="text-center">
         {getAreaIcon(layoutDirection)}
-        <p className="mt-2 text-sm text-gray-600">{label || `${layoutDirection || "기본"} 영역`}</p>
+        <p className="mt-2 text-sm text-muted-foreground">{label || `${layoutDirection || "기본"} 영역`}</p>
         <p className="text-xs text-gray-400">컴포넌트를 드래그해서 추가하세요</p>
       </div>
     </div>
@@ -182,7 +182,7 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
     case "text":
     case "email":
     case "tel":
-      return <Type className="h-4 w-4 text-blue-600" />;
+      return <Type className="h-4 w-4 text-primary" />;
     case "number":
     case "decimal":
       return <Hash className="h-4 w-4 text-green-600" />;
@@ -196,11 +196,11 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
       return <AlignLeft className="h-4 w-4 text-indigo-600" />;
     case "boolean":
     case "checkbox":
-      return <CheckSquare className="h-4 w-4 text-blue-600" />;
+      return <CheckSquare className="h-4 w-4 text-primary" />;
     case "radio":
-      return <Radio className="h-4 w-4 text-blue-600" />;
+      return <Radio className="h-4 w-4 text-primary" />;
     case "code":
-      return <Code className="h-4 w-4 text-gray-600" />;
+      return <Code className="h-4 w-4 text-muted-foreground" />;
     case "entity":
       return <Building className="h-4 w-4 text-cyan-600" />;
     case "file":
@@ -491,7 +491,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                   <div className="flex h-full flex-col items-center justify-center text-center">
                     <File className="mb-2 h-8 w-8 text-gray-400" />
                     <p className="text-xs font-medium text-gray-700 mb-1">업로드된 파일 (0)</p>
-                    <p className="text-sm text-gray-600">파일 업로드 영역</p>
+                    <p className="text-sm text-muted-foreground">파일 업로드 영역</p>
                     <p className="mt-1 text-xs text-gray-400">상세설정에서 파일을 업로드하세요</p>
                   </div>
                 )}
diff --git a/frontend/components/screen/ResponsiveDesignerContainer.tsx b/frontend/components/screen/ResponsiveDesignerContainer.tsx
index b014172b..57f55b14 100644
--- a/frontend/components/screen/ResponsiveDesignerContainer.tsx
+++ b/frontend/components/screen/ResponsiveDesignerContainer.tsx
@@ -125,7 +125,7 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
             <ZoomOut className="h-4 w-4" />
           </Button>
 
-          <span className="min-w-[60px] px-2 text-center text-xs text-gray-600">{Math.round(scale * 100)}%</span>
+          <span className="min-w-[60px] px-2 text-center text-xs text-muted-foreground">{Math.round(scale * 100)}%</span>
 
           <Button variant="ghost" size="sm" onClick={handleZoomIn} className="h-8 w-8 p-0" title="확대">
             <ZoomIn className="h-4 w-4" />
diff --git a/frontend/components/screen/SaveModal.tsx b/frontend/components/screen/SaveModal.tsx
new file mode 100644
index 00000000..ddd55237
--- /dev/null
+++ b/frontend/components/screen/SaveModal.tsx
@@ -0,0 +1,305 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { X, Save, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
+import { InteractiveScreenViewer } from "./InteractiveScreenViewer";
+import { screenApi } from "@/lib/api/screen";
+import { dynamicFormApi, DynamicFormData } from "@/lib/api/dynamicForm";
+import { ComponentData } from "@/lib/types/screen";
+
+interface SaveModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  screenId?: number;
+  modalSize?: "sm" | "md" | "lg" | "xl" | "full";
+  initialData?: any; // 수정 모드일 때 기존 데이터
+  onSaveSuccess?: () => void; // 저장 성공 시 콜백 (테이블 새로고침용)
+}
+
+/**
+ * 저장 전용 모달 컴포넌트
+ * - 저장 성공 시: 메시지 표시 → 모달 닫기 → 테이블 새로고침
+ * - 저장 실패 시: 에러 메시지 표시, 모달 유지
+ */
+export const SaveModal: React.FC<SaveModalProps> = ({
+  isOpen,
+  onClose,
+  screenId,
+  modalSize = "lg",
+  initialData,
+  onSaveSuccess,
+}) => {
+  const [formData, setFormData] = useState<Record<string, any>>(initialData || {});
+  const [originalData, setOriginalData] = useState<Record<string, any>>(initialData || {});
+  const [screenData, setScreenData] = useState<any>(null);
+  const [components, setComponents] = useState<ComponentData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // 모달 크기 설정
+  const modalSizeClasses = {
+    sm: "max-w-md",
+    md: "max-w-2xl",
+    lg: "max-w-4xl",
+    xl: "max-w-6xl",
+    full: "max-w-[95vw]",
+  };
+
+  // 화면 데이터 로드
+  useEffect(() => {
+    const loadScreenData = async () => {
+      if (!screenId || !isOpen) return;
+
+      try {
+        setLoading(true);
+
+        // 화면 정보 로드
+        const screen = await screenApi.getScreen(screenId);
+        setScreenData(screen);
+
+        // 레이아웃 로드
+        const layout = await screenApi.getLayout(screenId);
+        setComponents(layout.components || []);
+
+        // initialData가 있으면 폼에 채우기
+        if (initialData) {
+          setFormData(initialData);
+          setOriginalData(initialData);
+        }
+      } catch (error) {
+        console.error("화면 로드 실패:", error);
+        toast.error("화면을 불러오는데 실패했습니다.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadScreenData();
+  }, [screenId, isOpen, initialData]);
+
+  // closeSaveModal 이벤트 리스너
+  useEffect(() => {
+    const handleCloseSaveModal = () => {
+      console.log("🚪 SaveModal 닫기 이벤트 수신");
+      onClose();
+    };
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('closeSaveModal', handleCloseSaveModal);
+    }
+
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('closeSaveModal', handleCloseSaveModal);
+      }
+    };
+  }, [onClose]);
+
+  // 저장 핸들러
+  const handleSave = async () => {
+    if (!screenData || !screenId) return;
+
+    try {
+      setIsSaving(true);
+
+      // 변경된 데이터만 추출 (수정 모드일 때)
+      const changedData: Record<string, any> = {};
+      if (initialData) {
+        // 수정 모드: 변경된 필드만 전송
+        Object.keys(formData).forEach((key) => {
+          if (formData[key] !== originalData[key]) {
+            changedData[key] = formData[key];
+          }
+        });
+
+        // 변경사항이 없으면 저장하지 않음
+        if (Object.keys(changedData).length === 0) {
+          toast.info("변경된 내용이 없습니다.");
+          setIsSaving(false);
+          return;
+        }
+      }
+
+      // 저장할 데이터 준비
+      const dataToSave = initialData ? changedData : formData;
+
+      // 테이블명 결정
+      const tableName =
+        screenData.tableName ||
+        components.find((c) => c.columnName)?.tableName ||
+        "dynamic_form_data";
+
+      const saveData: DynamicFormData = {
+        screenId: screenId,
+        tableName: tableName,
+        data: dataToSave,
+      };
+
+      console.log("💾 저장 요청 데이터:", saveData);
+
+      // API 호출
+      const result = await dynamicFormApi.saveFormData(saveData);
+
+      if (result.success) {
+        // ✅ 저장 성공
+        toast.success(initialData ? "수정되었습니다!" : "저장되었습니다!");
+        
+        // 모달 닫기
+        onClose();
+        
+        // 테이블 새로고침 콜백 호출
+        if (onSaveSuccess) {
+          setTimeout(() => {
+            onSaveSuccess();
+          }, 300); // 모달 닫힘 애니메이션 후 실행
+        }
+      } else {
+        throw new Error(result.message || "저장에 실패했습니다.");
+      }
+    } catch (error: any) {
+      // ❌ 저장 실패 - 모달은 닫히지 않음
+      console.error("저장 실패:", error);
+      toast.error(`저장 중 오류가 발생했습니다: ${error.message || "알 수 없는 오류"}`);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 동적 크기 계산 (컴포넌트들의 위치 기반)
+  const calculateDynamicSize = () => {
+    if (!components.length) return { width: 800, height: 600 };
+
+    const maxX = Math.max(...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)));
+    const maxY = Math.max(...components.map((c) => (c.position?.y || 0) + (c.size?.height || 40)));
+
+    const padding = 40;
+    return {
+      width: Math.max(maxX + padding, 400),
+      height: Math.max(maxY + padding, 300),
+    };
+  };
+
+  const dynamicSize = calculateDynamicSize();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !isSaving && !open && onClose()}>
+      <DialogContent className={`${modalSizeClasses[modalSize]} max-h-[90vh] p-0 gap-0`}>
+        <DialogHeader className="px-6 py-4 border-b">
+          <div className="flex items-center justify-between">
+            <DialogTitle className="text-lg font-semibold">
+              {initialData ? "데이터 수정" : "데이터 등록"}
+            </DialogTitle>
+            <div className="flex items-center gap-2">
+              <Button
+                onClick={handleSave}
+                disabled={isSaving}
+                size="sm"
+                className="gap-2"
+              >
+                {isSaving ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    저장 중...
+                  </>
+                ) : (
+                  <>
+                    <Save className="h-4 w-4" />
+                    저장
+                  </>
+                )}
+              </Button>
+              <Button
+                onClick={onClose}
+                disabled={isSaving}
+                variant="ghost"
+                size="sm"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="overflow-auto p-6">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+          ) : screenData && components.length > 0 ? (
+            <div
+              className="relative bg-white"
+              style={{
+                width: dynamicSize.width,
+                height: dynamicSize.height,
+                overflow: "hidden",
+              }}
+            >
+              <div className="relative" style={{ minHeight: "300px" }}>
+                {components.map((component, index) => (
+                  <div
+                    key={component.id}
+                    style={{
+                      position: "absolute",
+                      top: component.position?.y || 0,
+                      left: component.position?.x || 0,
+                      width: component.size?.width || 200,
+                      height: component.size?.height || 40,
+                      zIndex: component.position?.z || 1000 + index,
+                    }}
+                  >
+                    {component.type === "widget" ? (
+                      <InteractiveScreenViewer
+                        component={component}
+                        allComponents={components}
+                        formData={formData}
+                        onFormDataChange={(fieldName, value) => {
+                          setFormData((prev) => ({
+                            ...prev,
+                            [fieldName]: value,
+                          }));
+                        }}
+                        hideLabel={false}
+                      />
+                    ) : (
+                      <DynamicComponentRenderer
+                        component={{
+                          ...component,
+                          style: {
+                            ...component.style,
+                            labelDisplay: true,
+                          },
+                        }}
+                        screenId={screenId}
+                        tableName={screenData.tableName}
+                        formData={formData}
+                        originalData={originalData}
+                        onFormDataChange={(fieldName, value) => {
+                          setFormData((prev) => ({
+                            ...prev,
+                            [fieldName]: value,
+                          }));
+                        }}
+                        mode={initialData ? "edit" : "create"}
+                        isInModal={true}
+                        isInteractive={true}
+                      />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="py-12 text-center text-muted-foreground">
+              화면에 컴포넌트가 없습니다.
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 7ad4df42..d90c3ddc 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -49,7 +49,7 @@ import FloatingPanel from "./FloatingPanel";
 import DesignerToolbar from "./DesignerToolbar";
 import TablesPanel from "./panels/TablesPanel";
 import { TemplatesPanel, TemplateComponent } from "./panels/TemplatesPanel";
-import ComponentsPanel from "./panels/ComponentsPanel";
+import { ComponentsPanel } from "./panels/ComponentsPanel";
 import LayoutsPanel from "./panels/LayoutsPanel";
 import PropertiesPanel from "./panels/PropertiesPanel";
 import DetailSettingsPanel from "./panels/DetailSettingsPanel";
@@ -1210,7 +1210,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#3b83f6",
+              labelColor: "#212121",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1289,7 +1289,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#3b83f6",
+              labelColor: "#212121",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1340,7 +1340,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#3b83f6",
+              labelColor: "#212121",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1391,7 +1391,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#3b83f6",
+              labelColor: "#212121",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1480,7 +1480,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#3b83f6",
+              labelColor: "#212121",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
               ...templateComp.style,
@@ -1776,7 +1776,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         style: {
           labelDisplay: false, // 모든 컴포넌트의 기본 라벨 표시를 false로 설정
           labelFontSize: "14px",
-          labelColor: "#3b83f6",
+          labelColor: "#212121",
           labelFontWeight: "500",
           labelMarginBottom: "4px",
         },
@@ -1865,7 +1865,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
-              labelColor: "#3b83f6",
+              labelColor: "#212121",
               labelFontWeight: "600",
               labelMarginBottom: "8px",
             },
@@ -2075,7 +2075,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                 style: {
                   labelDisplay: false, // 모든 컴포넌트의 기본 라벨 표시를 false로 설정
                   labelFontSize: "12px",
-                  labelColor: "#3b83f6",
+                  labelColor: "#212121",
                   labelFontWeight: "500",
                   labelMarginBottom: "6px",
                 },
@@ -2118,7 +2118,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               style: {
                 labelDisplay: true, // 테이블 패널에서 드래그한 컴포넌트는 라벨을 기본적으로 표시
                 labelFontSize: "12px",
-                labelColor: "#3b83f6",
+                labelColor: "#212121",
                 labelFontWeight: "500",
                 labelMarginBottom: "6px",
               },
diff --git a/frontend/components/screen/ScreenDesigner_old.tsx b/frontend/components/screen/ScreenDesigner_old.tsx
index fb0e9a96..d065870f 100644
--- a/frontend/components/screen/ScreenDesigner_old.tsx
+++ b/frontend/components/screen/ScreenDesigner_old.tsx
@@ -1585,16 +1585,16 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       {/* 메인 컨텐츠 영역 */}
       <div className="flex flex-1 overflow-hidden">
         {/* 좌측 사이드바 - 테이블 타입 */}
-        <div className="flex w-80 flex-col border-r bg-gray-50">
+        <div className="flex w-80 flex-col border-r bg-muted">
           <div className="border-b bg-white p-4">
             <div className="mb-4">
               <h3 className="text-lg font-medium">테이블 타입</h3>
               {selectedScreen && (
-                <div className="mt-2 rounded-md bg-blue-50 p-3">
+                <div className="mt-2 rounded-md bg-accent p-3">
                   <div className="text-sm font-medium text-blue-900">선택된 화면</div>
                   <div className="text-xs text-blue-700">{selectedScreen.screenName}</div>
                   <div className="mt-1 flex items-center space-x-2">
-                    <Database className="h-3 w-3 text-blue-600" />
+                    <Database className="h-3 w-3 text-primary" />
                     <span className="font-mono text-xs text-blue-800">{selectedScreen.tableName}</span>
                   </div>
                 </div>
@@ -1613,12 +1613,12 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             </div>
 
             {/* 검색 결과 정보 */}
-            <div className="mb-2 text-sm text-gray-600">
+            <div className="mb-2 text-sm text-muted-foreground">
               총 {filteredTables.length}개 테이블 중 {(currentPage - 1) * itemsPerPage + 1}-
               {Math.min(currentPage * itemsPerPage, filteredTables.length)}번째
             </div>
 
-            <p className="mb-4 text-sm text-gray-600">테이블과 컬럼을 드래그하여 캔버스에 배치하세요.</p>
+            <p className="mb-4 text-sm text-muted-foreground">테이블과 컬럼을 드래그하여 캔버스에 배치하세요.</p>
           </div>
 
           {/* 테이블 목록 */}
@@ -1657,7 +1657,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     }
                   >
                     <div className="flex items-center space-x-2">
-                      <Database className="h-4 w-4 text-blue-600" />
+                      <Database className="h-4 w-4 text-primary" />
                       <div>
                         <div className="text-sm font-medium">{table.tableLabel}</div>
                         <div className="text-xs text-gray-500">{table.tableName}</div>
@@ -1703,9 +1703,9 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                           }}
                         >
                           <div className="flex-shrink-0">
-                            {column.webType === "text" && <Type className="h-3 w-3 text-blue-600" />}
-                            {column.webType === "email" && <Type className="h-3 w-3 text-blue-600" />}
-                            {column.webType === "tel" && <Type className="h-3 w-3 text-blue-600" />}
+                            {column.webType === "text" && <Type className="h-3 w-3 text-primary" />}
+                            {column.webType === "email" && <Type className="h-3 w-3 text-primary" />}
+                            {column.webType === "tel" && <Type className="h-3 w-3 text-primary" />}
                             {column.webType === "number" && <Hash className="h-3 w-3 text-green-600" />}
                             {column.webType === "decimal" && <Hash className="h-3 w-3 text-green-600" />}
                             {column.webType === "date" && <Calendar className="h-3 w-3 text-purple-600" />}
@@ -1714,10 +1714,10 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                             {column.webType === "dropdown" && <List className="h-3 w-3 text-orange-600" />}
                             {column.webType === "textarea" && <AlignLeft className="h-3 w-3 text-indigo-600" />}
                             {column.webType === "text_area" && <AlignLeft className="h-3 w-3 text-indigo-600" />}
-                            {column.webType === "checkbox" && <CheckSquare className="h-3 w-3 text-blue-600" />}
-                            {column.webType === "boolean" && <CheckSquare className="h-3 w-3 text-blue-600" />}
-                            {column.webType === "radio" && <Radio className="h-3 w-3 text-blue-600" />}
-                            {column.webType === "code" && <Code className="h-3 w-3 text-gray-600" />}
+                            {column.webType === "checkbox" && <CheckSquare className="h-3 w-3 text-primary" />}
+                            {column.webType === "boolean" && <CheckSquare className="h-3 w-3 text-primary" />}
+                            {column.webType === "radio" && <Radio className="h-3 w-3 text-primary" />}
+                            {column.webType === "code" && <Code className="h-3 w-3 text-muted-foreground" />}
                             {column.webType === "entity" && <Building className="h-3 w-3 text-cyan-600" />}
                             {column.webType === "file" && <File className="h-3 w-3 text-yellow-600" />}
                           </div>
@@ -1747,7 +1747,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                   이전
                 </Button>
 
-                <div className="text-sm text-gray-600">
+                <div className="text-sm text-muted-foreground">
                   {currentPage} / {totalPages}
                 </div>
 
@@ -1768,7 +1768,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         <div className="flex-1 bg-white" ref={scrollContainerRef}>
           <div className="h-full w-full overflow-auto p-6">
             <div
-              className="min-h-full rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4"
+              className="min-h-full rounded-lg border-2 border-dashed border-gray-300 bg-muted p-4"
               onDrop={onDrop}
               onDragOver={onDragOver}
               ref={canvasRef}
@@ -1881,7 +1881,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         </div>
 
         {/* 우측: 컴포넌트 스타일 편집 */}
-        <div className="w-80 border-l bg-gray-50">
+        <div className="w-80 border-l bg-muted">
           <div className="h-full space-y-4 overflow-y-auto p-4">
             {/* 격자 설정 */}
             <GridControls
@@ -2047,7 +2047,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     <Separator />
                     <div className="space-y-2">
                       <Label htmlFor="tableName">테이블명</Label>
-                      <Input id="tableName" value={selectedComponent.tableName || ""} readOnly className="bg-gray-50" />
+                      <Input id="tableName" value={selectedComponent.tableName || ""} readOnly className="bg-muted" />
                     </div>
 
                     {/* 위젯 전용 속성 */}
@@ -2059,7 +2059,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                             id="columnName"
                             value={selectedComponent.columnName || ""}
                             readOnly
-                            className="bg-gray-50"
+                            className="bg-muted"
                           />
                         </div>
                         <div className="space-y-2">
@@ -2068,7 +2068,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                             id="widgetType"
                             value={selectedComponent.widgetType || ""}
                             readOnly
-                            className="bg-gray-50"
+                            className="bg-muted"
                           />
                         </div>
                         <div className="space-y-2">
@@ -2130,7 +2130,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     <Separator />
                     <div className="space-y-2">
                       <Label htmlFor="parentId">부모 ID</Label>
-                      <Input id="parentId" value={selectedComponent.parentId || ""} readOnly className="bg-gray-50" />
+                      <Input id="parentId" value={selectedComponent.parentId || ""} readOnly className="bg-muted" />
                     </div>
                     <Button variant="destructive" size="sm" onClick={deleteComponents} className="w-full">
                       <Trash2 className="mr-2 h-4 w-4" />
diff --git a/frontend/components/screen/ScreenList.tsx b/frontend/components/screen/ScreenList.tsx
index 384aee00..dc6bab87 100644
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@@ -330,7 +330,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
           </div>
         </div>
         <Button
-          className="bg-blue-600 hover:bg-blue-700"
+          variant="default"
           onClick={() => setIsCreateOpen(true)}
           disabled={activeTab === "trash"}
         >
@@ -370,7 +370,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                     <TableRow
                       key={screen.screenId}
                       className={`cursor-pointer hover:bg-gray-50 ${
-                        selectedScreen?.screenId === screen.screenId ? "border-blue-200 bg-blue-50" : ""
+                        selectedScreen?.screenId === screen.screenId ? "border-primary/20 bg-accent" : ""
                       }`}
                       onClick={() => handleScreenSelect(screen)}
                     >
@@ -386,7 +386,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                         </Badge>
                       </TableCell>
                       <TableCell>
-                        <span className="font-mono text-sm text-gray-600">{screen.tableLabel || screen.tableName}</span>
+                        <span className="font-mono text-sm text-muted-foreground">{screen.tableLabel || screen.tableName}</span>
                       </TableCell>
                       <TableCell>
                         <Badge
@@ -399,7 +399,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                         </Badge>
                       </TableCell>
                       <TableCell>
-                        <div className="text-sm text-gray-600">{screen.createdDate.toLocaleDateString()}</div>
+                        <div className="text-sm text-muted-foreground">{screen.createdDate.toLocaleDateString()}</div>
                         <div className="text-xs text-gray-400">{screen.createdBy}</div>
                       </TableCell>
                       <TableCell>
@@ -428,7 +428,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                             </DropdownMenuItem>
                             <DropdownMenuItem
                               onClick={() => handleDelete(screen)}
-                              className="text-red-600"
+                              className="text-destructive"
                               disabled={checkingDependencies && screenToDelete?.screenId === screen.screenId}
                             >
                               <Trash2 className="mr-2 h-4 w-4" />
@@ -504,16 +504,16 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                         </Badge>
                       </TableCell>
                       <TableCell>
-                        <span className="font-mono text-sm text-gray-600">{screen.tableLabel || screen.tableName}</span>
+                        <span className="font-mono text-sm text-muted-foreground">{screen.tableLabel || screen.tableName}</span>
                       </TableCell>
                       <TableCell>
-                        <div className="text-sm text-gray-600">{screen.deletedDate?.toLocaleDateString()}</div>
+                        <div className="text-sm text-muted-foreground">{screen.deletedDate?.toLocaleDateString()}</div>
                       </TableCell>
                       <TableCell>
-                        <div className="text-sm text-gray-600">{screen.deletedBy}</div>
+                        <div className="text-sm text-muted-foreground">{screen.deletedBy}</div>
                       </TableCell>
                       <TableCell>
-                        <div className="max-w-32 truncate text-sm text-gray-600" title={screen.deleteReason}>
+                        <div className="max-w-32 truncate text-sm text-muted-foreground" title={screen.deleteReason}>
                           {screen.deleteReason || "-"}
                         </div>
                       </TableCell>
@@ -532,7 +532,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                             variant="outline"
                             size="sm"
                             onClick={() => handlePermanentDelete(screen)}
-                            className="text-red-600 hover:text-red-700"
+                            className="text-destructive hover:text-red-700"
                           >
                             <Trash className="mr-1 h-3 w-3" />
                             영구삭제
@@ -563,7 +563,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
           >
             이전
           </Button>
-          <span className="text-sm text-gray-600">
+          <span className="text-sm text-muted-foreground">
             {currentPage} / {totalPages}
           </span>
           <Button
@@ -617,7 +617,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
           </div>
           <AlertDialogFooter>
             <AlertDialogCancel onClick={handleCancelDelete}>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={() => confirmDelete(false)} className="bg-red-600 hover:bg-red-700">
+            <AlertDialogAction onClick={() => confirmDelete(false)} variant="destructive">
               휴지통으로 이동
             </AlertDialogAction>
           </AlertDialogFooter>
@@ -643,7 +643,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                   <div className="flex items-center justify-between">
                     <div>
                       <div className="font-medium text-gray-900">{dep.screenName}</div>
-                      <div className="text-sm text-gray-600">화면 코드: {dep.screenCode}</div>
+                      <div className="text-sm text-muted-foreground">화면 코드: {dep.screenCode}</div>
                     </div>
                     <div className="text-right">
                       <div className="text-sm font-medium text-orange-600">
@@ -677,7 +677,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             <AlertDialogCancel onClick={handleCancelDelete}>취소</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => confirmDelete(true)}
-              className="bg-orange-600 hover:bg-orange-700"
+              variant="destructive"
               disabled={!deleteReason.trim()}
             >
               강제 삭제
@@ -691,7 +691,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>영구 삭제 확인</AlertDialogTitle>
-            <AlertDialogDescription className="text-red-600">
+            <AlertDialogDescription className="text-destructive">
               ⚠️ "{screenToPermanentDelete?.screenName}" 화면을 영구적으로 삭제하시겠습니까?
               <br />
               <strong>이 작업은 되돌릴 수 없습니다!</strong>
@@ -708,7 +708,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             >
               취소
             </AlertDialogCancel>
-            <AlertDialogAction onClick={confirmPermanentDelete} className="bg-red-600 hover:bg-red-700">
+            <AlertDialogAction onClick={confirmPermanentDelete} variant="destructive">
               영구 삭제
             </AlertDialogAction>
           </AlertDialogFooter>
@@ -720,7 +720,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>일괄 영구 삭제 확인</AlertDialogTitle>
-            <AlertDialogDescription className="text-red-600">
+            <AlertDialogDescription className="text-destructive">
               ⚠️ 선택된 {selectedScreenIds.length}개 화면을 영구적으로 삭제하시겠습니까?
               <br />
               <strong>이 작업은 되돌릴 수 없습니다!</strong>
@@ -739,7 +739,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmBulkDelete}
-              className="bg-red-600 hover:bg-red-700"
+              variant="destructive"
               disabled={bulkDeleting}
             >
               {bulkDeleting ? "삭제 중..." : `${selectedScreenIds.length}개 영구 삭제`}
diff --git a/frontend/components/screen/SimpleScreenDesigner.tsx b/frontend/components/screen/SimpleScreenDesigner.tsx
index e4b8f726..6f76a112 100644
--- a/frontend/components/screen/SimpleScreenDesigner.tsx
+++ b/frontend/components/screen/SimpleScreenDesigner.tsx
@@ -204,7 +204,7 @@ export default function SimpleScreenDesigner({ selectedScreen, onBackToList }: S
       {/* 간단한 컨트롤 버튼들 */}
       <div className="border-b border-gray-300 bg-white p-4">
         <div className="flex gap-2">
-          <button onClick={handleAddText} className="rounded bg-blue-500 px-3 py-1 text-white hover:bg-blue-600">
+          <button onClick={handleAddText} className="rounded bg-accent0 px-3 py-1 text-white hover:bg-blue-600">
             텍스트 추가
           </button>
           <button onClick={handleAddContainer} className="rounded bg-green-500 px-3 py-1 text-white hover:bg-green-600">
diff --git a/frontend/components/screen/TemplateManager.tsx b/frontend/components/screen/TemplateManager.tsx
index dd627395..02f0ec13 100644
--- a/frontend/components/screen/TemplateManager.tsx
+++ b/frontend/components/screen/TemplateManager.tsx
@@ -290,7 +290,7 @@ export default function TemplateManager({
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
                         <h3 className="mb-1 text-sm font-medium">{template.templateName}</h3>
-                        <p className="mb-2 text-xs text-gray-600">{template.description || "설명 없음"}</p>
+                        <p className="mb-2 text-xs text-muted-foreground">{template.description || "설명 없음"}</p>
                         <div className="flex items-center gap-2">
                           <Badge variant="outline" className="text-xs">
                             {template.templateType}
@@ -334,7 +334,7 @@ export default function TemplateManager({
                               e.stopPropagation();
                               handleTemplateDelete(template.templateId);
                             }}
-                            className="text-red-600 hover:text-red-700"
+                            className="text-destructive hover:text-red-700"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
@@ -357,11 +357,11 @@ export default function TemplateManager({
               <CardContent className="space-y-4">
                 <div>
                   <label className="text-sm font-medium">템플릿명</label>
-                  <p className="text-sm text-gray-600">{selectedTemplate.templateName}</p>
+                  <p className="text-sm text-muted-foreground">{selectedTemplate.templateName}</p>
                 </div>
                 <div>
                   <label className="text-sm font-medium">설명</label>
-                  <p className="text-sm text-gray-600">{selectedTemplate.description}</p>
+                  <p className="text-sm text-muted-foreground">{selectedTemplate.description}</p>
                 </div>
                 <div>
                   <label className="text-sm font-medium">타입</label>
@@ -371,11 +371,11 @@ export default function TemplateManager({
                 </div>
                 <div>
                   <label className="text-sm font-medium">컴포넌트 수</label>
-                  <p className="text-sm text-gray-600">{selectedTemplate.layoutData?.components?.length || 0}개</p>
+                  <p className="text-sm text-muted-foreground">{selectedTemplate.layoutData?.components?.length || 0}개</p>
                 </div>
                 <div>
                   <label className="text-sm font-medium">그리드 설정</label>
-                  <p className="text-sm text-gray-600">
+                  <p className="text-sm text-muted-foreground">
                     {selectedTemplate.layoutData?.gridSettings?.columns || 12} 컬럼, 간격:{" "}
                     {selectedTemplate.layoutData?.gridSettings?.gap || 16}px
                   </p>
diff --git a/frontend/components/screen/WidgetFactory.tsx b/frontend/components/screen/WidgetFactory.tsx
index 990740e8..77b6ab8a 100644
--- a/frontend/components/screen/WidgetFactory.tsx
+++ b/frontend/components/screen/WidgetFactory.tsx
@@ -41,7 +41,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
             />
           </div>
         </div>
@@ -66,7 +66,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 font-mono text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 font-mono text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
             />
           </div>
         </div>
@@ -91,7 +91,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
             />
           </div>
         </div>
@@ -114,7 +114,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.files?.[0]?.name || "")}
               required={widget.required}
               disabled={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm file:mr-4 file:rounded-md file:border-0 file:bg-blue-50 file:px-4 file:py-1 file:text-sm file:font-medium file:text-blue-700 hover:file:bg-blue-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm file:mr-4 file:rounded-md file:border-0 file:bg-accent file:px-4 file:py-1 file:text-sm file:font-medium file:text-blue-700 hover:file:bg-primary/20 focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
             />
           </div>
         </div>
@@ -135,7 +135,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.checked ? "true" : "false")}
               required={widget.required}
               disabled={widget.readonly}
-              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-blue-500"
             />
             {widget.label && (
               <label htmlFor={widget.id} className="text-sm font-medium">
@@ -168,7 +168,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
                 onChange={(e) => onChange?.(e.target.value)}
                 required={widget.required}
                 disabled={widget.readonly}
-                className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                className="h-4 w-4 border-gray-300 text-primary focus:ring-blue-500"
               />
               <label htmlFor={`${widget.id}-yes`} className="text-sm">
                 예
@@ -185,7 +185,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
                 onChange={(e) => onChange?.(e.target.value)}
                 required={widget.required}
                 disabled={widget.readonly}
-                className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
+                className="h-4 w-4 border-gray-300 text-primary focus:ring-blue-500"
               />
               <label htmlFor={`${widget.id}-no`} className="text-sm">
                 아니오
@@ -200,7 +200,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
 
     default:
       return (
-        <div className={`rounded border border-red-300 bg-red-50 p-4 text-red-600 ${className}`}>
+        <div className={`rounded border border-red-300 bg-destructive/10 p-4 text-destructive ${className}`}>
           <p className="text-sm font-medium">지원하지 않는 위젯 타입</p>
           <p className="text-xs text-red-500">타입: {widget.widgetType}</p>
         </div>
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 216a15fb..555a2c12 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -150,7 +150,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
               // 다른 액션일 때 기본 파란색으로 리셋
               onUpdateProperty("style", {
                 ...component.style,
-                labelColor: '#3b83f6'
+                labelColor: '#212121'
               });
             }
           }}
@@ -524,7 +524,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
       <div className="mt-8 border-t border-gray-200 pt-6">
         <div className="mb-4">
           <h3 className="text-lg font-medium text-gray-900">🔧 고급 기능</h3>
-          <p className="mt-1 text-sm text-gray-600">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
+          <p className="mt-1 text-sm text-muted-foreground">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
         </div>
 
         <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
diff --git a/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
index a465694f..6659d469 100644
--- a/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
@@ -223,12 +223,12 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
   return (
     <div className="space-y-6">
       {/* 🔥 제어관리 활성화 스위치 */}
-      <div className="flex items-center justify-between rounded-lg border bg-blue-50 p-4">
+      <div className="flex items-center justify-between rounded-lg border bg-accent p-4">
         <div className="flex items-center space-x-2">
-          <Settings className="h-4 w-4 text-blue-600" />
+          <Settings className="h-4 w-4 text-primary" />
           <div>
             <Label className="text-sm font-medium">📊 제어관리 기능</Label>
-            <p className="mt-1 text-xs text-gray-600">버튼 클릭 시 데이터 흐름을 자동으로 제어합니다</p>
+            <p className="mt-1 text-xs text-muted-foreground">버튼 클릭 시 데이터 흐름을 자동으로 제어합니다</p>
           </div>
         </div>
         <Switch
@@ -283,10 +283,10 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
       )}
 
       {config.enableDataflowControl && (
-        <div className="space-y-6 border-l-2 border-blue-200 pl-4">
+        <div className="space-y-6 border-l-2 border-primary/20 pl-4">
           {/* 현재 액션 정보 (간소화) */}
           <div className="rounded bg-gray-100 p-2">
-            <p className="text-xs text-gray-600">
+            <p className="text-xs text-muted-foreground">
               <strong>{getActionDisplayName(config.actionType || "save")}</strong> 액션에 제어관리 연결
             </p>
           </div>
@@ -481,7 +481,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
 
               {/* 선택된 관계 간단 정보 */}
               {selectedRelationship && (
-                <div className="mt-2 rounded border bg-blue-50 p-2">
+                <div className="mt-2 rounded border bg-accent p-2">
                   <p className="text-xs text-blue-700">
                     <strong>{selectedRelationship.sourceTable}</strong> →{" "}
                     <strong>{selectedRelationship.targetTable}</strong>
diff --git a/frontend/components/screen/config-panels/CodeConfigPanel.tsx b/frontend/components/screen/config-panels/CodeConfigPanel.tsx
index 3e975bd6..6d5bebdf 100644
--- a/frontend/components/screen/config-panels/CodeConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CodeConfigPanel.tsx
@@ -320,7 +320,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               <button
                 type="button"
                 onClick={setSampleCode}
-                className="text-xs text-blue-600 underline hover:text-blue-800"
+                className="text-xs text-primary underline hover:text-blue-800"
               >
                 샘플 코드 사용
               </button>
diff --git a/frontend/components/screen/config-panels/EntityConfigPanel.tsx b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
index fa4877fa..fe753451 100644
--- a/frontend/components/screen/config-panels/EntityConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
@@ -509,7 +509,7 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             <div className="space-y-2">
               <div className="flex items-center gap-2 rounded border bg-white p-2">
                 <Database className="h-4 w-4 text-gray-400" />
-                <span className="flex-1 text-xs text-gray-600">{localConfig.placeholder || "엔티티를 선택하세요"}</span>
+                <span className="flex-1 text-xs text-muted-foreground">{localConfig.placeholder || "엔티티를 선택하세요"}</span>
                 {localConfig.searchable && <Search className="h-4 w-4 text-gray-400" />}
               </div>
 
diff --git a/frontend/components/screen/config-panels/FileConfigPanel.tsx b/frontend/components/screen/config-panels/FileConfigPanel.tsx
index dba7487d..8205d82f 100644
--- a/frontend/components/screen/config-panels/FileConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/FileConfigPanel.tsx
@@ -363,7 +363,7 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               }`}
             >
               <File className="mx-auto h-8 w-8 text-gray-400" />
-              <p className="text-xs text-gray-600">{localConfig.uploadText}</p>
+              <p className="text-xs text-muted-foreground">{localConfig.uploadText}</p>
               <Button size="sm" variant="outline" disabled={localConfig.readonly} className="text-xs">
                 {localConfig.browseText}
               </Button>
diff --git a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
index 2a26a1c3..150d8a5b 100644
--- a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
@@ -117,12 +117,12 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
   return (
     <div className="space-y-6">
       {/* 🔥 제어관리 활성화 스위치 */}
-      <div className="flex items-center justify-between rounded-lg border bg-blue-50 p-4">
+      <div className="flex items-center justify-between rounded-lg border bg-accent p-4">
         <div className="flex items-center space-x-2">
-          <Settings className="h-4 w-4 text-blue-600" />
+          <Settings className="h-4 w-4 text-primary" />
           <div>
             <Label className="text-sm font-medium">🎮 고급 제어 기능</Label>
-            <p className="mt-1 text-xs text-gray-600">버튼 클릭 시 추가 작업을 자동으로 실행합니다</p>
+            <p className="mt-1 text-xs text-muted-foreground">버튼 클릭 시 추가 작업을 자동으로 실행합니다</p>
           </div>
         </div>
         <Switch
@@ -172,9 +172,9 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
                       }
                     />
                     
-                    <div className="rounded bg-blue-50 p-3">
+                    <div className="rounded bg-accent p-3">
                       <div className="flex items-start space-x-2">
-                        <Info className="h-4 w-4 text-blue-600 mt-0.5" />
+                        <Info className="h-4 w-4 text-primary mt-0.5" />
                         <div className="text-xs text-blue-800">
                           <p className="font-medium">관계 실행 정보:</p>
                           <p className="mt-1">선택한 관계에 설정된 데이터 저장, 외부호출 등의 모든 액션이 자동으로 실행됩니다.</p>
@@ -204,7 +204,7 @@ const RelationshipSelector: React.FC<{
   return (
     <div className="space-y-4">
       <div className="flex items-center space-x-2">
-        <GitBranch className="h-4 w-4 text-blue-600" />
+        <GitBranch className="h-4 w-4 text-primary" />
         <Label>실행할 관계 선택</Label>
       </div>
       
diff --git a/frontend/components/screen/filters/AdvancedSearchFilters.tsx b/frontend/components/screen/filters/AdvancedSearchFilters.tsx
index 3d5a97c8..9828afc9 100644
--- a/frontend/components/screen/filters/AdvancedSearchFilters.tsx
+++ b/frontend/components/screen/filters/AdvancedSearchFilters.tsx
@@ -323,7 +323,7 @@ export const AdvancedSearchFilters: React.FC<AdvancedSearchFiltersProps> = ({
       <div className="text-muted-foreground flex items-center gap-2 text-sm">
         <Search className="h-3 w-3" />
         검색 필터
-        {autoGeneratedFilters.length > 0 && <span className="text-xs text-blue-600">(자동 생성)</span>}
+        {autoGeneratedFilters.length > 0 && <span className="text-xs text-primary">(자동 생성)</span>}
       </div>
 
       {/* 필터 그리드 - 적절한 너비로 조정 */}
diff --git a/frontend/components/screen/layout/ColumnComponent.tsx b/frontend/components/screen/layout/ColumnComponent.tsx
index 9fc4bde4..a00305b8 100644
--- a/frontend/components/screen/layout/ColumnComponent.tsx
+++ b/frontend/components/screen/layout/ColumnComponent.tsx
@@ -63,7 +63,7 @@ export default function ColumnComponent({
     <div
       className={cn(
         "flex-1 rounded border border-gray-200 p-2",
-        isSelected && "border-blue-500 bg-blue-50",
+        isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,
       )}
diff --git a/frontend/components/screen/layout/ContainerComponent.tsx b/frontend/components/screen/layout/ContainerComponent.tsx
index 288d9e44..c2cc4453 100644
--- a/frontend/components/screen/layout/ContainerComponent.tsx
+++ b/frontend/components/screen/layout/ContainerComponent.tsx
@@ -63,7 +63,7 @@ export default function ContainerComponent({
     <div
       className={cn(
         "rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4",
-        isSelected && "border-blue-500 bg-blue-50",
+        isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,
       )}
diff --git a/frontend/components/screen/layout/RowComponent.tsx b/frontend/components/screen/layout/RowComponent.tsx
index 7d8f2196..b1a31b23 100644
--- a/frontend/components/screen/layout/RowComponent.tsx
+++ b/frontend/components/screen/layout/RowComponent.tsx
@@ -63,7 +63,7 @@ export default function RowComponent({
     <div
       className={cn(
         "flex gap-4 rounded border border-gray-200 p-2",
-        isSelected && "border-blue-500 bg-blue-50",
+        isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,
       )}
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index d22016c5..edf3cced 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -1,14 +1,12 @@
 "use client";
 
 import React, { useState, useMemo } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
 import { ComponentDefinition, ComponentCategory } from "@/types/component";
-import { Search, Package, Grid, Layers, Palette, Zap, RotateCcw } from "lucide-react";
+import { Search, Package, Grid, Layers, Palette, Zap, MousePointer } from "lucide-react";
 
 interface ComponentsPanelProps {
   className?: string;
@@ -16,136 +14,93 @@ interface ComponentsPanelProps {
 
 export function ComponentsPanel({ className }: ComponentsPanelProps) {
   const [searchQuery, setSearchQuery] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState<ComponentCategory | "all">("all");
+  const [selectedCategory, setSelectedCategory] = useState<"all" | "display" | "action" | "layout" | "utility">("all");
 
   // 레지스트리에서 모든 컴포넌트 조회
   const allComponents = useMemo(() => {
     const components = ComponentRegistry.getAllComponents();
-    // console.log("🔍 ComponentsPanel - 로드된 컴포넌트:", components.map(c => ({ id: c.id, name: c.name, category: c.category })));
     
     // 수동으로 table-list 컴포넌트 추가 (임시)
     const hasTableList = components.some(c => c.id === 'table-list');
     if (!hasTableList) {
-      // console.log("⚠️ table-list 컴포넌트가 없어서 수동 추가");
       components.push({
-        id: "table-list",
-        name: "테이블 리스트",
-        nameEng: "TableList Component", 
-        description: "데이터베이스 테이블의 데이터를 목록으로 표시하는 컴포넌트",
-        category: "display",
-        webType: "text",
-        defaultConfig: {},
-        defaultSize: { width: 800, height: 400 },
-        icon: "Table",
-        tags: ["테이블", "데이터", "목록", "그리드"],
-        version: "1.0.0",
-        author: "개발팀",
-      });
+        id: 'table-list',
+        name: '데이터 테이블 v2',
+        description: '검색, 필터링, 페이징, CRUD 기능이 포함된 완전한 데이터 테이블 컴포넌트',
+        category: 'display',
+        tags: ['table', 'data', 'crud'],
+        defaultSize: { width: 1000, height: 680 },
+      } as ComponentDefinition);
     }
-    
+
     return components;
   }, []);
 
-  // 카테고리별 분류 (input 카테고리 제외)
+  // 카테고리별 컴포넌트 그룹화
   const componentsByCategory = useMemo(() => {
-    // input 카테고리 컴포넌트들을 제외한 컴포넌트만 필터링
-    const filteredComponents = allComponents.filter((component) => component.category !== "input");
-
-    const categories: Record<ComponentCategory | "all", ComponentDefinition[]> = {
-      all: filteredComponents, // input 카테고리 제외된 컴포넌트들만 포함
-      input: [], // 빈 배열로 유지 (사용되지 않음)
-      display: [],
-      action: [],
-      layout: [],
-      utility: [],
+    return {
+      all: allComponents,
+      display: allComponents.filter((c) => c.category === "display"),
+      action: allComponents.filter((c) => c.category === "action"),
+      layout: allComponents.filter((c) => c.category === "layout"),
+      utility: allComponents.filter((c) => c.category === "utility"),
     };
-
-    filteredComponents.forEach((component) => {
-      if (categories[component.category]) {
-        categories[component.category].push(component);
-      }
-    });
-
-    return categories;
   }, [allComponents]);
 
   // 검색 및 필터링된 컴포넌트
   const filteredComponents = useMemo(() => {
-    let components = componentsByCategory[selectedCategory] || [];
+    let components = selectedCategory === "all" ? componentsByCategory.all : componentsByCategory[selectedCategory as keyof typeof componentsByCategory];
 
-    if (searchQuery.trim()) {
+    if (searchQuery) {
       const query = searchQuery.toLowerCase();
       components = components.filter(
-        (component) =>
+        (component: ComponentDefinition) =>
           component.name.toLowerCase().includes(query) ||
           component.description.toLowerCase().includes(query) ||
-          component.tags?.some((tag) => tag.toLowerCase().includes(query)),
+          component.tags?.some((tag: string) => tag.toLowerCase().includes(query))
       );
     }
 
     return components;
   }, [componentsByCategory, selectedCategory, searchQuery]);
 
+  // 카테고리 아이콘 매핑
+  const getCategoryIcon = (category: ComponentCategory) => {
+    switch (category) {
+      case "display":
+        return <Palette className="h-6 w-6" />;
+      case "action":
+        return <Zap className="h-6 w-6" />;
+      case "layout":
+        return <Layers className="h-6 w-6" />;
+      case "utility":
+        return <Package className="h-6 w-6" />;
+      default:
+        return <Grid className="h-6 w-6" />;
+    }
+  };
+
   // 드래그 시작 핸들러
-  const handleDragStart = (e: React.DragEvent, component: ComponentDefinition) => {
+  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, component: ComponentDefinition) => {
     const dragData = {
       type: "component",
       component: component,
     };
-    // console.log("🚀 컴포넌트 드래그 시작:", component.name, dragData);
     e.dataTransfer.setData("application/json", JSON.stringify(dragData));
     e.dataTransfer.effectAllowed = "copy";
   };
 
-  // 카테고리별 아이콘
-  const getCategoryIcon = (category: ComponentCategory | "all") => {
-    switch (category) {
-      case "input":
-        return <Grid className="h-4 w-4" />;
-      case "display":
-        return <Palette className="h-4 w-4" />;
-      case "action":
-        return <Zap className="h-4 w-4" />;
-      case "layout":
-        return <Layers className="h-4 w-4" />;
-      case "utility":
-        return <Package className="h-4 w-4" />;
-      default:
-        return <Package className="h-4 w-4" />;
-    }
-  };
-
-  // 컴포넌트 새로고침
-  const handleRefresh = () => {
-    // Hot Reload 트리거 (개발 모드에서만)
-    if (process.env.NODE_ENV === "development") {
-      ComponentRegistry.refreshComponents?.();
-    }
-    window.location.reload();
-  };
-
   return (
-    <div className={`h-full bg-gradient-to-br from-slate-50 to-purple-50/30 border-r border-gray-200/60 shadow-sm ${className}`}>
-      <div className="p-6">
-        {/* 헤더 */}
-        <div className="flex items-center justify-between mb-6">
-          <div>
-            <h2 className="text-lg font-semibold text-gray-900 mb-1">컴포넌트</h2>
-            <p className="text-sm text-gray-500">{componentsByCategory.all.length}개의 사용 가능한 컴포넌트</p>
-          </div>
-          <Button 
-            variant="outline" 
-            size="sm" 
-            onClick={handleRefresh} 
-            title="컴포넌트 새로고침"
-            className="bg-white/60 border-gray-200/60 hover:bg-white hover:border-gray-300"
-          >
-            <RotateCcw className="h-4 w-4" />
-          </Button>
-        </div>
+    <div className={`flex h-full flex-col bg-slate-50 p-6 border-r border-gray-200/60 shadow-sm ${className}`}>
+      {/* 헤더 */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-gray-900 mb-1">컴포넌트</h2>
+        <p className="text-sm text-gray-500">7개의 사용 가능한 컴포넌트</p>
+      </div>
 
-        {/* 검색창 */}
-        <div className="relative mb-6">
+      {/* 검색 */}
+      <div className="space-y-4">
+        <div className="relative">
           <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
           <Input
             placeholder="컴포넌트 검색..."
@@ -154,166 +109,125 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
             className="pl-10 border-0 bg-white/80 backdrop-blur-sm shadow-sm focus:bg-white transition-colors"
           />
         </div>
+
+        {/* 카테고리 필터 */}
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant={selectedCategory === "all" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSelectedCategory("all")}
+            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
+          >
+            <Package className="h-3 w-3" />
+            <span>전체</span>
+          </Button>
+          <Button
+            variant={selectedCategory === "display" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSelectedCategory("display")}
+            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
+          >
+            <Palette className="h-3 w-3" />
+            <span>표시</span>
+          </Button>
+          <Button
+            variant={selectedCategory === "action" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSelectedCategory("action")}
+            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
+          >
+            <Zap className="h-3 w-3" />
+            <span>액션</span>
+          </Button>
+          <Button
+            variant={selectedCategory === "layout" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSelectedCategory("layout")}
+            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
+          >
+            <Layers className="h-3 w-3" />
+            <span>레이아웃</span>
+          </Button>
+          <Button
+            variant={selectedCategory === "utility" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setSelectedCategory("utility")}
+            className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
+          >
+            <Package className="h-3 w-3" />
+            <span>유틸리티</span>
+          </Button>
+        </div>
       </div>
 
-      <div className="px-6">
-        <Tabs
-          value={selectedCategory}
-          onValueChange={(value) => setSelectedCategory(value as ComponentCategory | "all")}
-        >
-          {/* 카테고리 탭 (input 카테고리 제외) */}
-          <TabsList className="grid w-full grid-cols-3 lg:grid-cols-5 bg-white/60 backdrop-blur-sm border-0 p-1">
-            <TabsTrigger value="all" className="flex items-center text-xs data-[state=active]:bg-purple-600 data-[state=active]:text-white">
-              <Package className="mr-1 h-3 w-3" />
-              전체
-            </TabsTrigger>
-            <TabsTrigger value="display" className="flex items-center text-xs data-[state=active]:bg-purple-600 data-[state=active]:text-white">
-              <Palette className="mr-1 h-3 w-3" />
-              표시
-            </TabsTrigger>
-            <TabsTrigger value="action" className="flex items-center text-xs data-[state=active]:bg-purple-600 data-[state=active]:text-white">
-              <Zap className="mr-1 h-3 w-3" />
-              액션
-            </TabsTrigger>
-            <TabsTrigger value="layout" className="flex items-center text-xs data-[state=active]:bg-purple-600 data-[state=active]:text-white">
-              <Layers className="mr-1 h-3 w-3" />
-              레이아웃
-            </TabsTrigger>
-            <TabsTrigger value="utility" className="flex items-center text-xs data-[state=active]:bg-purple-600 data-[state=active]:text-white">
-              <Package className="mr-1 h-3 w-3" />
-              유틸리티
-            </TabsTrigger>
-          </TabsList>
-
-          {/* 주황색 강조 영역 */}
-          <div className="mt-4 mb-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-lg">
-            <div className="flex items-center space-x-2">
-              <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
-              <span className="text-sm font-medium text-orange-800">컴포넌트를 드래그하여 화면에 추가하세요</span>
-            </div>
-          </div>
-
-          {/* 컴포넌트 목록 */}
-          <div className="mt-6">
-            <TabsContent value={selectedCategory} className="space-y-3">
-              {filteredComponents.length > 0 ? (
-                <div className="grid max-h-96 grid-cols-1 gap-3 overflow-y-auto pr-2">
-                  {filteredComponents.map((component) => (
-                    <div
-                      key={component.id}
-                      draggable
-                      onDragStart={(e) => {
-                        handleDragStart(e, component);
-                        // 드래그 시작 시 시각적 피드백
-                        e.currentTarget.style.opacity = '0.5';
-                        e.currentTarget.style.transform = 'rotate(-3deg) scale(0.95)';
-                      }}
-                      onDragEnd={(e) => {
-                        // 드래그 종료 시 원래 상태로 복원
-                        e.currentTarget.style.opacity = '1';
-                        e.currentTarget.style.transform = 'none';
-                      }}
-                      className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-purple-500/15 hover:scale-[1.02] hover:border-purple-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
-                      title={component.description}
-                    >
-                      <div className="flex items-start space-x-4">
-                        <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
-                          {getCategoryIcon(component.category)}
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-start justify-between mb-2">
-                            <h4 className="font-semibold text-gray-900 text-sm leading-tight">{component.name}</h4>
-                            <Badge variant="default" className="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white text-xs border-0 ml-2 px-2 py-1 rounded-full font-medium shadow-sm">
-                              신규
-                            </Badge>
-                          </div>
-
-                          <p className="text-xs text-gray-500 line-clamp-2 leading-relaxed mb-3">{component.description}</p>
-
-                          <div className="flex items-center justify-between mb-2">
-                            <div className="flex items-center space-x-2 text-xs text-gray-400">
-                              <span className="bg-gradient-to-r from-gray-100 to-gray-200 px-3 py-1 rounded-full font-medium text-gray-600">
-                                {component.defaultSize.width}×{component.defaultSize.height}
-                              </span>
-                            </div>
-                            <span className="text-xs font-medium text-purple-600 capitalize bg-gradient-to-r from-purple-50 to-indigo-50 px-3 py-1 rounded-full border border-purple-200/50">
-                              {component.category}
-                            </span>
-                          </div>
-
-                          {/* 태그 */}
-                          {component.tags && component.tags.length > 0 && (
-                            <div className="flex flex-wrap gap-1">
-                              {component.tags.slice(0, 2).map((tag, index) => (
-                                <Badge key={index} variant="outline" className="text-xs bg-gradient-to-r from-gray-50 to-gray-100 text-gray-600 border-gray-200/50 rounded-full px-2 py-1">
-                                  {tag}
-                                </Badge>
-                              ))}
-                              {component.tags.length > 2 && (
-                                <Badge variant="outline" className="text-xs bg-gradient-to-r from-gray-50 to-gray-100 text-gray-600 border-gray-200/50 rounded-full px-2 py-1">
-                                  +{component.tags.length - 2}
-                                </Badge>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
+      {/* 컴포넌트 목록 */}
+      <div className="flex-1 space-y-3 overflow-y-auto mt-6">
+        {filteredComponents.length > 0 ? (
+          filteredComponents.map((component) => (
+            <div
+              key={component.id}
+              draggable
+              onDragStart={(e) => {
+                handleDragStart(e, component);
+                // 드래그 시작 시 시각적 피드백
+                e.currentTarget.style.opacity = '0.6';
+                e.currentTarget.style.transform = 'rotate(2deg) scale(0.98)';
+              }}
+              onDragEnd={(e) => {
+                // 드래그 종료 시 원래 상태로 복원
+                e.currentTarget.style.opacity = '1';
+                e.currentTarget.style.transform = 'none';
+              }}
+              className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-purple-500/15 hover:scale-[1.02] hover:border-purple-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
+            >
+              <div className="flex items-start space-x-4">
+                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-purple-100 text-purple-700 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
+                  {getCategoryIcon(component.category)}
                 </div>
-              ) : (
-                <div className="py-12 text-center text-gray-500">
-                  <div className="p-8">
-                    <Package className="mx-auto mb-3 h-12 w-12 text-gray-300" />
-                    <p className="text-sm font-medium text-gray-600">
-                      {searchQuery
-                        ? `"${searchQuery}"에 대한 컴포넌트를 찾을 수 없습니다`
-                        : "이 카테고리에 컴포넌트가 없습니다"}
-                    </p>
-                    <p className="text-xs text-gray-400 mt-1">검색어나 필터를 조정해보세요</p>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-start justify-between mb-2">
+                    <h4 className="font-semibold text-gray-900 text-sm leading-tight">{component.name}</h4>
+                    <Badge variant="secondary" className="text-xs bg-purple-50 text-purple-600 border-0 ml-2 px-2 py-1 rounded-full font-medium">
+                      신규
+                    </Badge>
+                  </div>
+                  <p className="text-xs text-gray-500 line-clamp-2 leading-relaxed mb-3">{component.description}</p>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-2 text-xs text-gray-400">
+                      <span className="bg-purple-100 px-3 py-1 rounded-full font-medium text-purple-700 shadow-sm">
+                        {component.defaultSize.width}×{component.defaultSize.height}
+                      </span>
+                    </div>
+                    <span className="text-xs font-medium text-primary capitalize bg-gradient-to-r from-purple-50 to-indigo-50 px-3 py-1 rounded-full border border-primary/20/50">
+                      {component.category}
+                    </span>
                   </div>
                 </div>
-              )}
-            </TabsContent>
-          </div>
-        </Tabs>
-
-        {/* 통계 정보 */}
-        <div className="mt-6 rounded-xl bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-100/60 p-4">
-          <div className="grid grid-cols-2 gap-4 text-center">
-            <div>
-              <div className="text-lg font-bold text-emerald-600">{filteredComponents.length}</div>
-              <div className="text-xs text-gray-500">필터됨</div>
+              </div>
             </div>
-            <div>
-              <div className="text-lg font-bold text-purple-600">{allComponents.length}</div>
-              <div className="text-xs text-gray-500">전체</div>
-            </div>
-          </div>
-        </div>
-
-        {/* 개발 정보 (개발 모드에서만) */}
-        {process.env.NODE_ENV === "development" && (
-          <div className="mt-4 rounded-xl bg-gradient-to-r from-gray-50 to-slate-50 border border-gray-100/60 p-4">
-            <div className="space-y-1 text-xs text-gray-600">
-              <div className="flex items-center space-x-2">
-                <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
-                <span>레지스트리 기반 시스템</span>
-              </div>
-              <div className="flex items-center space-x-2">
-                <span className="w-2 h-2 bg-green-500 rounded-full"></span>
-                <span>Hot Reload 지원</span>
-              </div>
-              <div className="flex items-center space-x-2">
-                <span className="w-2 h-2 bg-purple-500 rounded-full"></span>
-                <span>완전한 타입 안전성</span>
-              </div>
+          ))
+        ) : (
+          <div className="flex h-32 items-center justify-center text-center text-gray-500">
+            <div className="p-8">
+              <Package className="mx-auto mb-3 h-12 w-12 text-gray-300" />
+              <p className="text-sm font-medium text-muted-foreground">컴포넌트를 찾을 수 없습니다</p>
+              <p className="text-xs text-gray-400 mt-1">검색어나 필터를 조정해보세요</p>
             </div>
           </div>
         )}
       </div>
+
+      {/* 도움말 */}
+      <div className="rounded-xl bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-100/60 p-4 mt-6">
+        <div className="flex items-start space-x-3">
+          <MousePointer className="h-4 w-4 text-purple-600 flex-shrink-0 mt-0.5" />
+          <div className="flex-1">
+            <p className="text-xs text-gray-700 leading-relaxed">
+              컴포넌트를 <span className="font-semibold text-purple-700">드래그</span>하여 화면에 추가하세요
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
-
-export default ComponentsPanel;
diff --git a/frontend/components/screen/panels/DataTableConfigPanel.tsx b/frontend/components/screen/panels/DataTableConfigPanel.tsx
index 1532633f..d86e3c53 100644
--- a/frontend/components/screen/panels/DataTableConfigPanel.tsx
+++ b/frontend/components/screen/panels/DataTableConfigPanel.tsx
@@ -1086,7 +1086,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
               <div className="space-y-2">
                 <Label htmlFor="table-select">연결 테이블</Label>
                 <select
-                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                   value={localValues.tableName}
                   onChange={(e) => handleTableChange(e.target.value)}
                 >
@@ -1382,7 +1382,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
               <div className="space-y-2">
                 <Label htmlFor="grid-columns">그리드 컬럼 수</Label>
                 <select
-                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                   value={localValues.gridColumns.toString()}
                   onChange={(e) => {
                     const gridColumns = parseInt(e.target.value, 10);
@@ -2125,7 +2125,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       <div className="space-y-2">
                         <Label>페이지당 행 수</Label>
                         <select
-                          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                           value={component.pagination.pageSize.toString()}
                           onChange={(e) =>
                             onUpdateComponent({
diff --git a/frontend/components/screen/panels/DetailSettingsPanel.tsx b/frontend/components/screen/panels/DetailSettingsPanel.tsx
index fb292d5e..cbca5ee2 100644
--- a/frontend/components/screen/panels/DetailSettingsPanel.tsx
+++ b/frontend/components/screen/panels/DetailSettingsPanel.tsx
@@ -66,11 +66,11 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         {/* 헤더 */}
         <div className="border-b border-gray-200 p-4">
           <div className="flex items-center space-x-2">
-            <Settings className="h-4 w-4 text-gray-600" />
+            <Settings className="h-4 w-4 text-muted-foreground" />
             <h3 className="font-medium text-gray-900">레이아웃 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
-            <span className="text-sm text-gray-600">타입:</span>
+            <span className="text-sm text-muted-foreground">타입:</span>
             <span className="rounded bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800">
               {layoutComponent.layoutType}
             </span>
@@ -87,7 +87,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
               type="text"
               value={layoutComponent.label || ""}
               onChange={(e) => onUpdateProperty(layoutComponent.id, "label", e.target.value)}
-              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-2 focus:ring-blue-500"
               placeholder="레이아웃 이름을 입력하세요"
             />
           </div>
@@ -334,7 +334,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 <div className="flex items-center justify-between">
                   <h5 className="text-xs font-medium text-gray-700">테이블 컬럼 매핑</h5>
                   {currentTable && (
-                    <span className="rounded bg-blue-50 px-2 py-1 text-xs text-blue-600">
+                    <span className="rounded bg-accent px-2 py-1 text-xs text-primary">
                       테이블: {currentTable.table_name}
                     </span>
                   )}
@@ -354,7 +354,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 {currentTable && (
                   <>
                     <div>
-                      <label className="mb-1 block text-xs font-medium text-gray-600">타이틀 컬럼</label>
+                      <label className="mb-1 block text-xs font-medium text-muted-foreground">타이틀 컬럼</label>
                       <select
                         value={layoutComponent.layoutConfig?.card?.columnMapping?.titleColumn || ""}
                         onChange={(e) =>
@@ -376,7 +376,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                     </div>
 
                     <div>
-                      <label className="mb-1 block text-xs font-medium text-gray-600">서브타이틀 컬럼</label>
+                      <label className="mb-1 block text-xs font-medium text-muted-foreground">서브타이틀 컬럼</label>
                       <select
                         value={layoutComponent.layoutConfig?.card?.columnMapping?.subtitleColumn || ""}
                         onChange={(e) =>
@@ -398,7 +398,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                     </div>
 
                     <div>
-                      <label className="mb-1 block text-xs font-medium text-gray-600">설명 컬럼</label>
+                      <label className="mb-1 block text-xs font-medium text-muted-foreground">설명 컬럼</label>
                       <select
                         value={layoutComponent.layoutConfig?.card?.columnMapping?.descriptionColumn || ""}
                         onChange={(e) =>
@@ -420,7 +420,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                     </div>
 
                     <div>
-                      <label className="mb-1 block text-xs font-medium text-gray-600">이미지 컬럼</label>
+                      <label className="mb-1 block text-xs font-medium text-muted-foreground">이미지 컬럼</label>
                       <select
                         value={layoutComponent.layoutConfig?.card?.columnMapping?.imageColumn || ""}
                         onChange={(e) =>
@@ -444,7 +444,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                     {/* 동적 표시 컬럼 추가 */}
                     <div>
                       <div className="mb-2 flex items-center justify-between">
-                        <label className="text-xs font-medium text-gray-600">표시 컬럼들</label>
+                        <label className="text-xs font-medium text-muted-foreground">표시 컬럼들</label>
                         <button
                           type="button"
                           onClick={() => {
@@ -457,7 +457,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                               newColumns,
                             );
                           }}
-                          className="rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600"
+                          className="rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:bg-primary/90"
                         >
                           + 컬럼 추가
                         </button>
@@ -502,7 +502,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                                     currentColumns,
                                   );
                                 }}
-                                className="rounded bg-red-500 px-2 py-1 text-xs text-white hover:bg-red-600"
+                                className="rounded bg-destructive px-2 py-1 text-xs text-destructive-foreground hover:bg-destructive/90"
                               >
                                 삭제
                               </button>
@@ -528,7 +528,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
                 <div className="grid grid-cols-2 gap-2">
                   <div>
-                    <label className="mb-1 block text-xs font-medium text-gray-600">한 행당 카드 수</label>
+                    <label className="mb-1 block text-xs font-medium text-muted-foreground">한 행당 카드 수</label>
                     <input
                       type="number"
                       min="1"
@@ -542,7 +542,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                   </div>
 
                   <div>
-                    <label className="mb-1 block text-xs font-medium text-gray-600">카드 간격 (px)</label>
+                    <label className="mb-1 block text-xs font-medium text-muted-foreground">카드 간격 (px)</label>
                     <input
                       type="number"
                       min="0"
@@ -567,7 +567,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       }
                       className="rounded border-gray-300"
                     />
-                    <label htmlFor="showTitle" className="text-xs text-gray-600">
+                    <label htmlFor="showTitle" className="text-xs text-muted-foreground">
                       타이틀 표시
                     </label>
                   </div>
@@ -586,7 +586,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       }
                       className="rounded border-gray-300"
                     />
-                    <label htmlFor="showSubtitle" className="text-xs text-gray-600">
+                    <label htmlFor="showSubtitle" className="text-xs text-muted-foreground">
                       서브타이틀 표시
                     </label>
                   </div>
@@ -605,7 +605,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       }
                       className="rounded border-gray-300"
                     />
-                    <label htmlFor="showDescription" className="text-xs text-gray-600">
+                    <label htmlFor="showDescription" className="text-xs text-muted-foreground">
                       설명 표시
                     </label>
                   </div>
@@ -620,14 +620,14 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       }
                       className="rounded border-gray-300"
                     />
-                    <label htmlFor="showImage" className="text-xs text-gray-600">
+                    <label htmlFor="showImage" className="text-xs text-muted-foreground">
                       이미지 표시
                     </label>
                   </div>
                 </div>
 
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-600">설명 최대 길이</label>
+                  <label className="mb-1 block text-xs font-medium text-muted-foreground">설명 최대 길이</label>
                   <input
                     type="number"
                     min="10"
@@ -660,7 +660,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                     </div>
                     <div className="grid grid-cols-2 gap-2">
                       <div>
-                        <label className="mb-1 block text-xs text-gray-600">너비</label>
+                        <label className="mb-1 block text-xs text-muted-foreground">너비</label>
                         <input
                           type="text"
                           value={zone.size?.width || "100%"}
@@ -672,7 +672,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         />
                       </div>
                       <div>
-                        <label className="mb-1 block text-xs text-gray-600">높이</label>
+                        <label className="mb-1 block text-xs text-muted-foreground">높이</label>
                         <input
                           type="text"
                           value={zone.size?.height || "auto"}
@@ -761,10 +761,21 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
   if (!selectedComponent) {
     return (
-      <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-        <Settings className="mb-4 h-12 w-12 text-gray-400" />
-        <h3 className="mb-2 text-lg font-medium text-gray-900">컴포넌트를 선택하세요</h3>
-        <p className="text-sm text-gray-500">위젯 컴포넌트를 선택하면 상세 설정을 편집할 수 있습니다.</p>
+      <div className="flex h-full flex-col bg-gradient-to-br from-slate-50 to-orange-50/30 border-r border-gray-200/60 shadow-sm">
+        <div className="p-6">
+          {/* 헤더 */}
+          <div className="mb-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-1">상세 설정</h2>
+            <p className="text-sm text-gray-500">컴포넌트를 선택하여 상세 설정을 편집하세요</p>
+          </div>
+        </div>
+        
+        {/* 빈 상태 */}
+        <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
+          <Settings className="mb-4 h-12 w-12 text-gray-400" />
+          <h3 className="mb-2 text-lg font-medium text-gray-900">컴포넌트를 선택하세요</h3>
+          <p className="text-sm text-gray-500">위젯 컴포넌트를 선택하면 상세 설정을 편집할 수 있습니다.</p>
+        </div>
       </div>
     );
   }
@@ -869,11 +880,11 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         {/* 헤더 */}
         <div className="border-b border-gray-200 p-4">
           <div className="flex items-center space-x-2">
-            <Settings className="h-4 w-4 text-gray-600" />
+            <Settings className="h-4 w-4 text-muted-foreground" />
             <h3 className="font-medium text-gray-900">컴포넌트 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
-            <span className="text-sm text-gray-600">타입:</span>
+            <span className="text-sm text-muted-foreground">타입:</span>
             <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentType}</span>
           </div>
         </div>
@@ -917,11 +928,11 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
         {/* 헤더 */}
         <div className="border-b border-gray-200 p-4">
           <div className="flex items-center space-x-2">
-            <Settings className="h-4 w-4 text-gray-600" />
+            <Settings className="h-4 w-4 text-muted-foreground" />
             <h3 className="font-medium text-gray-900">파일 컴포넌트 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
-            <span className="text-sm text-gray-600">타입:</span>
+            <span className="text-sm text-muted-foreground">타입:</span>
             <span className="rounded bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800">파일 업로드</span>
           </div>
           <div className="mt-1 text-xs text-gray-500">
@@ -983,30 +994,37 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     }
 
     return (
-      <div className="flex h-full flex-col">
-        {/* 헤더 */}
-        <div className="border-b border-gray-200 p-4">
-          <div className="flex items-center space-x-2">
-            <Settings className="h-4 w-4 text-gray-600" />
-            <h3 className="font-medium text-gray-900">컴포넌트 설정</h3>
+      <div className="flex h-full flex-col bg-gradient-to-br from-slate-50 to-orange-50/30 border-r border-gray-200/60 shadow-sm">
+        <div className="p-6">
+          {/* 헤더 */}
+          <div className="mb-6">
+            <h2 className="text-lg font-semibold text-gray-900 mb-1">상세 설정</h2>
+            <p className="text-sm text-gray-500">선택한 컴포넌트의 속성을 편집하세요</p>
           </div>
-          <div className="mt-2 flex items-center space-x-2">
-            <span className="text-sm text-gray-600">컴포넌트:</span>
-            <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentId}</span>
-          </div>
-          {webType && (
-            <div className="mt-1 flex items-center space-x-2">
-              <span className="text-sm text-gray-600">웹타입:</span>
-              <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">{webType}</span>
+
+          {/* 컴포넌트 정보 */}
+          <div className="space-y-2 mb-4">
+            <div className="flex items-center space-x-2">
+              <span className="text-sm text-muted-foreground">컴포넌트:</span>
+              <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentId}</span>
             </div>
-          )}
-          {selectedComponent.columnName && (
-            <div className="mt-1 text-xs text-gray-500">컬럼: {selectedComponent.columnName}</div>
-          )}
+            {webType && (
+              <div className="flex items-center space-x-2">
+                <span className="text-sm text-muted-foreground">웹타입:</span>
+                <span className="rounded bg-primary/20 px-2 py-1 text-xs font-medium text-primary">{webType}</span>
+              </div>
+            )}
+            {selectedComponent.columnName && (
+              <div className="flex items-center space-x-2">
+                <span className="text-sm text-muted-foreground">컬럼:</span>
+                <span className="text-xs text-gray-700">{selectedComponent.columnName}</span>
+              </div>
+            )}
+          </div>
         </div>
 
         {/* 컴포넌트 설정 패널 */}
-        <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex-1 overflow-y-auto px-6 pb-6">
           <DynamicComponentConfigPanel
             componentId={componentId}
             config={(() => {
@@ -1047,12 +1065,12 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       {/* 헤더 */}
       <div className="border-b border-gray-200 p-4">
         <div className="flex items-center space-x-2">
-          <Settings className="h-4 w-4 text-gray-600" />
+          <Settings className="h-4 w-4 text-muted-foreground" />
           <h3 className="font-medium text-gray-900">상세 설정</h3>
         </div>
         <div className="mt-2 flex items-center space-x-2">
-          <span className="text-sm text-gray-600">웹타입:</span>
-          <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">{widget.widgetType}</span>
+          <span className="text-sm text-muted-foreground">웹타입:</span>
+          <span className="rounded bg-primary/20 px-2 py-1 text-xs font-medium text-primary">{widget.widgetType}</span>
         </div>
         <div className="mt-1 text-xs text-gray-500">컬럼: {widget.columnName}</div>
       </div>
diff --git a/frontend/components/screen/panels/FileComponentConfigPanel.tsx b/frontend/components/screen/panels/FileComponentConfigPanel.tsx
index 9575ce05..93c446f2 100644
--- a/frontend/components/screen/panels/FileComponentConfigPanel.tsx
+++ b/frontend/components/screen/panels/FileComponentConfigPanel.tsx
@@ -1154,7 +1154,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
                 ) : (
                   <>
                     <Upload className="w-6 h-6 text-gray-400" />
-                    <p className="text-sm text-gray-600">파일 업로드</p>
+                    <p className="text-sm text-muted-foreground">파일 업로드</p>
                     <Button variant="outline" size="sm">
                       <Plus className="w-4 h-4 mr-2" />
                       파일 선택
@@ -1207,7 +1207,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
                           variant="ghost"
                           size="sm"
                           onClick={() => handleFileDelete(file.objid || file.id || '')}
-                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-red-700"
                           title="삭제"
                         >
                           <Trash2 className="w-3 h-3" />
@@ -1224,7 +1224,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
         {/* 저장 버튼 - 주석처리 (파일이 자동으로 유지됨) */}
         {/* 
         {uploadedFiles.length > 0 && (
-          <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+          <div className="mt-4 p-3 bg-accent border border-primary/20 rounded-lg">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-2">
                 <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></div>
@@ -1234,7 +1234,7 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
               </div>
               <Button 
                 onClick={handleSaveFiles}
-                className="bg-blue-600 hover:bg-blue-700 text-white"
+                variant="default"
                 size="sm"
               >
                 파일 저장
diff --git a/frontend/components/screen/panels/GridPanel.tsx b/frontend/components/screen/panels/GridPanel.tsx
index f3073918..27cd2f6f 100644
--- a/frontend/components/screen/panels/GridPanel.tsx
+++ b/frontend/components/screen/panels/GridPanel.tsx
@@ -58,7 +58,7 @@ export const GridPanel: React.FC<GridPanelProps> = ({
       <div className="border-b border-gray-200 p-4">
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <Grid3X3 className="h-4 w-4 text-gray-600" />
+            <Grid3X3 className="h-4 w-4 text-muted-foreground" />
             <h3 className="font-medium text-gray-900">격자 설정</h3>
           </div>
 
@@ -88,7 +88,7 @@ export const GridPanel: React.FC<GridPanelProps> = ({
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-2">
               {gridSettings.showGrid ? (
-                <Eye className="h-4 w-4 text-blue-600" />
+                <Eye className="h-4 w-4 text-primary" />
               ) : (
                 <EyeOff className="h-4 w-4 text-gray-400" />
               )}
@@ -248,8 +248,8 @@ export const GridPanel: React.FC<GridPanelProps> = ({
               opacity: gridSettings.gridOpacity || 0.5,
             }}
           >
-            <div className="flex h-16 items-center justify-center rounded border-2 border-dashed border-blue-300 bg-blue-100">
-              <span className="text-xs text-blue-600">컴포넌트 예시</span>
+            <div className="flex h-16 items-center justify-center rounded border-2 border-dashed border-blue-300 bg-primary/20">
+              <span className="text-xs text-primary">컴포넌트 예시</span>
             </div>
           </div>
         </div>
@@ -257,7 +257,7 @@ export const GridPanel: React.FC<GridPanelProps> = ({
 
       {/* 푸터 */}
       <div className="border-t border-gray-200 bg-gray-50 p-3">
-        <div className="text-xs text-gray-600">💡 격자 설정은 실시간으로 캔버스에 반영됩니다 </div>
+        <div className="text-xs text-muted-foreground">💡 격자 설정은 실시간으로 캔버스에 반영됩니다 </div>
 
         {/* 해상도 및 격자 정보 */}
         {screenResolution && actualGridInfo && (
@@ -268,22 +268,22 @@ export const GridPanel: React.FC<GridPanelProps> = ({
 
               <div className="space-y-2 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-600">해상도:</span>
+                  <span className="text-muted-foreground">해상도:</span>
                   <span className="font-mono">
                     {screenResolution.width} × {screenResolution.height}
                   </span>
                 </div>
 
                 <div className="flex justify-between">
-                  <span className="text-gray-600">컬럼 너비:</span>
-                  <span className={`font-mono ${isColumnsTooSmall ? "text-red-600" : "text-gray-900"}`}>
+                  <span className="text-muted-foreground">컬럼 너비:</span>
+                  <span className={`font-mono ${isColumnsTooSmall ? "text-destructive" : "text-gray-900"}`}>
                     {actualGridInfo.columnWidth.toFixed(1)}px
                     {isColumnsTooSmall && " (너무 작음)"}
                   </span>
                 </div>
 
                 <div className="flex justify-between">
-                  <span className="text-gray-600">사용 가능 너비:</span>
+                  <span className="text-muted-foreground">사용 가능 너비:</span>
                   <span className="font-mono">
                     {(screenResolution.width - gridSettings.padding * 2).toLocaleString()}px
                   </span>
diff --git a/frontend/components/screen/panels/LayoutsPanel.tsx b/frontend/components/screen/panels/LayoutsPanel.tsx
index 38b2a475..c38082b9 100644
--- a/frontend/components/screen/panels/LayoutsPanel.tsx
+++ b/frontend/components/screen/panels/LayoutsPanel.tsx
@@ -208,7 +208,7 @@ export default function LayoutsPanel({
                       <CardHeader className="pb-2">
                         <div className="flex items-center justify-between">
                           <div className="flex items-center gap-2">
-                            <CategoryIcon className="h-4 w-4 text-gray-600" />
+                            <CategoryIcon className="h-4 w-4 text-muted-foreground" />
                             <Badge variant="secondary" className="text-xs">
                               {CATEGORY_NAMES[layout.category as keyof typeof CATEGORY_NAMES]}
                             </Badge>
@@ -218,7 +218,7 @@ export default function LayoutsPanel({
                       </CardHeader>
                       <CardContent className="pt-0">
                         {layout.description && (
-                          <p className="line-clamp-2 text-xs text-gray-600">{layout.description}</p>
+                          <p className="line-clamp-2 text-xs text-muted-foreground">{layout.description}</p>
                         )}
                         <div className="mt-2 text-xs text-gray-500">존 개수: {layout.defaultZones.length}개</div>
                       </CardContent>
diff --git a/frontend/components/screen/panels/PropertiesPanel.tsx b/frontend/components/screen/panels/PropertiesPanel.tsx
index b12d843f..58e6fda4 100644
--- a/frontend/components/screen/panels/PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/PropertiesPanel.tsx
@@ -203,7 +203,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
           : "1"),
     labelText: selectedComponent?.style?.labelText || selectedComponent?.label || "",
     labelFontSize: selectedComponent?.style?.labelFontSize || "12px",
-    labelColor: selectedComponent?.style?.labelColor || "#3b83f6",
+    labelColor: selectedComponent?.style?.labelColor || "#212121",
     labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
     required: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).required : false) || false,
     readonly: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).readonly : false) || false,
@@ -261,7 +261,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
               : "1"),
           labelText: selectedComponent?.style?.labelText || selectedComponent?.label || "",
           labelFontSize: selectedComponent?.style?.labelFontSize || "12px",
-          labelColor: selectedComponent?.style?.labelColor || "#3b83f6",
+          labelColor: selectedComponent?.style?.labelColor || "#212121",
           labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
           required: widget?.required || false,
           readonly: widget?.readonly || false,
@@ -342,13 +342,13 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
           // console.log("🔵 일반 액션 감지: 라벨 색상을 기본 파란색으로 리셋");
           onUpdateProperty("style", {
             ...selectedComponent.style,
-            labelColor: '#3b83f6'
+            labelColor: '#212121'
           });
           
           // 로컬 입력 상태도 업데이트
           setLocalInputs(prev => ({
             ...prev,
-            labelColor: '#3b83f6'
+            labelColor: '#212121'
           }));
         }
       }
@@ -409,7 +409,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         <div className="border-b border-gray-200 p-4">
           <div className="mb-3 flex items-center justify-between">
             <div className="flex items-center space-x-2">
-              <Settings className="h-5 w-5 text-gray-600" />
+              <Settings className="h-5 w-5 text-muted-foreground" />
               <span className="text-lg font-semibold">데이터 테이블 설정</span>
             </div>
             <Badge variant="secondary" className="text-xs">
@@ -450,7 +450,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
       <div className="border-b border-gray-200 p-4">
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <Settings className="h-4 w-4 text-gray-600" />
+            <Settings className="h-4 w-4 text-muted-foreground" />
             <h3 className="font-medium text-gray-900">속성 편집</h3>
           </div>
           <Badge variant="secondary" className="text-xs">
@@ -491,7 +491,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         {/* 기본 정보 */}
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
-            <Type className="h-4 w-4 text-gray-600" />
+            <Type className="h-4 w-4 text-muted-foreground" />
             <h4 className="font-medium text-gray-900">기본 정보</h4>
           </div>
 
@@ -507,7 +507,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                     value={selectedComponent.columnName || ""}
                     readOnly
                     placeholder="데이터베이스 컬럼명"
-                    className="mt-1 bg-gray-50 text-gray-600"
+                    className="mt-1 bg-gray-50 text-muted-foreground"
                     title="컬럼명은 변경할 수 없습니다"
                   />
                 </div>
@@ -517,7 +517,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                     위젯 타입
                   </Label>
                   <select
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                     value={localInputs.widgetType}
                     onChange={(e) => {
                       const value = e.target.value as WebType;
@@ -594,7 +594,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         {/* 위치 및 크기 */}
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
-            <Move className="h-4 w-4 text-gray-600" />
+            <Move className="h-4 w-4 text-muted-foreground" />
             <h4 className="font-medium text-gray-900">위치 및 크기</h4>
           </div>
 
@@ -622,7 +622,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 }}
                 className={`mt-1 ${
                   dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id
-                    ? "border-blue-300 bg-blue-50 text-blue-700"
+                    ? "border-blue-300 bg-accent text-blue-700"
                     : ""
                 }`}
                 readOnly={dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id}
@@ -652,7 +652,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 }}
                 className={`mt-1 ${
                   dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id
-                    ? "border-blue-300 bg-blue-50 text-blue-700"
+                    ? "border-blue-300 bg-accent text-blue-700"
                     : ""
                 }`}
                 readOnly={dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id}
@@ -697,8 +697,8 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 </div>
               </>
             ) : (
-              <div className="col-span-2 rounded-lg bg-blue-50 p-3 text-center">
-                <p className="text-sm text-blue-600">카드 레이아웃은 자동으로 크기가 계산됩니다</p>
+              <div className="col-span-2 rounded-lg bg-accent p-3 text-center">
+                <p className="text-sm text-primary">카드 레이아웃은 자동으로 크기가 계산됩니다</p>
                 <p className="mt-1 text-xs text-blue-500">카드 개수와 간격 설정은 상세설정에서 조정하세요</p>
               </div>
             )}
@@ -756,7 +756,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         {/* 라벨 스타일 */}
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
-            <Type className="h-4 w-4 text-gray-600" />
+            <Type className="h-4 w-4 text-muted-foreground" />
             <h4 className="font-medium text-gray-900">라벨 설정</h4>
           </div>
 
@@ -840,7 +840,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 폰트 굵기
               </Label>
               <select
-                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                 value={selectedComponent.style?.labelFontWeight || "500"}
                 onChange={(e) => onUpdateProperty("style.labelFontWeight", e.target.value)}
               >
@@ -863,7 +863,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 텍스트 정렬
               </Label>
               <select
-                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                 value={selectedComponent.style?.labelTextAlign || "left"}
                 onChange={(e) => onUpdateProperty("style.labelTextAlign", e.target.value)}
               >
@@ -900,7 +900,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             {/* 그룹 설정 */}
             <div className="space-y-3">
               <div className="flex items-center space-x-2">
-                <Group className="h-4 w-4 text-gray-600" />
+                <Group className="h-4 w-4 text-muted-foreground" />
                 <h4 className="font-medium text-gray-900">그룹 설정</h4>
               </div>
 
@@ -931,7 +931,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             {/* 영역 설정 */}
             <div className="space-y-3">
               <div className="flex items-center space-x-2">
-                <Settings className="h-4 w-4 text-gray-600" />
+                <Settings className="h-4 w-4 text-muted-foreground" />
                 <h4 className="font-medium text-gray-900">영역 설정</h4>
               </div>
 
@@ -974,7 +974,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   레이아웃 타입
                 </Label>
                 <select
-                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                   value={(selectedComponent as AreaComponent).layoutType}
                   onChange={(e) => onUpdateProperty("layoutType", e.target.value as AreaLayoutType)}
                 >
@@ -1035,7 +1035,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   <div>
                     <Label className="text-xs">정렬 방식</Label>
                     <select
-                      className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                       value={(selectedComponent as AreaComponent).layoutConfig?.justifyContent || "flex-start"}
                       onChange={(e) => onUpdateProperty("layoutConfig.justifyContent", e.target.value)}
                     >
@@ -1069,7 +1069,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   <div>
                     <Label className="text-xs">사이드바 위치</Label>
                     <select
-                      className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
                       value={(selectedComponent as AreaComponent).layoutConfig?.sidebarPosition || "left"}
                       onChange={(e) => onUpdateProperty("layoutConfig.sidebarPosition", e.target.value)}
                     >
diff --git a/frontend/components/screen/panels/ResolutionPanel.tsx b/frontend/components/screen/panels/ResolutionPanel.tsx
index 93056d43..14856057 100644
--- a/frontend/components/screen/panels/ResolutionPanel.tsx
+++ b/frontend/components/screen/panels/ResolutionPanel.tsx
@@ -68,13 +68,13 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
   const getCategoryColor = (category: string) => {
     switch (category) {
       case "desktop":
-        return "text-blue-600";
+        return "text-primary";
       case "tablet":
         return "text-green-600";
       case "mobile":
         return "text-purple-600";
       default:
-        return "text-gray-600";
+        return "text-muted-foreground";
     }
   };
 
@@ -104,7 +104,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
             {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
               <SelectItem key={resolution.name} value={resolution.name}>
                 <div className="flex items-center space-x-2">
-                  <Monitor className="h-4 w-4 text-blue-600" />
+                  <Monitor className="h-4 w-4 text-primary" />
                   <span>{resolution.name}</span>
                 </div>
               </SelectItem>
@@ -136,7 +136,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
             <div className="px-2 py-1 text-xs font-medium text-gray-500">사용자 정의</div>
             <SelectItem value="custom">
               <div className="flex items-center space-x-2">
-                <Settings className="h-4 w-4 text-gray-600" />
+                <Settings className="h-4 w-4 text-muted-foreground" />
                 <span>사용자 정의</span>
               </div>
             </SelectItem>
@@ -150,7 +150,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
           <Label className="text-sm font-medium">사용자 정의 해상도</Label>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
-              <Label className="text-xs text-gray-600">너비 (px)</Label>
+              <Label className="text-xs text-muted-foreground">너비 (px)</Label>
               <Input
                 type="number"
                 value={customWidth}
@@ -160,7 +160,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
               />
             </div>
             <div className="space-y-1">
-              <Label className="text-xs text-gray-600">높이 (px)</Label>
+              <Label className="text-xs text-muted-foreground">높이 (px)</Label>
               <Input
                 type="number"
                 value={customHeight}
diff --git a/frontend/components/screen/panels/TablesPanel.tsx b/frontend/components/screen/panels/TablesPanel.tsx
index 69becdb5..e6185bf1 100644
--- a/frontend/components/screen/panels/TablesPanel.tsx
+++ b/frontend/components/screen/panels/TablesPanel.tsx
@@ -34,7 +34,7 @@ const getWidgetIcon = (widgetType: WebType) => {
     case "text":
     case "email":
     case "tel":
-      return <Type className="h-3 w-3 text-blue-600" />;
+      return <Type className="h-3 w-3 text-primary" />;
     case "number":
     case "decimal":
       return <Hash className="h-3 w-3 text-green-600" />;
@@ -49,9 +49,9 @@ const getWidgetIcon = (widgetType: WebType) => {
       return <AlignLeft className="h-3 w-3 text-indigo-600" />;
     case "boolean":
     case "checkbox":
-      return <CheckSquare className="h-3 w-3 text-blue-600" />;
+      return <CheckSquare className="h-3 w-3 text-primary" />;
     case "code":
-      return <Code className="h-3 w-3 text-gray-600" />;
+      return <Code className="h-3 w-3 text-muted-foreground" />;
     case "entity":
       return <Building className="h-3 w-3 text-cyan-600" />;
     case "file":
@@ -91,10 +91,10 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
       {/* 헤더 */}
       <div className="border-b border-gray-200 p-4">
         {selectedTableName && (
-          <div className="mb-3 rounded-md bg-blue-50 p-3">
+          <div className="mb-3 rounded-md bg-accent p-3">
             <div className="text-sm font-medium text-blue-900">선택된 테이블</div>
             <div className="mt-1 flex items-center space-x-2">
-              <Database className="h-3 w-3 text-blue-600" />
+              <Database className="h-3 w-3 text-primary" />
               <span className="font-mono text-xs text-blue-800">{selectedTableName}</span>
             </div>
           </div>
@@ -112,7 +112,7 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
           />
         </div>
 
-        <div className="mt-2 text-xs text-gray-600">총 {filteredTables.length}개 테이블</div>
+        <div className="mt-2 text-xs text-muted-foreground">총 {filteredTables.length}개 테이블</div>
       </div>
 
       {/* 테이블 목록 */}
@@ -134,7 +134,7 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                     ) : (
                       <ChevronRight className="h-4 w-4 text-gray-500" />
                     )}
-                    <Database className="h-4 w-4 text-blue-600" />
+                    <Database className="h-4 w-4 text-primary" />
                     <div className="flex-1">
                       <div className="text-sm font-medium">{table.tableLabel || table.tableName}</div>
                       <div className="text-xs text-gray-500">{table.columns.length}개 컬럼</div>
@@ -201,7 +201,7 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                       {/* 컬럼 수가 많을 때 안내 메시지 */}
                       {table.columns.length > 8 && (
                         <div className="sticky bottom-0 bg-gray-100 p-2 text-center">
-                          <div className="text-xs text-gray-600">
+                          <div className="text-xs text-muted-foreground">
                             📜 총 {table.columns.length}개 컬럼 (스크롤하여 더 보기)
                           </div>
                         </div>
@@ -217,7 +217,7 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
 
       {/* 푸터 */}
       <div className="border-t border-gray-200 bg-gray-50 p-3">
-        <div className="text-xs text-gray-600">💡 테이블이나 컬럼을 캔버스로 드래그하세요</div>
+        <div className="text-xs text-muted-foreground">💡 테이블이나 컬럼을 캔버스로 드래그하세요</div>
       </div>
     </div>
   );
diff --git a/frontend/components/screen/panels/TemplatesPanel.tsx b/frontend/components/screen/panels/TemplatesPanel.tsx
index 3c2ca768..76e78337 100644
--- a/frontend/components/screen/panels/TemplatesPanel.tsx
+++ b/frontend/components/screen/panels/TemplatesPanel.tsx
@@ -487,7 +487,7 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
   });
 
   return (
-    <div className="flex h-full flex-col bg-gradient-to-br from-slate-50 to-blue-50/30 p-6 border-r border-gray-200/60 shadow-sm">
+    <div className="flex h-full flex-col bg-slate-50 p-6 border-r border-gray-200/60 shadow-sm">
       {/* 헤더 */}
       <div className="mb-6">
         <h2 className="text-lg font-semibold text-gray-900 mb-1">템플릿</h2>
@@ -514,13 +514,7 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
               variant={selectedCategory === category.id ? "default" : "outline"}
               size="sm"
               onClick={() => setSelectedCategory(category.id)}
-              className={`
-                flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all
-                ${selectedCategory === category.id 
-                  ? 'bg-blue-600 text-white shadow-sm hover:bg-blue-700' 
-                  : 'bg-white/60 text-gray-600 border-gray-200/60 hover:bg-white hover:text-gray-900 hover:border-gray-300'
-                }
-              `}
+              className="flex items-center space-x-1.5 h-8 px-3 text-xs font-medium rounded-full transition-all"
             >
               {category.icon}
               <span>{category.name}</span>
@@ -553,7 +547,7 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
           <div className="flex h-32 items-center justify-center text-center text-gray-500">
             <div className="p-8">
               <FileText className="mx-auto mb-3 h-12 w-12 text-gray-300" />
-              <p className="text-sm font-medium text-gray-600">템플릿을 찾을 수 없습니다</p>
+              <p className="text-sm font-medium text-muted-foreground">템플릿을 찾을 수 없습니다</p>
               <p className="text-xs text-gray-400 mt-1">검색어나 필터를 조정해보세요</p>
             </div>
           </div>
@@ -576,24 +570,24 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
               className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-blue-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
             >
               <div className="flex items-start space-x-4">
-                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
+                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-700 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
                   {template.icon}
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-start justify-between mb-2">
                     <h4 className="font-semibold text-gray-900 text-sm leading-tight">{template.name}</h4>
-                    <Badge variant="secondary" className="text-xs bg-blue-100 text-blue-700 border-0 ml-2 px-2 py-1 rounded-full font-medium">
+                    <Badge variant="secondary" className="text-xs bg-blue-50 text-blue-600 border-0 ml-2 px-2 py-1 rounded-full font-medium">
                       {template.components.length}
                     </Badge>
                   </div>
                   <p className="text-xs text-gray-500 line-clamp-2 leading-relaxed mb-3">{template.description}</p>
                   <div className="flex items-center justify-between">
                     <div className="flex items-center space-x-2 text-xs text-gray-400">
-                      <span className="bg-gradient-to-r from-gray-100 to-gray-200 px-3 py-1 rounded-full font-medium text-gray-600">
+                      <span className="bg-gradient-to-r from-blue-100 to-indigo-100 px-3 py-1 rounded-full font-medium text-blue-700 shadow-sm">
                         {template.defaultSize.width}×{template.defaultSize.height}
                       </span>
                     </div>
-                    <span className="text-xs font-medium text-blue-600 capitalize bg-gradient-to-r from-blue-50 to-indigo-50 px-3 py-1 rounded-full border border-blue-200/50">
+                    <span className="text-xs font-medium text-primary capitalize bg-gradient-to-r from-blue-50 to-indigo-50 px-3 py-1 rounded-full border border-primary/20/50">
                       {template.category}
                     </span>
                   </div>
@@ -607,12 +601,12 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
       {/* 도움말 */}
       <div className="rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100/60 p-4 mt-6">
         <div className="flex items-start space-x-3">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/20 text-primary">
             <Info className="h-4 w-4" />
           </div>
           <div className="text-xs text-blue-800">
             <p className="font-semibold mb-1">사용 방법</p>
-            <p className="text-blue-600 leading-relaxed">템플릿을 캔버스로 드래그하여 빠르게 화면을 구성하세요.</p>
+            <p className="text-primary leading-relaxed">템플릿을 캔버스로 드래그하여 빠르게 화면을 구성하세요.</p>
           </div>
         </div>
       </div>
diff --git a/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
index 72910b32..abc400bb 100644
--- a/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
@@ -218,7 +218,7 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
 
       {/* 안내 메시지 */}
       {localValues.indeterminate && (
-        <div className="rounded-md bg-blue-50 p-3">
+        <div className="rounded-md bg-accent p-3">
           <div className="text-sm font-medium text-blue-900">불확정 상태</div>
           <div className="mt-1 text-xs text-blue-800">
             체크박스가 부분적으로 선택된 상태를 나타낼 수 있습니다. 주로 트리 구조에서 일부 하위 항목만 선택된 경우에
diff --git a/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
index 5e23b3ef..cbab910a 100644
--- a/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
@@ -268,7 +268,7 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
       </div>
 
       {/* 안내 메시지 */}
-      <div className="rounded-md bg-blue-50 p-3">
+      <div className="rounded-md bg-accent p-3">
         <div className="text-sm font-medium text-blue-900">코드 에디터 설정</div>
         <div className="mt-1 text-xs text-blue-800">
           • 문법 강조 표시는 선택된 언어에 따라 적용됩니다
diff --git a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
index 2c8ddc76..656f482d 100644
--- a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
@@ -317,7 +317,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
         <div className="mt-2">
           <div className="flex items-center space-x-2 rounded border bg-white p-2">
             <Search className="h-4 w-4 text-gray-400" />
-            <div className="flex-1 text-sm text-gray-600">
+            <div className="flex-1 text-sm text-muted-foreground">
               {localValues.placeholder || `${localValues.referenceTable || "엔터티"}를 선택하세요`}
             </div>
             <Database className="h-4 w-4 text-gray-400" />
@@ -334,7 +334,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
       </div>
 
       {/* 안내 메시지 */}
-      <div className="rounded-md bg-blue-50 p-3">
+      <div className="rounded-md bg-accent p-3">
         <div className="text-sm font-medium text-blue-900">엔터티 타입 설정 가이드</div>
         <div className="mt-1 text-xs text-blue-800">
           • <strong>참조 테이블</strong>: 데이터를 가져올 다른 테이블 이름
diff --git a/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
index e3184be5..6ab97dad 100644
--- a/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
@@ -263,11 +263,11 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
         <div className="mt-2">
           <div
             className={`rounded border-2 border-dashed p-4 text-center ${
-              localValues.dragDrop ? "border-blue-300 bg-blue-50" : "border-gray-300"
+              localValues.dragDrop ? "border-blue-300 bg-accent" : "border-gray-300"
             }`}
           >
             <Upload className="mx-auto h-8 w-8 text-gray-400" />
-            <div className="mt-2 text-sm text-gray-600">
+            <div className="mt-2 text-sm text-muted-foreground">
               {localValues.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
             </div>
             <div className="mt-1 text-xs text-gray-500">
@@ -283,7 +283,7 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
       </div>
 
       {/* 안내 메시지 */}
-      <div className="rounded-md bg-blue-50 p-3">
+      <div className="rounded-md bg-accent p-3">
         <div className="text-sm font-medium text-blue-900">파일 업로드 설정</div>
         <div className="mt-1 text-xs text-blue-800">
           • Accept 속성은 파일 선택 다이얼로그에서 필터링됩니다
diff --git a/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
index f150c591..7a2fee5a 100644
--- a/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
@@ -150,7 +150,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
           레이아웃 방향
         </Label>
         <select
-          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
           value={localValues.layout}
           onChange={(e) => updateConfig("layout", e.target.value)}
         >
@@ -167,7 +167,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
           기본 선택값
         </Label>
         <select
-          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
           value={localValues.defaultValue || "__none__"}
           onChange={(e) => updateConfig("defaultValue", e.target.value)}
         >
@@ -277,7 +277,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
 
       {/* 안내 메시지 */}
       {localValues.allowNone && (
-        <div className="rounded-md bg-blue-50 p-3">
+        <div className="rounded-md bg-accent p-3">
           <div className="text-sm font-medium text-blue-900">선택 해제 허용</div>
           <div className="mt-1 text-xs text-blue-800">
             사용자가 같은 라디오 버튼을 다시 클릭하여 선택을 해제할 수 있습니다.
diff --git a/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
index 9ea53f08..e4f7dc8d 100644
--- a/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
@@ -220,7 +220,7 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({ config
         </div>
 
         {localValues.autoInput && (
-          <div className="space-y-3 border-l-2 border-blue-200 pl-4">
+          <div className="space-y-3 border-l-2 border-primary/20 pl-4">
             <div>
               <Label htmlFor="autoValueType" className="text-sm font-medium">
                 자동값 타입
@@ -256,7 +256,7 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({ config
               </div>
             )}
 
-            <div className="rounded-md bg-blue-50 p-3">
+            <div className="rounded-md bg-accent p-3">
               <div className="text-sm font-medium text-blue-900">자동입력 안내</div>
               <div className="mt-1 text-xs text-blue-800">
                 자동입력이 활성화되면 해당 필드는 읽기 전용이 되며, 설정된 타입에 따라 자동으로 값이 입력됩니다.
@@ -280,7 +280,7 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({ config
 
       {/* 형식별 안내 메시지 */}
       {localValues.format !== "none" && (
-        <div className="rounded-md bg-blue-50 p-3">
+        <div className="rounded-md bg-accent p-3">
           <div className="text-sm font-medium text-blue-900">형식 안내</div>
           <div className="mt-1 text-xs text-blue-800">
             {localValues.format === "email" && "유효한 이메일 주소를 입력해야 합니다 (예: user@example.com)"}
diff --git a/frontend/components/screen/widgets/FileUpload.tsx b/frontend/components/screen/widgets/FileUpload.tsx
index c82552e8..94de4ae2 100644
--- a/frontend/components/screen/widgets/FileUpload.tsx
+++ b/frontend/components/screen/widgets/FileUpload.tsx
@@ -705,7 +705,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       <div
         className={`group relative rounded-2xl border-2 border-dashed p-10 text-center transition-all duration-300 ${
           isDragOver 
-            ? "border-blue-500 bg-gradient-to-br from-blue-100/90 to-indigo-100/80 shadow-xl shadow-blue-500/20 scale-105" 
+            ? "border-primary bg-gradient-to-br from-blue-100/90 to-indigo-100/80 shadow-xl shadow-blue-500/20 scale-105" 
             : "border-gray-300/60 bg-gradient-to-br from-gray-50/80 to-blue-50/40 hover:border-blue-400/80 hover:bg-gradient-to-br hover:from-blue-50/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
         }`}
         onDragOver={handleDragOver}
@@ -722,14 +722,14 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
             <div className={`h-20 w-20 rounded-full transition-all duration-300 ${
               isDragOver 
                 ? "bg-blue-200/80 scale-110" 
-                : "bg-blue-100/50 opacity-0 group-hover:opacity-100 group-hover:scale-110"
+                : "bg-primary/20/50 opacity-0 group-hover:opacity-100 group-hover:scale-110"
             }`}></div>
           </div>
         </div>
         <p className={`mb-2 text-xl font-semibold transition-colors duration-300 ${
           isDragOver 
-            ? "text-blue-600" 
-            : "text-gray-700 group-hover:text-blue-600"
+            ? "text-primary" 
+            : "text-gray-700 group-hover:text-primary"
         }`}>
           {fileConfig.dragDropText || "파일을 드래그하여 업로드하세요"}
         </p>
@@ -746,8 +746,8 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
           onClick={handleFileInputClick} 
           className={`mb-4 rounded-xl border-2 transition-all duration-200 ${
             isDragOver 
-              ? "border-blue-400 bg-blue-50 text-blue-600 shadow-md" 
-              : "border-gray-300/60 hover:border-blue-400/60 hover:bg-blue-50/50 hover:shadow-sm"
+              ? "border-blue-400 bg-accent text-primary shadow-md" 
+              : "border-gray-300/60 hover:border-blue-400/60 hover:bg-accent/50 hover:shadow-sm"
           }`}
         >
           <Upload className="mr-2 h-4 w-4" />
@@ -774,34 +774,34 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       {/* 업로드된 파일 목록 */}
       {uploadedFiles.length > 0 && (
         <div className="space-y-4">
-          <div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-blue-200/40">
+          <div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-primary/20/40">
             <div className="flex items-center space-x-3">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
-                <File className="h-4 w-4 text-blue-600" />
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20">
+                <File className="h-4 w-4 text-primary" />
               </div>
               <div>
                 <h4 className="text-lg font-semibold text-gray-800">
                   업로드된 파일 ({uploadedFiles.length}/{fileConfig.maxFiles})
                 </h4>
-                <p className="text-sm text-gray-600">
+                <p className="text-sm text-muted-foreground">
                   총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
                 </p>
               </div>
             </div>
-            <Button variant="outline" size="sm" className="rounded-lg border-blue-200/60 bg-white/80 hover:bg-blue-50/80">
+            <Button variant="outline" size="sm" className="rounded-lg border-primary/20/60 bg-white/80 hover:bg-accent/80">
               자세히보기
             </Button>
           </div>
 
           <div className="space-y-3">
             {uploadedFiles.map((fileInfo) => (
-              <div key={fileInfo.objid} className="group relative flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-blue-50/30">
+              <div key={fileInfo.objid} className="group relative flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-accent/30">
                 <div className="flex flex-1 items-center space-x-4">
                   <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
                     {getFileIcon(fileInfo.fileExt)}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-base font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-200">
+                    <p className="truncate text-base font-semibold text-gray-800 group-hover:text-primary transition-colors duration-200">
                       {fileInfo.realFileName}
                     </p>
                     <div className="flex items-center space-x-3 text-sm text-gray-500 mt-1">
@@ -835,7 +835,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
 
                     {/* 에러 메시지 */}
                     {fileInfo.hasError && (
-                      <div className="mt-2 flex items-center space-x-2 rounded-md bg-red-50 p-2 text-sm text-red-700">
+                      <div className="mt-2 flex items-center space-x-2 rounded-md bg-destructive/10 p-2 text-sm text-red-700">
                         <AlertCircle className="h-4 w-4 flex-shrink-0" />
                         <span>{fileInfo.errorMessage}</span>
                       </div>
@@ -846,9 +846,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                 <div className="flex items-center space-x-2">
                   {/* 상태 표시 */}
                   {fileInfo.isUploading && (
-                    <div className="flex items-center space-x-2 rounded-lg bg-blue-50 px-3 py-2">
+                    <div className="flex items-center space-x-2 rounded-lg bg-accent px-3 py-2">
                       <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
-                      <span className="text-xs font-medium text-blue-600">업로드 중...</span>
+                      <span className="text-xs font-medium text-primary">업로드 중...</span>
                     </div>
                   )}
                   {fileInfo.status === "ACTIVE" && (
@@ -858,9 +858,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                     </div>
                   )}
                   {fileInfo.hasError && (
-                    <div className="flex items-center space-x-2 rounded-lg bg-red-50 px-3 py-2">
+                    <div className="flex items-center space-x-2 rounded-lg bg-destructive/10 px-3 py-2">
                       <AlertCircle className="h-4 w-4 text-red-500" />
-                      <span className="text-xs font-medium text-red-600">오류</span>
+                      <span className="text-xs font-medium text-destructive">오류</span>
                     </div>
                   )}
 
@@ -872,7 +872,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                           variant="ghost" 
                           size="sm" 
                           onClick={() => previewFile(fileInfo)} 
-                          className="h-9 w-9 rounded-lg hover:bg-blue-50 hover:text-blue-600 transition-all duration-200"
+                          className="h-9 w-9 rounded-lg hover:bg-accent hover:text-primary transition-all duration-200"
                         >
                           <Eye className="h-4 w-4" />
                         </Button>
@@ -891,7 +891,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                         variant="ghost"
                         size="sm"
                         onClick={() => deleteFile(fileInfo)}
-                        className="h-9 w-9 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-700 transition-all duration-200"
+                        className="h-9 w-9 rounded-lg text-red-500 hover:bg-destructive/10 hover:text-red-700 transition-all duration-200"
                       >
                         <X className="h-4 w-4" />
                       </Button>
diff --git a/frontend/components/screen/widgets/types/FileWidget.tsx b/frontend/components/screen/widgets/types/FileWidget.tsx
index 981b9e2b..50fd61dc 100644
--- a/frontend/components/screen/widgets/types/FileWidget.tsx
+++ b/frontend/components/screen/widgets/types/FileWidget.tsx
@@ -143,10 +143,10 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
         <div className="relative">
           <Upload className="mx-auto mb-3 h-12 w-12 text-blue-400 transition-all duration-300 group-hover:scale-110 group-hover:text-blue-500" />
           <div className="absolute inset-0 flex items-center justify-center">
-            <div className="h-16 w-16 rounded-full bg-blue-100/50 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-110"></div>
+            <div className="h-16 w-16 rounded-full bg-primary/20/50 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-110"></div>
           </div>
         </div>
-        <p className="mb-2 text-lg font-semibold text-gray-700 transition-colors duration-300 group-hover:text-blue-600">
+        <p className="mb-2 text-lg font-semibold text-gray-700 transition-colors duration-300 group-hover:text-primary">
           {readonly ? "파일 업로드 불가" : "파일을 선택하거나 드래그하여 업로드"}
         </p>
         <p className="text-sm text-gray-500 transition-colors duration-300 group-hover:text-blue-500">
@@ -168,16 +168,16 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
       {/* 업로드된 파일 목록 */}
       {files.length > 0 && (
         <div className="space-y-3">
-          <div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-blue-200/40">
+          <div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-primary/20/40">
             <div className="flex items-center space-x-3">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
-                <File className="h-4 w-4 text-blue-600" />
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20">
+                <File className="h-4 w-4 text-primary" />
               </div>
               <div>
                 <h4 className="text-lg font-semibold text-gray-800">
                   업로드된 파일 ({files.length}/{config?.maxFiles || "∞"})
                 </h4>
-                <p className="text-sm text-gray-600">
+                <p className="text-sm text-muted-foreground">
                   총 {formatFileSize(files.reduce((sum, file) => sum + file.size, 0))}
                 </p>
               </div>
@@ -186,13 +186,13 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
 
           <div className="max-h-40 space-y-2 overflow-y-auto">
             {files.map((file, index) => (
-              <div key={index} className="group flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-3 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-blue-50/30">
+              <div key={index} className="group flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-3 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-accent/30">
                 <div className="flex flex-1 items-center space-x-3">
                   <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
                     <File className="h-5 w-5 text-gray-500" />
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-200">
+                    <p className="truncate text-sm font-semibold text-gray-800 group-hover:text-primary transition-colors duration-200">
                       {file.name}
                     </p>
                     {file.size > 0 && (
@@ -212,7 +212,7 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
                       e.stopPropagation();
                       removeFile(index);
                     }}
-                    className="h-8 w-8 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-700 transition-all duration-200"
+                    className="h-8 w-8 rounded-lg text-red-500 hover:bg-destructive/10 hover:text-red-700 transition-all duration-200"
                   >
                     <X className="h-4 w-4" />
                   </Button>
@@ -239,7 +239,7 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
               {files.length}개 파일
             </Badge>
             {config?.maxFiles && (
-              <Badge variant="outline" className="bg-white/80 border-gray-200/60 text-gray-600">
+              <Badge variant="outline" className="bg-white/80 border-gray-200/60 text-muted-foreground">
                 최대 {config.maxFiles}개
               </Badge>
             )}
diff --git a/frontend/components/screen/widgets/types/RatingWidget.tsx b/frontend/components/screen/widgets/types/RatingWidget.tsx
index 9e94419a..6a10e32f 100644
--- a/frontend/components/screen/widgets/types/RatingWidget.tsx
+++ b/frontend/components/screen/widgets/types/RatingWidget.tsx
@@ -88,7 +88,7 @@ export const RatingWidget: React.FC<RatingWidgetProps> = ({
 
       {/* 현재 점수 표시 */}
       {!readonly && (
-        <span className="ml-2 text-sm text-gray-600">
+        <span className="ml-2 text-sm text-muted-foreground">
           {currentRating > 0 ? `${currentRating}/${finalMaxRating}` : placeholder}
         </span>
       )}
diff --git a/frontend/components/theme/ThemeSettings.tsx b/frontend/components/theme/ThemeSettings.tsx
index 99a6bd3b..060bd578 100644
--- a/frontend/components/theme/ThemeSettings.tsx
+++ b/frontend/components/theme/ThemeSettings.tsx
@@ -19,7 +19,7 @@ export const ThemeSettings: React.FC = () => {
     <div className="fixed top-4 right-4 z-50">
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 min-w-[300px]">
         <div className="flex items-center gap-2 mb-4">
-          <Settings className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+          <Settings className="w-5 h-5 text-muted-foreground dark:text-gray-400" />
           <h3 className="font-semibold text-gray-900 dark:text-white">테마 설정</h3>
         </div>
 
@@ -86,7 +86,7 @@ export const ThemeSettings: React.FC = () => {
                     className="w-6 h-6 rounded-full mx-auto"
                     style={{ backgroundColor: scheme.color }}
                   />
-                  <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                  <div className="text-xs text-muted-foreground dark:text-gray-400 mt-1">
                     {scheme.name}
                   </div>
                 </button>
diff --git a/frontend/components/ui/accordion.tsx b/frontend/components/ui/accordion.tsx
index 5a095ada..0925d023 100644
--- a/frontend/components/ui/accordion.tsx
+++ b/frontend/components/ui/accordion.tsx
@@ -158,7 +158,7 @@ function AccordionContent({ className, children, ...props }: AccordionContentPro
   if (!isOpen) return null;
 
   return (
-    <div className={cn("px-4 pb-4 text-sm text-gray-600", className)} {...props}>
+    <div className={cn("px-4 pb-4 text-sm text-muted-foreground", className)} {...props}>
       {children}
     </div>
   );
diff --git a/frontend/constants/auth.ts b/frontend/constants/auth.ts
index c1880a69..de14e5df 100644
--- a/frontend/constants/auth.ts
+++ b/frontend/constants/auth.ts
@@ -3,7 +3,7 @@
  */
 
 export const AUTH_CONFIG = {
-  API_BASE_URL: process.env.NEXT_PUBLIC_API_URL || "http://39.117.244.52:8080/api",
+  API_BASE_URL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080/api",
   ENDPOINTS: {
     LOGIN: "/auth/login",
     STATUS: "/auth/status",
@@ -16,8 +16,8 @@ export const AUTH_CONFIG = {
 } as const;
 
 export const UI_CONFIG = {
-  COMPANY_NAME: "WACE 솔루션",
-  COPYRIGHT: "© 2024 WACE 솔루션. All rights reserved.",
+  COMPANY_NAME: "VEXPLOR",
+  COPYRIGHT: "© 2024 VEXPLOR. All rights reserved.",
   POWERED_BY: "Powered by WACE PLM System",
 } as const;
 
diff --git a/frontend/constants/layout.ts b/frontend/constants/layout.ts
index b447e9f4..5d595a2d 100644
--- a/frontend/constants/layout.ts
+++ b/frontend/constants/layout.ts
@@ -4,7 +4,7 @@
 
 export const LAYOUT_CONFIG = {
   COMPANY_NAME: "WACE 솔루션",
-  API_BASE_URL: process.env.NEXT_PUBLIC_API_URL || "http://39.117.244.52:8080/api",
+  API_BASE_URL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080/api",
 
   ENDPOINTS: {
     USER_MENUS: "/admin/user-menus",
diff --git a/frontend/lib/api/company.ts b/frontend/lib/api/company.ts
index 4945dfee..6babf0d7 100644
--- a/frontend/lib/api/company.ts
+++ b/frontend/lib/api/company.ts
@@ -5,7 +5,7 @@
 import { Company, CompanyFormData } from "@/types/company";
 import { apiClient } from "./client";
 
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://39.117.244.52:8080/api";
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080/api";
 
 // API 응답 타입 정의
 interface ApiResponse<T = any> {
diff --git a/frontend/lib/api/mail.ts b/frontend/lib/api/mail.ts
index 998f8282..5d6862b6 100644
--- a/frontend/lib/api/mail.ts
+++ b/frontend/lib/api/mail.ts
@@ -86,33 +86,34 @@ export interface MailSendResult {
 // API 기본 설정
 // ============================================
 
-const API_BASE_URL = '/api/mail';
+import { apiClient } from './client';
 
 async function fetchApi<T>(
   endpoint: string,
-  options: RequestInit = {}
+  options: { method?: string; data?: unknown } = {}
 ): Promise<T> {
-  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-    ...options,
-    headers: {
-      'Content-Type': 'application/json',
-      ...options.headers,
-    },
-  });
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ message: 'Unknown error' }));
-    throw new Error(error.message || `HTTP ${response.status}`);
-  }
-
-  const result = await response.json();
+  const { method = 'GET', data } = options;
   
-  // 백엔드가 { success: true, data: ... } 형식으로 반환하는 경우 처리
-  if (result.success && result.data !== undefined) {
-    return result.data as T;
+  try {
+    const response = await apiClient({
+      url: `/mail${endpoint}`,
+      method,
+      data,
+    });
+
+    // 백엔드가 { success: true, data: ... } 형식으로 반환하는 경우 처리
+    if (response.data.success && response.data.data !== undefined) {
+      return response.data.data as T;
+    }
+    
+    return response.data as T;
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'response' in error) {
+      const axiosError = error as { response?: { data?: { message?: string }; status?: number } };
+      throw new Error(axiosError.response?.data?.message || `HTTP ${axiosError.response?.status}`);
+    }
+    throw new Error('Unknown error');
   }
-  
-  return result as T;
 }
 
 // ============================================
@@ -141,7 +142,7 @@ export async function createMailAccount(
 ): Promise<MailAccount> {
   return fetchApi<MailAccount>('/accounts', {
     method: 'POST',
-    body: JSON.stringify(data),
+    data,
   });
 }
 
@@ -154,7 +155,7 @@ export async function updateMailAccount(
 ): Promise<MailAccount> {
   return fetchApi<MailAccount>(`/accounts/${id}`, {
     method: 'PUT',
-    body: JSON.stringify(data),
+    data,
   });
 }
 
@@ -167,6 +168,15 @@ export async function deleteMailAccount(id: string): Promise<{ success: boolean
   });
 }
 
+/**
+ * SMTP 연결 테스트
+ */
+export async function testMailAccountConnection(id: string): Promise<{ success: boolean; message: string }> {
+  return fetchApi<{ success: boolean; message: string }>(`/accounts/${id}/test-connection`, {
+    method: 'POST',
+  });
+}
+
 /**
  * SMTP 연결 테스트
  */
@@ -208,7 +218,7 @@ export async function createMailTemplate(
 ): Promise<MailTemplate> {
   return fetchApi<MailTemplate>('/templates-file', {
     method: 'POST',
-    body: JSON.stringify(data),
+    data,
   });
 }
 
@@ -221,7 +231,7 @@ export async function updateMailTemplate(
 ): Promise<MailTemplate> {
   return fetchApi<MailTemplate>(`/templates-file/${id}`, {
     method: 'PUT',
-    body: JSON.stringify(data),
+    data,
   });
 }
 
@@ -243,7 +253,7 @@ export async function previewMailTemplate(
 ): Promise<{ html: string }> {
   return fetchApi<{ html: string }>(`/templates-file/${id}/preview`, {
     method: 'POST',
-    body: JSON.stringify({ sampleData }),
+    data: { sampleData },
   });
 }
 
@@ -257,7 +267,7 @@ export async function previewMailTemplate(
 export async function sendMail(data: SendMailDto): Promise<MailSendResult> {
   return fetchApi<MailSendResult>('/send/simple', {
     method: 'POST',
-    body: JSON.stringify(data),
+    data,
   });
 }
 
diff --git a/frontend/lib/registry/AutoRegisteringComponentRenderer.ts b/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
index cfe2a6c1..f79a3396 100644
--- a/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
+++ b/frontend/lib/registry/AutoRegisteringComponentRenderer.ts
@@ -217,7 +217,7 @@ export class AutoRegisteringComponentRenderer {
       top: "-25px",
       left: "0px",
       fontSize: component.style?.labelFontSize || "14px",
-      color: component.style?.labelColor || "#3b83f6",
+      color: component.style?.labelColor || "#212121",
       marginBottom: component.style?.labelMarginBottom || "4px",
       fontWeight: "500",
     };
diff --git a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
index 0658ace1..df5f83b3 100644
--- a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
+++ b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
@@ -95,7 +95,7 @@ const CustomAccordion: React.FC<CustomAccordionProps> = ({
               borderLeft: "1px solid #e5e7eb",
               borderRight: "1px solid #e5e7eb",
               borderBottom: openItems.has(item.id) ? "none" : index === items.length - 1 ? "1px solid #e5e7eb" : "none",
-              backgroundColor: openItems.has(item.id) ? "#fef3c7" : "#f9fafb",
+              backgroundColor: openItems.has(item.id) ? "#fef8f0" : "#f9fafb",
               cursor: "pointer",
               display: "flex",
               justifyContent: "space-between",
@@ -107,12 +107,12 @@ const CustomAccordion: React.FC<CustomAccordionProps> = ({
               boxShadow: openItems.has(item.id) ? "0 2px 4px rgba(0, 0, 0, 0.1)" : "none",
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fde68a" : "#f3f4f6";
+              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fef5e7" : "#f3f4f6";
               e.currentTarget.style.transform = "translateY(-1px)";
               e.currentTarget.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.15)";
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fef3c7" : "#f9fafb";
+              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fef8f0" : "#f9fafb";
               e.currentTarget.style.transform = "translateY(0)";
               e.currentTarget.style.boxShadow = openItems.has(item.id) ? "0 2px 4px rgba(0, 0, 0, 0.1)" : "none";
             }}
@@ -670,7 +670,7 @@ export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = (
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index b9eab149..f5b39ee2 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -127,7 +127,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     if (isDeleteAction()) {
       return component.style?.labelColor || '#ef4444'; // 빨간색 기본값 (Tailwind red-500)
     }
-    return component.style?.labelColor || '#3b83f6'; // 기본 파란색 (Tailwind blue-500)
+    return component.style?.labelColor || '#212121'; // 검은색 기본값 (shadcn/ui primary)
   };
 
   const buttonColor = getLabelColor();
@@ -265,6 +265,30 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       }
 
       console.log("✅ 버튼 액션 실행 성공:", actionConfig.type);
+
+      // 저장/수정 성공 시 자동 처리
+      if (actionConfig.type === "save" || actionConfig.type === "edit") {
+        if (typeof window !== 'undefined') {
+          // 1. 테이블 새로고침 이벤트 먼저 발송 (모달이 닫히기 전에)
+          console.log("🔄 저장/수정 후 테이블 새로고침 이벤트 발송");
+          window.dispatchEvent(new CustomEvent('refreshTable'));
+          
+          // 2. 모달 닫기 (약간의 딜레이)
+          setTimeout(() => {
+            // EditModal 내부인지 확인 (isInModal prop 사용)
+            const isInEditModal = (props as any).isInModal;
+            
+            if (isInEditModal) {
+              console.log("🚪 EditModal 닫기 이벤트 발송");
+              window.dispatchEvent(new CustomEvent('closeEditModal'));
+            }
+            
+            // ScreenModal은 항상 닫기
+            console.log("🚪 ScreenModal 닫기 이벤트 발송");
+            window.dispatchEvent(new CustomEvent('closeSaveModal'));
+          }, 100);
+        }
+      }
     } catch (error) {
       console.log("❌ executeAction catch 블록 진입:", error);
 
@@ -296,6 +320,12 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   // 이벤트 핸들러
   const handleClick = async (e: React.MouseEvent) => {
     e.stopPropagation();
+    console.log("🖱️ 버튼 클릭 이벤트 발생", {
+      isDesignMode,
+      isInteractive,
+      hasAction: !!processedConfig.action,
+      processedConfig,
+    });
 
     // 디자인 모드에서는 기본 onClick만 실행
     if (isDesignMode) {
@@ -303,8 +333,20 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       return;
     }
 
+    console.log("🔍 조건 체크:", {
+      isInteractive,
+      hasProcessedConfig: !!processedConfig,
+      hasAction: !!processedConfig.action,
+      actionType: processedConfig.action?.type,
+    });
+
     // 인터랙티브 모드에서 액션 실행
     if (isInteractive && processedConfig.action) {
+      console.log("✅ 액션 실행 조건 통과", {
+        actionType: processedConfig.action.type,
+        requiresConfirmation: confirmationRequiredActions.includes(processedConfig.action.type),
+      });
+
       const context: ButtonActionContext = {
         formData: formData || {},
         originalData: originalData || {}, // 부분 업데이트용 원본 데이터 추가
@@ -320,6 +362,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
 
       // 확인이 필요한 액션인지 확인
       if (confirmationRequiredActions.includes(processedConfig.action.type)) {
+        console.log("📋 확인 다이얼로그 표시 중...");
         // 확인 다이얼로그 표시
         setPendingAction({
           type: processedConfig.action.type,
@@ -328,10 +371,16 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         });
         setShowConfirmDialog(true);
       } else {
+        console.log("🚀 액션 바로 실행 중...");
         // 확인이 필요하지 않은 액션은 바로 실행
         await executeAction(processedConfig.action, context);
       }
     } else {
+      console.log("⚠️ 액션 실행 조건 불만족:", {
+        isInteractive,
+        hasAction: !!processedConfig.action,
+        "이유": !isInteractive ? "인터랙티브 모드 아님" : "액션 없음",
+      });
       // 액션이 설정되지 않은 경우 기본 onClick 실행
       onClick?.();
     }
@@ -460,9 +509,9 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         </button>
       </div>
 
-      {/* 확인 다이얼로그 */}
+      {/* 확인 다이얼로그 - EditModal보다 위에 표시하도록 z-index 최상위로 설정 */}
       <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
-        <AlertDialogContent>
+        <AlertDialogContent className="z-[99999]">
           <AlertDialogHeader>
             <AlertDialogTitle>{getConfirmTitle()}</AlertDialogTitle>
             <AlertDialogDescription>{getConfirmMessage()}</AlertDialogDescription>
diff --git a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
index 34d20cbc..e2480e0d 100644
--- a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
+++ b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
@@ -84,7 +84,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -155,7 +155,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
         />
         <span
           style={{
-            color: "#3b83f6",
+            color: "#212121",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}
diff --git a/frontend/lib/registry/components/date-input/DateInputComponent.tsx b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
index 9660b074..764678b7 100644
--- a/frontend/lib/registry/components/date-input/DateInputComponent.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
@@ -298,7 +298,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx b/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
index 136cb708..45d5089f 100644
--- a/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
+++ b/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
@@ -81,7 +81,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
index bce8fb11..bda6fd8b 100644
--- a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
+++ b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
@@ -81,7 +81,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
index cb4924ca..b05dfc1e 100644
--- a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
+++ b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
@@ -91,7 +91,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
index 799f8770..944fc133 100644
--- a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
+++ b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
@@ -84,7 +84,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -168,7 +168,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
             />
             <span
               style={{
-                color: "#3b83f6",
+                color: "#212121",
                 // isInteractive 모드에서는 사용자 스타일 우선 적용
                 ...(isInteractive && component.style ? component.style : {}),
               }}
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
index 3b72e292..a4ba5405 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -316,7 +316,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx b/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
index 0dd4f35b..c23cf50b 100644
--- a/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
+++ b/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
@@ -84,7 +84,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -149,7 +149,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
             width: "30%",
             textAlign: "center",
             fontSize: "14px",
-            color: "#3b83f6",
+            color: "#212121",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 55bcaa40..b538e6bc 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -164,7 +164,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   } as TableListConfig;
 
   // 🎨 동적 색상 설정 (속성편집 모달의 "색상" 필드와 연동)
-  const buttonColor = component.style?.labelColor || "#3b83f6"; // 기본 파란색
+  const buttonColor = component.style?.labelColor || "#212121"; // 기본 파란색
   const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
   const buttonStyle = {
     backgroundColor: buttonColor,
@@ -977,6 +977,27 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
   }, [refreshKey]);
 
+  // 🆕 전역 테이블 새로고침 이벤트 리스너
+  useEffect(() => {
+    const handleRefreshTable = () => {
+      console.log("🔄 TableListComponent: 전역 새로고침 이벤트 수신");
+      if (tableConfig.selectedTable && !isDesignMode) {
+        // 선택된 행 상태 초기화
+        setSelectedRows(new Set());
+        setIsAllSelected(false);
+        onSelectedRowsChange?.([], []);
+        // 테이블 데이터 새로고침
+        fetchTableDataDebounced();
+      }
+    };
+
+    window.addEventListener("refreshTable", handleRefreshTable);
+    
+    return () => {
+      window.removeEventListener("refreshTable", handleRefreshTable);
+    };
+  }, [tableConfig.selectedTable, isDesignMode, fetchTableDataDebounced, onSelectedRowsChange]);
+
   // 상세설정에서 페이지네이션 설정 변경 시 로컬 상태 동기화
   useEffect(() => {
     // 페이지 크기 동기화
@@ -1234,7 +1255,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     dragImage.style.position = "absolute";
     dragImage.style.top = "-1000px";
     dragImage.style.left = "-1000px";
-    dragImage.style.background = "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)";
+    dragImage.style.background = "linear-gradient(135deg, #212121 0%, #000000 100%)";
     dragImage.style.color = "white";
     dragImage.style.padding = "12px 16px";
     dragImage.style.borderRadius = "8px";
diff --git a/frontend/lib/registry/components/table-list/index.ts b/frontend/lib/registry/components/table-list/index.ts
index b846e9f6..cc54085b 100644
--- a/frontend/lib/registry/components/table-list/index.ts
+++ b/frontend/lib/registry/components/table-list/index.ts
@@ -95,7 +95,7 @@ export const TableListDefinition = createComponentDefinition({
     // 데이터 로딩
     autoLoad: true,
   },
-  defaultSize: { width: 120, height: 200 }, // 그리드 1컬럼 크기로 축소
+  defaultSize: { width: 120, height: 600 }, // 테이블 리스트 기본 높이
   configPanel: TableListConfigPanel,
   icon: "Table",
   tags: ["테이블", "데이터", "목록", "그리드"],
diff --git a/frontend/lib/registry/components/test-input/TestInputComponent.tsx b/frontend/lib/registry/components/test-input/TestInputComponent.tsx
index 53dfb3ec..7042c813 100644
--- a/frontend/lib/registry/components/test-input/TestInputComponent.tsx
+++ b/frontend/lib/registry/components/test-input/TestInputComponent.tsx
@@ -81,7 +81,7 @@ export const TestInputComponent: React.FC<TestInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
index 5fe44fa3..721ddde2 100644
--- a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
@@ -72,7 +72,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   const textStyle: React.CSSProperties = {
     fontSize: componentConfig.fontSize || "14px",
     fontWeight: componentConfig.fontWeight || "normal",
-    color: componentConfig.color || "#3b83f6",
+    color: componentConfig.color || "#212121",
     textAlign: componentConfig.textAlign || "left",
     backgroundColor: componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "8px 12px",
@@ -104,7 +104,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx b/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx
index 728228c7..a326e03e 100644
--- a/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayConfigPanel.tsx
@@ -85,7 +85,7 @@ export const TextDisplayConfigPanel: React.FC<TextDisplayConfigPanelProps> = ({
         <Input
           id="color"
           type="color"
-          value={config.color || "#3b83f6"}
+          value={config.color || "#212121"}
           onChange={(e) => handleChange("color", e.target.value)}
         />
       </div>
diff --git a/frontend/lib/registry/components/text-display/index.ts b/frontend/lib/registry/components/text-display/index.ts
index 9280aa0b..a80537bf 100644
--- a/frontend/lib/registry/components/text-display/index.ts
+++ b/frontend/lib/registry/components/text-display/index.ts
@@ -24,7 +24,7 @@ export const TextDisplayDefinition = createComponentDefinition({
     text: "텍스트를 입력하세요",
     fontSize: "14px",
     fontWeight: "normal",
-    color: "#3b83f6",
+    color: "#212121",
     textAlign: "left",
   },
   defaultSize: { width: 150, height: 24 },
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index 37130d9d..fda31aa8 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -191,7 +191,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx b/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
index 732cfaef..e842ff34 100644
--- a/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
+++ b/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
@@ -84,7 +84,7 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx b/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
index b3f8e68e..a3a3786e 100644
--- a/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
+++ b/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
@@ -84,7 +84,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#64748b",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -187,7 +187,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
         </div>
         <span
           style={{
-            color: "#3b83f6",
+            color: "#212121",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}
diff --git a/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx b/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx
index 91645753..8200020b 100644
--- a/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx
+++ b/frontend/lib/registry/layouts/AutoRegisteringLayoutRenderer.tsx
@@ -308,7 +308,7 @@ export class AutoRegisteringLayoutRenderer {
           style: {
             labelDisplay: true,
             labelFontSize: "14px",
-            labelColor: "#3b83f6",
+            labelColor: "#212121",
             labelFontWeight: "500",
             labelMarginBottom: "4px",
           },
diff --git a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
index e108b7c7..0af2edf2 100644
--- a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
+++ b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
@@ -148,7 +148,7 @@ const AccordionSection: React.FC<{
   const headerStyle: React.CSSProperties = {
     padding: "12px 16px",
     backgroundColor: isDesignMode ? "#3b82f6" : "#f8fafc",
-    color: isDesignMode ? "white" : "#3b83f6",
+    color: isDesignMode ? "white" : "#212121",
     border: "1px solid #e2e8f0",
     borderBottom: isExpanded ? "none" : "1px solid #e2e8f0",
     cursor: "pointer",
diff --git a/frontend/scripts/create-component.js b/frontend/scripts/create-component.js
index 83d5c852..5233b743 100755
--- a/frontend/scripts/create-component.js
+++ b/frontend/scripts/create-component.js
@@ -661,7 +661,7 @@ function getComponentJSXByWebType(webType) {
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#212121",
             fontWeight: "500",
           }}
         >
@@ -709,7 +709,7 @@ function getComponentJSXByWebType(webType) {
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#212121",
             fontWeight: "500",
           }}
         >
@@ -785,7 +785,7 @@ function getComponentJSXByWebType(webType) {
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#3b83f6",
+            color: component.style?.labelColor || "#212121",
             fontWeight: "500",
           }}
         >
diff --git a/frontend/scripts/unify-colors.sh b/frontend/scripts/unify-colors.sh
new file mode 100755
index 00000000..12da3434
--- /dev/null
+++ b/frontend/scripts/unify-colors.sh
@@ -0,0 +1,119 @@
+#!/bin/bash
+
+# shadcn/ui 색상 통일 스크립트
+# 직접 색상 사용을 CSS 변수/variant로 변경
+
+echo "🎨 색상 통일 작업 시작..."
+
+# components 디렉토리로 이동
+cd "$(dirname "$0")/.." || exit
+
+# 카운터
+count=0
+
+# 1. 버튼 색상: bg-blue-600 hover:bg-blue-700 → variant="default" 사용으로 변경 (이미 Button 태그인 경우만)
+echo "📝 1단계: 버튼 색상 변경 중..."
+
+# 2. 배경색: bg-blue-50 → bg-accent 또는 bg-primary/10
+echo "📝 2단계: 배경색 변경 중..."
+find components -name "*.tsx" -type f -print0 | while IFS= read -r -d '' file; do
+  # bg-blue-50 → bg-accent (가벼운 파란 배경)
+  if grep -q "bg-blue-50" "$file"; then
+    sed -i '' 's/bg-blue-50/bg-accent/g' "$file"
+    echo "  ✅ $file: bg-blue-50 → bg-accent"
+    ((count++))
+  fi
+  
+  # bg-gray-50 → bg-muted (회색 배경)
+  if grep -q "\"bg-gray-50\"" "$file" || grep -q "'bg-gray-50'" "$file"; then
+    sed -i '' 's/bg-gray-50/bg-muted/g' "$file"
+    echo "  ✅ $file: bg-gray-50 → bg-muted"
+    ((count++))
+  fi
+  
+  # bg-blue-100 → bg-primary/20
+  if grep -q "bg-blue-100" "$file"; then
+    sed -i '' 's/bg-blue-100/bg-primary\/20/g' "$file"
+    echo "  ✅ $file: bg-blue-100 → bg-primary/20"
+    ((count++))
+  fi
+  
+  # bg-red-50 → bg-destructive/10
+  if grep -q "bg-red-50" "$file"; then
+    sed -i '' 's/bg-red-50/bg-destructive\/10/g' "$file"
+    echo "  ✅ $file: bg-red-50 → bg-destructive/10"
+    ((count++))
+  fi
+  
+  # bg-red-100 → bg-destructive/20
+  if grep -q "bg-red-100" "$file"; then
+    sed -i '' 's/bg-red-100/bg-destructive\/20/g' "$file"
+    echo "  ✅ $file: bg-red-100 → bg-destructive/20"
+    ((count++))
+  fi
+done
+
+# 3. 테두리 색상
+echo "📝 3단계: 테두리 색상 변경 중..."
+find components -name "*.tsx" -type f -print0 | while IFS= read -r -d '' file; do
+  # border-blue-500 → border-primary
+  if grep -q "border-blue-500" "$file"; then
+    sed -i '' 's/border-blue-500/border-primary/g' "$file"
+    echo "  ✅ $file: border-blue-500 → border-primary"
+    ((count++))
+  fi
+  
+  # border-blue-200 → border-primary/20
+  if grep -q "border-blue-200" "$file"; then
+    sed -i '' 's/border-blue-200/border-primary\/20/g' "$file"
+    echo "  ✅ $file: border-blue-200 → border-primary/20"
+    ((count++))
+  fi
+  
+  # border-red-200 → border-destructive/20
+  if grep -q "border-red-200" "$file"; then
+    sed -i '' 's/border-red-200/border-destructive\/20/g' "$file"
+    echo "  ✅ $file: border-red-200 → border-destructive/20"
+    ((count++))
+  fi
+  
+  # border-red-500 → border-destructive
+  if grep -q "border-red-500" "$file"; then
+    sed -i '' 's/border-red-500/border-destructive/g' "$file"
+    echo "  ✅ $file: border-red-500 → border-destructive"
+    ((count++))
+  fi
+done
+
+# 4. 텍스트 색상
+echo "📝 4단계: 텍스트 색상 변경 중..."
+find components -name "*.tsx" -type f -print0 | while IFS= read -r -d '' file; do
+  # text-blue-600 → text-primary
+  if grep -q "text-blue-600" "$file"; then
+    sed -i '' 's/text-blue-600/text-primary/g' "$file"
+    echo "  ✅ $file: text-blue-600 → text-primary"
+    ((count++))
+  fi
+  
+  # text-red-600 → text-destructive
+  if grep -q "text-red-600" "$file"; then
+    sed -i '' 's/text-red-600/text-destructive/g' "$file"
+    echo "  ✅ $file: text-red-600 → text-destructive"
+    ((count++))
+  fi
+  
+  # text-gray-600 → text-muted-foreground
+  if grep -q "text-gray-600" "$file"; then
+    sed -i '' 's/text-gray-600/text-muted-foreground/g' "$file"
+    echo "  ✅ $file: text-gray-600 → text-muted-foreground"
+    ((count++))
+  fi
+done
+
+echo ""
+echo "✨ 색상 통일 완료!"
+echo "📊 총 $count개 항목 변경됨"
+echo ""
+echo "⚠️  주의: green, orange, purple 색상은 특수 용도로 유지했습니다."
+echo "   (성공, 경고, 정보 표시 등)"
+
diff --git a/frontend/types/component.ts b/frontend/types/component.ts
index ea29cc5f..5da67a6e 100644
--- a/frontend/types/component.ts
+++ b/frontend/types/component.ts
@@ -320,7 +320,7 @@ export const COMPONENT_CATEGORIES_INFO = {
   [ComponentCategory.CHART]: {
     name: "차트",
     description: "데이터 시각화 컴포넌트",
-    color: "#3b83f6",
+    color: "#212121",
   },
   [ComponentCategory.FORM]: {
     name: "폼",
@@ -350,7 +350,7 @@ export const COMPONENT_CATEGORIES_INFO = {
   [ComponentCategory.CONTAINER]: {
     name: "컨테이너",
     description: "다른 컴포넌트를 담는 컨테이너",
-    color: "#3b83f6",
+    color: "#212121",
   },
   [ComponentCategory.SYSTEM]: {
     name: "시스템",