diff --git a/webUI/src/views/acc/component/notes.vue b/webUI/src/views/acc/component/notes.vue
index 365d1e4..a8f4e7b 100644
--- a/webUI/src/views/acc/component/notes.vue
+++ b/webUI/src/views/acc/component/notes.vue
@@ -2,22 +2,40 @@
 import { defineComponent } from 'vue';
 import axios from 'axios';
 
+interface Note {
+  id: number;
+  des: string;
+}
+
+interface Stat {
+  count: number;
+}
+
 export default defineComponent({
   name: 'Notes',
   props: {
-    stat: Object,
-    code: String,
-    typeNote: String,
+    stat: {
+      type: Object as () => Stat,
+      required: true
+    },
+    code: {
+      type: String,
+      required: true
+    },
+    typeNote: {
+      type: String,
+      required: true
+    },
   },
   data() {
     return {
       dialog: false, // برای باز و بسته کردن دیالوگ
       loading: false,
-      items: [],
+      items: [] as Note[],
       des: '',
       snackbar: false, // برای نمایش اسنک‌بار
       snackbarText: '', // متن پیام اسنک‌بار
-      snackbarColor: 'success', // رنگ اسنک‌بار (success, error)
+      snackbarColor: 'success' as 'success' | 'error', // رنگ اسنک‌بار (success, error)
     };
   },
   mounted() {
@@ -37,7 +55,7 @@ export default defineComponent({
           this.loading = false;
         });
     },
-    remove(id) {
+    remove(id: number) {
       this.loading = true;
       axios.post(`/api/notes/remove/${id}`).then((response) => {
         this.loading = false;
@@ -65,7 +83,7 @@ export default defineComponent({
           .post('/api/notes/add', {
             des: this.des,
             type: this.$props.typeNote,
-            code: this.$route.params.id,
+            code: this.$props.code,
           })
           .then((response) => {
             this.loading = false;
diff --git a/webUI/src/views/acc/transfer/list.vue b/webUI/src/views/acc/transfer/list.vue
index 2a8282e..b44bb8d 100644
--- a/webUI/src/views/acc/transfer/list.vue
+++ b/webUI/src/views/acc/transfer/list.vue
@@ -27,8 +27,8 @@
     <template v-slot:item.operation="{ item }">
       <v-menu>
         <template v-slot:activator="{ props }">
-          <v-btn icon variant="text" v-bind="props">
-            <v-icon>mdi-dots-vertical</v-icon>
+          <v-btn icon variant="text" size="small" color="error" v-bind="props">
+            <v-icon>mdi-menu</v-icon>
           </v-btn>
         </template>
 
@@ -36,7 +36,7 @@
           <v-list-item :to="'/acc/accounting/view/' + item.code" prepend-icon="mdi-file-document text-success">
             سند حسابداری
           </v-list-item>
-          <v-list-item :to="'/acc/transfer/mod/' + item.code" prepend-icon="mdi-eye text-primary">
+          <v-list-item @click="showTransferDetails(item)" prepend-icon="mdi-eye text-primary">
             مشاهده
           </v-list-item>
           <v-list-item :to="'/acc/transfer/mod/' + item.code" prepend-icon="mdi-pencil">
@@ -67,19 +67,120 @@
       </v-btn>
     </template>
   </v-data-table>
+
+  <v-dialog v-model="showDetailsDialog" max-width="600px">
+    <v-card>
+      <v-toolbar color="toolbar" title="جزئیات انتقال">
+        <template v-slot:append>
+          <archive-upload v-if="selectedTransfer?.code" :docid="selectedTransfer.code" doctype="transfer" cat="transfer"></archive-upload>
+          <notes :code="selectedTransfer?.code" :type-note="'transfer'" :stat="{ count: 0 }"></notes>
+          <document-log-button :doc-code="selectedTransfer?.code"></document-log-button>
+          <v-tooltip text="ویرایش" location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-btn v-bind="props" icon="mdi-pencil" variant="text" :to="'/acc/transfer/mod/' + selectedTransfer?.code" color="primary"></v-btn>
+            </template>
+          </v-tooltip>
+          <v-tooltip text="بستن" location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-btn v-bind="props" icon="mdi-close" variant="text" @click="showDetailsDialog = false"></v-btn>
+            </template>
+          </v-tooltip>
+        </template>
+      </v-toolbar>
+      <v-card-text>
+        <v-row>
+          <v-col cols="6">
+            <v-text-field
+              label="شماره سند"
+              :model-value="selectedTransfer?.code"
+              readonly
+              variant="outlined"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6">
+            <v-text-field
+              label="تاریخ"
+              :model-value="selectedTransfer?.date"
+              readonly
+              variant="outlined"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6">
+            <v-text-field
+              label="از"
+              :model-value="getFromTypeText(selectedTransfer)"
+              readonly
+              variant="outlined"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6">
+            <v-text-field
+              label="به"
+              :model-value="getToTypeText(selectedTransfer)"
+              readonly
+              variant="outlined"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6">
+            <v-text-field
+              label="مبلغ"
+              :model-value="selectedTransfer?.amount"
+              readonly
+              variant="outlined"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6">
+            <v-text-field
+              label="ثبت کننده"
+              :model-value="selectedTransfer?.submitter"
+              readonly
+              variant="outlined"
+              density="compact"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12">
+            <v-textarea
+              label="شرح"
+              :model-value="selectedTransfer?.des"
+              readonly
+              variant="outlined"
+              density="compact"
+              auto-grow
+              rows="2"
+            ></v-textarea>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script>
 import axios from "axios";
 import Swal from "sweetalert2";
 import { ref } from "vue";
+import archiveUpload from "../component/archive/archiveUpload.vue";
+import documentLogButton from "../component/documentLogButton.vue";
+import notes from "../component/notes.vue";
 
 export default {
   name: "list",
+  components: {
+    archiveUpload,
+    documentLogButton,
+    notes
+  },
   data: () => ({
     searchValue: '',
     loading: ref(true),
     items: [],
+    showDetailsDialog: false,
+    selectedTransfer: null,
     headers: [
       { title: "عملیات", key: "operation", sortable: false },
       { title: "شماره سند", key: "code", sortable: true },
@@ -124,6 +225,29 @@ export default {
           })
         }
       })
+    },
+    showTransferDetails(transfer) {
+      this.selectedTransfer = transfer;
+      this.showDetailsDialog = true;
+    },
+    getFromTypeText(transfer) {
+      if (!transfer) return '';
+      if (transfer.fromType === 'bank') return `حساب بانکی: ${transfer.fromObject}`;
+      if (transfer.fromType === 'salary') return `تنخواه گردان: ${transfer.fromObject}`;
+      if (transfer.fromType === 'cashDesk') return `صندوق: ${transfer.fromObject}`;
+      return '';
+    },
+    getToTypeText(transfer) {
+      if (!transfer) return '';
+      if (transfer.toType === 'bank') return `حساب بانکی: ${transfer.toObject}`;
+      if (transfer.toType === 'salary') return `تنخواه گردان: ${transfer.toObject}`;
+      if (transfer.toType === 'cashDesk') return `صندوق: ${transfer.toObject}`;
+      return '';
+    },
+    showHistory() {
+      if (this.selectedTransfer?.code) {
+        this.$router.push(`/acc/accounting/history/${this.selectedTransfer.code}`);
+      }
     }
   },
   beforeMount() {