diff --git a/app/(application)/announcement/index.tsx b/app/(application)/announcement/index.tsx
index c96797d..4319656 100644
--- a/app/(application)/announcement/index.tsx
+++ b/app/(application)/announcement/index.tsx
@@ -135,7 +135,7 @@ export default function Announcement() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada pengumuman</Text>
             }
          </View>
       </View>
diff --git a/app/(application)/discussion/[id].tsx b/app/(application)/discussion/[id].tsx
index 8b58960..8eff8d7 100644
--- a/app/(application)/discussion/[id].tsx
+++ b/app/(application)/discussion/[id].tsx
@@ -402,7 +402,7 @@ export default function DetailDiscussionGeneral() {
                            />
                            :
                            <View style={[Styles.pv20, { alignItems: 'center' }]}>
-                              <Text style={[Styles.textInformation, Styles.cGray]}>
+                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>
                                  {
                                     data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota diskusi yang dapat memberikan komentar"
                                  }
diff --git a/app/(application)/discussion/index.tsx b/app/(application)/discussion/index.tsx
index 288987d..3f01cb6 100644
--- a/app/(application)/discussion/index.tsx
+++ b/app/(application)/discussion/index.tsx
@@ -187,7 +187,7 @@ export default function Discussion() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
       </View>
diff --git a/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/add-member.tsx b/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/add-member.tsx
index 56dcf74..6706641 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/add-member.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/add-member.tsx
@@ -156,7 +156,7 @@ export default function AddMemberCalendarEvent() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
@@ -179,7 +179,7 @@ export default function AddMemberCalendarEvent() {
                                  <View style={[Styles.ml10, { width: '80%' }]}>
                                     <Text numberOfLines={1} ellipsizeMode="tail" style={[Styles.textDefault]}>{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
diff --git a/app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx b/app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx
index 3901085..7a2d153 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx
@@ -143,7 +143,7 @@ export default function CreateCalendarAddMember() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
diff --git a/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx b/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
index a8a194b..4e4b654 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
@@ -204,7 +204,7 @@ export default function CalendarDivision() {
                                  />
                               ))
                            ) : (
-                              <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
+                              <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada acara</Text>
                            )
                      }
                   </View>
diff --git a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
index ce04db3..9d06ec3 100644
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
@@ -354,7 +354,7 @@ export default function DiscussionDetail() {
                                     color="grey"
                                     style={Styles.mr05}
                                  />
-                                 <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]} >
+                                 <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]} >
                                     {dataComment.length} Komentar
                                  </Text>
                               </View>
@@ -519,7 +519,7 @@ export default function DiscussionDetail() {
                            />
                            :
                            <View style={[Styles.pv20, { alignItems: 'center' }]}>
-                              <Text style={[Styles.textInformation, Styles.cGray]}>
+                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>
                                  {
                                     data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota divisi yang dapat memberikan komentar"
                                  }
diff --git a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx b/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
index 09271c1..c4bac68 100644
--- a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
@@ -187,8 +187,8 @@ export default function DiscussionDivision() {
                                  desc={item.desc}
                                  leftBottomInfo={
                                     <View style={[Styles.rowItemsCenter]}>
-                                       <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
-                                       <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                                       <Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
+                                       <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>Diskusikan</Text>
                                     </View>
                                  }
                                  rightBottomInfo={item.total_komentar + ' Komentar'}
@@ -207,7 +207,7 @@ export default function DiscussionDivision() {
                         }
                      />
                      :
-                     (<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>)
+                     (<Text style={[Styles.textDefault, Styles.mv10, { textAlign: "center", color:colors.dimmed }]}>Tidak ada diskusi</Text>)
             }
          </View>
       </View>
diff --git a/app/(application)/division/[id]/(fitur-division)/document/index.tsx b/app/(application)/division/[id]/(fitur-division)/document/index.tsx
index 3aeaf64..d308578 100644
--- a/app/(application)/division/[id]/(fitur-division)/document/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/document/index.tsx
@@ -12,7 +12,6 @@ import ModalLoading from "@/components/modalLoading";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Skeleton from "@/components/skeleton";
 import Text from "@/components/Text";
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import {
@@ -480,14 +479,7 @@ export default function DocumentDivision() {
                               );
                            })
                         ) : (
-                           <Text
-                              style={[
-                                 Styles.textDefault,
-                                 Styles.cGray,
-                                 Styles.mt15,
-                                 { textAlign: "center" },
-                              ]}
-                           >
+                           <Text style={[Styles.textDefault, Styles.mt15, { textAlign: "center", color: colors.dimmed }]} >
                               Tidak ada dokumen
                            </Text>
                         )}
diff --git a/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-member.tsx b/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-member.tsx
index 09bf071..84d6dca 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-member.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-member.tsx
@@ -151,7 +151,7 @@ export default function AddMemberTask() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
@@ -164,17 +164,17 @@ export default function AddMemberTask() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => {
                                  !found && onChoose(item.idUser, item.name, item.img)
                               }}
                            >
-                              <View style={[Styles.rowItemsCenter, Styles.w80]}>
+                              <View style={[Styles.rowItemsCenter, Styles.w80,]}>
                                  <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1}>{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
diff --git a/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx b/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx
index 7498b06..3abd52b 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx
@@ -1,5 +1,6 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
 import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
@@ -17,7 +18,8 @@ import 'intl/locale-data/jsonp/id';
 import moment from "moment";
 import { useEffect, useState } from "react";
 import {
-   KeyboardAvoidingView, Platform, Pressable, SafeAreaView,
+   KeyboardAvoidingView, Platform,
+   SafeAreaView,
    ScrollView,
    View
 } from "react-native";
@@ -209,31 +211,32 @@ export default function TaskDivisionAddTask() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {
-                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
-                     <Pressable
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/division/[id]/(fitur-division)/task/create/member.tsx b/app/(application)/division/[id]/(fitur-division)/task/create/member.tsx
index 3890c20..1567d06 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/create/member.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/create/member.tsx
@@ -121,7 +121,7 @@ export default function AddMemberCreateTask() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
@@ -133,7 +133,7 @@ export default function AddMemberCreateTask() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => {
                                  onChoose(item.idUser, item.name, item.img)
                               }}
diff --git a/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx b/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
index 8c857b0..3095cf2 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
@@ -1,6 +1,6 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import { useTheme } from "@/providers/ThemeProvider";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
 import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
@@ -8,6 +8,7 @@ import Styles from "@/constants/Styles";
 import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setTaskCreate } from "@/lib/taskCreate";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack } from "expo-router";
 import 'intl';
@@ -17,7 +18,6 @@ import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
-   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -184,31 +184,32 @@ export default function CreateTaskAddTugas() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {
-                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
-                     <Pressable
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/division/[id]/(fitur-division)/task/index.tsx b/app/(application)/division/[id]/(fitur-division)/task/index.tsx
index 77df27f..c708325 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/index.tsx
@@ -276,11 +276,11 @@ export default function ListTask() {
                                        <LabelStatus
                                           size="default"
                                           category={
-                                             item.status === 0 ? 'primary' :
+                                             item.status === 0 ? 'secondary' :
                                                 item.status === 1 ? 'warning' :
                                                    item.status === 2 ? 'success' :
                                                       item.status === 3 ? 'error' :
-                                                         'primary'
+                                                         'secondary'
                                           }
                                           text={
                                              item.status === 0 ? 'SEGERA' :
@@ -340,7 +340,7 @@ export default function ListTask() {
                         </View>
                      )
                   ) : (
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: "center" },]} >
+                     <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]} >
                         Tidak ada data
                      </Text>
                   )
diff --git a/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx b/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
index a1c0f50..1511f0c 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
@@ -261,7 +261,7 @@ export default function UpdateProjectTaskDivision() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
                            <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
@@ -269,7 +269,7 @@ export default function UpdateProjectTaskDivision() {
                         </View>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
                            <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
@@ -277,7 +277,7 @@ export default function UpdateProjectTaskDivision() {
                         </View>
                      </View>
                      {(error.endDate || error.startDate) && (
-                        <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]} >
+                        <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]} >
                            Tanggal tidak boleh kosong
                         </Text>
                      )}
diff --git a/app/(application)/division/[id]/add-member.tsx b/app/(application)/division/[id]/add-member.tsx
index 5b72741..9218098 100644
--- a/app/(application)/division/[id]/add-member.tsx
+++ b/app/(application)/division/[id]/add-member.tsx
@@ -154,7 +154,7 @@ export default function AddMemberDivision() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
@@ -177,7 +177,7 @@ export default function AddMemberDivision() {
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
diff --git a/app/(application)/division/create/add-admin-division.tsx b/app/(application)/division/create/add-admin-division.tsx
index 629fadc..b8618a8 100644
--- a/app/(application)/division/create/add-admin-division.tsx
+++ b/app/(application)/division/create/add-admin-division.tsx
@@ -125,7 +125,7 @@ export default function CreateDivisionAddAdmin() {
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
diff --git a/app/(application)/division/create/add-member.tsx b/app/(application)/division/create/add-member.tsx
index c9d99c8..920b29c 100644
--- a/app/(application)/division/create/add-member.tsx
+++ b/app/(application)/division/create/add-member.tsx
@@ -108,7 +108,7 @@ export default function CreateDivisionAddMember() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
@@ -131,7 +131,7 @@ export default function CreateDivisionAddMember() {
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
diff --git a/app/(application)/division/index.tsx b/app/(application)/division/index.tsx
index a894e3e..d48fabd 100644
--- a/app/(application)/division/index.tsx
+++ b/app/(application)/division/index.tsx
@@ -218,7 +218,7 @@ export default function ListDivision() {
                   :
                   data.length == 0 ? (
                      <View style={[Styles.mt15]}>
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
                      </View>
                   ) : (
                      isList ? (
diff --git a/app/(application)/group/index.tsx b/app/(application)/group/index.tsx
index 5a0bb19..deb0932 100644
--- a/app/(application)/group/index.tsx
+++ b/app/(application)/group/index.tsx
@@ -9,7 +9,6 @@ import MenuItemRow from "@/components/menuItemRow";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
 import WrapTab from "@/components/wrapTab";
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
 import { setUpdateGroup } from "@/lib/groupSlice";
@@ -195,7 +194,7 @@ export default function Index() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
 
diff --git a/app/(application)/member/index.tsx b/app/(application)/member/index.tsx
index ed3734f..b789b78 100644
--- a/app/(application)/member/index.tsx
+++ b/app/(application)/member/index.tsx
@@ -176,7 +176,7 @@ export default function Index() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
       </View>
diff --git a/app/(application)/notification.tsx b/app/(application)/notification.tsx
index 736916e..7c56cd8 100644
--- a/app/(application)/notification.tsx
+++ b/app/(application)/notification.tsx
@@ -147,7 +147,7 @@ export default function Notification() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
       </SafeAreaView>
diff --git a/app/(application)/position/index.tsx b/app/(application)/position/index.tsx
index 76479bb..17a6ab1 100644
--- a/app/(application)/position/index.tsx
+++ b/app/(application)/position/index.tsx
@@ -220,7 +220,7 @@ export default function Index() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={chooseData.name}>
diff --git a/app/(application)/project/[id]/add-member.tsx b/app/(application)/project/[id]/add-member.tsx
index a47fa35..0261476 100644
--- a/app/(application)/project/[id]/add-member.tsx
+++ b/app/(application)/project/[id]/add-member.tsx
@@ -150,7 +150,7 @@ export default function AddMemberProject() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
@@ -175,7 +175,7 @@ export default function AddMemberProject() {
                                        <View style={[Styles.ml10]}>
                                           <Text style={[Styles.textDefault]} numberOfLines={1}>{item.name}</Text>
                                           {
-                                             found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                             found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                           }
                                        </View>
                                     </View>
diff --git a/app/(application)/project/[id]/add-task.tsx b/app/(application)/project/[id]/add-task.tsx
index 921fa58..f54ccce 100644
--- a/app/(application)/project/[id]/add-task.tsx
+++ b/app/(application)/project/[id]/add-task.tsx
@@ -1,5 +1,6 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
 import ModalAddDetailTugasProject from "@/components/project/modalAddDetailTugasProject";
 import Text from "@/components/Text";
@@ -19,7 +20,6 @@ import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
-   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -200,31 +200,32 @@ export default function ProjectAddTask() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {
-                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
-                     <Pressable
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/project/create.tsx b/app/(application)/project/create.tsx
index 00fb288..ce55509 100644
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -322,7 +322,7 @@ export default function CreateProject() {
                         <Text>Total {entitiesMember.length} Anggota</Text>
                      </View>
 
-                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, { borderColor: colors.icon, backgroundColor: colors.card }]}>
+                     <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 (
diff --git a/app/(application)/project/create/member.tsx b/app/(application)/project/create/member.tsx
index 947afad..d5f8ba2 100644
--- a/app/(application)/project/create/member.tsx
+++ b/app/(application)/project/create/member.tsx
@@ -127,7 +127,7 @@ export default function AddMemberCreateProject() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }, Styles.pv05]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
@@ -140,7 +140,7 @@ export default function AddMemberCreateProject() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => {
                                  onChoose(item.id, item.name, item.img)
                               }}
diff --git a/app/(application)/project/create/task.tsx b/app/(application)/project/create/task.tsx
index 5aaad36..338d4f8 100644
--- a/app/(application)/project/create/task.tsx
+++ b/app/(application)/project/create/task.tsx
@@ -1,5 +1,6 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
 import ModalAddDetailTugasProject from "@/components/project/modalAddDetailTugasProject";
 import Text from "@/components/Text";
@@ -17,7 +18,6 @@ import React, { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
-   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -173,12 +173,12 @@ export default function CreateProjectAddTask() {
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
                            month_label: { color: colors.text },
-                           month_selector_label: Styles.cBlack,
-                           year_label: Styles.cBlack,
-                           year_selector_label: Styles.cBlack,
-                           day_label: Styles.cBlack,
-                           time_label: Styles.cBlack,
-                           weekday_label: Styles.cBlack,
+                           month_selector_label: { color: colors.text },
+                           year_label: { color: colors.text },
+                           year_selector_label: { color: colors.text },
+                           day_label: { color: colors.text },
+                           time_label: { color: colors.text },
+                           weekday_label: { color: colors.text },
                         }}
                      />
                   </View>
@@ -186,31 +186,32 @@ export default function CreateProjectAddTask() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {
-                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.mt05, { color: colors.error }]}>Tanggal tidak boleh kosong</Text>
                      }
-                     <Pressable
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
diff --git a/app/(application)/project/index.tsx b/app/(application)/project/index.tsx
index 93d55b8..c08b44a 100644
--- a/app/(application)/project/index.tsx
+++ b/app/(application)/project/index.tsx
@@ -7,6 +7,7 @@ import ProgressBar from "@/components/progressBar";
 import Skeleton from "@/components/skeleton";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetProject } from "@/lib/api";
@@ -127,64 +128,67 @@ export default function ListProject() {
    return (
       <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
-            <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
-               <ButtonTab
-                  active={statusFix}
-                  value="0"
-                  onPress={() => { setStatusFix("0") }}
-                  label="Segera"
-                  icon={
-                     <MaterialCommunityIcons
-                        name="clock-alert-outline"
-                        color={statusFix == "0" ? "white" : colors.dimmed}
-                        size={20}
-                     />
-                  }
-                  n={4}
-               />
-               <ButtonTab
-                  active={statusFix}
-                  value="1"
-                  onPress={() => { setStatusFix("1") }}
-                  label="Dikerjakan"
-                  icon={
-                     <MaterialCommunityIcons
-                        name="progress-check"
-                        color={statusFix == "1" ? "white" : colors.dimmed}
-                        size={20}
-                     />
-                  }
-                  n={4}
-               />
-               <ButtonTab
-                  active={statusFix}
-                  value="2"
-                  onPress={() => { setStatusFix("2") }}
-                  label="Selesai"
-                  icon={
-                     <Ionicons
-                        name="checkmark-done-circle-outline"
-                        color={statusFix == "2" ? "white" : colors.dimmed}
-                        size={20}
-                     />
-                  }
-                  n={4}
-               />
-               <ButtonTab
-                  active={statusFix}
-                  value="3"
-                  onPress={() => { setStatusFix("3") }}
-                  label="Batal"
-                  icon={
-                     <AntDesign
-                        name="closecircleo"
-                        color={statusFix == "3" ? "white" : colors.dimmed}
-                        size={20}
-                     />
-                  }
-                  n={4}
-               />
-            </ScrollView>
+            <WrapTab>
+               <ScrollView horizontal showsHorizontalScrollIndicator={false} style={[Styles.round20]}>
+                  <ButtonTab
+                     active={statusFix}
+                     value="0"
+                     onPress={() => { setStatusFix("0") }}
+                     label="Segera"
+                     icon={
+                        <MaterialCommunityIcons
+                           name="clock-alert-outline"
+                           color={statusFix == "0" ? "white" : colors.dimmed}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
+                  <ButtonTab
+                     active={statusFix}
+                     value="1"
+                     onPress={() => { setStatusFix("1") }}
+                     label="Dikerjakan"
+                     icon={
+                        <MaterialCommunityIcons
+                           name="progress-check"
+                           color={statusFix == "1" ? "white" : colors.dimmed}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
+                  <ButtonTab
+                     active={statusFix}
+                     value="2"
+                     onPress={() => { setStatusFix("2") }}
+                     label="Selesai"
+                     icon={
+                        <Ionicons
+                           name="checkmark-done-circle-outline"
+                           color={statusFix == "2" ? "white" : colors.dimmed}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
+                  <ButtonTab
+                     active={statusFix}
+                     value="3"
+                     onPress={() => { setStatusFix("3") }}
+                     label="Batal"
+                     icon={
+                        <AntDesign
+                           name="closecircleo"
+                           color={statusFix == "3" ? "white" : colors.dimmed}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
+               </ScrollView>
+            </WrapTab>
+
             <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
                <InputSearch width={68} onChange={setSearch} />
                <Pressable
@@ -249,12 +253,13 @@ export default function ListProject() {
                                        key={index}
                                        onPress={() => { router.push(`/project/${item.id}`); }}
                                        borderType="bottom"
+                                       bgColor="transparent"
                                        icon={
-                                          <View style={[Styles.iconContent, ColorsStatus.lightGreen]} >
+                                          <View style={[Styles.iconContent]} >
                                              <AntDesign
                                                 name="areachart"
                                                 size={25}
-                                                color={"#384288"}
+                                                color={"black"}
                                              />
                                           </View>
                                        }
@@ -316,17 +321,17 @@ export default function ListProject() {
                                     >
                                        <ProgressBar value={item.progress} category="list" />
                                        <View style={[Styles.rowSpaceBetween]}>
-                                          <Text style={[Styles.textDefault, Styles.cGray]}>
+                                          <Text style={[Styles.textDefault, { color: colors.dimmed }]}>
                                              {item.createdAt}
                                           </Text>
                                           <LabelStatus
                                              size="default"
                                              category={
-                                                item.status === 0 ? 'primary' :
+                                                item.status === 0 ? 'secondary' :
                                                    item.status === 1 ? 'warning' :
                                                       item.status === 2 ? 'success' :
                                                          item.status === 3 ? 'error' :
-                                                            'primary'
+                                                            'secondary'
                                              }
                                              text={
                                                 item.status === 0 ? 'SEGERA' :
@@ -364,7 +369,7 @@ export default function ListProject() {
                                  >
                                     <ProgressBar value={item.progress} category="list" />
                                     <View style={[Styles.rowSpaceBetween]}>
-                                       <Text style={[Styles.textDefault, Styles.cGray]}>
+                                       <Text style={[Styles.textDefault, { color: colors.dimmed }]}>
                                           {item.createdAt}
                                        </Text>
                                        <LabelStatus
@@ -392,7 +397,7 @@ export default function ListProject() {
                      )
                      :
                      <View style={[Styles.mt15]}>
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada kegiatan</Text>
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada kegiatan</Text>
                      </View>
             }
          </View>
diff --git a/app/(application)/project/update/[detail].tsx b/app/(application)/project/update/[detail].tsx
index 0aabbfe..f4a2057 100644
--- a/app/(application)/project/update/[detail].tsx
+++ b/app/(application)/project/update/[detail].tsx
@@ -234,20 +234,20 @@ export default function UpdateProjectTask() {
                   <View style={[Styles.mv10]}>
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: '48%' }]}>
-                           <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={Styles.cError}>*</Text></Text>
+                           <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={{ color: colors.error }}>*</Text></Text>
                            <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: 'center' }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: '48%' }]}>
-                           <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={Styles.cError}>*</Text></Text>
+                           <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text></Text>
                            <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: 'center' }}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {
-                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
                      <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
diff --git a/components/borderBottomItem2.tsx b/components/borderBottomItem2.tsx
index 1af62a6..c08ec69 100644
--- a/components/borderBottomItem2.tsx
+++ b/components/borderBottomItem2.tsx
@@ -176,13 +176,13 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
                   <View style={[rightBottomInfo && !leftBottomInfo ? Styles.rowSpaceBetweenReverse : Styles.rowSpaceBetween, Styles.mt05]}>
                      {
                         typeof leftBottomInfo == 'string' ?
-                           <Text style={[Styles.textInformation, Styles.cGray]}>{leftBottomInfo}</Text>
+                           <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{leftBottomInfo}</Text>
                            :
                            leftBottomInfo
                      }
                      {
                         typeof rightBottomInfo == 'string' ?
-                           <Text style={[Styles.textInformation, Styles.cGray]}>{rightBottomInfo}</Text>
+                           <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{rightBottomInfo}</Text>
                            :
                            rightBottomInfo
                      }
diff --git a/components/buttonSelect.tsx b/components/buttonSelect.tsx
index 9de3cb3..b7c128b 100644
--- a/components/buttonSelect.tsx
+++ b/components/buttonSelect.tsx
@@ -29,7 +29,7 @@ export default function ButtonSelect({ value, onPress, round, error, errorText }
                <Text style={[{ color: colors.text }]}>{value}</Text>
             </View>
          </Pressable>
-         {error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)}
+         {error && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.error }]}>{errorText}</Text>)}
       </View>
    )
 }
\ No newline at end of file
diff --git a/components/calendar/itemHistoryEvent.tsx b/components/calendar/itemHistoryEvent.tsx
index 5e277a3..017a44f 100644
--- a/components/calendar/itemHistoryEvent.tsx
+++ b/components/calendar/itemHistoryEvent.tsx
@@ -40,7 +40,7 @@ export default function ItemHistoryEvent({ data }: { data: Props }) {
                ))
             ) : (
                <View style={[Styles.p15]}>
-                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
                </View>
             )
          }
diff --git a/components/division/discussionDivisionDetail.tsx b/components/division/discussionDivisionDetail.tsx
index f3b3259..09c9121 100644
--- a/components/division/discussionDivisionDetail.tsx
+++ b/components/division/discussionDivisionDetail.tsx
@@ -75,9 +75,7 @@ export default function DiscussionDivisionDetail({ refreshing }: { refreshing: b
                 />
               ))
             ) : (
-              <Text
-                style={[Styles.textDefault, Styles.cGray, { textAlign: "center" }]}
-              >
+              <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]} >
                 Tidak ada diskusi
               </Text>
             )
diff --git a/components/division/fileDivisionDetail.tsx b/components/division/fileDivisionDetail.tsx
index f106908..0717a10 100644
--- a/components/division/fileDivisionDetail.tsx
+++ b/components/division/fileDivisionDetail.tsx
@@ -154,7 +154,7 @@ export default function FileDivisionDetail({ refreshing }: { refreshing: boolean
                   //    )}
                   // />
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada file</Text>
          }
       </View>
    )
diff --git a/components/division/taskDivisionDetail.tsx b/components/division/taskDivisionDetail.tsx
index e1ca4c3..915eadc 100644
--- a/components/division/taskDivisionDetail.tsx
+++ b/components/division/taskDivisionDetail.tsx
@@ -90,7 +90,7 @@ export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean
                   //    )}
                   // />
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
          }
       </View>
    )
diff --git a/components/document/modalInformasi.tsx b/components/document/modalInformasi.tsx
index 912a370..4800aec 100644
--- a/components/document/modalInformasi.tsx
+++ b/components/document/modalInformasi.tsx
@@ -98,7 +98,7 @@ export default function ModalInformasi({ data }: { data: any }) {
                            )
                               : (
                                  <View style={[Styles.ml10, Styles.mt02]}>
-                                    <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                                    <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
                                  </View>
                               )
                         }
diff --git a/components/document/modalSalinMove.tsx b/components/document/modalSalinMove.tsx
index 9622c0f..1d45086 100644
--- a/components/document/modalSalinMove.tsx
+++ b/components/document/modalSalinMove.tsx
@@ -99,14 +99,14 @@ export default function ModalSalinMove({ open, close, category, onConfirm, dataC
                               if (found) return;
                               setPath(item.id);
                            }}
-                           subtitle={found ? <Text style={[Styles.textInformation, Styles.cGray]}>Tidak dapat memilih folder ini</Text> : ''}
+                           subtitle={found ? <Text style={[Styles.textInformation, { color: colors.dimmed }]}>Tidak dapat memilih folder ini</Text> : ''}
                         />
                      )
                   }
                   )
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.mt15, { textAlign: 'center' }]}>Tidak ada data</Text>
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }, Styles.mt15]}>Tidak ada data</Text>
             }
          </View>
          <View style={[Styles.rowOnly, Styles.mt15, Styles.absolute0, { backgroundColor: colors.modalBackground }]}>
diff --git a/components/home/discussionHome.tsx b/components/home/discussionHome.tsx
index 2dc7f25..8850586 100644
--- a/components/home/discussionHome.tsx
+++ b/components/home/discussionHome.tsx
@@ -64,7 +64,7 @@ export default function DisccussionHome({ refreshing }: { refreshing: boolean })
                            <DiscussionItem key={index} title={item.desc} user={item.user} date={item.date} onPress={() => { router.push(`/division/${item.idDivision}/discussion/${item.id}`) }} />
                         )
                      })
-                     : <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada diskusi</Text>
+                     : <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada diskusi</Text>
             }
          </View>
       </View>
diff --git a/components/home/divisionHome.tsx b/components/home/divisionHome.tsx
index 872bbb6..2dd955a 100644
--- a/components/home/divisionHome.tsx
+++ b/components/home/divisionHome.tsx
@@ -92,7 +92,7 @@ export default function DivisionHome({ refreshing }: { refreshing: boolean }) {
                   //    )}
                   // />
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
          }
       </View>
    )
diff --git a/components/home/eventHome.tsx b/components/home/eventHome.tsx
index 049b0e0..6e0927a 100644
--- a/components/home/eventHome.tsx
+++ b/components/home/eventHome.tsx
@@ -69,7 +69,7 @@ export default function EventHome({ refreshing }: { refreshing: boolean }) {
                            <EventItem key={index} category={index % 2 == 0 ? 'purple' : 'orange'} onPress={() => { router.push(`/division/${item.idDivision}/calendar/${item.id}`) }} title={item.title} user={item.user_name} jamAwal={item.timeStart} jamAkhir={item.timeEnd} />
                         )
                      })
-                     : <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara hari ini</Text>
+                     : <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada acara hari ini</Text>
             }
          </View>
       </View>
diff --git a/components/home/projectHome.tsx b/components/home/projectHome.tsx
index fa7ea0a..46c820f 100644
--- a/components/home/projectHome.tsx
+++ b/components/home/projectHome.tsx
@@ -97,7 +97,7 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
                      )}
                   />
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
          }
 
       </View>
diff --git a/components/inputForm.tsx b/components/inputForm.tsx
index 876b877..ff17cdf 100644
--- a/components/inputForm.tsx
+++ b/components/inputForm.tsx
@@ -46,7 +46,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                multiline && { alignItems: 'flex-end' },
                round && Styles.round30,
                {
-                  backgroundColor: bg=="transparent" ? "transparent" : colors.input,
+                  backgroundColor: bg == "transparent" ? "transparent" : colors.input,
                },
                error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
                Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
@@ -102,7 +102,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
                round && Styles.round30,
                {
-                  backgroundColor: bg=="transparent" ? "transparent" : colors.input,
+                  backgroundColor: bg == "transparent" ? "transparent" : colors.input,
                },
                { color: colors.text },
                multiline && { height: 150, textAlignVertical: 'top' }
@@ -112,7 +112,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
             multiline={multiline}
             numberOfLines={multiline ? 5 : undefined}
          />
-         {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
+         {error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
          {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
       </View>
    )
diff --git a/components/itemSectionTanggalTugas.tsx b/components/itemSectionTanggalTugas.tsx
index e53f225..8030a9f 100644
--- a/components/itemSectionTanggalTugas.tsx
+++ b/components/itemSectionTanggalTugas.tsx
@@ -16,26 +16,26 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
    const { colors } = useTheme();
 
    return (
-      <Pressable style={[Styles.mb15, { borderBottomColor: colors.icon, borderBottomWidth: 1 }]} onPress={onPress}>
+      <Pressable style={[Styles.mb15, { borderBottomColor: colors.icon + '20', borderBottomWidth: 1 }]} onPress={onPress}>
          <View style={[Styles.rowItemsCenter]}>
             {
                done != undefined ?
                   done ?
                      <>
                         <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
-                        <Text style={[Styles.cGray]}>Selesai</Text>
+                        <Text>Selesai</Text>
                      </>
                      :
                      <>
                         <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
-                        <Text style={[Styles.cGray]}>Belum Selesai</Text>
+                        <Text>Belum Selesai</Text>
                      </>
                   :
                   <></>
             }
 
          </View>
-         <View style={[Styles.wrapPaper, Styles.mv10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+         <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.mv10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
             <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
                <MaterialCommunityIcons name="file-table-outline" size={25} color={colors.text} style={[Styles.mr10]} />
                <View style={[Styles.w90]}>
@@ -46,13 +46,13 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
          <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
             <View style={[{ width: '48%' }]}>
                <Text style={[Styles.mb05]}>Tanggal Mulai</Text>
-               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+               <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                   <Text style={{ textAlign: 'center' }}>{dateStart}</Text>
                </View>
             </View>
             <View style={[{ width: '48%' }]}>
                <Text style={[Styles.mb05]}>Tanggal Berakhir</Text>
-               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+               <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                   <Text style={{ textAlign: 'center' }}>{dateEnd}</Text>
                </View>
             </View>
diff --git a/components/modalFilter.tsx b/components/modalFilter.tsx
index 8f07060..3168bf1 100644
--- a/components/modalFilter.tsx
+++ b/components/modalFilter.tsx
@@ -161,7 +161,7 @@ export default function ModalFilter({ open, close, page, category, valueGroup, v
                                  style={[
                                     Styles.chip,
                                     { borderColor: colors.dimmed },
-                                    chooseGroup == item.id && { backgroundColor: colors.primary },
+                                    chooseYear == item.id && { backgroundColor: colors.primary },
                                  ]}
                                  activeOpacity={0.8}
                                  onPress={() => { setChooseYear(item.id) }}
diff --git a/components/modalSelect.tsx b/components/modalSelect.tsx
index a0e6b19..ea0f500 100644
--- a/components/modalSelect.tsx
+++ b/components/modalSelect.tsx
@@ -152,7 +152,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                      </View>
 
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                     <Text style={[Styles.textDefault, { color: colors.dimmed }, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
                }
             </>
          }
diff --git a/components/project/modalAddDetailTugasProject.tsx b/components/project/modalAddDetailTugasProject.tsx
index 766af45..6663683 100644
--- a/components/project/modalAddDetailTugasProject.tsx
+++ b/components/project/modalAddDetailTugasProject.tsx
@@ -98,7 +98,7 @@ export default function ModalAddDetailTugasProject({ isVisible, setVisible, data
                getItem={getItem}
                renderItem={({ item, index }: { item: Props, index: number }) => {
                   return (
-                     <View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.icon }]}>
+                     <View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.icon + "20" }]}>
                         <Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
                         <View style={[Styles.rowSpaceBetween]}>
                            <View style={[{ width: "48%" }]}>
diff --git a/components/project/modalListDetailTugasProject.tsx b/components/project/modalListDetailTugasProject.tsx
index 4305286..ac5ea8b 100644
--- a/components/project/modalListDetailTugasProject.tsx
+++ b/components/project/modalListDetailTugasProject.tsx
@@ -109,7 +109,7 @@ export default function ModalListDetailTugasProject({ isVisible, setVisible, idT
                         />
                      )
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]} >Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]} >Tidak ada data</Text>
             }
          </View>
 
diff --git a/components/project/sectionFile.tsx b/components/project/sectionFile.tsx
index 234659f..2072ada 100644
--- a/components/project/sectionFile.tsx
+++ b/components/project/sectionFile.tsx
@@ -161,7 +161,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
                            )
                         })
                         :
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada file</Text>
                }
             </View>
          </View>
diff --git a/components/project/sectionMember.tsx b/components/project/sectionMember.tsx
index 44d10d3..864876e 100644
--- a/components/project/sectionMember.tsx
+++ b/components/project/sectionMember.tsx
@@ -129,7 +129,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
                            );
                         })
                         :
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada anggota</Text>
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada anggota</Text>
                }
             </View>
          </View>
diff --git a/components/project/sectionTanggalTugas.tsx b/components/project/sectionTanggalTugas.tsx
index 8d1d866..ec96d72 100644
--- a/components/project/sectionTanggalTugas.tsx
+++ b/components/project/sectionTanggalTugas.tsx
@@ -149,7 +149,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
                            );
                         })
                         :
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
                }
             </View>
          </View>
diff --git a/components/sectionCancel.tsx b/components/sectionCancel.tsx
index 0aa6042..a3120d0 100644
--- a/components/sectionCancel.tsx
+++ b/components/sectionCancel.tsx
@@ -14,7 +14,7 @@ export default function SectionCancel({ text, title }: Props) {
    const { colors } = useTheme();
 
    return (
-      <View style={[Styles.p10, Styles.round05, Styles.mb15, { backgroundColor: colors.card }]}>
+      <View style={[Styles.p10, Styles.round05, Styles.mb15, { backgroundColor: colors.error + '70' }]}>
          <View style={[Styles.rowItemsCenter]}>
             <AntDesign name="warning" size={22} style={[Styles.mr10]} color={colors.text} />
             <Text style={[Styles.textDefaultSemiBold]}>{title ? title : 'Kegiatan Dibatalkan'}</Text>
diff --git a/components/sectionProgress.tsx b/components/sectionProgress.tsx
index 816c13d..fc1132d 100644
--- a/components/sectionProgress.tsx
+++ b/components/sectionProgress.tsx
@@ -1,10 +1,9 @@
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
-import Text from "./Text";
 import { View } from "react-native";
 import ProgressBar from "./progressBar";
+import Text from "./Text";
 
 type Props = {
    text: string,
@@ -15,9 +14,9 @@ export default function SectionProgress({ text, progress }: Props) {
    const { colors } = useTheme();
 
    return (
-      <View style={[Styles.p15, { flexDirection: 'row', borderRadius: 10, alignItems: 'center', backgroundColor: colors.card }]}>
-         <View style={[Styles.iconContent, { alignItems: 'center', justifyContent: 'center', backgroundColor: colors.primary }]}>
-            <AntDesign name="areachart" size={30} color={'#384288'} />
+      <View style={[Styles.wrapPaper, Styles.rowItemsCenter, { backgroundColor: colors.card }]}>
+         <View style={[Styles.iconContent]}>
+            <AntDesign name="areachart" size={30} color={'black'} />
          </View>
          <View style={[Styles.ml10, { flex: 1 }]}>
             <Text style={[Styles.mb05]}>{text}</Text>
diff --git a/components/task/modalListDetailTugasTask.tsx b/components/task/modalListDetailTugasTask.tsx
index 7a79268..91371d0 100644
--- a/components/task/modalListDetailTugasTask.tsx
+++ b/components/task/modalListDetailTugasTask.tsx
@@ -109,7 +109,7 @@ export default function ModalListDetailTugasTask({ isVisible, setVisible, idTask
                         />
                      )
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]} >Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]} >Tidak ada data</Text>
             }
          </View>
 
diff --git a/components/task/sectionFileTask.tsx b/components/task/sectionFileTask.tsx
index 134fad8..c1b4267 100644
--- a/components/task/sectionFileTask.tsx
+++ b/components/task/sectionFileTask.tsx
@@ -152,7 +152,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
                            )
                         })
                         :
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada file</Text>
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada file</Text>
                }
             </View>
          </View>
diff --git a/components/task/sectionMemberTask.tsx b/components/task/sectionMemberTask.tsx
index dd2c522..cf4b74d 100644
--- a/components/task/sectionMemberTask.tsx
+++ b/components/task/sectionMemberTask.tsx
@@ -132,13 +132,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
                            );
                         })
                      ) : (
-                        <Text
-                           style={[
-                              Styles.textDefault,
-                              Styles.cGray,
-                              { textAlign: "center" },
-                           ]}
-                        >
+                        <Text style={[ Styles.textDefault, { textAlign: "center", color:colors.dimmed }, ]} >
                            Tidak ada anggota
                         </Text>
                      )
diff --git a/components/task/sectionTanggalTugasTask.tsx b/components/task/sectionTanggalTugasTask.tsx
index 100333d..7342503 100644
--- a/components/task/sectionTanggalTugasTask.tsx
+++ b/components/task/sectionTanggalTugasTask.tsx
@@ -151,7 +151,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
                            );
                         })
                         :
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada tugas</Text>
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
                }
             </View>
          </View>
diff --git a/constants/Styles.ts b/constants/Styles.ts
index 9c336d0..b12a5a9 100644
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -220,6 +220,9 @@ const Styles = StyleSheet.create({
    round15: {
       borderRadius: 15
    },
+   round20: {
+      borderRadius: 20
+   },
    h100: {
       height: '100%'
    },