diff --git a/src/module/calender/ui/date_event_division.tsx b/src/module/calender/ui/date_event_division.tsx
index f4d5b29..24ffd1d 100644
--- a/src/module/calender/ui/date_event_division.tsx
+++ b/src/module/calender/ui/date_event_division.tsx
@@ -4,7 +4,7 @@ import { DatePicker, DatePickerProps } from '@mantine/dates';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender';
-import { useSetState, useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useSetState, useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
 import moment from 'moment';
 import _ from 'lodash';
@@ -21,6 +21,7 @@ export default function DateEventDivision() {
   const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
   const [isMonth, setMonth] = useState<any>(moment().month() + 1)
   const [loading, setLoading] = useState(true)
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   const getData = async (tgl: any) => {
     try {
@@ -137,21 +138,21 @@ export default function DateEventDivision() {
                     <Group>
                       <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
                       <Flex direction={'column'}>
-                        <Text>{event.timeStart} - {event.timeEnd}</Text>
+                        <Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
                         <Box w={{
-                          base: 280,
+                          base: isMobile ? 220 : 280,
                           xl: 430
                         }}>
-                          <Text  fw={"bold"} lineClamp={1}>
-                          {_.startCase(event.title)}
+                          <Text fw={"bold"} lineClamp={1}>
+                            {_.startCase(event.title)}
                           </Text>
                         </Box>
                         <Box w={{
-                          base: 280,
+                          base: isMobile ? 230 : 280,
                           xl: 420
                         }}>
-                          <Text  lineClamp={1}>
-                          Dibuat oleh : {event.user_name}
+                          <Text lineClamp={1}>
+                            Dibuat oleh : {event.user_name}
                           </Text>
                         </Box>
                       </Flex>
diff --git a/src/module/division_new/ui/create_division.tsx b/src/module/division_new/ui/create_division.tsx
index e500019..5abfcbd 100644
--- a/src/module/division_new/ui/create_division.tsx
+++ b/src/module/division_new/ui/create_division.tsx
@@ -16,7 +16,7 @@ import {
     Textarea,
     TextInput,
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { IoIosArrowDropright } from "react-icons/io";
@@ -34,6 +34,7 @@ export default function CreateDivision() {
     const [isChooseAnggota, setChooseAnggota] = useState(false)
     const [isChooseAdmin, setChooseAdmin] = useState(false)
     const member = useHookstate(globalMemberDivision)
+    const isMobile = useMediaQuery('(max-width: 369px)');
     const [body, setBody] = useState<any>({
         idGroup: "",
         name: "",
@@ -194,19 +195,19 @@ export default function CreateDivision() {
                                                 >
                                                     <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/division_new/ui/drawer_division.tsx b/src/module/division_new/ui/drawer_division.tsx
index 5638b8a..ea48397 100644
--- a/src/module/division_new/ui/drawer_division.tsx
+++ b/src/module/division_new/ui/drawer_division.tsx
@@ -25,7 +25,7 @@ export default function DrawerDivision() {
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Tambah Divisi</Text>
+              <Text c={WARNA.biruTua} ta={"center"}>Tambah Divisi</Text>
             </Box>
           </Flex>
           {
diff --git a/src/module/division_new/ui/information_division.tsx b/src/module/division_new/ui/information_division.tsx
index ec9e1f4..c762265 100644
--- a/src/module/division_new/ui/information_division.tsx
+++ b/src/module/division_new/ui/information_division.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -30,6 +30,7 @@ export default function InformationDivision() {
   const [isOpenModal, setOpenModal] = useState(false)
   const roleLogin = useHookstate(globalRole)
   const [isAdmin, setAdmin] = useState(false)
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   async function getOneData() {
     try {
@@ -176,10 +177,10 @@ export default function InformationDivision() {
 
                 ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
                   <Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
-                    <Avatar size="lg">
-                      <AiOutlineUserAdd size={30} color={WARNA.biruTua} />
+                    <Avatar size={isMobile ? 'md' : 'lg'}>
+                      <AiOutlineUserAdd size={isMobile ? 25 : 30} color={WARNA.biruTua} />
                     </Avatar>
-                    <Text>Tambah Anggota</Text>
+                    <Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
                   </Group>
                   : <></>
               }
@@ -207,19 +208,19 @@ export default function InformationDivision() {
                         >
                           <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}>
                               {(v.isAdmin) ? 'Admin' : 'Anggota'}
                             </Text>
                           </Grid.Col>
diff --git a/src/module/division_new/ui/list_discussion.tsx b/src/module/division_new/ui/list_discussion.tsx
index f7562f9..749ee34 100644
--- a/src/module/division_new/ui/list_discussion.tsx
+++ b/src/module/division_new/ui/list_discussion.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { WARNA } from "@/module/_global";
 import { Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -16,6 +16,7 @@ export default function ListDiscussionOnDetailDivision() {
   const param = useParams<{ id: string }>()
   const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([])
   const [loading, setLoading] = useState(true);
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   async function fetchData() {
     try {
@@ -86,8 +87,11 @@ export default function ListDiscussionOnDetailDivision() {
                 >
                   <Group>
                     <GoDiscussionClosed size={25} />
-                    <Box w={{ base: 230, md: 400 }}>
-                      <Text fw={"bold"} truncate="end">
+                    <Box w={{
+                     base: isMobile ? 180 : 230,
+                      md: 400
+                    }}>
+                      <Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16}>
                         {v.desc}
                       </Text>
                     </Box>
@@ -100,7 +104,7 @@ export default function ListDiscussionOnDetailDivision() {
                       <Group gap={5} align="center">
                         <CiUser size={18} />
                         <Box w={{
-                          base: 125,
+                          base: isMobile ? 110 : 125,
                           xl: 300
                         }}>
                           <Text fz={13} lineClamp={1}>
@@ -115,7 +119,7 @@ export default function ListDiscussionOnDetailDivision() {
                     }}>
                       <Group gap={5} align="center" justify="flex-end">
                         <CiClock2 size={18} />
-                        <Text fz={13}>{v.date}</Text>
+                        <Text fz={isMobile ? 11 : 13}>{v.date}</Text>
                       </Group>
                     </Grid.Col>
                   </Grid>
diff --git a/src/module/document/ui/navbar_document_division.tsx b/src/module/document/ui/navbar_document_division.tsx
index 158ffb7..79d7126 100644
--- a/src/module/document/ui/navbar_document_division.tsx
+++ b/src/module/document/ui/navbar_document_division.tsx
@@ -15,7 +15,7 @@ import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import DrawerMenuDocumentDivision from './drawer_menu_document_division';
 import DrawerMore from './drawer_more';
 import { funGetDivisionById } from '@/module/division_new';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { funDeleteDocument, funGetAllDocument, funRenameDocument } from '../lib/api_document';
 import { IDataDocument, IJalurItem } from '../lib/type_document';
 import { useHookstate } from '@hookstate/core';
@@ -46,6 +46,7 @@ export default function NavbarDocumentDivision() {
   const [selectedFiles, setSelectedFiles] = useState<any>([])
   const [selectAll, setSelectAll] = useState(false)
   const [dariSelectAll, setDariSelectAll] = useState(false)
+  const isMobile = useMediaQuery('(max-width: 369px)');  
   const [bodyRename, setBodyRename] = useState({
     id: '',
     name: '',
@@ -349,20 +350,20 @@ export default function NavbarDocumentDivision() {
                               <Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaShare />} size={25}>
                                 {
                                   (v.category == "FOLDER") ?
-                                    <FcFolder size={50} /> :
+                                    <FcFolder size={isMobile ? 40 : 50} /> :
                                     (v.extension == "pdf" || v.extension == "csv") ?
-                                      <FcDocument size={50} /> :
-                                      <FcImageFile size={50} />
+                                      <FcDocument size={isMobile ? 40 : 50} /> :
+                                      <FcImageFile size={isMobile ? 40 : 50} />
                                 }
                               </Indicator>
                               :
                               <>
                                 {
                                   (v.category == "FOLDER") ?
-                                    <FcFolder size={50} /> :
+                                    <FcFolder size={isMobile ? 40 : 50} /> :
                                     (v.extension == "pdf" || v.extension == "csv") ?
-                                      <FcDocument size={50} /> :
-                                      <FcImageFile size={50} />
+                                      <FcDocument size={isMobile ? 40 : 50} /> :
+                                      <FcImageFile size={isMobile ? 40 : 50} />
                                 }
                               </>
 
@@ -386,7 +387,7 @@ export default function NavbarDocumentDivision() {
                           }}
                         >
                           <Box w={{
-                            base: 230,
+                            base: isMobile ? 200 : 230,
                             xl: 380,
                             md: 380,
                             sm: 380,
diff --git a/src/module/home/ui/features.tsx b/src/module/home/ui/features.tsx
index 8a489d5..d0c8edb 100644
--- a/src/module/home/ui/features.tsx
+++ b/src/module/home/ui/features.tsx
@@ -1,12 +1,14 @@
 'use client'
 import { WARNA } from '@/module/_global';
 import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2";
 
 export default function Features() {
   const router = useRouter()
+  const isMobile = useMediaQuery('(max-width: 369px)');
   return (
     <>
       <Box pt={10}>
@@ -17,57 +19,57 @@ export default function Features() {
           <Box onClick={() => router.push('/division')}>
             <Center>
               <ActionIcon variant="gradient"
-                size={68}
+                size={isMobile ? 50 : 68}
                 aria-label="Gradient action icon"
                 radius={100}
                 gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                <HiMiniUserGroup size={35} color={WARNA.biruTua} />
+                <HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
+              <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Divisi</Text>
             </Center>
           </Box>
           <Box onClick={() => router.push('/project?status=0&group=null')}>
             <Center>
               <ActionIcon variant="gradient"
-                size={68}
+                size={isMobile ? 50 : 68}
                 aria-label="Gradient action icon"
                 radius={100}
                 gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
+                <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
+              <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Kegiatan</Text>
             </Center>
           </Box>
           <Box onClick={() => router.push('/announcement')}>
             <Center>
               <ActionIcon variant="gradient"
-                size={68}
+                size={isMobile ? 50 : 68}
                 aria-label="Gradient action icon"
                 radius={100}
                 gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                <HiMegaphone size={35} color={WARNA.biruTua} />
+                <HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
+              <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Pengumuman</Text>
             </Center>
           </Box>
           <Box onClick={() => router.push('/home?cat=fitur')}>
             <Center>
               <ActionIcon variant="gradient"
-                size={68}
+                size={isMobile ? 50 : 68}
                 aria-label="Gradient action icon"
                 radius={100}
                 gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                <HiSquares2X2 size={35} color={WARNA.biruTua} />
+                <HiSquares2X2 size={isMobile ? 25 : 35} color={WARNA.biruTua} />
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={15} c={WARNA.biruTua}>Semua</Text>
+              <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Semua</Text>
             </Center>
           </Box>
         </SimpleGrid>
diff --git a/src/module/home/ui/list_discussion.tsx b/src/module/home/ui/list_discussion.tsx
index 103904f..e244207 100644
--- a/src/module/home/ui/list_discussion.tsx
+++ b/src/module/home/ui/list_discussion.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 import { IDataHomeDiskusi } from "../lib/type_home";
 import { funGetHome } from "../lib/api_home";
 import toast from "react-hot-toast";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 
 
@@ -16,6 +16,7 @@ export default function ListDiscussion() {
    const router = useRouter()
    const [isData, setData] = useState<IDataHomeDiskusi[]>([])
    const [loading, setLoading] = useState(true);
+   const isMobile = useMediaQuery('(max-width: 369px)');
 
    const fetchData = async () => {
       try {
@@ -79,8 +80,11 @@ export default function ListDiscussion() {
                                  }}  onClick={() => router.push(`/division/${v.idDivision}/discussion/${v.id}`)}>
                                     <Group>
                                        <GoDiscussionClosed size={25} />
-                                       <Box w={{ base: 230, md: 400 }}>
-                                          <Text fw={"bold"} truncate="end">
+                                          <Box w={{
+                                              base: isMobile ? 180 : 230,
+                                             md: 400
+                                          }}>
+                                          <Text fw={"bold"} truncate="end" fz={isMobile ? 14 : 16} >
                                              {v.desc}
                                           </Text>
                                        </Box>
@@ -93,7 +97,7 @@ export default function ListDiscussion() {
                                           <Group gap={5} align="center">
                                              <CiUser size={18} />
                                              <Box w={{
-                                                base: 125,
+                                               base: isMobile ? 110 : 125,
                                                 xl: 300
                                              }}>
                                                 <Text fz={13} lineClamp={1}>
@@ -108,7 +112,7 @@ export default function ListDiscussion() {
                                        }}>
                                           <Group gap={5} align="center" justify="flex-end">
                                              <CiClock2 size={18} />
-                                             <Text fz={13}>{v.date}</Text>
+                                             <Text fz={isMobile ? 11 : 13}>{v.date}</Text>
                                           </Group>
                                        </Grid.Col>
                                     </Grid>
diff --git a/src/module/home/ui/list_event.tsx b/src/module/home/ui/list_event.tsx
index 0763ab4..fef59d2 100644
--- a/src/module/home/ui/list_event.tsx
+++ b/src/module/home/ui/list_event.tsx
@@ -6,7 +6,7 @@ import { useState } from "react"
 import { IDataHomeEvent } from "../lib/type_home"
 import { funGetHome } from "../lib/api_home"
 import toast from "react-hot-toast"
-import { useShallowEffect } from "@mantine/hooks"
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
 import _ from "lodash"
 
 
@@ -14,6 +14,7 @@ export default function ListEventHome() {
    const router = useRouter()
    const [isData, setData] = useState<IDataHomeEvent[]>([])
    const [loading, setLoading] = useState(true);
+   const isMobile = useMediaQuery('(max-width: 369px)');
 
    const fetchData = async () => {
       try {
@@ -74,9 +75,9 @@ export default function ListEventHome() {
                               <Group>
                                  <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
                                  <Flex direction={'column'}>
-                                    <Text>{event.timeStart} - {event.timeEnd}</Text>
+                                    <Text fz={isMobile ? 14 : 16}>{event.timeStart} - {event.timeEnd}</Text>
                                     <Box w={{
-                                       base: 260,
+                                       base: isMobile ? 220 : 260,
                                        xl: 430
                                     }}>
                                        <Text fw={"bold"} lineClamp={1}>
@@ -84,7 +85,7 @@ export default function ListEventHome() {
                                        </Text>
                                     </Box>
                                     <Box w={{
-                                       base: 260,
+                                       base: isMobile ? 230 : 260,
                                        xl: 420
                                     }}>
                                        <Text lineClamp={1}>
diff --git a/src/module/home/ui/list_notification.tsx b/src/module/home/ui/list_notification.tsx
index b6b3ec1..2c033ce 100644
--- a/src/module/home/ui/list_notification.tsx
+++ b/src/module/home/ui/list_notification.tsx
@@ -1,6 +1,7 @@
 "use client"
 import { WARNA } from '@/module/_global';
 import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 import { FaBell } from 'react-icons/fa6';
@@ -65,6 +66,7 @@ const dataNotification = [
 
 export default function ListNotification() {
   const router = useRouter()
+  const isMobile = useMediaQuery('(max-width: 369px)');
   return (
     <Box>
       {dataNotification.map((v, i) => {
@@ -81,11 +83,11 @@ export default function ListNotification() {
                 </ActionIcon>
                 <Box
                   w={{
-                    base: 240,
+                    base: isMobile ? 200 : 240,
                     xl: 380
                 }}
                 >
-                <Text fw={'bold'} fz={18} lineClamp={1}>{v.title}</Text>
+                <Text fw={'bold'} fz={isMobile ? 16 : 18} lineClamp={1}>{v.title}</Text>
                 </Box>
               </Group>
               <Spoiler maxHeight={60} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
diff --git a/src/module/home/ui/view_detail_feature.tsx b/src/module/home/ui/view_detail_feature.tsx
index 586286b..7661746 100644
--- a/src/module/home/ui/view_detail_feature.tsx
+++ b/src/module/home/ui/view_detail_feature.tsx
@@ -7,10 +7,12 @@ import { PiUsersFourFill } from "react-icons/pi";
 import { useRouter } from 'next/navigation';
 import { FaUserTag, FaUserTie } from 'react-icons/fa6';
 import { useHookstate } from '@hookstate/core';
+import { useMediaQuery } from '@mantine/hooks';
 
 export default function ViewDetailFeature() {
   const router = useRouter()
   const roleLogin = useHookstate(globalRole)
+  const isMobile = useMediaQuery('(max-width: 369px)');
   return (
     <>
       <LayoutNavbarNew back='/home' title='Fitur' menu={<></>} />
@@ -22,11 +24,11 @@ export default function ViewDetailFeature() {
             <Box onClick={() => router.push('/division')}>
               <Center>
                 <ActionIcon variant="gradient"
-                  size={68}
+                  size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
                   gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <HiMiniUserGroup size={35} color={WARNA.biruTua} />
+                  <HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
                 </ActionIcon>
               </Center>
               <Center>
@@ -36,11 +38,11 @@ export default function ViewDetailFeature() {
             <Box onClick={() => router.push('/project?status=0&group=null')}>
               <Center>
                 <ActionIcon variant="gradient"
-                  size={68}
+                  size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
                   gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
+                  <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
                 </ActionIcon>
               </Center>
               <Center>
@@ -50,11 +52,11 @@ export default function ViewDetailFeature() {
             <Box onClick={() => router.push('/announcement')}>
               <Center>
                 <ActionIcon variant="gradient"
-                  size={68}
+                  size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
                   gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <HiMegaphone size={35} color={WARNA.biruTua} />
+                  <HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
                 </ActionIcon>
               </Center>
               <Center>
@@ -64,11 +66,11 @@ export default function ViewDetailFeature() {
             <Box onClick={() => router.push('/member')}>
               <Center>
                 <ActionIcon variant="gradient"
-                  size={68}
+                  size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
                   gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <PiUsersFourFill size={35} color={WARNA.biruTua} />
+                  <PiUsersFourFill size={isMobile ? 25 : 35} color={WARNA.biruTua} />
                 </ActionIcon>
               </Center>
               <Center>
@@ -78,11 +80,11 @@ export default function ViewDetailFeature() {
             <Box onClick={() => router.push('/position')}>
               <Center>
                 <ActionIcon variant="gradient"
-                  size={68}
+                  size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
                   gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <FaUserTie size={35} color={WARNA.biruTua} />
+                  <FaUserTie size={isMobile ? 25 : 35} color={WARNA.biruTua} />
                 </ActionIcon>
               </Center>
               <Center>
@@ -94,11 +96,11 @@ export default function ViewDetailFeature() {
               <Box onClick={() => router.push('/group')}>
                 <Center>
                   <ActionIcon variant="gradient"
-                    size={68}
+                    size={isMobile ? 50 : 68}
                     aria-label="Gradient action icon"
                     radius={100}
                     gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                    <FaUserTag size={35} color={WARNA.biruTua} />
+                    <FaUserTag size={isMobile ? 25 : 35} color={WARNA.biruTua} />
                   </ActionIcon>
                 </Center>
                 <Center>
diff --git a/src/module/project/ui/list_anggota_detail_project.tsx b/src/module/project/ui/list_anggota_detail_project.tsx
index 3e51a39..7c93daa 100644
--- a/src/module/project/ui/list_anggota_detail_project.tsx
+++ b/src/module/project/ui/list_anggota_detail_project.tsx
@@ -62,7 +62,7 @@ export default function ListAnggotaDetailProject() {
       toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
     }
   }
-  const isMobile = useMediaQuery('(max-width: 369px)');
+const isMobile = useMediaQuery('(max-width: 369px)');  
 
   return (
     <Box pt={20}>
diff --git a/src/module/task/ui/create_task.tsx b/src/module/task/ui/create_task.tsx
index ff8a796..ce18d9e 100644
--- a/src/module/task/ui/create_task.tsx
+++ b/src/module/task/ui/create_task.tsx
@@ -18,6 +18,7 @@ import _ from "lodash";
 import { FaTrash } from "react-icons/fa6";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funCreateTask } from "../lib/api_task";
+import { useMediaQuery } from "@mantine/hooks";
 
 export default function CreateTask() {
   const router = useRouter()
@@ -37,6 +38,7 @@ export default function CreateTask() {
   const [listFile, setListFile] = useState<IListFileTask[]>([])
   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [indexDelTask, setIndexDelTask] = useState<number>(0)
+  const isMobile = useMediaQuery('(max-width: 369px)');
   const [title, setTitle] = useState("")
   const [touched, setTouched] = useState({
     title: false,
@@ -235,19 +237,19 @@ export default function CreateTask() {
                         >
                           <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/task/ui/detail_list_anggota_task.tsx b/src/module/task/ui/detail_list_anggota_task.tsx
index b1fc81b..4487931 100644
--- a/src/module/task/ui/detail_list_anggota_task.tsx
+++ b/src/module/task/ui/detail_list_anggota_task.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
 import { Box, Group, Flex, Avatar, Text, SimpleGrid, Stack, Grid } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -24,6 +24,7 @@ export default function ListAnggotaDetailTask() {
    const router = useRouter()
    const roleLogin = useHookstate(globalRole)
    const adminLogin = useHookstate(globalIsAdminDivision)
+   const isMobile = useMediaQuery('(max-width: 369px)');
 
    async function getOneData() {
       try {
@@ -104,20 +105,20 @@ export default function ListAnggotaDetailTask() {
                                     >
                                        <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"} lineClamp={1} fz={isMobile ? 10 : 14}>{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/task/ui/detail_progress_task.tsx b/src/module/task/ui/detail_progress_task.tsx
index 1b35ff6..028ed10 100644
--- a/src/module/task/ui/detail_progress_task.tsx
+++ b/src/module/task/ui/detail_progress_task.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { WARNA } from "@/module/_global";
 import { Box, Grid, ActionIcon, Progress, Text, Skeleton } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useParams } from "next/navigation";
 import toast from "react-hot-toast";
 import { HiMiniPresentationChartBar } from "react-icons/hi2";
@@ -16,6 +16,7 @@ export default function ProgressDetailTask() {
    const param = useParams<{ id: string, detail: string }>()
    const refresh = useHookstate(globalRefreshTask)
    const [loading, setLoading] = useState(true)
+   const isMobile = useMediaQuery('(max-width: 369px)');  
 
    async function getOneData() {
       try {
@@ -68,17 +69,17 @@ export default function ProgressDetailTask() {
                   <Grid.Col span={3}>
                      <ActionIcon
                         variant="gradient"
-                        size={68}
+                        size={isMobile ? 50 : 68}
                         aria-label="Gradient action icon"
                         radius={100}
                         gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
                      >
-                        <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
+                        <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
                      </ActionIcon>
                   </Grid.Col>
                   <Grid.Col span={9}>
                      <Box>
-                        <Text>Kemajuan Kegiatan {valProgress}%</Text>
+                        <Text fz={isMobile ? 14 : 16}>Kemajuan Kegiatan {valProgress}%</Text>
                         <Progress
                            style={{
                               border: `1px solid ${"#BDBDBD"}`,
@@ -86,7 +87,7 @@ export default function ProgressDetailTask() {
                            w={"100%"}
                            color="#FCAA4B"
                            radius="md"
-                           size="xl"
+                           size={isMobile ? "lg" : "xl"}
                            value={valProgress}
                         />
                      </Box>
diff --git a/src/module/task/ui/drawer_division_task.tsx b/src/module/task/ui/drawer_division_task.tsx
index 8820692..bbda27b 100644
--- a/src/module/task/ui/drawer_division_task.tsx
+++ b/src/module/task/ui/drawer_division_task.tsx
@@ -7,7 +7,7 @@ export default function DrawerDivisionTask() {
       <Box>
          <Stack pt={10}>
             <SimpleGrid
-               cols={{ base: 3, sm: 3, lg: 3 }}
+               cols={{ base: 2, sm: 3, lg: 3 }}
             >
                <Flex onClick={() => window.location.href = "task/create"} justify={'center'} align={'center'} direction={'column'} >
                   <Box>