diff --git a/app/(application)/division/[id]/(fitur-division)/task/create.tsx b/app/(application)/division/[id]/(fitur-division)/task/create.tsx
index f6d2b34..6252ff4 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/create.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/create.tsx
@@ -1,5 +1,4 @@
 import AppHeader from "@/components/AppHeader";
-import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
@@ -21,11 +20,31 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
+
 export default function CreateTaskDivision() {
    const { colors } = useTheme();
    const { id } = useLocalSearchParams();
@@ -172,52 +191,74 @@ export default function CreateTaskDivision() {
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                <ButtonSelect value="Tambah Anggota" onPress={() => { router.push(`/division/${id}/task/create/member`); }} />
                <SectionListAddTask />
-               {
-                  fileForm.length > 0 && (
-                     <View style={[Styles.mb15]}>
-                        <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
-                           {
-                              fileForm.map((item, index) => (
-                                 <BorderBottomItem
-                                    key={index}
-                                    borderType="all"
-                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
-                                    title={item.name}
-                                    titleWeight="normal"
-                                    onPress={() => { setIndexDelFile(index); setModal(true) }}
-                                 />
-                              ))
-                           }
-                        </View>
+               {fileForm.length > 0 && (
+                  <View style={Styles.mb15}>
+                     <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+                     <View style={Styles.fileGrid}>
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={index}
+                                 onPress={() => { setIndexDelFile(index); setModal(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
+                                       {ext.toUpperCase()}
+                                    </Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
                      </View>
-                  )
-               }
+                  </View>
+               )}
                {entitiesMember.length > 0 && (
-                  <View>
+                  <View style={Styles.mb15}>
                      <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-                        <Text>Anggota</Text>
-                        <Text>Total {entitiesMember.length} Anggota</Text>
+                        <Text style={Styles.textDefaultSemiBold}>Anggota</Text>
+                        <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{entitiesMember.length} orang</Text>
                      </View>
-
-                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
-                        {entitiesMember.map(
-                           (item: { img: any; name: any }, index: any) => {
-                              return (
-                                 <BorderBottomItem
-                                    key={index}
-                                    borderType="bottom"
-                                    icon={
-                                       <ImageUser
-                                          src={`${ConstEnv.url_storage}/files/${item.img}`}
-                                          size="sm"
-                                       />
-                                    }
-                                    title={item.name}
-                                 />
-                              );
-                           }
-                        )}
+                     <View style={{ gap: 6 }}>
+                        {entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => (
+                           <View
+                              key={index}
+                              style={{
+                                 flexDirection: 'row',
+                                 alignItems: 'center',
+                                 backgroundColor: colors.card,
+                                 borderRadius: 10,
+                                 borderWidth: 1,
+                                 borderColor: colors.icon + '18',
+                                 paddingHorizontal: 12,
+                                 paddingVertical: 10,
+                                 gap: 12,
+                              }}
+                           >
+                              <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                              <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
+                              {item.position && (
+                                 <View style={{
+                                    backgroundColor: colors.dimmed + '15',
+                                    borderRadius: 20,
+                                    paddingHorizontal: 8,
+                                    paddingVertical: 3,
+                                 }}>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
+                                       {item.position}
+                                    </Text>
+                                 </View>
+                              )}
+                           </View>
+                        ))}
                      </View>
                   </View>
                )}
diff --git a/app/(application)/project/create.tsx b/app/(application)/project/create.tsx
index 34de7be..e1623b9 100644
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -1,5 +1,4 @@
 import AppHeader from "@/components/AppHeader";
-import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
@@ -25,6 +24,7 @@ import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import {
+   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -32,6 +32,26 @@ import {
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
+
 export default function CreateProject() {
    const { colors } = useTheme();
    const [loading, setLoading] = useState(false)
@@ -300,52 +320,74 @@ export default function CreateProject() {
                   errorText="Anggota tidak boleh kosong"
                />
                <SectionListAddTask />
-               {
-                  fileForm.length > 0 && (
-                     <View style={[Styles.mb15]}>
-                        <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
-                           {
-                              fileForm.map((item, index) => (
-                                 <BorderBottomItem
-                                    key={index}
-                                    borderType="all"
-                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
-                                    title={item.name}
-                                    titleWeight="normal"
-                                    onPress={() => { setIndexDelFile(index); setModal(true) }}
-                                 />
-                              ))
-                           }
-                        </View>
+               {fileForm.length > 0 && (
+                  <View style={Styles.mb15}>
+                     <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+                     <View style={Styles.fileGrid}>
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={index}
+                                 onPress={() => { setIndexDelFile(index); setModal(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
+                                       {ext.toUpperCase()}
+                                    </Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
                      </View>
-                  )
-               }
+                  </View>
+               )}
                {entitiesMember.length > 0 && (
-                  <View>
+                  <View style={Styles.mb15}>
                      <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-                        <Text>Anggota</Text>
-                        <Text>Total {entitiesMember.length} Anggota</Text>
+                        <Text style={Styles.textDefaultSemiBold}>Anggota</Text>
+                        <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{entitiesMember.length} orang</Text>
                      </View>
-
-                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, { borderColor: colors.icon + '20', backgroundColor: colors.card }]}>
-                        {entitiesMember.map(
-                           (item: { img: any; name: any }, index: any) => {
-                              return (
-                                 <BorderBottomItem
-                                    key={index}
-                                    borderType="bottom"
-                                    icon={
-                                       <ImageUser
-                                          src={`${ConstEnv.url_storage}/files/${item.img}`}
-                                          size="sm"
-                                       />
-                                    }
-                                    title={item.name}
-                                 />
-                              );
-                           }
-                        )}
+                     <View style={{ gap: 6 }}>
+                        {entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => (
+                           <View
+                              key={index}
+                              style={{
+                                 flexDirection: 'row',
+                                 alignItems: 'center',
+                                 backgroundColor: colors.card,
+                                 borderRadius: 10,
+                                 borderWidth: 1,
+                                 borderColor: colors.icon + '18',
+                                 paddingHorizontal: 12,
+                                 paddingVertical: 10,
+                                 gap: 12,
+                              }}
+                           >
+                              <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                              <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
+                              {item.position && (
+                                 <View style={{
+                                    backgroundColor: colors.dimmed + '15',
+                                    borderRadius: 20,
+                                    paddingHorizontal: 8,
+                                    paddingVertical: 3,
+                                 }}>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
+                                       {item.position}
+                                    </Text>
+                                 </View>
+                              )}
+                           </View>
+                        ))}
                      </View>
                   </View>
                )}
diff --git a/components/modalSelect.tsx b/components/modalSelect.tsx
index 2b68035..e8418a0 100644
--- a/components/modalSelect.tsx
+++ b/components/modalSelect.tsx
@@ -108,12 +108,12 @@ export default function ModalSelect({ open, close, title, category, idParent, on
       setChooseValue({ ...chooseValue, val: valChoose })
    }, [dispatch, open, search]);
 
-   function onChoose(val: string, label: string, img?: string) {
+   function onChoose(val: string, label: string, img?: string, position?: string) {
       if (category == "member") {
          if (selectMember.some((i: any) => i.idUser == val)) {
             setSelectMember(selectMember.filter((i: any) => i.idUser != val))
          } else {
-            setSelectMember([...selectMember, { idUser: val, name: label, img }])
+            setSelectMember([...selectMember, { idUser: val, name: label, img, position }])
          }
       } else {
          setChooseValue({ val, label })
@@ -144,7 +144,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                                     key={index}
                                     label={item.name}
                                     src={`${ConstEnv.url_storage}/files/${item.img}`}
-                                    onClick={() => onChoose(item.idUser, item.name, item.img)}
+                                    onClick={() => onChoose(item.idUser, item.name, item.img, item.position)}
                                  />
                               ))
                            }
@@ -162,7 +162,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                   category != 'status-task' ?
                      data.length > 0 ?
                         data.map((item: any, index: any) => (
-                           <Pressable key={index} style={[Styles.itemSelectModal, {borderColor:colors.icon+'20'}]} onPress={() => { onChoose(item.id, item.name, item.img) }}>
+                           <Pressable key={index} style={[Styles.itemSelectModal, {borderColor:colors.icon+'20'}]} onPress={() => { onChoose(item.id, item.name, item.img, item.position) }}>
                               {
                                  category == 'member'
                                     ?
diff --git a/components/project/sectionListAddTask.tsx b/components/project/sectionListAddTask.tsx
index 197ef87..a403412 100644
--- a/components/project/sectionListAddTask.tsx
+++ b/components/project/sectionListAddTask.tsx
@@ -32,25 +32,22 @@ export default function SectionListAddTask() {
                   <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
                      Tanggal & Tugas
                   </Text>
-                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
-                     {
-                        taskCreate.map((item: { status: number; title: string; dateStart: string; dateEnd: string; }, index: Key | null | undefined) => {
-                           return (
-                              <ItemSectionTanggalTugas
-                                 key={index}
-                                 title={item.title}
-                                 dateStart={item.dateStart}
-                                 dateEnd={item.dateEnd}
-                                 onPress={() => {
-                                    setSelect(index)
-                                    setModal(true)
-                                 }}
-                              />
-                           );
-                        })
-                     }
-
-                  </View>
+                  {
+                     taskCreate.map((item: { status: number; title: string; dateStart: string; dateEnd: string; }, index: Key | null | undefined) => {
+                        return (
+                           <ItemSectionTanggalTugas
+                              key={index}
+                              title={item.title}
+                              dateStart={item.dateStart}
+                              dateEnd={item.dateEnd}
+                              onPress={() => {
+                                 setSelect(index)
+                                 setModal(true)
+                              }}
+                           />
+                        );
+                     })
+                  }
                </View>
                <DrawerBottom
                   animation="slide"