diff --git a/components/form/content/audio-detail-form.tsx b/components/form/content/audio-detail-form.tsx
index 66d1d069..3690b3a2 100644
--- a/components/form/content/audio-detail-form.tsx
+++ b/components/form/content/audio-detail-form.tsx
@@ -290,15 +290,8 @@ export default function FormAudioDetail() {
           setSelectedPublishers(publisherIds);
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
-
-        if (matchingCategory) {
-          setSelectedTarget(matchingCategory.name);
-        }
-
-        setSelectedTarget(details?.categoryId); 
+        // Set the selected target to the category ID from details
+        setSelectedTarget(String(details.category.id)); 
 
         const filesData = details?.files || [];
         const audioFiles = filesData.filter(
@@ -515,18 +508,28 @@ export default function FormAudioDetail() {
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category", { defaultValue: "Category" })}</Label>
                     <Select
-                      value={detail?.category.name} 
-                      onValueChange={(id) => {
-                        console.log("Selected Category:", id);
-                        setSelectedTarget(id);
-                      }}
+                      disabled
+                      value={String(detail?.category?.id)}
+                      // onValueChange={(id) => {
+                      //   console.log("Selected Category:", id);
+                      //   setSelectedTarget(id);
+                      // }}
                     >
                       <SelectTrigger size="md">
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Show the category from details if it doesn't exist in categories list */}
+                        {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
+                          <SelectItem
+                            key={String(detail.category.id)}
+                            value={String(detail.category.id)}
+                          >
+                            {detail.category.name}
+                          </SelectItem>
+                        )}
                         {categories.map((category) => (
-                          <SelectItem key={category.id} value={category.name}>
+                          <SelectItem key={String(category.id)} value={String(category.id)}>
                             {category.name}
                           </SelectItem>
                         ))}
diff --git a/components/form/content/audio-update-form.tsx b/components/form/content/audio-update-form.tsx
index 0fad9f82..d262a28a 100644
--- a/components/form/content/audio-update-form.tsx
+++ b/components/form/content/audio-update-form.tsx
@@ -70,7 +70,8 @@ type Detail = {
   title: string;
   description: string;
   slug: string;
-  categoryId: {
+  categoryId: number;
+  category: {
     id: number;
     name: string;
   };
@@ -704,6 +705,15 @@ export default function FormAudioUpdate() {
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Show the category from details if it doesn't exist in categories list */}
+                        {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
+                          <SelectItem
+                            key={String(detail.category.id)}
+                            value={String(detail.category.id)}
+                          >
+                            {detail.category.name}
+                          </SelectItem>
+                        )}
                         {categories.map((category) => (
                           <SelectItem
                             key={String(category.id)}
diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index 8c13ed3e..86a56f6c 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -255,15 +255,8 @@ export default function FormImageDetail() {
           setSelectedPublishers(publisherIds);
         }
 
-        // const matchingCategory = categories.find(
-        //   (category) => category.id === details.categoryId
-        // );
-
-        // if (matchingCategory) {
-        //   setSelectedTarget(matchingCategory.name);
-        // }
-
-        // setSelectedTarget(details.categoryId);
+        // Set the selected target to the category ID from details
+        setSelectedTarget(String(details.category.id));
 
         const filesData = details.files || [];
         const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) =>
@@ -491,7 +484,7 @@ export default function FormImageDetail() {
 
                     <Select
                       disabled
-                      defaultValue={String(detail?.category.id)}
+                      value={String(detail?.category?.id)}
                       // onValueChange={(id) => {
                       //   console.log("Selected Category:", id);
                       //   setSelectedTarget(id);
@@ -501,6 +494,15 @@ export default function FormImageDetail() {
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Show the category from details if it doesn't exist in categories list */}
+                        {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
+                          <SelectItem
+                            key={String(detail.category.id)}
+                            value={String(detail.category.id)}
+                          >
+                            {detail.category.name}
+                          </SelectItem>
+                        )}
                         {categories.map((category) => (
                           <SelectItem key={String(category.id)} value={String(category.id)}>
                             {category.name}
diff --git a/components/form/content/image-update-form.tsx b/components/form/content/image-update-form.tsx
index 1d5f75a0..4f6f0f1a 100644
--- a/components/form/content/image-update-form.tsx
+++ b/components/form/content/image-update-form.tsx
@@ -69,6 +69,7 @@ type Detail = {
   description: string;
   htmldescription: string;
   slug: string;
+  categoryId: number;
   category: {
     id: string;
     name: string;
@@ -267,6 +268,8 @@ export default function FormImageUpdate() {
         const details = response?.data?.data;
 
         setDetail(details);
+        
+        // Set the selected target to the category ID from details
         setSelectedTarget(String(details.category.id));
 
         // Set form values immediately and then again after a delay to ensure editor is ready
@@ -301,16 +304,6 @@ export default function FormImageUpdate() {
         if (details?.tags) {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
-
-        // const matchingCategory = categories.find(
-        //   (category) => category.id === details.categoryId
-        // );
-
-        // if (matchingCategory) {
-        //   setSelectedTarget(matchingCategory.name);
-        // }
-
-        // setSelectedTarget(details.categoryId); // Untuk dropdown
       }
     }
     initState();
@@ -716,6 +709,15 @@ export default function FormImageUpdate() {
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Show the category from details if it doesn't exist in categories list */}
+                        {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
+                          <SelectItem
+                            key={String(detail.category.id)}
+                            value={String(detail.category.id)}
+                          >
+                            {detail.category.name}
+                          </SelectItem>
+                        )}
                         {categories.map((category) => (
                           <SelectItem
                             key={String(category.id)}
diff --git a/components/form/content/teks-detail-form.tsx b/components/form/content/teks-detail-form.tsx
index 41338b4c..19804d13 100644
--- a/components/form/content/teks-detail-form.tsx
+++ b/components/form/content/teks-detail-form.tsx
@@ -255,15 +255,8 @@ export default function FormTeksDetail() {
           setSelectedPublishers(publisherIds);
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
-
-        if (matchingCategory) {
-          setSelectedTarget(matchingCategory.name);
-        }
-
-        setSelectedTarget(details.categoryId); // Untuk dropdown
+        // Set the selected target to the category ID from details
+        setSelectedTarget(String(details.category.id));
 
         const filesData = details.files || [];
         const fileUrls = filesData.map((file: any) => ({
@@ -467,18 +460,28 @@ export default function FormTeksDetail() {
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category", { defaultValue: "Category" })}</Label>
                     <Select
-                      value={detail?.category.name} // Nilai default berdasarkan detail
-                      onValueChange={(id) => {
-                        console.log("Selected Category:", id);
-                        setSelectedTarget(id);
-                      }}
+                      disabled
+                      value={String(detail?.category?.id)}
+                      // onValueChange={(id) => {
+                      //   console.log("Selected Category:", id);
+                      //   setSelectedTarget(id);
+                      // }}
                     >
                       <SelectTrigger size="md">
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Show the category from details if it doesn't exist in categories list */}
+                        {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
+                          <SelectItem
+                            key={String(detail.category.id)}
+                            value={String(detail.category.id)}
+                          >
+                            {detail.category.name}
+                          </SelectItem>
+                        )}
                         {categories.map((category) => (
-                          <SelectItem key={category.id} value={category.name}>
+                          <SelectItem key={String(category.id)} value={String(category.id)}>
                             {category.name}
                           </SelectItem>
                         ))}
diff --git a/components/form/content/teks-update-form.tsx b/components/form/content/teks-update-form.tsx
index 978d60df..8a19fb1c 100644
--- a/components/form/content/teks-update-form.tsx
+++ b/components/form/content/teks-update-form.tsx
@@ -66,7 +66,8 @@ type Detail = {
   title: string;
   description: string;
   slug: string;
-  categoryId: {
+  categoryId: number;
+  category: {
     id: number;
     name: string;
   };
@@ -660,6 +661,15 @@ export default function FormTeksUpdate() {
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Show the category from details if it doesn't exist in categories list */}
+                        {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
+                          <SelectItem
+                            key={String(detail.category.id)}
+                            value={String(detail.category.id)}
+                          >
+                            {detail.category.name}
+                          </SelectItem>
+                        )}
                         {categories.map((category) => (
                           <SelectItem
                             key={String(category.id)}
diff --git a/components/form/content/video-detail-form.tsx b/components/form/content/video-detail-form.tsx
index 59dba321..74743c42 100644
--- a/components/form/content/video-detail-form.tsx
+++ b/components/form/content/video-detail-form.tsx
@@ -244,15 +244,8 @@ export default function FormVideoDetail() {
           setSelectedPublishers(publisherIds);
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
-
-        if (matchingCategory) {
-          setSelectedTarget(matchingCategory.name);
-        }
-
-        setSelectedTarget(details?.categoryId); 
+        // Set the selected target to the category ID from details
+        setSelectedTarget(String(details.category.id)); 
 
         const filesData = details?.files || [];
         const fileUrls = filesData.map((files: { url: string }) =>
@@ -453,18 +446,28 @@ export default function FormVideoDetail() {
                   <div className="py-3 w-full space-y-2">
                     <Label>{t("category", { defaultValue: "Category" })}</Label>
                     <Select
-                      value={detail?.category.name} 
-                      onValueChange={(id) => {
-                        console.log("Selected Category:", id);
-                        setSelectedTarget(id);
-                      }}
+                      disabled
+                      value={String(detail?.category?.id)}
+                      // onValueChange={(id) => {
+                      //   console.log("Selected Category:", id);
+                      //   setSelectedTarget(id);
+                      // }}
                     >
                       <SelectTrigger size="md">
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Show the category from details if it doesn't exist in categories list */}
+                        {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
+                          <SelectItem
+                            key={String(detail.category.id)}
+                            value={String(detail.category.id)}
+                          >
+                            {detail.category.name}
+                          </SelectItem>
+                        )}
                         {categories.map((category) => (
-                          <SelectItem key={category.id} value={category.name}>
+                          <SelectItem key={String(category.id)} value={String(category.id)}>
                             {category.name}
                           </SelectItem>
                         ))}
diff --git a/components/form/content/video-update-form.tsx b/components/form/content/video-update-form.tsx
index 3810fbe7..0cea11d7 100644
--- a/components/form/content/video-update-form.tsx
+++ b/components/form/content/video-update-form.tsx
@@ -76,7 +76,8 @@ type Detail = {
   title: string;
   description: string;
   slug: string;
-  categoryId: {
+  categoryId: number;
+  category: {
     id: number;
     name: string;
   };
@@ -765,6 +766,15 @@ export default function FormVideoUpdate() {
                         <SelectValue placeholder="Pilih" />
                       </SelectTrigger>
                       <SelectContent>
+                        {/* Show the category from details if it doesn't exist in categories list */}
+                        {detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
+                          <SelectItem
+                            key={String(detail.category.id)}
+                            value={String(detail.category.id)}
+                          >
+                            {detail.category.name}
+                          </SelectItem>
+                        )}
                         {categories.map((category) => (
                           <SelectItem
                             key={String(category.id)}