diff --git a/src/app/_common/components/sidebarConfig.ts b/src/app/_common/components/sidebarConfig.ts
index 64e85bfd..fe176c64 100644
--- a/src/app/_common/components/sidebarConfig.ts
+++ b/src/app/_common/components/sidebarConfig.ts
@@ -5,6 +5,7 @@ import {
     FiCpu,
     FiSettings,
     FiEye,
+    FiFile,
 } from 'react-icons/fi';
 import { SidebarItem } from '@/app/main/components/types';
 
@@ -40,6 +41,12 @@ export const getSidebarItems = (): SidebarItem[] => [
         description: '백엔드 환경변수 및 설정 확인',
         icon: React.createElement(FiEye),
     },
+    {
+        id: 'documents',
+        title: '문서',
+        description: '문서 저장소',
+        icon: React.createElement(FiFile),
+    },
 ];
 
 // 공통 아이템 클릭 핸들러 (localStorage 사용)
diff --git a/src/app/api/ragAPI.js b/src/app/api/ragAPI.js
new file mode 100644
index 00000000..bc3f81e0
--- /dev/null
+++ b/src/app/api/ragAPI.js
@@ -0,0 +1,873 @@
+// RAG API 호출 함수들을 관리하는 파일
+import { devLog } from '@/app/utils/logger';
+import { API_BASE_URL } from '@/app/config.js';
+
+// =============================================================================
+// Health Check
+// =============================================================================
+
+/**
+ * RAG 시스템의 연결 상태를 확인하는 함수
+ * @returns {Promise<Object>} 헬스 체크 결과
+ */
+export const checkRagHealth = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/health`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('RAG health check completed:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to check RAG health:', error);
+        throw error;
+    }
+};
+
+// =============================================================================
+// Collection Management
+// =============================================================================
+
+/**
+ * 모든 컬렉션 목록을 조회하는 함수
+ * @returns {Promise<Object>} 컬렉션 목록
+ */
+export const listCollections = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/collections`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Collections fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch collections:', error);
+        throw error;
+    }
+};
+
+/**
+ * 새 컬렉션을 생성하는 함수
+ * @param {string} collectionName - 컬렉션 이름
+ * @param {number} vectorSize - 벡터 차원 수
+ * @param {string} distance - 거리 메트릭 ("Cosine", "Euclidean", "Dot")
+ * @param {string} description - 컬렉션 설명 (선택사항)
+ * @param {Object} metadata - 커스텀 메타데이터 (선택사항)
+ * @returns {Promise<Object>} 생성된 컬렉션 정보
+ */
+export const createCollection = async (collectionName, vectorSize, distance = "Cosine", description = null, metadata = null) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/collections`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                collection_name: collectionName,
+                vector_size: vectorSize,
+                distance: distance,
+                description: description,
+                metadata: metadata
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Collection created:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to create collection:', error);
+        throw error;
+    }
+};
+
+/**
+ * 컬렉션을 삭제하는 함수
+ * @param {string} collectionName - 삭제할 컬렉션 이름
+ * @returns {Promise<Object>} 삭제 결과
+ */
+export const deleteCollection = async (collectionName) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/collections`, {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                collection_name: collectionName
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Collection deleted:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to delete collection:', error);
+        throw error;
+    }
+};
+
+/**
+ * 특정 컬렉션의 정보를 조회하는 함수
+ * @param {string} collectionName - 조회할 컬렉션 이름
+ * @returns {Promise<Object>} 컬렉션 정보
+ */
+export const getCollectionInfo = async (collectionName) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/collections/${collectionName}`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Collection info fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch collection info:', error);
+        throw error;
+    }
+};
+
+// =============================================================================
+// Document Management
+// =============================================================================
+
+/**
+ * 문서를 업로드하고 처리하는 함수
+ * @param {File} file - 업로드할 파일
+ * @param {string} collectionName - 대상 컬렉션 이름
+ * @param {number} chunkSize - 청크 크기 (기본값: 1000)
+ * @param {number} chunkOverlap - 청크 겹침 크기 (기본값: 200)
+ * @param {boolean} processChunks - 청크 처리 여부 (기본값: true)
+ * @param {Object} metadata - 문서 메타데이터 (선택사항)
+ * @returns {Promise<Object>} 업로드 결과
+ */
+export const uploadDocument = async (file, collectionName, chunkSize = 1000, chunkOverlap = 200, processChunks = true, metadata = null) => {
+    try {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('collection_name', collectionName);
+        formData.append('chunk_size', chunkSize.toString());
+        formData.append('chunk_overlap', chunkOverlap.toString());
+        formData.append('process_chunks', processChunks.toString());
+        
+        if (metadata) {
+            formData.append('metadata', JSON.stringify(metadata));
+        }
+
+        const response = await fetch(`${API_BASE_URL}/rag/documents/upload`, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Document uploaded:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to upload document:', error);
+        throw error;
+    }
+};
+
+/**
+ * 문서를 검색하는 함수
+ * @param {string} collectionName - 검색할 컬렉션 이름
+ * @param {string} queryText - 검색 쿼리 텍스트
+ * @param {number} limit - 반환할 결과 수 (기본값: 5)
+ * @param {number} scoreThreshold - 점수 임계값 (기본값: 0.7)
+ * @param {Object} filter - 검색 필터 (선택사항)
+ * @returns {Promise<Object>} 검색 결과
+ */
+export const searchDocuments = async (collectionName, queryText, limit = 5, scoreThreshold = 0.7, filter = null) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/documents/search`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                collection_name: collectionName,
+                query_text: queryText,
+                limit: limit,
+                score_threshold: scoreThreshold,
+                filter: filter
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Document search completed:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to search documents:', error);
+        throw error;
+    }
+};
+
+/**
+ * 컬렉션 내 모든 문서 목록을 조회하는 함수
+ * @param {string} collectionName - 컬렉션 이름
+ * @returns {Promise<Object>} 문서 목록
+ */
+export const listDocumentsInCollection = async (collectionName) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/collections/${collectionName}/documents`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Documents in collection fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch documents in collection:', error);
+        throw error;
+    }
+};
+
+/**
+ * 특정 문서의 상세 정보를 조회하는 함수
+ * @param {string} collectionName - 컬렉션 이름
+ * @param {string} documentId - 문서 ID
+ * @returns {Promise<Object>} 문서 상세 정보
+ */
+export const getDocumentDetails = async (collectionName, documentId) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/collections/${collectionName}/documents/${documentId}`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Document details fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch document details:', error);
+        throw error;
+    }
+};
+
+/**
+ * 컬렉션에서 특정 문서를 삭제하는 함수
+ * @param {string} collectionName - 컬렉션 이름
+ * @param {string} documentId - 삭제할 문서 ID
+ * @returns {Promise<Object>} 삭제 결과
+ */
+export const deleteDocumentFromCollection = async (collectionName, documentId) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/collections/${collectionName}/documents/${documentId}`, {
+            method: 'DELETE',
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Document deleted from collection:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to delete document from collection:', error);
+        throw error;
+    }
+};
+
+// =============================================================================
+// Vector Operations (Legacy Support)
+// =============================================================================
+
+/**
+ * 벡터 포인트를 삽입하는 함수
+ * @param {string} collectionName - 대상 컬렉션 이름
+ * @param {Array} points - 삽입할 포인트 배열
+ * @returns {Promise<Object>} 삽입 결과
+ */
+export const insertPoints = async (collectionName, points) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/points`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                collection_name: collectionName,
+                points: points
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Points inserted:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to insert points:', error);
+        throw error;
+    }
+};
+
+/**
+ * 벡터 유사도 검색을 수행하는 함수
+ * @param {string} collectionName - 검색할 컬렉션 이름
+ * @param {Array<number>} queryVector - 검색 벡터
+ * @param {number} limit - 반환할 결과 수 (기본값: 10)
+ * @param {number} scoreThreshold - 점수 임계값 (선택사항)
+ * @param {Object} filter - 검색 필터 (선택사항)
+ * @returns {Promise<Object>} 검색 결과
+ */
+export const searchPoints = async (collectionName, queryVector, limit = 10, scoreThreshold = null, filter = null) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/search`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                collection_name: collectionName,
+                query: {
+                    vector: queryVector,
+                    limit: limit,
+                    score_threshold: scoreThreshold,
+                    filter: filter
+                }
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Points search completed:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to search points:', error);
+        throw error;
+    }
+};
+
+/**
+ * 벡터 포인트를 삭제하는 함수
+ * @param {string} collectionName - 대상 컬렉션 이름
+ * @param {Array} pointIds - 삭제할 포인트 ID 배열
+ * @returns {Promise<Object>} 삭제 결과
+ */
+export const deletePoints = async (collectionName, pointIds) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/points`, {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                collection_name: collectionName,
+                point_ids: pointIds
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Points deleted:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to delete points:', error);
+        throw error;
+    }
+};
+
+// =============================================================================
+// Configuration
+// =============================================================================
+
+/**
+ * RAG 시스템 설정을 조회하는 함수
+ * @returns {Promise<Object>} RAG 설정 정보
+ */
+export const getRagConfig = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/config`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('RAG config fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch RAG config:', error);
+        throw error;
+    }
+};
+
+// =============================================================================
+// Embedding Provider Management
+// =============================================================================
+
+/**
+ * 사용 가능한 임베딩 제공자 목록을 조회하는 함수
+ * @returns {Promise<Object>} 임베딩 제공자 목록
+ */
+export const getEmbeddingProviders = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/embedding/providers`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding providers fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch embedding providers:', error);
+        throw error;
+    }
+};
+
+/**
+ * 모든 임베딩 제공자를 테스트하는 함수
+ * @returns {Promise<Object>} 테스트 결과
+ */
+export const testEmbeddingProviders = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/embedding/test`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding providers tested:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to test embedding providers:', error);
+        throw error;
+    }
+};
+
+/**
+ * 현재 임베딩 클라이언트 상태를 조회하는 함수
+ * @returns {Promise<Object>} 임베딩 클라이언트 상태
+ */
+export const getEmbeddingStatus = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/embedding/status`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding status fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch embedding status:', error);
+        throw error;
+    }
+};
+
+/**
+ * 임베딩 생성을 테스트하는 함수
+ * @param {string} queryText - 테스트할 쿼리 텍스트 (기본값: "Hello, world!")
+ * @returns {Promise<Object>} 임베딩 테스트 결과
+ */
+export const testEmbeddingQuery = async (queryText = "Hello, world!") => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/embedding/test-query`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                query_text: queryText
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding query test completed:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to test embedding query:', error);
+        throw error;
+    }
+};
+
+/**
+ * 임베딩 클라이언트를 강제로 재로드하는 함수
+ * @returns {Promise<Object>} 재로드 결과
+ */
+export const reloadEmbeddingClient = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/embedding/reload`, {
+            method: 'POST',
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding client reloaded:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to reload embedding client:', error);
+        throw error;
+    }
+};
+
+/**
+ * 임베딩 제공자를 변경하는 함수
+ * @param {string} newProvider - 새로운 제공자 이름 ("openai", "huggingface", "custom_http")
+ * @returns {Promise<Object>} 제공자 변경 결과
+ */
+export const switchEmbeddingProvider = async (newProvider) => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/embedding/switch-provider`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                new_provider: newProvider
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding provider switched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to switch embedding provider:', error);
+        throw error;
+    }
+};
+
+/**
+ * 자동으로 최적의 임베딩 제공자로 전환하는 함수
+ * @returns {Promise<Object>} 자동 전환 결과
+ */
+export const autoSwitchEmbeddingProvider = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/embedding/auto-switch`, {
+            method: 'POST',
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding provider auto-switched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to auto-switch embedding provider:', error);
+        throw error;
+    }
+};
+
+/**
+ * 임베딩 설정 상태를 조회하는 함수
+ * @returns {Promise<Object>} 임베딩 설정 상태
+ */
+export const getEmbeddingConfigStatus = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/embedding/config-status`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding config status fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch embedding config status:', error);
+        throw error;
+    }
+};
+
+// =============================================================================
+// Debug Functions
+// =============================================================================
+
+/**
+ * 디버깅을 위한 임베딩 상세 정보를 조회하는 함수
+ * @returns {Promise<Object>} 임베딩 디버그 정보
+ */
+export const getEmbeddingDebugInfo = async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/rag/debug/embedding-info`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        devLog.info('Embedding debug info fetched:', data);
+        return data;
+    } catch (error) {
+        devLog.error('Failed to fetch embedding debug info:', error);
+        throw error;
+    }
+};
+
+// =============================================================================
+// Utility Functions
+// =============================================================================
+
+/**
+ * 파일 타입이 지원되는지 확인하는 함수
+ * @param {File} file - 확인할 파일
+ * @returns {boolean} 지원 여부
+ */
+export const isSupportedFileType = (file) => {
+    const supportedTypes = [
+        'application/pdf',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/msword',
+        'text/plain'
+    ];
+    return supportedTypes.includes(file.type);
+};
+
+/**
+ * 파일 크기가 허용 범위인지 확인하는 함수
+ * @param {File} file - 확인할 파일
+ * @param {number} maxSizeMB - 최대 크기 (MB, 기본값: 50)
+ * @returns {boolean} 허용 여부
+ */
+export const isValidFileSize = (file, maxSizeMB = 50) => {
+    const maxSizeBytes = maxSizeMB * 1024 * 1024;
+    return file.size <= maxSizeBytes;
+};
+
+/**
+ * 컬렉션 이름의 유효성을 검사하는 함수
+ * @param {string} name - 컬렉션 이름
+ * @returns {boolean} 유효성 여부
+ */
+export const isValidCollectionName = (name) => {
+    // 영문자, 숫자, 언더스코어, 하이픈만 허용, 3-63자
+    const regex = /^[a-zA-Z0-9_-]{3,63}$/;
+    return regex.test(name);
+};
+
+/**
+ * RAG 시스템의 전체 상태를 확인하는 함수
+ * @returns {Promise<Object>} 전체 시스템 상태
+ */
+export const getRagSystemStatus = async () => {
+    try {
+        const [healthData, configData, collectionsData] = await Promise.all([
+            checkRagHealth(),
+            getRagConfig(),
+            listCollections()
+        ]);
+
+        return {
+            health: healthData,
+            config: configData,
+            collections: collectionsData,
+            timestamp: new Date().toISOString()
+        };
+    } catch (error) {
+        devLog.error('Failed to get RAG system status:', error);
+        throw error;
+    }
+};
+
+/**
+ * 임베딩 제공자 이름을 한국어로 변환하는 함수
+ * @param {string} provider - 제공자 이름
+ * @returns {string} 한국어 제공자 이름
+ */
+export const getProviderDisplayName = (provider) => {
+    const providerNames = {
+        'openai': 'OpenAI',
+        'huggingface': 'HuggingFace',
+        'custom_http': '커스텀 HTTP',
+        'local': '로컬'
+    };
+    return providerNames[provider?.toLowerCase()] || provider;
+};
+
+/**
+ * 파일 확장자에서 MIME 타입을 추출하는 함수
+ * @param {string} filename - 파일명
+ * @returns {string} MIME 타입
+ */
+export const getMimeTypeFromFilename = (filename) => {
+    const extension = filename.split('.').pop().toLowerCase();
+    const mimeTypes = {
+        'pdf': 'application/pdf',
+        'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'doc': 'application/msword',
+        'txt': 'text/plain'
+    };
+    return mimeTypes[extension] || 'application/octet-stream';
+};
+
+/**
+ * 바이트 크기를 사람이 읽기 쉬운 형태로 변환하는 함수
+ * @param {number} bytes - 바이트 크기
+ * @param {number} decimals - 소수점 자릿수
+ * @returns {string} 포맷된 크기 문자열
+ */
+export const formatFileSize = (bytes, decimals = 2) => {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};
+
+/**
+ * 날짜를 상대적 시간으로 표시하는 함수
+ * @param {string} dateString - ISO 날짜 문자열
+ * @returns {string} 상대적 시간 문자열
+ */
+export const getRelativeTime = (dateString) => {
+    if (!dateString) return '알 수 없음';
+    
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInSeconds = Math.floor((now - date) / 1000);
+
+    if (diffInSeconds < 60) {
+        return '방금 전';
+    } else if (diffInSeconds < 3600) {
+        const minutes = Math.floor(diffInSeconds / 60);
+        return `${minutes}분 전`;
+    } else if (diffInSeconds < 86400) {
+        const hours = Math.floor(diffInSeconds / 3600);
+        return `${hours}시간 전`;
+    } else {
+        const days = Math.floor(diffInSeconds / 86400);
+        return `${days}일 전`;
+    }
+};
+
+/**
+ * 임베딩 모델명에 따른 벡터 차원을 자동으로 반환하는 함수
+ * @param {string} provider - 임베딩 제공자 ('openai', 'huggingface', 'custom_http')
+ * @param {string} model - 모델명
+ * @returns {number} 벡터 차원
+ */
+export const getEmbeddingDimension = (provider, model) => {
+    if (!provider || !model) return 1536; // 기본값
+
+    switch (provider.toLowerCase()) {
+        case 'openai':
+            switch (model) {
+                case 'text-embedding-3-large':
+                    return 3072;
+                case 'text-embedding-3-small':
+                case 'text-embedding-ada-002':
+                default:
+                    return 1536;
+            }
+        
+        case 'huggingface':
+            // 일반적인 HuggingFace 모델 차원
+            const commonModels = {
+                'sentence-transformers/all-MiniLM-L6-v2': 384,
+                'sentence-transformers/all-MiniLM-L12-v2': 384,
+                'sentence-transformers/all-mpnet-base-v2': 768,
+                'sentence-transformers/all-distilroberta-v1': 768,
+                'sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2': 384,
+                'BAAI/bge-large-en-v1.5': 1024,
+                'BAAI/bge-base-en-v1.5': 768,
+                'BAAI/bge-small-en-v1.5': 384,
+            };
+            return commonModels[model] || 768; // 일반적인 기본값
+
+        case 'custom_http':
+        case 'vllm':
+            // VLLM은 모델에 따라 다르므로 일반적인 기본값 반환
+            return 1536;
+
+        default:
+            return 1536;
+    }
+};
+
+/**
+ * 현재 설정된 임베딩 제공자와 모델에 따른 벡터 차원을 조회하는 함수
+ * @returns {Promise<Object>} 벡터 차원 정보
+ */
+export const getCurrentEmbeddingDimension = async () => {
+    try {
+        const status = await getEmbeddingStatus();
+        const config = await getRagConfig();
+        
+        if (status && status.provider_info) {
+            const provider = status.provider_info.provider || 'openai';
+            const model = status.provider_info.model || 'text-embedding-3-small';
+            const dimension = getEmbeddingDimension(provider, model);
+            
+            return {
+                provider,
+                model,
+                dimension,
+                auto_detected: true
+            };
+        }
+        
+        return {
+            provider: 'openai',
+            model: 'text-embedding-3-small', 
+            dimension: 1536,
+            auto_detected: false
+        };
+    } catch (error) {
+        devLog.error('Failed to get current embedding dimension:', error);
+        return {
+            provider: 'openai',
+            model: 'text-embedding-3-small',
+            dimension: 1536,
+            auto_detected: false,
+            error: error.message
+        };
+    }
+};
+
diff --git a/src/app/main/assets/Documents.module.scss b/src/app/main/assets/Documents.module.scss
new file mode 100644
index 00000000..219d1ca8
--- /dev/null
+++ b/src/app/main/assets/Documents.module.scss
@@ -0,0 +1,635 @@
+@use "sass:color";
+
+// Color Variables from Settings.module.scss
+$primary-blue: #2563eb;
+$primary-green: #059669;
+$primary-red: #dc2626;
+$gray-50: #f9fafb;
+$gray-100: #f3f4f6;
+$gray-200: #e5e7eb;
+$gray-300: #d1d5db;
+$gray-400: #9ca3af;
+$gray-500: #6b7280;
+$gray-600: #4b5563;
+$gray-700: #374151;
+$gray-800: #1f2937;
+$gray-900: #111827;
+$white: #ffffff;
+
+.container {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    font-family: 'Pretendard', sans-serif;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    gap: 1rem;
+    flex-wrap: wrap;
+
+    h2 {
+        font-size: 1.875rem;
+        font-weight: 700;
+        color: $gray-900;
+    }
+
+    .headerLeft {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        
+        h2 {
+            margin: 0;
+        }
+    }
+
+    .headerRight {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+}
+
+.button {
+    padding: 0.625rem 1.25rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    border: 1px solid transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    &.primary {
+        background-color: $primary-blue;
+        color: $white;
+        &:hover:not(:disabled) {
+            background-color: color.adjust($primary-blue, $lightness: -7%);
+        }
+    }
+
+    &.secondary {
+        background-color: $white;
+        color: $gray-700;
+        border-color: $gray-300;
+        &:hover:not(:disabled) {
+            background-color: $gray-50;
+        }
+    }
+
+    &.danger {
+        background-color: $primary-red;
+        color: $white;
+        &:hover:not(:disabled) {
+            background-color: color.adjust($primary-red, $lightness: -7%);
+        }
+    }
+}
+
+.error {
+    background-color: color.adjust($primary-red, $alpha: -0.9);
+    color: $primary-red;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
+    font-weight: 500;
+}
+
+.loading {
+    text-align: center;
+    padding: 3rem;
+    color: $gray-500;
+    font-size: 1.125rem;
+}
+
+// Collection List
+.collectionListContainer {
+    h3 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: $gray-800;
+        margin-bottom: 1rem;
+    }
+}
+
+.collectionGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.collectionCard {
+    background: $white;
+    border: 1px solid $gray-200;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    transition: all 0.2s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+        border-color: $primary-blue;
+    }
+
+    .collectionContent {
+        cursor: pointer;
+        flex-grow: 1;
+    }
+
+    h4 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: $primary-blue;
+        margin: 0 0 0.5rem 0;
+    }
+
+    p {
+        color: $gray-600;
+        margin: 0 0 1rem 0;
+        font-size: 0.9rem;
+        flex-grow: 1;
+    }
+
+    .collectionMeta {
+        color: $gray-500;
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+}
+
+.deleteButton {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: $gray-100;
+    border: 1px solid $gray-200;
+    border-radius: 0.375rem;
+    padding: 0.375rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+
+    &:hover {
+        background: $primary-red;
+        border-color: $primary-red;
+        opacity: 1;
+        transform: scale(1.05);
+    }
+}
+
+// Document View
+.documentViewContainer {
+    .viewHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        flex-wrap: wrap;
+        margin-bottom: 1.5rem;
+    
+        h3 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: $gray-800;
+            margin: 0;
+        }
+
+        .actions {
+            display: flex;
+            gap: 1rem;
+        }
+    }
+}
+
+.uploadProgressContainer {
+    background: $gray-50;
+    border: 1px solid $gray-200;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+
+    h4 {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin: 0 0 1rem 0;
+        color: $gray-800;
+    }
+}
+
+.progressItem {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid $gray-200;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    .fileName {
+        font-weight: 500;
+        color: $gray-700;
+    }
+
+    .status {
+        font-size: 0.875rem;
+        font-weight: 600;
+        
+        &.uploading { color: $primary-blue; }
+        &.success { color: $primary-green; }
+        &.error { color: $primary-red; }
+    }
+    
+    .progressBar {
+        width: 100px;
+        height: 8px;
+        background: $gray-200;
+        border-radius: 4px;
+        overflow: hidden;
+        
+        div {
+            height: 100%;
+            background: $primary-green;
+            transition: width 0.3s ease;
+        }
+    }
+}
+
+.documentListContainer {
+    h4 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: $gray-800;
+        margin-bottom: 1rem;
+    }
+}
+
+.documentGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
+}
+
+.documentCard {
+    background: $white;
+    border: 1px solid $gray-200;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    position: relative;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+        border-color: $primary-blue;
+    }
+
+    .documentContent {
+        cursor: pointer;
+        
+        h4 {
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: $primary-blue;
+            margin: 0 0 0.5rem 0;
+        }
+
+        .docInfo {
+            font-size: 0.875rem;
+            color: $gray-500;
+            line-height: 1.4;
+        }
+    }
+
+    .docId {
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: $gray-500;
+        margin-bottom: 0.5rem;
+    }
+
+    .docContent {
+        font-size: 0.9rem;
+        color: $gray-700;
+        line-height: 1.5;
+        margin-bottom: 1rem;
+    }
+
+    .docScore {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: $primary-green;
+    }
+}
+
+.emptyState {
+    text-align: center;
+    padding: 3rem;
+    background: $gray-50;
+    border-radius: 0.75rem;
+    color: $gray-500;
+}
+
+// Document Detail View
+.documentDetailContainer {
+    .searchContainer {
+        background: $white;
+        border: 1px solid $gray-200;
+        border-radius: 0.75rem;
+        padding: 1.5rem;
+        margin-bottom: 2rem;
+
+        .searchBox {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+
+            .searchInput {
+                flex: 1;
+                padding: 0.75rem 1rem;
+                border: 1px solid $gray-300;
+                border-radius: 0.5rem;
+                font-size: 1rem;
+                transition: border-color 0.2s ease-in-out;
+
+                &:focus {
+                    outline: none;
+                    border-color: $primary-blue;
+                    box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
+                }
+            }
+        }
+    }
+
+    .searchResultsContainer {
+        margin-bottom: 2rem;
+
+        h4 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: $gray-800;
+            margin-bottom: 1rem;
+        }
+
+        .searchResults {
+            space-y: 1rem;
+        }
+
+        .searchResultItem {
+            background: $white;
+            border: 1px solid $gray-200;
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 1rem;
+            transition: box-shadow 0.2s ease-in-out;
+
+            &:hover {
+                box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+            }
+
+            .resultHeader {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 0.75rem;
+
+                .resultScore {
+                    font-size: 0.875rem;
+                    font-weight: 600;
+                    color: $primary-green;
+                    background: color.adjust($primary-green, $alpha: -0.9);
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 0.375rem;
+                }
+
+                .resultChunk {
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    color: $gray-500;
+                }
+            }
+
+            .resultText {
+                color: $gray-700;
+                line-height: 1.6;
+                margin: 0;
+            }
+        }
+    }
+
+    .documentDetailContent {
+        .documentMeta {
+            background: $white;
+            border: 1px solid $gray-200;
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+
+            h3 {
+                font-size: 1.5rem;
+                font-weight: 700;
+                color: $gray-900;
+                margin: 0 0 1rem 0;
+            }
+
+            .metaInfo {
+                display: flex;
+                gap: 1.5rem;
+                font-size: 0.875rem;
+                color: $gray-600;
+                flex-wrap: wrap;
+
+                span {
+                    font-weight: 500;
+                }
+            }
+        }
+
+        .chunksContainer {
+            h4 {
+                font-size: 1.25rem;
+                font-weight: 600;
+                color: $gray-800;
+                margin-bottom: 1rem;
+            }
+
+            .chunksList {
+                space-y: 1rem;
+            }
+
+            .chunkItem {
+                background: $white;
+                border: 1px solid $gray-200;
+                border-radius: 0.75rem;
+                padding: 1.5rem;
+                margin-bottom: 1rem;
+
+                .chunkHeader {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 1rem;
+                    padding-bottom: 0.75rem;
+                    border-bottom: 1px solid $gray-200;
+
+                    .chunkIndex {
+                        font-size: 0.875rem;
+                        font-weight: 600;
+                        color: $primary-blue;
+                        background: color.adjust($primary-blue, $alpha: -0.9);
+                        padding: 0.25rem 0.5rem;
+                        border-radius: 0.375rem;
+                    }
+
+                    .chunkSize {
+                        font-size: 0.75rem;
+                        font-weight: 500;
+                        color: $gray-500;
+                    }
+                }
+
+                .chunkText {
+                    color: $gray-700;
+                    line-height: 1.7;
+                    white-space: pre-wrap;
+                    word-break: break-word;
+                }
+            }
+        }
+    }
+}
+
+// Modal Styles
+.modalBackdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modalContent {
+    background: $white;
+    padding: 2rem;
+    border-radius: 0.75rem;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+
+    h3 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: $gray-800;
+        margin: 0 0 1.5rem 0;
+    }
+}
+
+.formGroup {
+    margin-bottom: 1.5rem;
+
+    label {
+        display: block;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: $gray-700;
+        margin-bottom: 0.5rem;
+    }
+
+    input,
+    textarea {
+        width: 100%;
+        padding: 0.75rem;
+        border: 1px solid $gray-300;
+        border-radius: 0.5rem;
+        font-size: 1rem;
+        transition: border-color 0.2s ease-in-out;
+
+        &:focus {
+            outline: none;
+            border-color: $primary-blue;
+            box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
+        }
+    }
+
+    textarea {
+        resize: vertical;
+        min-height: 100px;
+    }
+}
+
+.modalActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 2rem;
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
+
+        .headerLeft,
+        .headerRight {
+            width: 100%;
+            justify-content: space-between;
+        }
+
+        .headerRight {
+            justify-content: flex-start;
+        }
+    }
+
+    .collectionGrid,
+    .documentGrid {
+        grid-template-columns: 1fr;
+    }
+
+    .documentDetailContainer {
+        .searchBox {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .documentMeta .metaInfo {
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .chunkItem .chunkHeader {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.5rem;
+        }
+    }
+
+    .modalContent {
+        width: 95%;
+        padding: 1.5rem;
+    }
+}
diff --git a/src/app/main/assets/Settings.module.scss b/src/app/main/assets/Settings.module.scss
index 40b7de9e..bd264476 100644
--- a/src/app/main/assets/Settings.module.scss
+++ b/src/app/main/assets/Settings.module.scss
@@ -49,107 +49,57 @@ $white: #ffffff;
     }
 
     p {
+        font-size: 1rem;
         color: $gray-600;
         margin: 0;
-        line-height: 1.6;
-        font-size: 1.125rem;
+        line-height: 1.5;
     }
 }
 
 .headerActions {
     display: flex;
     gap: 1rem;
-    flex-shrink: 0;
-}
-
-// Mode Toggle Styles
-.headerTop {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1rem;
-}
-
-.modeToggle {
-    display: flex;
     align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    background: $gray-50;
-    border: 1px solid $gray-200;
-    border-radius: 0.5rem;
-
-    .modeLabel {
-        font-weight: 600;
-        color: $gray-700;
-        font-size: 0.875rem;
-    }
-
-    .toggleButton {
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: $primary-blue;
-        font-size: 1.5rem;
-        transition: color 0.2s ease-in-out;
-
-        &:hover {
-            color: color.adjust($primary-blue, $lightness: -10%);
-        }
-    }
-
-    .modeDescription {
-        color: $gray-500;
-        font-size: 0.75rem;
-        max-width: 200px;
-        line-height: 1.4;
-    }
 }
 
 // Categories Grid
 .categoriesGrid {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+
+    @media (max-width: 640px) {
+        grid-template-columns: 1fr;
+    }
 }
 
 .categoryWrapper {
-    background: $white;
-    border-radius: 0.75rem;
-    border: 1px solid $gray-200;
-    overflow: hidden;
-    transition: all 0.2s ease-in-out;
-
-    &:hover {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        border-color: rgba($primary-blue, 0.3);
-    }
+    position: relative;
 }
 
 .categoryCard {
+    background: $white;
+    border: 1px solid $gray-200;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
+    height: 100%;
 
-    &.active {
-        background-color: rgba($primary-blue, 0.02);
+    &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+        border-color: $primary-blue;
     }
 }
 
 .categoryHeader {
     display: flex;
     align-items: center;
-    padding: 1.5rem;
     gap: 1rem;
 }
 
 .categoryIcon {
-    width: 3rem;
-    height: 3rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: $gray-50;
-    border-radius: 0.75rem;
     font-size: 1.5rem;
     flex-shrink: 0;
 }
@@ -158,17 +108,17 @@ $white: #ffffff;
     flex: 1;
 
     h3 {
-        font-size: 1.25rem;
+        font-size: 1.125rem;
         font-weight: 600;
         color: $gray-900;
         margin: 0 0 0.25rem 0;
     }
 
     p {
+        font-size: 0.875rem;
         color: $gray-600;
         margin: 0;
-        font-size: 0.925rem;
-        line-height: 1.5;
+        line-height: 1.4;
     }
 }
 
@@ -177,161 +127,108 @@ $white: #ffffff;
     align-items: center;
     gap: 0.5rem;
     flex-shrink: 0;
-}
 
-.statusText {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: $gray-600;
+    .statusText {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: $gray-500;
+    }
+
+    .chevron {
+        font-size: 1rem;
+        color: $gray-400;
+    }
 }
 
 .statusConnected {
     color: $primary-green;
-    width: 1.25rem;
-    height: 1.25rem;
 }
 
 .statusError {
     color: $primary-red;
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.chevron {
-    width: 1.25rem;
-    height: 1.25rem;
-    color: $gray-400;
-    transition: transform 0.2s ease-in-out;
-
-    &.expanded {
-        transform: rotate(90deg);
-    }
-}
-
-// Configuration Panel
-.configPanel {
-    border-top: 1px solid $gray-200;
-    background: $gray-50;
-    animation: slideDown 0.3s ease-in-out;
 }
 
-@keyframes slideDown {
-    from {
-        opacity: 0;
-        max-height: 0;
-    }
-
-    to {
-        opacity: 1;
-        max-height: 500px;
-    }
+.statusWarning {
+    color: $primary-yellow;
 }
 
-.configContent {
-    padding: 1.5rem;
-
-    h4 {
-        font-size: 1.125rem;
-        font-weight: 600;
-        color: $gray-900;
-        margin: 0 0 1rem 0;
-    }
-
-    p {
-        color: $gray-600;
-        margin: 0;
-        line-height: 1.6;
+// Detail View
+.detailView {
+    .detailHeader {
+        margin-bottom: 2rem;
     }
-}
-
-// Form Styles (for next step)
-.formGroup {
-    margin-bottom: 1.5rem;
 
-    label {
-        display: block;
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: $gray-700;
-        margin-bottom: 0.5rem;
+    .headerTop {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 1rem;
     }
 
-    input,
-    select,
-    textarea {
-        width: 100%;
-        padding: 0.75rem;
+    .backButton {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        background: transparent;
         border: 1px solid $gray-300;
         border-radius: 0.5rem;
-        font-size: 0.925rem;
-        transition: border-color 0.2s ease-in-out;
-
-        &:focus {
-            outline: none;
-            border-color: $primary-blue;
-            box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
-        }
+        color: $gray-700;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
 
-        &::placeholder {
-            color: $gray-400;
+        &:hover {
+            background: $gray-50;
+            border-color: $gray-400;
         }
     }
 
-    textarea {
-        resize: vertical;
-        min-height: 80px;
-    }
-
-    small {
-        display: block;
-        margin-top: 0.25rem;
-        font-size: 0.8rem;
-        color: $gray-500;
-        line-height: 1.4;
-    }
-
-    .error {
-        color: $primary-red;
-        font-weight: 500;
-    }
+    .detailTitle {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
 
-    .success {
-        color: $primary-green;
-        font-weight: 500;
-    }
+        .detailIcon {
+            font-size: 1.5rem;
+        }
 
-    input.error,
-    select.error {
-        border-color: $primary-red;
-        box-shadow: 0 0 0 3px rgba($primary-red, 0.1);
-    }
+        h2 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: $gray-900;
+            margin: 0;
+        }
 
-    input.success,
-    select.success {
-        border-color: $primary-green;
-        box-shadow: 0 0 0 3px rgba($primary-green, 0.1);
+        p {
+            font-size: 0.875rem;
+            color: $gray-600;
+            margin: 0.25rem 0 0 0;
+        }
     }
 }
 
-.formActions {
-    display: flex;
-    gap: 0.75rem;
-    justify-content: flex-end;
-    margin-top: 1.5rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid $gray-200;
+.configWrapper {
+    background: $white;
+    border: 1px solid $gray-200;
+    border-radius: 0.75rem;
+    padding: 2rem;
 }
 
+// Button Styles
 .button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
     padding: 0.625rem 1.25rem;
     border-radius: 0.5rem;
     font-size: 0.875rem;
-    font-weight: 500;
+    font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     border: 1px solid transparent;
 
     &:disabled {
+        opacity: 0.6;
         cursor: not-allowed;
     }
 
@@ -340,12 +237,7 @@ $white: #ffffff;
         color: $white;
 
         &:hover:not(:disabled) {
-            background-color: color.adjust($primary-blue, $lightness: -10%);
-        }
-
-        &:disabled {
-            background-color: $gray-300;
-            color: $gray-500;
+            background-color: color.adjust($primary-blue, $lightness: -7%);
         }
     }
 
@@ -356,487 +248,702 @@ $white: #ffffff;
 
         &:hover:not(:disabled) {
             background-color: $gray-50;
-        }
-
-        &:disabled {
-            background-color: $gray-100;
-            color: $gray-400;
-            border-color: $gray-200;
+            border-color: $gray-400;
         }
     }
 
-    &.test {
-        background-color: $primary-green;
+    &.danger {
+        background-color: $primary-red;
         color: $white;
 
         &:hover:not(:disabled) {
-            background-color: color.adjust($primary-green, $lightness: -10%);
+            background-color: color.adjust($primary-red, $lightness: -7%);
         }
+    }
 
-        &:disabled {
-            background-color: $gray-300;
-            color: $gray-500;
-        }
+    &.small {
+        padding: 0.5rem 0.875rem;
+        font-size: 0.75rem;
     }
+}
 
-    &.danger {
-        background-color: $primary-red;
-        color: $white;
+// Loading and Error States
+.loadingState,
+.errorState {
+    text-align: center;
+    padding: 3rem 2rem;
+    color: $gray-500;
 
-        &:hover:not(:disabled) {
-            background-color: color.adjust($primary-red, $lightness: -10%);
-        }
+    p {
+        margin: 0 0 1rem 0;
+    }
+}
 
-        &:disabled {
-            background-color: $gray-300;
-            color: $gray-500;
-        }
+.errorState {
+    color: $primary-red;
+}
+
+// Special animations
+.spinning {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
     }
 }
 
-// Detail View Styles
-.detailView {
-    max-width: 800px;
-    margin: 0 auto;
+// ===== VectorDB Config Specific Styles =====
+
+// Container
+.vectordbContainer {
+    background: $white;
+    border-radius: 0.75rem;
+    overflow: hidden;
 }
 
-.detailHeader {
+// Tab Navigation
+.tabNavigation {
     display: flex;
-    align-items: flex-start;
-    gap: 1rem;
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
+    background: $gray-50;
     border-bottom: 1px solid $gray-200;
 }
 
-.backButton {
+.tabButton {
+    flex: 1;
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 0.5rem;
-    padding: 0.625rem 1rem;
-    background: $white;
-    border: 1px solid $gray-300;
-    border-radius: 0.5rem;
-    color: $gray-700;
+    padding: 1rem 1.5rem;
+    background: transparent;
+    border: none;
+    color: $gray-600;
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
+    border-bottom: 2px solid transparent;
 
     &:hover {
-        background: $gray-50;
-        border-color: $gray-400;
+        background: $gray-100;
+        color: $gray-800;
+    }
+
+    &.active {
+        background: $white;
+        color: $primary-blue;
+        border-bottom-color: $primary-blue;
     }
 
     svg {
-        width: 1rem;
-        height: 1rem;
+        font-size: 1rem;
     }
 }
 
-.detailTitle {
+// Error Banner
+.errorBanner {
     display: flex;
-    align-items: flex-start;
-    gap: 1rem;
-    flex: 1;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.5rem;
+    background: color.adjust($primary-red, $alpha: -0.9);
+    color: $primary-red;
+    border-bottom: 1px solid color.adjust($primary-red, $alpha: -0.8);
 
-    h2 {
-        font-size: 1.875rem;
-        font-weight: 700;
-        color: $gray-900;
-        margin: 0 0 0.25rem 0;
+    svg {
+        font-size: 1.125rem;
     }
 
-    p {
-        color: $gray-600;
-        margin: 0;
-        line-height: 1.6;
+    span {
+        flex: 1;
+        font-weight: 500;
     }
-}
 
-.detailIcon {
-    width: 4rem;
-    height: 4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: $gray-50;
-    border-radius: 1rem;
-    font-size: 2rem;
-    flex-shrink: 0;
+    button {
+        background: none;
+        border: none;
+        color: $primary-red;
+        cursor: pointer;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+        transition: background-color 0.2s ease-in-out;
+
+        &:hover {
+            background: color.adjust($primary-red, $alpha: -0.8);
+        }
+    }
 }
 
-.configWrapper {
-    background: $white;
-    border-radius: 0.75rem;
-    border: 1px solid $gray-200;
+// Tab Content
+.tabContent {
     padding: 2rem;
 }
 
-.configForm {
-    display: grid;
-    gap: 1.5rem;
+// Embedding Config Tab
+.embeddingConfig {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
 
-    .formGroup {
-        label {
-            display: block;
-            font-size: 0.875rem;
+// Status Section
+.statusSection {
+    .sectionHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1.5rem;
+
+        h3 {
+            font-size: 1.25rem;
             font-weight: 600;
-            color: $gray-700;
-            margin-bottom: 0.5rem;
+            color: $gray-900;
+            margin: 0;
         }
 
-        input,
-        select {
-            width: 100%;
-            padding: 0.25rem 0.8rem;
-            border: 1px solid $gray-300;
-            border-radius: 0.5rem;
-            font-size: 0.875rem;
-            background: $white;
-            transition: all 0.2s ease-in-out;
+        .headerActions {
+            display: flex;
+            gap: 0.75rem;
+        }
+    }
 
-            &:focus {
-                outline: none;
-                border-color: $primary-blue;
-                box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
+    .currentStatus {
+        .statusCard {
+            background: $gray-50;
+            border: 1px solid $gray-200;
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 1rem;
+
+            .statusInfo {
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+                flex: 1;
+
+                .providerInfo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+
+                    .providerIcon {
+                        font-size: 1.5rem;
+                    }
+
+                    h4 {
+                        font-size: 1.125rem;
+                        font-weight: 600;
+                        color: $gray-900;
+                        margin: 0;
+                    }
+
+                    p {
+                        font-size: 0.875rem;
+                        color: $gray-500;
+                        margin: 0.25rem 0 0 0;
+                    }
+
+                    .dimensionInfo {
+                        font-size: 0.8rem;
+                        color: $gray-600;
+                        font-weight: 500;
+                        margin: 0.375rem 0 0 0 !important;
+
+                        .autoDetected {
+                            color: $primary-green;
+                            font-weight: 600;
+                        }
+                    }
+                }
+
+                .statusIndicator {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    margin-left: auto;
+
+                    svg {
+                        font-size: 1.125rem;
+                    }
+
+                    span {
+                        font-size: 0.875rem;
+                        font-weight: 500;
+                        color: $gray-700;
+                    }
+                }
             }
 
-            &::placeholder {
-                color: $gray-400;
+            .statusActions {
+                display: flex;
+                gap: 0.75rem;
             }
         }
+    }
+}
+
+// Providers Section
+.providersSection {
+    h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: $gray-900;
+        margin: 0 0 1rem 0;
+    }
+
+    .providersGrid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 1rem;
+    }
+
+    .providerCard {
+        background: $white;
+        border: 1px solid $gray-200;
+        border-radius: 0.75rem;
+        padding: 1.25rem;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
 
-        select {
-            cursor: pointer;
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            border-color: $gray-300;
         }
 
-        input[type="password"] {
-            font-family: monospace;
-            letter-spacing: 2px;
+        &.active {
+            border-color: $primary-blue;
+            box-shadow: 0 0 0 2px rgba($primary-blue, 0.1);
 
-            &::placeholder {
-                font-family: inherit;
-                letter-spacing: normal;
+            .providerHeader {
+                .providerInfo h4 {
+                    color: $primary-blue;
+                }
             }
         }
-    }
-}
 
-// Special styling for select dropdowns
-.editSelect {
-    appearance: none; /* Remove default browser styling */
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right 0.875rem center;
-    background-repeat: no-repeat;
-    background-size: 1.125rem;
-    padding-right: 2.75rem;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    border: 2px solid $gray-300;
-    height: 2.5rem; // editInput과 동일한 높이
-    box-sizing: border-box; // border를 포함한 박스 크기 계산
-    font-size: 0.875rem; // currentValue와 동일한 폰트 크기
-    
-    &:hover {
-        border-color: $gray-400;
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234b5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-    }
-    
-    &:focus {
-        border-color: $primary-blue;
-        box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-    }
+        .providerHeader {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 0.75rem;
 
-    &:disabled {
-        background-color: $gray-100;
-        border-color: $gray-200;
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
-        cursor: not-allowed;
-        color: $gray-500;
-    }
+            .providerIcon {
+                font-size: 1.25rem;
+                flex-shrink: 0;
+            }
 
-    // Style for option elements
-    option {
-        padding: 0.75rem;
-        background-color: $white;
-        color: $gray-700;
-        border: none;
-        font-size: 0.875rem;
-        
-        &:hover {
-            background-color: $gray-50;
+            .providerInfo {
+                flex: 1;
+
+                h4 {
+                    font-size: 1rem;
+                    font-weight: 600;
+                    color: $gray-900;
+                    margin: 0 0 0.25rem 0;
+                }
+
+                p {
+                    font-size: 0.75rem;
+                    color: $gray-600;
+                    margin: 0;
+                    line-height: 1.3;
+                }
+            }
+
+            .providerStatus {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                flex-shrink: 0;
+
+                svg {
+                    font-size: 1rem;
+                }
+
+                .activeBadge {
+                    background: $primary-blue;
+                    color: $white;
+                    font-size: 0.625rem;
+                    font-weight: 600;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 0.375rem;
+                }
+            }
         }
-        
-        &:checked {
-            background-color: $primary-blue;
-            color: $white;
+
+        .providerDetails {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-top: 0.75rem;
+            border-top: 1px solid $gray-200;
+
+            .statusText {
+                font-size: 0.75rem;
+                font-weight: 500;
+                color: $gray-600;
+            }
+
+            .errorText {
+                font-size: 0.75rem;
+                color: $primary-red;
+                text-align: right;
+                flex: 1;
+                margin-left: 0.5rem;
+            }
         }
     }
 }
 
-// Loading and Error States
-.loadingState, .errorState {
-    padding: 2rem;
-    text-align: center;
-    color: $gray-600;
-
-    p {
+// Config Section
+.configSection {
+    h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: $gray-900;
         margin: 0 0 1rem 0;
-        font-size: 1rem;
     }
 }
 
-.errorState {
-    background: color.adjust($primary-red, $lightness: 45%);
-    border: 1px solid color.adjust($primary-red, $lightness: 35%);
-    border-radius: 0.5rem;
-    color: color.adjust($primary-red, $lightness: -20%);
-}
+// Database Config Tab
+.databaseConfig {
+    .sectionHeader {
+        margin-bottom: 1.5rem;
 
-// Advanced Config Styles
-.configPath {
-    font-family: 'Courier New', monospace;
-    font-size: 0.75rem;
-    color: $gray-400;
-    display: block;
-    margin-top: 0.25rem;
-}
+        h3 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: $gray-900;
+            margin: 0 0 0.5rem 0;
+        }
 
-.required {
-    color: $primary-red;
-    margin-left: 0.25rem;
+        p {
+            font-size: 0.875rem;
+            color: $gray-600;
+            margin: 0;
+        }
+    }
 }
 
-.unsaved {
-    color: $primary-yellow;
-    font-weight: 600;
-}
+// Responsive adjustments for VectorDB Config
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
 
-.saving {
-    color: $primary-blue;
-    font-weight: 600;
-}
+    .tabNavigation {
+        .tabButton {
+            padding: 0.75rem 1rem;
+            font-size: 0.8rem;
 
-// Config item header
-.configHeader {
-    margin-bottom: 0.5rem;
+            svg {
+                font-size: 0.875rem;
+            }
+        }
+    }
 
-    label {
-        display: block;
-        font-size: 0.875rem;
-        font-weight: 600;
-        color: $gray-700;
+    .tabContent {
+        padding: 1.5rem;
     }
-}
 
-.editButton {
-    background: none;
-    border: 1px solid $gray-300;
-    border-radius: 0.25rem;
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: $gray-600;
-    transition: all 0.2s ease-in-out;
+    .statusSection {
+        .sectionHeader {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 1rem;
 
-    &:hover {
-        background-color: $gray-50;
-        border-color: $gray-400;
-        color: $gray-700;
-    }
+            .headerActions {
+                width: 100%;
+                justify-content: flex-start;
+            }
+        }
 
-    svg {
-        width: 0.875rem;
-        height: 0.875rem;
+        .currentStatus {
+            .statusCard {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 1.5rem;
+
+                .statusInfo {
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: 1rem;
+
+                    .statusIndicator {
+                        margin-left: 0;
+                    }
+                }
+
+                .statusActions {
+                    justify-content: flex-start;
+                }
+            }
+        }
     }
-}
 
-.saveButton {
-    background-color: $primary-green;
-    border-color: $primary-green;
-    color: $white;
+    .providersSection {
+        .providersGrid {
+            grid-template-columns: 1fr;
+        }
 
-    &:hover {
-        background-color: color.adjust($primary-green, $lightness: -10%);
-        border-color: color.adjust($primary-green, $lightness: -10%);
+        .providerCard {
+            .providerHeader {
+                .providerInfo p {
+                    font-size: 0.8rem;
+                }
+            }
+        }
     }
+} 
 
-    &:disabled {
-        background-color: $gray-300;
-        border-color: $gray-300;
-        color: $gray-500;
-        cursor: not-allowed;
+// =============================================================================
+// BaseConfigPanel Styles
+// =============================================================================
+
+.configForm {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+}
+
+.formGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem 0;
+    border-bottom: 1px solid $gray-200;
+
+    &:last-child {
+        border-bottom: none;
     }
 }
 
-.cancelButton {
-    background-color: $primary-red;
-    border-color: $primary-red;
-    color: $white;
+.configHeader {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 
-    &:hover {
-        background-color: color.adjust($primary-red, $lightness: -10%);
-        border-color: color.adjust($primary-red, $lightness: -10%);
+    label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: $gray-700;
+        margin: 0;
     }
 
-    &:disabled {
-        background-color: $gray-300;
-        border-color: $gray-300;
-        color: $gray-500;
-        cursor: not-allowed;
+    .required {
+        color: $primary-red;
+        font-weight: 700;
     }
 }
 
 .configValue {
-    margin-bottom: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
 .editContainer {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
+    min-height: 2.5rem;
+}
+
+.valueDisplay {
+    flex: 1;
+    padding: 0.5rem 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    min-height: 2.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.currentValue {
+    color: $gray-900;
+    font-size: 0.875rem;
+    font-weight: 500;
+    word-break: break-all;
 }
 
 .editInput {
     flex: 1;
     padding: 0.5rem 0.75rem;
-    border: 2px solid $gray-300;
+    border: 1px solid $gray-300;
     border-radius: 0.375rem;
-    font-size: 0.875rem; // currentValue와 동일한 폰트 크기
-    transition: all 0.2s ease-in-out;
-    height: 2.5rem; // 고정된 높이로 valueDisplay와 맞춤
-    box-sizing: border-box; // border를 포함한 박스 크기 계산
-
-    &:hover {
-        border-color: $gray-400;
-    }
+    font-size: 0.875rem;
+    outline: none;
+    transition: border-color 0.2s ease;
 
     &:focus {
-        outline: none;
         border-color: $primary-blue;
-        box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
+        box-shadow: 0 0 0 2px rgba($primary-blue, 0.1);
     }
 
     &:disabled {
-        background-color: $gray-100;
-        border-color: $gray-200;
+        background: $gray-100;
         color: $gray-500;
         cursor: not-allowed;
+        border-color: $gray-300;
+    }
+}
+
+.editSelect {
+    @extend .editInput;
+    cursor: pointer;
+
+    &:disabled {
+        cursor: not-allowed;
     }
 }
 
 .editButtons {
     display: flex;
-    gap: 0.25rem;
+    gap: 0.5rem;
+    flex-shrink: 0;
 }
 
-.valueDisplay {
-    padding: 0.5rem 0.75rem; // editInput과 동일한 padding
-    background-color: $gray-50;
-    border: 2px solid $gray-200; // editInput과 동일한 border 두께
-    border-radius: 0.375rem; // editInput과 동일한 border-radius
-    height: 2.5rem; // editInput과 동일한 높이
-    box-sizing: border-box; // border를 포함한 박스 크기 계산
+.editButton {
     display: flex;
     align-items: center;
-    flex: 1; // editContainer 내에서 최대 공간 차지
-}
-
-.currentValue {
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    border: 1px solid $gray-300;
+    background: $white;
+    color: $gray-600;
+    cursor: pointer;
+    transition: all 0.2s ease;
     font-size: 0.875rem;
-    color: $gray-700;
-    word-break: break-all;
-}
-
-.fieldDescription {
-    display: block;
-    margin-top: 0.5rem;
-    line-height: 1.4;
-}
 
-// Responsive Design
-@media (max-width: 768px) {
-    .categoryHeader {
-        padding: 1rem;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.75rem;
+    &:hover:not(:disabled) {
+        background: $gray-50;
+        color: $gray-800;
+        border-color: $gray-400;
     }
 
-    .categoryStatus {
-        align-self: flex-end;
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
     }
 
-    .configContent {
-        padding: 1rem;
+    &.saveButton {
+        background: $primary-green;
+        color: $white;
+        border-color: $primary-green;
+
+        &:hover:not(:disabled) {
+            background: darken($primary-green, 10%);
+            border-color: darken($primary-green, 10%);
+        }
     }
 
-    .formActions {
-        flex-direction: column;
+    &.cancelButton {
+        background: $primary-red;
+        color: $white;
+        border-color: $primary-red;
 
-        .button {
-            width: 100%;
+        &:hover:not(:disabled) {
+            background: darken($primary-red, 10%);
+            border-color: darken($primary-red, 10%);
         }
     }
+}
 
-    .detailHeader {
-        flex-direction: column;
-        gap: 1rem;
-    }
+.fieldDescription {
+    font-size: 0.75rem;
+    color: $gray-500;
+    line-height: 1.4;
+    margin-top: 0.5rem;
 
-    .detailTitle {
-        flex-direction: column;
-        gap: 0.75rem;
+    .configPath {
+        color: $gray-400;
+        font-style: italic;
+        display: block;
+        margin-top: 0.25rem;
     }
 
-    .detailIcon {
-        width: 3rem;
-        height: 3rem;
-        font-size: 1.5rem;
+    .unsaved {
+        color: $primary-yellow;
+        font-weight: 600;
     }
 
-    .configWrapper {
-        padding: 1.5rem;
+    .saving {
+        color: $primary-blue;
+        font-weight: 600;
     }
+}
 
-    .backButton {
-        align-self: flex-start;
-    }
+.formActions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding-top: 1.5rem;
+    margin-top: 1rem;
+    border-top: 1px solid $gray-200;
+}
 
-    .headerTop {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.75rem;
-    }
+.button.test {
+    background: $primary-blue;
+    color: $white;
+    border: 1px solid $primary-blue;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
 
-    .modeToggle {
-        width: 100%;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.5rem;
+    &:hover:not(:disabled) {
+        background: darken($primary-blue, 10%);
+        border-color: darken($primary-blue, 10%);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba($primary-blue, 0.3);
+    }
 
-        .modeDescription {
-            max-width: 100%;
-        }
+    &:disabled {
+        background: $gray-300;
+        border-color: $gray-300;
+        color: $gray-500;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
     }
+}
 
-    .configHeader {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.5rem;
+// Responsive adjustments for config forms
+@media (max-width: 768px) {
+    .configForm {
+        padding: 0.75rem;
+        gap: 1rem;
     }
 
     .editContainer {
         flex-direction: column;
         align-items: stretch;
+        gap: 0.5rem;
+
+        .editButtons {
+            justify-content: center;
+        }
     }
 
-    .editButtons {
-        justify-content: flex-end;
+    .formActions {
+        justify-content: center;
     }
-}
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/src/app/main/components/Documents.tsx b/src/app/main/components/Documents.tsx
new file mode 100644
index 00000000..4403f3da
--- /dev/null
+++ b/src/app/main/components/Documents.tsx
@@ -0,0 +1,753 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import styles from '../assets/Documents.module.scss';
+import { 
+    listCollections, 
+    createCollection, 
+    uploadDocument, 
+    searchDocuments,
+    deleteCollection,
+    listDocumentsInCollection,
+    getDocumentDetails,
+    deleteDocumentFromCollection,
+    isSupportedFileType,
+    isValidFileSize,
+    isValidCollectionName,
+    formatFileSize,
+    getRelativeTime
+} from '@/app/api/ragAPI.js';
+
+interface Collection {
+    name: string;
+    vector_size?: number;
+    points_count?: number;
+    description?: string;
+}
+
+interface DocumentInCollection {
+    document_id: string;
+    file_name: string;
+    file_type: string;
+    processed_at: string;
+    total_chunks: number;
+    actual_chunks: number;
+    metadata: any;
+    chunks: ChunkInfo[];
+}
+
+interface ChunkInfo {
+    chunk_id: string;
+    chunk_index: number;
+    chunk_size: number;
+    chunk_text_preview: string;
+}
+
+interface DocumentDetails {
+    document_id: string;
+    file_name: string;
+    file_type: string;
+    processed_at: string;
+    total_chunks: number;
+    metadata: any;
+    chunks: DetailedChunk[];
+}
+
+interface DetailedChunk {
+    chunk_id: string;
+    chunk_index: number;
+    chunk_size: number;
+    chunk_text: string;
+}
+
+interface SearchResult {
+    id: string;
+    score: number;
+    document_id: string;
+    chunk_index: number;
+    chunk_text: string;
+    file_name: string;
+    file_type: string;
+    metadata: any;
+}
+
+interface UploadProgress {
+    fileName: string;
+    status: 'uploading' | 'success' | 'error';
+    progress: number;
+    error?: string;
+}
+
+interface CollectionsResponse {
+    collections: string[];
+}
+
+interface DocumentsInCollectionResponse {
+    collection_name: string;
+    total_documents: number;
+    total_chunks: number;
+    documents: DocumentInCollection[];
+}
+
+interface SearchResponse {
+    query: string;
+    results: SearchResult[];
+    total: number;
+    search_params: any;
+}
+
+type ViewMode = 'collections' | 'documents' | 'document-detail';
+
+const Documents: React.FC = () => {
+    const [viewMode, setViewMode] = useState<ViewMode>('collections');
+    const [collections, setCollections] = useState<Collection[]>([]);
+    const [selectedCollection, setSelectedCollection] = useState<Collection | null>(null);
+    const [documentsInCollection, setDocumentsInCollection] = useState<DocumentInCollection[]>([]);
+    const [selectedDocument, setSelectedDocument] = useState<DocumentInCollection | null>(null);
+    const [documentDetails, setDocumentDetails] = useState<DocumentDetails | null>(null);
+    const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isSearching, setIsSearching] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState<UploadProgress[]>([]);
+    
+    // 모달 상태
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [showDeleteDocModal, setShowDeleteDocModal] = useState(false);
+    const [collectionToDelete, setCollectionToDelete] = useState<Collection | null>(null);
+    const [documentToDelete, setDocumentToDelete] = useState<DocumentInCollection | null>(null);
+    
+    // 폼 상태
+    const [newCollectionName, setNewCollectionName] = useState('');
+    const [newCollectionDescription, setNewCollectionDescription] = useState('');
+    
+    // 로딩 및 에러 상태
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // 컬렉션 목록 로드
+    useEffect(() => {
+        loadCollections();
+    }, []);
+
+    const loadCollections = async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            const response = await listCollections() as CollectionsResponse;
+            const collectionObjects = (response.collections || []).map(name => ({ name }));
+            setCollections(collectionObjects);
+        } catch (err) {
+            setError('컬렉션 목록을 불러오는데 실패했습니다.');
+            console.error('Failed to load collections:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 컬렉션 내 문서 목록 로드
+    const loadDocumentsInCollection = async (collectionName: string) => {
+        try {
+            setLoading(true);
+            setError(null);
+            const response = await listDocumentsInCollection(collectionName) as DocumentsInCollectionResponse;
+            setDocumentsInCollection(response.documents || []);
+        } catch (err) {
+            setError('문서 목록을 불러오는데 실패했습니다.');
+            console.error('Failed to load documents in collection:', err);
+            setDocumentsInCollection([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 문서 상세 정보 로드
+    const loadDocumentDetails = async (collectionName: string, documentId: string) => {
+        try {
+            setLoading(true);
+            setError(null);
+            const response = await getDocumentDetails(collectionName, documentId) as DocumentDetails;
+            setDocumentDetails(response);
+        } catch (err) {
+            setError('문서 상세 정보를 불러오는데 실패했습니다.');
+            console.error('Failed to load document details:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 문서 내 검색
+    const handleDocumentSearch = async () => {
+        if (!selectedCollection || !searchQuery.trim()) return;
+
+        try {
+            setIsSearching(true);
+            setError(null);
+            const response = await searchDocuments(
+                selectedCollection.name,
+                searchQuery,
+                10, // limit
+                0.0,
+                selectedDocument ? { document_id: selectedDocument.document_id } : undefined
+            ) as SearchResponse;
+            setSearchResults(response.results || []);
+        } catch (err) {
+            setError('검색에 실패했습니다.');
+            console.error('Failed to search documents:', err);
+            setSearchResults([]);
+        } finally {
+            setIsSearching(false);
+        }
+    };
+
+    // 검색 쿼리 변경 시 자동 검색 (디바운싱)
+    useEffect(() => {
+        if (viewMode === 'document-detail' && searchQuery) {
+            const timer = setTimeout(() => {
+                handleDocumentSearch();
+            }, 500);
+            return () => clearTimeout(timer);
+        } else {
+            setSearchResults([]);
+        }
+    }, [searchQuery, viewMode, selectedCollection, selectedDocument]);
+
+    // 컬렉션 생성
+    const handleCreateCollection = async () => {
+        if (!isValidCollectionName(newCollectionName)) {
+            setError('컬렉션 이름은 3-63자의 영문자, 숫자, 언더스코어, 하이픈만 허용됩니다.');
+            return;
+        }
+
+        try {
+            setLoading(true);
+            setError(null);
+            await createCollection(
+                newCollectionName,
+                1536,
+                "Cosine",
+                newCollectionDescription || undefined
+            );
+            setShowCreateModal(false);
+            setNewCollectionName('');
+            setNewCollectionDescription('');
+            await loadCollections();
+        } catch (err) {
+            setError('컬렉션 생성에 실패했습니다.');
+            console.error('Failed to create collection:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 컬렉션 삭제
+    const handleDeleteCollectionRequest = (collection: Collection) => {
+        setCollectionToDelete(collection);
+        setShowDeleteModal(true);
+    };
+
+    const handleConfirmDeleteCollection = async () => {
+        if (!collectionToDelete) return;
+
+        try {
+            setLoading(true);
+            setError(null);
+            await deleteCollection(collectionToDelete.name);
+            setShowDeleteModal(false);
+            setCollectionToDelete(null);
+            
+            if (selectedCollection?.name === collectionToDelete.name) {
+                setSelectedCollection(null);
+                setDocumentsInCollection([]);
+                setViewMode('collections');
+            }
+            
+            await loadCollections();
+        } catch (err) {
+            setError('컬렉션 삭제에 실패했습니다.');
+            console.error('Failed to delete collection:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 문서 삭제
+    const handleDeleteDocumentRequest = (document: DocumentInCollection) => {
+        setDocumentToDelete(document);
+        setShowDeleteDocModal(true);
+    };
+
+    const handleConfirmDeleteDocument = async () => {
+        if (!documentToDelete || !selectedCollection) return;
+
+        try {
+            setLoading(true);
+            setError(null);
+            await deleteDocumentFromCollection(selectedCollection.name, documentToDelete.document_id);
+            setShowDeleteDocModal(false);
+            setDocumentToDelete(null);
+            
+            if (selectedDocument?.document_id === documentToDelete.document_id) {
+                setSelectedDocument(null);
+                setDocumentDetails(null);
+                setViewMode('documents');
+            }
+            
+            await loadDocumentsInCollection(selectedCollection.name);
+        } catch (err) {
+            setError('문서 삭제에 실패했습니다.');
+            console.error('Failed to delete document:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 컬렉션 선택
+    const handleSelectCollection = async (collection: Collection) => {
+        setSelectedCollection(collection);
+        setSelectedDocument(null);
+        setDocumentDetails(null);
+        setSearchQuery('');
+        setSearchResults([]);
+        setViewMode('documents');
+        await loadDocumentsInCollection(collection.name);
+    };
+
+    // 문서 선택
+    const handleSelectDocument = async (document: DocumentInCollection) => {
+        if (!selectedCollection) return;
+        
+        setSelectedDocument(document);
+        setSearchQuery('');
+        setSearchResults([]);
+        setViewMode('document-detail');
+        await loadDocumentDetails(selectedCollection.name, document.document_id);
+    };
+
+    // 뒤로 가기
+    const handleGoBack = () => {
+        if (viewMode === 'document-detail') {
+            setViewMode('documents');
+            setSelectedDocument(null);
+            setDocumentDetails(null);
+            setSearchQuery('');
+            setSearchResults([]);
+        } else if (viewMode === 'documents') {
+            setViewMode('collections');
+            setSelectedCollection(null);
+            setDocumentsInCollection([]);
+        }
+    };
+
+    // 파일 업로드 처리
+    const handleFileUpload = async (files: FileList, isFolder: boolean = false) => {
+        if (!selectedCollection) {
+            setError('컬렉션을 먼저 선택해주세요.');
+            return;
+        }
+
+        const fileArray = Array.from(files);
+        const validFiles = fileArray.filter(file => {
+            if (!isSupportedFileType(file)) {
+                setError(`지원되지 않는 파일 형식입니다: ${file.name}`);
+                return false;
+            }
+            if (!isValidFileSize(file, 50)) {
+                setError(`파일 크기가 50MB를 초과합니다: ${file.name}`);
+                return false;
+            }
+            return true;
+        });
+
+        if (validFiles.length === 0) return;
+
+        const initialProgress: UploadProgress[] = validFiles.map(file => ({
+            fileName: file.name,
+            status: 'uploading',
+            progress: 0
+        }));
+        setUploadProgress(initialProgress);
+
+        for (let i = 0; i < validFiles.length; i++) {
+            const file = validFiles[i];
+            try {
+                setUploadProgress(prev => prev.map((item, index) => 
+                    index === i ? { ...item, progress: 50 } : item
+                ));
+
+                await uploadDocument(
+                    file,
+                    selectedCollection.name,
+                    1000,
+                    200,
+                    true,
+                    { upload_type: isFolder ? 'folder' : 'single' }
+                );
+
+                setUploadProgress(prev => prev.map((item, index) => 
+                    index === i ? { ...item, status: 'success', progress: 100 } : item
+                ));
+            } catch (err) {
+                setUploadProgress(prev => prev.map((item, index) => 
+                    index === i ? { 
+                        ...item, 
+                        status: 'error', 
+                        progress: 0,
+                        error: '업로드 실패'
+                    } : item
+                ));
+                console.error(`Failed to upload file ${file.name}:`, err);
+            }
+        }
+
+        setTimeout(() => {
+            if (selectedCollection) {
+                loadDocumentsInCollection(selectedCollection.name);
+            }
+            setUploadProgress([]);
+        }, 2000);
+    };
+
+    const handleSingleFileUpload = () => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.pdf,.docx,.doc,.txt';
+        input.onchange = (e) => {
+            const files = (e.target as HTMLInputElement).files;
+            if (files) handleFileUpload(files, false);
+        };
+        input.click();
+    };
+
+    const handleFolderUpload = () => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.webkitdirectory = true;
+        input.multiple = true;
+        input.onchange = (e) => {
+            const files = (e.target as HTMLInputElement).files;
+            if (files) handleFileUpload(files, true);
+        };
+        input.click();
+    };
+
+    return (
+        <div className={styles.container}>
+            {/* 헤더 */}
+            <div className={styles.header}>
+                <div className={styles.headerLeft}>
+                    {viewMode !== 'collections' && (
+                        <button onClick={handleGoBack} className={`${styles.button} ${styles.secondary}`}>
+                            ← 뒤로
+                        </button>
+                    )}
+                    <h2>
+                        {viewMode === 'collections' && '컬렉션 관리'}
+                        {viewMode === 'documents' && `${selectedCollection?.name} - 문서 목록`}
+                        {viewMode === 'document-detail' && `${selectedDocument?.file_name} - 문서 상세`}
+                    </h2>
+                </div>
+                <div className={styles.headerRight}>
+                    {viewMode === 'collections' && (
+                        <button onClick={() => setShowCreateModal(true)} className={`${styles.button} ${styles.primary}`}>
+                            새 컬렉션 생성
+                        </button>
+                    )}
+                    {viewMode === 'documents' && (
+                        <>
+                            <button onClick={handleSingleFileUpload} className={`${styles.button} ${styles.primary}`}>
+                                단일 문서 업로드
+                            </button>
+                            <button onClick={handleFolderUpload} className={`${styles.button} ${styles.primary}`}>
+                                폴더 업로드
+                            </button>
+                        </>
+                    )}
+                </div>
+            </div>
+
+            {error && <div className={styles.error}>{error}</div>}
+
+            {/* 컬렉션 목록 보기 */}
+            {viewMode === 'collections' && (
+                <div className={styles.collectionListContainer}>
+                    {loading ? (
+                        <div className={styles.loading}>로딩 중...</div>
+                    ) : (
+                        <div className={styles.collectionGrid}>
+                            {collections.map((collection) => (
+                                <div 
+                                    key={collection.name}
+                                    className={styles.collectionCard}
+                                >
+                                    <div 
+                                        className={styles.collectionContent}
+                                        onClick={() => handleSelectCollection(collection)}
+                                    >
+                                        <h4>{collection.name}</h4>
+                                    </div>
+                                    <button 
+                                        className={`${styles.deleteButton}`}
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleDeleteCollectionRequest(collection);
+                                        }}
+                                        title="컬렉션 삭제"
+                                    >
+                                        🗑️
+                                    </button>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* 문서 목록 보기 */}
+            {viewMode === 'documents' && (
+                <div className={styles.documentViewContainer}>
+                    {uploadProgress.length > 0 && (
+                        <div className={styles.uploadProgressContainer}>
+                            <h4>업로드 진행 상태</h4>
+                            {uploadProgress.map((item, index) => (
+                                <div key={index} className={styles.progressItem}>
+                                    <span className={styles.fileName}>{item.fileName}</span>
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                                        {item.status === 'uploading' && (
+                                            <div className={styles.progressBar}>
+                                                <div style={{ width: `${item.progress}%` }}></div>
+                                            </div>
+                                        )}
+                                        <span className={`${styles.status} ${styles[item.status]}`}>
+                                            {item.status === 'uploading' && '업로드 중...'}
+                                            {item.status === 'success' && '완료'}
+                                            {item.status === 'error' && (item.error || '실패')}
+                                        </span>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+
+                    <div className={styles.documentListContainer}>
+                        {loading ? (
+                            <div className={styles.loading}>로딩 중...</div>
+                        ) : documentsInCollection.length === 0 ? (
+                            <div className={styles.emptyState}>이 컬렉션에는 문서가 없습니다.</div>
+                        ) : (
+                            <div className={styles.documentGrid}>
+                                {documentsInCollection.map((doc) => (
+                                    <div 
+                                        key={doc.document_id}
+                                        className={styles.documentCard}
+                                    >
+                                        <div 
+                                            className={styles.documentContent}
+                                            onClick={() => handleSelectDocument(doc)}
+                                        >
+                                            <h4>{doc.file_name}</h4>
+                                            <p className={styles.docInfo}>
+                                                타입: {doc.file_type.toUpperCase()} | 
+                                                청크: {doc.actual_chunks}개 | 
+                                                업로드: {getRelativeTime(doc.processed_at)}
+                                            </p>
+                                        </div>
+                                        <button 
+                                            className={`${styles.deleteButton}`}
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                handleDeleteDocumentRequest(doc);
+                                            }}
+                                            title="문서 삭제"
+                                        >
+                                            🗑️
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* 문서 상세 보기 */}
+            {viewMode === 'document-detail' && (
+                <div className={styles.documentDetailContainer}>
+                    {/* 검색 영역 */}
+                    <div className={styles.searchContainer}>
+                        <div className={styles.searchBox}>
+                            <input
+                                type="text"
+                                placeholder="문서 내용을 검색하세요..."
+                                value={searchQuery}
+                                onChange={(e) => setSearchQuery(e.target.value)}
+                                className={styles.searchInput}
+                            />
+                            <button 
+                                onClick={handleDocumentSearch}
+                                disabled={isSearching || !searchQuery.trim()}
+                                className={`${styles.button} ${styles.primary}`}
+                            >
+                                {isSearching ? '검색 중...' : '검색'}
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* 검색 결과 */}
+                    {searchQuery && (
+                        <div className={styles.searchResultsContainer}>
+                            <h4>검색 결과 ({searchResults.length}개)</h4>
+                            {searchResults.length === 0 ? (
+                                <div className={styles.emptyState}>검색 결과가 없습니다.</div>
+                            ) : (
+                                <div className={styles.searchResults}>
+                                    {searchResults.map((result) => (
+                                        <div key={result.id} className={styles.searchResultItem}>
+                                            <div className={styles.resultHeader}>
+                                                <span className={styles.resultScore}>
+                                                    유사도: {(result.score * 100).toFixed(1)}%
+                                                </span>
+                                                <span className={styles.resultChunk}>
+                                                    청크 #{result.chunk_index + 1}
+                                                </span>
+                                            </div>
+                                            <p className={styles.resultText}>
+                                                {result.chunk_text}
+                                            </p>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {/* 문서 상세 정보 */}
+                    {!searchQuery && documentDetails && (
+                        <div className={styles.documentDetailContent}>
+                            <div className={styles.documentMeta}>
+                                <h3>{documentDetails.file_name}</h3>
+                                <div className={styles.metaInfo}>
+                                    <span>파일 타입: {documentDetails.file_type.toUpperCase()}</span>
+                                    <span>전체 청크: {documentDetails.total_chunks}개</span>
+                                    <span>업로드 시간: {getRelativeTime(documentDetails.processed_at)}</span>
+                                </div>
+                            </div>
+
+                            <div className={styles.chunksContainer}>
+                                <h4>문서 내용</h4>
+                                <div className={styles.chunksList}>
+                                    {documentDetails.chunks.map((chunk) => (
+                                        <div key={chunk.chunk_id} className={styles.chunkItem}>
+                                            <div className={styles.chunkHeader}>
+                                                <span className={styles.chunkIndex}>청크 #{chunk.chunk_index + 1}</span>
+                                                <span className={styles.chunkSize}>
+                                                    {formatFileSize(chunk.chunk_size)}
+                                                </span>
+                                            </div>
+                                            <div className={styles.chunkText}>
+                                                {chunk.chunk_text}
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    {loading && <div className={styles.loading}>로딩 중...</div>}
+                </div>
+            )}
+
+            {/* 컬렉션 생성 모달 */}
+            {showCreateModal && (
+                <div className={styles.modalBackdrop} onClick={() => setShowCreateModal(false)}>
+                    <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+                        <h3>새 컬렉션 생성</h3>
+                        <div className={styles.formGroup}>
+                            <label>컬렉션 이름 *</label>
+                            <input
+                                type="text"
+                                value={newCollectionName}
+                                onChange={(e) => setNewCollectionName(e.target.value)}
+                                placeholder="예: project_documents"
+                            />
+                        </div>
+                        <div className={styles.formGroup}>
+                            <label>설명 (선택사항)</label>
+                            <textarea
+                                value={newCollectionDescription}
+                                onChange={(e) => setNewCollectionDescription(e.target.value)}
+                                placeholder="컬렉션에 대한 간단한 설명을 입력하세요."
+                            />
+                        </div>
+                        <div className={styles.modalActions}>
+                            <button onClick={() => setShowCreateModal(false)} className={`${styles.button} ${styles.secondary}`}>취소</button>
+                            <button onClick={handleCreateCollection} className={`${styles.button} ${styles.primary}`}>생성</button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* 컬렉션 삭제 모달 */}
+            {showDeleteModal && collectionToDelete && (
+                <div className={styles.modalBackdrop} onClick={() => setShowDeleteModal(false)}>
+                    <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+                        <h3>컬렉션 삭제 확인</h3>
+                        <p>
+                            '<strong>{collectionToDelete.name}</strong>' 컬렉션을 정말로 삭제하시겠습니까?<br/>
+                            이 작업은 되돌릴 수 없으며, 컬렉션에 포함된 모든 문서가 삭제됩니다.
+                        </p>
+                        <div className={styles.modalActions}>
+                            <button 
+                                onClick={() => {
+                                    setShowDeleteModal(false);
+                                    setCollectionToDelete(null);
+                                }} 
+                                className={`${styles.button} ${styles.secondary}`}
+                            >
+                                취소
+                            </button>
+                            <button 
+                                onClick={handleConfirmDeleteCollection} 
+                                className={`${styles.button} ${styles.danger}`}
+                            >
+                                삭제
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* 문서 삭제 모달 */}
+            {showDeleteDocModal && documentToDelete && (
+                <div className={styles.modalBackdrop} onClick={() => setShowDeleteDocModal(false)}>
+                    <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+                        <h3>문서 삭제 확인</h3>
+                        <p>
+                            '<strong>{documentToDelete.file_name}</strong>' 문서를 정말로 삭제하시겠습니까?<br/>
+                            이 작업은 되돌릴 수 없으며, 문서의 모든 청크가 삭제됩니다.
+                        </p>
+                        <div className={styles.modalActions}>
+                            <button 
+                                onClick={() => {
+                                    setShowDeleteDocModal(false);
+                                    setDocumentToDelete(null);
+                                }} 
+                                className={`${styles.button} ${styles.secondary}`}
+                            >
+                                취소
+                            </button>
+                            <button 
+                                onClick={handleConfirmDeleteDocument} 
+                                className={`${styles.button} ${styles.danger}`}
+                            >
+                                삭제
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Documents;
diff --git a/src/app/main/components/MainPageContent.tsx b/src/app/main/components/MainPageContent.tsx
index a3942394..b66c7e83 100644
--- a/src/app/main/components/MainPageContent.tsx
+++ b/src/app/main/components/MainPageContent.tsx
@@ -12,6 +12,7 @@ import CurrentChatInterface from '@/app/chat/components/CurrentChatInterface';
 import { getSidebarItems } from '@/app/_common/components/sidebarConfig';
 import styles from '@/app/main/assets/MainPage.module.scss';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import Documents from '@/app/main/components/Documents';
 
 const MainPageContent: React.FC = () => {
     const searchParams = useSearchParams();
@@ -115,95 +116,102 @@ const MainPageContent: React.FC = () => {
     );
 
     const renderContent = () => {
-        switch (activeSection) {
-            case 'canvas':
-                return (
-                    <ContentArea
-                        title="워크플로우 캔버스"
-                        description="드래그 앤 드롭으로 AI 워크플로우를 직관적으로 구성하세요."
-                    >
-                        <CanvasIntroduction />
-                    </ContentArea>
-                );
-            case 'workflows':
-                return (
-                    <ContentArea
-                        title="완성된 워크플로우"
-                        description="저장된 워크플로우를 확인하고 관리하세요."
-                    >
-                        <CompletedWorkflows />
-                    </ContentArea>
-                );
-            case 'exec-monitor':
-                return (
-                    <ContentArea
-                        title="실행 및 모니터링"
-                        description={
-                            execTab === 'executor'
-                                ? '완성된 워크플로우를 실제 환경에서 실행하고 모니터링하세요.'
-                                : '워크플로우의 실행 성능과 리소스 사용량을 실시간으로 모니터링하세요.'
+    switch (activeSection) {
+        case 'canvas':
+            return (
+                <ContentArea
+                    title="워크플로우 캔버스"
+                    description="드래그 앤 드롭으로 AI 워크플로우를 직관적으로 구성하세요."
+                >
+                    <CanvasIntroduction />
+                </ContentArea>
+            );
+        case 'workflows':
+            return (
+                <ContentArea
+                    title="완성된 워크플로우"
+                    description="저장된 워크플로우를 확인하고 관리하세요."
+                >
+                    <CompletedWorkflows />
+                </ContentArea>
+            );
+        case 'exec-monitor':
+            return (
+                <ContentArea
+                    title="실행 및 모니터링"
+                    description={
+                        execTab === 'executor'
+                            ? '완성된 워크플로우를 실제 환경에서 실행하고 모니터링하세요.'
+                            : '워크플로우의 실행 성능과 리소스 사용량을 실시간으로 모니터링하세요.'
+                    }
+                    headerButtons={renderExecMonitorToggleButtons()}
+                >
+                    <Playground
+                        activeTab={execTab}
+                        onTabChange={handleTabChange}
+                    />
+                </ContentArea>
+            );
+        case 'settings':
+            return (
+                <ContentArea
+                    title="고급 환경 설정"
+                    description="백엔드 환경변수를 직접 편집하고 관리하세요. 모든 설정값을 세밀하게 제어할 수 있습니다."
+                >
+                    <Settings />
+                </ContentArea>
+            );
+        case 'config-viewer':
+            return (
+                <ContentArea
+                    title="설정값 확인"
+                    description="백엔드에서 관리되는 모든 환경변수와 설정값을 확인하세요."
+                >
+                    <ConfigViewer
+                        onNavigateToSettings={() =>
+                            setActiveSection('settings')
                         }
-                        headerButtons={renderExecMonitorToggleButtons()}
-                    >
-                        <Playground
-                            activeTab={execTab}
-                            onTabChange={handleTabChange}
-                        />
-                    </ContentArea>
-                );
-
-            case 'settings':
-                return (
-                    <ContentArea
-                        title="고급 환경 설정"
-                        description="백엔드 환경변수를 직접 편집하고 관리하세요. 모든 설정값을 세밀하게 제어할 수 있습니다."
-                    >
-                        <Settings />
-                    </ContentArea>
-                );
-            case 'config-viewer':
-                return (
-                    <ContentArea
-                        title="설정값 확인"
-                        description="백엔드에서 관리되는 모든 환경변수와 설정값을 확인하세요."
-                    >
-                        <ConfigViewer
-                            onNavigateToSettings={() =>
-                                setActiveSection('settings')
-                            }
-                        />
-                    </ContentArea>
-                );
-            case 'chat-history':
-                return (
-                    <ContentArea
-                        title="기존 채팅 불러오기"
-                        description="이전 대화 기록을 확인하고 계속 진행하세요."
-                    >
-                        <ChatHistory onSelectChat={handleChatSelect} />
-                    </ContentArea>
-                );
-            case 'current-chat':
-                return (
-                    <ContentArea
-                        title="현재 채팅"
-                        description="진행 중인 대화를 계속하세요."
-                    >
-                        <CurrentChatInterface />
-                    </ContentArea>
-                );
-            default:
-                return (
-                    <ContentArea
-                        title="워크플로우 캔버스"
-                        description="드래그 앤 드롭으로 AI 워크플로우를 직관적으로 구성하세요."
-                    >
-                        <CanvasIntroduction />
-                    </ContentArea>
-                );
+                    />
+                </ContentArea>
+            );
+        case 'documents':
+            return (
+                <ContentArea
+                    title="문서"
+                    description="문서 저장소"
+                >
+                    <Documents />
+                </ContentArea>
+            );
+        case 'chat-history':
+            return (
+                <ContentArea
+                    title="기존 채팅 불러오기"
+                    description="이전 대화 기록을 확인하고 계속 진행하세요."
+                >
+                    <ChatHistory onSelectChat={handleChatSelect} />
+                </ContentArea>
+            );
+        case 'current-chat':
+            return (
+                <ContentArea
+                    title="현재 채팅"
+                    description="진행 중인 대화를 계속하세요."
+                >
+                    <CurrentChatInterface />
+                </ContentArea>
+            );
+        default:
+            return (
+                <ContentArea
+                    title="워크플로우 캔버스"
+                    description="드래그 앤 드롭으로 AI 워크플로우를 직관적으로 구성하세요."
+                >
+                    <CanvasIntroduction />
+                </ContentArea>
+            );
         }
     };
-
     return (
         <div className={styles.container}>
             <Sidebar
diff --git a/src/app/main/components/Settings.tsx b/src/app/main/components/Settings.tsx
index 313a33ef..fe62c3bb 100644
--- a/src/app/main/components/Settings.tsx
+++ b/src/app/main/components/Settings.tsx
@@ -7,6 +7,7 @@ import {
     FiArrowLeft,
     FiDatabase,
 } from 'react-icons/fi';
+import { BsDatabaseUp } from 'react-icons/bs';
 import { SiOpenai } from 'react-icons/si';
 import { BsGear } from 'react-icons/bs'; // Workflow 아이콘으로 사용
 import {
@@ -20,6 +21,7 @@ import styles from '@/app/main/assets/Settings.module.scss';
 import OpenAIConfig from '@/app/main/components/config/openAIConfig';
 import WorkflowConfig from '@/app/main/components/config/workflowConfig';
 import DatabaseConfig from '@/app/main/components/config/databaseConfig';
+import VectordbConfig from '@/app/main/components/config/vectordbConfig';
 
 interface ConfigItem {
     env_name: string;
@@ -135,6 +137,14 @@ const Settings: React.FC = () => {
             color: '#059669',
             status: 'connected',
         },
+        {
+            id: 'vectordb',
+            name: '벡터 데이터베이스',
+            description: '벡터 데이터베이스 연결 설정',
+            icon: <BsDatabaseUp />,
+            color: '#023196',
+            status: 'connected',
+        },
     ];
 
     const handleCategoryClick = (categoryId: string) => {
@@ -207,6 +217,15 @@ const Settings: React.FC = () => {
         );
     };
 
+    const renderVectorDBConfig = () => {
+        return (
+            <VectordbConfig
+                configData={configData}
+                onTestConnection={handleTestConnection}
+            />
+        );
+    };
+
     const renderConfigForm = (categoryId: string) => {
         switch (categoryId) {
             case 'openai':
@@ -215,6 +234,8 @@ const Settings: React.FC = () => {
                 return renderWorkflowConfig();
             case 'database':
                 return renderDatabaseConfig();
+            case 'vectordb':
+                return renderVectorDBConfig();
             default:
                 return <p>설정 폼을 준비 중입니다.</p>;
         }
diff --git a/src/app/main/components/config/vectordbConfig.tsx b/src/app/main/components/config/vectordbConfig.tsx
new file mode 100644
index 00000000..46364ed1
--- /dev/null
+++ b/src/app/main/components/config/vectordbConfig.tsx
@@ -0,0 +1,523 @@
+import React, { useState, useEffect } from 'react';
+import { FiRefreshCw, FiCheck, FiX, FiAlertCircle, FiPlay, FiSettings, FiServer, FiDatabase } from 'react-icons/fi';
+import { SiOpenai, SiHuggingface } from 'react-icons/si';
+import { BsRobot } from 'react-icons/bs';
+import BaseConfigPanel, { ConfigItem, FieldConfig } from './BaseConfigPanel';
+import { 
+    getEmbeddingProviders, 
+    getEmbeddingStatus, 
+    switchEmbeddingProvider, 
+    autoSwitchEmbeddingProvider,
+    testEmbeddingQuery,
+    reloadEmbeddingClient,
+    getEmbeddingConfigStatus,
+    getEmbeddingDebugInfo,
+    getCurrentEmbeddingDimension
+} from '@/app/api/ragAPI';
+import styles from '../../assets/Settings.module.scss';
+
+interface VectordbConfigProps {
+    configData?: ConfigItem[];
+    onTestConnection?: (category: string) => void;
+}
+
+interface EmbeddingProvider {
+    name: string;
+    displayName: string;
+    icon: React.ReactNode;
+    color: string;
+    description: string;
+}
+
+interface EmbeddingStatus {
+    status: string;
+    provider_info?: any;
+    available: boolean;
+}
+
+interface ProviderConfig {
+    provider: string;
+    available: boolean;
+    configured: boolean;
+    status: string;
+    error?: string;
+}
+
+// Qdrant 벡터 데이터베이스 관련 설정 필드
+const VECTORDATABASE_CONFIG_FIELDS: Record<string, FieldConfig> = {
+    QDRANT_HOST: {
+        label: 'Qdrant 호스트',
+        type: 'text',
+        placeholder: 'localhost',
+        description: 'Qdrant 서버의 호스트 주소를 입력하세요.',
+        required: true,
+    },
+    QDRANT_PORT: {
+        label: 'Qdrant 포트',
+        type: 'number',
+        min: 1,
+        max: 65535,
+        placeholder: '6333',
+        description: 'Qdrant 서버의 포트 번호를 입력하세요. (기본값: 6333)',
+        required: true,
+    },
+    QDRANT_API_KEY: {
+        label: 'Qdrant API 키',
+        type: 'password',
+        placeholder: '선택사항 - 로컬 환경에서는 비워두세요',
+        description: 'Qdrant 클라우드 서비스 사용 시 API 키를 입력하세요.',
+        required: false,
+    },
+    QDRANT_USE_GRPC: {
+        label: 'gRPC 사용',
+        type: 'boolean',
+        description: 'Qdrant와의 통신에 gRPC 프로토콜을 사용할지 설정합니다.',
+        required: false,
+    },
+    QDRANT_GRPC_PORT: {
+        label: 'gRPC 포트',
+        type: 'number',
+        min: 1,
+        max: 65535,
+        placeholder: '6334',
+        description: 'gRPC 통신을 위한 포트 번호를 입력하세요. (기본값: 6334)',
+        required: false,
+    },
+};
+
+// 임베딩 관련 설정 필드
+const EMBEDDING_CONFIG_FIELDS: Record<string, FieldConfig> = {
+    EMBEDDING_PROVIDER: {
+        label: '임베딩 제공자',
+        type: 'select',
+        options: [
+            { value: 'openai', label: 'OpenAI' },
+            { value: 'huggingface', label: 'HuggingFace' },
+            { value: 'custom_http', label: 'VLLM Server' }
+        ],
+        description: '사용할 임베딩 제공자를 선택하세요.',
+        required: true,
+    },
+    OPENAI_API_KEY: {
+        label: 'OpenAI API 키',
+        type: 'password',
+        placeholder: 'sk-...',
+        description: 'OpenAI API 키를 입력하세요.',
+        required: false,
+    },
+    OPENAI_EMBEDDING_MODEL: {
+        label: 'OpenAI 임베딩 모델',
+        type: 'select',
+        options: [
+            { value: 'text-embedding-3-small', label: 'text-embedding-3-small' },
+            { value: 'text-embedding-3-large', label: 'text-embedding-3-large' },
+            { value: 'text-embedding-ada-002', label: 'text-embedding-ada-002' }
+        ],
+        description: '사용할 OpenAI 임베딩 모델을 선택하세요. 벡터 차원은 자동으로 설정됩니다.',
+        required: false,
+    },
+    HUGGINGFACE_MODEL_NAME: {
+        label: 'HuggingFace 모델명',
+        type: 'text',
+        placeholder: 'sentence-transformers/all-MiniLM-L6-v2',
+        description: 'HuggingFace 모델명을 입력하세요.',
+        required: false,
+    },
+    HUGGINGFACE_API_KEY: {
+        label: 'HuggingFace API 키',
+        type: 'password',
+        placeholder: '선택사항',
+        description: 'HuggingFace Hub API 키 (선택사항)',
+        required: false,
+    },
+    CUSTOM_EMBEDDING_URL: {
+        label: 'VLLM 서버 URL',
+        type: 'text',
+        placeholder: 'http://localhost:8000/v1',
+        description: 'VLLM 서버의 API 엔드포인트를 입력하세요.',
+        required: false,
+    },
+    CUSTOM_EMBEDDING_API_KEY: {
+        label: 'VLLM API 키',
+        type: 'password',
+        placeholder: '선택사항',
+        description: 'VLLM 서버 API 키 (선택사항)',
+        required: false,
+    },
+    CUSTOM_EMBEDDING_MODEL: {
+        label: 'VLLM 모델명',
+        type: 'text',
+        placeholder: 'text-embedding-ada-002',
+        description: 'VLLM 서버에서 사용하는 모델명을 입력하세요.',
+        required: false,
+    },
+};
+
+const EMBEDDING_PROVIDERS: EmbeddingProvider[] = [
+    {
+        name: 'openai',
+        displayName: 'OpenAI',
+        icon: <SiOpenai />,
+        color: '#10a37f',
+        description: 'OpenAI의 고품질 임베딩 모델 (text-embedding-3-small/large)'
+    },
+    {
+        name: 'huggingface',
+        displayName: 'HuggingFace',
+        icon: <SiHuggingface />,
+        color: '#ff6b35',
+        description: '오픈소스 Sentence Transformers 모델'
+    },
+    {
+        name: 'custom_http',
+        displayName: 'VLLM Server',
+        icon: <BsRobot />,
+        color: '#6366f1',
+        description: '커스텀 VLLM 서버 (self-hosted)'
+    }
+];
+
+const VectordbConfig: React.FC<VectordbConfigProps> = ({
+    configData = [],
+    onTestConnection,
+}) => {
+    const [activeTab, setActiveTab] = useState<'embedding' | 'database'>('embedding');
+    const [embeddingStatus, setEmbeddingStatus] = useState<EmbeddingStatus | null>(null);
+    const [currentProvider, setCurrentProvider] = useState<string>('');
+    const [providersStatus, setProvidersStatus] = useState<ProviderConfig[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [switching, setSwitching] = useState(false);
+    const [optimizing, setOptimizing] = useState(false);
+    const [testing, setTesting] = useState(false);
+    const [reloading, setReloading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [dimensionInfo, setDimensionInfo] = useState<any>(null);
+
+    // 초기 데이터 로드
+    useEffect(() => {
+        loadEmbeddingStatus();
+    }, []);
+
+    const loadEmbeddingStatus = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [status, configStatus, dimensionData] = await Promise.all([
+                getEmbeddingStatus(),
+                getEmbeddingConfigStatus(),
+                getCurrentEmbeddingDimension()
+            ]);
+            
+            setEmbeddingStatus(status as EmbeddingStatus);
+            setCurrentProvider((configStatus as any).current_provider || '');
+            setDimensionInfo(dimensionData);
+            
+            // 제공자별 상태 정보 구성
+            const providerStatuses = EMBEDDING_PROVIDERS.map(provider => ({
+                provider: provider.name,
+                available: (configStatus as any)[provider.name]?.available || false,
+                configured: (configStatus as any)[provider.name]?.configured || false,
+                status: (configStatus as any)[provider.name]?.status || 'unknown',
+                error: (configStatus as any)[provider.name]?.error
+            }));
+            
+            setProvidersStatus(providerStatuses);
+        } catch (err) {
+            setError('임베딩 상태를 불러오는데 실패했습니다.');
+            console.error('Failed to load embedding status:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleProviderSwitch = async (providerName: string) => {
+        setSwitching(true);
+        setError(null);
+        try {
+            const result = await switchEmbeddingProvider(providerName) as any;
+            if (result.success) {
+                setCurrentProvider(providerName);
+                await loadEmbeddingStatus(); // 이 함수가 dimensionInfo도 업데이트함
+            } else {
+                setError(result.message || '제공자 변경에 실패했습니다.');
+            }
+        } catch (err) {
+            setError('제공자 변경 중 오류가 발생했습니다.');
+            console.error('Failed to switch provider:', err);
+        } finally {
+            setSwitching(false);
+        }
+    };
+
+    const handleAutoSwitch = async () => {
+        setOptimizing(true);
+        setError(null);
+        try {
+            const result = await autoSwitchEmbeddingProvider() as any;
+            if (result.switched) {
+                setCurrentProvider(result.new_provider);
+                await loadEmbeddingStatus(); // 이 함수가 dimensionInfo도 업데이트함
+            }
+        } catch (err) {
+            setError('자동 전환 중 오류가 발생했습니다.');
+            console.error('Failed to auto switch:', err);
+        } finally {
+            setOptimizing(false);
+        }
+    };
+
+    const handleTestEmbedding = async () => {
+        setTesting(true);
+        setError(null);
+        try {
+            const result = await testEmbeddingQuery("Hello, world!") as any;
+            alert(`임베딩 테스트 성공!\n차원: ${result.embedding_dimension}\n제공자: ${result.provider}`);
+        } catch (err) {
+            setError('임베딩 테스트에 실패했습니다.');
+            console.error('Failed to test embedding:', err);
+        } finally {
+            setTesting(false);
+        }
+    };
+
+    const handleReloadClient = async () => {
+        setReloading(true);
+        setError(null);
+        try {
+            const result = await reloadEmbeddingClient() as any;
+            if (result.success) {
+                await loadEmbeddingStatus(); // 이 함수가 dimensionInfo도 업데이트함
+            } else {
+                setError('클라이언트 재로드에 실패했습니다.');
+            }
+        } catch (err) {
+            setError('클라이언트 재로드 중 오류가 발생했습니다.');
+            console.error('Failed to reload client:', err);
+        } finally {
+            setReloading(false);
+        }
+    };
+
+    const getProviderIcon = (providerName: string) => {
+        const provider = EMBEDDING_PROVIDERS.find(p => p.name === providerName);
+        return provider ? provider.icon : <FiSettings />;
+    };
+
+    const getProviderColor = (providerName: string) => {
+        const provider = EMBEDDING_PROVIDERS.find(p => p.name === providerName);
+        return provider ? provider.color : '#6b7280';
+    };
+
+    const getStatusIcon = (available: boolean, configured: boolean) => {
+        if (available && configured) return <FiCheck className={styles.statusConnected} />;
+        if (configured) return <FiAlertCircle className={styles.statusWarning} />;
+        return <FiX className={styles.statusError} />;
+    };
+
+    const getStatusText = (available: boolean, configured: boolean) => {
+        if (available && configured) return '사용 가능';
+        if (configured) return '설정됨';
+        return '설정 필요';
+    };
+
+    const renderEmbeddingTab = () => (
+        <div className={styles.embeddingConfig}>
+            {/* 현재 상태 */}
+            <div className={styles.statusSection}>
+                <div className={styles.sectionHeader}>
+                    <h3>현재 임베딩 설정</h3>
+                    <div className={styles.headerActions}>
+                        <button
+                            onClick={loadEmbeddingStatus}
+                            className={`${styles.button} ${styles.secondary} ${styles.small}`}
+                            disabled={loading}
+                        >
+                            <FiRefreshCw className={loading ? styles.spinning : ''} />
+                            새로고침
+                        </button>
+                        <button
+                            onClick={handleReloadClient}
+                            className={`${styles.button} ${styles.secondary} ${styles.small}`}
+                            disabled={reloading}
+                        >
+                            <FiSettings className={reloading ? styles.spinning : ''} />
+                            {reloading ? '재로드 중...' : '클라이언트 재로드'}
+                        </button>
+                    </div>
+                </div>
+
+                {embeddingStatus && (
+                    <div className={styles.currentStatus}>
+                        <div className={styles.statusCard}>
+                            <div className={styles.statusInfo}>
+                                <div className={styles.providerInfo}>
+                                    <span 
+                                        className={styles.providerIcon}
+                                        style={{ color: getProviderColor(currentProvider) }}
+                                    >
+                                        {getProviderIcon(currentProvider)}
+                                    </span>
+                                    <div>
+                                        <h4>
+                                            {EMBEDDING_PROVIDERS.find(p => p.name === currentProvider)?.displayName || currentProvider}
+                                        </h4>
+                                        <p>현재 활성 제공자</p>
+                                        {dimensionInfo && (
+                                            <p className={styles.dimensionInfo}>
+                                                모델: {dimensionInfo.model}
+                                                {dimensionInfo.auto_detected && <span className={styles.autoDetected}> (자동 감지)</span>}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className={styles.statusIndicator}>
+                                    {getStatusIcon(embeddingStatus.available, true)}
+                                    <span>{embeddingStatus.available ? '정상 작동' : '연결 오류'}</span>
+                                </div>
+                            </div>
+                            
+                            <div className={styles.statusActions}>
+                                <button
+                                    onClick={handleTestEmbedding}
+                                    className={`${styles.button} ${styles.primary} ${styles.small}`}
+                                    disabled={testing || !embeddingStatus.available}
+                                >
+                                    <FiPlay />
+                                    {testing ? '테스트 중...' : '임베딩 테스트'}
+                                </button>
+                                <button
+                                    onClick={handleAutoSwitch}
+                                    className={`${styles.button} ${styles.secondary} ${styles.small}`}
+                                    disabled={optimizing || switching}
+                                >
+                                    <FiRefreshCw className={optimizing ? styles.spinning : ''} />
+                                    {optimizing ? '최적화 중...' : '자동 최적화'}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* 제공자 선택 */}
+            <div className={styles.providersSection}>
+                <h3>임베딩 제공자 선택</h3>
+                <div className={styles.providersGrid}>
+                    {EMBEDDING_PROVIDERS.map((provider) => {
+                        const providerStatus = providersStatus.find(p => p.provider === provider.name);
+                        const isActive = currentProvider === provider.name;
+                        
+                        return (
+                            <div
+                                key={provider.name}
+                                className={`${styles.providerCard} ${isActive ? styles.active : ''}`}
+                                onClick={() => !switching && handleProviderSwitch(provider.name)}
+                            >
+                                <div className={styles.providerHeader}>
+                                    <div 
+                                        className={styles.providerIcon}
+                                        style={{ color: provider.color }}
+                                    >
+                                        {provider.icon}
+                                    </div>
+                                    <div className={styles.providerInfo}>
+                                        <h4>{provider.displayName}</h4>
+                                        <p>{provider.description}</p>
+                                    </div>
+                                    <div className={styles.providerStatus}>
+                                        {providerStatus && getStatusIcon(providerStatus.available, providerStatus.configured)}
+                                        {isActive && <span className={styles.activeBadge}>활성</span>}
+                                    </div>
+                                </div>
+                                
+                                {providerStatus && (
+                                    <div className={styles.providerDetails}>
+                                        <span className={styles.statusText}>
+                                            {getStatusText(providerStatus.available, providerStatus.configured)}
+                                        </span>
+                                        {providerStatus.error && (
+                                            <span className={styles.errorText}>
+                                                {providerStatus.error}
+                                            </span>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* 상세 설정 */}
+            <div className={styles.configSection}>
+                <h3>임베딩 상세 설정</h3>
+                <BaseConfigPanel
+                    configData={configData}
+                    fieldConfigs={EMBEDDING_CONFIG_FIELDS}
+                    filterPrefix="vectordb"
+                    onTestConnection={onTestConnection}
+                    testConnectionLabel="임베딩 연결 테스트"
+                    testConnectionCategory="embedding"
+                />
+            </div>
+        </div>
+    );
+
+    const renderDatabaseTab = () => (
+        <div className={styles.databaseConfig}>
+            <div className={styles.sectionHeader}>
+                <h3>벡터 데이터베이스 설정</h3>
+                <p>Qdrant 벡터 데이터베이스 연결을 설정합니다.</p>
+            </div>
+            
+            <BaseConfigPanel
+                configData={configData}
+                fieldConfigs={VECTORDATABASE_CONFIG_FIELDS}
+                filterPrefix="vectordb"
+                onTestConnection={onTestConnection}
+                testConnectionLabel="벡터 데이터베이스 연결 테스트"
+                testConnectionCategory="vectordb"
+            />
+        </div>
+    );
+
+    return (
+        <div className={styles.vectordbContainer}>
+            {/* 탭 네비게이션 */}
+            <div className={styles.tabNavigation}>
+                <button
+                    className={`${styles.tabButton} ${activeTab === 'embedding' ? styles.active : ''}`}
+                    onClick={() => setActiveTab('embedding')}
+                >
+                    <FiServer />
+                    임베딩 모델
+                </button>
+                <button
+                    className={`${styles.tabButton} ${activeTab === 'database' ? styles.active : ''}`}
+                    onClick={() => setActiveTab('database')}
+                >
+                    <FiDatabase />
+                    벡터 데이터베이스
+                </button>
+            </div>
+
+            {/* 에러 표시 */}
+            {error && (
+                <div className={styles.errorBanner}>
+                    <FiAlertCircle />
+                    <span>{error}</span>
+                    <button onClick={() => setError(null)}>
+                        <FiX />
+                    </button>
+                </div>
+            )}
+
+            {/* 탭 콘텐츠 */}
+            <div className={styles.tabContent}>
+                {activeTab === 'embedding' ? renderEmbeddingTab() : renderDatabaseTab()}
+            </div>
+        </div>
+    );
+};
+
+export default VectordbConfig;