diff --git a/src/module/announcement/ui/create_users_announcement.tsx b/src/module/announcement/ui/create_users_announcement.tsx
index 23c1060..319a8d4 100644
--- a/src/module/announcement/ui/create_users_announcement.tsx
+++ b/src/module/announcement/ui/create_users_announcement.tsx
@@ -2,7 +2,7 @@
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
 import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { FaCheck } from 'react-icons/fa';
 import { GroupData } from '../lib/type_announcement';
@@ -103,6 +103,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
     memberGroup.set(selectedGroups);
     onClose(true);
   };
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   useShallowEffect(() => {
     getData()
@@ -111,7 +112,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
   return (
     <div>
       <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
-      <Box p={20}>
+      <Box p={20} pb={100}>
         <Group justify='flex-end' mb={20}>
           <Text
             onClick={handleSelectAll}
@@ -162,7 +163,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
                 <Box key={division.id}>
                   <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
                     <Box w={{
-                      base: 280,
+                     base: isMobile ? 230 : 280,
                       xl: 430
                     }}>
                       <Text truncate="end" pl={20}>
diff --git a/src/module/announcement/ui/edit_choose_member.tsx b/src/module/announcement/ui/edit_choose_member.tsx
index 8708057..e27162e 100644
--- a/src/module/announcement/ui/edit_choose_member.tsx
+++ b/src/module/announcement/ui/edit_choose_member.tsx
@@ -2,7 +2,7 @@
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
 import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { FaCheck } from 'react-icons/fa';
 import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement';
@@ -102,6 +102,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
       memberGroup.set(selectedGroups);
       onClose(true);
    };
+   const isMobile = useMediaQuery('(max-width: 369px)');
 
    useShallowEffect(() => {
       getData()
@@ -150,6 +151,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
                            {item.name}
                         </Text>
                         <Text
+                           lineClamp={1}
                         >
                            {checked[item.id] && checked[item.id].length === item.Division.length ? <FaCheck style={{ marginRight: 10 }} />
                               : (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length) ? <FaMinus style={{ marginRight: 10 }} /> : ""}
@@ -160,7 +162,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
                         <Box key={division.id}>
                            <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
                               <Box w={{
-                                 base: 280,
+                                 base: isMobile ? 230 : 280,
                                  xl: 430
                               }}>
                                  <Text truncate="end" pl={20}>
diff --git a/src/module/division_new/ui/feature_detail_division.tsx b/src/module/division_new/ui/feature_detail_division.tsx
index 73be8d6..c9759c5 100644
--- a/src/module/division_new/ui/feature_detail_division.tsx
+++ b/src/module/division_new/ui/feature_detail_division.tsx
@@ -38,6 +38,7 @@ export default function FeatureDetailDivision() {
     fetchData()
   }, [param.id])
   const isMobile = useMediaQuery('(max-width: 399px)');
+  const isMobile2 = useMediaQuery('(max-width: 369px)');
 
   return (
     <Box pt={10}>
@@ -57,12 +58,12 @@ export default function FeatureDetailDivision() {
           <Grid justify='center' align='center'>
             <Grid.Col span={"auto"}>
               <ActionIcon variant="filled"
-                size={"xl"}
+                size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
                 radius={100}
                 color={WARNA.bgHijauMuda}
               >
-                <LuClipboardEdit size={25} color={WARNA.biruTua} />
+                <LuClipboardEdit size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={{ base: 7, md: 9 }}>
@@ -82,12 +83,12 @@ export default function FeatureDetailDivision() {
           <Grid justify='center' align='center'>
             <Grid.Col span={"auto"}>
               <ActionIcon variant="filled"
-                size={"xl"}
+                size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
                 radius={100}
                 color={WARNA.bgHijauMuda}
               >
-                <BsFileEarmarkText size={25} color={WARNA.biruTua} />
+                <BsFileEarmarkText size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={{ base: 7, md: 9 }}>
@@ -107,12 +108,12 @@ export default function FeatureDetailDivision() {
           <Grid justify='center' align='center'>
             <Grid.Col span={"auto"}>
               <ActionIcon variant="filled"
-                size={"xl"}
+                size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
                 radius={100}
                 color={WARNA.bgHijauMuda}
               >
-                <GoCommentDiscussion size={25} color={WARNA.biruTua} />
+                <GoCommentDiscussion size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={{ base: 7, md: 9 }}>
@@ -132,12 +133,12 @@ export default function FeatureDetailDivision() {
           <Grid justify='center' align='center'>
             <Grid.Col span={"auto"}>
               <ActionIcon variant="filled"
-                size={"xl"}
+                size={isMobile2 ? "lg" : "xl"}
                 aria-label="Gradient action icon"
                 radius={100}
                 color={WARNA.bgHijauMuda}
               >
-                <IoCalendarOutline size={25} color={WARNA.biruTua} />
+                <IoCalendarOutline size={isMobile2 ? 20 : 25} color={WARNA.biruTua} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={{ base: 7, md: 9 }}>
diff --git a/src/module/project/ui/create_project.tsx b/src/module/project/ui/create_project.tsx
index db38434..a8006bd 100644
--- a/src/module/project/ui/create_project.tsx
+++ b/src/module/project/ui/create_project.tsx
@@ -11,7 +11,7 @@ import LayoutModal from "@/module/_global/layout/layout_modal";
 import toast from "react-hot-toast";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { funGetUserByCookies } from "@/module/auth";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useHookstate } from "@hookstate/core";
 import { globalMemberProject } from "../lib/val_project";
 import ViewDateEndTask from "./create_date_end_task";
@@ -40,6 +40,7 @@ export default function CreateProject() {
   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [indexDelTask, setIndexDelTask] = useState<number>(0)
   const roleLogin = useHookstate(globalRole)
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   const [body, setBody] = useState<any>({
     idGroup: "",
@@ -302,19 +303,19 @@ export default function CreateProject() {
                           >
                             <Grid.Col span={9}>
                               <Group>
-                                <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                                <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
                                 <Box w={{
-                                  base: 140,
+                                  base: isMobile ? 130 : 140,
                                   xl: 270
                                 }}>
-                                  <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
+                                  <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
                                     {v.name}
                                   </Text>
                                 </Box>
                               </Group>
                             </Grid.Col>
                             <Grid.Col span={3}>
-                              <Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
+                              <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                                 Anggota
                               </Text>
                             </Grid.Col>
diff --git a/src/module/project/ui/list_anggota_detail_project.tsx b/src/module/project/ui/list_anggota_detail_project.tsx
index 8d7bfa0..3e51a39 100644
--- a/src/module/project/ui/list_anggota_detail_project.tsx
+++ b/src/module/project/ui/list_anggota_detail_project.tsx
@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
 import toast from 'react-hot-toast';
 import { useParams, useRouter } from 'next/navigation';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IDataMemberProject } from '../lib/type_project';
 import { FaUser } from 'react-icons/fa6';
 import { IoIosCloseCircle } from 'react-icons/io';
@@ -45,6 +45,7 @@ export default function ListAnggotaDetailProject() {
     getOneData();
   }, [param.id])
 
+
   async function onSubmit() {
     try {
       const res = await funDeleteMemberProject(param.id, { idUser: dataChoose.id });
@@ -61,6 +62,7 @@ export default function ListAnggotaDetailProject() {
       toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
     }
   }
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   return (
     <Box pt={20}>
@@ -100,20 +102,20 @@ export default function ListAnggotaDetailProject() {
                         >
                           <Grid.Col span={9}>
                             <Group>
-                              <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                              <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
                               <Box w={{
-                                base: 140,
+                                base: isMobile ? 130 : 140,
                                 xl: 270
                               }}>
                                 <Flex direction={'column'} align="flex-start" justify="flex-start">
-                                  <Text lineClamp={1}>{v.name}</Text>
-                                  <Text c={"#5A687D"} fz={14} lineClamp={1}>{v.email}</Text>
+                                  <Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
+                                  <Text c={"#5A687D"} fz={isMobile ? 10 : 14} lineClamp={1}>{v.email}</Text>
                                 </Flex>
                               </Box>
                             </Group>
                           </Grid.Col>
                           <Grid.Col span={3}>
-                            <Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
+                            <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                               Anggota
                             </Text>
                           </Grid.Col>
diff --git a/src/module/project/ui/list_project.tsx b/src/module/project/ui/list_project.tsx
index 9d13e33..79719ca 100644
--- a/src/module/project/ui/list_project.tsx
+++ b/src/module/project/ui/list_project.tsx
@@ -8,7 +8,7 @@ import { MdAccountCircle } from 'react-icons/md';
 import { RiCircleFill } from 'react-icons/ri';
 import { funGetAllProject } from '../lib/api_project';
 import toast from 'react-hot-toast';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IDataProject } from '../lib/type_project';
 import { useHookstate } from '@hookstate/core';
 import _ from 'lodash';
@@ -52,6 +52,7 @@ export default function ListProject() {
   const handleList = () => {
     setIsList(!isList)
   }
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   return (
     <Box mt={20}>
@@ -132,7 +133,7 @@ export default function ListProject() {
                       <Group justify='space-between' align='center'>
                         <Box>
                           <Box w={{
-                            base: 230,
+                            base: isMobile ? 200 : 230,
                             xl: 430
                           }}>
                             <Text truncate="end" pl={20}>
diff --git a/src/module/project/ui/results_file.tsx b/src/module/project/ui/results_file.tsx
index 22e19c8..b052254 100644
--- a/src/module/project/ui/results_file.tsx
+++ b/src/module/project/ui/results_file.tsx
@@ -22,7 +22,7 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
           </Center>
         </Grid.Col>
         <Grid.Col span={10}>
-        <Text>{name}</Text>
+        <Text lineClamp={1}>{name}</Text>
         </Grid.Col>
       </Grid>
       <Group>