diff --git a/app/[locale]/(protected)/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/agenda-setting/calender-view.tsx
index 6eba2619..06dbf764 100644
--- a/app/[locale]/(protected)/agenda-setting/calender-view.tsx
+++ b/app/[locale]/(protected)/agenda-setting/calender-view.tsx
@@ -16,12 +16,17 @@ import { CalendarEvent, CalendarCategory } from "./data";
 import { EventContentArg } from "@fullcalendar/core";
 import EventModal from "./event-modal";
 import { useTranslations } from "next-intl";
+import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
+import dayjs from "dayjs";
 const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
 interface CalendarViewProps {
   events: CalendarEvent[];
   categories: CalendarCategory[];
 }
 
+const INITIAL_YEAR = dayjs().format("YYYY");
+const INITIAL_MONTH = dayjs().format("M");
+
 const CalendarView = ({ events, categories }: CalendarViewProps) => {
   const [selectedCategory, setSelectedCategory] = useState<string[] | null>(
     null
@@ -44,6 +49,18 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
     { title: "Create New theme", id: "104", tag: "etc" },
   ]);
 
+  useEffect(() => {
+    getCalendarEvents();
+  });
+  const getCalendarEvents = async () => {
+    const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
+    console.log("ress", res);
+
+    if (res.error) {
+      return false;
+    }
+  };
+
   useEffect(() => {
     setSelectedCategory(categories?.map((c) => c.value));
   }, [events, categories]);
@@ -151,14 +168,14 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
               />
             </div>
 
-            <div id="external-events" className=" space-y-1.5 mt-6 px-4">
+            {/* <div id="external-events" className=" space-y-1.5 mt-6 px-4">
               <p className="text-sm font-medium text-default-700 mb-3">
                 {t("shortDesc")}
               </p>
               {dragEvents.map((event) => (
                 <ExternalDraggingevent key={event.id} event={event} />
               ))}
-            </div>
+            </div> */}
             <div className="py-4 text-default-800  font-semibold text-xs uppercase mt-4 mb-2 px-4">
               {t("filter")}
             </div>
diff --git a/app/[locale]/(protected)/agenda-setting/data.ts b/app/[locale]/(protected)/agenda-setting/data.ts
index 16e94cee..6b28e1b1 100644
--- a/app/[locale]/(protected)/agenda-setting/data.ts
+++ b/app/[locale]/(protected)/agenda-setting/data.ts
@@ -1,17 +1,31 @@
+import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
 import { faker } from "@faker-js/faker";
+import dayjs from "dayjs";
 
 const date = new Date();
 const prevDay = new Date().getDate() - 1;
 const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
+const INITIAL_YEAR = dayjs().format("YYYY");
+const INITIAL_MONTH = dayjs().format("M");
 
 // prettier-ignore
 const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1)
 // prettier-ignore
 const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
+
+export const getCalendarEvents = async () => {
+  const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
+  if (res.error) {
+    return false;
+  }
+  console.log("ress", res.data.data);
+  return res?.data?.data;
+};
+
 export const calendarEvents = [
   {
     id: faker.string.uuid(),
-    title: "All Day Event",
+    title: "aaaAll Day Event",
     start: date,
     end: nextDay,
     allDay: false,
diff --git a/app/[locale]/(protected)/agenda-setting/page.tsx b/app/[locale]/(protected)/agenda-setting/page.tsx
index 266a6f7b..d66f9bd0 100644
--- a/app/[locale]/(protected)/agenda-setting/page.tsx
+++ b/app/[locale]/(protected)/agenda-setting/page.tsx
@@ -1,9 +1,7 @@
 import { getEvents, getCategories } from "./utils";
-import { Category } from "./data"
+import { Category } from "./data";
 import CalendarView from "./calender-view";
 
-
-
 const CalenderPage = async () => {
   const events = await getEvents();
   const categories = await getCategories();
diff --git a/app/[locale]/(protected)/agenda-setting/utils.ts b/app/[locale]/(protected)/agenda-setting/utils.ts
index e4862dd2..427a2fd9 100644
--- a/app/[locale]/(protected)/agenda-setting/utils.ts
+++ b/app/[locale]/(protected)/agenda-setting/utils.ts
@@ -2,10 +2,10 @@ import { calendarEvents, categories } from "./data";
 
 // get events
 export const getEvents = async () => {
-    return calendarEvents;
+  return calendarEvents;
 };
 
 // get categories
 export const getCategories = async () => {
-    return categories;
-}
\ No newline at end of file
+  return categories;
+};
diff --git a/app/[locale]/(protected)/task-plan/mediahub/layout.tsx b/app/[locale]/(protected)/task-plan/mediahub/layout.tsx
new file mode 100644
index 00000000..2dd6882b
--- /dev/null
+++ b/app/[locale]/(protected)/task-plan/mediahub/layout.tsx
@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Task Plan Mediahub",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;
diff --git a/app/[locale]/(protected)/task-plan/mediahub/page.tsx b/app/[locale]/(protected)/task-plan/mediahub/page.tsx
new file mode 100644
index 00000000..e727209b
--- /dev/null
+++ b/app/[locale]/(protected)/task-plan/mediahub/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+export default function TaskPlanMediahub() {
+  const [singleView, setSingleView] = useState(true);
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex justify-between">
+        <Button></Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/(protected)/task-plan/medsos-mediahub/layout.tsx b/app/[locale]/(protected)/task-plan/medsos-mediahub/layout.tsx
new file mode 100644
index 00000000..7956b6d3
--- /dev/null
+++ b/app/[locale]/(protected)/task-plan/medsos-mediahub/layout.tsx
@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Task Plan Social Media Mediahub",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;
diff --git a/app/[locale]/(protected)/task-plan/medsos-mediahub/page.tsx b/app/[locale]/(protected)/task-plan/medsos-mediahub/page.tsx
new file mode 100644
index 00000000..0a7a82ed
--- /dev/null
+++ b/app/[locale]/(protected)/task-plan/medsos-mediahub/page.tsx
@@ -0,0 +1,10 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function MedsosMediahub() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      medsos mediahub
+    </div>
+  );
+}
diff --git a/service/agenda-setting/agenda-setting.ts b/service/agenda-setting/agenda-setting.ts
new file mode 100644
index 00000000..3a4cdd15
--- /dev/null
+++ b/service/agenda-setting/agenda-setting.ts
@@ -0,0 +1,6 @@
+import { httpGetInterceptor } from "../http-config/http-interceptor-service";
+
+export async function getAgendaSettingsList(year = "", month = "", type = "") {
+  const url = `agenda-settings/list?year=${year}&month=${month}&type=${type}`;
+  return httpGetInterceptor({ url });
+}