diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 2810752..c86ab98 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -35,7 +35,6 @@ const props = defineProps<{
 
 const deleteState = ref<boolean>(false)
 const open = ref<boolean>(false)
-
 const deletePath = ref<string>('')
 const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
 const deleteMap = { deleteFolder, deleteFile }
@@ -348,7 +347,24 @@ const onRowClick = ((_, row) => {
                 self="center right"
                 :offset="[5, 1]"
               >
-                {{ getSize(data.row.fileSize) }}
+                <div class="flex" style="flex-direction: column">
+                  <span> ชื่อไฟล์ {{ data.row.fileName }}</span>
+                  <span
+                    >ชื่อเรื่อง
+                    {{
+                      data.row.metadata.subject ?? data.row.subject.title
+                    }}</span
+                  >
+                  <span
+                    >เจ้าของผลงาน
+                    {{ data.row.metadata.author ?? data.row.author }}</span
+                  >
+                  <span>ขนาดไฟล์ {{ getSize(data.row.fileSize) }}</span>
+                  <span
+                    >ประเภทไฟล์
+                    {{ getType(data.row.fileType, data.row.fileName) }}</span
+                  >
+                </div>
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">
@@ -390,11 +406,21 @@ const onRowClick = ((_, row) => {
   justify-content: center;
   align-items: center;
 }
-
+.justify-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .sort-icon-offset-margin {
   margin-right: 18px;
 }
+.q-item-label {
+  text-align: left;
+}
 
+.underline {
+  text-decoration: underline;
+}
 .cursor {
   cursor: pointer;
 }