diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index 0f3ea24c..9ae84e5a 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -106,7 +106,7 @@
             </template>
             <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                 :dropdown-class-name="themeSwitcher.currentTheme" v-model="clientsBulkModal.expiryTime"></a-date-picker>
-            <persian-datepicker v-else :dropdown-class-name="themeSwitcher.currentTheme"
+            <persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
                                 value="clientsBulkModal.expiryTime" v-model="clientsBulkModal.expiryTime"></persian-datepicker>
         </a-form-item>
         <a-form-item v-if="clientsBulkModal.expiryTime != 0">
diff --git a/web/html/xui/component/persianDatepicker.html b/web/html/xui/component/persianDatepicker.html
index 34ae4f8d..10ef8472 100644
--- a/web/html/xui/component/persianDatepicker.html
+++ b/web/html/xui/component/persianDatepicker.html
@@ -3,7 +3,7 @@
     <div>
         <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
                  @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
-                 placeholder="انتخاب تاریخ">
+                 :placeholder="placeholder">
             <template #addonAfter>
                 <a-icon type="calendar" style="font-size: 16px;"/>
             </template>
@@ -21,7 +21,7 @@
     const persianDatepicker = {};
 
     Vue.component('persian-datepicker', {
-        props: ['dropdown-class-name', 'format', 'value'],
+        props: ['placeholder', 'format', 'value'],
         template: `{{template "component/persianDatepickerTemplate"}}`,
         data() {
             return {
@@ -48,7 +48,7 @@
             listenToDatepicker() {
                 jalaliDatepicker.startWatch({
                     time: true,
-                    container: '.ant-modal-wrap',
+                    zIndex: '9999',
                     hideAfterChange: true,
                     useDropDownYears: false,
                     changeMonthRotateYear: true,
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
index 4d5412e2..3bc1ad7d 100644
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -11,6 +11,7 @@
   function createThemeSwitcher() {
     const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
     const theme = isDarkTheme ? 'dark' : 'light';
+    document.querySelector('body').setAttribute('class', theme)
     return {
       isDarkTheme,
       get currentTheme() {
@@ -19,6 +20,7 @@
       toggleTheme() {
         this.isDarkTheme = !this.isDarkTheme;
         localStorage.setItem('dark-mode', this.isDarkTheme);
+        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light')
       },
     };
   }
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 434a806e..526bbb8b 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -164,7 +164,7 @@
         </template>
         <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
             :dropdown-class-name="themeSwitcher.currentTheme" v-model="client._expiryTime"></a-date-picker>
-        <persian-datepicker v-else :dropdown-class-name="themeSwitcher.currentTheme"
+        <persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
                             value="client._expiryTime" v-model="client._expiryTime"></persian-datepicker>
         <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
     </a-form-item>
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 92ba6e75..048fc818 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -57,8 +57,8 @@
             <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                 :dropdown-class-name="themeSwitcher.currentTheme"
                 v-model="dbInbound._expiryTime"></a-date-picker>
-            <persian-datepicker v-else :dropdown-class-name="themeSwitcher.currentTheme"
-                                value="dbInbound._expiryTime" v-model="dbInbound._expiryTime"></persian-datepicker>
+            <persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
+                            value="dbInbound._expiryTime" v-model="dbInbound._expiryTime"></persian-datepicker>
         </a-form-item>
 </a-form>
 
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index 4fcb50c6..0b7ac5b2 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -251,6 +251,7 @@
 "pageSizeDesc" = "Define page size for inbounds table. (0 = disable)"
 "remarkModel" = "Remark Model & Separation Character"
 "datepicker" = "Calendar Type"
+"datepickerPlaceholder" = "Select date"
 "datepickerDescription" = "Scheduled tasks will run based on this calendar."
 "sampleRemark" = "Sample Remark"
 "oldUsername" = "Current Username"
diff --git a/web/translation/translate.es_ES.toml b/web/translation/translate.es_ES.toml
index a61689f9..926325cf 100644
--- a/web/translation/translate.es_ES.toml
+++ b/web/translation/translate.es_ES.toml
@@ -251,6 +251,7 @@
 "pageSizeDesc" = "Defina el tamaño de página para la tabla de entradas. Establezca 0 para desactivar"
 "remarkModel" = "Modelo de observación y carácter de separación"
 "datepicker" = "selector de fechas"
+"datepickerPlaceholder" = "Seleccionar fecha"
 "datepickerDescription" = "El tipo de calendario selector especifica la fecha de vencimiento"
 "sampleRemark" = "Observación de muestra"
 "oldUsername" = "Nombre de Usuario Actual"
diff --git a/web/translation/translate.fa_IR.toml b/web/translation/translate.fa_IR.toml
index 38c28579..17e6facc 100644
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -251,6 +251,7 @@
 "pageSizeDesc" = "(اندازه صفحه برای جدول ورودی‌ها.(0 = غیرفعال"
 "remarkModel" = "نام‌کانفیگ و جداکننده"
 "datepicker" = "نوع تقویم"
+"datepickerPlaceholder" = "انتخاب تاریخ"
 "datepickerDescription" = "وظایف برنامه ریزی شده بر اساس این تقویم اجرا می‌شود"
 "sampleRemark" = "نمونه‌نام"
 "oldUsername" = "نام‌کاربری فعلی"
diff --git a/web/translation/translate.ru_RU.toml b/web/translation/translate.ru_RU.toml
index 4bfda2b9..c567f38b 100644
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -251,6 +251,7 @@
 "pageSizeDesc" = "Определить размер страницы для входящей таблицы. Установите 0, чтобы отключить"
 "remarkModel" = "Модель примечания и символ разделения"
 "datepicker" = "выбор даты"
+"datepickerPlaceholder" = "Выберите дату"
 "datepickerDescription" = "Тип календаря выбора указывает дату истечения срока действия."
 "sampleRemark" = "Пример замечания"
 "oldUsername" = "Текущее имя пользователя"
diff --git a/web/translation/translate.vi_VN.toml b/web/translation/translate.vi_VN.toml
index cd19328d..5876a5b4 100644
--- a/web/translation/translate.vi_VN.toml
+++ b/web/translation/translate.vi_VN.toml
@@ -251,6 +251,7 @@
 "pageSizeDesc" = "Xác định kích thước trang cho bảng gửi đến. Đặt 0 để tắt"
 "remarkModel" = "Ghi chú mô hình và ký tự phân tách"
 "datepicker" = "Kiểu lịch"
+"datepickerPlaceholder" = "Chọn ngày"
 "datepickerDescription" = "Tác vụ chạy theo lịch trình sẽ chạy theo kiểu lịch này."
 "sampleRemark" = "Nhận xét mẫu"
 "oldUsername" = "Tên người dùng hiện tại"
diff --git a/web/translation/translate.zh_Hans.toml b/web/translation/translate.zh_Hans.toml
index a7399642..29dc8f4c 100644
--- a/web/translation/translate.zh_Hans.toml
+++ b/web/translation/translate.zh_Hans.toml
@@ -251,6 +251,7 @@
 "pageSizeDesc" = "定义入站表的页面大小。设置 0 表示禁用"
 "remarkModel" = "备注模型和分隔符"
 "datepicker" = "日期选择器"
+"datepickerPlaceholder" = "选择日期"
 "datepickerDescription" = "选择器日历类型指定到期日期"
 "sampleRemark" = "备注示例"
 "oldUsername" = "原用户名"