diff --git a/app/[locale]/(protected)/supervisor/ticketing/[media_id]/layout.tsx b/app/[locale]/(protected)/supervisor/ticketing/[media_id]/layout.tsx
new file mode 100644
index 00000000..de39c9b1
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/ticketing/[media_id]/layout.tsx
@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Ticketing",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;
diff --git a/app/[locale]/(protected)/supervisor/ticketing/[media_id]/page.tsx b/app/[locale]/(protected)/supervisor/ticketing/[media_id]/page.tsx
new file mode 100644
index 00000000..48ca3e6a
--- /dev/null
+++ b/app/[locale]/(protected)/supervisor/ticketing/[media_id]/page.tsx
@@ -0,0 +1,26 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import TicketingTable from "../components/table";
+import { useParams } from "next/navigation";
+
+const TicketingPage = async () => {
+
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+
+      <section
+        id="table"
+        className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3 mt-5"
+      >
+        {/* <div className="flex justify-between py-3">
+          <p className="text-lg">Semua Ticket : 0</p>
+        </div> */}
+
+        <TicketingTable />
+      </section>
+    </div>
+  );
+};
+
+export default TicketingPage;
diff --git a/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx b/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx
index a8ceead5..0427ea81 100644
--- a/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx
+++ b/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx
@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import FormDetailTicketing from "@/components/form/ticketing/ticketing-detail-form";
+import { useParams } from "next/navigation";
 
 /**
  * TicketingLayout
@@ -35,14 +36,15 @@ import FormDetailTicketing from "@/components/form/ticketing/ticketing-detail-fo
 type Issue = {
   id: string | number;
   title?: string;
-  source?: string; // e.g., "instagram", "facebook", "tiktok", "youtube", "comment"
+  source?: string;
   createdAt?: string;
   status?: string;
   timeAgo?: string;
-  // any other fields from API
 };
 
-export default function TicketingLayout() {
+export default function TicketingTable() {
+  const params = useParams();
+  const mediaId = params?.media_id;
   const [issues, setIssues] = React.useState<Issue[]>([]);
   const [totalElements, setTotalElements] = React.useState<number>(0);
   const [totalPages, setTotalPages] = React.useState<number>(1);
@@ -78,7 +80,7 @@ export default function TicketingLayout() {
 
   async function fetchData() {
     try {
-      const res = await ticketingPagination(search, pageSize, page - 1);
+      const res = await ticketingPagination(search, pageSize, page - 1, mediaId == 'all' ? "" : mediaId as string);
       const data = res?.data?.data;
       const content = data?.content || [];
       const mapped: Issue[] = content.map((it: any, idx: number) => ({
diff --git a/components/form/content/image-update-form.tsx b/components/form/content/image-update-form.tsx
index b22603b7..8b036a93 100644
--- a/components/form/content/image-update-form.tsx
+++ b/components/form/content/image-update-form.tsx
@@ -1743,6 +1743,117 @@ export default function FormImageUpdate() {
                       </Fragment>
                     ) : null}
                     {files.length > 0 && (
+                      <div className="mt-4 space-y-2">
+                        <Label className="text-lg font-semibold">
+                          {" "}
+                          {t("file-media", { defaultValue: "File Media" })}
+                        </Label>
+                        <div className="grid gap-4">
+                          {files.map((file: any) => (
+                            <div
+                              key={file.id}
+                              className="flex items-center border p-2 rounded-md"
+                            >
+                              <img
+                                src={file.thumbnailFileUrl}
+                                alt={file.fileName}
+                                className="w-16 h-16 object-cover rounded-md mr-4"
+                              />
+                              <div className="flex flex-wrap gap-3 items-center ">
+                                <div className="flex-grow">
+                                  <p className="font-medium">{file.fileName}</p>
+                                  <a
+                                    href={file.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-blue-500 text-sm"
+                                  >
+                                    {t("view-file", {
+                                      defaultValue: "View File",
+                                    })}
+                                  </a>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("all")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "all"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>
+                                      {t("all", { defaultValue: "All" })}
+                                    </span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("nasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "nasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Nasional</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("wilayah")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "wilayah"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Wilayah</span>
+                                  </Label>
+                                </div>
+                                <div>
+                                  <Label className="flex items-center space-x-2">
+                                    <input
+                                      type="checkbox"
+                                      checked={selectedOptions[
+                                        file.id
+                                      ]?.includes("internasional")}
+                                      onChange={() =>
+                                        handleCheckboxChangeImage(
+                                          file.id,
+                                          "internasional"
+                                        )
+                                      }
+                                      className="form-checkbox"
+                                    />
+                                    <span>Internasional</span>
+                                  </Label>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                    {/* {files.length > 0 && (
                       <div className="mt-4">
                         <Label className="text-lg font-semibold">
                           {" "}
@@ -1783,7 +1894,6 @@ export default function FormImageUpdate() {
                                     Pengaturan Distribusi
                                   </h5>
 
-                                  {/* Checkbox Tingkat Utama */}
                                   <div className="space-y-4">
                                     <div>
                                       <p className="text-sm font-medium text-gray-700 mb-3">
@@ -1837,14 +1947,12 @@ export default function FormImageUpdate() {
                                       </div>
                                     </div>
 
-                                    {/* Detail Wilayah */}
                                     {fileUnitSelections[index]?.wilayah && (
                                       <div className="border-t border-gray-200 pt-2">
                                         <p className="text-sm font-medium text-gray-700 mb-2">
                                           Detail Wilayah:
                                         </p>
 
-                                        {/* Checkbox Sub-kategori dengan tombol Kustom sejajar */}
                                         <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
                                           {[
                                             { key: "polda", label: "POLDA" },
@@ -1884,7 +1992,6 @@ export default function FormImageUpdate() {
                                             </div>
                                           ))}
 
-                                          {/* Tombol Kustom sejajar dengan checkbox */}
                                           <div className="flex items-center justify-center p-3">
                                             <Dialog>
                                               <DialogTrigger asChild>
@@ -1917,7 +2024,6 @@ export default function FormImageUpdate() {
                                                         key={polda.id}
                                                         className="border border-gray-200 rounded-lg p-2 bg-white hover:shadow-sm transition-shadow"
                                                       >
-                                                        {/* Header POLDA */}
                                                         <div className="flex items-center justify-between">
                                                           <Label className="flex items-center gap-3 flex-1 cursor-pointer">
                                                             <Checkbox
@@ -1969,13 +2075,11 @@ export default function FormImageUpdate() {
                                                           )}
                                                         </div>
 
-                                                        {/* Sub-items */}
                                                         {polda.subDestination &&
                                                           expandedPolda[
                                                             polda.id
                                                           ] && (
                                                             <div className="max-h-[200px] overflow-y-auto border-t border-gray-100 pt-2">
-                                                              {/* Tombol Pilih Semua untuk sub-items */}
                                                               <div className="mb-2 flex justify-start">
                                                                 {(() => {
                                                                   const allSubItemsChecked =
@@ -2109,7 +2213,7 @@ export default function FormImageUpdate() {
                           ))}
                         </div>
                       </div>
-                    )}
+                    )} */}
                   </Fragment>
                 </div>
               </div>
diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx
index 05ecb648..50ca5c50 100644
--- a/components/form/content/spit-convert-form.tsx
+++ b/components/form/content/spit-convert-form.tsx
@@ -170,7 +170,6 @@ export default function FormConvertSPIT() {
   const t = useTranslations("Form");
   const { id } = useParams() as { id: string };
   const [isAlreadySaved, setIsAlreadySaved] = useState(false);
-
   const {
     control,
     handleSubmit,
diff --git a/components/form/content/video-update-form.tsx b/components/form/content/video-update-form.tsx
index 204845fd..72c4b34e 100644
--- a/components/form/content/video-update-form.tsx
+++ b/components/form/content/video-update-form.tsx
@@ -972,7 +972,7 @@ export default function FormVideoUpdate() {
             </div>
           </Card>
           <div className="w-full lg:w-4/12">
-            <Card className=" h-[800px]">
+            <Card className="h-fit">
               <div className="px-3 py-3">
                 <div className="space-y-2">
                   <Label>{t("creator", { defaultValue: "Creator" })}</Label>
diff --git a/lib/auth-utils.ts b/lib/auth-utils.ts
index a21061ce..6c4ffbae 100644
--- a/lib/auth-utils.ts
+++ b/lib/auth-utils.ts
@@ -13,7 +13,7 @@ export const NAVIGATION_CONFIG: NavigationConfig[] = [
   { roleId: 2, path: "/in/dashboard/executive", label: "Executive Dashboard" },
   { roleId: 3, path: "/in/dashboard", label: "Dashboard" },
   { roleId: 4, path: "/in/dashboard", label: "Dashboard" },
-  { roleId: 9, path: "/in/supervisor/ticketing", label: "Ticketing" },
+  { roleId: 9, path: "/in/supervisor/ticketing/all", label: "Ticketing" },
   { roleId: 10, path: "/in/dashboard", label: "Dashboard" },
   { roleId: 11, path: "/in/dashboard", label: "Dashboard" },
   { roleId: 12, path: "/in/dashboard", label: "Dashboard" },
diff --git a/lib/menus.ts b/lib/menus.ts
index 09490074..c39d2477 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -2642,6 +2642,8 @@ export function getMenuList(pathname: string, t: any): Group[] {
     (Number(roleId) == 3 || Number(roleId) == 14 || Number(roleId) == 15) &&
     Number(levelNumber) == 3
   ) {
+    const hideForRole3 = Number(roleId) === 3;
+
     if (Number(userParentLevelId) != 771) {
       menusSelected = [
         {
@@ -2697,13 +2699,17 @@ export function getMenuList(pathname: string, t: any): Group[] {
                   icon: "heroicons:share",
                   children: [],
                 },
-                {
-                  href: "/contributor/content/spit",
-                  label: "spit",
-                  active: pathname.includes("/content/spit"),
-                  icon: "heroicons:credit-card",
-                  children: [],
-                },
+                ...(!hideForRole3
+                  ? [
+                      {
+                        href: "/contributor/content/spit",
+                        label: "spit",
+                        active: pathname.includes("/content/spit"),
+                        icon: "heroicons:credit-card",
+                        children: [],
+                      },
+                    ]
+                  : []),
                 // {
                 //   href: "/contributor/content/nulis-ai",
                 //   label: "nulis ai",
@@ -2729,35 +2735,39 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        {
-          groupLabel: "",
-          id: "planning",
-          menus: [
-            {
-              id: "planning",
-              href: "/contributor/planning",
-              label: t("planning"),
-              active: pathname.includes("/planning"),
-              icon: "pajamas:planning",
-              submenus: [
-                {
-                  href: "/contributor/planning/mediahub",
-                  label: "mediaHub",
-                  active: pathname.includes("/planning/mediahub"),
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/contributor/planning/medsos-mediahub",
-                  label: "medsos mediahub",
-                  active: pathname.includes("/planning/medsos-mediahub"),
-                  icon: "heroicons:shopping-cart",
-                  children: [],
-                },
-              ],
-            },
-          ],
-        },
+        ...(!hideForRole3
+          ? [
+              {
+                groupLabel: "",
+                id: "planning",
+                menus: [
+                  {
+                    id: "planning",
+                    href: "/contributor/planning",
+                    label: t("planning"),
+                    active: pathname.includes("/planning"),
+                    icon: "pajamas:planning",
+                    submenus: [
+                      {
+                        href: "/contributor/planning/mediahub",
+                        label: "mediaHub",
+                        active: pathname.includes("/planning/mediahub"),
+                        icon: "heroicons:arrow-trending-up",
+                        children: [],
+                      },
+                      {
+                        href: "/contributor/planning/medsos-mediahub",
+                        label: "medsos mediahub",
+                        active: pathname.includes("/planning/medsos-mediahub"),
+                        icon: "heroicons:shopping-cart",
+                        children: [],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           groupLabel: "",
           id: "task",
@@ -2808,20 +2818,24 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        {
-          groupLabel: "",
-          id: "blog",
-          menus: [
-            {
-              id: "blog",
-              href: "/contributor/blog",
-              label: t("blog"),
-              active: pathname.includes("/blog"),
-              icon: "fluent:clipboard-text-32-regular",
-              submenus: [],
-            },
-          ],
-        },
+        ...(!hideForRole3
+          ? [
+              {
+                groupLabel: "",
+                id: "blog",
+                menus: [
+                  {
+                    id: "blog",
+                    href: "/contributor/blog",
+                    label: t("blog"),
+                    active: pathname.includes("/blog"),
+                    icon: "fluent:clipboard-text-32-regular",
+                    submenus: [],
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           groupLabel: "",
           id: "curatedcontent",
@@ -2864,42 +2878,46 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        {
-          groupLabel: "",
-          id: "settings",
-          menus: [
-            {
-              id: "settings",
-              href: "/admin/settings",
-              label: t("settings"),
-              active: pathname.includes("/settinng"),
-              icon: "material-symbols:settings",
-              submenus: [
-                {
-                  href: "/admin/settings/banner",
-                  label: "Banner",
-                  active: pathname === "/admin/settings/banner",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/popup",
-                  label: "Pop Up",
-                  active: pathname === "/admin/settings/popup",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/iklan",
-                  label: "Iklan",
-                  active: pathname === "/admin/settings/iklan",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-              ],
-            },
-          ],
-        },
+        ...(!hideForRole3
+          ? [
+              {
+                groupLabel: "",
+                id: "settings",
+                menus: [
+                  {
+                    id: "settings",
+                    href: "/admin/settings",
+                    label: t("settings"),
+                    active: pathname.includes("/settinng"),
+                    icon: "material-symbols:settings",
+                    submenus: [
+                      {
+                        href: "/admin/settings/banner",
+                        label: "Banner",
+                        active: pathname === "/admin/settings/banner",
+                        icon: "heroicons:arrow-trending-up",
+                        children: [],
+                      },
+                      {
+                        href: "/admin/settings/popup",
+                        label: "Pop Up",
+                        active: pathname === "/admin/settings/popup",
+                        icon: "heroicons:arrow-trending-up",
+                        children: [],
+                      },
+                      {
+                        href: "/admin/settings/iklan",
+                        label: "Iklan",
+                        active: pathname === "/admin/settings/iklan",
+                        icon: "heroicons:arrow-trending-up",
+                        children: [],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ]
+          : []),
       ];
     } else if (Number(userParentLevelId) == 771) {
       menusSelected = [
@@ -3189,28 +3207,28 @@ export function getMenuList(pathname: string, t: any): Group[] {
             icon: "mdi:ticket-outline",
             submenus: [
               {
-                href: "/supervisor/ticketing",
+                href: "/supervisor/ticketing/all",
                 label: "All",
-                active: pathname.includes("/supervisor/ticketing"),
+                active: pathname.includes("/ticketing/all"),
                 icon: "solar:inbox-line-outline",
                 children: [],
               },
               {
-                href: "/",
+                href: "/supervisor/ticketing/4",
                 label: "Instagram",
-                active: pathname.includes("/ticketing/instagram"),
+                active: pathname.includes("/ticketing/4"),
                 icon: "ri:chat-private-line",
                 children: [],
               },
               {
-                href: "/",
+                href: "/supervisor/ticketing/2",
                 label: "Facebook",
-                active: pathname.includes("/ticketing/facebook"),
+                active: pathname.includes("/ticketing/2"),
                 icon: "ri:share-forward-2-fill",
                 children: [],
               },
               {
-                href: "/",
+                href: "/supervisor/ticketing/5",
                 label: "Youtube",
                 active: pathname.includes("/ticketing/youtube"),
                 icon: "ri:share-forward-2-fill",
diff --git a/service/ticketing/ticketing.ts b/service/ticketing/ticketing.ts
index cf19148f..fc8ad1fd 100644
--- a/service/ticketing/ticketing.ts
+++ b/service/ticketing/ticketing.ts
@@ -1,8 +1,8 @@
 import { title } from "process";
 import { httpGetInterceptor } from "../http-config/http-interceptor-service";
 
-export async function ticketingPagination(title: string = '', size: number, page: number) {
+export async function ticketingPagination(title: string = '', size: number, page: number, mediaId: string) {
   return await httpGetInterceptor(
-    `/ticketing/pagination?enablePage=1&page=${page}&size=${size}&title=${title}`
+    `/ticketing/pagination?enablePage=1&page=${page}&size=${size}&title=${title}&typeId=${mediaId}`
   );
 }