diff --git a/src/module/_global/layout/layout_modal_view_file.tsx b/src/module/_global/layout/layout_modal_view_file.tsx
index 584da23..0462b15 100644
--- a/src/module/_global/layout/layout_modal_view_file.tsx
+++ b/src/module/_global/layout/layout_modal_view_file.tsx
@@ -27,6 +27,7 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
                   }}
                   fit="contain"
                   src={`/api/file/img?cat=${fitur}&file=${file}&jenis=file`}
+                  alt={file}
                />
          }
       </Modal>
diff --git a/src/module/calender/ui/detail_event_division.tsx b/src/module/calender/ui/detail_event_division.tsx
index 00fcabd..017df26 100644
--- a/src/module/calender/ui/detail_event_division.tsx
+++ b/src/module/calender/ui/detail_event_division.tsx
@@ -176,7 +176,7 @@ export default function DetailEventDivision() {
                   xl: 11
                 }}>
                   {isDataCalender?.desc ? (
-                    <Spoiler maxHeight={80} showLabel="Lebih banyak" hideLabel="Lebih dikit">
+                    <Spoiler maxHeight={80} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
                       <Text>{isDataCalender?.desc}</Text>
                     </Spoiler>
                   ) : (
diff --git a/src/module/group/ui/list_group_active.tsx b/src/module/group/ui/list_group_active.tsx
index 89e1d13..e8659e1 100644
--- a/src/module/group/ui/list_group_active.tsx
+++ b/src/module/group/ui/list_group_active.tsx
@@ -2,6 +2,8 @@ import { LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
 import {
   ActionIcon,
   Box,
+  Flex,
+  Grid,
   Group,
   Skeleton,
   Text,
@@ -85,7 +87,7 @@ export default function ListGroupActive() {
         _.isEmpty(isData)
           ?
           <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
-             <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada grup</Text>
+            <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada grup</Text>
           </Box>
           :
           isData.map((v, i) => {
@@ -106,25 +108,42 @@ export default function ListGroupActive() {
                     setActive(v.isActive);
                   }}
                 >
-                  <Box>
-                    <ActionIcon
-                      variant="light"
-                      bg={"#DCEED8"}
-                      size={50}
-                      radius={100}
-                      aria-label="icon"
-                    >
-                      <HiOutlineOfficeBuilding
-                        color={WARNA.biruTua}
-                        size={25}
-                      />
-                    </ActionIcon>
-                  </Box>
-                  <Box>
-                    <Text fw={"bold"} c={WARNA.biruTua}>
+                  <Grid justify='center' align='center' >
+                    <Grid.Col span={{
+                      base: 3,
+                      xl: 2
+                    }}>
+                      <Flex justify={{base: "center", xl: "flex-start"}}>
+                        <ActionIcon
+                          variant="light"
+                          bg={"#DCEED8"}
+                          size={50}
+                          radius={100}
+                          aria-label="icon"
+                        >
+                          <HiOutlineOfficeBuilding
+                            color={WARNA.biruTua}
+                            size={25}
+                          />
+                        </ActionIcon>
+                      </Flex>
+                    </Grid.Col>
+                    <Grid.Col span={{
+                      base: 9,
+                      xl: 10
+                    }}>
+                      <Box
+                        w={{
+                          base: 220,
+                          xl: 400
+                        }}
+                      >
+                        <Text fw={"bold"} c={WARNA.biruTua} lineClamp={1}>
                       {v.name}
                     </Text>
-                  </Box>
+                      </Box>
+                    </Grid.Col>
+                  </Grid>
                 </Group>
               </Box>
             );
@@ -133,7 +152,7 @@ export default function ListGroupActive() {
       <LayoutDrawer
         opened={openDrawer}
         onClose={() => setOpenDrawer(false)}
-        title={valChoose}
+        title={<Text lineClamp={1}>{valChoose}</Text>}
       >
         <EditDrawerGroup
           id={selectId}
diff --git a/src/module/home/ui/list_notification.tsx b/src/module/home/ui/list_notification.tsx
index 4295857..b6b3ec1 100644
--- a/src/module/home/ui/list_notification.tsx
+++ b/src/module/home/ui/list_notification.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { WARNA } from '@/module/_global';
-import { ActionIcon, Box, Center, Grid, Group, Text } from '@mantine/core';
+import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 import { FaBell } from 'react-icons/fa6';
@@ -8,58 +8,58 @@ import { FaBell } from 'react-icons/fa6';
 const dataNotification = [
   {
     id: 1,
-    title: 'Rapat Kamis',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    title: 'Rapat Kamis Kamis Kamis Kamis Kamis Kamis Kamis Kamis ',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 2,
     title: 'Rapat Jumat',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 3,
     title: 'Rapat Senin',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 4,
     title: 'Rapat Selasa',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 5,
     title: 'Rapat Rabu',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 5,
     title: 'Rapat Rabu',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 5,
     title: 'Rapat Rabu',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 5,
     title: 'Rapat Rabu',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 5,
     title: 'Rapat Rabu',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 5,
     title: 'Rapat Rabu',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
   {
     id: 5,
     title: 'Rapat Rabu',
-    description: 'Dipta menambahkan berkas di document dan file.',
+    description: 'Dipta menambahkan berkas di document dan file. Dipta menambahkan berkas di document dan file Dipta menambahkan berkas di document dan file',
   },
 ]
 
@@ -79,9 +79,18 @@ export default function ListNotification() {
                 <ActionIcon variant="light" bg={WARNA.biruTua} size={35} radius={100} aria-label="icon">
                   <FaBell size={20} color='white' />
                 </ActionIcon>
-                <Text fw={'bold'} fz={18}>{v.title}</Text>
+                <Box
+                  w={{
+                    base: 240,
+                    xl: 380
+                }}
+                >
+                <Text fw={'bold'} fz={18} lineClamp={1}>{v.title}</Text>
+                </Box>
               </Group>
-              <Text mt={10} fz={15}>{v.description}</Text>
+              <Spoiler maxHeight={60} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                <Text mt={10} fz={15}>{v.description}</Text>
+              </Spoiler>
             </Box>
           </Box>
         )
diff --git a/src/module/home/ui/view_search.tsx b/src/module/home/ui/view_search.tsx
index 1b0025b..13e62d9 100644
--- a/src/module/home/ui/view_search.tsx
+++ b/src/module/home/ui/view_search.tsx
@@ -7,6 +7,7 @@ import { funGetSearchAll } from '../lib/api_search';
 import { useShallowEffect } from '@mantine/hooks';
 import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch } from '../lib/type_search';
 import { useRouter } from 'next/navigation';
+import _ from 'lodash';
 
 export default function ViewSearch() {
   const [search, setSearch] = useState('');
@@ -73,21 +74,27 @@ export default function ViewSearch() {
                 borderRadius: 5
               }}>
                 {dataUser.length > 0 ? (
-                  <Box>
+                  <Box mt={5}>
                     {dataUser.map((v, i) => {
                       return (
-                        <Box key={i} onClick={() => router.push(`/member/${v.id}`)}>
-                          <Group align='center' style={{
-                            padding: 5,
-                            paddingLeft: 0,
-                          }} >
-                            <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} size="lg" />
-                            <Box>
-                              <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
-                              <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
-                            </Box>
-                          </Group>
-                          <Divider my={5} />
+                        <Box key={i}>
+                          <Box onClick={() => {
+                            router.push(`/member/${v.id}`)
+                          }}>
+                            <Grid gutter={{
+                              base: 60,
+                              xl: "xs"
+                            }} align="center">
+                              <Grid.Col span={2}>
+                                <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} size={50} alt="image" />
+                              </Grid.Col>
+                              <Grid.Col span={9}>
+                                <Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{_.startCase(v.name)}</Text>
+                                <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
+                              </Grid.Col>
+                            </Grid>
+                          </Box>
+                          <Divider my={10} />
                         </Box>
                       )
                     })}
@@ -112,18 +119,25 @@ export default function ViewSearch() {
                       {dataDivision.map((v, i) => {
                         return (
                           <Box key={i} onClick={() => router.push(`/division/${v.id}`)}>
-                            <Grid justify='center' align='center' mt={15}>
-                              <Grid.Col span={"auto"}>
+                            <Grid justify='center' align='center' mt={15} >
+                              <Grid.Col span={2}>
                                 <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
                                   <HiMiniUserGroup color={'white'} size={25} />
                                 </ActionIcon>
                               </Grid.Col>
                               <Grid.Col span={10}>
-                                <Text fw={'bold'} c={WARNA.biruTua}>{v.name.toUpperCase()}</Text>
-                                <Text fw={'lighter'} fz={12}>{v.group}</Text>
+                                <Box
+                                  w={{
+                                    base: 220,
+                                    xl: 380
+                                  }}
+                                >
+                                <Text pl={{base: 10, xl:0}} fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.name.toUpperCase()}</Text>
+                                </Box>
+                                <Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text>
                               </Grid.Col>
                             </Grid>
-                            <Text fw={'lighter'} mt={5} mb={10} lineClamp={2}>{v.desc}</Text>
+                            <Text fw={'lighter'} mt={10} mb={10} lineClamp={2}>{v.desc}</Text>
                             <Divider my={5} />
                           </Box>
                         )
@@ -150,14 +164,21 @@ export default function ViewSearch() {
                         return (
                           <Box key={i} onClick={() => router.push(`/project/${v.id}`)}>
                             <Grid justify='center' align='center' mt={10}>
-                              <Grid.Col span={"auto"}>
+                              <Grid.Col span={2}>
                                 <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
                                   <HiMiniPresentationChartBar color={'white'} size={25} />
                                 </ActionIcon>
                               </Grid.Col>
                               <Grid.Col span={10}>
-                                <Text fw={'bold'} c={WARNA.biruTua}>{v.title.toUpperCase()}</Text>
-                                <Text fw={'lighter'} fz={12}>{v.group}</Text>
+                              <Box
+                                  w={{
+                                    base: 220,
+                                    xl: 380
+                                  }}
+                                >
+                                <Text pl={{base: 10, xl:0}} fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.title.toUpperCase()}</Text>
+                                </Box>
+                                <Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text>
                               </Grid.Col>
                             </Grid>
                             <Divider mt={10} />
diff --git a/src/module/position/ui/drawer_detail_position.tsx b/src/module/position/ui/drawer_detail_position.tsx
index e22376f..d533d06 100644
--- a/src/module/position/ui/drawer_detail_position.tsx
+++ b/src/module/position/ui/drawer_detail_position.tsx
@@ -150,8 +150,8 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
             </SimpleGrid>
          </Stack>
 
-         <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg">
-            <Box pt={10} pos={"relative"} h={"70vh"}>
+         <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} >
+            <Box pt={10} pos={"relative"} h={"28.5vh"}>
                {loading ?
                   <Box>
                      <Skeleton height={40} mt={6} radius={10} />
@@ -159,40 +159,6 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                   </Box>
                   :
                   <Box>
-                     {/* <Select
-                        label="Grup"
-                        placeholder="Pilih grup"
-                        size="md"
-                        radius={10}
-                        data={
-                           listGroup
-                              ? listGroup.map((data) => ({
-                                 value: data.id,
-                                 label: data.name,
-                              }))
-                              : []
-                        }
-                        value={String(data.idGroup)}
-                        mb={5}
-                        onChange={(val) => {
-                           setData({ ...data, idGroup: val })
-                           setTouched({ ...touched, idGroup: false })
-                        }}
-                        withAsterisk
-                        styles={{
-                           input: {
-                              color: WARNA.biruTua,
-                              borderRadius: WARNA.biruTua,
-                              borderColor: WARNA.biruTua,
-                           },
-                        }}
-                        error={
-                           touched.idGroup && (
-                              data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
-                           )
-                        }
-                        onBlur={() => setTouched({ ...touched, idGroup: true })}
-                     /> */}
                      <TextInput
                         label="Jabatan"
                         styles={{
@@ -203,7 +169,6 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                            },
                         }}
                         required
-                        my={15}
                         size="md"
                         value={String(data.name)}
                         onChange={(e) => {
diff --git a/src/module/position/ui/drawer_list_position.tsx b/src/module/position/ui/drawer_list_position.tsx
index 532c10e..96a89a5 100644
--- a/src/module/position/ui/drawer_list_position.tsx
+++ b/src/module/position/ui/drawer_list_position.tsx
@@ -76,7 +76,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
       <Box>
          <Stack pt={10}>
             <SimpleGrid
-               cols={{ base: 3, sm: 3, lg: 3 }}
+               cols={{ base: 2, sm: 3, lg: 3 }}
                onClick={() => setOpenDrawerGroup(true)}
             >
                <Flex justify={'center'} align={'center'} direction={'column'} >
diff --git a/src/module/position/ui/list_position_active.tsx b/src/module/position/ui/list_position_active.tsx
index 8be851a..2e4c376 100644
--- a/src/module/position/ui/list_position_active.tsx
+++ b/src/module/position/ui/list_position_active.tsx
@@ -1,5 +1,5 @@
 import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
-import { ActionIcon, Box, Group, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Box, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
 import React, { useState } from "react";
 import { FaUserTie } from "react-icons/fa6";
 import { HiMagnifyingGlass } from "react-icons/hi2";
@@ -97,25 +97,42 @@ export default function ListPositionActive() {
                         }
                       }}
                     >
-                      <Box>
-                        <ActionIcon
-                          variant="light"
-                          bg={"#DCEED8"}
-                          size={50}
-                          radius={100}
-                          aria-label="icon"
-                        >
-                          <FaUserTie color={WARNA.biruTua} size={25} />
-                        </ActionIcon>
-                      </Box>
-                      <Box>
-                        <Text fw={"bold"} c={WARNA.biruTua}>
-                          {v.name}
-                        </Text>
-                        <Text fw={"lighter"} fz={12}>
-                          {v.group}
-                        </Text>
-                      </Box>
+                      <Grid justify='center' align='center' >
+                        <Grid.Col span={{
+                          base: 3,
+                          xl: 2
+                        }}>
+                          <Flex justify={{ base: "center", xl: "flex-start" }}>
+                            <ActionIcon
+                              variant="light"
+                              bg={"#DCEED8"}
+                              size={50}
+                              radius={100}
+                              aria-label="icon"
+                            >
+                              <FaUserTie color={WARNA.biruTua} size={25} />
+                            </ActionIcon>
+                          </Flex>
+                        </Grid.Col>
+                        <Grid.Col span={{
+                          base: 9,
+                          xl: 10
+                        }}>
+                          <Box
+                            w={{
+                              base: 220,
+                              xl: 400
+                            }}
+                          >
+                            <Text fw={"bold"} c={WARNA.biruTua} lineClamp={1}>
+                              {v.name}
+                            </Text>
+                            <Text fw={"lighter"} fz={12} lineClamp={1}>
+                              {v.group}
+                            </Text>
+                          </Box>
+                        </Grid.Col>
+                      </Grid>
                     </Group>
                   </Box>
                 );
@@ -126,7 +143,7 @@ export default function ListPositionActive() {
       <LayoutDrawer
         opened={openDrawer}
         onClose={() => setOpenDrawer(false)}
-        title={isData}
+        title={<Text lineClamp={1}>{isData}</Text>}
       >
         <DrawerDetailPosition
           id={selectId}
diff --git a/src/module/user/profile/ui/profile.tsx b/src/module/user/profile/ui/profile.tsx
index 1518261..5c0e85f 100644
--- a/src/module/user/profile/ui/profile.tsx
+++ b/src/module/user/profile/ui/profile.tsx
@@ -80,7 +80,7 @@ export default function Profile() {
               <Skeleton height={62} mt={10} width={"40%"} />
               :
               <>
-                <Text c={'white'} fw={'bold'} fz={25}>{isData?.name}</Text>
+                <Text c={'white'} fw={'bold'} fz={25} ta={"center"}>{isData?.name}</Text>
                 <Text c={'white'} fw={'lighter'} fz={15}>{isData?.group} - {isData?.position}</Text>
               </>
             }