diff --git a/webUI/src/components/forms/Hdatepicker.vue b/webUI/src/components/forms/Hdatepicker.vue
index 1e4874a..7a214bc 100644
--- a/webUI/src/components/forms/Hdatepicker.vue
+++ b/webUI/src/components/forms/Hdatepicker.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <v-text-field v-model="displayDate" :label="label" prepend-inner-icon="mdi-calendar" persistent-placeholder
-      class="v-date-input" :rules="rules" @input="updateDateFromInput" @click:prepend="togglePicker"></v-text-field>
+      :class="['v-date-input', `date-input-${uniqueId}`]" :rules="rules" @input="updateDateFromInput" @click:prepend="togglePicker"></v-text-field>
     <date-picker v-model="displayDate" type="date" format="jYYYY/jMM/jDD" display-format="jYYYY/jMM/jDD"
-      :min="minDatePersian" :max="maxDatePersian" custom-input=".v-date-input" :input-mode="false"
+      :min="minDatePersian" :max="maxDatePersian" :custom-input="`.date-input-${uniqueId}`" :input-mode="true"
       :editable="pickerActive" @close="pickerActive = false"></date-picker>
   </div>
 </template>
@@ -14,7 +14,7 @@ import moment from 'jalali-moment';
 
 export default {
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -29,42 +29,52 @@ export default {
   },
   data() {
     return {
-      displayDate: '', // تاریخ به فرمت شمسی
+      displayDate: this.modelValue, // مقداردهی اولیه از prop
       pickerActive: false, // کنترل باز شدن تقویم
       minDatePersian: '', // تاریخ شروع سال مالی (شمسی برای پکیج)
       maxDatePersian: '', // تاریخ پایان سال مالی (شمسی برای پکیج)
+      uniqueId: '', // شناسه یکتا برای هر نمونه
+      isInitialized: false, // فلگ برای کنترل مقداردهی اولیه
     };
   },
+  created() {
+    // ایجاد شناسه یکتا برای هر نمونه از کامپوننت
+    this.uniqueId = Math.random().toString(36).substring(2, 15);
+  },
   watch: {
-    displayDate(newVal) {
-      if (newVal) {
-        this.$emit('input', newVal); // ارسال تاریخ شمسی به والد
-      } else {
-        this.$emit('input', '');
+    displayDate(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.$emit('update:modelValue', newVal);
       }
     },
-    value(newVal) {
-      if (newVal) {
-        this.displayDate = newVal;
-      } else {
-        this.displayDate = '';
+    modelValue: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal && newVal !== this.displayDate) {
+          this.displayDate = newVal;
+        }
       }
-    },
+    }
   },
   async mounted() {
     await this.fetchYearData();
-    if (!this.value && this.displayDate) {
-      this.$emit('input', this.displayDate);
-    }
   },
   methods: {
     async fetchYearData() {
-
-      axios.get('/api/year/get').then((response) => {
-        this.minDatePersian = response.data.start; // فرمت YYYY/MM/DD شمسی
-        this.maxDatePersian = response.data.end; // فرمت YYYY/MM/DD شمسی
-        this.displayDate = response.data.now; // تاریخ جاری شمسی
-      });
+      try {
+        const response = await axios.get('/api/year/get');
+        this.minDatePersian = response.data.start;
+        this.maxDatePersian = response.data.end;
+        
+        // فقط اگر مقدار اولیه نداریم، از تاریخ جاری استفاده کنیم
+        if (!this.modelValue && !this.isInitialized) {
+          this.displayDate = response.data.now;
+          this.$emit('update:modelValue', response.data.now);
+          this.isInitialized = true;
+        }
+      } catch (error) {
+        console.error('خطا در دریافت اطلاعات سال:', error);
+      }
     },
     updateDateFromInput(value) {
       // بررسی و اعتبارسنجی تاریخ وارد شده توسط کاربر
diff --git a/webUI/src/views/acc/component/rec.vue b/webUI/src/views/acc/component/rec.vue
index 66a0c95..c631b38 100644
--- a/webUI/src/views/acc/component/rec.vue
+++ b/webUI/src/views/acc/component/rec.vue
@@ -1,11 +1,5 @@
 <template>
-  <v-btn
-    v-if="totalAmount > 0"
-    icon
-    color="error"
-    class="ml-2"
-    @click="dialog = true"
-  >
+  <v-btn v-if="totalAmount > 0" icon color="error" class="ml-2" @click="dialog = true">
     <v-icon>mdi-cash</v-icon>
     <v-tooltip activator="parent" location="bottom">ثبت دریافت</v-tooltip>
   </v-btn>
@@ -50,58 +44,26 @@
       </v-toolbar>
 
       <v-card-text>
-        <v-alert
-          v-if="errorMessage"
-          type="error"
-          dismissible
-          @input="errorMessage = ''"
-          class="mb-4"
-        >
-          {{ errorMessage }}
-        </v-alert>
         <v-row>
           <v-col cols="12" md="5">
             <Hdatepicker v-model="date" label="تاریخ" />
           </v-col>
           <v-col cols="12" md="7">
-            <v-text-field
-              v-model="des"
-              label="شرح"
-              outlined
-              clearable
-              class="mb-4"
-            ></v-text-field>
+            <v-text-field v-model="des" label="شرح" outlined clearable class="mb-4"></v-text-field>
           </v-col>
         </v-row>
 
         <v-row>
           <v-col cols="12" md="6">
-            <v-text-field
-              v-model="formattedTotalPays"
-              label="مجموع"
-              readonly
-              outlined
-            ></v-text-field>
+            <v-text-field v-model="formattedTotalPays" label="مجموع" readonly outlined></v-text-field>
           </v-col>
           <v-col cols="12" md="6">
-            <v-text-field
-              v-model="formattedRemainingAmount"
-              label="باقی مانده"
-              readonly
-              outlined
-            ></v-text-field>
+            <v-text-field v-model="formattedRemainingAmount" label="باقی مانده" readonly outlined></v-text-field>
           </v-col>
         </v-row>
 
-        <v-data-table
-          :headers="headers"
-          :items="items"
-          :loading="loading"
-          class="elevation-1 mt-2"
-          :header-props="{ class: 'custom-header' }"
-          :items-per-page="-1"
-          hide-default-footer
-        >
+        <v-data-table :headers="headers" :items="items" :loading="loading" class="elevation-1 mt-2"
+          :header-props="{ class: 'custom-header' }" :items-per-page="-1" hide-default-footer>
           <template v-slot:item.type="{ item }">
             <v-icon v-if="item.type === 'bank'">mdi-bank</v-icon>
             <v-icon v-if="item.type === 'cashdesk'">mdi-cash-register</v-icon>
@@ -109,105 +71,34 @@
             <v-icon v-if="item.type === 'cheque'">mdi-checkbook</v-icon>
           </template>
           <template v-slot:item.selection="{ item }">
-            <v-select
-              v-if="item.type === 'bank'"
-              v-model="item.bank"
-              :items="listBanks"
-              item-title="name"
-              return-object
-              label="بانک"
-              outlined
-              dense
-            ></v-select>
-            <v-select
-              v-if="item.type === 'cashdesk'"
-              v-model="item.cashdesk"
-              :items="listCashdesks"
-              item-title="name"
-              return-object
-              label="صندوق"
-              outlined
-              dense
-            ></v-select>
-            <v-select
-              v-if="item.type === 'salary'"
-              v-model="item.salary"
-              :items="listSalarys"
-              item-title="name"
-              return-object
-              label="تنخواه گردان"
-              outlined
-              dense
-            ></v-select>
+            <v-select v-if="item.type === 'bank'" v-model="item.bank" :items="listBanks" item-title="name" return-object
+              label="بانک"></v-select>
+            <v-select v-if="item.type === 'cashdesk'" v-model="item.cashdesk" :items="listCashdesks" item-title="name"
+              return-object label="صندوق"></v-select>
+            <v-select v-if="item.type === 'salary'" v-model="item.salary" :items="listSalarys" item-title="name"
+              return-object label="تنخواه گردان"></v-select>
             <template v-if="item.type === 'cheque'">
-              <v-text-field
-                v-model="item.chequeNum"
-                label="شماره چک"
-                outlined
-                dense
-                required
-              ></v-text-field>
-              <v-text-field
-                v-model="item.chequeSayadNum"
-                label="شماره صیاد"
-                outlined
-                dense
-                required
-              ></v-text-field>
-              <v-text-field
-                v-model="item.chequeBank"
-                label="بانک صادرکننده"
-                outlined
-                dense
-                required
-              ></v-text-field>
-              <Hdatepicker
-                v-model="item.chequeDate"
-                label="تاریخ چک"
-                required
-              />
+              <v-text-field class="mb-2 mt-1" v-model="item.chequeNum" label="شماره چک" required></v-text-field>
+              <v-text-field class="mb-2" v-model="item.chequeSayadNum" label="شماره صیاد" dense required></v-text-field>
+              <v-text-field class="mb-2" v-model="item.chequeBank" label="بانک صادرکننده" required></v-text-field>
+              <Hdatepicker class="mb-1" v-model="item.chequeDate" label="تاریخ چک" required />
             </template>
           </template>
           <template v-slot:item.bd="{ item }">
-            <Hnumberinput
-              v-model="item.bd"
-              label="مبلغ"
-              outlined
-              dense
-              placeholder="0"
-              @update:modelValue="calc"
-            />
+            <Hnumberinput v-model="item.bd" label="مبلغ" placeholder="0" @update:modelValue="calc" />
           </template>
           <template v-slot:item.referral="{ item }">
-            <v-text-field
-              v-model="item.referral"
-              label="ارجاع"
-              outlined
-              dense
-            ></v-text-field>
+            <v-text-field v-model="item.referral" label="ارجاع"></v-text-field>
           </template>
           <template v-slot:item.des="{ item }">
-            <v-text-field
-              v-model="item.des"
-              label="شرح"
-              outlined
-              dense
-            ></v-text-field>
+            <v-text-field v-model="item.des" label="شرح"></v-text-field>
           </template>
           <template v-slot:item.actions="{ item, index }">
-            <v-btn
-              variant="plain"
-              color="primary"
-              @click="fillWithTotal(item)"
-            >
+            <v-btn variant="plain" color="primary" @click="fillWithTotal(item)">
               <v-icon>mdi-cash-100</v-icon>
               <v-tooltip activator="parent" location="bottom">کل فاکتور</v-tooltip>
             </v-btn>
-            <v-btn
-              variant="plain"
-              color="error"
-              @click="deleteItem(index)"
-            >
+            <v-btn variant="plain" color="error" @click="deleteItem(index)">
               <v-icon>mdi-trash-can</v-icon>
               <v-tooltip activator="parent" location="bottom">حذف</v-tooltip>
             </v-btn>
@@ -225,6 +116,16 @@
       </v-overlay>
     </v-card>
   </v-dialog>
+
+  <v-dialog v-model="successDialog" max-width="400">
+    <v-card color="success">
+      <v-card-text class="text-center pa-4">
+        <v-icon size="large" color="white" class="mb-4">mdi-check-circle</v-icon>
+        <div class="text-h6 text-white mb-2">ثبت موفق</div>
+        <div class="text-white">{{ successMessage }}</div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts">
@@ -261,7 +162,9 @@ export default defineComponent({
     listCashdesks: [],
     totalPays: 0,
     loading: false,
-    errorMessage: ''
+    errorMessage: '',
+    successDialog: false,
+    successMessage: ''
   }),
   computed: {
     headers() {
@@ -278,17 +181,17 @@ export default defineComponent({
       return this.totalAmount - this.totalPays
     },
     formattedTotalPays() {
-      return this.formatNumber(this.totalPays)
+      return this.formatNumber(this.totalPays) || '۰';
     },
     formattedRemainingAmount() {
-      return this.formatNumber(this.remainingAmount)
+      return this.formatNumber(this.remainingAmount) || '۰';
     }
   },
   methods: {
     formatNumber(value: number | string): string {
-      if (!value) return ''
-      const num = parseInt(value.toString().replace(/[^\d]/g, ''))
-      return num.toLocaleString('fa-IR')
+      if (value === undefined || value === null || value === '') return '۰';
+      const num = parseInt(value.toString().replace(/[^\d]/g, ''));
+      return num.toLocaleString('fa-IR') || '۰';
     },
     fillWithTotal(pay) {
       pay.bd = this.totalAmount - this.totalPays
@@ -423,26 +326,42 @@ export default defineComponent({
           related: this.originalDoc
         })
 
-        if (response.data.result === '1') {
+        if (response.data.result === 1) {
           this.submitedDoc = response.data.doc
-          this.windowsState.submited = true
-          this.dialog = false
-        } else if (response.data.result === '4') {
-          this.errorMessage = response.data.msg
+
+          if (this.windowsState) {
+            this.windowsState.submited = true
+          }
+
+          this.successMessage = 'سند دریافت با موفقیت ثبت شد'
+          this.successDialog = true
+
+          setTimeout(() => {
+            this.successDialog = false
+            this.dialog = false
+          }, 2000)
+
+          this.$emit('submit-success', response.data.doc)
+        } else {
+          this.errorMessage = response.data.msg || 'خطا در ثبت سند'
         }
       } catch (error) {
-        this.errorMessage = 'خطا در ثبت سند'
+        this.errorMessage = error.response?.data?.message || 'خطا در ثبت سند'
       } finally {
         this.loading = false
       }
     }
   },
-  mounted() {
-    this.loadData()
+  async mounted() {
+    await this.loadData()
+    const response = await axios.get('/api/year/get')
+    this.date = response.data.now // تاریخ جاری شمسی
   }
 })
 </script>
 
 <style scoped>
-/* استایل‌های دلخواه */
+.v-card.success {
+  background-color: #4caf50 !important;
+}
 </style>
\ No newline at end of file
diff --git a/webUI/src/views/acc/component/recList.vue b/webUI/src/views/acc/component/recList.vue
index 1b41ff9..e582076 100644
--- a/webUI/src/views/acc/component/recList.vue
+++ b/webUI/src/views/acc/component/recList.vue
@@ -7,87 +7,175 @@ import axios from "axios";
 export default defineComponent({
   name: "recList",
   props: {
-    items: Array,
-    windowsState: Object
-  },
-  data: () => {
-    return {
-      searchValue: '',
-      loading: ref(false),
-      headers: [
-        { text: "شماره سند", value: "code", sortable: true },
-        { text: "تاریخ", value: "date", sortable: true },
-        { text: "شرح", value: "des", sortable: true },
-        { text: "مبلغ", value: "amount", sortable: true },
-        { text: "نوع", value: "type", sortable: true },
-        { text: "عملیات", value: "operation" },
-      ]
+    items: {
+      type: Array,
+      required: true
+    },
+    windowsState: {
+      type: Object,
+      required: true
     }
   },
+  data: () => ({
+    dialog: false,
+    searchValue: '',
+    loading: false,
+    headers: [
+      {
+        title: 'شماره سند',
+        key: 'code',
+        sortable: true,
+        align: 'center'
+      },
+      {
+        title: 'تاریخ',
+        key: 'date',
+        sortable: true,
+        align: 'center'
+      },
+      {
+        title: 'شرح',
+        key: 'des',
+        sortable: true,
+        align: 'center'
+      },
+      {
+        title: 'مبلغ',
+        key: 'amount',
+        sortable: true,
+        align: 'center'
+      },
+      {
+        title: 'نوع',
+        key: 'type',
+        sortable: true,
+        align: 'center'
+      },
+      {
+        title: 'عملیات',
+        key: 'operation',
+        sortable: false,
+        align: 'center'
+      }
+    ]
+  }),
   methods: {
-    deleteItem(code) {
-      Swal.fire({
-        text: 'آیا برای حذف این مورد مطمئن هستید؟',
-        showCancelButton: true,
-        confirmButtonText: 'بله',
-        cancelButtonText: `خیر`,
-        icon: 'warning'
-      }).then((result) => {
-        /* Read more about isConfirmed, isDenied below */
+    async deleteItem(code: string) {
+      try {
+        const result = await Swal.fire({
+          text: 'آیا برای حذف این مورد مطمئن هستید؟',
+          showCancelButton: true,
+          confirmButtonText: 'بله',
+          cancelButtonText: 'خیر',
+          icon: 'warning'
+        })
+
         if (result.isConfirmed) {
-          axios.post('/api/accounting/remove', {
-            'code': code
+          const response = await axios.post('/api/accounting/remove', { code })
+
+          if (response.data.result === 1) {
+            await Swal.fire({
+              text: 'سند دریافت فاکتور با موفقیت حذف شد.',
+              icon: 'success',
+              confirmButtonText: 'قبول'
+            })
+            this.windowsState.submited = true
+          }
+
+          if (response.data.result === 2) {
+            await Swal.fire({
+              text: response.data.message,
+              icon: 'success',
+              confirmButtonText: 'قبول'
+            })
           }
-          ).then((response) => {
-            if (response.data.result == 1) {
-              Swal.fire({
-                text: 'سند دریافت فاکتور با موفقیت حذف شد.',
-                icon: 'success',
-                confirmButtonText: 'قبول'
-              }).then((result) => {
-                this.$props.windowsState.submited = true;
-              });
-            }
-            if (response.data.result == 2) {
-              Swal.fire({
-                text: response.data.message,
-                icon: 'success',
-                confirmButtonText: 'قبول'
-              });
-            }
-          })
         }
-      })
+      } catch (error) {
+        console.error('Error deleting item:', error)
+        await Swal.fire({
+          text: 'خطا در حذف سند',
+          icon: 'error',
+          confirmButtonText: 'قبول'
+        })
+      }
     }
   }
 })
 </script>
 
 <template>
-  <div class="mb-1">
-    <div class="input-group input-group-sm">
-      <span class="input-group-text"><i class="fa fa-search"></i></span>
-      <input v-model="searchValue" class="form-control" type="text" placeholder="جست و جو ...">
-    </div>
-  </div>
-  <EasyDataTable table-class-name="customize-table" show-index alternating :search-value="searchValue" :headers="headers" :items="this.$props.items"
-    theme-color="#1d90ff" header-text-direction="center" body-text-direction="center" rowsPerPageMessage="تعداد سطر"
-    emptyMessage="اطلاعاتی برای نمایش وجود ندارد" rowsOfPageSeparatorMessage="از" :loading="loading">
-    <template #item-operation="{ code, type }">
-      <span v-if="type == 'sell_receive' || type == 'buy_send'" class="text-danger px-1">
-        <span class="text-danger px-1" @click="deleteItem(code)">
-          <i class="fa fa-trash"></i>
-        </span>
-      </span>
-    </template>
-    <template #item-type="{ type }">
-      <span v-if="type == 'sell_receive' || type == 'buy_send'" class="text-danger px-1">سند حسابداری</span>
-      <span v-else class="text-success px-1">پرداخت آنلاین</span>
-    </template>
-    <template #item-amount="{ amount }">
-      <span>{{ $filters.formatNumber(amount) }}</span>
-    </template>
-  </EasyDataTable>
+  <!-- دکمه نمایش لیست -->
+  <v-btn icon color="info" class="ml-2" @click="dialog = true">
+    <v-icon>mdi-format-list-bulleted</v-icon>
+    <v-tooltip activator="parent" location="bottom">لیست دریافت‌ها</v-tooltip>
+  </v-btn>
+
+  <!-- دیالوگ نمایش لیست -->
+  <v-dialog v-model="dialog" max-width="900" persistent>
+    <v-card>
+      <v-toolbar color="grey-lighten-4" flat>
+        <v-toolbar-title>
+          <v-icon color="info" class="ml-2">mdi-format-list-bulleted</v-icon>
+          لیست دریافت‌ها
+        </v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon @click="dialog = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-toolbar>
+
+      <v-card-text class="pa-0">
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          :search="searchValue"
+          :loading="loading"
+          class="elevation-1"
+          :header-props="{ class: 'custom-header' }"
+          hover
+        >
+          <!-- ستون نوع -->
+          <template v-slot:item.type="{ item }">
+            <v-chip
+              :color="item.type === 'sell_receive' || item.type === 'buy_send' ? 'error' : 'success'"
+              size="small"
+              variant="flat"
+            >
+              {{ item.type === 'sell_receive' || item.type === 'buy_send' ? 'سند حسابداری' : 'پرداخت آنلاین' }}
+            </v-chip>
+          </template>
+
+          <!-- ستون مبلغ -->
+          <template v-slot:item.amount="{ item }">
+            {{ $filters.formatNumber(item.amount) }}
+          </template>
+
+          <!-- ستون عملیات -->
+          <template v-slot:item.operation="{ item }">
+            <v-btn
+              v-if="item.type === 'sell_receive' || item.type === 'buy_send'"
+              color="error"
+              size="default"
+              variant="plain"
+              @click="deleteItem(item.code)"
+            >
+              <v-icon>mdi-trash-can</v-icon>
+              <v-tooltip activator="parent" location="top">حذف</v-tooltip>
+            </v-btn>
+          </template>
+
+          <!-- نمایش پیام خالی بودن جدول -->
+          <template v-slot:no-data>
+            <v-alert type="info" variant="tonal" class="ma-2">
+              اطلاعاتی برای نمایش وجود ندارد
+            </v-alert>
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/webUI/src/views/acc/sell/viewInvoice.vue b/webUI/src/views/acc/sell/viewInvoice.vue
index 44fb0a7..a4841a4 100644
--- a/webUI/src/views/acc/sell/viewInvoice.vue
+++ b/webUI/src/views/acc/sell/viewInvoice.vue
@@ -34,7 +34,6 @@ export default defineComponent({
     },
   },
   data: () => ({
-    recListDialog: false,
     activeTab: 'invoice-info',
     loading: ref(true),
     shortlink_url: '',
@@ -159,6 +158,10 @@ export default defineComponent({
       </v-tooltip>
     </template>
     <v-spacer></v-spacer>
+    <v-btn icon :to="`/acc/sell/mod/${$route.params.id}`">
+      <v-icon>mdi-pencil</v-icon>
+      <v-tooltip activator="parent" location="bottom">ویرایش</v-tooltip>
+    </v-btn>
     <v-btn icon v-if="item.doc.id !== 0">
       <archive-upload :docid="item.doc.id" doctype="sell" cat="sell" />
       <v-tooltip activator="parent" location="bottom">آرشیو</v-tooltip>
@@ -166,10 +169,11 @@ export default defineComponent({
     <notes :stat="notes" :code="$route.params.id" type-note="sell" />
     <rec v-if="parseInt(item.doc.amount) > parseInt(totalRec)" :windows-state="PayWindowsState" :person="person.id" :original-doc="item.doc.code" :total-amount="parseInt(item.doc.amount) - parseInt(totalRec)" />
 
-    <v-btn icon color="info" class="ml-2" @click="recListDialog = true">
-      <v-icon>mdi-arrow-down-circle</v-icon>
-      <v-tooltip activator="parent" location="bottom">دریافت‌ها</v-tooltip>
-    </v-btn>
+    <rec-list 
+      :windows-state="recListWindowsState" 
+      :items="item.relatedDocs" 
+    />
+
     <share-options v-if="bid.shortlinks" :shortlink-url="shortlink_url" :mobile="person.mobile" :invoice-id="item.doc.id" />
     <print-options :invoice-id="$route.params.id" />
   </v-toolbar>
@@ -315,23 +319,33 @@ export default defineComponent({
         </v-card-text>
       </v-window-item>
     </v-window>
-    <v-dialog v-model="recListDialog" max-width="800">
-      <v-card>
-        <v-card-title>
-          <v-icon left>mdi-arrow-down-circle</v-icon>
-          دریافت‌ها
-        </v-card-title>
-        <v-card-text>
-          <rec-list :windows-state="recListWindowsState" :items="item.relatedDocs" />
-        </v-card-text>
-        <v-card-actions>
-          <v-btn color="secondary" @click="recListDialog = false">بازگشت</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </v-container>
 </template>
 
 <style scoped>
+/* استایل برای هدر جدول */
+:deep(.custom-header) th {
+  text-align: center !important;
+  justify-content: center !important;
+  white-space: nowrap;
+  font-weight: bold;
+}
 
+/* استایل برای محتوای سلول‌های جدول */
+:deep(.v-data-table-rows-item) td {
+  text-align: center !important;
+  justify-content: center !important;
+}
+
+/* برای اطمینان از وسط چین بودن محتوای سلول‌ها */
+:deep(.v-data-table) .v-data-table__wrapper table tbody td {
+  text-align: center !important;
+}
+
+/* برای لینک‌ها و آیکون‌ها در جدول */
+:deep(.v-data-table) .v-data-table__wrapper table tbody td a,
+:deep(.v-data-table) .v-data-table__wrapper table tbody td .v-icon {
+  display: inline-flex;
+  justify-content: center;
+}
 </style>
\ No newline at end of file
diff --git a/webUI/src/views/user/login.vue b/webUI/src/views/user/login.vue
index 4967152..9b781a9 100644
--- a/webUI/src/views/user/login.vue
+++ b/webUI/src/views/user/login.vue
@@ -77,7 +77,7 @@ export default {
       loading: false,
       captchaLoading: false,
       dialog: false,
-      siteName:'',
+      siteName: '',
       showCaptcha: false,
       errorMsg: self.$t('login.input_fail'),
       captchaImage: '',
@@ -155,20 +155,21 @@ export default {
           const response = await axios.post("/api/user/login", userData, {
             withCredentials: true,
           });
-          if (response.data.Success === true) {
+          if (response.data.Success == true) {
             this.setTokenAndRedirect(response);
           }
-        } catch (error) {
-          const errorData = (error as any).response?.data || {};
-          this.errorMsg = errorData.error || this.$t('login.input_fail');
-          this.dialog = true;
-
-          if (errorData.captcha_required) {
+          if (response.data?.data?.captcha_required == true) {
             this.showCaptcha = true;
             await this.loadCaptcha();
           } else {
             this.showCaptcha = false;
           }
+        } catch (error) {
+          const errorData = (error as any).response?.data || {};
+          this.showCaptcha = true;
+          await this.loadCaptcha();
+          this.errorMsg = errorData.message || errorData.error || this.$t('login.input_fail');
+          this.dialog = true;
         } finally {
           this.loading = false;
         }
@@ -190,7 +191,7 @@ export default {
   mounted() {
     // کپچا در ابتدا نمایش داده نمی‌شه
   },
-  async created(){
+  async created() {
     this.siteName = await getSiteName();
   },
 };