diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 8a302ae9..394b68cb 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -2,66 +2,71 @@
 <html lang="en">
 {{template "head" .}}
 <style>
-    @media (min-width: 769px) {
-        .ant-layout-content {
-            margin: 24px 16px;
-        }
+  @media (min-width: 769px) {
+    .ant-layout-content {
+      margin: 24px 16px;
     }
-    @media (max-width: 768px) {
-        .ant-tabs-nav .ant-tabs-tab {
-            margin: 0;
-            padding: 12px .5rem;
-        }
+  }
+  @media (max-width: 768px) {
+    .ant-tabs-nav .ant-tabs-tab {
+      margin: 0;
+      padding: 12px .5rem;
     }
-    .ant-tabs-bar {
-        margin: 0;
+  }
+  .ant-tabs-bar {
+    margin: 0;
+  }
+  .ant-list-item {
+    display: block;
+  }
+  .alert-msg {
+    color: rgb(194, 117, 18);
+    font-weight: normal;
+    font-size: 16px;
+    padding: .5rem 1rem;
+    text-align: center;
+    background: rgb(255 145 0 / 15%);
+    margin: 1.5rem 2.5rem 0rem 2.5rem;
+    border-radius: .5rem;
+    transition: all 0.5s;
+    animation: signal 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
+  }
+  .alert-msg:hover {
+    cursor: default;
+    transition-duration: .3s;
+    animation: signal 0.9s ease infinite;
+  }
+  @keyframes signal {
+    0% {
+      box-shadow: 0 0 0 0 rgba(194, 118, 18, 0.5);
     }
-    .ant-list-item {
-        display: block;
+
+    50% {
+      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
     }
-    .alert-msg {
-        color: rgb(194, 117, 18);
-        font-weight: normal;
-        font-size: 16px;
-        padding: .5rem 1rem;
-        text-align: center;
-        background: rgb(255 145 0 / 15%);
-        margin: 1.5rem 2.5rem 0rem 2.5rem;
-        border-radius: .5rem;
-        transition: all 0.5s;
-        animation: signal 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
-    }
-    .alert-msg:hover {
-        cursor: default;
-        transition-duration: .3s;
-        animation: signal 0.9s ease infinite;
-    }
-    @keyframes signal{
-    0%{
-        box-shadow: 0 0 0 0 rgba(194, 118, 18, 0.5);
-    }
-    50%{
-        box-shadow: 0 0 0 6px rgba(0 ,0,0,0);
-    }
-    100%{
-        box-shadow: 0 0 0 6px rgba(0 ,0,0,0);
-    }
-    }
-    .alert-msg > i {
-        color: inherit;
-        font-size: 24px;
-    }
-    .collapse-title {
-        color: inherit;
-        font-weight: bold;
-        font-size: 18px;
-        padding: 10px 20px;
-        border-bottom: 2px solid;
-    }
-    .collapse-title > i {
-        color: inherit;
-        font-size: 24px;
+
+    100% {
+      box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
     }
+  }
+  .alert-msg>i {
+    color: inherit;
+    font-size: 24px;
+  }
+  .collapse-title {
+    color: inherit;
+    font-weight: bold;
+    font-size: 18px;
+    padding: 10px 20px;
+    border-bottom: 2px solid;
+  }
+  .collapse-title>i {
+    color: inherit;
+    font-size: 24px;
+  }
+  .ant-collapse-content-box .ant-list-item {
+    border-bottom: none !important;
+  }
 </style>
 <body>
   <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
@@ -289,34 +294,24 @@
                         <a-switch v-model="fragment"></a-switch>
                       </a-col>
                     </a-row>
-                    <a-row v-if="fragment" style="margin-top: 10px;">
-                      <a-row style="padding: 10px 0">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='Packets'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <a-select v-model="fragmentPackets" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option :value="p" :label="p" v-for="p in ['1-1', '1-3', 'tlshello']"> [[ p ]] </a-select-option>
-                          </a-select>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 0">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='Length'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <a-input v-model="fragmentLength" placeholder="100-200"></a-input>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 0">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='Interval'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <a-input v-model="fragmentInterval" placeholder="10-20"></a-input>
-                        </a-col>
-                      </a-row>
-                    </a-row>
+                    <a-collapse v-if="fragment" style="margin-top: 14px;">
+                      <a-collapse-panel header='{{ i18n "pages.settings.fragment"}}' v-if="fragment">
+                        <a-list-item style="padding: 10px 20px">
+                          <a-row>
+                            <a-col :lg="24" :xl="12">
+                              <a-list-item-meta title='Packets'></a-list-item-meta>
+                            </a-col>
+                            <a-col :lg="24" :xl="12">
+                              <a-select v-model="fragmentPackets" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p" :label="p" v-for="p in ['1-1', '1-3', 'tlshello']"> [[ p ]] </a-select-option>
+                              </a-select>
+                            </a-col>
+                          </a-row>
+                        </a-list-item>
+                        <setting-list-item style="padding: 10px 20px" type="text" title='Length' v-model="fragmentLength" placeholder="100-200"></setting-list-item>
+                        <setting-list-item style="padding: 10px 20px" type="text" title='Interval' v-model="fragmentInterval" placeholder="10-20"></setting-list-item>
+                      </a-collapse-panel>
+                    </a-collapse>
                   </a-list-item>
                   <a-list-item style="padding: 20px">
                     <a-row>
@@ -327,34 +322,24 @@
                         <a-switch v-model="enableMux"></a-switch>
                       </a-col>
                     </a-row>
-                    <a-row v-if="enableMux" style="margin-top: 10px;">
-                      <a-row style="padding: 10px 0">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='Concurrency'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <a-input-number style="width: 100%;" v-model="muxConcurrency" :min="-1" :max="1024"></a-input-number>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 0">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='xudp Concurrency'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <a-input-number style="width: 100%;" v-model="muxXudpConcurrency" :min="-1" :max="1024"></a-input-number>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 0">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='xudp UDP 443'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <a-select v-model="muxXudpProxyUDP443" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']"> [[ p ]] </a-select-option>
-                          </a-select>
-                        </a-col>
-                      </a-row>
-                    </a-row>
+                    <a-collapse v-if="enableMux" style="margin-top: 14px;">
+                      <a-collapse-panel header='Mux'>
+                        <setting-list-item style="padding: 10px 20px" type="number" title='Concurrency' v-model="muxConcurrency" :min="-1" :max="1024"></setting-list-item>
+                        <setting-list-item style="padding: 10px 20px" type="number" title='xudp Concurrency' v-model="muxXudpConcurrency" :min="-1" :max="1024"></setting-list-item>
+                        <a-list-item style="padding: 10px 20px">
+                          <a-row>
+                            <a-col :lg="24" :xl="12">
+                              <a-list-item-meta title='xudp UDP 443'></a-list-item-meta>
+                            </a-col>
+                            <a-col :lg="24" :xl="12">
+                              <a-select v-model="muxXudpProxyUDP443" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']"> [[ p ]] </a-select-option>
+                              </a-select>
+                            </a-col>
+                          </a-row>
+                        </a-list-item>
+                      </a-collapse-panel>
+                    </a-collapse>
                   </a-list-item>
                   <a-list-item style="padding: 20px">
                     <a-row>
@@ -367,11 +352,13 @@
                         <a-switch v-model="enableDirect"></a-switch>
                       </a-col>
                     </a-row>
-                    <a-row v-if="enableDirect" style="margin-top: 10px;">
-                      <a-row style="padding: 10px 0">
-                        <a-checkbox-group v-model="directCountries" name="Countries" :options="countryOptions"></a-checkbox-group>
-                      </a-row>
-                    </a-row>
+                    <a-collapse v-if="enableDirect" style="margin-top: 14px;">
+                      <a-collapse-panel header='{{ i18n "pages.xray.directCountryConfigs"}}'>
+                        <a-list-item style="padding: 10px 20px">
+                          <a-checkbox-group v-model="directCountries" name="Countries" :options="countryOptions"></a-checkbox-group>
+                        </a-list-item>
+                      </a-collapse-panel>
+                    </a-collapse>
                   </a-list-item>
                 </a-list>
               </a-tab-pane>
