diff --git a/package.json b/package.json
index 4e4230592..63949a091 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,9 @@
     "@emotion/styled": "^11.14.1",
     "@juggle/resize-observer": "^3.4.0",
     "@monaco-editor/react": "^4.7.0",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/lab": "7.0.0-beta.17",
-    "@mui/material": "^7.3.9",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/lab": "9.0.0-beta.2",
+    "@mui/material": "^9.0.0",
     "@tanstack/react-query": "^5.96.1",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.23",
@@ -93,8 +93,8 @@
     "@types/validator": "^13.15.10",
     "@vitejs/plugin-legacy": "^8.0.0",
     "@vitejs/plugin-react": "^6.0.1",
-    "axios": "^1.13.6",
     "adm-zip": "^0.5.16",
+    "axios": "^1.13.6",
     "cli-color": "^2.0.4",
     "commander": "^14.0.3",
     "cross-env": "^10.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c76301ad2..2b93ae62a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,14 +30,14 @@ importers:
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@mui/icons-material':
-        specifier: ^7.3.9
-        version: 7.3.10(@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
+        specifier: ^9.0.0
+        version: 9.0.0(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
       '@mui/lab':
-        specifier: 7.0.0-beta.17
-        version: 7.0.0-beta.17(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        specifier: 9.0.0-beta.2
+        version: 9.0.0-beta.2(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@mui/material':
-        specifier: ^7.3.9
-        version: 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        specifier: ^9.0.0
+        version: 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@tanstack/react-query':
         specifier: ^5.96.1
         version: 5.99.0(react@19.2.5)
@@ -1047,28 +1047,28 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@mui/core-downloads-tracker@7.3.10':
-    resolution: {integrity: sha512-vrOpWRmPJSuwLo23J62wggEm/jvGdzqctej+UOCtgDUz6nZJQuj3ByPccVyaa7eQmwAzUwKN56FQPMKkqbj1GA==}
+  '@mui/core-downloads-tracker@9.0.0':
+    resolution: {integrity: sha512-uwQNGkhv0lf7ufxw6QXev77BW6pWbW+7uxYjU5+rfp4lBkFtMEgJCsarTM3Tn+i0lGx6+Ol2u88JdGXr0GDskA==}
 
-  '@mui/icons-material@7.3.10':
-    resolution: {integrity: sha512-Au0ma4NSKGKNiimukj8UT/W1x2Qx6Qwn2RvFGykiSqVLYBNlIOPbjnIMvrwLGLu89EEpTVdu/ys/OduZR+tWqw==}
+  '@mui/icons-material@9.0.0':
+    resolution: {integrity: sha512-oDwyvI6LgjWRC9MBcSGvLkPud9S9ELgSBQFYxa1rYcZn6Br55dn22SyvsPDMsn0G8OndFk53iMT45W5mNqrogw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': ^7.3.10
+      '@mui/material': ^9.0.0
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@mui/lab@7.0.0-beta.17':
-    resolution: {integrity: sha512-H8tSINm6Xgbi7o49MplAwks4tAEE6SpFNd9l7n4NURl0GSpOv0CZvgXKSJt4+6TmquDhE7pomHpHWJiVh/2aCg==}
+  '@mui/lab@9.0.0-beta.2':
+    resolution: {integrity: sha512-UqykXQCn7HNSExyYBvrFpaaEEmUwHbEgjFDBApEkawVPcBILyYNFhpXoqkwkafiZy+WsvcxIeRF0z4tCgisTRg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
-      '@mui/material': ^7.3.2
-      '@mui/material-pigment-css': ^7.3.2
+      '@mui/material': ^9.0.0
+      '@mui/material-pigment-css': ^9.0.0
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -1082,13 +1082,13 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/material@7.3.10':
-    resolution: {integrity: sha512-cHvGOk2ZEfbQt3LnGe0ZKd/ETs9gsUpkW66DCO+GSjMZhpdKU4XsuIr7zJ/B/2XaN8ihxuzHfYAR4zPtCN4RYg==}
+  '@mui/material@9.0.0':
+    resolution: {integrity: sha512-+VP/oQCDhDR87NQQgXnNBG8dwy6GNuQLnenS1pZvkbn2dKFSxRSRMybTpH9xUxXP+316mlYDy5CSbYtusnCWtw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
-      '@mui/material-pigment-css': ^7.3.10
+      '@mui/material-pigment-css': ^9.0.0
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -1102,8 +1102,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/private-theming@7.3.10':
-    resolution: {integrity: sha512-j3EZN+zOctxUISvJSmsEPo5o2F8zse4l5vRkBY+ps6UtnL6J7o14kUaI4w7gwo73id9e3cDNMVQK/9BVaMHVBw==}
+  '@mui/private-theming@9.0.0':
+    resolution: {integrity: sha512-JtuZoaiCqwD6vjgYu6Xp3T7DZkrxJlgtDz5yESzhI34fEX5hHMh2VJUbuL9UOg8xrfIFMrq6dcYoH/7Zi4G0RA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -1112,8 +1112,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/styled-engine@7.3.10':
-    resolution: {integrity: sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==}
+  '@mui/styled-engine@9.0.0':
+    resolution: {integrity: sha512-9RLGdX4Jg0aQPRuvqh/OLzYSPlgd5zyEw5/1HIRfdavSiOd03WtUaGZH9/w1RoTYuRKwpgy0hpIFaMHIqPVIWg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.4.1
@@ -1125,8 +1125,8 @@ packages:
       '@emotion/styled':
         optional: true
 
-  '@mui/system@7.3.10':
-    resolution: {integrity: sha512-/sfPpdpJaQn7BSF+avjIdHSYmxHp0UOBYNxSG9QGKfMOD6sLANCpRPCnanq1Pe0lFf0NHkO2iUk0TNzdWC1USQ==}
+  '@mui/system@9.0.0':
+    resolution: {integrity: sha512-YnC5Zg6j04IxiLc/boAKs0464jfZlLFVa7mf5E8lF0XOtZVUvG6R6gJK50lgUYdaaLdyLfxF6xR7LaPuEpeT/g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -1141,16 +1141,16 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/types@7.4.12':
-    resolution: {integrity: sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==}
+  '@mui/types@9.0.0':
+    resolution: {integrity: sha512-i1cuFCAWN44b3AJWO7mh7tuh1sqbQSeVr/94oG0TX5uXivac8XalgE4/6fQZcmGZigzbQ35IXxj/4jLpRIBYZg==}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@mui/utils@7.3.10':
-    resolution: {integrity: sha512-7y2eIfy0h7JPz+Yy4pS+wgV68d46PuuxDqKBN4Q8VlPQSsCAGwroMCV6xWyc7g9dvEp8ZNFsknc59GHWO+r6Ow==}
+  '@mui/utils@9.0.0':
+    resolution: {integrity: sha512-bQcqyg/gjULUqTuyUjSAFr6LQGLvtkNtDbJerAtoUn9kGZ0hg5QJiN1PLHMLbeFpe3te1831uq7GFl2ITokGdg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -4624,23 +4624,23 @@ snapshots:
       react: 19.2.5
       react-dom: 19.2.5(react@19.2.5)
 
-  '@mui/core-downloads-tracker@7.3.10': {}
+  '@mui/core-downloads-tracker@9.0.0': {}
 
-  '@mui/icons-material@7.3.10(@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
+  '@mui/icons-material@9.0.0(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/material': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@mui/material': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       react: 19.2.5
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@mui/lab@7.0.0-beta.17(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+  '@mui/lab@9.0.0-beta.2(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/material': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      '@mui/system': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
-      '@mui/types': 7.4.12(@types/react@19.2.14)
-      '@mui/utils': 7.3.10(@types/react@19.2.14)(react@19.2.5)
+      '@mui/material': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@mui/system': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
+      '@mui/types': 9.0.0(@types/react@19.2.14)
+      '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.5)
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 19.2.5
@@ -4650,13 +4650,13 @@ snapshots:
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
       '@types/react': 19.2.14
 
-  '@mui/material@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+  '@mui/material@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/core-downloads-tracker': 7.3.10
-      '@mui/system': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
-      '@mui/types': 7.4.12(@types/react@19.2.14)
-      '@mui/utils': 7.3.10(@types/react@19.2.14)(react@19.2.5)
+      '@mui/core-downloads-tracker': 9.0.0
+      '@mui/system': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
+      '@mui/types': 9.0.0(@types/react@19.2.14)
+      '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.5)
       '@popperjs/core': 2.11.8
       '@types/react-transition-group': 4.4.12(@types/react@19.2.14)
       clsx: 2.1.1
@@ -4671,16 +4671,16 @@ snapshots:
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
       '@types/react': 19.2.14
 
-  '@mui/private-theming@7.3.10(@types/react@19.2.14)(react@19.2.5)':
+  '@mui/private-theming@9.0.0(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/utils': 7.3.10(@types/react@19.2.14)(react@19.2.5)
+      '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.5)
       prop-types: 15.8.1
       react: 19.2.5
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@mui/styled-engine@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(react@19.2.5)':
+  '@mui/styled-engine@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
       '@emotion/cache': 11.14.0
@@ -4693,13 +4693,13 @@ snapshots:
       '@emotion/react': 11.14.0(@types/react@19.2.14)(react@19.2.5)
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
 
-  '@mui/system@7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
+  '@mui/system@9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/private-theming': 7.3.10(@types/react@19.2.14)(react@19.2.5)
-      '@mui/styled-engine': 7.3.10(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(react@19.2.5)
-      '@mui/types': 7.4.12(@types/react@19.2.14)
-      '@mui/utils': 7.3.10(@types/react@19.2.14)(react@19.2.5)
+      '@mui/private-theming': 9.0.0(@types/react@19.2.14)(react@19.2.5)
+      '@mui/styled-engine': 9.0.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5))(react@19.2.5)
+      '@mui/types': 9.0.0(@types/react@19.2.14)
+      '@mui/utils': 9.0.0(@types/react@19.2.14)(react@19.2.5)
       clsx: 2.1.1
       csstype: 3.2.3
       prop-types: 15.8.1
@@ -4709,16 +4709,16 @@ snapshots:
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.5))(@types/react@19.2.14)(react@19.2.5)
       '@types/react': 19.2.14
 
-  '@mui/types@7.4.12(@types/react@19.2.14)':
+  '@mui/types@9.0.0(@types/react@19.2.14)':
     dependencies:
       '@babel/runtime': 7.29.2
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@mui/utils@7.3.10(@types/react@19.2.14)(react@19.2.5)':
+  '@mui/utils@9.0.0(@types/react@19.2.14)(react@19.2.5)':
     dependencies:
       '@babel/runtime': 7.29.2
-      '@mui/types': 7.4.12(@types/react@19.2.14)
+      '@mui/types': 9.0.0(@types/react@19.2.14)
       '@types/prop-types': 15.7.15
       clsx: 2.1.1
       prop-types: 15.8.1
diff --git a/src/components/base/base-search-box.tsx b/src/components/base/base-search-box.tsx
index 014c70523..405fb9bdb 100644
--- a/src/components/base/base-search-box.tsx
+++ b/src/components/base/base-search-box.tsx
@@ -205,7 +205,7 @@ export const BaseSearchBox = ({
           input: {
             sx: { pr: 1 },
             endAdornment: (
-              <Box display="flex">
+              <Box sx={{ display: 'flex' }}>
                 {!!text && (
                   <Tooltip title={t('shared.placeholders.resetInput')}>
                     <IconButton
diff --git a/src/components/home/clash-info-card.tsx b/src/components/home/clash-info-card.tsx
index 738e4babf..6115abdcc 100644
--- a/src/components/home/clash-info-card.tsx
+++ b/src/components/home/clash-info-card.tsx
@@ -30,47 +30,47 @@ export const ClashInfoCard = () => {
 
     return (
       <Stack spacing={1.5}>
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.coreVersion')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {clashVersion || '-'}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.systemProxyAddress')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {systemProxyAddress}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.mixedPort')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {clashConfig.mixedPort || '-'}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.uptime')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {formattedUptime}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.rulesCount')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {rules.length}
           </Typography>
         </Stack>
diff --git a/src/components/home/current-proxy-card.tsx b/src/components/home/current-proxy-card.tsx
index a9428ae9e..e7f1b20a3 100644
--- a/src/components/home/current-proxy-card.tsx
+++ b/src/components/home/current-proxy-card.tsx
@@ -930,7 +930,7 @@ export const CurrentProxyCard = () => {
             }}
           >
             <Box>
-              <Typography variant="body1" fontWeight="medium">
+              <Typography variant="body1" sx={{ fontWeight: 'medium' }}>
                 {currentProxy.name}
               </Typography>
 
@@ -1026,9 +1026,11 @@ export const CurrentProxyCard = () => {
               disabled={isDirectMode}
               renderValue={renderProxyValue}
               MenuProps={{
-                PaperProps: {
-                  style: {
-                    maxHeight: 500,
+                slotProps: {
+                  paper: {
+                    style: {
+                      maxHeight: 500,
+                    },
                   },
                 },
               }}
diff --git a/src/components/home/enhanced-canvas-traffic-graph.tsx b/src/components/home/enhanced-canvas-traffic-graph.tsx
index 3b0a1ded1..b0855bcc4 100644
--- a/src/components/home/enhanced-canvas-traffic-graph.tsx
+++ b/src/components/home/enhanced-canvas-traffic-graph.tsx
@@ -1245,13 +1245,13 @@ export const EnhancedCanvasTrafficGraph = memo(
                 whiteSpace: 'nowrap',
               }}
             >
-              <Box color="text.secondary" mb={0.2}>
+              <Box sx={{ color: 'text.secondary', mb: 0.2 }}>
                 {tooltipData.timestamp}
               </Box>
-              <Box color="secondary.main" fontWeight="500">
+              <Box sx={{ color: 'secondary.main', fontWeight: 500 }}>
                 ↑ {tooltipData.upSpeed}
               </Box>
-              <Box color="primary.main" fontWeight="500">
+              <Box sx={{ color: 'primary.main', fontWeight: 500 }}>
                 ↓ {tooltipData.downSpeed}
               </Box>
             </Box>
diff --git a/src/components/home/enhanced-card.tsx b/src/components/home/enhanced-card.tsx
index fbfd88b28..c5e8c2e14 100644
--- a/src/components/home/enhanced-card.tsx
+++ b/src/components/home/enhanced-card.tsx
@@ -90,9 +90,11 @@ export const EnhancedCard = forwardRef<HTMLElement, EnhancedCardProps>(
               {typeof title === 'string' ? (
                 <Typography
                   variant="h6"
-                  fontWeight="medium"
-                  fontSize={18}
-                  sx={titleTruncateStyle}
+                  sx={{
+                    ...titleTruncateStyle,
+                    fontWeight: 'medium',
+                    fontSize: 18,
+                  }}
                   title={title}
                 >
                   {title}
diff --git a/src/components/home/enhanced-traffic-stats.tsx b/src/components/home/enhanced-traffic-stats.tsx
index ff2db9a43..83a413141 100644
--- a/src/components/home/enhanced-traffic-stats.tsx
+++ b/src/components/home/enhanced-traffic-stats.tsx
@@ -120,9 +120,8 @@ const CompactStatCard = memo(
           >
             <Typography
               variant="body1"
-              fontWeight="bold"
               noWrap
-              sx={{ mr: 0.5 }}
+              sx={{ mr: 0.5, fontWeight: 'bold' }}
             >
               {value}
             </Typography>
diff --git a/src/components/home/home-profile-card.tsx b/src/components/home/home-profile-card.tsx
index 065699b19..b87e4af88 100644
--- a/src/components/home/home-profile-card.tsx
+++ b/src/components/home/home-profile-card.tsx
@@ -103,7 +103,7 @@ const ProfileDetails = ({
     <Box>
       <Stack spacing={2}>
         {current.url && (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <DnsOutlined fontSize="small" color="action" />
             <Typography
               variant="body2"
@@ -115,7 +115,6 @@ const ProfileDetails = ({
               {current.home ? (
                 <Link
                   component="button"
-                  fontWeight="medium"
                   onClick={() => current.home && openWebUrl(current.home)}
                   sx={{
                     display: 'inline-flex',
@@ -123,6 +122,7 @@ const ProfileDetails = ({
                     minWidth: 0,
                     maxWidth: 'calc(100% - 40px)',
                     ml: 0.5,
+                    fontWeight: 'medium',
                   }}
                   title={parseUrl(current.url)}
                 >
@@ -151,7 +151,6 @@ const ProfileDetails = ({
               ) : (
                 <Typography
                   component="span"
-                  fontWeight="medium"
                   sx={{
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
@@ -159,6 +158,7 @@ const ProfileDetails = ({
                     minWidth: 0,
                     flex: 1,
                     ml: 0.5,
+                    fontWeight: 'medium',
                   }}
                   title={parseUrl(current.url)}
                 >
@@ -170,7 +170,7 @@ const ProfileDetails = ({
         )}
 
         {current.updated && (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <UpdateOutlined
               fontSize="small"
               color="action"
@@ -187,7 +187,7 @@ const ProfileDetails = ({
               onClick={onUpdateProfile}
             >
               {t('shared.labels.updateTime')}:{' '}
-              <Box component="span" fontWeight="medium">
+              <Box component="span" sx={{ fontWeight: 'medium' }}>
                 {dayjs(current.updated * 1000).format('YYYY-MM-DD HH:mm')}
               </Box>
             </Typography>
@@ -196,11 +196,11 @@ const ProfileDetails = ({
 
         {current.extra && (
           <>
-            <Stack direction="row" alignItems="center" spacing={1}>
+            <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
               <SpeedOutlined fontSize="small" color="action" />
               <Typography variant="body2" color="text.secondary">
                 {t('shared.labels.usedTotal')}:{' '}
-                <Box component="span" fontWeight="medium">
+                <Box component="span" sx={{ fontWeight: 'medium' }}>
                   {parseTraffic(usedTraffic)} /{' '}
                   {parseTraffic(current.extra.total)}
                 </Box>
@@ -208,11 +208,11 @@ const ProfileDetails = ({
             </Stack>
 
             {current.extra.expire > 0 && (
-              <Stack direction="row" alignItems="center" spacing={1}>
+              <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
                 <EventOutlined fontSize="small" color="action" />
                 <Typography variant="body2" color="text.secondary">
                   {t('shared.labels.expireTime')}:{' '}
-                  <Box component="span" fontWeight="medium">
+                  <Box component="span" sx={{ fontWeight: 'medium' }}>
                     {parseExpire(current.extra.expire)}
                   </Box>
                 </Typography>
@@ -318,8 +318,6 @@ export const HomeProfileCard = ({
       <Link
         component="button"
         variant="h6"
-        fontWeight="medium"
-        fontSize={18}
         onClick={() => current.home && openWebUrl(current.home)}
         sx={{
           color: 'inherit',
@@ -328,6 +326,8 @@ export const HomeProfileCard = ({
           alignItems: 'center',
           minWidth: 0,
           maxWidth: '100%',
+          fontWeight: 'medium',
+          fontSize: 18,
           '& > span': {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
diff --git a/src/components/home/system-info-card.tsx b/src/components/home/system-info-card.tsx
index 79d2a23ac..8edf32005 100644
--- a/src/components/home/system-info-card.tsx
+++ b/src/components/home/system-info-card.tsx
@@ -215,24 +215,23 @@ export const SystemInfoCard = () => {
       }
     >
       <Stack spacing={1.5}>
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.osInfo')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {osInfo}
           </Typography>
         </Stack>
         <Divider />
         <Stack
           direction="row"
-          justifyContent="space-between"
-          alignItems="center"
+          sx={{ justifyContent: 'space-between', alignItems: 'center' }}
         >
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.autoLaunch')}
           </Typography>
-          <Stack direction="row" spacing={1} alignItems="center">
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <Chip
               size="small"
               label={
@@ -250,34 +249,32 @@ export const SystemInfoCard = () => {
         <Divider />
         <Stack
           direction="row"
-          justifyContent="space-between"
-          alignItems="center"
+          sx={{ justifyContent: 'space-between', alignItems: 'center' }}
         >
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.runningMode')}
           </Typography>
           <Typography
             variant="body2"
-            fontWeight="medium"
             onClick={handleRunningModeClick}
-            sx={runningModeStyle}
+            sx={{ ...runningModeStyle, fontWeight: 'medium' }}
           >
             {getModeIcon()}
             {getModeText()}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.lastCheckUpdate')}
           </Typography>
           <Typography
             variant="body2"
-            fontWeight="medium"
             onClick={onCheckUpdate}
             sx={{
               cursor: 'pointer',
               textDecoration: 'underline',
+              fontWeight: 'medium',
               '&:hover': { opacity: 0.7 },
             }}
           >
@@ -285,11 +282,11 @@ export const SystemInfoCard = () => {
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.vergeVersion')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             v{appVersion}
           </Typography>
         </Stack>
diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx
index d4304aab1..44299b5b7 100644
--- a/src/components/layout/layout-traffic.tsx
+++ b/src/components/layout/layout-traffic.tsx
@@ -53,29 +53,33 @@ export const LayoutTraffic = () => {
   const [inuse, inuseUnit] = parseTraffic(memory?.inuse || 0)
 
   const boxStyle: any = {
-    display: 'flex',
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+    },
   }
   const iconStyle: any = {
     sx: { mr: '8px', fontSize: 16 },
   }
   const valStyle: any = {
     component: 'span',
-    textAlign: 'center',
-    sx: { flex: '1 1 56px', userSelect: 'none' },
+    sx: { flex: '1 1 56px', userSelect: 'none', textAlign: 'center' },
   }
   const unitStyle: any = {
     component: 'span',
     color: 'grey.500',
-    fontSize: '12px',
-    textAlign: 'right',
-    sx: { flex: '0 1 27px', userSelect: 'none' },
+    sx: {
+      flex: '0 1 27px',
+      userSelect: 'none',
+      fontSize: '12px',
+      textAlign: 'right',
+    },
   }
 
   return (
     <LightweightTrafficErrorBoundary>
-      <Box position="relative">
+      <Box sx={{ position: 'relative' }}>
         {trafficGraph && pageVisible && (
           <div
             style={{ width: '100%', height: 60, marginBottom: 6 }}
@@ -85,7 +89,7 @@ export const LayoutTraffic = () => {
           </div>
         )}
 
-        <Box display="flex" flexDirection="column" gap={0.75}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
           <Box
             title={`${t('home.components.traffic.metrics.uploadSpeed')}`}
             {...boxStyle}
diff --git a/src/components/profile/groups-editor-viewer.tsx b/src/components/profile/groups-editor-viewer.tsx
index db5c0d396..16720eb5a 100644
--- a/src/components/profile/groups-editor-viewer.tsx
+++ b/src/components/profile/groups-editor-viewer.tsx
@@ -528,7 +528,7 @@ export const GroupsEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('profiles.modals.groupsEditor.title')}
             <Box>
               <Button
diff --git a/src/components/profile/profile-item.tsx b/src/components/profile/profile-item.tsx
index e0ce78e30..283768830 100644
--- a/src/components/profile/profile-item.tsx
+++ b/src/components/profile/profile-item.tsx
@@ -690,7 +690,7 @@ export const ProfileItem = (props: Props) => {
             />
           </Box>
         )}
-        <Box position="relative">
+        <Box sx={{ position: 'relative' }}>
           <Box sx={{ display: 'flex', justifyContent: 'start' }}>
             {batchMode && (
               <IconButton
@@ -731,8 +731,12 @@ export const ProfileItem = (props: Props) => {
             </Box>
 
             <Typography
-              width={batchMode ? 'calc(100% - 56px)' : 'calc(100% - 36px)'}
-              sx={{ fontSize: '18px', fontWeight: '600', lineHeight: '26px' }}
+              sx={{
+                width: batchMode ? 'calc(100% - 56px)' : 'calc(100% - 36px)',
+                fontSize: '18px',
+                fontWeight: '600',
+                lineHeight: '26px',
+              }}
               variant="h6"
               component="h2"
               noWrap
@@ -802,14 +806,14 @@ export const ProfileItem = (props: Props) => {
                   <Typography
                     noWrap
                     component="span"
-                    fontSize={14}
-                    textAlign="right"
                     title={
                       showNextUpdate
                         ? t('profiles.components.profileItem.tooltips.showLast')
                         : `${t('shared.labels.updateTime')}: ${parseExpire(updated)}\n${t('profiles.components.profileItem.tooltips.showNext')}`
                     }
                     sx={{
+                      fontSize: 14,
+                      textAlign: 'right',
                       cursor: 'pointer',
                       display: 'inline-block',
                       borderBottom: '1px dashed transparent',
@@ -861,7 +865,7 @@ export const ProfileItem = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
         onContextMenu={(e) => {
           setAnchorEl(null)
           e.preventDefault()
diff --git a/src/components/profile/profile-more.tsx b/src/components/profile/profile-more.tsx
index 362ff8d2f..7183b6b39 100644
--- a/src/components/profile/profile-more.tsx
+++ b/src/components/profile/profile-more.tsx
@@ -103,17 +103,19 @@ export const ProfileMore = (props: Props) => {
         }}
       >
         <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={0.5}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: 0.5,
+          }}
         >
           <Typography
-            width="calc(100% - 52px)"
             variant="h6"
             component="h2"
             noWrap
             title={t(globalTitles[id])}
+            sx={{ width: 'calc(100% - 52px)' }}
           >
             {t(globalTitles[id])}
           </Typography>
@@ -162,7 +164,7 @@ export const ProfileMore = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
         onContextMenu={(e) => {
           setAnchorEl(null)
           e.preventDefault()
diff --git a/src/components/profile/proxies-editor-viewer.tsx b/src/components/profile/proxies-editor-viewer.tsx
index 20f64abf4..af02837e5 100644
--- a/src/components/profile/proxies-editor-viewer.tsx
+++ b/src/components/profile/proxies-editor-viewer.tsx
@@ -374,7 +374,7 @@ export const ProxiesEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('profiles.modals.proxiesEditor.title')}
             <Box>
               <Button
diff --git a/src/components/profile/rules-editor-viewer.tsx b/src/components/profile/rules-editor-viewer.tsx
index ce4277e1c..c01b79721 100644
--- a/src/components/profile/rules-editor-viewer.tsx
+++ b/src/components/profile/rules-editor-viewer.tsx
@@ -584,7 +584,7 @@ export const RulesEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('rules.modals.editor.title')}
             <Box>
               <Button
diff --git a/src/components/proxy/provider-button.tsx b/src/components/proxy/provider-button.tsx
index 4cca249f2..d71154e42 100644
--- a/src/components/proxy/provider-button.tsx
+++ b/src/components/proxy/provider-button.tsx
@@ -151,9 +151,11 @@ export const ProviderButton = () => {
       <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
         <DialogTitle>
           <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
           >
             <Typography variant="h6">
               {t('proxies.page.provider.title')}
diff --git a/src/components/rule/provider-button.tsx b/src/components/rule/provider-button.tsx
index 7c84b4e12..bed1e5b3c 100644
--- a/src/components/rule/provider-button.tsx
+++ b/src/components/rule/provider-button.tsx
@@ -142,9 +142,11 @@ export const ProviderButton = () => {
       <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
         <DialogTitle>
           <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
           >
             <Typography variant="h6">
               {t('rules.page.provider.dialogTitle')}
diff --git a/src/components/setting/mods/auto-backup-settings.tsx b/src/components/setting/mods/auto-backup-settings.tsx
index 3f4fd67d3..0368a0145 100644
--- a/src/components/setting/mods/auto-backup-settings.tsx
+++ b/src/components/setting/mods/auto-backup-settings.tsx
@@ -134,7 +134,11 @@ export function AutoBackupSettings() {
   return (
     <Fragment>
       <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={1} width="100%">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
           <ListItemText
             primary={t('settings.modals.backup.auto.scheduleLabel')}
             secondary={t('settings.modals.backup.auto.scheduleHelper')}
@@ -149,7 +153,11 @@ export function AutoBackupSettings() {
       </ListItem>
 
       <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={2} width="100%">
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
           <ListItemText
             primary={t('settings.modals.backup.auto.intervalLabel')}
           />
@@ -187,7 +195,11 @@ export function AutoBackupSettings() {
       </ListItem>
 
       <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={1} width="100%">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
           <ListItemText
             primary={t('settings.modals.backup.auto.changeLabel')}
             secondary={t('settings.modals.backup.auto.changeHelper')}
diff --git a/src/components/setting/mods/backup-config-viewer.tsx b/src/components/setting/mods/backup-config-viewer.tsx
index 2b974c674..5e3fb8e14 100644
--- a/src/components/setting/mods/backup-config-viewer.tsx
+++ b/src/components/setting/mods/backup-config-viewer.tsx
@@ -234,9 +234,11 @@ export const BackupConfigViewer = memo(
           <Grid size={{ xs: 12, sm: 3 }}>
             <Stack
               direction="column"
-              justifyContent="space-between"
-              alignItems="stretch"
-              sx={{ height: '100%' }}
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'stretch',
+                height: '100%',
+              }}
             >
               {webdavChanged ||
               webdav_url === undefined ||
diff --git a/src/components/setting/mods/backup-history-viewer.tsx b/src/components/setting/mods/backup-history-viewer.tsx
index 1f82f683c..b6f5d5f8b 100644
--- a/src/components/setting/mods/backup-history-viewer.tsx
+++ b/src/components/setting/mods/backup-history-viewer.tsx
@@ -1,4 +1,4 @@
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import DeleteOutlined from '@mui/icons-material/DeleteOutlined'
 import DownloadRounded from '@mui/icons-material/DownloadRounded'
 import RefreshRounded from '@mui/icons-material/RefreshRounded'
 import RestoreRounded from '@mui/icons-material/RestoreRounded'
@@ -282,8 +282,7 @@ export const BackupHistoryViewer = ({
         <Stack spacing={2}>
           <Stack
             direction="row"
-            alignItems="center"
-            justifyContent="space-between"
+            sx={{ alignItems: 'center', justifyContent: 'space-between' }}
           >
             <Tabs
               value={source}
@@ -345,9 +344,11 @@ export const BackupHistoryViewer = ({
                     secondary={
                       <Stack
                         direction="row"
-                        alignItems="center"
-                        justifyContent="space-between"
                         spacing={1.5}
+                        sx={{
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                        }}
                       >
                         <Typography variant="caption" color="text.secondary">
                           {`${row.platform} · ${row.display_time}`}
@@ -355,7 +356,7 @@ export const BackupHistoryViewer = ({
                         <Stack
                           direction="row"
                           spacing={0.5}
-                          alignItems="center"
+                          sx={{ alignItems: 'center' }}
                         >
                           {isLocal && (
                             <IconButton
@@ -371,7 +372,7 @@ export const BackupHistoryViewer = ({
                             disabled={isBusy}
                             onClick={() => handleDelete(row.filename)}
                           >
-                            <DeleteOutline fontSize="small" />
+                            <DeleteOutlined fontSize="small" />
                           </IconButton>
                           <IconButton
                             size="small"
@@ -393,8 +394,7 @@ export const BackupHistoryViewer = ({
             <Stack
               direction="row"
               spacing={1}
-              justifyContent="flex-end"
-              alignItems="center"
+              sx={{ justifyContent: 'flex-end', alignItems: 'center' }}
             >
               <Typography variant="caption">
                 {currentPage + 1} / {pageCount}
diff --git a/src/components/setting/mods/backup-viewer.tsx b/src/components/setting/mods/backup-viewer.tsx
index cd40bd65a..6074e3b26 100644
--- a/src/components/setting/mods/backup-viewer.tsx
+++ b/src/components/setting/mods/backup-viewer.tsx
@@ -237,8 +237,7 @@ export function BackupViewer({ ref }: { ref?: Ref<DialogRef> }) {
                     direction="row"
                     spacing={1}
                     useFlexGap
-                    flexWrap="wrap"
-                    alignItems="center"
+                    sx={{ flexWrap: 'wrap', alignItems: 'center' }}
                   >
                     {item.actions}
                   </Stack>
diff --git a/src/components/setting/mods/clash-core-viewer.tsx b/src/components/setting/mods/clash-core-viewer.tsx
index d4a9be42a..19c139a63 100644
--- a/src/components/setting/mods/clash-core-viewer.tsx
+++ b/src/components/setting/mods/clash-core-viewer.tsx
@@ -117,7 +117,7 @@ export function ClashCoreViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           {t('settings.sections.clash.form.fields.clashCore')}
           <Box>
             <LoadingButton
diff --git a/src/components/setting/mods/clash-port-viewer.tsx b/src/components/setting/mods/clash-port-viewer.tsx
index 74f1385bf..51b1da192 100644
--- a/src/components/setting/mods/clash-port-viewer.tsx
+++ b/src/components/setting/mods/clash-port-viewer.tsx
@@ -221,7 +221,7 @@ export const ClashPortViewer = forwardRef<ClashPortViewerRef>((_, ref) => {
       }}
       okBtn={
         loading ? (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <CircularProgress size={20} />
             {t('shared.statuses.saving')}
           </Stack>
diff --git a/src/components/setting/mods/config-viewer.tsx b/src/components/setting/mods/config-viewer.tsx
index c358c73f6..95219ba8d 100644
--- a/src/components/setting/mods/config-viewer.tsx
+++ b/src/components/setting/mods/config-viewer.tsx
@@ -36,7 +36,7 @@ export const ConfigViewer = forwardRef<DialogRef>((_, ref) => {
     <EditorViewer
       open={true}
       title={
-        <Box display="flex" alignItems="center" gap={2}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
           {t('settings.components.verge.advanced.fields.runtimeConfig')}
           <Chip label={t('shared.labels.readOnly')} size="small" />
         </Box>
diff --git a/src/components/setting/mods/controller-viewer.tsx b/src/components/setting/mods/controller-viewer.tsx
index d163ec5b2..8e79cfaff 100644
--- a/src/components/setting/mods/controller-viewer.tsx
+++ b/src/components/setting/mods/controller-viewer.tsx
@@ -111,7 +111,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
       contentSx={{ width: 400 }}
       okBtn={
         isSaving ? (
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <CircularProgress size={16} color="inherit" />
             {t('shared.statuses.saving')}
           </Box>
@@ -153,7 +153,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
           <ListItemText
             primary={t('settings.sections.externalController.fields.address')}
           />
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <TextField
               size="small"
               sx={{
@@ -193,7 +193,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
           <ListItemText
             primary={t('settings.sections.externalController.fields.secret')}
           />
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <TextField
               size="small"
               sx={{
diff --git a/src/components/setting/mods/dns-viewer.tsx b/src/components/setting/mods/dns-viewer.tsx
index 741b2ca8d..c9abdcde2 100644
--- a/src/components/setting/mods/dns-viewer.tsx
+++ b/src/components/setting/mods/dns-viewer.tsx
@@ -623,9 +623,15 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
       open={open}
       disableEnforceFocus={!visualization}
       title={
-        <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
           {t('settings.modals.dns.dialog.title')}
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <Button
               variant="outlined"
               size="small"
diff --git a/src/components/setting/mods/external-controller-cors.tsx b/src/components/setting/mods/external-controller-cors.tsx
index 1194b79d3..c3dcbda7f 100644
--- a/src/components/setting/mods/external-controller-cors.tsx
+++ b/src/components/setting/mods/external-controller-cors.tsx
@@ -194,10 +194,12 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
         <List sx={{ width: '90%', padding: 2 }}>
           <ListItem sx={{ padding: '8px 0' }}>
             <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              width="100%"
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                width: '100%',
+              }}
             >
               <span style={{ fontWeight: 'normal' }}>
                 {t('settings.sections.externalCors.fields.allowPrivateNetwork')}
@@ -240,7 +242,7 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
                     placeholder={t(
                       'settings.sections.externalCors.placeholders.origin',
                     )}
-                    inputProps={{ style: { fontSize: 14 } }}
+                    slotProps={{ htmlInput: { style: { fontSize: 14 } } }}
                   />
                   <Button
                     variant="contained"
diff --git a/src/components/setting/mods/hotkey-input.tsx b/src/components/setting/mods/hotkey-input.tsx
index a70a37c55..c74f0ce11 100644
--- a/src/components/setting/mods/hotkey-input.tsx
+++ b/src/components/setting/mods/hotkey-input.tsx
@@ -90,7 +90,7 @@ export const HotkeyInput = (props: Props) => {
 
         <div className="list">
           {keys.map((key, index) => (
-            <Box display="flex" key={key}>
+            <Box sx={{ display: 'flex' }} key={key}>
               <span className="delimiter" hidden={index === 0}>
                 +
               </span>
diff --git a/src/components/setting/mods/network-interface-viewer.tsx b/src/components/setting/mods/network-interface-viewer.tsx
index 4e7934a0a..588ce472c 100644
--- a/src/components/setting/mods/network-interface-viewer.tsx
+++ b/src/components/setting/mods/network-interface-viewer.tsx
@@ -27,7 +27,7 @@ export function NetworkInterfaceViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           {t('settings.modals.networkInterface.title')}
           <Box>
             <Button
diff --git a/src/components/setting/mods/tun-viewer.tsx b/src/components/setting/mods/tun-viewer.tsx
index 5c381caa6..5fa9d3bd5 100644
--- a/src/components/setting/mods/tun-viewer.tsx
+++ b/src/components/setting/mods/tun-viewer.tsx
@@ -141,7 +141,7 @@ export function TunViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between" gap={1}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
           <Typography variant="h6">{t('settings.modals.tun.title')}</Typography>
           <Button
             variant="outlined"
diff --git a/src/components/setting/mods/update-viewer.tsx b/src/components/setting/mods/update-viewer.tsx
index 0742c5035..56f833a29 100644
--- a/src/components/setting/mods/update-viewer.tsx
+++ b/src/components/setting/mods/update-viewer.tsx
@@ -112,7 +112,7 @@ export function UpdateViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           {t('settings.modals.update.title', {
             version: updateInfo?.version ?? '',
           })}
diff --git a/src/components/setting/mods/web-ui-item.tsx b/src/components/setting/mods/web-ui-item.tsx
index 8a5dd9b49..7a20b5485 100644
--- a/src/components/setting/mods/web-ui-item.tsx
+++ b/src/components/setting/mods/web-ui-item.tsx
@@ -49,7 +49,11 @@ export const WebUIItem = (props: Props) => {
   if (editing || onlyEdit) {
     return (
       <>
-        <Stack spacing={0.75} direction="row" mt={1} mb={1} alignItems="center">
+        <Stack
+          spacing={0.75}
+          direction="row"
+          sx={{ mt: 1, mb: 1, alignItems: 'center' }}
+        >
           <TextField
             autoComplete="new-password"
             fullWidth
@@ -105,13 +109,17 @@ export const WebUIItem = (props: Props) => {
 
   return (
     <>
-      <Stack spacing={0.75} direction="row" alignItems="center" mt={1} mb={1}>
+      <Stack
+        spacing={0.75}
+        direction="row"
+        sx={{ alignItems: 'center', mt: 1, mb: 1 }}
+      >
         <Typography
           component="div"
-          width="100%"
           title={value}
           color={value ? 'text.primary' : 'text.secondary'}
           sx={({ palette }) => ({
+            width: '100%',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             '> .placeholder': {
diff --git a/src/components/setting/mods/web-ui-viewer.tsx b/src/components/setting/mods/web-ui-viewer.tsx
index 658669a6a..1f90676f5 100644
--- a/src/components/setting/mods/web-ui-viewer.tsx
+++ b/src/components/setting/mods/web-ui-viewer.tsx
@@ -100,7 +100,7 @@ export function WebUIViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           {t('settings.modals.webUI.title')}
           <Button
             variant="contained"
@@ -127,7 +127,7 @@ export function WebUIViewer({ ref }: { ref?: Ref<DialogRef> }) {
       {!editing && webUIList.length === 0 && (
         <BaseEmpty
           extra={
-            <Typography mt={2} sx={{ fontSize: '12px' }}>
+            <Typography sx={{ mt: 2, fontSize: '12px' }}>
               {t('settings.modals.webUI.messages.placeholderInstruction')}
             </Typography>
           }
diff --git a/src/components/shared/traffic-error-boundary.tsx b/src/components/shared/traffic-error-boundary.tsx
index 112ae1268..5d5c0ad43 100644
--- a/src/components/shared/traffic-error-boundary.tsx
+++ b/src/components/shared/traffic-error-boundary.tsx
@@ -182,8 +182,7 @@ const TrafficErrorFallback: React.FC<TrafficErrorFallbackProps> = ({
       <Typography
         variant="body2"
         color="text.secondary"
-        textAlign="center"
-        sx={{ mb: 2 }}
+        sx={{ mb: 2, textAlign: 'center' }}
       >
         {t('shared.feedback.errors.trafficStatsDescription')}
       </Typography>
@@ -194,7 +193,7 @@ const TrafficErrorFallback: React.FC<TrafficErrorFallbackProps> = ({
           {error instanceof Error ? error.message : 'Unknown error'}
         </Typography>
         {retryCount > 0 && (
-          <Typography variant="caption" display="block" sx={{ mt: 1 }}>
+          <Typography variant="caption" sx={{ mt: 1, display: 'block' }}>
             {t('shared.labels.retryAttempts')}: {retryCount}/{maxRetries}
           </Typography>
         )}
diff --git a/src/components/test/test-item.tsx b/src/components/test/test-item.tsx
index c87d636ec..746271dd1 100644
--- a/src/components/test/test-item.tsx
+++ b/src/components/test/test-item.tsx
@@ -116,8 +116,7 @@ export const TestItem = ({
         }}
       >
         <Box
-          position="relative"
-          sx={{ cursor: 'move' }}
+          sx={{ position: 'relative', cursor: 'move' }}
           ref={setNodeRef}
           {...attributes}
           {...listeners}
@@ -208,7 +207,7 @@ export const TestItem = ({
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
         onContextMenu={(e) => {
           setAnchorEl(null)
           e.preventDefault()
diff --git a/src/pages/proxies.tsx b/src/pages/proxies.tsx
index ea7df4035..b7b2c1d20 100644
--- a/src/pages/proxies.tsx
+++ b/src/pages/proxies.tsx
@@ -137,7 +137,7 @@ const ProxyPage = () => {
           : t('proxies.page.title.default')
       }
       header={
-        <Box display="flex" alignItems="center" gap={1}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <ProviderButton />
 
           <ButtonGroup size="small">
diff --git a/src/pages/rules.tsx b/src/pages/rules.tsx
index 7635d44fb..f341ab39a 100644
--- a/src/pages/rules.tsx
+++ b/src/pages/rules.tsx
@@ -63,7 +63,7 @@ const RulesPage = () => {
         overflow: 'auto',
       }}
       header={
-        <Box display="flex" alignItems="center" gap={1}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <ProviderButton />
         </Box>
       }
diff --git a/src/pages/unlock.tsx b/src/pages/unlock.tsx
index d0fa45b09..ea91e6bb8 100644
--- a/src/pages/unlock.tsx
+++ b/src/pages/unlock.tsx
@@ -2,7 +2,7 @@ import {
   AccessTimeOutlined,
   CancelOutlined,
   CheckCircleOutlined,
-  HelpOutline,
+  HelpOutlined,
   PendingOutlined,
   RefreshRounded,
 } from '@mui/icons-material'
@@ -315,8 +315,8 @@ const UnlockPage = () => {
     if (status === 'Yes') return <CheckCircleOutlined />
     if (status === 'No') return <CancelOutlined />
     if (status === 'Soon') return <AccessTimeOutlined />
-    if (status.includes('Failed')) return <HelpOutline />
-    return <HelpOutline />
+    if (status.includes('Failed')) return <HelpOutlined />
+    return <HelpOutlined />
   }
 
   // 边框色