diff --git a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
index 13d5db6a..0aa90031 100644
--- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
+++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
@@ -254,7 +254,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
           isPublish: item.isPublish,
           start: new Date(item.startDate),
           end: new Date(item.endDate),
-          allDay: true, // Sesuaikan jika memang ada event sepanjang hari
+          allDay: true,
           extendedProps: {
             calendar: item.agendaType,
             description: item.description,
@@ -481,7 +481,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
         <div className="px-2">
           {events?.length === 0 ? (
             <div className="mt-1 py-2 rounded-lg bg-white border border-black">
-              <p className="text-center">Belum ada data</p>
+              <p className="text-center">{t("no-data-yet")}</p>
             </div>
           ) : (
             <>
@@ -581,7 +581,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   className="dark:bg-background dark:text-foreground"
                 >
                   <Plus className="w-4 h-4 me-1" />
-                  {"Tambahkan Agenda baru"}
+                  {t("addEvent")}
                 </Button>
               ) : (
                 ""
@@ -714,7 +714,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   ))}
                 </div>
 
-                {/* Second Row */}
                 <div className="flex gap-1 mt-1">
                   {months.slice(3, 6).map((month) => (
                     <MonthCard
@@ -725,7 +724,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   ))}
                 </div>
 
-                {/* Third Row */}
                 <div className="flex gap-1 mt-1">
                   {months.slice(6, 9).map((month) => (
                     <MonthCard
@@ -736,7 +734,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                   ))}
                 </div>
 
-                {/* Fourth Row */}
                 <div className="flex gap-1 mt-1">
                   {months.slice(9, 12).map((month) => (
                     <MonthCard
diff --git a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
index e4abf2e9..f69da9a3 100644
--- a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
+++ b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
@@ -322,7 +322,7 @@ const EventModal = ({
       return false;
     }
 
-    const id = response?.data?.data.id;
+    const id = response?.data?.data?.id;
 
     loading();
     if (imageFiles?.length === 0) {
@@ -396,7 +396,9 @@ const EventModal = ({
       setStartDate(event?.event?.start);
       setEndDate(event?.event?.end);
       const eventCalendar = event?.event?.extendedProps?.calendar;
-      setAgendaType(eventCalendar || categories?.length > 0 && categories[0].value);
+      setAgendaType(
+        eventCalendar || (categories?.length > 0 && categories[0].value)
+      );
     }
     setValue("title", event?.event?.title || "");
     setValue("description", event?.event?.description || "");
diff --git a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx b/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
index 66db6815..3f7cb507 100644
--- a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
+++ b/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
@@ -170,8 +170,8 @@ const BlogTable = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
diff --git a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
index e5e821d5..05e29ee8 100644
--- a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
+++ b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
@@ -230,8 +230,8 @@ const TableAudio = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
diff --git a/app/[locale]/(protected)/contributor/content/audio/page.tsx b/app/[locale]/(protected)/contributor/content/audio/page.tsx
index 756b3272..5702e0e6 100644
--- a/app/[locale]/(protected)/contributor/content/audio/page.tsx
+++ b/app/[locale]/(protected)/contributor/content/audio/page.tsx
@@ -6,8 +6,10 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import TableAudio from "./components/table-audio";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
 
 const ReactTableAudioPage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <div>
       <SiteBreadcrumb />
@@ -20,9 +22,11 @@ const ReactTableAudioPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
+                </p>
+                <p className="text-sm">
+                  {t("Hasil_unggah_disetujui_hari_ini")}
                 </p>
-                <p className="text-sm">Hasil Unggah disetujui hari ini</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -31,9 +35,9 @@ const ReactTableAudioPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah direvisi hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -42,9 +46,9 @@ const ReactTableAudioPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah ditolak hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini")}</p>
               </div>
             </div>
           </div>
@@ -54,13 +58,13 @@ const ReactTableAudioPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Audio
+                  {t("audio")}
                 </div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/audio/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Unggah Audio
+                      {t("create-audio")}
                     </Button>
                   </Link>
                   {/* <Button color="primary" className="text-white ml-3">
diff --git a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
index 89f465bc..3f15c2d8 100644
--- a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
@@ -236,8 +236,8 @@ const TableImage = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
diff --git a/app/[locale]/(protected)/contributor/content/image/page.tsx b/app/[locale]/(protected)/contributor/content/image/page.tsx
index a3d46ac4..9c688060 100644
--- a/app/[locale]/(protected)/contributor/content/image/page.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/page.tsx
@@ -6,8 +6,10 @@ import { UploadIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
 
 const ReactTableImagePage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <div>
       <SiteBreadcrumb />
@@ -20,9 +22,11 @@ const ReactTableImagePage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
+                </p>
+                <p className="text-sm">
+                  {t("Hasil_unggah_disetujui_hari_ini")}
                 </p>
-                <p className="text-sm">Hasil Unggah disetujui hari ini</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -31,9 +35,9 @@ const ReactTableImagePage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah direvisi hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -42,9 +46,9 @@ const ReactTableImagePage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah ditolak hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini")}</p>
               </div>
             </div>
           </div>
@@ -54,13 +58,13 @@ const ReactTableImagePage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Foto
+                  {t("image")}
                 </div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/image/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Unggah Foto
+                      {t("create-image")}
                     </Button>
                   </Link>
                   {/* <Link href={"/contributor/content/image/createAi"}>
diff --git a/app/[locale]/(protected)/contributor/content/spit/page.tsx b/app/[locale]/(protected)/contributor/content/spit/page.tsx
index 0208103e..88742142 100644
--- a/app/[locale]/(protected)/contributor/content/spit/page.tsx
+++ b/app/[locale]/(protected)/contributor/content/spit/page.tsx
@@ -14,7 +14,7 @@ const ReactTableSPITPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten SPIT
+                  SPIT
                 </div>
               </div>
             </CardTitle>
diff --git a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
index 375e5ecb..01ed5e95 100644
--- a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
+++ b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
@@ -164,7 +164,7 @@ const TableSPIT = () => {
   return (
     <div className="w-full">
       <div className="flex justify-between items-center px-5">
-        <div>
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
diff --git a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
index e3301f9d..dd1924c5 100644
--- a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
+++ b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
@@ -229,8 +229,8 @@ const TableTeks = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
diff --git a/app/[locale]/(protected)/contributor/content/teks/page.tsx b/app/[locale]/(protected)/contributor/content/teks/page.tsx
index 73bf6661..56bf11b5 100644
--- a/app/[locale]/(protected)/contributor/content/teks/page.tsx
+++ b/app/[locale]/(protected)/contributor/content/teks/page.tsx
@@ -7,8 +7,10 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import TableTeks from "./components/table-teks";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
 
 const ReactTableTeksPage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <div>
       <SiteBreadcrumb />
@@ -21,9 +23,12 @@ const ReactTableTeksPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
+                </p>
+                <p className="text-sm">
+                  {" "}
+                  {t("Hasil_unggah_disetujui_hari_ini")}
                 </p>
-                <p className="text-sm">Hasil Unggah disetujui hari ini</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -32,9 +37,9 @@ const ReactTableTeksPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah direvisi hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -43,9 +48,9 @@ const ReactTableTeksPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah ditolak hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini")}</p>
               </div>
             </div>
           </div>
@@ -55,14 +60,14 @@ const ReactTableTeksPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Teks
+                  {t("text")}
                 </div>
 
                 <div className="flex-none">
                   <Link href={"/contributor/content/teks/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Unggah Teks
+                      {t("create-text")}
                     </Button>
                   </Link>
                   {/* <Button color="primary" className="text-white ml-3">
diff --git a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
index 3b5f8bd1..210257a4 100644
--- a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
+++ b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
@@ -229,8 +229,8 @@ const TableVideo = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
+      <div className="flex flex-col md:flex-row lg:flex-row md:justify-between lg:justify-between items-center md:px-5 lg:px-5">
+        <div className="w-full md:w-[200px] lg:w-[200px] px-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
diff --git a/app/[locale]/(protected)/contributor/content/video/page.tsx b/app/[locale]/(protected)/contributor/content/video/page.tsx
index ef006ed0..d879b272 100644
--- a/app/[locale]/(protected)/contributor/content/video/page.tsx
+++ b/app/[locale]/(protected)/contributor/content/video/page.tsx
@@ -7,8 +7,10 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import TableVideo from "./components/table-video";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
 
 const ReactTableVideoPage = () => {
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <div>
       <SiteBreadcrumb />
@@ -21,9 +23,11 @@ const ReactTableVideoPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
+                </p>
+                <p className="text-sm">
+                  {t("Hasil_unggah_disetujui_hari_ini")}
                 </p>
-                <p className="text-sm">Hasil Unggah disetujui hari ini</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -32,9 +36,9 @@ const ReactTableVideoPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah direvisi hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -43,9 +47,9 @@ const ReactTableVideoPage = () => {
               </div>
               <div>
                 <p>
-                  0 <span className="text-red-500">Rata - rata :0</span>
+                  <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">Hasil Unggah ditolak hari ini</p>
+                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini")}</p>
               </div>
             </div>
           </div>
@@ -55,13 +59,13 @@ const ReactTableVideoPage = () => {
             <CardTitle>
               <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Video
+                  {t("video")}
                 </div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/video/create"}>
                     <Button color="primary" className="text-white">
                       <UploadIcon />
-                      Unggah Video
+                      {t("create-video")}
                     </Button>
                   </Link>
                   {/* <Button color="primary" className="text-white ml-3">
diff --git a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx b/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
index 1a3c8ae7..a05d796f 100644
--- a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
+++ b/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
@@ -53,8 +53,11 @@ import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import { getPlanningSentPagination } from "@/service/planning/planning";
 import search from "@/app/[locale]/(protected)/app/chat/components/search";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { useTranslations } from "next-intl";
 
 const MediahubTable = () => {
+  const t = useTranslations("Planning");
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -133,81 +136,98 @@ const MediahubTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
-          <InputGroup merged>
-            <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
-              <Search className=" h-4 w-4 dark:text-white" />
-            </InputGroupText>
+    <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {t("planning")} : {t("channel")} Mediahub
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex justify-between items-center px-5 gap-3">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
+            <InputGroup merged>
+              <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+                <Search className=" h-4 w-4 dark:text-white" />
+              </InputGroupText>
+              <Input
+                type="text"
+                placeholder="Search Judul..."
+                className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+                value={search}
+                onChange={handleSearch}
+              />
+            </InputGroup>
+          </div>
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <Input
-              type="text"
-              placeholder="Search Judul..."
-              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
-              value={search}
-              onChange={handleSearch}
+              placeholder="Filter Status..."
+              value={
+                (table.getColumn("status")?.getFilterValue() as string) ?? ""
+              }
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                table.getColumn("status")?.setFilterValue(event.target.value)
+              }
+              className="max-w-sm "
             />
-          </InputGroup>
+          </div>
         </div>
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
-        </div>
-      </div>
-      <Table className="overflow-hidden mt-3">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="bg-default-200">
-              {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-                className="h-[75px]"
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
+        <Table className="overflow-hidden mt-3">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="bg-default-200">
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
                 ))}
               </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className="h-[75px]"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+        <TablePagination
+          table={table}
+          totalData={totalData}
+          totalPage={totalPage}
+        />
+      </div>
     </div>
   );
 };
diff --git a/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx b/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx
index dbc37e38..66120d17 100644
--- a/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx
+++ b/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx
@@ -1,9 +1,7 @@
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { UploadIcon } from "lucide-react";
-import TaskTable from "../../task/components/task-table";
 import MediahubTable from "./components/mediahub-table";
+import { useTranslations } from "next-intl";
 
 const MediahubPage = async () => {
   return (
@@ -11,15 +9,6 @@ const MediahubPage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>
-              <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Perencanaan : Kanal Mediahub
-                </div>
-              </div>
-            </CardTitle>
-          </CardHeader>
           <CardContent className="p-0">
             <MediahubTable />
           </CardContent>
diff --git a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
index e0fba90d..0451632c 100644
--- a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
+++ b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
@@ -52,8 +52,11 @@ import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import { getPlanningSentPagination } from "@/service/planning/planning";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { useTranslations } from "next-intl";
 
 const MedsosTable = () => {
+  const t = useTranslations("Planning");
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -132,81 +135,98 @@ const MedsosTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
-          <InputGroup merged>
-            <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
-              <Search className=" h-4 w-4 dark:text-white" />
-            </InputGroupText>
+    <div>
+      <CardHeader className="border-b border-solid border-default-200 mb-6">
+        <CardTitle>
+          <div className="flex items-center">
+            <div className="flex-1 text-xl font-medium text-default-900">
+              {t("planning")} : {t("channel")} Medsos
+            </div>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <div className="w-full overflow-x-auto">
+        <div className="flex justify-between items-center px-5 gap-2">
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
+            <InputGroup merged>
+              <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+                <Search className=" h-4 w-4 dark:text-white" />
+              </InputGroupText>
+              <Input
+                type="text"
+                placeholder="Search Judul..."
+                className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+                onChange={handleSearch}
+                value={search}
+              />
+            </InputGroup>
+          </div>
+          <div className="w-[150px] md:w-[250px] lg:w-[250px]">
             <Input
-              type="text"
-              placeholder="Search Judul..."
-              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
-              onChange={handleSearch}
-              value={search}
+              placeholder="Filter Status..."
+              value={
+                (table.getColumn("status")?.getFilterValue() as string) ?? ""
+              }
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                table.getColumn("status")?.setFilterValue(event.target.value)
+              }
+              className="max-w-sm "
             />
-          </InputGroup>
+          </div>
         </div>
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
-        </div>
-      </div>
-      <Table className="overflow-hidden mt-3">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="bg-default-200">
-              {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-                className="h-[75px]"
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
+        <Table className="overflow-hidden mt-3">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="bg-default-200">
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
                 ))}
               </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className="h-[75px]"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+        <TablePagination
+          table={table}
+          totalData={totalData}
+          totalPage={totalPage}
+        />
+      </div>
     </div>
   );
 };
diff --git a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx
index e30eb803..2c7a4bb5 100644
--- a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx
+++ b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx
@@ -8,15 +8,6 @@ const MedsosMediahubPage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-          <CardHeader className="border-b border-solid border-default-200 mb-6">
-            <CardTitle>
-              <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Perencanaan : Kanal Medsos
-                </div>
-              </div>
-            </CardTitle>
-          </CardHeader>
           <CardContent className="p-0">
             <MedsosTable />
           </CardContent>
diff --git a/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx b/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
index a927feaa..e172aa63 100644
--- a/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
@@ -110,8 +110,8 @@ const EventTable = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
+      <div className="flex justify-between items-center px-5 gap-2">
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
@@ -125,7 +125,7 @@ const EventTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <Input
             placeholder="Filter Status..."
             value={
diff --git a/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx b/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
index 35e12580..e54de0bd 100644
--- a/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
@@ -123,8 +123,8 @@ const PressConferenceTable = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
+      <div className="flex justify-between items-center px-5 gap-2">
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
@@ -138,7 +138,7 @@ const PressConferenceTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <Input
             placeholder="Filter Status..."
             value={
diff --git a/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx b/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
index b9391727..fcd04cf8 100644
--- a/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
@@ -124,8 +124,8 @@ const PressReleaseTable = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5 mt-3">
-        <div>
+      <div className="flex justify-between items-center px-5 gap-2">
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
@@ -139,7 +139,7 @@ const PressReleaseTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <Input
             placeholder="Filter Status..."
             value={
@@ -148,7 +148,7 @@ const PressReleaseTable = () => {
             onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
               table.getColumn("status")?.setFilterValue(event.target.value)
             }
-            className="max-w-sm "
+            className="w-full "
           />
         </div>
       </div>
diff --git a/app/[locale]/(protected)/contributor/task/components/task-table.tsx b/app/[locale]/(protected)/contributor/task/components/task-table.tsx
index 82617efe..08f77478 100644
--- a/app/[locale]/(protected)/contributor/task/components/task-table.tsx
+++ b/app/[locale]/(protected)/contributor/task/components/task-table.tsx
@@ -224,7 +224,7 @@ const TaskTable = () => {
           </div>
         </div>
       </div>
-      <div className="flex flex-col sm:flex-row lg:flex-row justify-between lg:items-center px-5">
+      <div className="flex flex-col sm:flex-row lg:flex-row justify-between sm:items-center md:items-center lg:items-center px-5">
         <div className="mb-3 sm:mb-0 lg-mb-0">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
@@ -239,12 +239,16 @@ const TaskTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex flex-row items-center gap-2">
-          <div className="flex flex-row items-center gap-3">
+        <div className="w-full sm:w-[100px] items-center gap-2">
+          <div className=" gap-3">
             <div className="flex items-center py-4">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="ml-auto" size="md">
+                  <Button
+                    variant="outline"
+                    className="ml-auto w-full sm:w-[100px]"
+                    size="md"
+                  >
                     Filter <ChevronDown />
                   </Button>
                 </DropdownMenuTrigger>
diff --git a/app/[locale]/(protected)/dashboard/page.tsx b/app/[locale]/(protected)/dashboard/page.tsx
index 89ba710b..731daeec 100644
--- a/app/[locale]/(protected)/dashboard/page.tsx
+++ b/app/[locale]/(protected)/dashboard/page.tsx
@@ -39,25 +39,25 @@ const DashboardPage = () => {
                 value="routine-task"
                 className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
               >
-                Tugas Rutin
+                {t("task-routine")}
               </TabsTrigger>
               <TabsTrigger
                 value="task"
                 className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
               >
-                Penugasan
+                {t("task")}
               </TabsTrigger>
               <TabsTrigger
                 value="schedule"
                 className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
               >
-                Jadwal
+                {t("schedule")}
               </TabsTrigger>
               <TabsTrigger
                 value="indeks"
                 className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
               >
-                Indeks
+                {t("indeks")}
               </TabsTrigger>
             </TabsList>
           </Card>
@@ -68,18 +68,18 @@ const DashboardPage = () => {
                   <CardContent className="p-4">
                     <div className="grid md:grid-cols-3   gap-4">
                       <StatisticsBlock
-                        title={"Hasil unggah disetujui hari ini"}
+                        title={t("Hasil_unggah_disetujui_hari_ini")}
                         total="3,564"
                         className="bg-info/10 border-none shadow-none"
                       />
                       <StatisticsBlock
-                        title={"Hasil unggah direvisi hari ini"}
+                        title={t("Hasil_unggah_direvisi_hari_ini")}
                         total="564"
                         className="bg-warning/10 border-none shadow-none"
                         chartColor="#FB8F65"
                       />
                       <StatisticsBlock
-                        title={"Hasil unggah ditolak hari ini"}
+                        title={t("Hasil_unggah_ditolak_hari_ini")}
                         total="+5.0%"
                         className="bg-primary/10 border-none shadow-none"
                         chartColor="#2563eb"
@@ -94,7 +94,7 @@ const DashboardPage = () => {
                 <Card>
                   <CardHeader className="flex flex-row items-center">
                     <CardTitle className="flex-1 text-lg">
-                      {"Total Produksi Konten"}
+                      {t("Total-Content-Production")}
                     </CardTitle>
                     <DashboardDropdown />
                   </CardHeader>
@@ -106,7 +106,7 @@ const DashboardPage = () => {
               <div className="lg:col-span-8 col-span-12">
                 <Card>
                   <CardHeader className="flex flex-row items-center">
-                    <CardTitle className="flex-1">{"Table"}</CardTitle>
+                    <CardTitle className="flex-1">{t("tabel")}</CardTitle>
                     <DashboardDropdown />
                   </CardHeader>
                   <CardContent className="p-0">
@@ -123,7 +123,7 @@ const DashboardPage = () => {
                   <Card className="py-4 px-3">
                     <div className="flex flex-row justify-between items-center">
                       <div className="flex-1 text-xl font-medium text-default-900">
-                        Table Penugasan
+                        Tabel Penugasan
                       </div>
                       <div>
                         <Link href={"/contributor/task/create"}>
@@ -158,8 +158,8 @@ const DashboardPage = () => {
               <div className="lg:col-span-12 col-span-12">
                 <Card>
                   <Card className="py-4 px-3">
-                    <div className="flex flex-row justify-between items-center">
-                      <div className="flex-1 text-xl font-medium text-default-900">
+                    <div className="flex flex-col md:flex-row md:justify-between md:items-center lg:flex-row lg:justify-between lg:items-center">
+                      <div className="flex-1 text-xl font-medium text-default-900 mb-2">
                         Table Indeks
                       </div>
                       <div>
diff --git a/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx b/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
index 049f3e58..befee683 100644
--- a/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
+++ b/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
@@ -171,11 +171,11 @@ const ContentTable = () => {
 
   return (
     <div className="w-full overflow-x-auto">
-      <div className="flex justify-between items-center px-5">
-        <div>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between md:flex-row md:items-center md:justify-between lg:flex-row items-start lg:justify-between lg:items-center px-5">
+        <div className="w-full md:w-[200px] mb-2 md:mb-0">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
-              <Search className="h-4 w-4 dark:text-white" />
+              <Search className="h-4 w-full lg:w-4 dark:text-white" />
             </InputGroupText>
             <Input
               type="text"
@@ -186,7 +186,7 @@ const ContentTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex flex-row items-center gap-3">
+        <div className=" items-center gap-3 w-full md:w-[200px]">
           {/* <Select
             onValueChange={(value) => {
               setStatusFilter([value]);
@@ -210,7 +210,7 @@ const ContentTable = () => {
               setFileTypeFilter([value]);
             }}
           >
-            <SelectTrigger className="w-[180px]">
+            <SelectTrigger className="w-full lg:w-[180px]">
               <SelectValue placeholder="Select a Filter" />
             </SelectTrigger>
             <SelectContent>
diff --git a/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx b/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
index faa218dd..e84e526c 100644
--- a/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
+++ b/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
@@ -12,6 +12,7 @@ import { DockIcon, ImageIcon, MicIcon, YoutubeIcon } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import React from "react";
 import search from "../../../app/chat/components/search";
+import { useTranslations } from "next-intl";
 
 type StatusFilter = string[];
 
@@ -23,6 +24,7 @@ interface Counts {
 }
 
 const RecentActivity: React.FC = () => {
+  const t = useTranslations("Menu");
   const router = useRouter();
   const searchParams = useSearchParams();
 
@@ -115,19 +117,27 @@ const RecentActivity: React.FC = () => {
     <div className="flex flex-col gap-5">
       <div className="flex flex-row items-center gap-3">
         <ImageIcon size={40} className="text-blue-700" />
-        <p className="text-xl">{counts.images} FOTO</p>
+        <p className="text-xl">
+          {counts.images} {t("image")}
+        </p>
       </div>
       <div className="flex flex-row items-center gap-3">
         <YoutubeIcon size={40} className="text-blue-700" />
-        <p className="text-xl">{counts.audiovisual} AUDIO VISUAL</p>
+        <p className="text-xl">
+          {counts.audiovisual} {t("video")}
+        </p>
       </div>
       <div className="flex flex-row items-center gap-3">
         <DockIcon size={40} className="text-blue-700" />
-        <p className="text-xl">{counts.text} TEXT</p>
+        <p className="text-xl">
+          {counts.text} {t("text")}
+        </p>
       </div>
       <div className="flex flex-row items-center gap-3">
         <MicIcon size={40} className="text-blue-700" />
-        <p className="text-xl">{counts.audio} AUDIO</p>
+        <p className="text-xl">
+          {counts.audio} {t("audio")}
+        </p>
       </div>
     </div>
   );
diff --git a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
index 719a3ca8..7d2693e5 100644
--- a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
@@ -160,7 +160,7 @@ const CollaborationTable = () => {
   return (
     <div className="w-full overflow-x-auto">
       <div className="flex justify-between items-center">
-        <div className="mt-3 flex flex-row items-center gap-2">
+        <div className=" flex flex-row items-center gap-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
diff --git a/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx b/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
index b4bbbaa7..5b51d09a 100644
--- a/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
@@ -169,7 +169,7 @@ const EscalationTable = () => {
   return (
     <div className="w-full overflow-x-auto">
       <div className="flex justify-between items-center">
-        <div className="mt-3 flex flex-row items-center gap-2">
+        <div className=" flex flex-row items-center gap-2">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
diff --git a/app/[locale]/(protected)/shared/communication/page.tsx b/app/[locale]/(protected)/shared/communication/page.tsx
index 98782bd6..c770958a 100644
--- a/app/[locale]/(protected)/shared/communication/page.tsx
+++ b/app/[locale]/(protected)/shared/communication/page.tsx
@@ -36,7 +36,7 @@ const CommunicationPage = () => {
             </Link>
           )}
         </div>
-        <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
+        <div className="flex flex-wrap gap-1 border-2 rounded-md w-fit mb-5">
           <Button
             rounded="md"
             onClick={() => setTab("Pertanyaan Internal")}
diff --git a/app/[locale]/(protected)/shared/contest/components/contest-table.tsx b/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
index 735e1af5..d18cb801 100644
--- a/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
+++ b/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
@@ -123,7 +123,7 @@ const TaskTable = () => {
   return (
     <div className="w-full overflow-x-auto">
       <div className="flex justify-between items-center px-5">
-        <div>
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <InputGroup merged>
             <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
               <Search className=" h-4 w-4 dark:text-white" />
@@ -137,7 +137,7 @@ const TaskTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
+        <div className="w-[150px] md:w-[250px] lg:w-[250px]">
           <Input
             placeholder="Filter Status..."
             value={
diff --git a/components/form/communication/internal-detail-form.tsx b/components/form/communication/internal-detail-form.tsx
index 29d945e3..a418007b 100644
--- a/components/form/communication/internal-detail-form.tsx
+++ b/components/form/communication/internal-detail-form.tsx
@@ -193,8 +193,8 @@ export default function FormDetailInternal() {
         </Button>
       </div>
 
-      <div className="flex flex-row gap-5 mt-5">
-        <div className="flex flex-col w-[70%]">
+      <div className="flex flex-col md:flex-row    lg:flex-row gap-5 mt-5">
+        <div className="flex flex-col w-[100%] lg:w-[70%]">
           {replyVisible && (
             <div className="">
               <textarea
@@ -284,7 +284,7 @@ export default function FormDetailInternal() {
           </div>
         </div>
         {detail !== undefined && (
-          <div className="gap-5 mb-5 w-[30%] border bg-white rounded-md">
+          <div className="gap-5 mb-5 w-[100%] lg:w-[30%] border bg-white rounded-md">
             <p className="mx-3 mt-3">Properties</p>
             <div className="space-y-2 px-3">
               <Label>Judul</Label>
diff --git a/components/form/task/task-detail-form.tsx b/components/form/task/task-detail-form.tsx
index 8b09c338..0d62220c 100644
--- a/components/form/task/task-detail-form.tsx
+++ b/components/form/task/task-detail-form.tsx
@@ -1535,32 +1535,34 @@ export default function FormTaskDetail() {
                     </DialogContent>
                   </Dialog>
                 </div>
-                <table className="w-full border-collapse border border-gray-300">
-                  <thead>
-                    <tr className="bg-gray-100 border-b">
-                      <th className="px-4 py-2 text-left">Judul</th>
-                      <th className="px-4 py-2 text-left">Konten</th>
-                      <th className="px-4 py-2 text-left">Kategory</th>
-                      <th className="px-4 py-2 text-left">Kreator</th>
-                      <th className="px-4 py-2 text-left">Diupload Oleh</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {uploadResults.map((item) => (
-                      <tr key={item.id} className="border-b">
-                        <td className="px-4 py-2 text-blue-500">
-                          <a href="">{item.title}</a>
-                        </td>
-                        <td className="px-4 py-2">{item.fileType.name}</td>
-                        <td className="px-4 py-2">{item.category.name}</td>
-                        <td className="px-4 py-2">
-                          {item.creatorGroupLevelName}
-                        </td>
-                        <td className="px-4 py-2">{item.creatorName}</td>
+                <div className="overflow-x-auto">
+                  <table className="min-w-full border-collapse border border-gray-300">
+                    <thead>
+                      <tr className="bg-gray-100 border-b">
+                        <th className="px-4 py-2 text-left">Judul</th>
+                        <th className="px-4 py-2 text-left">Konten</th>
+                        <th className="px-4 py-2 text-left">Kategory</th>
+                        <th className="px-4 py-2 text-left">Kreator</th>
+                        <th className="px-4 py-2 text-left">Diupload Oleh</th>
                       </tr>
-                    ))}
-                  </tbody>
-                </table>
+                    </thead>
+                    <tbody>
+                      {uploadResults.map((item) => (
+                        <tr key={item.id} className="border-b">
+                          <td className="px-4 py-2 text-blue-500">
+                            <a href="">{item.title}</a>
+                          </td>
+                          <td className="px-4 py-2">{item.fileType.name}</td>
+                          <td className="px-4 py-2">{item.category.name}</td>
+                          <td className="px-4 py-2">
+                            {item.creatorGroupLevelName}
+                          </td>
+                          <td className="px-4 py-2">{item.creatorName}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
               </div>
             )}
             {showInput && (
diff --git a/messages/en.json b/messages/en.json
index dfb69a89..3b86a5bf 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -22,7 +22,24 @@
     "last_months": "Last months",
     "last_year": "Last year",
     "choose_category": "Choose Category",
-    "international": "International"
+    "tabel": "Table",
+    "Hasil_unggah_disetujui_hari_ini": "Uploaded results approved today",
+    "Hasil_unggah_direvisi_hari_ini": "Upload results revised today",
+    "Hasil_unggah_ditolak_hari_ini": "Upload result rejected today",
+    "task-routine": "Task Routine",
+    "task": "Task",
+    "schedule": "Schedule",
+    "indeks": "Indeks",
+    "Total-Content-Production": "Total Content Production",
+    "average": "average",
+    "create-image": "Create Image",
+    "create-video": "Create Video",
+    "create-text": "Create Teks",
+    "create-audio": "Create Audio",
+    "image": "Image",
+    "video": "Video",
+    "audio": "Audio",
+    "text": "Text"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -108,9 +125,10 @@
     "addBoard": "Add Board"
   },
   "CalendarApp": {
-    "addEvent": "Add Event",
+    "addEvent": "Add New Agenda",
     "shortDesc": "Drag and drop your event or click in the calendar",
-    "filter": "FILTER"
+    "filter": "FILTER",
+    "no-data-yet": "Not data yet"
   },
   "TodoApp": {
     "addTask": "Add Task",
@@ -543,5 +561,9 @@
     "sortBy": "Sort by",
     "latest": "Latest",
     "mostPopular": "Most Popular"
+  },
+  "Planning": {
+    "planning": "Planning",
+    "channel": "Channel"
   }
 }
diff --git a/messages/in.json b/messages/in.json
index 775fda1e..7368fc1e 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -22,7 +22,25 @@
     "last_months": "Last months",
     "last_year": "Last year",
     "choose_category": "Pilih Kategori",
-    "international": "Internasional"
+    "international": "Internasional",
+    "tabel": "Tabel",
+    "Hasil_unggah_disetujui_hari_ini": "Hasil unggah disetujui hari ini",
+    "Hasil_unggah_direvisi_hari_ini": "Hasil unggah direvisi hari ini",
+    "Hasil_unggah_ditolak_hari_ini": "Hasil unggah ditolak hari ini",
+    "task-routine": "Task Routine",
+    "task": "Penugasan",
+    "schedule": "Jadwal",
+    "indeks": "Blog",
+    "Total-Content-Production": "Total Produksi Konten",
+    "average": "Rata Rata",
+    "create-image": "Unggah Foto",
+    "create-video": "Unggah Video",
+    "create-text": "Unggah Teks",
+    "create-audio": "Unggah Audio",
+    "image": "Image",
+    "video": "Video",
+    "audio": "Audio",
+    "text": "Text"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -108,9 +126,10 @@
     "addBoard": "Add Board"
   },
   "CalendarApp": {
-    "addEvent": "Add Event",
+    "addEvent": "Tambah Agenda Baru",
     "shortDesc": "Drag and drop your event or click in the calendar",
-    "filter": "FILTER"
+    "filter": "FILTER",
+    "no-data-yet": "Belum ada Data"
   },
   "TodoApp": {
     "addTask": "Add Task",
@@ -137,7 +156,7 @@
     "schedule": "Jadwal",
     "curated-content": "Kurasi Konten",
     "communication": "Komunikasi",
-    "contest": "Kontes",
+    "contest": "Lomba",
     "ticketing": "Ticketing",
     "knowledge-base": "Knowledge Base",
     "faq": "FAQ",
@@ -543,5 +562,9 @@
     "sortBy": "Urutkan Berdasarkan",
     "latest": "Terbaru",
     "mostPopular": "Terpopuler"
+  },
+  "Planning": {
+    "planning": "Perencanaan",
+    "channel": "Kanal"
   }
 }