diff --git a/src/app/api/division/[id]/member/route.ts b/src/app/api/division/[id]/member/route.ts
new file mode 100644
index 0000000..6c7d5f3
--- /dev/null
+++ b/src/app/api/division/[id]/member/route.ts
@@ -0,0 +1,71 @@
+// GET MEMBER BY ID
+
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+
+
+export async function GET(request: Request, context: { params: { id: string } }) {
+    try {
+        const { id } = context.params;
+        const { searchParams } = new URL(request.url);
+        const user = await funGetUserByCookies()
+        const name = searchParams.get('search')
+        if (user.id == undefined) {
+           return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+        }
+  
+        const data = await prisma.division.findUnique({
+           where: {
+              id: String(id),
+              isActive: true,
+           }
+        });
+  
+        if (!data) {
+           return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan", }, { status: 404 });
+        }
+
+        const member = await prisma.divisionMember.findMany({
+            where: {
+               idDivision: String(id),
+                isActive: true,
+                User: {
+                    name: {
+                        contains: (name == undefined || name == null) ? "" : name,
+                        mode: "insensitive",
+                    }
+                }
+            },
+            select: {
+                id: true,
+                isAdmin: true,
+                isLeader: true,
+                idUser: true,
+                User: {
+                   select: {
+                      name: true,
+                      img: true
+                   }
+                }
+             },
+             orderBy: {
+                isAdmin: 'desc',
+             }
+        })
+
+        const fixMember = member.map((v: any) => ({
+            ..._.omit(v, ["User"]),
+            name: v.User.name,
+            img: v.User.img
+        }))
+        
+        
+
+        return NextResponse.json({ success: true, data: fixMember })
+
+    } catch (error) {
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan member, data tidak ditemukan", }, { status: 404 });
+    }
+}
\ No newline at end of file
diff --git a/src/app/api/division/[id]/route.ts b/src/app/api/division/[id]/route.ts
index 85b6110..3697f3c 100644
--- a/src/app/api/division/[id]/route.ts
+++ b/src/app/api/division/[id]/route.ts
@@ -27,7 +27,7 @@ export async function GET(request: Request, context: { params: { id: string } })
       const member = await prisma.divisionMember.findMany({
          where: {
             idDivision: String(id),
-            isActive: true
+            isActive: true,
          },
          select: {
             id: true,
diff --git a/src/app/api/task/[id]/member/route.ts b/src/app/api/task/[id]/member/route.ts
index ca5f340..4ffec21 100644
--- a/src/app/api/task/[id]/member/route.ts
+++ b/src/app/api/task/[id]/member/route.ts
@@ -32,7 +32,7 @@ export async function POST(request: Request, context: { params: { id: string } }
 
       if (member.length > 0) {
          const dataMember = member.map((v: any) => ({
-            ..._.omit(v, ["idUser", "name"]),
+            ..._.omit(v, ["idUser", "name", "img"]),
             idDivision: idDivision,
             idProject: id,
             idUser: v.idUser,
diff --git a/src/module/calender/ui/create_user_calender.tsx b/src/module/calender/ui/create_user_calender.tsx
index 97543e2..1fc264e 100644
--- a/src/module/calender/ui/create_user_calender.tsx
+++ b/src/module/calender/ui/create_user_calender.tsx
@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import { globalCalender } from '../lib/val_calender';
 import { useParams, useRouter } from 'next/navigation';
-import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
+import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Divider, Flex, Grid, Group, rem, Text } from '@mantine/core';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Text, TextInput } from '@mantine/core';
 import { FaCheck } from 'react-icons/fa6';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
+import { Carousel } from '@mantine/carousel';
 
 export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
   const router = useRouter()
@@ -17,13 +20,15 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
   const member = useHookstate(globalCalender)
   const [selectAll, setSelectAll] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [onClickSearch, setOnClickSearch] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
 
   async function getData() {
     try {
       setLoading(true)
-      const response = await funGetDivisionById(param.id)
+      const response = await funGetSearchMemberDivision("?search=", param.id)
       if (response.success) {
-        setData(response.data.member)
+        setData(response.data)
         if (member.length > 0) {
           setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
         }
@@ -81,15 +86,122 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
     onClose(true)
   }
 
+  const handleSearchClick = () => {
+    setOnClickSearch(true);
+  };
+
+  const handleClose = () => {
+    setOnClickSearch(false);
+  };
+
+  function handleXMember(id: number) {
+    setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
+  }
+
+  async function fetchGetMember(val: string) {
+    setSearchQuery(val)
+    try {
+      const res = await funGetSearchMemberDivision('?search=' + val, param.id);
+      if (res.success) {
+        setData(res.data)
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   return (
     <Box>
       <LayoutNavbarNew
         // back=""
         title="Pilih Anggota"
-        menu
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+          <HiMagnifyingGlass size={20} color='white' />
+        </ActionIcon>}
       />
+
+      {/* SEARCH */}
+      {onClickSearch
+        ? (
+          <Box
+            pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
+              maxWidth: rem(550),
+              zIndex: 9999,
+              backgroundColor: `${WARNA.biruTua}`,
+              borderBottomLeftRadius: 20,
+              borderBottomRightRadius: 20,
+            }}>
+            <Grid justify='center' align='center' gutter={'lg'}>
+              <Grid.Col span={1}>
+                <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
+                  <IoArrowBackOutline size={30} />
+                </ActionIcon>
+              </Grid.Col>
+              <Grid.Col span={11}>
+                <TextInput
+                  styles={{
+                    input: {
+                      color: "white",
+                      borderRadius: '#A3A3A3',
+                      borderColor: `${WARNA.biruTua}`,
+                      backgroundColor: `${WARNA.biruTua}`,
+                    },
+                  }}
+                  size="md"
+                  radius={30}
+                  placeholder="Pencarian"
+                  onChange={(e) => fetchGetMember(e.currentTarget.value)}
+                />
+              </Grid.Col>
+            </Grid>
+          </Box>
+        )
+        : null
+      }
+            {/* Close User */}
+            <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 100,
+        backgroundColor: `${WARNA.bgWhite}`,
+        borderBottom: `1px solid ${"#E0DFDF"}`
+      }}>
+        {selectedFiles.length > 0 ? (
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+            {selectedFiles.map((v: any, i: any) => {
+              return (
+                <Carousel.Slide key={i}>
+                  <Box w={{
+                    base: 70,
+                    xl: 70
+                  }}
+                    onClick={() => { handleXMember(v.idUser) }}
+                  >
+                    <Center>
+                      <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
+                        <Avatar style={{
+                          border: `2px solid ${WARNA.biruTua}`
+                        }} src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                      </Indicator>
+                    </Center>
+                    <Text ta={"center"} lineClamp={1}>{v.name}</Text>
+                  </Box>
+                </Carousel.Slide>
+              )
+            })}
+          </Carousel>
+        ) : (
+          <Box h={rem(81)}>
+            <Flex justify={"center"} align={'center'} h={"100%"}>
+              <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+            </Flex>
+          </Box>
+        )}
+      </Box>
+
       <Box p={20}>
-        <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+        <Group justify="space-between" mt={100} onClick={handleSelectAll}>
           <Text c={WARNA.biruTua} fw={"bold"}>
             Pilih Semua Anggota
           </Text>
diff --git a/src/module/calender/ui/update_list_users.tsx b/src/module/calender/ui/update_list_users.tsx
index 06df22f..64c1b96 100644
--- a/src/module/calender/ui/update_list_users.tsx
+++ b/src/module/calender/ui/update_list_users.tsx
@@ -1,8 +1,8 @@
 "use client"
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
-import { funGetDivisionById, IDataMemberDivision } from '@/module/division_new';
+import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from '@/module/division_new';
 import { useHookstate } from '@hookstate/core';
-import { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -10,6 +10,8 @@ import { globalCalender } from '../lib/val_calender';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
 import { FaCheck } from 'react-icons/fa6';
+import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
+import { Carousel } from '@mantine/carousel';
 
 
 export default function UpdateListUsers({ onClose }: { onClose: (val: any) => void }) {
@@ -20,13 +22,15 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
   const member = useHookstate(globalCalender)
   const [selectAll, setSelectAll] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [onClickSearch, setOnClickSearch] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
 
   async function getData() {
     try {
       setLoading(true)
-      const response = await funGetDivisionById(param.id)
+      const response = await funGetSearchMemberDivision("?search=", param.id)
       if (response.success) {
-        setData(response.data.member)
+        setData(response.data)
         if (member.length > 0) {
           setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
         }
@@ -51,7 +55,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
     if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
       setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
     } else {
-      setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img  }])
+      setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }])
     }
   };
 
@@ -83,15 +87,122 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
     onClose(true)
   }
 
+  const handleSearchClick = () => {
+    setOnClickSearch(true);
+  };
+
+  const handleClose = () => {
+    setOnClickSearch(false);
+  };
+
+  function handleXMember(id: number) {
+    setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
+  }
+
+  async function fetchGetMember(val: string) {
+    setSearchQuery(val)
+    try {
+      const res = await funGetSearchMemberDivision('?search=' + val, param.id);
+      if (res.success) {
+        setData(res.data)
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   return (
     <Box>
       <LayoutNavbarNew
         // back=""
         title="Pilih Anggota"
-        menu
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+          <HiMagnifyingGlass size={20} color='white' />
+        </ActionIcon>}
       />
+
+      {/* SEARCH */}
+      {onClickSearch
+        ? (
+          <Box
+            pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
+              maxWidth: rem(550),
+              zIndex: 9999,
+              backgroundColor: `${WARNA.biruTua}`,
+              borderBottomLeftRadius: 20,
+              borderBottomRightRadius: 20,
+            }}>
+            <Grid justify='center' align='center' gutter={'lg'}>
+              <Grid.Col span={1}>
+                <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
+                  <IoArrowBackOutline size={30} />
+                </ActionIcon>
+              </Grid.Col>
+              <Grid.Col span={11}>
+                <TextInput
+                  styles={{
+                    input: {
+                      color: "white",
+                      borderRadius: '#A3A3A3',
+                      borderColor: `${WARNA.biruTua}`,
+                      backgroundColor: `${WARNA.biruTua}`,
+                    },
+                  }}
+                  size="md"
+                  radius={30}
+                  placeholder="Pencarian"
+                  onChange={(e) => fetchGetMember(e.currentTarget.value)}
+                />
+              </Grid.Col>
+            </Grid>
+          </Box>
+        )
+        : null
+      }
+      {/* Close User */}
+      <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 100,
+        backgroundColor: `${WARNA.bgWhite}`,
+        borderBottom: `1px solid ${"#E0DFDF"}`
+      }}>
+        {selectedFiles.length > 0 ? (
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+            {selectedFiles.map((v: any, i: any) => {
+              return (
+                <Carousel.Slide key={i}>
+                  <Box w={{
+                    base: 70,
+                    xl: 70
+                  }}
+                    onClick={() => { handleXMember(v.idUser) }}
+                  >
+                    <Center>
+                      <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
+                        <Avatar style={{
+                          border: `2px solid ${WARNA.biruTua}`
+                        }} src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                      </Indicator>
+                    </Center>
+                    <Text ta={"center"} lineClamp={1}>{v.name}</Text>
+                  </Box>
+                </Carousel.Slide>
+              )
+            })}
+          </Carousel>
+        ) : (
+          <Box h={rem(81)}>
+            <Flex justify={"center"} align={'center'} h={"100%"}>
+              <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+            </Flex>
+          </Box>
+        )}
+      </Box>
+
       <Box p={20}>
-        <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+        <Group justify="space-between" mt={100} onClick={handleSelectAll}>
           <Text c={WARNA.biruTua} fw={"bold"}>
             Pilih Semua Anggota
           </Text>
@@ -99,12 +210,12 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
         </Group>
         {loading ?
           Array(4)
-          .fill(null)
-          .map((_, i) => (
-             <Box key={i}>
+            .fill(null)
+            .map((_, i) => (
+              <Box key={i}>
                 <SkeletonSingle />
-             </Box>
-          ))
+              </Box>
+            ))
           :
           <Box mt={20} mb={100}>
             {isData.map((v, i) => {
@@ -136,10 +247,10 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
           </Box>
         }
       </Box>
-        <Box  pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-            maxWidth: rem(550),
-            zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
       }}>
         {loading ?
           <Skeleton height={50} radius={30} />
@@ -155,7 +266,7 @@ export default function UpdateListUsers({ onClose }: { onClose: (val: any) => vo
             Simpan
           </Button>
         }
-        </Box>
+      </Box>
     </Box>
   );
 }
diff --git a/src/module/division_new/index.ts b/src/module/division_new/index.ts
index d72b480..033e9b5 100644
--- a/src/module/division_new/index.ts
+++ b/src/module/division_new/index.ts
@@ -14,7 +14,7 @@ import CreateAnggotaDivision from './ui/create_anggota_division';
 import EditDivision from './ui/edit_division';
 import CreateReport from './ui/create_report';
 import ReportDivisionId from './ui/report_division_id';
-import { funGetDivisionById, funGetListDivisionByIdDivision } from './lib/api_division';
+import { funGetDivisionById, funGetListDivisionByIdDivision, funGetSearchMemberDivision } from './lib/api_division';
 
 export { CreateUsers };
 export { CreateAdminDivision };
@@ -34,3 +34,4 @@ export { CreateReport }
 export { ReportDivisionId }
 export { funGetDivisionById }
 export { funGetListDivisionByIdDivision }
+export { funGetSearchMemberDivision }
\ No newline at end of file
diff --git a/src/module/division_new/lib/api_division.ts b/src/module/division_new/lib/api_division.ts
index 7448e1f..94c6fe5 100644
--- a/src/module/division_new/lib/api_division.ts
+++ b/src/module/division_new/lib/api_division.ts
@@ -82,4 +82,9 @@ export const funGetListDivisionByIdDivision = async (path: string) => {
 export const funGetReportDivision = async (path?: string) => {
    const response = await fetch(`/api/division/report${(path) ? path : ''}`, { next: { tags: ['discussion'] } });
    return await response.json().catch(() => null);
+}
+
+export const funGetSearchMemberDivision = async (path: string, id: string) => {
+   const response = await fetch(`/api/division/${id}/member/${(path) ? path : ''}`, { next: { tags: ['division'] } });
+   return await response.json().catch(() => null);
 }
\ No newline at end of file
diff --git a/src/module/division_new/ui/create_anggota_division.tsx b/src/module/division_new/ui/create_anggota_division.tsx
index edce84c..9d59c70 100644
--- a/src/module/division_new/ui/create_anggota_division.tsx
+++ b/src/module/division_new/ui/create_anggota_division.tsx
@@ -145,41 +145,22 @@ export default function CreateAnggotaDivision() {
         backgroundColor: `${WARNA.bgWhite}`,
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
-        {/* <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
-          {selectedFiles.map((v: any, i: any) => {
-            return (
-              <Carousel.Slide key={i}>
-                <Box w={{
-                  base: 60,
-                  xl: 60
-                }}
-                  onClick={() => { handleXMember(v.idUser) }}
-                >
-                  <Center>
-                    <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
-                      <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
-                    </Indicator>
-                  </Center>
-                  <Text ta={"center"} lineClamp={1}>{v.name}</Text>
-                </Box>
-              </Carousel.Slide>
-            )
-          })}
-        </Carousel> */}
         {selectedFiles.length > 0 ? (
           <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
                   <Box w={{
-                    base: 60,
-                    xl: 60
+                    base: 70,
+                    xl: 70
                   }}
                     onClick={() => { handleXMember(v.idUser) }}
                   >
                     <Center>
                       <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
-                        <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                        <Avatar style={{
+                          border: `2px solid ${WARNA.biruTua}`
+                        }} src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
                       </Indicator>
                     </Center>
                     <Text ta={"center"} lineClamp={1}>{v.name}</Text>
@@ -189,8 +170,10 @@ export default function CreateAnggotaDivision() {
             })}
           </Carousel>
         ) : (
-          <Box>
-            <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+          <Box h={rem(81)}>
+            <Flex justify={"center"} align={'center'} h={"100%"}>
+              <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+            </Flex>
           </Box>
         )}
       </Box>
diff --git a/src/module/project/ui/list_project.tsx b/src/module/project/ui/list_project.tsx
index 0c706d6..afbab55 100644
--- a/src/module/project/ui/list_project.tsx
+++ b/src/module/project/ui/list_project.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { globalRole, WARNA } from '@/module/_global';
-import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Text, TextInput, Title } from '@mantine/core';
+import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
@@ -12,6 +12,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IDataProject } from '../lib/type_project';
 import { funGetAllGroup, IDataGroup } from '@/module/group';
 import { useHookstate } from '@hookstate/core';
+import _ from 'lodash';
 
 export default function ListProject() {
   const [isList, setIsList] = useState(false)
@@ -85,12 +86,18 @@ export default function ListProject() {
       </Grid>
       <Box pt={20}>
         {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
-        <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-          <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
-          <Flex justify={'center'} align={'center'} h={'100%'}>
-            <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
-          </Flex>
-        </Box>
+        {loading ?
+          <Box>
+            <Skeleton width={"100%"} height={100} radius={"md"} />
+          </Box>
+          :
+          <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
+            <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
+            <Flex justify={'center'} align={'center'} h={'100%'}>
+              <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
+            </Flex>
+          </Box>
+        }
         {isList ? (
           <Box pt={20}>
             {isData.map((v, i) => {
@@ -152,45 +159,61 @@ export default function ListProject() {
           </Box>
         ) : (
           <Box pt={20}>
-            {isData.map((v, i) => {
-              return (
-                <Box key={i} mb={20}>
-                  <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
-                    <Card.Section>
-                      <Box h={120} bg={WARNA.biruTua}>
-                        <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
-                          <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
-                        </Flex>
-                      </Box>
-                    </Card.Section>
-                    <Box pt={10}>
-                      <Text>{v.desc}</Text>
-                      <Group align='center' pt={10} justify='space-between'>
-                        <Badge color={
-                          v.status === 0 ? '#1372C4' :
-                            v.status === 1 ? '#C5771A' :
-                              v.status === 2 ? '#0B6025' :
-                                v.status === 3 ? '#BB1F1F' :
-                                  ""
-                        }>{
-                            v.status === 0 ? 'Segera' :
-                              v.status === 1 ? 'Dikerjakan' :
-                                v.status === 2 ? 'Selesai' :
-                                  v.status === 3 ? 'Dibatalkan' :
-                                    ""
-                          }</Badge>
-                        <Avatar.Group>
-                          <Avatar>
-                            <MdAccountCircle size={32} color={WARNA.biruTua} />
-                          </Avatar>
-                          <Avatar>+{v.member - 1}</Avatar>
-                        </Avatar.Group>
-                      </Group>
-                    </Box>
-                  </Card>
+            {loading ?
+              Array(3)
+                .fill(null)
+                .map((_, i) => (
+                  <Box key={i} mb={20}>
+                    <Skeleton width={"100%"} height={200} radius={"md"} />
+                  </Box>
+                ))
+              :
+              _.isEmpty(isData)
+                ?
+                <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Kegiatan</Text>
                 </Box>
-              );
-            })}
+                :
+                isData.map((v, i) => {
+                  return (
+                    <Box key={i} mb={20}>
+                      <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
+                        <Card.Section>
+                          <Box h={120} bg={WARNA.biruTua}>
+                            <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
+                              <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
+                            </Flex>
+                          </Box>
+                        </Card.Section>
+                        <Box pt={10}>
+                          <Text>{v.desc}</Text>
+                          <Group align='center' pt={10} justify='space-between'>
+                            <Badge color={
+                              v.status === 0 ? '#1372C4' :
+                                v.status === 1 ? '#C5771A' :
+                                  v.status === 2 ? '#0B6025' :
+                                    v.status === 3 ? '#BB1F1F' :
+                                      ""
+                            }>{
+                                v.status === 0 ? 'Segera' :
+                                  v.status === 1 ? 'Dikerjakan' :
+                                    v.status === 2 ? 'Selesai' :
+                                      v.status === 3 ? 'Dibatalkan' :
+                                        ""
+                              }</Badge>
+                            <Avatar.Group>
+                              <Avatar>
+                                <MdAccountCircle size={32} color={WARNA.biruTua} />
+                              </Avatar>
+                              <Avatar>+{v.member - 1}</Avatar>
+                            </Avatar.Group>
+                          </Group>
+                        </Box>
+                      </Card>
+                    </Box>
+                  );
+                })
+            }
           </Box>
         )}
       </Box>
diff --git a/src/module/task/ui/add_member_detail_task.tsx b/src/module/task/ui/add_member_detail_task.tsx
index 32a0d4c..0039258 100644
--- a/src/module/task/ui/add_member_detail_task.tsx
+++ b/src/module/task/ui/add_member_detail_task.tsx
@@ -1,16 +1,19 @@
 "use client"
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
-import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
+import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import {
+   ActionIcon,
    Anchor,
    Avatar,
    Box,
    Button,
+   Center,
    Checkbox,
    Divider,
    Flex,
    Grid,
    Group,
+   Indicator,
    rem,
    Stack,
    Text,
@@ -24,6 +27,9 @@ import { FaCheck } from "react-icons/fa6";
 import { funAddMemberTask, funGetTaskDivisionById } from "../lib/api_task";
 import { IDataMemberTaskDivision } from "../lib/type_task";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { HiMagnifyingGlass } from "react-icons/hi2";
+import { IoArrowBackOutline, IoClose } from "react-icons/io5";
+import { Carousel } from "@mantine/carousel";
 
 export default function AddMemberDetailTask() {
    const router = useRouter()
@@ -34,14 +40,16 @@ export default function AddMemberDetailTask() {
    const [selectAll, setSelectAll] = useState(false)
    const [openModal, setOpenModal] = useState(false)
    const [loading, setLoading] = useState(true)
+   const [onClickSearch, setOnClickSearch] = useState(false)
+   const [searchQuery, setSearchQuery] = useState('')
 
 
    async function getData() {
       try {
          setLoading(true)
-         const response = await funGetDivisionById(param.id)
+         const response = await funGetSearchMemberDivision("?search=", param.id)
          if (response.success) {
-            setData(response.data.member)
+            setData(response.data)
          } else {
             toast.error(response.message)
          }
@@ -71,7 +79,7 @@ export default function AddMemberDetailTask() {
       if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
          setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
       } else {
-         setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name }])
+         setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img }])
       }
    };
 
@@ -84,7 +92,7 @@ export default function AddMemberDetailTask() {
             if (!isDataMember.some((i: any) => i.idUser == isData[index].idUser)) {
                if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
                   const newArr = {
-                     idUser: isData[index].idUser, name: isData[index].name
+                     idUser: isData[index].idUser, name: isData[index].name, img: isData[index].img
                   }
                   setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
                }
@@ -120,16 +128,122 @@ export default function AddMemberDetailTask() {
       }
    }
 
+   const handleSearchClick = () => {
+      setOnClickSearch(true);
+   };
+
+   const handleClose = () => {
+      setOnClickSearch(false);
+   };
+
+   function handleXMember(id: number) {
+      setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
+   }
+
+   async function fetchGetMember(val: string) {
+      setSearchQuery(val)
+      try {
+         const res = await funGetSearchMemberDivision('?search=' + val, param.id);
+         if (res.success) {
+            setData(res.data)
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
 
    return (
       <Box>
          <LayoutNavbarNew
             back=""
             title="Pilih Anggota"
-            menu
+            menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+               <HiMagnifyingGlass size={20} color='white' />
+            </ActionIcon>}
          />
+         {/* SEARCH */}
+         {onClickSearch
+            ? (
+               <Box
+                  pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
+                     maxWidth: rem(550),
+                     zIndex: 9999,
+                     backgroundColor: `${WARNA.biruTua}`,
+                     borderBottomLeftRadius: 20,
+                     borderBottomRightRadius: 20,
+                  }}>
+                  <Grid justify='center' align='center' gutter={'lg'}>
+                     <Grid.Col span={1}>
+                        <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
+                           <IoArrowBackOutline size={30} />
+                        </ActionIcon>
+                     </Grid.Col>
+                     <Grid.Col span={11}>
+                        <TextInput
+                           styles={{
+                              input: {
+                                 color: "white",
+                                 borderRadius: '#A3A3A3',
+                                 borderColor: `${WARNA.biruTua}`,
+                                 backgroundColor: `${WARNA.biruTua}`,
+                              },
+                           }}
+                           size="md"
+                           radius={30}
+                           placeholder="Pencarian"
+                           onChange={(e) => fetchGetMember(e.currentTarget.value)}
+                        />
+                     </Grid.Col>
+                  </Grid>
+               </Box>
+            )
+            : null
+         }
+         {/* Close User */}
+         <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 100,
+            backgroundColor: `${WARNA.bgWhite}`,
+            borderBottom: `1px solid ${"#E0DFDF"}`
+         }}>
+            {selectedFiles.length > 0 ? (
+               <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+                  {selectedFiles.map((v: any, i: any) => {
+                     return (
+                        <Carousel.Slide key={i}>
+                           <Box w={{
+                              base: 70,
+                              xl: 70
+                           }}
+                              onClick={() => { handleXMember(v.idUser) }}
+                           >
+                              <Center>
+                                 <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
+                                    <Avatar style={{
+                                       border: `2px solid ${WARNA.biruTua}`
+                                    }} src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                                 </Indicator>
+                              </Center>
+                              <Text ta={"center"} lineClamp={1}>{v.name}</Text>
+                           </Box>
+                        </Carousel.Slide>
+                     )
+                  })}
+               </Carousel>
+            ) : (
+               <Box h={rem(81)}>
+                  <Flex justify={"center"} align={'center'} h={"100%"}>
+                     <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+                  </Flex>
+               </Box>
+            )}
+         </Box>
+
+
          <Box p={20}>
-            <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+            <Group justify="space-between" mt={100} onClick={handleSelectAll}>
                <Text c={WARNA.biruTua} fw={"bold"}>
                   Pilih Semua Anggota
                </Text>
diff --git a/src/module/task/ui/create_users_project.tsx b/src/module/task/ui/create_users_project.tsx
index 93be73f..1628e7f 100644
--- a/src/module/task/ui/create_users_project.tsx
+++ b/src/module/task/ui/create_users_project.tsx
@@ -1,19 +1,22 @@
 "use client"
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from "@/module/_global";
-import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
+import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new";
 import { useHookstate } from "@hookstate/core";
 import {
   ActionIcon,
   Avatar,
   Box,
   Button,
+  Center,
   Divider,
   Flex,
   Grid,
   Group,
+  Indicator,
   rem,
   Skeleton,
   Text,
+  TextInput,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
@@ -23,6 +26,9 @@ import { globalMemberTask } from "../lib/val_task";
 import { FaCheck } from "react-icons/fa6";
 import { RiListCheck } from "react-icons/ri";
 import { BsListCheck } from "react-icons/bs";
+import { HiMagnifyingGlass } from "react-icons/hi2";
+import { IoArrowBackOutline, IoClose } from "react-icons/io5";
+import { Carousel } from "@mantine/carousel";
 
 export default function CreateUsersProject({ onClose }: { onClose: (val: any) => void }) {
   const router = useRouter()
@@ -32,14 +38,16 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
   const member = useHookstate(globalMemberTask)
   const [selectAll, setSelectAll] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [onClickSearch, setOnClickSearch] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
 
 
   async function getData() {
     try {
       setLoading(true)
-      const response = await funGetDivisionById(param.id)
+      const response = await funGetSearchMemberDivision("?search=", param.id)
       if (response.success) {
-        setData(response.data.member)
+        setData(response.data)
         if (member.length > 0) {
           setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
         }
@@ -96,19 +104,125 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
     onClose(true)
   }
 
+  const handleSearchClick = () => {
+    setOnClickSearch(true);
+  };
+
+  const handleClose = () => {
+    setOnClickSearch(false);
+  };
+
+  function handleXMember(id: number) {
+    setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
+  }
+
+  async function fetchGetMember(val: string) {
+    setSearchQuery(val)
+    try {
+       const res = await funGetSearchMemberDivision('?search=' + val, param.id);
+       if (res.success) {
+          setData(res.data)
+       } else {
+          toast.error(res.message);
+       }
+    } catch (error) {
+       console.error(error);
+    }
+ }
 
   return (
     <Box>
       <LayoutNavbarNew
         // back=""
         title="Pilih Anggota"
-        menu
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+          <HiMagnifyingGlass size={20} color='white' />
+        </ActionIcon>}
       />
+      {/* SEARCH */}
+      {onClickSearch
+        ? (
+          <Box
+            pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
+              maxWidth: rem(550),
+              zIndex: 9999,
+              backgroundColor: `${WARNA.biruTua}`,
+              borderBottomLeftRadius: 20,
+              borderBottomRightRadius: 20,
+            }}>
+            <Grid justify='center' align='center' gutter={'lg'}>
+              <Grid.Col span={1}>
+                <ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
+                  <IoArrowBackOutline size={30} />
+                </ActionIcon>
+              </Grid.Col>
+              <Grid.Col span={11}>
+                <TextInput
+                  styles={{
+                    input: {
+                      color: "white",
+                      borderRadius: '#A3A3A3',
+                      borderColor: `${WARNA.biruTua}`,
+                      backgroundColor: `${WARNA.biruTua}`,
+                    },
+                  }}
+                  size="md"
+                  radius={30}
+                  placeholder="Pencarian"
+                  onChange={(e) => fetchGetMember(e.currentTarget.value)}
+                />
+              </Grid.Col>
+            </Grid>
+          </Box>
+        )
+        : null
+      }
+      {/* Close User */}
+      <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 100,
+        backgroundColor: `${WARNA.bgWhite}`,
+        borderBottom: `1px solid ${"#E0DFDF"}`
+      }}>
+        {selectedFiles.length > 0 ? (
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+            {selectedFiles.map((v: any, i: any) => {
+              return (
+                <Carousel.Slide key={i}>
+                  <Box w={{
+                    base: 70,
+                    xl: 70
+                  }}
+                    onClick={() => { handleXMember(v.idUser) }}
+                  >
+                    <Center>
+                      <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
+                        <Avatar style={{
+                          border: `2px solid ${WARNA.biruTua}`
+                        }} src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                      </Indicator>
+                    </Center>
+                    <Text ta={"center"} lineClamp={1}>{v.name}</Text>
+                  </Box>
+                </Carousel.Slide>
+              )
+            })}
+          </Carousel>
+        ) : (
+          <Box h={rem(81)}>
+            <Flex justify={"center"} align={'center'} h={"100%"}>
+              <Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
+            </Flex>
+          </Box>
+        )}
+      </Box>
+
+
       <Box p={20}>
         {loading ?
           <Skeleton height={20} width={"100%"} mt={20} />
           :
-          <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+          <Group justify="space-between" mt={100} onClick={handleSelectAll}>
             <Text c={WARNA.biruTua} fw={"bold"}>
               Pilih Semua Anggota
             </Text>