diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 96bb6b39..d50213b5 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -683,7 +683,8 @@ style attribute {
     border-color: #9ea2a8;
 }
 
-.dark .ant-table-row-expand-icon:hover {
+.dark .ant-table-row-expand-icon:hover,
+.dark .ant-table-thead>tr>th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
     color: #0e49b5;
     background-color: #fff0;
     border-color: #0e49b5;
@@ -1080,4 +1081,4 @@ li.ant-select-dropdown-menu-item:empty:after {
 
 .ant-input-group-addon:not(:first-child):not(:last-child), .ant-input-group-wrap:not(:first-child):not(:last-child), .ant-input-group>.ant-input:not(:first-child):not(:last-child) {
     border-radius: 0rem 1rem 1rem 0rem;
-}
\ No newline at end of file
+}
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 755d0c98..81894e53 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -185,7 +185,7 @@
                             </a-radio-group>
                         </div>
                         <a-back-top></a-back-top>
-                        <a-table :columns="isMobile ? mobileColums : columns" :row-key="dbInbound => dbInbound.id"
+                        <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
                                  :data-source="searchedInbounds"
                                  :scroll="isMobile ? {} : { x: 1000 }"
                                  :pagination=pagination(searchedInbounds)
@@ -502,7 +502,7 @@
         scopedSlots: { customRender: 'expiryTime' },
     }];
 
-    const mobileColums = [{
+    const mobileColumns = [{
         title: "ID",
         align: 'right',
         dataIndex: "id",
@@ -526,19 +526,73 @@
     }];
 
     const innerColumns = [
-        { title: '{{ i18n "pages.inbounds.operate" }}', width: 50, scopedSlots: { customRender: 'actions' } },
-        { title: '{{ i18n "pages.inbounds.enable" }}', width: 20, scopedSlots: { customRender: 'enable' } },
-        { title: '{{ i18n "online" }}', width: 20, scopedSlots: { customRender: 'online' } },
-        { title: '{{ i18n "pages.inbounds.client" }}', width: 70, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
-    ];
+            {
+                title: '{{ i18n "pages.inbounds.operate" }}',
+                width: 50,
+                scopedSlots: { customRender: 'actions' },
+            },
+            {
+                title: '{{ i18n "pages.inbounds.enable" }}',
+                width: 20,
+                scopedSlots: { customRender: 'enable' },
+            },
+            {
+                title: '{{ i18n "online" }}',
+                width: 20,
+                scopedSlots: { customRender: 'online' },
+            },
+            {
+                title: '{{ i18n "pages.inbounds.client" }}',
+                dataIndex: 'email',
+                width: 70,
+                scopedSlots: { customRender: 'client' },
+                sorter: (a, b) => {
+                    const clientA = a.email || '';
+                    const clientB = b.email || '';
+                    return clientA.localeCompare(clientB, undefined, { sensitivity: 'base' });
+                },
+            },
+            {
+                title: '{{ i18n "pages.inbounds.traffic" }}',
+                dataIndex: 'traffic',
+                width: 80,
+                align: 'center',
+                scopedSlots: { customRender: 'traffic' },
+            },
+            {
+                title: '{{ i18n "pages.inbounds.expireDate" }}',
+                width: 70,
+                align: 'center',
+                scopedSlots: { customRender: 'expiryTime' },
+            },
+        ];
 
-    const innerMobileColumns = [
-        { title: '{{ i18n "pages.inbounds.operate" }}', width: 10, align: 'center', scopedSlots: { customRender: 'actionMenu' } },
-        { title: '{{ i18n "pages.inbounds.client" }}', width: 90, align: 'left', scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.info" }}', width: 10, align: 'center', scopedSlots: { customRender: 'info' } },
-    ];
+        const innerMobileColumns = [
+            {
+                title: '{{ i18n "pages.inbounds.operate" }}',
+                width: 10,
+                align: 'center',
+                scopedSlots: { customRender: 'actionMenu' },
+            },
+            {
+                title: '{{ i18n "pages.inbounds.client" }}',
+                dataIndex: 'email',
+                width: 90,
+                align: 'left',
+                scopedSlots: { customRender: 'client' },
+                sorter: (a, b) => {
+                    const clientA = a.email || '';
+                    const clientB = b.email || '';
+                    return clientA.localeCompare(clientB, undefined, { sensitivity: 'base' });
+                },
+            },
+            {
+                title: '{{ i18n "pages.inbounds.info" }}',
+                width: 10,
+                align: 'center',
+                scopedSlots: { customRender: 'info' },
+            },
+        ];
 
     const app = new Vue({
         delimiters: ['[[', ']]'],