diff --git a/frontend/src/api/interface/file.ts b/frontend/src/api/interface/file.ts
index 200954f08..d993d5689 100644
--- a/frontend/src/api/interface/file.ts
+++ b/frontend/src/api/interface/file.ts
@@ -17,6 +17,7 @@ export namespace File {
         mimeType: string;
         dirSize: number;
         items: File[];
+        extension: string;
     }
 
     export interface ReqFile {
diff --git a/frontend/src/utils/util.ts b/frontend/src/utils/util.ts
index 108af921f..1af0661f4 100644
--- a/frontend/src/utils/util.ts
+++ b/frontend/src/utils/util.ts
@@ -82,3 +82,21 @@ export function computeSize(size: number): string {
     if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + ' GB';
     return (size / Math.pow(num, 4)).toFixed(2) + ' TB';
 }
+
+let icons = new Map([
+    ['.zip', 'p-file-zip'],
+    ['.gz', 'p-file-zip'],
+    ['.tar.bz2', 'p-file-zip'],
+    ['.tar', 'p-file-zip'],
+    ['.tar.gz', 'p-file-zip'],
+    ['.tar.xz', 'p-file-zip'],
+]);
+
+export function getIcon(extention: string): string {
+    if (icons.get(extention) != undefined) {
+        const icon = icons.get(extention);
+        return String(icon);
+    } else {
+        return 'p-file-normal';
+    }
+}
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 66273a136..3f1cbd9ed 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -84,16 +84,12 @@
                                 {{ $t('file.download') }}
                             </el-button>
                         </el-button-group>
-
-                        <!-- <el-button type="primary" plain> {{ $t('file.sync') }}</el-button>
-                        <el-button type="primary" plain> {{ $t('file.terminal') }}</el-button>
-                        <el-button type="primary" plain> {{ $t('file.shareList') }}</el-button> -->
                     </template>
                     <el-table-column type="selection" width="55" />
                     <el-table-column :label="$t('commons.table.name')" min-width="250" fix show-overflow-tooltip>
                         <template #default="{ row }">
                             <svg-icon v-if="row.isDir" className="table-icon" iconName="p-file-folder"></svg-icon>
-                            <svg-icon v-else className="table-icon" iconName="p-file-normal"></svg-icon>
+                            <svg-icon v-else className="table-icon" :iconName="getIconName(row.extension)"></svg-icon>
                             <el-link :underline="false" @click="open(row)">{{ row.name }}</el-link>
                             <span v-if="row.isSymlink">-> {{ row.linkPath }}</span>
                         </template>
@@ -190,7 +186,7 @@ import {
     SaveFileContent,
     ComputeDirSize,
 } from '@/api/modules/files';
-import { computeSize, dateFromat, getRandomStr } from '@/utils/util';
+import { computeSize, dateFromat, getIcon, getRandomStr } from '@/utils/util';
 import { File } from '@/api/interface/file';
 import { useDeleteData } from '@/hooks/use-delete-data';
 import { ElMessage } from 'element-plus';
@@ -363,6 +359,10 @@ const getDirSize = async (row: any) => {
         });
 };
 
+const getIconName = (extension: string) => {
+    return getIcon(extension);
+};
+
 const closeCreate = () => {
     filePage.open = false;
     search(req);