diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 741b01ae..a452dceb 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -212,6 +212,7 @@
 .ant-card-dark .ant-modal-close,
 .ant-card-dark i,
 .ant-card-dark .ant-select-dropdown-menu-item,
+.ant-card-dark .ant-calendar-day-select,
 .ant-card-dark .ant-calendar-month-select,
 .ant-card-dark .ant-calendar-year-select,
 .ant-card-dark .ant-calendar-date,
@@ -226,7 +227,7 @@
 .ant-card-dark .ant-calendar-date:hover,
 .ant-card-dark .ant-select-dropdown-menu-item-active,
 .ant-card-dark li.ant-calendar-time-picker-select-option-selected {
-    background-color: #004488;
+    background-color: #11314d;
 }
 
 .ant-card-dark tbody .ant-table-expanded-row,
@@ -243,7 +244,7 @@
 .ant-card-dark .ant-select-selection,
 .ant-card-dark .ant-calendar-picker-clear {
     color: hsla(0,0%,100%,.65);
-    background-color: #2e3b52;
+    background-color: #193752;
 }
 
 .ant-card-dark .ant-select-disabled .ant-select-selection {
@@ -264,12 +265,19 @@
 
 .ant-card-dark .ant-modal-content,
 .ant-card-dark .ant-modal-body,
-.ant-card-dark .ant-modal-header,
-.ant-card-dark .ant-calendar-selected-day .ant-calendar-date {
+.ant-card-dark .ant-modal-header {
     color: hsla(0,0%,100%,.65);
     background-color: #222a37;
 }
 
+.ant-card-dark .ant-calendar-selected-day .ant-calendar-date {
+    background-color: #1668dc;
+}
+
+.ant-card-dark .ant-calendar-time-picker-select li:hover {
+    background: #1668dc;
+}
+
 .client-table-header {
     background-color: #f0f2f5;
 }
diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index 9322e167..00e385b1 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -91,7 +91,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                            v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
         </a-form-item>
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 86058f6b..48021c55 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -120,7 +120,7 @@
                 <a-icon type="question-circle" theme="filled"></a-icon>
             </a-tooltip>
         </span>
-        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+        <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                        :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                        v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
         <a-tag color="red" v-if="isExpiry">Expired</a-tag>
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 74fe1384..09e7099d 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -49,7 +49,7 @@
                 <a-icon type="question-circle" theme="filled"></a-icon>
             </a-tooltip>
         </span>
-        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+        <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                        :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                        v-model="dbInbound._expiryTime" style="width: 300px;"></a-date-picker>
     </a-form-item>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index 9f96dd29..b775a98b 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -65,7 +65,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
 							:dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                             v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
         </a-form-item>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 46f4dac6..5a496b89 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -71,7 +71,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
                            v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
         </a-form-item>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index b1e4065f..574271b6 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -62,7 +62,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
 							:dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
 							v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
         </a-form-item>