diff --git a/components/form/communication/questions-reply-form.tsx b/components/form/communication/questions-reply-form.tsx
index e8c2a54d..e0b00059 100644
--- a/components/form/communication/questions-reply-form.tsx
+++ b/components/form/communication/questions-reply-form.tsx
@@ -36,12 +36,11 @@ import { list, parse } from "postcss";
 import { htmlToString } from "@/utils/globals";
 import { Textarea } from "@/components/ui/textarea";
 import { error } from "@/lib/swal";
-import { useRouter } from "next/navigation";
 import { useMediaQuery } from "react-responsive";
 import { DetailTicket } from "../ticketing/info-lainnya-types";
 import InfoLainnyaModal from "../ticketing/info-lainnya";
 import { Description } from "@radix-ui/react-toast";
-import { Link } from "@/i18n/routing";
+import { Link, useRouter } from "@/i18n/routing";
 import {
   Popover,
   PopoverContent,
@@ -140,6 +139,7 @@ export default function FormQuestionsReply() {
     control,
     handleSubmit,
     reset,
+    setValue,
     formState: { errors },
   } = useForm({
     resolver: zodResolver(taskSchema),
@@ -149,9 +149,11 @@ export default function FormQuestionsReply() {
     async function initState() {
       setReplyValue(0);
       const response = await getQuestionTicket(id);
+
       setDetailTicketsQuestions(response?.data?.data || null);
       setTicketInternal(response?.data?.data || null);
       setDetail(response?.data?.data);
+      setValue('title', response?.data?.data?.message)
 
       if (response?.data !== null) {
         setDetailTickets(response?.data?.data);
@@ -268,8 +270,49 @@ export default function FormQuestionsReply() {
     }
   };
 
+  // const onSubmit = async (data: any) => {
+  //   try {
+  //     const payload = {
+  //       id,
+  //       title: data.title,
+  //       description: data.description,
+  //       priorityId: selectedPriority,
+  //       statusId: 1,
+  //       typeId: detailTickets?.typeId,
+  //       parentCommentId: detailTickets?.feedId,
+  //       operatorTeam: selectedOperator.join(","),
+  //     };
+
+  //     const response = await saveTicketsQuestion(payload);
+
+  //     MySwal.fire({
+  //       title: "Sukses",
+  //       text: "Data berhasil diperbarui.",
+  //       icon: "success",
+  //     });
+
+  //     getTicketReply();
+  //   } catch (error) {
+  //     console.error("Gagal update:", error);
+  //     MySwal.fire({
+  //       title: "Error",
+  //       text: "Terjadi kesalahan saat memperbarui.",
+  //       icon: "error",
+  //     });
+  //   }
+  // };
+
   const onSubmit = async (data: any) => {
     try {
+      MySwal.fire({
+        title: "Menyimpan...",
+        text: "Mohon tunggu sebentar",
+        allowOutsideClick: false,
+        didOpen: () => {
+          MySwal.showLoading();
+        },
+      });
+
       const payload = {
         id,
         title: data.title,
@@ -281,17 +324,17 @@ export default function FormQuestionsReply() {
         operatorTeam: selectedOperator.join(","),
       };
 
-      const response = await saveTicketsQuestion(payload);
+      await saveTicketsQuestion(payload);
 
       MySwal.fire({
         title: "Sukses",
         text: "Data berhasil diperbarui.",
         icon: "success",
+        confirmButtonText: "OK",
+      }).then(() => {
+        router.push("/supervisor/ticketing");
       });
-
-      getTicketReply();
     } catch (error) {
-      console.error("Gagal update:", error);
       MySwal.fire({
         title: "Error",
         text: "Terjadi kesalahan saat memperbarui.",
@@ -512,8 +555,10 @@ export default function FormQuestionsReply() {
                     <Input
                       size="md"
                       type="text"
-                      defaultValue={detailTickets?.message}
-                      {...field}
+                      // defaultValue={detailTickets?.message}
+                      value={field.value}
+                      // {...field}
+                      onChange={field.onChange}
                       placeholder="Masukkan judul"
                     />
                   )}
diff --git a/components/form/content/video-detail-form.tsx b/components/form/content/video-detail-form.tsx
index 5a5f393b..698856c4 100644
--- a/components/form/content/video-detail-form.tsx
+++ b/components/form/content/video-detail-form.tsx
@@ -63,6 +63,7 @@ import { useTranslations } from "next-intl";
 import SuggestionModal from "@/components/modal/suggestions-modal";
 import { formatDateToIndonesian } from "@/utils/globals";
 import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
+import VideoPlayer from "@/utils/video-player";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -212,7 +213,7 @@ export default function FormVideoDetail() {
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
-          setSelectedCategory(findCategory.id); 
+          setSelectedCategory(findCategory.id);
           const response = await getTagsBySubCategoryId(findCategory.id);
           setTags(response?.data?.data);
         }
@@ -245,7 +246,7 @@ export default function FormVideoDetail() {
         }
 
         // Set the selected target to the category ID from details
-        setSelectedTarget(String(details.category.id)); 
+        setSelectedTarget(String(details.category.id));
 
         const filesData = details?.files || [];
         const fileUrls = filesData.map((files: { url: string }) =>
@@ -418,7 +419,9 @@ export default function FormVideoDetail() {
         <div className="flex flex-col lg:flex-row gap-10">
           <Card className="w-full lg:w-8/12">
             <div className="px-6 py-6">
-              <p className="text-lg font-semibold mb-3">{t("form-video", { defaultValue: "Form Video" })}</p>
+              <p className="text-lg font-semibold mb-3">
+                {t("form-video", { defaultValue: "Form Video" })}
+              </p>
               <div className="gap-5 mb-5">
                 {/* Input Title */}
                 <div className="space-y-2 py-3">
@@ -458,16 +461,23 @@ export default function FormVideoDetail() {
                       </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>
-                        )}
+                        {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)}>
+                          <SelectItem
+                            key={String(category.id)}
+                            value={String(category.id)}
+                          >
                             {category.name}
                           </SelectItem>
                         ))}
@@ -477,7 +487,9 @@ export default function FormVideoDetail() {
                 </div>
 
                 <div className="py-3 space-y-2">
-                  <Label>{t("description", { defaultValue: "Description" })}</Label>
+                  <Label>
+                    {t("description", { defaultValue: "Description" })}
+                  </Label>
                   <Controller
                     control={control}
                     name="description"
@@ -492,7 +504,10 @@ export default function FormVideoDetail() {
                   )}
                 </div>
                 <div className="space-y-2">
-                  <Label className="text-xl "> {t("file-media", { defaultValue: "File Media" })}</Label>
+                  <Label className="text-xl ">
+                    {" "}
+                    {t("file-media", { defaultValue: "File Media" })}
+                  </Label>
                   <div className="w-full">
                     <Swiper
                       thumbs={{ swiper: thumbsSwiper }}
@@ -502,12 +517,19 @@ export default function FormVideoDetail() {
                     >
                       {files?.map((data: any) => (
                         <SwiperSlide key={data.id}>
-                          <video
-                            className="object-fill h-full w-full"
-                            src={data.secondaryUrl}
-                            controls
-                            title={`Video ${data.id}`} 
-                          />
+                          <div className="relative max-h-screen overflow-hidden">
+                            <div className="w-full max-h-screen aspect-video">
+                              <div className="w-full h-full object-contain">
+                                <video
+                                  className="object-contain h-full w-full"
+                                  src={data.secondaryUrl}
+                                  controls
+                                  title={`Video ${data.id}`}
+                                />
+                              </div>
+                            </div>
+                            <div className="absolute top-4 left-4"></div>
+                          </div>
                         </SwiperSlide>
                       ))}
                     </Swiper>
@@ -528,7 +550,7 @@ export default function FormVideoDetail() {
                               className="object-cover h-[60px] w-[80px] cursor-pointer"
                               src={data.secondaryUrl}
                               muted
-                              title={`Video ${data.id}`} 
+                              title={`Video ${data.id}`}
                             />
                           </SwiperSlide>
                         ))}
@@ -593,7 +615,9 @@ export default function FormVideoDetail() {
               </div>
               <div className="px-3 py-3">
                 <div className="flex flex-col gap-6 space-y-2">
-                  <Label>{t("publish-target", { defaultValue: "Publish Target" })}</Label>
+                  <Label>
+                    {t("publish-target", { defaultValue: "Publish Target" })}
+                  </Label>
                   <div className="flex gap-2 items-center">
                     <Checkbox
                       id="5"
@@ -655,7 +679,9 @@ export default function FormVideoDetail() {
               <Dialog open={modalOpen} onOpenChange={setModalOpen}>
                 <DialogContent size="md">
                   <DialogHeader>
-                    <DialogTitle>{t("leave-comment", { defaultValue: "Leave Comment" })}</DialogTitle>
+                    <DialogTitle>
+                      {t("leave-comment", { defaultValue: "Leave Comment" })}
+                    </DialogTitle>
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
@@ -874,7 +900,8 @@ export default function FormVideoDetail() {
                     color="primary"
                     type="button"
                   >
-                    <Icon icon="fa:check" className="mr-3" /> {t("accept", { defaultValue: "Accept" })}
+                    <Icon icon="fa:check" className="mr-3" />{" "}
+                    {t("accept", { defaultValue: "Accept" })}
                   </Button>
                   <Button
                     onClick={() => actionApproval("3")}