diff --git a/backend/app/http/admin/posts.go b/backend/app/http/admin/posts.go
index 7f59ca9..c5c845a 100644
--- a/backend/app/http/admin/posts.go
+++ b/backend/app/http/admin/posts.go
@@ -28,12 +28,13 @@ func (ctl *posts) List(ctx fiber.Ctx, pagination *requests.Pagination, query *Li
 
 type PostForm struct {
 	Title        string            `json:"title"`
-	HeadImage    int64             `json:"head_image"`
+	HeadImageIds []int64           `json:"head_image_ids"`
 	Price        int64             `json:"price"`
 	Discount     int16             `json:"discount"`
 	Introduction string            `json:"introduction"`
 	Medias       []int64           `json:"medias"`
 	Status       fields.PostStatus `json:"status"`
+	Content      string            `json:"content"`
 }
 
 // Create
@@ -42,11 +43,12 @@ type PostForm struct {
 func (ctl *posts) Create(ctx fiber.Ctx, form *PostForm) error {
 	post := model.Posts{
 		Title:       form.Title,
+		HeadImages:  fields.ToJson(form.HeadImageIds),
 		Price:       form.Price,
 		Discount:    form.Discount,
 		Description: form.Introduction,
 		Status:      form.Status,
-		Content:     "",
+		Content:     form.Content,
 		Tags:        fields.Json[[]string]{},
 		Assets:      fields.Json[[]fields.MediaAsset]{},
 	}
@@ -84,11 +86,12 @@ func (ctl *posts) Update(ctx fiber.Ctx, id int64, form *PostForm) error {
 
 	post := &model.Posts{
 		Title:       form.Title,
+		HeadImages:  fields.ToJson(form.HeadImageIds),
 		Price:       form.Price,
 		Discount:    form.Discount,
 		Description: form.Introduction,
 		Status:      form.Status,
-		Content:     "",
+		Content:     form.Content,
 		Tags:        fields.Json[[]string]{},
 		Assets:      fields.Json[[]fields.MediaAsset]{},
 		CreatedAt:   oldPost.CreatedAt,
diff --git a/backend/database/schemas/public/model/posts.go b/backend/database/schemas/public/model/posts.go
index 306f4e8..e344d69 100644
--- a/backend/database/schemas/public/model/posts.go
+++ b/backend/database/schemas/public/model/posts.go
@@ -27,5 +27,5 @@ type Posts struct {
 	Likes       int64                            `json:"likes"`
 	Tags        fields.Json[[]string]            `json:"tags"`
 	Assets      fields.Json[[]fields.MediaAsset] `json:"assets"`
-	HeadImages  string                           `json:"head_images"`
+	HeadImages  fields.Json[[]int64]             `json:"head_images"`
 }
diff --git a/backend/database/transform.yaml b/backend/database/transform.yaml
index 49410fc..9d48d5e 100644
--- a/backend/database/transform.yaml
+++ b/backend/database/transform.yaml
@@ -17,6 +17,7 @@ types:
     assets: Json[[]MediaAsset]
     tags: Json[[]string]
     meta: Json[PostMeta]
+    head_images: Json[[]int64]
 
   users:
     status: UserStatus
diff --git a/frontend/admin/src/pages/PostCreatePage.vue b/frontend/admin/src/pages/PostCreatePage.vue
index b57d859..03cb18e 100644
--- a/frontend/admin/src/pages/PostCreatePage.vue
+++ b/frontend/admin/src/pages/PostCreatePage.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { mediaService } from '@/api/mediaService';
 import { postService } from '@/api/postService';
+import { formatFileSize } from "@/utils/filesize";
+import { getFileIcon, getFileTypeByMimeCN } from "@/utils/filetype";
 import { useToast } from 'primevue/usetoast';
 import { computed, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -18,6 +20,33 @@ import RadioButton from 'primevue/radiobutton';
 import Textarea from 'primevue/textarea';
 import Toast from 'primevue/toast';
 
+import {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+} from 'vue-icons-plus/bs';
+
+// Create icons object
+const icons = {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+};
+
 const router = useRouter();
 const toast = useToast();
 
@@ -212,43 +241,6 @@ const cancelCreate = () => {
     router.push('/posts');
 };
 
-// File type badge severity mapping
-const getBadgeSeverity = (fileType) => {
-    const map = {
-        'image': 'info',
-        'pdf': 'danger',
-        'video': 'warning',
-        'document': 'primary',
-        'audio': 'success'
-    };
-    return map[fileType] || 'info';
-};
-
-// File type icon mapping
-const getFileIcon = (file) => {
-    const map = {
-        'image': 'pi-image',
-        'pdf': 'pi-file-pdf',
-        'video': 'pi-video',
-        'document': 'pi-file',
-        'audio': 'pi-volume-up'
-    };
-    return `pi ${map[file.fileType] || 'pi-file'}`;
-};
-
-// Format file size helper
-const formatFileSize = (bytes) => {
-    if (!bytes && bytes !== 0) return '0 B';
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const base = 1024;
-    let size = Number(bytes);
-    if (isNaN(size)) return '0 B';
-
-    const i = Math.floor(Math.log(size) / Math.log(base));
-    size = size / Math.pow(base, i);
-    return `${size.toFixed(2)} ${sizes[i]}`;
-};
-
 // Add head image preview loading
 const loadHeadImagePreviews = async () => {
     headImageUrls.value = [];
@@ -372,20 +364,16 @@ const loadHeadImagePreviews = async () => {
                             <div class="grid grid-cols-1 md:grid-cols-1 gap-3">
                                 <div v-for="media in post.selectedMedia" :key="media.id"
                                     class="relative border border-gray-200 rounded-md p-2 flex items-center">
-                                    <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
-                                        <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
-                                            :alt="media.file_name">
-                                    </div>
-                                    <div v-else
+                                    <div
                                         class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
-                                        <i :class="getFileIcon(media)" class="text-2xl"></i>
+                                        <component :is="getFileIcon(media, icons)" class="text-xl text-gray-600" />
                                     </div>
+
                                     <div class="flex-1 overflow-hidden">
-                                        <div class="text-sm font-medium text-gray-900 truncate">
-                                            {{ media.name }}
+                                        <div class="text-sm font-medium text-gray-900 truncate">{{ media.name }}
                                         </div>
-                                        <Badge :value="media.file_type" :severity="getBadgeSeverity(media.file_type)"
-                                            class="text-xs" />
+
+                                        <Badge :value="getFileTypeByMimeCN(media.media_type)" />
                                     </div>
                                     <Button icon="pi pi-times" class="p-button-rounded p-button-text p-button-sm"
                                         @click="removeMedia(media)" aria-label="移除" />
@@ -444,7 +432,7 @@ const loadHeadImagePreviews = async () => {
 
             <Column field="fileType" header="文件类型">
                 <template #body="{ data }">
-                    <Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
+                    <Badge :value="getFileTypeByMimeCN(data.media_type)" />
                 </template>
             </Column>
 
diff --git a/frontend/admin/src/pages/PostEditPage.vue b/frontend/admin/src/pages/PostEditPage.vue
index dbdc776..fb7aa28 100644
--- a/frontend/admin/src/pages/PostEditPage.vue
+++ b/frontend/admin/src/pages/PostEditPage.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { mediaService } from '@/api/mediaService';
 import { postService } from '@/api/postService';
+import { formatFileSize } from "@/utils/filesize";
+import { getFileIcon, getFileTypeByMimeCN } from "@/utils/filetype";
 import { useToast } from 'primevue/usetoast';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -18,11 +20,40 @@ import RadioButton from 'primevue/radiobutton';
 import Textarea from 'primevue/textarea';
 import Toast from 'primevue/toast';
 
+import {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+} from 'vue-icons-plus/bs';
+
+// Create icons object
+const icons = {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+};
+
+
 const router = useRouter();
 const route = useRoute();
 const toast = useToast();
 const loading = ref(true);
 
+
 // Form state
 const post = reactive({
     id: null,
@@ -248,27 +279,8 @@ const cancelEdit = () => {
 };
 
 // File type badge severity mapping
-const getBadgeSeverity = (fileType) => {
-    const map = {
-        'image': 'info',
-        'pdf': 'danger',
-        'video': 'warning',
-        'document': 'primary',
-        'audio': 'success'
-    };
-    return map[fileType] || 'info';
-};
-
-// File type icon mapping
-const getFileIcon = (file) => {
-    const map = {
-        'image': 'pi-image',
-        'pdf': 'pi-file-pdf',
-        'video': 'pi-video',
-        'document': 'pi-file',
-        'audio': 'pi-volume-up'
-    };
-    return `pi ${map[file.fileType] || 'pi-file'}`;
+const getBadgeSeverity = () => {
+    return 'info';
 };
 
 // Add pagination handler
@@ -279,19 +291,6 @@ const onMediaPage = (event) => {
     loadMediaItems();
 };
 
-// Add format file size helper
-const formatFileSize = (bytes) => {
-    if (!bytes && bytes !== 0) return '0 B';
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const base = 1024;
-    let size = Number(bytes);
-    if (isNaN(size)) return '0 B';
-
-    const i = Math.floor(Math.log(size) / Math.log(base));
-    size = size / Math.pow(base, i);
-    return `${size.toFixed(2)} ${sizes[i]}`;
-};
-
 onMounted(() => {
     // Get post ID from route params
     const postId = route.params.id;
@@ -414,22 +413,19 @@ onMounted(() => {
                             <div class="mb-4">
                                 <Button label="更改媒体" icon="pi pi-sync" @click="openMediaDialog" outlined />
                             </div>
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+                            <div class="grid grid-cols-1 md:grid-cols-1 gap-3">
                                 <div v-for="media in post.selectedMedia" :key="media.id"
                                     class="relative border border-gray-200 rounded-md p-2 flex items-center">
-                                    <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
-                                        <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
-                                            :alt="media.name">
-                                    </div>
-                                    <div v-else
+                                    <div
                                         class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
-                                        <i :class="getFileIcon(media)" class="text-2xl"></i>
+                                        <component :is="getFileIcon(media, icons)" class="text-xl text-gray-600" />
                                     </div>
+
                                     <div class="flex-1 overflow-hidden">
                                         <div class="text-sm font-medium text-gray-900 truncate">{{ media.name }}
                                         </div>
-                                        <Badge :value="media.file_type" :severity="getBadgeSeverity(media.file_type)"
-                                            class="text-xs" />
+
+                                        <Badge :value="getFileTypeByMimeCN(media.media_type)" />
                                     </div>
                                     <Button icon="pi pi-times" class="p-button-rounded p-button-text p-button-sm"
                                         @click="removeMedia(media)" aria-label="移除" />
@@ -488,7 +484,7 @@ onMounted(() => {
 
             <Column field="fileType" header="文件类型">
                 <template #body="{ data }">
-                    <Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
+                    <Badge :value="getFileTypeByMimeCN(data.media_type)" />
                 </template>
             </Column>