diff --git a/src/app/api/calender/history/route.ts b/src/app/api/calender/history/route.ts
index 07f57d1..05836bf 100644
--- a/src/app/api/calender/history/route.ts
+++ b/src/app/api/calender/history/route.ts
@@ -15,6 +15,7 @@ export async function GET(request: Request) {
 
         const { searchParams } = new URL(request.url);
         const idDivision = searchParams.get("division");
+        const name = searchParams.get('search');
 
         if (idDivision != "null" && idDivision != null && idDivision != undefined) {
             const cekDivision = await prisma.division.count({
@@ -32,6 +33,10 @@ export async function GET(request: Request) {
                 where: {
                     isActive: true,
                     idDivision: idDivision,
+                    title: {
+                        contains: (name == undefined || name == "null") ? "" : name,
+                        mode: "insensitive"
+                    }
                 },
                 select: {
                     id: true,
@@ -54,21 +59,28 @@ export async function GET(request: Request) {
             });
 
             const allOmit = data.map((v: any) => ({
-                ..._.omit(v, ["title", "timeStart", "timeEnd", "id", ]),
+                ..._.omit(v, [""]),
                 dateStart: v.dateStart,
-                data: [
-                    {
-                        id: v.id,
-                        title: v.title,
-                        timeEnd: moment.utc(v.timeEnd).format('HH:mm'),
-                        timeStart: moment.utc(v.timeStart).format('HH:mm')
-                    }
-                ]
             }))
 
-            
+            // groupBy untuk dateStart
+            const groupByDateStart = _.groupBy(allOmit, 'dateStart');
 
-            return NextResponse.json({ success: true, message: "Berhasil mendapatkan calender", data: allOmit }, { status: 200 });
+            const result = Object.keys(groupByDateStart).map(key => {
+                const obj = groupByDateStart[key];
+                const data = obj.map((v: any) => ({
+                    id: v.id,
+                    title: v.title,
+                    timeEnd: moment.utc(v.timeEnd).format('HH:mm'),
+                    timeStart: moment.utc(v.timeStart).format('HH:mm')
+                }))
+                return {
+                    dateStart: key,
+                    data: data
+                }
+            })
+
+            return NextResponse.json({ success: true, message: "Berhasil mendapatkan calender", data: result }, { status: 200 });
 
         } else {
             return NextResponse.json({ success: false, message: "Gagal mendapatkan calender, data tidak ditemukan" }, { status: 404 });
diff --git a/src/app/api/calender/route.ts b/src/app/api/calender/route.ts
index adb0dd2..7b12fb2 100644
--- a/src/app/api/calender/route.ts
+++ b/src/app/api/calender/route.ts
@@ -16,6 +16,8 @@ export async function GET(request: Request) {
 
         const { searchParams } = new URL(request.url);
         const idDivision = searchParams.get("division");
+        const isDate = searchParams.get("date")
+
 
         if (idDivision != "null" && idDivision != null && idDivision != undefined) {
             const cekDivision = await prisma.division.count({
@@ -33,6 +35,7 @@ export async function GET(request: Request) {
                 where: {
                     isActive: true,
                     idDivision: idDivision,
+                    dateStart:  new Date(String(isDate))
                 },
                 select: {
                     id: true,
diff --git a/src/module/calender/ui/date_event_division.tsx b/src/module/calender/ui/date_event_division.tsx
index ff2974b..fb0cab5 100644
--- a/src/module/calender/ui/date_event_division.tsx
+++ b/src/module/calender/ui/date_event_division.tsx
@@ -4,26 +4,36 @@ import { DatePicker, DatePickerProps } from '@mantine/dates';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { funGetAllCalender } from '../lib/api_calender';
-import { useShallowEffect } from '@mantine/hooks';
+import { useSetState, useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
+import moment from 'moment';
 
 
 export default function DateEventDivision() {
-  const[isData, setData] = useState<IDataCalender[]>([])
+  const [isData, setData] = useState<IDataCalender[]>([])
   const router = useRouter()
   const param = useParams<{ id: string, detail: string }>()
+  const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
 
-  const getData = async () => {
+  const getData = async (tgl: any) => {
     try {
-      const response = await funGetAllCalender('?division=' + param.id)
+      const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
       setData(response.data)
     } catch (error) {
       console.log(error)
     }
   }
 
+  function change(val: Date) {
+    const a: any = moment(new Date(val)).format('YYYY-MM-DD')
+    console.log(val, a)
+    setDate(a)
+    getData(a)
+  }
+
+
   useShallowEffect(() => {
-    getData()
+    getData(isDate)
   }, [])
 
 
@@ -43,10 +53,12 @@ export default function DateEventDivision() {
         py={20}
         style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
       >
-        <DatePicker size='md' defaultValue={new Date()} renderDay={dayRenderer} />
+        <DatePicker size='md' defaultValue={new Date()} renderDay={dayRenderer}
+          onChange={(val: any) => { change(val) }}
+        />
       </Group>
       <Box>
-        <Text mb={10} mt={20}  fw={"bold"}>Hari Ini</Text>
+        <Text mb={10} mt={20} fw={"bold"}>Hari Ini</Text>
         {isData.map((event, index) => {
           const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
           const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
diff --git a/src/module/calender/ui/history_division_calender.tsx b/src/module/calender/ui/history_division_calender.tsx
index 0979b30..84bb9d3 100644
--- a/src/module/calender/ui/history_division_calender.tsx
+++ b/src/module/calender/ui/history_division_calender.tsx
@@ -58,10 +58,11 @@ export default function HistoryDivisionCalender() {
   const [isData, setData] = useState<IHistoryCalender[]>([])
   const router = useRouter()
   const param = useParams<{ id: string, detail: string }>()
+  const [searchQuery, setSearchQuery] = useState('')
 
   const getData = async () => {
     try {
-      const response = await funGetHostory('?division=' + param.id)
+      const response = await funGetHostory('?division=' + param.id + '&search=' + searchQuery)
       setData(response.data)
     } catch (error) {
       console.log(error)
@@ -70,11 +71,10 @@ export default function HistoryDivisionCalender() {
 
   useShallowEffect(() => {
     getData()
-  }, [])
+  }, [searchQuery])
   return (
     <Box>
-      <LayoutNavbarNew back="/calender" title="History kalender" menu />
-      <pre>{JSON.stringify(isData, null, 1)}</pre>
+      <LayoutNavbarNew back="/calender" title="Riwayat kalender" menu />
       <Box p={20}>
         <TextInput
           styles={{
@@ -88,10 +88,13 @@ export default function HistoryDivisionCalender() {
           radius={30}
           leftSection={<HiMagnifyingGlass size={20} />}
           placeholder="Pencarian"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
         />
         <Box mt={30}>
           <Box bg={"#DBE9D8"} style={{
-            borderRadius: 10
+            borderRadius: 10,
+            padding: 20
           }}>
             {isData.map((v, i) => {
               return (