diff --git a/web/src/components/AttachmentInputPanel.vue b/web/src/components/AttachmentInputPanel.vue
index 57d87176..16c0b2d1 100644
--- a/web/src/components/AttachmentInputPanel.vue
+++ b/web/src/components/AttachmentInputPanel.vue
@@ -150,11 +150,11 @@ const handleFileChange = (event) => {
 }
 
 .chip-status.status-parsed {
-  color: var(--green-600, #1a7f37);
+  color: var(--color-success-600);
 }
 
 .chip-status.status-failed {
-  color: var(--red-600, #c62828);
+  color: var(--color-error-600);
 }
 
 .chip-remove {
diff --git a/web/src/components/DebugComponent.vue b/web/src/components/DebugComponent.vue
index b418525c..aa120ab5 100644
--- a/web/src/components/DebugComponent.vue
+++ b/web/src/components/DebugComponent.vue
@@ -555,8 +555,8 @@ const printAgentConfig = async () => {
 .log-container {
   height: calc(80vh - 200px);
   overflow-y: auto;
-  background: #0C0C0C;
-  color: #D1D1D1;
+  background: var(--gray-900);
+  color: var(--gray-0);
   border-radius: 5px;
   font-family: 'Consolas', 'Monaco', monospace;
   font-size: 13px;
@@ -578,7 +578,7 @@ const printAgentConfig = async () => {
 }
 
 .timestamp {
-  color: #6A9955;
+  color: var(--color-success-500);
   min-width: 80px;
 }
 
@@ -588,7 +588,7 @@ const printAgentConfig = async () => {
 }
 
 .module {
-  color: #569CD6;
+  color: var(--color-info-500);
   min-width: 30px;
 }
 
@@ -599,19 +599,19 @@ const printAgentConfig = async () => {
 }
 
 .level-info {
-  .level { color: #4EC9B0; }
+  .level { color: var(--color-success-500); }
 }
 
 .level-error {
-  .level { color: #F14C4C; }
+  .level { color: var(--color-error-500); }
 }
 
 .level-debug {
-  .level { color: #9CDCFE; }
+  .level { color: var(--color-info-500); }
 }
 
 .level-warning {
-  .level { color: #DCD900; }
+  .level { color: var(--color-warning-500); }
 }
 
 .empty-logs {
@@ -622,7 +622,7 @@ const printAgentConfig = async () => {
 
 @media (prefers-color-scheme: dark) {
   .log-container {
-    background: #1E1E1E;
+    background: var(--gray-900);
   }
 }
 
diff --git a/web/src/components/FileUploadModal.vue b/web/src/components/FileUploadModal.vue
index 11656af8..71ca1511 100644
--- a/web/src/components/FileUploadModal.vue
+++ b/web/src/components/FileUploadModal.vue
@@ -836,11 +836,11 @@ const chunkData = async () => {
 }
 
 .ocr-warning {
-  color: #faad14;
+  color: var(--color-warning-500);
 }
 
 .ocr-healthy {
-  color: #52c41a;
+  color: var(--color-success-500);
 }
 
 .upload-dragger {
@@ -861,19 +861,19 @@ const chunkData = async () => {
 .ocr-warning-alert {
   margin: 12px 0;
   padding: 8px 12px;
-  background: #fff7e6;
-  border: 1px solid #ffd666;
+  background: var(--color-warning-50);
+  border: 1px solid var(--color-warning-300);
   border-radius: 4px;
-  color: #d46b08;
+  color: var(--color-warning-700);
   font-size: 13px;
 }
 
 .folder-upload-tip {
   margin-top: 12px;
   padding: 12px;
-  background: #f0f7ff;
+  background: var(--color-info-50);
   border-radius: 4px;
-  color: var(--gray-500);
+  color: var(--color-info-700);
   font-size: 12px;
 }
 
@@ -917,7 +917,7 @@ const chunkData = async () => {
   justify-content: space-between;
   align-items: center;
   padding: 8px 12px;
-  background: #fff;
+  background: var(--gray-0);
   border: 1px solid var(--gray-300);
   border-radius: 6px;
 }
diff --git a/web/src/components/LoadingComponent.vue b/web/src/components/LoadingComponent.vue
index 617de90c..444a27ac 100644
--- a/web/src/components/LoadingComponent.vue
+++ b/web/src/components/LoadingComponent.vue
@@ -45,7 +45,7 @@ const props = defineProps({
 .loading-spinner {
   width: 50px;
   height: 50px;
-  border: 5px solid #f3f3f3;
+  border: 5px solid var(--gray-300);
   border-top: 5px solid var(--main-color);
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -61,4 +61,4 @@ const props = defineProps({
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file