diff --git a/frontend/src/pages/inbounds/InboundList.css b/frontend/src/pages/inbounds/InboundList.css
index 2a9f28ba..59684579 100644
--- a/frontend/src/pages/inbounds/InboundList.css
+++ b/frontend/src/pages/inbounds/InboundList.css
@@ -32,29 +32,29 @@
   font-size: 12px;
 }
 
-.ant-table {
+.inbounds-page .ant-table {
   border-radius: 8px;
   overflow: hidden;
 }
 
-.ant-table-container {
+.inbounds-page .ant-table-container {
   border-radius: 8px;
   overflow: hidden;
 }
 
-.ant-table-thead > tr:first-child > *:first-child {
+.inbounds-page .ant-table-thead > tr:first-child > *:first-child {
   border-start-start-radius: 8px;
 }
 
-.ant-table-thead > tr:first-child > *:last-child {
+.inbounds-page .ant-table-thead > tr:first-child > *:last-child {
   border-start-end-radius: 8px;
 }
 
-.ant-table-tbody > tr:last-child > *:first-child {
+.inbounds-page .ant-table-tbody > tr:last-child > *:first-child {
   border-end-start-radius: 8px;
 }
 
-.ant-table-tbody > tr:last-child > *:last-child {
+.inbounds-page .ant-table-tbody > tr:last-child > *:last-child {
   border-end-end-radius: 8px;
 }
 
@@ -75,7 +75,7 @@
   gap: 8px;
 }
 
-body.dark .inbound-card {
+.inbounds-page.is-dark .inbound-card {
   background: rgba(255, 255, 255, 0.03);
   border-color: rgba(255, 255, 255, 0.1);
 }
@@ -142,21 +142,21 @@ body.dark .inbound-card {
 }
 
 @media (max-width: 768px) {
-  .ant-card-head {
+  .inbounds-page .ant-card-head {
     padding: 0 12px;
     min-height: 44px;
   }
 
-  .ant-card-head-title,
-  .ant-card-extra {
+  .inbounds-page .ant-card-head-title,
+  .inbounds-page .ant-card-extra {
     padding: 8px 0;
   }
 
-  .ant-card-body {
+  .inbounds-page .ant-card-body {
     padding: 8px;
   }
 
-  .row-action-trigger {
+  .inbounds-page .row-action-trigger {
     font-size: 22px;
     padding: 4px;
   }
diff --git a/frontend/src/pages/index/BackupModal.css b/frontend/src/pages/index/BackupModal.css
index e5d8147b..838aa85d 100644
--- a/frontend/src/pages/index/BackupModal.css
+++ b/frontend/src/pages/index/BackupModal.css
@@ -1,32 +1,22 @@
 .backup-list {
   width: 100%;
-  border: 1px solid rgba(5, 5, 5, 0.06);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   overflow: hidden;
 }
 
-body.dark .backup-list,
-html[data-theme='ultra-dark'] .backup-list {
-  border-color: rgba(255, 255, 255, 0.12);
-}
-
 .backup-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 12px 24px;
-  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
 }
 
 .backup-item:last-child {
   border-bottom: 0;
 }
 
-body.dark .backup-item,
-html[data-theme='ultra-dark'] .backup-item {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}
-
 .backup-meta {
   flex: 1;
   display: flex;
@@ -37,21 +27,11 @@ html[data-theme='ultra-dark'] .backup-item {
 .backup-title {
   font-size: 14px;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--ant-color-text);
 }
 
 .backup-description {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--ant-color-text-tertiary);
   line-height: 1.5715;
 }
-
-body.dark .backup-title,
-html[data-theme='ultra-dark'] .backup-title {
-  color: rgba(255, 255, 255, 0.85);
-}
-
-body.dark .backup-description,
-html[data-theme='ultra-dark'] .backup-description {
-  color: rgba(255, 255, 255, 0.45);
-}
diff --git a/frontend/src/pages/index/PanelUpdateModal.css b/frontend/src/pages/index/PanelUpdateModal.css
index 4c676c74..cdcc2fa1 100644
--- a/frontend/src/pages/index/PanelUpdateModal.css
+++ b/frontend/src/pages/index/PanelUpdateModal.css
@@ -4,33 +4,23 @@
 
 .version-list {
   width: 100%;
-  border: 1px solid rgba(5, 5, 5, 0.06);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   overflow: hidden;
 }
 
-body.dark .version-list,
-html[data-theme='ultra-dark'] .version-list {
-  border-color: rgba(255, 255, 255, 0.12);
-}
-
 .version-list-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 24px;
-  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
 }
 
 .version-list-item:last-child {
   border-bottom: 0;
 }
 
-body.dark .version-list-item,
-html[data-theme='ultra-dark'] .version-list-item {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}
-
 .actions-row {
   display: flex;
   justify-content: flex-end;
diff --git a/frontend/src/pages/index/VersionModal.css b/frontend/src/pages/index/VersionModal.css
index f3e73d64..66870e9d 100644
--- a/frontend/src/pages/index/VersionModal.css
+++ b/frontend/src/pages/index/VersionModal.css
@@ -4,33 +4,23 @@
 
 .version-list {
   width: 100%;
-  border: 1px solid rgba(5, 5, 5, 0.06);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   overflow: hidden;
 }
 
-body.dark .version-list,
-html[data-theme='ultra-dark'] .version-list {
-  border-color: rgba(255, 255, 255, 0.12);
-}
-
 .version-list-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 24px;
-  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
 }
 
 .version-list-item:last-child {
   border-bottom: 0;
 }
 
-body.dark .version-list-item,
-html[data-theme='ultra-dark'] .version-list-item {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}
-
 .reload-icon {
   cursor: pointer;
   font-size: 16px;
diff --git a/frontend/src/pages/nodes/NodeList.css b/frontend/src/pages/nodes/NodeList.css
index c6d7f4ca..43754c43 100644
--- a/frontend/src/pages/nodes/NodeList.css
+++ b/frontend/src/pages/nodes/NodeList.css
@@ -61,7 +61,7 @@
   gap: 8px;
 }
 
-body.dark .node-card {
+.nodes-page.is-dark .node-card {
   background: rgba(255, 255, 255, 0.03);
   border-color: rgba(255, 255, 255, 0.1);
 }
diff --git a/frontend/src/pages/xray/DnsPresetsModal.css b/frontend/src/pages/xray/DnsPresetsModal.css
index a0da4965..d79778db 100644
--- a/frontend/src/pages/xray/DnsPresetsModal.css
+++ b/frontend/src/pages/xray/DnsPresetsModal.css
@@ -1,32 +1,22 @@
 .preset-list {
-  border: 1px solid rgba(5, 5, 5, 0.06);
+  border: 1px solid var(--ant-color-border-secondary);
   border-radius: 8px;
   overflow: hidden;
 }
 
-body.dark .preset-list,
-html[data-theme='ultra-dark'] .preset-list {
-  border-color: rgba(255, 255, 255, 0.12);
-}
-
 .preset-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 12px 24px;
-  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
 }
 
 .preset-row:last-child {
   border-bottom: 0;
 }
 
-body.dark .preset-row,
-html[data-theme='ultra-dark'] .preset-row {
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-}
-
 .preset-name {
   font-weight: 500;
 }
diff --git a/frontend/src/pages/xray/NordModal.css b/frontend/src/pages/xray/NordModal.css
index f430954a..1ef2ca1e 100644
--- a/frontend/src/pages/xray/NordModal.css
+++ b/frontend/src/pages/xray/NordModal.css
@@ -18,12 +18,8 @@
   width: 130px;
 }
 
-.row-odd {
-  background: rgba(0, 0, 0, 0.03);
-}
-
-body.dark .row-odd {
-  background: rgba(255, 255, 255, 0.04);
+.nord-data-table .row-odd {
+  background: rgba(128, 128, 128, 0.06);
 }
 
 .zero-margin {
diff --git a/frontend/src/pages/xray/OutboundsTab.css b/frontend/src/pages/xray/OutboundsTab.css
index 67bde03a..0773bd6f 100644
--- a/frontend/src/pages/xray/OutboundsTab.css
+++ b/frontend/src/pages/xray/OutboundsTab.css
@@ -68,7 +68,7 @@
   background: rgba(0, 0, 0, 0.05);
 }
 
-body.dark .address-pill {
+.xray-page.is-dark .address-pill {
   background: rgba(255, 255, 255, 0.06);
 }
 
diff --git a/frontend/src/pages/xray/RoutingTab.css b/frontend/src/pages/xray/RoutingTab.css
index 106a0551..386febea 100644
--- a/frontend/src/pages/xray/RoutingTab.css
+++ b/frontend/src/pages/xray/RoutingTab.css
@@ -81,7 +81,7 @@
   background: rgba(0, 0, 0, 0.06);
 }
 
-body.dark .criterion-more {
+.xray-page.is-dark .criterion-more {
   background: rgba(255, 255, 255, 0.1);
 }
 
@@ -222,11 +222,11 @@ body.dark .criterion-more {
   opacity: 0.4;
 }
 
-body.dark .rule-card {
+.xray-page.is-dark .rule-card {
   background: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.08);
 }
 
-body.dark .criterion-chip {
+.xray-page.is-dark .criterion-chip {
   background: rgba(255, 255, 255, 0.06);
 }
diff --git a/frontend/src/pages/xray/WarpModal.css b/frontend/src/pages/xray/WarpModal.css
index 2fb77012..cd6b1b7d 100644
--- a/frontend/src/pages/xray/WarpModal.css
+++ b/frontend/src/pages/xray/WarpModal.css
@@ -18,12 +18,8 @@
   width: 130px;
 }
 
-.row-odd {
-  background: rgba(0, 0, 0, 0.03);
-}
-
-body.dark .row-odd {
-  background: rgba(255, 255, 255, 0.04);
+.warp-data-table .row-odd {
+  background: rgba(128, 128, 128, 0.06);
 }
 
 .zero-margin {