diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 073b97e..3b8a68f 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -108,6 +108,13 @@ function triggerFileEdit(
   }
 }
 
+function getFileNameFormat(fileName: string): string {
+  const dotIndex = fileName.lastIndexOf('.')
+  const fileNameOnly = fileName.substring(0, dotIndex)
+
+  return fileNameOnly
+}
+
 async function submitFileForm(value: {
   mode: 'create' | 'edit'
   file: File
@@ -278,7 +285,7 @@ async function submitFileForm(value: {
           <q-card-section class="column justify-center relative q-px-xl">
             <file-icon
               size="preview"
-              :fileMimeType="value.fileType"
+              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
               ref="fileIconComp"
             />
             <div
@@ -302,7 +309,9 @@ async function submitFileForm(value: {
                 @delete="() => deleteFile(value.pathname)"
               />
             </div>
-            <span class="text-center q-pt-md">{{ value.title }}</span>
+            <span class="text-center q-pt-md">{{
+              getFileNameFormat(value.fileName)
+            }}</span>
           </q-card-section>
         </q-card>
       </div>