diff --git a/frontend/admin/src/pages/PostCreatePage.vue b/frontend/admin/src/pages/PostCreatePage.vue
index 03cb18e..e633260 100644
--- a/frontend/admin/src/pages/PostCreatePage.vue
+++ b/frontend/admin/src/pages/PostCreatePage.vue
@@ -100,14 +100,16 @@ const statusOptions = [
 const mediaSelectionTarget = ref('content'); // 'content' or 'headImages'
 
 // Open media selection dialog
-const openMediaDialog = (target = 'content') => {
+const openMediaDialog = async (target = 'content') => {
     mediaSelectionTarget.value = target;
     mediaDialogVisible.value = true;
     mediaCurrentPage.value = 1;
     mediaFirst.value = 0;
-    // Set selected items based on target
-    selectedMediaItems.value = target === 'headImages' ? [...post.head_images] : [...post.selectedMedia];
-    loadMediaItems();
+    await loadMediaItems();
+
+    // Set selected items based on target and match with loaded media items
+    const selectedIds = target === 'headImages' ? post.head_images : post.selectedMedia.map(m => m.id);
+    selectedMediaItems.value = mediaItems.value.filter(item => selectedIds.includes(item.id));
 };
 
 // Load media items with pagination
@@ -144,7 +146,8 @@ const confirmMediaSelection = () => {
                 toast.add({ severity: 'warn', summary: '提示', detail: '展示图片最多选择3张', life: 3000 });
                 return;
             }
-            post.head_images = [...selectedMediaItems.value];
+            // Store only IDs
+            post.head_images = selectedMediaItems.value.map(item => item.id);
             errors.head_images = '';
             loadHeadImagePreviews();
         } else {
@@ -169,8 +172,8 @@ const removeMedia = (media) => {
 };
 
 // Remove head image
-const removeHeadImage = (media) => {
-    const index = post.head_images.findIndex(item => item.id === media.id);
+const removeHeadImage = (mediaId) => {
+    const index = post.head_images.indexOf(mediaId);
     if (index > -1) {
         post.head_images.splice(index, 1);
         loadHeadImagePreviews();
@@ -219,7 +222,6 @@ const savePost = async () => {
 
     try {
         post.medias = post.selectedMedia.map(media => media.id);
-        post.head_image_ids = post.head_images.map(media => media.id); // Add head image IDs
         const resp = await postService.createPost(post);
         console.log(resp)
 
@@ -244,12 +246,12 @@ const cancelCreate = () => {
 // Add head image preview loading
 const loadHeadImagePreviews = async () => {
     headImageUrls.value = [];
-    for (const media of post.head_images) {
+    for (const mediaId of post.head_images) {
         try {
-            const url = await mediaService.getMediaPreviewUrl(media.id);
-            headImageUrls.value.push({ id: media.id, url });
+            const url = await mediaService.getMediaPreviewUrl(mediaId);
+            headImageUrls.value.push({ id: mediaId, url });
         } catch (error) {
-            console.error('Failed to load preview for media:', media.id);
+            console.error('Failed to load preview for media:', mediaId);
         }
     }
 };
@@ -291,13 +293,13 @@ const loadHeadImagePreviews = async () => {
                                 </span>
                             </div>
                             <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-                                <div v-for="(media, index) in post.head_images" :key="media.id"
+                                <div v-for="(mediaId, index) in post.head_images" :key="mediaId"
                                     class="relative aspect-video">
                                     <img v-if="headImageUrls[index]" :src="headImageUrls[index].url"
-                                        class="w-full h-full object-cover rounded bg-gray-200" :alt="media.name">
+                                        class="w-full h-full object-cover rounded bg-gray-200" :alt="mediaId">
                                     <Button icon="pi pi-times"
                                         class="absolute! top-2 right-2 p-button-rounded p-button-danger p-button-sm"
-                                        @click="removeHeadImage(media)" />
+                                        @click="removeHeadImage(mediaId)" />
                                 </div>
                             </div>
                         </div>
diff --git a/frontend/admin/src/pages/PostEditPage.vue b/frontend/admin/src/pages/PostEditPage.vue
index fb7aa28..51d8463 100644
--- a/frontend/admin/src/pages/PostEditPage.vue
+++ b/frontend/admin/src/pages/PostEditPage.vue
@@ -137,14 +137,16 @@ const fetchPost = async (id) => {
 };
 
 // Open media selection dialog
-const openMediaDialog = (target = 'content') => {
+const openMediaDialog = async (target = 'content') => {
     mediaSelectionTarget.value = target;
     mediaDialogVisible.value = true;
     mediaCurrentPage.value = 1;
     mediaFirst.value = 0;
-    // Set selected items based on target
-    selectedMediaItems.value = target === 'headImages' ? [...post.head_images] : [...post.selectedMedia];
-    loadMediaItems();
+    await loadMediaItems();
+
+    // Set selected items based on target and match with loaded media items
+    const selectedIds = target === 'headImages' ? post.head_images : post.selectedMedia.map(m => m.id);
+    selectedMediaItems.value = mediaItems.value.filter(item => selectedIds.includes(item.id));
 };
 
 // Load media items
@@ -172,7 +174,8 @@ const confirmMediaSelection = () => {
                 toast.add({ severity: 'warn', summary: '提示', detail: '展示图片最多选择3张', life: 3000 });
                 return;
             }
-            post.head_images = [...selectedMediaItems.value];
+            // Store only IDs
+            post.head_images = selectedMediaItems.value.map(item => item.id);
             errors.head_images = '';
             loadHeadImagePreviews();
         } else {
@@ -197,8 +200,8 @@ const removeMedia = (media) => {
 };
 
 // Remove a selected head image
-const removeHeadImage = (media) => {
-    const index = post.head_images.findIndex(item => item.id === media.id);
+const removeHeadImage = (mediaId) => {
+    const index = post.head_images.indexOf(mediaId);
     if (index > -1) {
         post.head_images.splice(index, 1);
         loadHeadImagePreviews();
@@ -208,12 +211,12 @@ const removeHeadImage = (media) => {
 // Load head image previews
 const loadHeadImagePreviews = async () => {
     headImageUrls.value = [];
-    for (const media of post.head_images) {
+    for (const mediaId of post.head_images) {
         try {
-            const url = await mediaService.getMediaPreviewUrl(media.id);
-            headImageUrls.value.push({ id: media.id, url });
+            const url = await mediaService.getMediaPreviewUrl(mediaId);
+            headImageUrls.value.push({ id: mediaId, url });
         } catch (error) {
-            console.error('Failed to load preview for media:', media.id);
+            console.error('Failed to load preview for media:', mediaId);
         }
     }
 };
@@ -258,7 +261,7 @@ const savePost = async () => {
 
     try {
         post.medias = post.selectedMedia.map(media => media.id);
-        post.head_image_ids = post.head_images.map(media => media.id); // Add head image IDs
+        // Remove head_image_ids, use head_images directly since it now contains IDs
         const resp = await postService.updatePost(post.id, post);
 
         if (resp.status !== 200) {
@@ -278,10 +281,6 @@ const cancelEdit = () => {
     router.push('/posts');
 };
 
-// File type badge severity mapping
-const getBadgeSeverity = () => {
-    return 'info';
-};
 
 // Add pagination handler
 const onMediaPage = (event) => {
@@ -343,13 +342,13 @@ onMounted(() => {
                                 </span>
                             </div>
                             <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-                                <div v-for="(media, index) in post.head_images" :key="media.id"
+                                <div v-for="(mediaId, index) in post.head_images" :key="mediaId"
                                     class="relative aspect-video">
                                     <img v-if="headImageUrls[index]" :src="headImageUrls[index].url"
-                                        class="w-full h-full object-cover rounded bg-gray-200" :alt="media.name">
+                                        class="w-full h-full object-cover rounded bg-gray-200" :alt="mediaId">
                                     <Button icon="pi pi-times"
                                         class="absolute! top-2 right-2 p-button-rounded p-button-danger p-button-sm"
-                                        @click="removeHeadImage(media)" />
+                                        @click="removeHeadImage(mediaId)" />
                                 </div>
                             </div>
                         </div>