diff --git a/webUI/src/views/acc/accounting/list.vue b/webUI/src/views/acc/accounting/list.vue
index 2f51e65b..2e2f38c8 100644
--- a/webUI/src/views/acc/accounting/list.vue
+++ b/webUI/src/views/acc/accounting/list.vue
@@ -1,92 +1,129 @@
 <template>
-  <div class="block block-content-full ">
-    <div id="fixed-header" class="block-header block-header-default bg-gray-light pt-2 pb-1">
-      <h3 class="block-title text-primary-dark">
-        <button @click="$router.back()" type="button" class="float-start d-none d-sm-none d-md-block btn btn-sm btn-link text-warning">
-          <i class="fa fw-bold fa-arrow-right"></i>
-        </button>
-        <i class="fa fa-book-open-reader"></i>
-        اسناد حسابداری</h3>
-    </div>
-    <div class="block-content pt-1 pb-3">
-      <div class="row">
-        <div class="col-sm-12 col-md-12 m-0 p-0">
-          <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="items"
-              theme-color="#1d90ff"
-              header-text-direction="center"
-              body-text-direction="center"
-              rowsPerPageMessage="تعداد سطر"
-              emptyMessage="اطلاعاتی برای نمایش وجود ندارد"
-              rowsOfPageSeparatorMessage="از"
-              :loading = "loading"
-          >
-            <template #item-state="{ type }">
-              <i v-if="type != 'accounting'" class="fa fa-lock text-danger"></i>
-              <i v-else class="fa fa-lock-open text-success"></i>
-            </template>
-            <template #item-operation="{ code,type }">
-              <router-link class="btn btn-sm btn-link text-success" :to="'/acc/accounting/view/' + code">
-                <i class="fa fa-eye px-1"></i>
-              </router-link>
-            </template>
-          </EasyDataTable>
-        </div>
-      </div>
-    </div>
+  <div>
+    <v-toolbar
+      color="toolbar"
+      title="اسناد حسابداری"
+    >
+    <template v-slot:prepend>
+      <v-tooltip :text="$t('dialog.back')" location="bottom">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" @click="$router.back()" class="d-none d-sm-flex" variant="text"
+            icon="mdi-arrow-right" />
+        </template>
+      </v-tooltip>
+    </template>
+    </v-toolbar>
+
+    <v-text-field
+      v-model="searchValue"
+      prepend-inner-icon="mdi-magnify"
+      density="compact"
+      hide-details
+      :rounded="false"
+      placeholder="جست و جو ..."
+    ></v-text-field>
+
+    <v-data-table
+      :headers="headers"
+      :items="filteredItems"
+      :search="searchValue"
+      :loading="loading"
+      :header-props="{ class: 'custom-header' }"
+      hover
+    >
+      <template v-slot:item.state="{ item }">
+        <v-icon
+          :color="item.type !== 'accounting' ? 'error' : 'success'"
+        >
+          {{ item.type !== 'accounting' ? 'mdi-lock' : 'mdi-lock-open' }}
+        </v-icon>
+      </template>
+
+      <template v-slot:item.operation="{ item }">
+        <v-tooltip text="مشاهده سند" location="bottom">
+          <template v-slot:activator="{ props }">
+            <v-btn
+              v-bind="props"
+              icon
+              variant="text"
+              color="success"
+              :to="'/acc/accounting/view/' + item.code"
+            >
+              <v-icon>mdi-eye</v-icon>
+            </v-btn>
+          </template>
+        </v-tooltip>
+      </template>
+    </v-data-table>
   </div>
 </template>
 
-<script>
-import axios from "axios";
-import Swal from "sweetalert2";
-import {ref} from "vue";
-export default {
-  name: "list",
-  data: ()=>{return {
-    searchValue: '',
-    loading: ref(true),
-    items:[],
-    headers: [
-      { text: "وضعیت", value: "state" , sortable: true},
-      { text: "عملیات", value: "operation"},
-      { text: "کد", value: "code" , sortable: true},
-      { text: "تاریخ", value: "date", sortable: true},
-      { text: "شرح", value: "des", sortable: true},
-      { text: "مبلغ", value: "amount", sortable: true},
-      { text: "ثبت کننده", value: "submitter", sortable: true},
-    ]
-  }},
-  methods: {
-    loadData(){
-      axios.post('/api/accounting/search',{
-        type: 'all'
-      })
-          .then((response)=>{
-            this.items = response.data;
-            this.items.forEach((item)=>{
-              item.amount = this.$filters.formatNumber(item.amount)
-            })
-            this.loading = false;
-          })
-    }
-  },
-  beforeMount() {
-    this.loadData();
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import axios from 'axios'
+
+const searchValue = ref('')
+const loading = ref(true)
+const items = ref([])
+
+const headers = [
+  { title: 'وضعیت', key: 'state', sortable: true },
+  { title: 'عملیات', key: 'operation' },
+  { title: 'کد', key: 'code', sortable: true },
+  { title: 'تاریخ', key: 'date', sortable: true },
+  { title: 'شرح', key: 'des', sortable: true },
+  { title: 'مبلغ', key: 'amount', sortable: true },
+  { title: 'ثبت کننده', key: 'submitter', sortable: true }
+]
+
+const loadData = async () => {
+  try {
+    const response = await axios.post('/api/accounting/search', {
+      type: 'all'
+    })
+    items.value = response.data.map(item => ({
+      ...item,
+      amount: item.amount.toLocaleString(),
+      amountRaw: item.amount
+    }))
+    loading.value = false
+  } catch (error) {
+    console.error('Error loading data:', error)
+    loading.value = false
   }
 }
+
+const filteredItems = computed(() => {
+  if (!searchValue.value) return items.value
+  
+  const search = searchValue.value.toLowerCase()
+  const searchWithoutComma = search.replace(/,/g, '')
+  const searchNumber = parseInt(searchWithoutComma)
+  const isNumberSearch = !isNaN(searchNumber)
+  
+  return items.value.filter(item => {
+    const formattedAmount = item.amount.toLocaleString()
+    
+    return (
+      item.code.toLowerCase().includes(search) ||
+      item.date.toLowerCase().includes(search) ||
+      item.des.toLowerCase().includes(search) ||
+      item.submitter.toLowerCase().includes(search) ||
+      (isNumberSearch && (
+        item.amount.toString().includes(searchWithoutComma) ||
+        formattedAmount.includes(search)
+      ))
+    )
+  })
+})
+
+onMounted(() => {
+  loadData()
+})
 </script>
 
 <style scoped>
-
+.v-data-table {
+  direction: rtl;
+}
 </style>
\ No newline at end of file
diff --git a/webUI/src/views/acc/component/rec.vue b/webUI/src/views/acc/component/rec.vue
index afc96a02..0e75632c 100644
--- a/webUI/src/views/acc/component/rec.vue
+++ b/webUI/src/views/acc/component/rec.vue
@@ -219,7 +219,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import axios from 'axios'
-import { VDataTable } from 'vuetify/components'
+import { VDataTable as DataTable } from 'vuetify/components'
 import Hdatepicker from '@/components/forms/Hdatepicker.vue'
 import Hnumberinput from '@/components/forms/Hnumberinput.vue'
 
@@ -243,7 +243,7 @@ interface Item {
 export default defineComponent({
   name: 'Rec',
   components: {
-    VDataTable,
+    DataTable,
     Hdatepicker,
     Hnumberinput
   },