diff --git a/frontend/src/pages/clients/ClientBulkAddModal.css b/frontend/src/pages/clients/ClientBulkAddModal.css
index e49ef577..8d563dbb 100644
--- a/frontend/src/pages/clients/ClientBulkAddModal.css
+++ b/frontend/src/pages/clients/ClientBulkAddModal.css
@@ -1,5 +1,5 @@
 .random-icon {
   margin-left: 4px;
   cursor: pointer;
-  color: var(--ant-color-primary, #1677ff);
+  color: var(--ant-color-primary);
 }
diff --git a/frontend/src/pages/clients/ClientsPage.css b/frontend/src/pages/clients/ClientsPage.css
index cfc6c68e..15639d2f 100644
--- a/frontend/src/pages/clients/ClientsPage.css
+++ b/frontend/src/pages/clients/ClientsPage.css
@@ -92,11 +92,11 @@
   vertical-align: middle;
 }
 
-.dot-green { background: #52c41a; }
-.dot-blue { background: #1677ff; }
-.dot-red { background: #ff4d4f; }
-.dot-orange { background: #fa8c16; }
-.dot-gray { background: rgba(128, 128, 128, 0.6); }
+.dot-green { background: var(--ant-color-success); }
+.dot-blue { background: var(--ant-color-primary); }
+.dot-red { background: var(--ant-color-error); }
+.dot-orange { background: var(--ant-color-warning); }
+.dot-gray { background: var(--ant-color-text-quaternary); }
 
 .status-tag {
   margin: 0 0 0 4px;
@@ -159,27 +159,22 @@
 
 .bulk-count {
   font-size: 12px;
-  background: rgba(22, 119, 255, 0.12);
-  color: var(--ant-color-primary, #1677ff);
+  background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
+  color: var(--ant-color-primary);
   padding: 1px 8px;
   border-radius: 10px;
 }
 
 .client-card {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 10px;
   padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--ant-color-fill-quaternary);
 }
 
 .client-card.is-selected {
-  border-color: var(--ant-color-primary, #1677ff);
-  background: rgba(22, 119, 255, 0.06);
-}
-
-.clients-page.is-dark .client-card {
-  background: rgba(255, 255, 255, 0.03);
-  border-color: rgba(255, 255, 255, 0.1);
+  border-color: var(--ant-color-primary);
+  background: color-mix(in srgb, var(--ant-color-primary) 6%, transparent);
 }
 
 .card-head {
diff --git a/frontend/src/pages/inbounds/InboundFormModal.css b/frontend/src/pages/inbounds/InboundFormModal.css
index 6a0e1cd2..cb94c0b2 100644
--- a/frontend/src/pages/inbounds/InboundFormModal.css
+++ b/frontend/src/pages/inbounds/InboundFormModal.css
@@ -8,13 +8,13 @@
 .random-icon {
   margin-left: 4px;
   cursor: pointer;
-  color: var(--ant-color-primary, #1890ff);
+  color: var(--ant-color-primary);
 }
 
 .danger-icon {
   margin-left: 6px;
   cursor: pointer;
-  color: #ff4d4f;
+  color: var(--ant-color-error);
 }
 
 .vless-auth-state {
diff --git a/frontend/src/pages/index/IndexPage.css b/frontend/src/pages/index/IndexPage.css
index f6d72e39..c1892613 100644
--- a/frontend/src/pages/index/IndexPage.css
+++ b/frontend/src/pages/index/IndexPage.css
@@ -55,12 +55,12 @@
 }
 
 .index-page .action-update {
-  color: #fa8c16;
+  color: var(--ant-color-warning);
   font-weight: 600;
 }
 
 .index-page .action-update .anticon {
-  color: #fa8c16;
+  color: var(--ant-color-warning);
 }
 
 .index-page .history-tag {
diff --git a/frontend/src/pages/index/XrayMetricsModal.css b/frontend/src/pages/index/XrayMetricsModal.css
index 8b95c8da..5b76ef77 100644
--- a/frontend/src/pages/index/XrayMetricsModal.css
+++ b/frontend/src/pages/index/XrayMetricsModal.css
@@ -40,23 +40,23 @@
   border-radius: 50%;
   margin-right: 6px;
   vertical-align: middle;
-  box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.18);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 18%, transparent);
 }
 
 .obs-dot.is-alive {
-  background: #52c41a;
-  box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.22);
+  background: var(--ant-color-success);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 22%, transparent);
   animation: obs-dot-pulse 2.2s ease-in-out infinite;
 }
 
 .obs-dot.is-dead {
-  background: #f5222d;
-  box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.22);
+  background: var(--ant-color-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-error) 22%, transparent);
 }
 
 @keyframes obs-dot-pulse {
-  0%, 100% { box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.22); }
-  50% { box-shadow: 0 0 0 6px rgba(82, 196, 26, 0.06); }
+  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 22%, transparent); }
+  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ant-color-success) 6%, transparent); }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/frontend/src/pages/xray/OutboundsTab.css b/frontend/src/pages/xray/OutboundsTab.css
index 0773bd6f..20cf2633 100644
--- a/frontend/src/pages/xray/OutboundsTab.css
+++ b/frontend/src/pages/xray/OutboundsTab.css
@@ -10,7 +10,7 @@
 }
 
 .outbound-card {
-  border: 1px solid rgba(128, 128, 128, 0.2);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 8px;
@@ -65,11 +65,7 @@
   font-size: 11px;
   padding: 2px 6px;
   border-radius: 4px;
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.xray-page.is-dark .address-pill {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--ant-color-fill-tertiary);
 }
 
 .action-cell {
@@ -181,8 +177,8 @@
   font-weight: 500;
   padding: 0 6px;
   border-radius: 8px;
-  background: rgba(22, 119, 255, 0.12);
-  color: #1677ff;
+  background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
+  color: var(--ant-color-primary);
   margin-left: auto;
 }