diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index ef61004d..99b704be 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { message } from 'antd';
 import 'antd/dist/reset.css';
+import '@/styles/utils.css';
 
 import { setupAxios } from '@/api/axios-init';
 import { readyI18n } from '@/i18n/react';
diff --git a/frontend/src/pages/inbounds/InboundFormModal.css b/frontend/src/pages/inbounds/InboundFormModal.css
index cb94c0b2..2532e21a 100644
--- a/frontend/src/pages/inbounds/InboundFormModal.css
+++ b/frontend/src/pages/inbounds/InboundFormModal.css
@@ -1,10 +1,3 @@
-.mt-4 { margin-top: 4px; }
-.mt-8 { margin-top: 8px; }
-.mt-12 { margin-top: 12px; }
-.mb-4 { margin-bottom: 4px; }
-.mb-8 { margin-bottom: 8px; }
-.mb-12 { margin-bottom: 12px; }
-
 .random-icon {
   margin-left: 4px;
   cursor: pointer;
diff --git a/frontend/src/pages/index/CustomGeoSection.css b/frontend/src/pages/index/CustomGeoSection.css
index 5fce811c..dc58cce7 100644
--- a/frontend/src/pages/index/CustomGeoSection.css
+++ b/frontend/src/pages/index/CustomGeoSection.css
@@ -1,7 +1,3 @@
-.mb-10 {
-  margin-bottom: 10px;
-}
-
 .toolbar {
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/index/PanelUpdateModal.css b/frontend/src/pages/index/PanelUpdateModal.css
index cdcc2fa1..9c8190dc 100644
--- a/frontend/src/pages/index/PanelUpdateModal.css
+++ b/frontend/src/pages/index/PanelUpdateModal.css
@@ -1,7 +1,3 @@
-.mb-12 {
-  margin-bottom: 12px;
-}
-
 .version-list {
   width: 100%;
   border: 1px solid var(--ant-color-border-secondary);
diff --git a/frontend/src/pages/index/VersionModal.css b/frontend/src/pages/index/VersionModal.css
index 66870e9d..473fc384 100644
--- a/frontend/src/pages/index/VersionModal.css
+++ b/frontend/src/pages/index/VersionModal.css
@@ -1,7 +1,3 @@
-.mb-12 {
-  margin-bottom: 12px;
-}
-
 .version-list {
   width: 100%;
   border: 1px solid var(--ant-color-border-secondary);
diff --git a/frontend/src/pages/xray/BasicsTab.css b/frontend/src/pages/xray/BasicsTab.css
index 965a332f..486f8cff 100644
--- a/frontend/src/pages/xray/BasicsTab.css
+++ b/frontend/src/pages/xray/BasicsTab.css
@@ -1,7 +1,3 @@
-.mb-12 {
-  margin-bottom: 12px;
-}
-
 .hint-alert {
   text-align: center;
 }
diff --git a/frontend/src/pages/xray/NordModal.css b/frontend/src/pages/xray/NordModal.css
index fa46344f..464d1b55 100644
--- a/frontend/src/pages/xray/NordModal.css
+++ b/frontend/src/pages/xray/NordModal.css
@@ -26,26 +26,6 @@
   margin: 0;
 }
 
-.mt-8 {
-  margin-top: 8px;
-}
-
-.mt-10 {
-  margin-top: 10px;
-}
-
-.mt-20 {
-  margin-top: 20px;
-}
-
-.my-10 {
-  margin: 10px 0;
-}
-
-.ml-8 {
-  margin-left: 8px;
-}
-
 .server-row {
   display: inline-flex;
   align-items: center;
diff --git a/frontend/src/pages/xray/OutboundFormModal.css b/frontend/src/pages/xray/OutboundFormModal.css
index b2150758..98e0c050 100644
--- a/frontend/src/pages/xray/OutboundFormModal.css
+++ b/frontend/src/pages/xray/OutboundFormModal.css
@@ -10,14 +10,6 @@
   margin-left: 8px;
 }
 
-.ml-8 {
-  margin-left: 8px;
-}
-
-.mb-8 {
-  margin-bottom: 8px;
-}
-
 .item-heading {
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/xray/WarpModal.css b/frontend/src/pages/xray/WarpModal.css
index ae9638e3..308f1b82 100644
--- a/frontend/src/pages/xray/WarpModal.css
+++ b/frontend/src/pages/xray/WarpModal.css
@@ -26,22 +26,6 @@
   margin: 0;
 }
 
-.my-8 {
-  margin: 8px 0;
-}
-
-.mt-8 {
-  margin-top: 8px;
-}
-
-.my-10 {
-  margin: 10px 0;
-}
-
-.ml-8 {
-  margin-left: 8px;
-}
-
 .license-actions {
   display: flex;
   align-items: center;
diff --git a/frontend/src/styles/utils.css b/frontend/src/styles/utils.css
new file mode 100644
index 00000000..11edcc15
--- /dev/null
+++ b/frontend/src/styles/utils.css
@@ -0,0 +1,15 @@
+.mt-4 { margin-top: 4px; }
+.mt-8 { margin-top: 8px; }
+.mt-10 { margin-top: 10px; }
+.mt-12 { margin-top: 12px; }
+.mt-20 { margin-top: 20px; }
+
+.mb-4 { margin-bottom: 4px; }
+.mb-8 { margin-bottom: 8px; }
+.mb-10 { margin-bottom: 10px; }
+.mb-12 { margin-bottom: 12px; }
+
+.ml-8 { margin-left: 8px; }
+
+.my-8 { margin: 8px 0; }
+.my-10 { margin: 10px 0; }