diff --git a/GEMINI.md b/GEMINI.md
new file mode 100644
index 0000000..e9e3e32
--- /dev/null
+++ b/GEMINI.md
@@ -0,0 +1,86 @@
+# Project Overview: Desa+
+
+Desa+ is a mobile application built with React Native and Expo, designed to facilitate management and communication within villages/communities. It aims to streamline village administration, inter-community communication, and the management of essential information.
+
+## Key Features:
+- Village announcements and information
+- Community discussion forum
+- Village activity calendar
+- Village documentation and archives
+- Project and task management
+- Member and organizational structure management
+- Push notifications for important updates
+- Verification and authentication features
+
+## Technologies Used:
+- **React Native**: Cross-platform mobile development framework.
+- **Expo**: Platform for React Native application development.
+- **Firebase**: Backend services including Authentication, Realtime Database, and Cloud Messaging.
+- **Redux Toolkit**: State management.
+- **React Navigation**: Application navigation.
+- **TypeScript**: For type safety.
+
+## Building and Running:
+
+### Installation
+1.  **Clone the repository:**
+    ```bash
+    git clone <repository-url>
+    cd mobile-darmasaba
+    ```
+2.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+3.  **Configure environment variables:**
+    Create a `.env` file in the root directory and add the following variables:
+    ```
+    URL_API=<api-endpoint>
+    URL_OTP=<otp-service-endpoint>
+    URL_STORAGE=<storage-endpoint>
+    URL_FIREBASE_DB=<firebase-database-url>
+    PASS_ENC=<encryption-password>
+    WA_SERVER_TOKEN=<whatsapp-server-token>
+    IOS_GOOGLE_SERVICES_FILE=<path-to-ios-google-services>
+    ```
+
+### Running the Application
+-   **Start development server:**
+    ```bash
+    npx expo start
+    ```
+-   **Run on Android emulator/device:**
+    ```bash
+    npm run android
+    ```
+-   **Run on iOS simulator/device:**
+    ```bash
+    npm run ios
+    ```
+
+### Build Production
+-   **Build Android production package:**
+    ```bash
+    npm run build:android
+    ```
+
+## Development Conventions:
+
+### Project Structure:
+-   `app/`: Main page files.
+-   `components/`: Reusable UI components, categorized by feature (e.g., `announcement/`, `auth/`, `discussion/`).
+-   `assets/`: Images and static assets.
+-   `constants/`: Global constants.
+-   `lib/`: Libraries and utilities.
+
+### Contribution Guidelines:
+1.  Fork the repository.
+2.  Create a new feature branch (`git checkout -b feature/FeatureName`).
+3.  Commit your changes (`git commit -m 'Add FeatureName feature'`).
+4.  Push to the branch (`git push origin feature/FeatureName`).
+5.  Create a pull request.
+
+## Platform Support:
+-   ✅ Android
+-   ✅ iOS
+-   ❌ Web (not yet optimized)
diff --git a/app/(application)/announcement/[id].tsx b/app/(application)/announcement/[id].tsx
index c489744..a11ac99 100644
--- a/app/(application)/announcement/[id].tsx
+++ b/app/(application)/announcement/[id].tsx
@@ -8,6 +8,7 @@ import { isImageFile } from "@/constants/FileExtensions";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import * as FileSystem from 'expo-file-system';
 import { startActivityAsync } from 'expo-intent-launcher';
@@ -51,6 +52,7 @@ interface ApiResponse {
 export default function DetailAnnouncement() {
    const { id } = useLocalSearchParams<{ id: string }>();
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [data, setData] = useState<AnnouncementData>({ id: '', title: '', desc: '' })
    const [dataMember, setDataMember] = useState<Record<string, MemberData[]>>({})
    const [dataFile, setDataFile] = useState<FileData[]>([])
@@ -175,7 +177,7 @@ export default function DetailAnnouncement() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -193,16 +195,17 @@ export default function DetailAnnouncement() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={() => handleRefresh()}
+                  tintColor={colors.primary}
                />
             }
          >
             <View style={[Styles.p15, Styles.mb50]}>
-               <View style={[Styles.wrapPaper]}>
+               <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   {
                      loading ?
                         <View>
@@ -219,7 +222,7 @@ export default function DetailAnnouncement() {
                         :
                         <>
                            <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
-                              <MaterialIcons name="campaign" size={25} color="black" style={[Styles.mr05]} />
+                              <MaterialIcons name="campaign" size={25} color={colors.text} style={[Styles.mr05]} />
                               <Text style={[Styles.textDefaultSemiBold, Styles.w90, Styles.mt02]}>{data?.title}</Text>
                            </View>
                            <View style={[Styles.mt10]}>
@@ -228,7 +231,7 @@ export default function DetailAnnouncement() {
                                     <RenderHTML
                                        contentWidth={contentWidth}
                                        source={{ html: data?.desc }}
-                                       baseStyle={{ color: 'black' }}
+                                       baseStyle={{ color: colors.text }}
                                     />
                                     :
                                     <Text>{data?.desc}</Text>
@@ -240,7 +243,7 @@ export default function DetailAnnouncement() {
                </View>
                {
                   dataFile.length > 0 && (
-                     <View style={[Styles.wrapPaper, Styles.mt10]}>
+                     <View style={[Styles.wrapPaper, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                         <View style={[Styles.mb05]}>
                            <Text style={[Styles.textDefaultSemiBold]}>File</Text>
                         </View>
@@ -251,7 +254,7 @@ export default function DetailAnnouncement() {
                               icon={<MaterialCommunityIcons
                                  name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"}
                                  size={25}
-                                 color="black"
+                                 color={colors.text}
                               />}
                               title={item.name + '.' + item.extension}
                               titleWeight="normal"
@@ -265,7 +268,7 @@ export default function DetailAnnouncement() {
                      </View>
                   )
                }
-               <View style={[Styles.wrapPaper, Styles.mt10]}>
+               <View style={[Styles.wrapPaper, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   {
                      loading ?
                         arrSkeleton.map((item, index) => {
@@ -286,7 +289,7 @@ export default function DetailAnnouncement() {
                                     dataMember[v].map((item: any, x: any) => {
                                        return (
                                           <View key={x} style={[Styles.rowItemsCenter, Styles.w90]}>
-                                             <Entypo name="dot-single" size={24} color="black" />
+                                             <Entypo name="dot-single" size={24} color={colors.text} />
                                              <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
                                           </View>
                                        )
diff --git a/app/(application)/announcement/create.tsx b/app/(application)/announcement/create.tsx
index 2ca3df3..eddd587 100644
--- a/app/(application)/announcement/create.tsx
+++ b/app/(application)/announcement/create.tsx
@@ -12,6 +12,7 @@ import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiCreateAnnouncement } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
@@ -24,6 +25,7 @@ export default function CreateAnnouncement() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.announcementUpdate)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [disableBtn, setDisableBtn] = useState(true);
    const [modalDivisi, setModalDivisi] = useState(false);
    const [divisionMember, setDivisionMember] = useState<any>([])
@@ -129,7 +131,7 @@ export default function CreateAnnouncement() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,15 +160,15 @@ export default function CreateAnnouncement() {
                      showBack={true}
                      onPressLeft={() => router.back()}
                      right={
-                           <ButtonSaveHeader
-                              disable={disableBtn || divisionMember.length == 0 || loading ? true : false}
-                              category="create"
-                              onPress={() => {
-                                 divisionMember.length == 0
-                                    ? Toast.show({ type: 'small', text1: "Anda belum memilih divisi", })
-                                    : handleCreate();
-                              }}
-                           />
+                        <ButtonSaveHeader
+                           disable={disableBtn || divisionMember.length == 0 || loading ? true : false}
+                           category="create"
+                           onPress={() => {
+                              divisionMember.length == 0
+                                 ? Toast.show({ type: 'small', text1: "Anda belum memilih divisi", })
+                                 : handleCreate();
+                           }}
+                        />
                      }
                   />
                )
@@ -175,7 +177,7 @@ export default function CreateAnnouncement() {
          <LoadingOverlay visible={loading} />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                <InputForm
@@ -184,6 +186,7 @@ export default function CreateAnnouncement() {
                   placeholder="Judul Pengumuman"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul harus diisi"
                   onChange={(val) => validationForm("title", val)}
                />
@@ -193,6 +196,7 @@ export default function CreateAnnouncement() {
                   placeholder="Deskripsi Pengumuman"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Pengumuman harus diisi"
                   onChange={(val) => validationForm("desc", val)}
                   multiline
@@ -208,7 +212,7 @@ export default function CreateAnnouncement() {
                            <BorderBottomItem
                               key={index}
                               borderType={fileForm.length > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile(index); setModalFile(true) }}
@@ -237,7 +241,7 @@ export default function CreateAnnouncement() {
                                  {
                                     item.Division.map((division: any, i: any) => (
                                        <View key={i} style={[Styles.rowItemsCenter, Styles.w90]}>
-                                          <Entypo name="dot-single" size={24} color="black" />
+                                          <Entypo name="dot-single" size={24} color={colors.text} />
                                           <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{division.name}</Text>
                                        </View>
                                     ))
@@ -266,7 +270,7 @@ export default function CreateAnnouncement() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />
diff --git a/app/(application)/announcement/edit/[id].tsx b/app/(application)/announcement/edit/[id].tsx
index c96984b..35e2a73 100644
--- a/app/(application)/announcement/edit/[id].tsx
+++ b/app/(application)/announcement/edit/[id].tsx
@@ -12,6 +12,7 @@ import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiEditAnnouncement, apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -35,6 +36,7 @@ export default function EditAnnouncement() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.announcementUpdate)
    const { token, decryptToken } = useAuthSession();
+   const { colors } = useTheme();
    const [modalDivisi, setModalDivisi] = useState(false);
    const [disableBtn, setDisableBtn] = useState(true);
    const [dataMember, setDataMember] = useState<any>([]);
@@ -180,7 +182,7 @@ export default function EditAnnouncement() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -226,7 +228,7 @@ export default function EditAnnouncement() {
          <LoadingOverlay visible={loading} />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                <InputForm
@@ -235,6 +237,7 @@ export default function EditAnnouncement() {
                   placeholder="Judul Pengumuman"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul harus diisi"
                   onChange={(val) => validationForm("title", val)}
                   value={dataForm.title}
@@ -245,6 +248,7 @@ export default function EditAnnouncement() {
                   placeholder="Deskripsi Pengumuman"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Pengumuman harus diisi"
                   onChange={(val) => validationForm("desc", val)}
                   value={dataForm.desc}
@@ -261,7 +265,7 @@ export default function EditAnnouncement() {
                            <BorderBottomItem
                               key={index}
                               borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name + '.' + item.extension}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
@@ -273,7 +277,7 @@ export default function EditAnnouncement() {
                            <BorderBottomItem
                               key={index}
                               borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
@@ -300,7 +304,7 @@ export default function EditAnnouncement() {
                                  {
                                     item.Division.map((division: any, i: any) => (
                                        <View key={i} style={[Styles.rowItemsCenter, Styles.w90]}>
-                                          <Entypo name="dot-single" size={24} color="black" />
+                                          <Entypo name="dot-single" size={24} color={colors.text} />
                                           <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{division.name}</Text>
                                        </View>
                                     ))
@@ -330,7 +334,7 @@ export default function EditAnnouncement() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
                />
diff --git a/app/(application)/announcement/index.tsx b/app/(application)/announcement/index.tsx
index 75e628b..0c43ee3 100644
--- a/app/(application)/announcement/index.tsx
+++ b/app/(application)/announcement/index.tsx
@@ -6,6 +6,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncement } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useEffect, useState } from "react";
@@ -22,6 +23,7 @@ type Props = {
 
 export default function Announcement() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState('')
    const update = useSelector((state: any) => state.announcementUpdate)
@@ -83,7 +85,7 @@ export default function Announcement() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             <InputSearch onChange={setSearch} />
          </View>
@@ -127,6 +129,7 @@ export default function Announcement() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.primary}
                            />
                         }
                      />
diff --git a/app/(application)/banner/[id].tsx b/app/(application)/banner/[id].tsx
index 7e59eda..18d341c 100644
--- a/app/(application)/banner/[id].tsx
+++ b/app/(application)/banner/[id].tsx
@@ -7,6 +7,7 @@ import Styles from "@/constants/Styles";
 import { apiEditBanner, apiGetBanner, apiGetBannerOne } from "@/lib/api";
 import { setEntities } from "@/lib/bannerSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -24,6 +25,7 @@ import { useDispatch } from "react-redux";
 export default function EditBanner() {
    const dispatch = useDispatch();
    const { decryptToken, token } = useAuthSession();
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [selectedImage, setSelectedImage] = useState<
       string | undefined | { uri: string }
@@ -112,7 +114,7 @@ export default function EditBanner() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -143,7 +145,7 @@ export default function EditBanner() {
                )
             }}
          />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.mb15]}>
                   {selectedImage != undefined ? (
@@ -179,7 +181,7 @@ export default function EditBanner() {
                   type="default"
                   placeholder="Judul"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={title}
                   error={error}
                   onChange={onValidate}
diff --git a/app/(application)/banner/create.tsx b/app/(application)/banner/create.tsx
index 76e382a..a92562e 100644
--- a/app/(application)/banner/create.tsx
+++ b/app/(application)/banner/create.tsx
@@ -6,6 +6,7 @@ import Styles from "@/constants/Styles";
 import { apiCreateBanner, apiGetBanner } from "@/lib/api";
 import { setEntities } from "@/lib/bannerSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack } from "expo-router";
@@ -22,6 +23,7 @@ import { useDispatch } from "react-redux";
 
 export default function CreateBanner() {
    const { decryptToken, token } = useAuthSession();
+   const { colors } = useTheme();
    const dispatch = useDispatch();
    const [selectedImage, setSelectedImage] = useState<string | undefined>(
       undefined
@@ -94,7 +96,7 @@ export default function CreateBanner() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -133,7 +135,7 @@ export default function CreateBanner() {
                )
             }}
          />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15]}>
                <View style={[Styles.mb15]}>
                   {selectedImage != undefined ? (
@@ -165,7 +167,7 @@ export default function CreateBanner() {
                   type="default"
                   placeholder="Judul"
                   required
-                  bg="white"
+                  bg={colors.card}
                   onChange={onValidate}
                   error={error}
                   errorText="Judul harus diisi"
diff --git a/app/(application)/banner/index.tsx b/app/(application)/banner/index.tsx
index 3de81f9..ff8d4b0 100644
--- a/app/(application)/banner/index.tsx
+++ b/app/(application)/banner/index.tsx
@@ -11,6 +11,7 @@ import Styles from "@/constants/Styles"
 import { apiDeleteBanner, apiGetBanner } from "@/lib/api"
 import { setEntities } from "@/lib/bannerSlice"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
 import * as FileSystem from 'expo-file-system'
 import { startActivityAsync } from 'expo-intent-launcher'
@@ -32,6 +33,7 @@ type Props = {
 
 export default function BannerList() {
    const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme()
    const [isModal, setModal] = useState(false)
    const entities = useSelector((state: any) => state.banner)
    const [dataId, setDataId] = useState('')
@@ -105,7 +107,7 @@ export default function BannerList() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -130,9 +132,10 @@ export default function BannerList() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.primary}
                />
             }
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             {
                entities.length > 0
@@ -170,7 +173,7 @@ export default function BannerList() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setModal(false)
@@ -178,7 +181,7 @@ export default function BannerList() {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
                   title="Lihat"
                   onPress={() => {
                      setModal(false)
@@ -189,7 +192,7 @@ export default function BannerList() {
                   }}
                />
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
                      setModal(false)
diff --git a/app/(application)/discussion/[id].tsx b/app/(application)/discussion/[id].tsx
index a20d86f..edf3bd6 100644
--- a/app/(application)/discussion/[id].tsx
+++ b/app/(application)/discussion/[id].tsx
@@ -18,6 +18,7 @@ import Styles from "@/constants/Styles";
 import { apiDeleteDiscussionGeneralCommentar, apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar, apiUpdateDiscussionGeneralCommentar } from "@/lib/api";
 import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import { ref } from '@react-native-firebase/database';
 import { useHeaderHeight } from '@react-navigation/elements';
@@ -56,6 +57,7 @@ type PropsFile = {
 
 export default function DetailDiscussionGeneral() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
    const entities = useSelector((state: any) => state.entities)
    const { id } = useLocalSearchParams<{ id: string }>();
@@ -237,14 +239,15 @@ export default function DetailDiscussionGeneral() {
                )
             }}
          />
-         <View style={{ flex: 1 }}>
+         <View style={{ flex: 1, backgroundColor: colors.background }}>
             <ScrollView
                showsVerticalScrollIndicator={false}
-               style={[Styles.h100]}
+               style={[Styles.h100, { backgroundColor: colors.background }]}
                refreshControl={
                   <RefreshControl
                      refreshing={refreshing}
                      onRefresh={() => handleRefresh()}
+                     tintColor={colors.primary}
                   />
                }
             >
@@ -333,7 +336,7 @@ export default function DetailDiscussionGeneral() {
                <View style={[
                   Styles.contentItemCenter,
                   Styles.w100,
-                  { backgroundColor: "#f4f4f4" },
+                  { backgroundColor: colors.card },
                   viewEdit && Styles.borderTop
                ]}>
                   {
@@ -341,11 +344,11 @@ export default function DetailDiscussionGeneral() {
                         <>
                            <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
                               <View style={[Styles.rowItemsCenter]}>
-                                 <Feather name="edit-3" color="black" size={22} style={[Styles.mh05]} />
+                                 <Feather name="edit-3" color={colors.text} size={22} style={[Styles.mh05]} />
                                  <Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text>
                               </View>
                               <Pressable onPress={() => handleViewEditKomentar()}>
-                                 <MaterialIcons name="close" color="black" size={22} />
+                                 <MaterialIcons name="close" color={colors.text} size={22} />
                               </Pressable>
                            </View>
                            <InputForm
@@ -415,12 +418,12 @@ export default function DetailDiscussionGeneral() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => { handleViewEditKomentar() }}
                />
                <MenuItemRow
-                  icon={<MaterialIcons name="delete" color="black" size={25} />}
+                  icon={<MaterialIcons name="delete" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
                      AlertKonfirmasi({
diff --git a/app/(application)/discussion/add-member/[id].tsx b/app/(application)/discussion/add-member/[id].tsx
index fe3af20..3266b1e 100644
--- a/app/(application)/discussion/add-member/[id].tsx
+++ b/app/(application)/discussion/add-member/[id].tsx
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiAddMemberDiscussionGeneral, apiGetDiscussionGeneralOne, apiGetUser } from "@/lib/api";
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -26,6 +27,7 @@ export default function AddMemberDiscussionDetail() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [dataOld, setDataOld] = useState<Props[]>([])
    const [data, setData] = useState<Props[]>([])
@@ -125,7 +127,7 @@ export default function AddMemberDiscussionDetail() {
                )
             }}
          />
-         <View style={[Styles.p15]}>
+         <View style={[Styles.p15, { backgroundColor: colors.background }]}>
             <InputSearch onChange={setSearch} value={search} />
 
             {
@@ -175,7 +177,7 @@ export default function AddMemberDiscussionDetail() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
diff --git a/app/(application)/discussion/create.tsx b/app/(application)/discussion/create.tsx
index 22e660d..2a775be 100644
--- a/app/(application)/discussion/create.tsx
+++ b/app/(application)/discussion/create.tsx
@@ -16,6 +16,7 @@ import { apiCreateDiscussionGeneral } from "@/lib/api";
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
 import { setMemberChoose } from "@/lib/memberChoose";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
@@ -27,6 +28,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateDiscussionGeneral() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user);
    const userLogin = useSelector((state: any) => state.entities)
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
@@ -163,7 +165,7 @@ export default function CreateDiscussionGeneral() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -205,7 +207,7 @@ export default function CreateDiscussionGeneral() {
             }}
          />
          <LoadingOverlay visible={loading} />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                {
                   (entityUser.role == "supadmin" ||
@@ -215,6 +217,7 @@ export default function CreateDiscussionGeneral() {
                         placeholder="Pilih Lembaga Desa"
                         value={chooseGroup.label}
                         required
+                        bg={colors.card}
                         onPress={() => {
                            setValChoose(chooseGroup.val);
                            setValSelect("group");
@@ -231,6 +234,7 @@ export default function CreateDiscussionGeneral() {
                   placeholder="Judul"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul tidak boleh kosong"
                   onChange={(val) => { validationForm("title", val) }}
                />
@@ -240,6 +244,7 @@ export default function CreateDiscussionGeneral() {
                   placeholder="Hal yang didiskusikan"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Diskusi tidak boleh kosong"
                   onChange={(val) => { validationForm("desc", val) }}
                   multiline
@@ -248,14 +253,14 @@ export default function CreateDiscussionGeneral() {
                {
                   fileForm.length > 0
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10, { borderColor: colors.icon }]}>
                      <Text style={[Styles.textDefaultSemiBold]}>File</Text>
                      {
                         fileForm.map((item, index) => (
                            <BorderBottomItem
                               key={index}
                               borderType={fileForm.length > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile(index); setModalFile(true) }}
@@ -291,7 +296,7 @@ export default function CreateDiscussionGeneral() {
                         <Text>Total {entitiesMember.length} Anggota</Text>
                      </View>
 
-                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                     <View style={[Styles.borderAll, Styles.round10, Styles.p10, { borderColor: colors.icon }]}>
                         {
                            entitiesMember.map((item: { img: any; name: any; }, index: any) => {
                               return (
@@ -327,7 +332,7 @@ export default function CreateDiscussionGeneral() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />
diff --git a/app/(application)/discussion/edit/[id].tsx b/app/(application)/discussion/edit/[id].tsx
index 4a01537..6315525 100644
--- a/app/(application)/discussion/edit/[id].tsx
+++ b/app/(application)/discussion/edit/[id].tsx
@@ -11,6 +11,7 @@ import Styles from "@/constants/Styles";
 import { apiEditDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -21,6 +22,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 export default function EditDiscussionGeneral() {
    const { token, decryptToken } = useAuthSession();
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [disableBtn, setDisableBtn] = useState(false)
    const dispatch = useDispatch()
@@ -162,7 +164,7 @@ export default function EditDiscussionGeneral() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -198,13 +200,14 @@ export default function EditDiscussionGeneral() {
             }}
          />
          <LoadingOverlay visible={loading} />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15]}>
                <InputForm
                   label="Judul"
                   type="default"
                   placeholder="Judul"
                   required
+                  bg={colors.card}
                   error={error.title}
                   value={dataForm.title}
                   errorText="Judul tidak boleh kosong"
@@ -215,6 +218,7 @@ export default function EditDiscussionGeneral() {
                   type="default"
                   placeholder="Hal yang didiskusikan"
                   required
+                  bg={colors.card}
                   error={error.desc}
                   value={dataForm.desc}
                   errorText="Diskusi tidak boleh kosong"
@@ -225,14 +229,14 @@ export default function EditDiscussionGeneral() {
                {
                   (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10, { borderColor: colors.icon }]}>
                      <Text style={[Styles.textDefaultSemiBold]}>File</Text>
                      {
                         dataFile.filter((val) => !val.delete).map((item, index) => (
                            <BorderBottomItem
                               key={index}
                               borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name + '.' + item.extension}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
@@ -244,7 +248,7 @@ export default function EditDiscussionGeneral() {
                            <BorderBottomItem
                               key={index}
                               borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
@@ -259,7 +263,7 @@ export default function EditDiscussionGeneral() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
                />
diff --git a/app/(application)/discussion/index.tsx b/app/(application)/discussion/index.tsx
index b5714c5..4d94adb 100644
--- a/app/(application)/discussion/index.tsx
+++ b/app/(application)/discussion/index.tsx
@@ -8,6 +8,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussionGeneral } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type Props = {
 export default function Discussion() {
    const entityUser = useSelector((state: any) => state.user)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
    const [search, setSearch] = useState('')
    const [nameGroup, setNameGroup] = useState('')
@@ -96,24 +98,24 @@ export default function Discussion() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             {
                entityUser.role != "user" && entityUser.role != "coadmin" &&
-               <View style={[Styles.wrapBtnTab]}>
+               <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
                      value="true"
                      onPress={() => { setStatus("true") }}
                      label="Aktif"
-                     icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
+                     icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
                      n={2} />
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
                      value="false"
                      onPress={() => { setStatus("false") }}
                      label="Arsip"
-                     icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.text : 'white'} size={20} />}
                      n={2} />
                </View>
             }
@@ -178,6 +180,7 @@ export default function Discussion() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.primary}
                            />
                         }
                      />
diff --git a/app/(application)/discussion/member/[id].tsx b/app/(application)/discussion/member/[id].tsx
index cb836bf..ee3ce94 100644
--- a/app/(application)/discussion/member/[id].tsx
+++ b/app/(application)/discussion/member/[id].tsx
@@ -11,6 +11,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiDeleteMemberDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -26,6 +27,7 @@ type Props = {
 
 export default function MemberDiscussionDetail() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props[]>([])
@@ -71,7 +73,7 @@ export default function MemberDiscussionDetail() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -86,10 +88,10 @@ export default function MemberDiscussionDetail() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15]}>
                <Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text>
-               <View style={[Styles.wrapPaper, Styles.mb100]}>
+               <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   {
                      entityUser.role != "user" && entityUser.role != "coadmin" &&
                      <BorderBottomItem
@@ -135,7 +137,7 @@ export default function MemberDiscussionDetail() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={chooseUser.name}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
                   title="Lihat Profil"
                   onPress={() => {
                      setModal(false)
@@ -145,7 +147,7 @@ export default function MemberDiscussionDetail() {
                {
                   entityUser.role != "user" && entityUser.role != "coadmin" &&
                   <MenuItemRow
-                     icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
+                     icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
                      title="Keluarkan"
                      onPress={() => {
                         setModal(false)
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 6786243..56dcf74 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
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiAddMemberCalendar, apiGetCalendarOne, apiGetDivisionMember } from "@/lib/api";
 import { setUpdateCalendar } from "@/lib/calendarUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberCalendarEvent() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.calendarUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -100,7 +102,7 @@ export default function AddMemberCalendarEvent() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -182,7 +184,7 @@ export default function AddMemberCalendarEvent() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
diff --git a/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx b/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx
index 422df92..0d6b753 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx
@@ -9,6 +9,7 @@ import { valueTypeEventRepeat } from "@/constants/TypeEventRepeat"
 import { apiGetCalendarOne, apiUpdateCalendar } from "@/lib/api"
 import { stringToDateTime } from "@/lib/fun_stringToDate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from "@react-navigation/elements"
 import { Stack, router, useLocalSearchParams } from "expo-router"
 import moment from "moment"
@@ -17,6 +18,7 @@ import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, View } from "
 import Toast from "react-native-toast-message"
 
 export default function EditEventCalendar() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const [choose, setChoose] = useState({ val: "", label: "" })
    const [isSelect, setSelect] = useState(false)
@@ -162,7 +164,7 @@ export default function EditEventCalendar() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -205,7 +207,7 @@ export default function EditEventCalendar() {
                      type="default"
                      placeholder="Nama Acara"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={data.title}
                      onChange={(val) => validationForm("title", val)}
                      error={error.title}
@@ -251,12 +253,12 @@ export default function EditEventCalendar() {
                      label="Link Meet"
                      type="default"
                      placeholder="Link Meet"
-                     bg="white"
+                     bg={colors.card}
                      value={data.linkMeet}
                      onChange={(val) => validationForm("linkMeet", val)}
                   />
                   <SelectForm
-                     bg="white"
+                     bg={colors.card}
                      label="Ulangi Acara"
                      placeholder="Ulangi Acara"
                      value={choose.label}
@@ -268,7 +270,7 @@ export default function EditEventCalendar() {
                      type="numeric"
                      placeholder="Jumlah Pengulangan"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={String(data.repeatValue)}
                      onChange={(val) => validationForm("repeatValue", val)}
                      error={error.repeatValue}
@@ -279,7 +281,7 @@ export default function EditEventCalendar() {
                      label="Deskripsi"
                      type="default"
                      placeholder="Deskripsi"
-                     bg="white"
+                     bg={colors.card}
                      value={data.desc}
                      onChange={(val) => validationForm("desc", val)}
                      multiline
diff --git a/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx b/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
index 6778110..37b1b56 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
@@ -13,6 +13,7 @@ import Styles from "@/constants/Styles"
 import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api"
 import { setUpdateCalendar } from "@/lib/calendarUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { MaterialCommunityIcons } from "@expo/vector-icons"
 import Clipboard from "@react-native-clipboard/clipboard"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -45,6 +46,7 @@ type PropsMember = {
 }
 
 export default function DetailEventCalendar() {
+   const { colors } = useTheme()
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
    const [data, setData] = useState<Props>()
    const [member, setMember] = useState<PropsMember[]>([])
@@ -152,14 +154,14 @@ export default function DetailEventCalendar() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Detail Acara',
                headerTitleAlign: 'center',
                // headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
-               header:()=>(
+               header: () => (
                   <AppHeader
                      title="Detail Acara"
                      showBack={true}
@@ -181,9 +183,9 @@ export default function DetailEventCalendar() {
             }
          >
             <View style={[Styles.p15]}>
-               <View style={[Styles.wrapPaper, Styles.mb15]}>
+               <View style={[Styles.wrapPaper, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
-                     <MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="calendar-text" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -192,7 +194,7 @@ export default function DetailEventCalendar() {
 
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="calendar-month-outline" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -201,7 +203,7 @@ export default function DetailEventCalendar() {
                      }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="clock-outline" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -210,7 +212,7 @@ export default function DetailEventCalendar() {
                      }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="repeat" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -228,7 +230,7 @@ export default function DetailEventCalendar() {
                      }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="link-variant" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -241,7 +243,7 @@ export default function DetailEventCalendar() {
                      }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10, { alignItems: 'flex-start' }]}>
-                     <MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="card-text-outline" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -257,7 +259,7 @@ export default function DetailEventCalendar() {
                      <Text style={[Styles.textDefault]}>Total {member.length} Anggota</Text>
                   </View>
 
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         member.map((item, index) => (
                            <BorderBottomItem
@@ -286,7 +288,7 @@ export default function DetailEventCalendar() {
          <DrawerBottom animation="slide" isVisible={isModalMember} setVisible={setModalMember} title={memberChoose.name}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
                   title="Lihat Profil"
                   onPress={() => {
                      setModalMember(false)
@@ -295,7 +297,7 @@ export default function DetailEventCalendar() {
                />
 
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
                   title="Keluarkan"
                   onPress={() => {
                      setModalMember(false)
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 4365d8e..9c6c307 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx
@@ -10,6 +10,7 @@ import { apiCreateCalendar, apiGetDivisionMember } from "@/lib/api";
 import { setFormCreateCalendar } from "@/lib/calendarCreate";
 import { setUpdateCalendar } from "@/lib/calendarUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -24,6 +25,7 @@ type Props = {
 }
 
 export default function CreateCalendarAddMember() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props[]>([])
@@ -90,7 +92,7 @@ export default function CreateCalendarAddMember() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -164,7 +166,7 @@ export default function CreateCalendarAddMember() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
diff --git a/app/(application)/division/[id]/(fitur-division)/calendar/create.tsx b/app/(application)/division/[id]/(fitur-division)/calendar/create.tsx
index c6f1394..fe545d4 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/create.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/create.tsx
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { setFormCreateCalendar } from "@/lib/calendarCreate";
 import { stringToDateTime } from "@/lib/fun_stringToDate";
 import { useHeaderHeight } from '@react-navigation/elements';
+import { useTheme } from "@/providers/ThemeProvider";
 import { Stack, router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import {
@@ -21,6 +22,7 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CalendarDivisionCreate() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [choose, setChoose] = useState({ val: "", label: "" })
    const [isSelect, setSelect] = useState(false)
@@ -126,7 +128,7 @@ export default function CalendarDivisionCreate() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -144,7 +146,7 @@ export default function CalendarDivisionCreate() {
                //       disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""}
                //    />
                // ),
-               header:()=>(
+               header: () => (
                   <AppHeader
                      title="Tambah Acara"
                      showBack={true}
@@ -173,7 +175,7 @@ export default function CalendarDivisionCreate() {
                      type="default"
                      placeholder="Nama Acara"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={data.title}
                      onChange={(val) => validationForm("title", val)}
                      error={error.title}
@@ -219,12 +221,12 @@ export default function CalendarDivisionCreate() {
                      label="Link Meet"
                      type="default"
                      placeholder="Link Meet"
-                     bg="white"
+                     bg={colors.card}
                      value={data.linkMeet}
                      onChange={(val) => validationForm("linkMeet", val)}
                   />
                   <SelectForm
-                     bg="white"
+                     bg={colors.card}
                      label="Ulangi Acara"
                      placeholder="Ulangi Acara"
                      value={choose.label}
@@ -236,7 +238,7 @@ export default function CalendarDivisionCreate() {
                      type="numeric"
                      placeholder="Jumlah Pengulangan"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={String(data.repeatValue)}
                      onChange={(val) => validationForm("repeatValue", val)}
                      error={error.repeatValue}
@@ -247,7 +249,7 @@ export default function CalendarDivisionCreate() {
                      label="Deskripsi"
                      type="default"
                      placeholder="Deskripsi"
-                     bg="white"
+                     bg={colors.card}
                      value={data.desc}
                      onChange={(val) => validationForm("desc", val)}
                      multiline
diff --git a/app/(application)/division/[id]/(fitur-division)/calendar/history.tsx b/app/(application)/division/[id]/(fitur-division)/calendar/history.tsx
index 9215379..875bf74 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/history.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/history.tsx
@@ -5,6 +5,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarHistory } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { FlatList, View, VirtualizedList } from "react-native";
@@ -15,6 +16,7 @@ type Props = {
    data: []
 }
 export default function CalendarHistory() {
+   const { colors, activeTheme } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const { token, decryptToken } = useAuthSession();
    const [data, setData] = useState<Props[]>([])
@@ -64,7 +66,7 @@ export default function CalendarHistory() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             <InputSearch onChange={(val) => setSearch(val)} />
          </View>
@@ -81,7 +83,7 @@ export default function CalendarHistory() {
                      getItem={getItem}
                      renderItem={({ item, index }: { item: Props, index: number }) => {
                         return (
-                           <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
+                           <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, activeTheme === 'dark' ? { backgroundColor: colors.card } : ColorsStatus.lightGreen, Styles.p10, Styles.round10, { borderBottomWidth: 1, borderColor: colors.background }]}>
                               <View style={[Styles.mr10, Styles.ph05]}>
                                  <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
                                  <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
diff --git a/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx b/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
index 7d16ea1..a8a194b 100644
--- a/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
@@ -7,6 +7,7 @@ import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -34,6 +35,7 @@ type Props = {
 };
 
 export default function CalendarDivision() {
+   const { colors, activeTheme } = useTheme();
    const [selected, setSelected] = useState<any>(new Date())
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
@@ -117,15 +119,15 @@ export default function CalendarDivision() {
          );
       },
       IconNext: <Pressable onPress={() => !loadingBtn ? setMonth(month + 1) : null}>
-         <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : 'black'} />
+         <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : colors.text} />
       </Pressable>,
       IconPrev: <Pressable onPress={() => !loadingBtn ? setMonth(month - 1) : null}>
-         <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : 'black'} />
+         <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : colors.text} />
       </Pressable>,
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,7 +160,7 @@ export default function CalendarDivision() {
             style={[Styles.h100]}
          >
             <View style={[Styles.p15]}>
-               <View style={[Styles.wrapPaper, Styles.p10]}>
+               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <Datepicker
                      components={components}
                      mode="single"
@@ -167,19 +169,19 @@ export default function CalendarDivision() {
                      onMonthChange={(month) => setMonth(month)}
                      styles={{
                         selected: Styles.selectedDate,
-                        month_label: Styles.cBlack,
-                        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_label: { color: colors.text },
+                        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>
                <View style={[Styles.mb15, Styles.mt15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         loading ?
                            <>
diff --git a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/edit.tsx b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/edit.tsx
index 15766ac..444c4bc 100644
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/edit.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/edit.tsx
@@ -11,6 +11,7 @@ import Styles from "@/constants/Styles";
 import { apiEditDiscussion, apiGetDiscussionOne } from "@/lib/api";
 import { setUpdateDiscussion } from "@/lib/discussionUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -20,6 +21,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function DiscussionDivisionEdit() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const { token, decryptToken } = useAuthSession();
    const [data, setData] = useState("");
@@ -127,7 +129,7 @@ export default function DiscussionDivisionEdit() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -177,20 +179,21 @@ export default function DiscussionDivisionEdit() {
                   value={data}
                   onChange={setData}
                   multiline
+                  bg={colors.card}
                />
 
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                {
                   (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10, { borderColor: colors.background, backgroundColor: colors.card }]}>
                      <Text style={[Styles.textDefaultSemiBold]}>File</Text>
                      {
                         dataFile.filter((val) => !val.delete).map((item, index) => (
                            <BorderBottomItem
                               key={index}
                               borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name + '.' + item.extension}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
@@ -202,7 +205,7 @@ export default function DiscussionDivisionEdit() {
                            <BorderBottomItem
                               key={index}
                               borderType={fileForm.length > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
@@ -218,7 +221,7 @@ export default function DiscussionDivisionEdit() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
                />
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 6c235c2..a795b09 100644
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
@@ -25,6 +25,7 @@ import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import { ref } from "@react-native-firebase/database";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -64,6 +65,7 @@ type PropsFile = {
 }
 
 export default function DiscussionDetail() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const [data, setData] = useState<Props>();
    const [dataComment, setDataComment] = useState<PropsComment[]>([]);
@@ -306,7 +308,7 @@ export default function DiscussionDetail() {
                )
             }}
          />
-         <View style={{ flex: 1 }}>
+         <View style={{ flex: 1, backgroundColor: colors.background }}>
             <ScrollView
                refreshControl={
                   <RefreshControl
@@ -410,7 +412,7 @@ export default function DiscussionDetail() {
                   style={[
                      Styles.contentItemCenter,
                      Styles.w100,
-                     { backgroundColor: "#f4f4f4" },
+                     { backgroundColor: colors.background },
                      viewEdit && Styles.borderTop
                   ]}
                >
@@ -419,15 +421,15 @@ export default function DiscussionDetail() {
                         <>
                            <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
                               <View style={[Styles.rowItemsCenter]}>
-                                 <Feather name="edit-3" color="black" size={22} style={[Styles.mh05]} />
+                                 <Feather name="edit-3" color={colors.text} size={22} style={[Styles.mh05]} />
                                  <Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text>
                               </View>
                               <Pressable onPress={() => handleViewEditKomentar()}>
-                                 <MaterialIcons name="close" color="black" size={22} />
+                                 <MaterialIcons name="close" color={colors.text} size={22} />
                               </Pressable>
                            </View>
                            <InputForm
-                              bg="white"
+                              bg={colors.card}
                               type="default"
                               round
                               multiline
@@ -474,7 +476,7 @@ export default function DiscussionDetail() {
                            isMemberDivision)
                            ?
                            <InputForm
-                              bg="white"
+                              bg={colors.card}
                               type="default"
                               round
                               multiline
@@ -531,12 +533,12 @@ export default function DiscussionDetail() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => { handleViewEditKomentar() }}
                />
                <MenuItemRow
-                  icon={<MaterialIcons name="delete" color="black" size={25} />}
+                  icon={<MaterialIcons name="delete" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
                      AlertKonfirmasi({
diff --git a/app/(application)/division/[id]/(fitur-division)/discussion/create.tsx b/app/(application)/division/[id]/(fitur-division)/discussion/create.tsx
index 389f790..24638a4 100644
--- a/app/(application)/division/[id]/(fitur-division)/discussion/create.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/create.tsx
@@ -11,6 +11,7 @@ import Styles from "@/constants/Styles"
 import { apiCreateDiscussion } from "@/lib/api"
 import { setUpdateDiscussion } from "@/lib/discussionUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
 import * as DocumentPicker from "expo-document-picker"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -21,6 +22,7 @@ import { useDispatch, useSelector } from "react-redux"
 
 
 export default function CreateDiscussionDivision() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [desc, setDesc] = useState('')
    const { token, decryptToken } = useAuthSession()
@@ -88,7 +90,7 @@ export default function CreateDiscussionDivision() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -127,19 +129,20 @@ export default function CreateDiscussionDivision() {
                   required
                   onChange={setDesc}
                   multiline
+                  bg={colors.card}
                />
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                {
                   fileForm.length > 0
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10, { borderColor: colors.background, backgroundColor: colors.card }]}>
                      <Text style={[Styles.textDefaultSemiBold]}>File</Text>
                      {
                         fileForm.map((item, index) => (
                            <BorderBottomItem
                               key={index}
                               borderType={fileForm.length > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                               title={item.name}
                               titleWeight="normal"
                               onPress={() => { setIndexDelFile(index); setModalFile(true) }}
@@ -154,7 +157,7 @@ export default function CreateDiscussionDivision() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />
diff --git a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx b/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
index 35c32c8..777a0a0 100644
--- a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
@@ -9,6 +9,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -30,6 +31,7 @@ type Props = {
 
 
 export default function DiscussionDivision() {
+   const { colors } = useTheme();
    const { id, active } = useLocalSearchParams<{ id: string, active?: string }>()
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
@@ -128,24 +130,24 @@ export default function DiscussionDivision() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          {
             ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
             <View>
-               <View style={[Styles.wrapBtnTab]}>
+               <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
                      value="true"
                      onPress={() => { setStatus("true") }}
                      label="Aktif"
-                     icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
+                     icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
                      n={2} />
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
                      value="false"
                      onPress={() => { setStatus("false") }}
                      label="Arsip"
-                     icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.text : 'white'} size={20} />}
                      n={2} />
                </View>
                <InputSearch onChange={setSearch} />
diff --git a/app/(application)/division/[id]/(fitur-division)/document/index.tsx b/app/(application)/division/[id]/(fitur-division)/document/index.tsx
index 27a02f6..4de1b7b 100644
--- a/app/(application)/division/[id]/(fitur-division)/document/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/document/index.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/lib/api";
 import { setUpdateDokumen } from "@/lib/dokumenUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    MaterialCommunityIcons,
@@ -66,6 +67,7 @@ type PropsPath = {
 };
 
 export default function DocumentDivision() {
+   const { colors } = useTheme();
    const [loadingRename, setLoadingRename] = useState(false)
    const [isShare, setShare] = useState(false)
    const { token, decryptToken } = useAuthSession()
@@ -334,7 +336,7 @@ export default function DocumentDivision() {
    }, [path]);
 
    return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () =>
@@ -427,9 +429,9 @@ export default function DocumentDivision() {
                            }}
                         >
                            {item.id != "home" && (
-                              <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color="black" />
+                              <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color={colors.text} />
                            )}
-                           <Text> {item.name} </Text>
+                           <Text style={{ color: colors.text }}> {item.name} </Text>
                         </Pressable>
                      ))
                   }
diff --git a/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-file.tsx b/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-file.tsx
index f29ebf4..22f043b 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-file.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/add-file.tsx
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiAddFileTask, apiCheckFileTask } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -23,6 +24,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionAddFile() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const [fileForm, setFileForm] = useState<any[]>([]);
    const [listFile, setListFile] = useState<any[]>([]);
@@ -127,7 +129,7 @@ export default function TaskDivisionAddFile() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -169,13 +171,13 @@ export default function TaskDivisionAddFile() {
                   listFile.length > 0 && (
                      <View style={[Styles.mb15]}>
                         <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper]}>
+                        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                            {
                               listFile.map((item, index) => (
                                  <BorderBottomItem
                                     key={index}
                                     borderType="all"
-                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                                     title={item}
                                     titleWeight="normal"
                                     onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -197,7 +199,7 @@ export default function TaskDivisionAddFile() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />
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 c5ab805..09bf071 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
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiAddMemberTask, apiGetDivisionMember, apiGetTaskOne } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberTask() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -127,7 +129,7 @@ export default function AddMemberTask() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -177,7 +179,7 @@ export default function AddMemberTask() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
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 8b88b07..7498b06 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
@@ -9,6 +9,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -25,6 +26,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionAddTask() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const dispatch = useDispatch();
    const update = useSelector((state: any) => state.taskUpdate);
@@ -138,7 +140,7 @@ export default function TaskDivisionAddTask() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -183,7 +185,7 @@ export default function TaskDivisionAddTask() {
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
                         mode="range"
                         startDate={range.startDate}
@@ -193,13 +195,13 @@ export default function TaskDivisionAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
-                           month_label: Styles.cBlack,
-                           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_label: { color: colors.text },
+                           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>
@@ -209,7 +211,7 @@ export default function TaskDivisionAddTask() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Mulai <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
@@ -217,7 +219,7 @@ export default function TaskDivisionAddTask() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Berakhir <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
@@ -238,7 +240,7 @@ export default function TaskDivisionAddTask() {
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
diff --git a/app/(application)/division/[id]/(fitur-division)/task/[detail]/cancel.tsx b/app/(application)/division/[id]/(fitur-division)/task/[detail]/cancel.tsx
index ac72588..d9d0254 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/cancel.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/cancel.tsx
@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiCancelTask } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionCancel() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const { token, decryptToken } = useAuthSession();
    const dispatch = useDispatch();
@@ -69,7 +71,7 @@ export default function TaskDivisionCancel() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -115,7 +117,7 @@ export default function TaskDivisionCancel() {
                   type="default"
                   placeholder="Alasan Pembatalan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   error={error}
                   errorText="Alasan pembatalan harus diisi"
                   onChange={(val) => onValidation(val)}
diff --git a/app/(application)/division/[id]/(fitur-division)/task/[detail]/edit.tsx b/app/(application)/division/[id]/(fitur-division)/task/[detail]/edit.tsx
index e67416b..eaf71b6 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/edit.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/edit.tsx
@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiEditTask, apiGetTaskOne } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionEdit() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const { token, decryptToken } = useAuthSession();
    const [judul, setJudul] = useState("");
@@ -87,7 +89,7 @@ export default function TaskDivisionEdit() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -128,7 +130,7 @@ export default function TaskDivisionEdit() {
                   type="default"
                   placeholder="Judul Kegiatan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={judul}
                   onChange={(val) => { onValidation(val) }}
                   error={error}
diff --git a/app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx b/app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx
index 4ed956f..8eecb3c 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx
@@ -10,6 +10,7 @@ import SectionTanggalTugasTask from "@/components/task/sectionTanggalTugasTask";
 import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature, apiGetTaskOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -25,6 +26,7 @@ type Props = {
 }
 
 export default function DetailTaskDivision() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
    const { token, decryptToken } = useAuthSession()
    const [data, setData] = useState<Props>()
@@ -97,7 +99,7 @@ export default function DetailTaskDivision() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
diff --git a/app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx b/app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx
index ba00bd1..097d6f1 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx
@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiGetTaskOne, apiReportTask } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionReport() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const { token, decryptToken } = useAuthSession();
    const [laporan, setLaporan] = useState("");
@@ -87,7 +89,7 @@ export default function TaskDivisionReport() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -128,7 +130,7 @@ export default function TaskDivisionReport() {
                   type="default"
                   placeholder="Laporan Kegiatan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={laporan}
                   onChange={(val) => { onValidation(val) }}
                   error={error}
diff --git a/app/(application)/division/[id]/(fitur-division)/task/create.tsx b/app/(application)/division/[id]/(fitur-division)/task/create.tsx
index 698918b..3ecec35 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/create.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/create.tsx
@@ -16,6 +16,7 @@ import { setMemberChoose } from "@/lib/memberChoose";
 import { setTaskCreate } from "@/lib/taskCreate";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -26,6 +27,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 
 export default function CreateTaskDivision() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams();
    const { token, decryptToken } = useAuthSession();
    const dispatch = useDispatch();
@@ -113,7 +115,7 @@ export default function CreateTaskDivision() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -161,6 +163,7 @@ export default function CreateTaskDivision() {
                      val == "" || val == "null" ? setError(true) : setError(false);
                   }}
                   error={error}
+                  bg={colors.card}
                   errorText="Judul Tugas tidak boleh kosong"
                />
                <ButtonSelect value="Tambah Tanggal & Tugas" onPress={() => { router.push(`/division/${id}/task/create/task`); }} />
@@ -171,13 +174,13 @@ export default function CreateTaskDivision() {
                   fileForm.length > 0 && (
                      <View style={[Styles.mb15]}>
                         <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper]}>
+                        <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="black" />}
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                                     title={item.name}
                                     titleWeight="normal"
                                     onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -195,7 +198,7 @@ export default function CreateTaskDivision() {
                         <Text>Total {entitiesMember.length} Anggota</Text>
                      </View>
 
-                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                     <View style={[Styles.borderAll, Styles.round10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                         {entitiesMember.map(
                            (item: { img: any; name: any }, index: any) => {
                               return (
@@ -223,7 +226,7 @@ export default function CreateTaskDivision() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />
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 2c4ac7b..3890c20 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/create/member.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/create/member.tsx
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiGetDivisionMember } from "@/lib/api";
 import { setMemberChoose } from "@/lib/memberChoose";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberCreateTask() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string, detail: string }>()
@@ -97,7 +99,7 @@ export default function AddMemberCreateTask() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -143,7 +145,7 @@ export default function AddMemberCreateTask() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
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 de290dd..8c857b0 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
@@ -1,5 +1,6 @@
 import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { useTheme } from "@/providers/ThemeProvider";
 import { InputForm } from "@/components/inputForm";
 import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
@@ -27,6 +28,7 @@ import DateTimePicker, {
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateTaskAddTugas() {
+   const { colors } = useTheme();
    const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const [disable, setDisable] = useState(true);
@@ -118,7 +120,7 @@ export default function CreateTaskAddTugas() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,7 +160,7 @@ export default function CreateTaskAddTugas() {
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
                         mode="range"
                         startDate={range.startDate}
@@ -168,13 +170,13 @@ export default function CreateTaskAddTugas() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
-                           month_label: Styles.cBlack,
-                           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_label: { color: colors.text },
+                           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>
@@ -184,7 +186,7 @@ export default function CreateTaskAddTugas() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Mulai <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
@@ -192,7 +194,7 @@ export default function CreateTaskAddTugas() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Berakhir <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
@@ -213,7 +215,7 @@ export default function CreateTaskAddTugas() {
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
diff --git a/app/(application)/division/[id]/(fitur-division)/task/index.tsx b/app/(application)/division/[id]/(fitur-division)/task/index.tsx
index 6822cb9..700011d 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/index.tsx
@@ -11,6 +11,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetTask } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    Ionicons,
@@ -31,6 +32,7 @@ type Props = {
 };
 
 export default function ListTask() {
+   const { colors } = useTheme()
    const { id, status, year } = useLocalSearchParams<{ id: string; status: string; year: string }>()
    const [isList, setList] = useState(false)
    const { token, decryptToken } = useAuthSession()
@@ -110,7 +112,7 @@ export default function ListTask() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
                <ButtonTab
@@ -121,7 +123,7 @@ export default function ListTask() {
                   icon={
                      <MaterialCommunityIcons
                         name="clock-alert-outline"
-                        color={statusFix == "0" ? "white" : "black"}
+                        color={statusFix == "0" ? "white" : colors.text}
                         size={20}
                      />
                   }
@@ -135,7 +137,7 @@ export default function ListTask() {
                   icon={
                      <MaterialCommunityIcons
                         name="progress-check"
-                        color={statusFix == "1" ? "white" : "black"}
+                        color={statusFix == "1" ? "white" : colors.text}
                         size={20}
                      />
                   }
@@ -149,7 +151,7 @@ export default function ListTask() {
                   icon={
                      <Ionicons
                         name="checkmark-done-circle-outline"
-                        color={statusFix == "2" ? "white" : "black"}
+                        color={statusFix == "2" ? "white" : colors.text}
                         size={20}
                      />
                   }
@@ -163,7 +165,7 @@ export default function ListTask() {
                   icon={
                      <AntDesign
                         name="closecircleo"
-                        color={statusFix == "3" ? "white" : "black"}
+                        color={statusFix == "3" ? "white" : colors.text}
                         size={20}
                      />
                   }
@@ -179,7 +181,7 @@ export default function ListTask() {
                >
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
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 af675b2..a1c0f50 100644
--- a/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
@@ -4,6 +4,7 @@ import { InputForm } from "@/components/inputForm";
 import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api";
 import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
@@ -28,6 +29,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function UpdateProjectTaskDivision() {
+   const { colors } = useTheme();
    const headerHeight = useHeaderHeight();
    const { detail } = useLocalSearchParams<{ detail: string }>();
    const dispatch = useDispatch();
@@ -186,7 +188,7 @@ export default function UpdateProjectTaskDivision() {
    }, [range])
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -231,7 +233,7 @@ export default function UpdateProjectTaskDivision() {
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {!loading && (
                         <DateTimePicker
                            mode="range"
@@ -244,13 +246,13 @@ export default function UpdateProjectTaskDivision() {
                               selected: Styles.selectedDate,
                               selected_label: Styles.cWhite,
                               range_fill: Styles.selectRangeDate,
-                              month_label: Styles.cBlack,
-                              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_label: { color: colors.text },
+                              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 },
                            }}
                         />
                      )}
@@ -261,7 +263,7 @@ export default function UpdateProjectTaskDivision() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Mulai <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
@@ -269,7 +271,7 @@ export default function UpdateProjectTaskDivision() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Berakhir <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
@@ -292,7 +294,7 @@ export default function UpdateProjectTaskDivision() {
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
diff --git a/app/(application)/division/[id]/add-member.tsx b/app/(application)/division/[id]/add-member.tsx
index 2fed69e..5b72741 100644
--- a/app/(application)/division/[id]/add-member.tsx
+++ b/app/(application)/division/[id]/add-member.tsx
@@ -8,6 +8,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiAddMemberDivision, apiGetDivisionOneDetail, apiGetUser } from "@/lib/api";
 import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberDivision() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [dataOld, setDataOld] = useState<Props[]>([])
@@ -130,7 +132,7 @@ export default function AddMemberDivision() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => handleSearch(val)} value={search} />
 
             {
@@ -180,7 +182,7 @@ export default function AddMemberDivision() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
diff --git a/app/(application)/division/[id]/edit.tsx b/app/(application)/division/[id]/edit.tsx
index 02e425a..478d1e3 100644
--- a/app/(application)/division/[id]/edit.tsx
+++ b/app/(application)/division/[id]/edit.tsx
@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiEditDivision, apiGetDivisionOneDetail } from "@/lib/api";
 import { setUpdateDivision } from "@/lib/divisionUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function EditDivision() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.divisionUpdate)
    const { token, decryptToken } = useAuthSession();
@@ -63,7 +65,7 @@ export default function EditDivision() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -98,7 +100,7 @@ export default function EditDivision() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputForm
                   label="Nama Divisi"
diff --git a/app/(application)/division/[id]/index.tsx b/app/(application)/division/[id]/index.tsx
index 91f33b0..57d2bc2 100644
--- a/app/(application)/division/[id]/index.tsx
+++ b/app/(application)/division/[id]/index.tsx
@@ -8,6 +8,7 @@ import CaraouselHome from "@/components/home/carouselHome"
 import Styles from "@/constants/Styles"
 import { apiGetDivisionOneDetail } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
 import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
@@ -22,6 +23,7 @@ type Props = {
 }
 
 export default function DetailDivisionFitur() {
+   const { colors } = useTheme()
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props>()
@@ -54,7 +56,7 @@ export default function DetailDivisionFitur() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
diff --git a/app/(application)/division/[id]/info.tsx b/app/(application)/division/[id]/info.tsx
index 4ccd6b3..3b509ed 100644
--- a/app/(application)/division/[id]/info.tsx
+++ b/app/(application)/division/[id]/info.tsx
@@ -14,6 +14,7 @@ import Styles from "@/constants/Styles"
 import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiGetDivisionOneFeature, apiUpdateStatusAdminDivision } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
 import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
+import { useTheme } from "@/providers/ThemeProvider"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
 import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
@@ -39,6 +40,7 @@ type PropsMember = {
 }
 
 export default function InformationDivision() {
+   const { colors } = useTheme()
    const [refreshing, setRefreshing] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
    const { id } = useLocalSearchParams<{ id: string }>()
@@ -161,7 +163,7 @@ export default function InformationDivision() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -187,7 +189,7 @@ export default function InformationDivision() {
                   onRefresh={handleRefresh}
                />
             }
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                {
@@ -197,7 +199,7 @@ export default function InformationDivision() {
                }
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {loading ?
                         arrSkeleton.map((item, index) => {
                            return (
@@ -211,7 +213,7 @@ export default function InformationDivision() {
                </View>
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefault, Styles.mv05]}>{dataMember.length} Anggota</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
                         dataDetail?.isActive && (
@@ -220,7 +222,7 @@ export default function InformationDivision() {
                               borderType="none"
                               icon={
                                  <View style={[Styles.iconContent, ColorsStatus.gray]}>
-                                    <Feather name="user-plus" size={25} color={'#384288'} />
+                                    <Feather name="user-plus" size={25} color={colors.primary} />
                                  </View>
                               }
                               title="Tambah Anggota"
@@ -261,7 +263,7 @@ export default function InformationDivision() {
                <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberAdmin() }}>
                   <View style={[Styles.rowItemsCenter]}>
                      <View style={[Styles.iconContent, ColorsStatus.info]}>
-                        <MaterialIcons name="verified-user" size={25} color='#19345E' />
+                        <MaterialIcons name="verified-user" size={25} color={colors.primary} />
                      </View>
                      <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
                         <View style={[Styles.ml10]}>
@@ -274,7 +276,7 @@ export default function InformationDivision() {
                <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberOut() }}>
                   <View style={[Styles.rowItemsCenter]}>
                      <View style={[Styles.iconContent, ColorsStatus.info]}>
-                        <MaterialCommunityIcons name="close-circle" size={25} color='#19345E' />
+                        <MaterialCommunityIcons name="close-circle" size={25} color={colors.primary} />
                      </View>
                      <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
                         <View style={[Styles.ml10]}>
diff --git a/app/(application)/division/[id]/report.tsx b/app/(application)/division/[id]/report.tsx
index 18e76bd..cadbdf0 100644
--- a/app/(application)/division/[id]/report.tsx
+++ b/app/(application)/division/[id]/report.tsx
@@ -6,6 +6,7 @@ import { InputDate } from "@/components/inputDate"
 import Styles from "@/constants/Styles"
 import { apiGetDivisionReport } from "@/lib/api"
 import { stringToDate } from "@/lib/fun_stringToDate"
+import { useTheme } from "@/providers/ThemeProvider"
 import { useAuthSession } from "@/providers/AuthProvider"
 import dayjs from "dayjs"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -14,6 +15,7 @@ import { SafeAreaView, ScrollView, View } from "react-native"
 import Toast from "react-native-toast-message"
 
 export default function ReportDivision() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const { token, decryptToken } = useAuthSession();
    const [showReport, setShowReport] = useState(false);
@@ -104,7 +106,7 @@ export default function ReportDivision() {
    }, [showReport]);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -119,7 +121,7 @@ export default function ReportDivision() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputDate
                   onChange={(val) => validationForm("date", val)}
diff --git a/app/(application)/division/create.tsx b/app/(application)/division/create.tsx
index 7af0eb8..e8ec765 100644
--- a/app/(application)/division/create.tsx
+++ b/app/(application)/division/create.tsx
@@ -8,6 +8,7 @@ import Styles from "@/constants/Styles";
 import { apiCheckDivisionName } from "@/lib/api";
 import { setFormCreateDivision } from "@/lib/divisionCreate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -15,6 +16,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateDivision() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const [isSelect, setSelect] = useState(false)
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" })
@@ -99,7 +101,7 @@ export default function CreateDivision() {
    }, []);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -131,7 +133,7 @@ export default function CreateDivision() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                {
diff --git a/app/(application)/division/create/add-admin-division.tsx b/app/(application)/division/create/add-admin-division.tsx
index be97d92..629fadc 100644
--- a/app/(application)/division/create/add-admin-division.tsx
+++ b/app/(application)/division/create/add-admin-division.tsx
@@ -8,6 +8,7 @@ import { apiCreateDivision } from "@/lib/api";
 import { setFormCreateDivision } from "@/lib/divisionCreate";
 import { setUpdateDivision } from "@/lib/divisionUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { StackActions, useNavigation } from "@react-navigation/native";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function CreateDivisionAddAdmin() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const navigation = useNavigation()
    const { id } = useLocalSearchParams<{ id: string }>()
@@ -104,7 +106,7 @@ export default function CreateDivisionAddAdmin() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <ScrollView>
                {
                   data.length > 0 ?
@@ -128,7 +130,7 @@ export default function CreateDivisionAddAdmin() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i == item.idUser) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
diff --git a/app/(application)/division/create/add-member.tsx b/app/(application)/division/create/add-member.tsx
index 8fa7e64..c9d99c8 100644
--- a/app/(application)/division/create/add-member.tsx
+++ b/app/(application)/division/create/add-member.tsx
@@ -10,6 +10,7 @@ import { apiGetUser } from "@/lib/api";
 import { setFormCreateDivision } from "@/lib/divisionCreate";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Pressable, ScrollView, View } from "react-native";
@@ -22,6 +23,7 @@ type Props = {
 }
 
 export default function CreateDivisionAddMember() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [dataOld, setDataOld] = useState<Props[]>([])
@@ -84,7 +86,7 @@ export default function CreateDivisionAddMember() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -134,7 +136,7 @@ export default function CreateDivisionAddMember() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
diff --git a/app/(application)/division/index.tsx b/app/(application)/division/index.tsx
index 8bb68b9..c7c9a37 100644
--- a/app/(application)/division/index.tsx
+++ b/app/(application)/division/index.tsx
@@ -10,6 +10,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDivision } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    Feather,
@@ -38,9 +39,11 @@ export default function ListDivision() {
    const [isList, setList] = useState(false);
    const entityUser = useSelector((state: any) => state.user)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [search, setSearch] = useState("")
    const [nameGroup, setNameGroup] = useState("")
    const [data, setData] = useState<Props[]>([])
+   // ... state same ...
    const update = useSelector((state: any) => state.divisionUpdate)
    const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
    const [loading, setLoading] = useState(false)
@@ -114,11 +117,11 @@ export default function ListDivision() {
 
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             {
                entityUser.role != "user" && entityUser.role != "coadmin" ?
-                  <View style={[Styles.wrapBtnTab]}>
+                  <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                      <ButtonTab
                         active={status == "false" ? "false" : "true"}
                         value="true"
@@ -127,7 +130,7 @@ export default function ListDivision() {
                         icon={
                            <Feather
                               name="check-circle"
-                              color={status == "false" ? "black" : "white"}
+                              color={status == "false" ? colors.text : "white"}
                               size={20}
                            />
                         }
@@ -141,7 +144,7 @@ export default function ListDivision() {
                         icon={
                            <AntDesign
                               name="closecircleo"
-                              color={status == "true" ? "black" : "white"}
+                              color={status == "true" ? colors.text : "white"}
                               size={20}
                            />
                         }
@@ -149,7 +152,7 @@ export default function ListDivision() {
                      />
                   </View>
                   :
-                  <View style={[Styles.wrapBtnTab]}>
+                  <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                      <ButtonTab
                         active={category == "semua" ? "false" : "true"}
                         value="true"
@@ -158,7 +161,7 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-outline"
-                              color={category == "semua" ? "black" : "white"}
+                              color={category == "semua" ? colors.text : "white"}
                               size={20}
                            />
                         }
@@ -172,7 +175,7 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-stacked-outline"
-                              color={category == "semua" ? "white" : "black"}
+                              color={category == "semua" ? "white" : colors.text}
                               size={20}
                            />
                         }
@@ -190,7 +193,7 @@ export default function ListDivision() {
                >
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
@@ -232,9 +235,10 @@ export default function ListDivision() {
                                        key={index}
                                        onPress={() => { router.push(`/division/${item.id}`) }}
                                        borderType="bottom"
+                                       bgColor={colors.card}
                                        icon={
                                           <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                             <MaterialIcons name="group" size={25} color={"#384288"} />
+                                             <MaterialIcons name="group" size={25} color={colors.primary} />
                                           </View>
                                        }
                                        title={item.name}
diff --git a/app/(application)/division/report.tsx b/app/(application)/division/report.tsx
index 3b2b26a..61399bd 100644
--- a/app/(application)/division/report.tsx
+++ b/app/(application)/division/report.tsx
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiGetDivisionReport } from "@/lib/api";
 import { stringToDate } from "@/lib/fun_stringToDate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import dayjs from "dayjs";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
@@ -16,6 +17,7 @@ import { SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function Report() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
    const [showReport, setShowReport] = useState(false);
@@ -122,7 +124,7 @@ export default function Report() {
    }, [showReport]);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -144,11 +146,11 @@ export default function Report() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15, Styles.mb50]}>
                <SelectForm
-                  bg="white"
+                  bg={colors.card}
                   label="Lembaga Desa"
                   placeholder="Pilih Lembaga Desa"
                   value={chooseGroup.label}
diff --git a/app/(application)/edit-profile.tsx b/app/(application)/edit-profile.tsx
index b371437..6b32dda 100644
--- a/app/(application)/edit-profile.tsx
+++ b/app/(application)/edit-profile.tsx
@@ -10,6 +10,7 @@ import { apiEditProfile, apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
 import { validateName } from "@/lib/fun_validateName";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useHeaderHeight } from "@react-navigation/elements";
 import * as ImagePicker from "expo-image-picker";
@@ -43,9 +44,11 @@ type Props = {
 export default function EditProfile() {
    const headerHeight = useHeaderHeight()
    const dispatch = useDispatch()
+   const { colors } = useTheme();
    const entities = useSelector((state: any) => state.entities)
    const { token, decryptToken } = useAuthSession()
    const [errorImg, setErrorImg] = useState(false)
+   // ... keeping state same ...
    const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined);
    const [choosePosition, setChoosePosition] = useState({ val: entities.idPosition, label: entities.position });
    const [chooseGender, setChooseGender] = useState({ val: entities.gender, label: entities.gender == "F" ? 'Perempuan' : 'Laki-laki' });
@@ -213,7 +216,7 @@ export default function EditProfile() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                headerLeft: () => (
diff --git a/app/(application)/feature.tsx b/app/(application)/feature.tsx
index 9813bdb..2ffd15a 100644
--- a/app/(application)/feature.tsx
+++ b/app/(application)/feature.tsx
@@ -1,6 +1,7 @@
 import AppHeader from "@/components/AppHeader";
 import { ButtonFiturMenu } from "@/components/buttonFiturMenu";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Entypo, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { SafeAreaView, View } from "react-native";
@@ -8,9 +9,10 @@ import { useSelector } from "react-redux";
 
 export default function Feature() {
    const entityUser = useSelector((state: any) => state.user)
+   const { colors } = useTheme();
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                headerTitle: 'Fitur',
@@ -22,32 +24,26 @@ export default function Feature() {
          />
          <View style={[Styles.p15]}>
             <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
-               <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
-               <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
-               <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
-               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
+               <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color={colors.text} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
+               <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color={colors.text} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
+               <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color={colors.text} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
+               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color={colors.text} />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
             </View>
             <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}>
-               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member') }} />
-               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position') }} />
+               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color={colors.text} />} text="Anggota" onPress={() => { router.push('/member') }} />
+               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color={colors.text} />} text="Jabatan" onPress={() => { router.push('/position') }} />
                {
-                  entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
+                  entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color={colors.text} />} text="Banner" onPress={() => { router.push('/banner') }} />
                }
                {
                   (entityUser.role == "supadmin" || entityUser.role == "developer") &&
                   <>
-                     <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
-                     {/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} /> */}
-                     <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
+                     <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color={colors.text} />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
+                     {/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color={colors.text} />} text="Tema" onPress={() => { }} /> */}
+                     <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color={colors.text} />} text="Banner" onPress={() => { router.push('/banner') }} />
                   </>
                }
             </View>
-            {/* {
-               (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-               <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
-                  <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
-               </View>
-            } */}
          </View>
       </SafeAreaView>
    )
diff --git a/app/(application)/group/index.tsx b/app/(application)/group/index.tsx
index 87a563a..f94d6b1 100644
--- a/app/(application)/group/index.tsx
+++ b/app/(application)/group/index.tsx
@@ -13,6 +13,7 @@ import Styles from "@/constants/Styles";
 import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
 import { setUpdateGroup } from "@/lib/groupSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useEffect, useState } from "react";
 import { RefreshControl, View, VirtualizedList } from "react-native";
@@ -27,6 +28,7 @@ type Props = {
 
 export default function Index() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [isModal, setModal] = useState(false)
    const [isVisibleEdit, setVisibleEdit] = useState(false)
    const [data, setData] = useState<Props[]>([])
@@ -127,9 +129,9 @@ export default function Index() {
 
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View style={[Styles.mb10]}>
-            <View style={[Styles.wrapBtnTab]}>
+            <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
@@ -187,6 +189,7 @@ export default function Index() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.primary}
                            />
                         }
                      />
@@ -198,7 +201,7 @@ export default function Index() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={titleChoose}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
                   title={activeChoose ? "Non Aktifkan" : "Aktifkan"}
                   onPress={() => {
                      setModal(false)
@@ -210,7 +213,7 @@ export default function Index() {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setModal(false)
@@ -232,6 +235,7 @@ export default function Index() {
                      label="Lembaga Desa"
                      value={titleChoose}
                      error={error.title}
+                     bg={colors.card}
                      errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter"
                      onChange={(val) => { validationForm(val, 'title') }} />
                </View>
diff --git a/app/(application)/home.tsx b/app/(application)/home.tsx
index 10cce08..785226c 100644
--- a/app/(application)/home.tsx
+++ b/app/(application)/home.tsx
@@ -12,6 +12,7 @@ import Styles from "@/constants/Styles";
 import { apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import { Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -23,6 +24,7 @@ export default function Home() {
    const entities = useSelector((state: any) => state.entities)
    const dispatch = useDispatch()
    const { token, decryptToken, signOut } = useAuthSession()
+   const { colors } = useTheme();
    const insets = useSafeAreaInsets()
    const [refreshing, setRefreshing] = useState(false)
 
@@ -47,13 +49,13 @@ export default function Home() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                title: 'Home',
                headerTitle: entities.village,
                header: () => (
-                  <View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: '#19345E', paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
+                  <View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: colors.primary, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
                      <Text style={Styles.textHeaderHome}>{entities.village}</Text>
                      <HeaderRightHome />
                   </View>
@@ -65,19 +67,21 @@ export default function Home() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.primary}
                />
             }
             showsVerticalScrollIndicator={false}
+            style={{ backgroundColor: colors.background }}
          >
-            <CaraouselHome refreshing={refreshing}/>
+            <CaraouselHome refreshing={refreshing} />
             <View style={[Styles.ph15, Styles.mb100]}>
                <FiturHome />
-               <ProjectHome refreshing={refreshing}/>
-               <DivisionHome refreshing={refreshing}/>
-               <ChartProgresHome refreshing={refreshing}/>
-               <ChartDokumenHome refreshing={refreshing}/>
-               <EventHome refreshing={refreshing}/>
-               <DisccussionHome refreshing={refreshing}/>
+               <ProjectHome refreshing={refreshing} />
+               <DivisionHome refreshing={refreshing} />
+               <ChartProgresHome refreshing={refreshing} />
+               <ChartDokumenHome refreshing={refreshing} />
+               <EventHome refreshing={refreshing} />
+               <DisccussionHome refreshing={refreshing} />
             </View>
          </ScrollView>
       </SafeAreaView>
diff --git a/app/(application)/member/[id].tsx b/app/(application)/member/[id].tsx
index 50dc13f..2844c89 100644
--- a/app/(application)/member/[id].tsx
+++ b/app/(application)/member/[id].tsx
@@ -10,6 +10,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
 import { valueRoleUser } from "@/constants/RoleUser";
 import Styles from "@/constants/Styles";
 import { apiGetProfile } from "@/lib/api";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -33,6 +34,7 @@ type Props = {
 
 export default function MemberDetail() {
    const { id } = useLocalSearchParams<{ id: string }>();
+   const { colors } = useTheme();
    const [data, setData] = useState<Props>()
    const [errorImg, setErrorImg] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
@@ -74,13 +76,11 @@ export default function MemberDetail() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Anggota',
                headerTitleAlign: 'center',
-               // headerRight: () => (entityUser.role != "user") && isEdit ? <HeaderRightMemberDetail active={data?.isActive} id={id} /> : <></>,
                header: () => (
                   <AppHeader title="Anggota"
                      showBack={true}
@@ -93,11 +93,12 @@ export default function MemberDetail() {
             }}
          />
          <ScrollView
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.text}
                />
             }
          >
@@ -122,7 +123,7 @@ export default function MemberDetail() {
             </View>
             <View style={[Styles.p15]}>
                <View style={[Styles.rowSpaceBetween]}>
-                  <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
+                  <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
                   <LabelStatus
                      size="small"
                      category={data?.isActive ? 'success' : 'error'}
diff --git a/app/(application)/member/create.tsx b/app/(application)/member/create.tsx
index 2a586d9..a76abd1 100644
--- a/app/(application)/member/create.tsx
+++ b/app/(application)/member/create.tsx
@@ -10,6 +10,7 @@ import { apiCreateUser } from "@/lib/api";
 import { validateName } from "@/lib/fun_validateName";
 import { setUpdateMember } from "@/lib/memberSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useHeaderHeight } from '@react-navigation/elements';
 import * as ImagePicker from "expo-image-picker";
@@ -32,6 +33,7 @@ export default function CreateMember() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.memberUpdate)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [valSelect, setValSelect] = useState<"group" | "position" | "role" | "gender">("group");
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
    const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
@@ -206,25 +208,11 @@ export default function CreateMember() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               // headerLeft: () => (
-               //    <ButtonBackHeader
-               //       onPress={() => {
-               //          router.back();
-               //       }}
-               //    />
-               // ),
                headerTitle: "Tambah Anggota",
                headerTitleAlign: "center",
-               // headerRight: () => (
-               //    <ButtonSaveHeader
-               //       disable={disableBtn || loading}
-               //       category="create"
-               //       onPress={() => { handleCreate() }}
-               //    />
-               // ),
                header: () => (
                   <AppHeader title="Anggota"
                      showBack={true}
@@ -241,7 +229,7 @@ export default function CreateMember() {
             }}
          />
          <KeyboardAvoidingView
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
@@ -271,6 +259,7 @@ export default function CreateMember() {
                            placeholder="Pilih Lembaga Desa"
                            value={chooseGroup.label}
                            required
+                           bg={colors.card}
                            onPress={() => {
                               setValChoose(chooseGroup.val);
                               setValSelect("group");
@@ -285,6 +274,7 @@ export default function CreateMember() {
                      placeholder="Pilih Jabatan"
                      value={choosePosition.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(choosePosition.val);
                         setValSelect("position");
@@ -298,6 +288,7 @@ export default function CreateMember() {
                      placeholder="Pilih Role"
                      value={chooseRole.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseRole.val);
                         setValSelect("role");
@@ -311,6 +302,7 @@ export default function CreateMember() {
                      type="numeric"
                      placeholder="NIK"
                      required
+                     bg={colors.card}
                      error={error.nik}
                      errorText="NIK Harus 16 Karakter"
                      onChange={val => {
@@ -322,6 +314,7 @@ export default function CreateMember() {
                      type="default"
                      placeholder="Nama"
                      required
+                     bg={colors.card}
                      error={error.name}
                      errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
                      onChange={val => {
@@ -333,6 +326,7 @@ export default function CreateMember() {
                      type="default"
                      placeholder="Email"
                      required
+                     bg={colors.card}
                      error={error.email}
                      errorText="Email tidak valid"
                      onChange={val => {
@@ -344,7 +338,8 @@ export default function CreateMember() {
                      type="numeric"
                      placeholder="8XX-XXX-XXX"
                      required
-                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02]}>+62</Text>}
+                     bg={colors.card}
+                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02, { color: colors.text }]}>+62</Text>}
                      error={error.phone}
                      errorText="Nomor Telepon tidak valid"
                      onChange={val => {
@@ -356,6 +351,7 @@ export default function CreateMember() {
                      placeholder="Pilih Jenis Kelamin"
                      value={chooseGender.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseGender.val);
                         setValSelect("gender");
diff --git a/app/(application)/member/edit/[id].tsx b/app/(application)/member/edit/[id].tsx
index 0fb0c07..c2795f4 100644
--- a/app/(application)/member/edit/[id].tsx
+++ b/app/(application)/member/edit/[id].tsx
@@ -10,6 +10,7 @@ import { apiEditUser, apiGetProfile } from "@/lib/api";
 import { validateName } from "@/lib/fun_validateName";
 import { setUpdateMember } from "@/lib/memberSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useHeaderHeight } from '@react-navigation/elements';
 import * as ImagePicker from "expo-image-picker";
@@ -47,6 +48,7 @@ export default function EditMember() {
    const update = useSelector((state: any) => state.memberUpdate)
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>();
+   const { colors } = useTheme();
    const [errorImg, setErrorImg] = useState(false)
    const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined);
    const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
@@ -236,27 +238,11 @@ export default function EditMember() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               // headerLeft: () => (
-               //    <ButtonBackHeader
-               //       onPress={() => {
-               //          router.back();
-               //       }}
-               //    />
-               // ),
                headerTitle: "Edit Anggota",
                headerTitleAlign: "center",
-               // headerRight: () => (
-               //    <ButtonSaveHeader
-               //       disable={disableBtn || loading}
-               //       category="update"
-               //       onPress={() => {
-               //          handleEdit()
-               //       }}
-               //    />
-               // ),
                header: () => (
                   <AppHeader
                      title="Edit Anggota"
@@ -277,7 +263,7 @@ export default function EditMember() {
          />
 
          <KeyboardAvoidingView
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
@@ -325,6 +311,7 @@ export default function EditMember() {
                      placeholder="Pilih Jabatan"
                      value={choosePosition.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(choosePosition.val);
                         setValSelect("position");
@@ -338,6 +325,7 @@ export default function EditMember() {
                      placeholder="Pilih Role"
                      value={chooseRole.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseRole.val);
                         setValSelect("role");
@@ -352,6 +340,7 @@ export default function EditMember() {
                      placeholder="NIK"
                      required
                      value={data?.nik}
+                     bg={colors.card}
                      error={error.nik}
                      errorText="NIK Harus 16 Karakter"
                      onChange={val => {
@@ -364,6 +353,7 @@ export default function EditMember() {
                      placeholder="Nama"
                      required
                      value={data?.name}
+                     bg={colors.card}
                      error={error.name}
                      errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
                      onChange={val => {
@@ -376,6 +366,7 @@ export default function EditMember() {
                      placeholder="Email"
                      required
                      value={data?.email}
+                     bg={colors.card}
                      error={error.email}
                      errorText="Email tidak valid"
                      onChange={val => {
@@ -387,8 +378,9 @@ export default function EditMember() {
                      type="numeric"
                      placeholder="8XX-XXX-XXX"
                      required
-                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02]}>+62</Text>}
+                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02, { color: colors.text }]}>+62</Text>}
                      value={data?.phone}
+                     bg={colors.card}
                      error={error.phone}
                      errorText="Nomor Telepon tidak valid"
                      onChange={val => {
@@ -400,6 +392,7 @@ export default function EditMember() {
                      placeholder="Pilih Jenis Kelamin"
                      value={chooseGender.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseGender.val);
                         setValSelect("gender");
diff --git a/app/(application)/member/index.tsx b/app/(application)/member/index.tsx
index 85a9156..b7573ef 100644
--- a/app/(application)/member/index.tsx
+++ b/app/(application)/member/index.tsx
@@ -9,6 +9,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetUser } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -33,6 +34,7 @@ export default function Index() {
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
    const { token, decryptToken } = useAuthSession()
    const entityUser = useSelector((state: any) => state.user)
+   const { colors } = useTheme();
    const [search, setSearch] = useState('')
    const [nameGroup, setNameGroup] = useState('')
    const [data, setData] = useState<Props[]>([])
@@ -104,22 +106,22 @@ export default function Index() {
    });
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
-            <View style={[Styles.wrapBtnTab]}>
+            <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
                   onPress={() => { setStatus("true") }}
                   label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
+                  icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
                   n={2} />
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="false"
                   onPress={() => { setStatus("false") }}
                   label="Tidak Aktif"
-                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
+                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.text} size={20} />}
                   n={2} />
             </View>
             <InputSearch onChange={setSearch} />
@@ -168,6 +170,7 @@ export default function Index() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.primary}
                            />
                         }
                      />
diff --git a/app/(application)/notification.tsx b/app/(application)/notification.tsx
index 0722e26..736916e 100644
--- a/app/(application)/notification.tsx
+++ b/app/(application)/notification.tsx
@@ -7,6 +7,7 @@ import { apiGetNotification, apiReadOneNotification } from "@/lib/api";
 import { setUpdateNotification } from "@/lib/notificationSlice";
 import { pushToPage } from "@/lib/pushToPage";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
 import { useEffect, useState } from "react";
 import { RefreshControl, SafeAreaView, View, VirtualizedList } from "react-native";
@@ -24,6 +25,7 @@ type Props = {
 
 export default function Notification() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [loading, setLoading] = useState(false)
    const [data, setData] = useState<Props[]>([])
    const [page, setPage] = useState(1)
@@ -97,7 +99,7 @@ export default function Notification() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <View style={[Styles.p15]}>
             {
                loading ?
@@ -124,7 +126,7 @@ export default function Notification() {
                                  title={item.title}
                                  rightTopInfo={item.createdAt}
                                  desc={item.desc}
-                                 textColor={item.isRead ? 'gray' : 'black'}
+                                 textColor={item.isRead ? 'gray' : colors.text}
                                  onPress={() => {
                                     handleReadNotification(item.id, item.category, item.idContent)
 
@@ -140,6 +142,7 @@ export default function Notification() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.primary}
                            />
                         }
                      />
diff --git a/app/(application)/position/index.tsx b/app/(application)/position/index.tsx
index f9d303c..d80fb0c 100644
--- a/app/(application)/position/index.tsx
+++ b/app/(application)/position/index.tsx
@@ -14,6 +14,7 @@ import Styles from "@/constants/Styles";
 import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
 import { setUpdatePosition } from "@/lib/positionSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -33,6 +34,7 @@ export default function Index() {
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [loading, setLoading] = useState(true)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme()
    const [status, setStatus] = useState<'true' | 'false'>('true')
    const entityUser = useSelector((state: any) => state.user)
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
@@ -146,9 +148,9 @@ export default function Index() {
    });
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
-            <View style={[Styles.wrapBtnTab]}>
+            <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
@@ -212,6 +214,7 @@ export default function Index() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.primary}
                            />
                         }
                      />
@@ -222,7 +225,7 @@ export default function Index() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={chooseData.name}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
                   title={chooseData.active ? 'Non Aktifkan' : "Aktifkan"}
                   onPress={() => {
                      setModal(false)
@@ -234,7 +237,7 @@ export default function Index() {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setModal(false)
@@ -255,6 +258,7 @@ export default function Index() {
                      placeholder="Nama Jabatan"
                      required
                      label="Jabatan"
+                     bg={colors.card}
                      value={chooseData.name}
                      onChange={(val) => { validationForm(val) }}
                      error={error.name}
diff --git a/app/(application)/profile.tsx b/app/(application)/profile.tsx
index ba70df2..537054d 100644
--- a/app/(application)/profile.tsx
+++ b/app/(application)/profile.tsx
@@ -7,22 +7,40 @@ import { assetUserImage } from "@/constants/AssetsError";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { AntDesign } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign, Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
-import { Image, Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { Image, Modal, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
 import ImageViewing from 'react-native-image-viewing';
 import { useSelector } from 'react-redux';
 
 export default function Profile() {
    const { signOut } = useAuthSession()
+   const { theme, setTheme, colors } = useTheme();
    const entities = useSelector((state: any) => state.entities)
    const [error, setError] = useState(false)
    const [preview, setPreview] = useState(false)
+   const [showThemeModal, setShowThemeModal] = useState(false)
 
+   const ThemeOption = ({ label, value, icon }: { label: string, value: 'light' | 'dark' | 'system', icon: string }) => (
+      <TouchableOpacity
+         style={[Styles.itemSelectModal, { backgroundColor: theme === value ? colors.primary + '10' : 'transparent', borderColor: colors.icon + '20' }]}
+         onPress={() => {
+            setTheme(value);
+            setShowThemeModal(false);
+         }}
+      >
+         <View style={Styles.rowItemsCenter}>
+            <Ionicons name={icon as any} size={20} color={theme === value ? colors.primary : colors.text} style={{ marginRight: 10 }} />
+            <Text style={{ color: colors.text, fontWeight: theme === value ? 'bold' : 'normal' }}>{label}</Text>
+         </View>
+         {theme === value && <Ionicons name="checkmark" size={20} color={colors.primary} />}
+      </TouchableOpacity>
+   );
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                headerTitle: 'Profile',
@@ -46,21 +64,11 @@ export default function Profile() {
                      }
                   />
                )
-               // headerRight: () => <ButtonHeader
-               //    item={<AntDesign name="logout" size={20} color="white" />}
-               //    onPress={() => {
-               //       AlertKonfirmasi({
-               //          title: 'Keluar',
-               //          desc: 'Apakah anda yakin ingin keluar?',
-               //          onPress: () => { signOut() }
-               //       })
-               //    }}
-               // />
             }}
          />
-         <ScrollView style={[Styles.h100]}>
+         <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={{ flexDirection: 'column' }}>
-               <View style={[Styles.wrapHeadViewMember]}>
+               <View style={[Styles.wrapHeadViewMember, { backgroundColor: colors.primary }]}>
                   <Pressable onPress={() => setPreview(true)}>
                      <Image
                         source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
@@ -72,12 +80,33 @@ export default function Profile() {
                   <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
                </View>
                <View style={[Styles.p15]}>
-                  <View style={[Styles.rowSpaceBetween]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
+                  <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
+                     <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tampilan</Text>
+                  </View>
+
+                  <TouchableOpacity
+                     onPress={() => setShowThemeModal(true)}
+                     style={[Styles.wrapItemBorderAll, { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderColor: colors.icon + '40', backgroundColor: colors.background }]}
+                  >
+                     <View style={Styles.rowItemsCenter}>
+                        <Ionicons name="color-palette-outline" size={20} color={colors.text} style={{ marginRight: 10 }} />
+                        <Text style={{ color: colors.text }}>Tema Aplikasi</Text>
+                     </View>
+                     <View style={Styles.rowItemsCenter}>
+                        <Text style={{ color: colors.icon, marginRight: 5, fontSize: 13 }}>
+                           {theme === 'light' ? 'Terang' : theme === 'dark' ? 'Gelap' : 'Sistem'}
+                        </Text>
+                        <Ionicons name="chevron-forward" size={16} color={colors.icon} />
+                     </View>
+                  </TouchableOpacity>
+
+                  <View style={[Styles.rowSpaceBetween, Styles.mt15]}>
+                     <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
                      {
                         entities.idUserRole != "developer" && <Text onPress={() => { router.push('/edit-profile') }} style={[Styles.textLink]}>Edit</Text>
                      }
                   </View>
+                  {/* Note: ItemDetailMember might need updates to support dynamic colors if it uses default text colors */}
                   <ItemDetailMember category="nik" value={entities.nik} />
                   <ItemDetailMember category="group" value={entities.group} />
                   <ItemDetailMember category="position" value={entities.position} />
@@ -87,6 +116,30 @@ export default function Profile() {
                </View>
             </View>
          </ScrollView>
+
+         <Modal
+            animationType="fade"
+            transparent={true}
+            visible={showThemeModal}
+            onRequestClose={() => setShowThemeModal(false)}
+         >
+            <TouchableOpacity style={Styles.modalBgTransparant} activeOpacity={1} onPress={() => setShowThemeModal(false)}>
+               <View style={[Styles.modalContent, { backgroundColor: colors.background }]}>
+                  <View style={[Styles.titleContainer, { backgroundColor: colors.background, borderBottomColor: colors.icon + '20', borderBottomWidth: 1 }]}>
+                     <Text style={[Styles.textSubtitle, { color: colors.text }]}>Pilih Tema</Text>
+                     <TouchableOpacity onPress={() => setShowThemeModal(false)}>
+                        <Ionicons name="close" size={24} color={colors.text} />
+                     </TouchableOpacity>
+                  </View>
+                  <View style={{ padding: 10 }}>
+                     <ThemeOption label="Terang" value="light" icon="sunny-outline" />
+                     <ThemeOption label="Gelap" value="dark" icon="moon-outline" />
+                     <ThemeOption label="Sistem" value="system" icon="phone-portrait-outline" />
+                  </View>
+               </View>
+            </TouchableOpacity>
+         </Modal>
+
          <ImageViewing
             images={[{ uri: error ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${entities.img}` }]}
             imageIndex={0}
diff --git a/app/(application)/project/[id]/add-file.tsx b/app/(application)/project/[id]/add-file.tsx
index 7c952a6..18905c4 100644
--- a/app/(application)/project/[id]/add-file.tsx
+++ b/app/(application)/project/[id]/add-file.tsx
@@ -8,6 +8,7 @@ import Styles from "@/constants/Styles"
 import { apiAddFileProject, apiCheckFileProject } from "@/lib/api"
 import { setUpdateProject } from "@/lib/projectUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
 import * as DocumentPicker from "expo-document-picker"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -17,6 +18,7 @@ import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
 
 export default function ProjectAddFile() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [fileForm, setFileForm] = useState<any[]>([])
    const [listFile, setListFile] = useState<any[]>([])
@@ -127,7 +129,7 @@ export default function ProjectAddFile() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -153,20 +155,20 @@ export default function ProjectAddFile() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                {
                   listFile.length > 0 && (
                      <View style={[Styles.mb15]}>
                         <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper]}>
+                        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                            {
                               listFile.map((item, index) => (
                                  <BorderBottomItem
                                     key={index}
                                     borderType="all"
-                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                                     title={item}
                                     titleWeight="normal"
                                     onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -188,7 +190,7 @@ export default function ProjectAddFile() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />
diff --git a/app/(application)/project/[id]/add-member.tsx b/app/(application)/project/[id]/add-member.tsx
index bc5fd29..a47fa35 100644
--- a/app/(application)/project/[id]/add-member.tsx
+++ b/app/(application)/project/[id]/add-member.tsx
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiAddMemberProject, apiGetProjectOne, apiGetUser } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberProject() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -127,7 +129,7 @@ export default function AddMemberProject() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => handleSearch(val)} value={search} />
             {
                selectMember.length > 0
@@ -152,7 +154,7 @@ export default function AddMemberProject() {
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
-               style={[Styles.h100]}
+               style={[Styles.h100, { backgroundColor: colors.background }]}
             >
                {
                   data.length > 0 ?
@@ -178,7 +180,7 @@ export default function AddMemberProject() {
                                        </View>
                                     </View>
                                     {
-                                       selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
+                                       selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                                     }
                                  </Pressable>
                               )
diff --git a/app/(application)/project/[id]/add-task.tsx b/app/(application)/project/[id]/add-task.tsx
index 1ae7937..921fa58 100644
--- a/app/(application)/project/[id]/add-task.tsx
+++ b/app/(application)/project/[id]/add-task.tsx
@@ -9,6 +9,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -30,6 +31,7 @@ import DateTimePicker, {
 import { useDispatch, useSelector } from "react-redux";
 
 export default function ProjectAddTask() {
+   const { colors } = useTheme();
    const headerHeight = useHeaderHeight();
    const { token, decryptToken } = useAuthSession()
    const dispatch = useDispatch()
@@ -133,7 +135,7 @@ export default function ProjectAddTask() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,11 +160,11 @@ export default function ProjectAddTask() {
                      showBack={true}
                      onPressLeft={() => router.back()}
                      right={
-                           <ButtonSaveHeader
-                              disable={disable || loading}
-                              category="create"
-                              onPress={() => { handleCreate() }}
-                           />
+                        <ButtonSaveHeader
+                           disable={disable || loading}
+                           category="create"
+                           onPress={() => { handleCreate() }}
+                        />
                      }
                   />
                )
@@ -172,9 +174,9 @@ export default function ProjectAddTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView>
+            <ScrollView style={{ backgroundColor: colors.background }}>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
                         mode="range"
                         startDate={range.startDate}
@@ -184,13 +186,13 @@ export default function ProjectAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
-                           month_label: Styles.cBlack,
-                           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_label: { color: colors.text },
+                           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>
@@ -200,7 +202,7 @@ export default function ProjectAddTask() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Mulai <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
@@ -208,7 +210,7 @@ export default function ProjectAddTask() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Berakhir <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
@@ -229,7 +231,7 @@ export default function ProjectAddTask() {
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
diff --git a/app/(application)/project/[id]/cancel.tsx b/app/(application)/project/[id]/cancel.tsx
index ab2a77f..3b1d458 100644
--- a/app/(application)/project/[id]/cancel.tsx
+++ b/app/(application)/project/[id]/cancel.tsx
@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiCancelProject } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function ProjectCancel() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const dispatch = useDispatch();
@@ -65,7 +67,7 @@ export default function ProjectCancel() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -106,7 +108,7 @@ export default function ProjectCancel() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                <InputForm
@@ -114,7 +116,7 @@ export default function ProjectCancel() {
                   type="default"
                   placeholder="Alasan Pembatalan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   error={error}
                   errorText="Alasan pembatalan harus diisi"
                   onChange={(val) => onValidation(val)}
diff --git a/app/(application)/project/[id]/edit.tsx b/app/(application)/project/[id]/edit.tsx
index bff125d..18e09a1 100644
--- a/app/(application)/project/[id]/edit.tsx
+++ b/app/(application)/project/[id]/edit.tsx
@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiEditProject, apiGetProjectOne } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function EditProject() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const dispatch = useDispatch()
@@ -86,7 +88,7 @@ export default function EditProject() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -121,14 +123,14 @@ export default function EditProject() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputForm
                   label="Judul Kegiatan"
                   type="default"
                   placeholder="Judul Kegiatan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={judul}
                   onChange={(val) => { onValidation(val) }}
                   error={error}
diff --git a/app/(application)/project/[id]/index.tsx b/app/(application)/project/[id]/index.tsx
index 0a28781..7fe4a41 100644
--- a/app/(application)/project/[id]/index.tsx
+++ b/app/(application)/project/[id]/index.tsx
@@ -10,6 +10,7 @@ import SectionProgress from "@/components/sectionProgress";
 import Styles from "@/constants/Styles";
 import { apiGetProjectOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -32,6 +33,7 @@ type Props = {
 
 export default function DetailProject() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [data, setData] = useState<Props>()
    const [progress, setProgress] = useState(0)
@@ -91,7 +93,7 @@ export default function DetailProject() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -111,10 +113,12 @@ export default function DetailProject() {
             }}
          />
          <ScrollView
+            style={{ backgroundColor: colors.background }}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.primary}
                />
             }
          >
diff --git a/app/(application)/project/[id]/report.tsx b/app/(application)/project/[id]/report.tsx
index f5de565..eaffdfc 100644
--- a/app/(application)/project/[id]/report.tsx
+++ b/app/(application)/project/[id]/report.tsx
@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiGetProjectOne, apiReportProject } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function ReportProject() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const dispatch = useDispatch()
@@ -86,7 +88,7 @@ export default function ReportProject() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -123,7 +125,7 @@ export default function ReportProject() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                <InputForm
@@ -131,7 +133,7 @@ export default function ReportProject() {
                   type="default"
                   placeholder="Laporan Kegiatan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={laporan}
                   onChange={(val) => { onValidation(val) }}
                   error={error}
diff --git a/app/(application)/project/create.tsx b/app/(application)/project/create.tsx
index 73505c5..29ac193 100644
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -18,6 +18,7 @@ import { setMemberChoose } from "@/lib/memberChoose";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { setTaskCreate } from "@/lib/taskCreate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
@@ -31,6 +32,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateProject() {
+   const { colors } = useTheme();
    const [loading, setLoading] = useState(false)
    const { token, decryptToken } = useAuthSession();
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
@@ -190,7 +192,7 @@ export default function CreateProject() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -230,7 +232,7 @@ export default function CreateProject() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                {
@@ -242,6 +244,7 @@ export default function CreateProject() {
                         placeholder="Pilih Lembaga Desa"
                         value={chooseGroup.label}
                         required
+                        bg={colors.card}
                         onPress={() => {
                            setValChoose(chooseGroup.val);
                            setValSelect("group");
@@ -257,6 +260,7 @@ export default function CreateProject() {
                   type="default"
                   placeholder="Nama Kegiatan"
                   required
+                  bg={colors.card}
                   value={dataForm.title}
                   error={error.title}
                   errorText="Nama kegiatan tidak boleh kosong"
@@ -294,13 +298,13 @@ export default function CreateProject() {
                   fileForm.length > 0 && (
                      <View style={[Styles.mb15]}>
                         <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper]}>
+                        <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="black" />}
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                                     title={item.name}
                                     titleWeight="normal"
                                     onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -318,7 +322,7 @@ export default function CreateProject() {
                         <Text>Total {entitiesMember.length} Anggota</Text>
                      </View>
 
-                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                     <View style={[Styles.borderAll, Styles.round10, Styles.p10, { borderColor: colors.icon, backgroundColor: colors.card }]}>
                         {entitiesMember.map(
                            (item: { img: any; name: any }, index: any) => {
                               return (
@@ -344,7 +348,7 @@ export default function CreateProject() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />
diff --git a/app/(application)/project/create/member.tsx b/app/(application)/project/create/member.tsx
index 444bf10..947afad 100644
--- a/app/(application)/project/create/member.tsx
+++ b/app/(application)/project/create/member.tsx
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiGetUser } from "@/lib/api";
 import { setMemberChoose } from "@/lib/memberChoose";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import React, { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberCreateProject() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const { token, decryptToken } = useAuthSession()
    const [data, setData] = useState<Props[]>([])
@@ -103,7 +105,7 @@ export default function AddMemberCreateProject() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -129,6 +131,7 @@ export default function AddMemberCreateProject() {
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
+               style={{ backgroundColor: colors.background }}
             >
 
                {
@@ -149,7 +152,7 @@ export default function AddMemberCreateProject() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
diff --git a/app/(application)/project/create/task.tsx b/app/(application)/project/create/task.tsx
index 6fbfad5..5aaad36 100644
--- a/app/(application)/project/create/task.tsx
+++ b/app/(application)/project/create/task.tsx
@@ -7,6 +7,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';
@@ -27,6 +28,7 @@ import DateTimePicker, {
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateProjectAddTask() {
+   const { colors } = useTheme();
    const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const [disable, setDisable] = useState(true);
@@ -119,7 +121,7 @@ export default function CreateProjectAddTask() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,9 +160,9 @@ export default function CreateProjectAddTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView>
+            <ScrollView style={{ backgroundColor: colors.background }}>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
                         mode="range"
                         startDate={range.startDate}
@@ -170,7 +172,7 @@ export default function CreateProjectAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
-                           month_label: Styles.cBlack,
+                           month_label: { color: colors.text },
                            month_selector_label: Styles.cBlack,
                            year_label: Styles.cBlack,
                            year_selector_label: Styles.cBlack,
@@ -186,7 +188,7 @@ export default function CreateProjectAddTask() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Mulai <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
@@ -194,7 +196,7 @@ export default function CreateProjectAddTask() {
                            <Text style={[Styles.mb05]}>
                               Tanggal Berakhir <Text style={Styles.cError}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
@@ -215,7 +217,7 @@ export default function CreateProjectAddTask() {
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
diff --git a/app/(application)/project/index.tsx b/app/(application)/project/index.tsx
index c6f4feb..d640f8c 100644
--- a/app/(application)/project/index.tsx
+++ b/app/(application)/project/index.tsx
@@ -11,6 +11,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetProject } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    Ionicons,
@@ -40,9 +41,11 @@ export default function ListProject() {
    }>();
    const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
    const { token, decryptToken } = useAuthSession();
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
    const [search, setSearch] = useState("")
    const [nameGroup, setNameGroup] = useState("")
+   // ... state same ...
    const [isYear, setYear] = useState("")
    const [data, setData] = useState<Props[]>([])
    const [isList, setList] = useState(false)
@@ -122,7 +125,7 @@ export default function ListProject() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
                <ButtonTab
@@ -133,7 +136,7 @@ export default function ListProject() {
                   icon={
                      <MaterialCommunityIcons
                         name="clock-alert-outline"
-                        color={statusFix == "0" ? "white" : "black"}
+                        color={statusFix == "0" ? "white" : colors.text}
                         size={20}
                      />
                   }
@@ -147,7 +150,7 @@ export default function ListProject() {
                   icon={
                      <MaterialCommunityIcons
                         name="progress-check"
-                        color={statusFix == "1" ? "white" : "black"}
+                        color={statusFix == "1" ? "white" : colors.text}
                         size={20}
                      />
                   }
@@ -161,7 +164,7 @@ export default function ListProject() {
                   icon={
                      <Ionicons
                         name="checkmark-done-circle-outline"
-                        color={statusFix == "2" ? "white" : "black"}
+                        color={statusFix == "2" ? "white" : colors.text}
                         size={20}
                      />
                   }
@@ -175,7 +178,7 @@ export default function ListProject() {
                   icon={
                      <AntDesign
                         name="closecircleo"
-                        color={statusFix == "3" ? "white" : "black"}
+                        color={statusFix == "3" ? "white" : colors.text}
                         size={20}
                      />
                   }
@@ -191,7 +194,7 @@ export default function ListProject() {
                >
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
diff --git a/app/(application)/project/update/[detail].tsx b/app/(application)/project/update/[detail].tsx
index d955642..0aabbfe 100644
--- a/app/(application)/project/update/[detail].tsx
+++ b/app/(application)/project/update/[detail].tsx
@@ -9,6 +9,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -21,6 +22,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function UpdateProjectTask() {
+   const { colors } = useTheme();
    const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
@@ -169,7 +171,7 @@ export default function UpdateProjectTask() {
    }, [range])
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -200,9 +202,9 @@ export default function UpdateProjectTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView>
+            <ScrollView style={{ backgroundColor: colors.background }}>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         !loading
                         &&
@@ -217,13 +219,13 @@ export default function UpdateProjectTask() {
                               selected: Styles.selectedDate,
                               selected_label: Styles.cWhite,
                               range_fill: Styles.selectRangeDate,
-                              month_label: Styles.cBlack,
-                              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_label: { color: colors.text },
+                              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 },
                            }}
                         />
                      }
@@ -233,13 +235,13 @@ export default function UpdateProjectTask() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: '48%' }]}>
                            <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={Styles.cError}>*</Text></Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <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>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                               <Text style={{ textAlign: 'center' }}>{to}</Text>
                            </View>
                         </View>
@@ -260,7 +262,7 @@ export default function UpdateProjectTask() {
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
diff --git a/app/(application)/search.tsx b/app/(application)/search.tsx
index 79f3dba..7bc0e47 100644
--- a/app/(application)/search.tsx
+++ b/app/(application)/search.tsx
@@ -8,12 +8,14 @@ import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetSearch } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import React, { useState } from "react";
 import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 
+// ... types ...
 type PropsUser = {
    id: string
    name: string
@@ -43,6 +45,7 @@ export default function Search() {
    const [dataProject, setDataProject] = useState<PropProject[]>([])
    const [refreshing, setRefreshing] = useState(false)
    const [search, setSearch] = useState('')
+   const { colors } = useTheme();
 
    async function handleSearch(cari: string) {
       try {
@@ -79,7 +82,7 @@ export default function Search() {
 
    return (
       <>
-         <SafeAreaView>
+         <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
             <Stack.Screen
                options={{
                   headerTitle: 'Pencarian',
@@ -100,6 +103,7 @@ export default function Search() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.primary}
                            />
                         }
                      >
@@ -177,7 +181,7 @@ export default function Search() {
                      </ScrollView>
                      :
                      <View style={[Styles.contentItemCenter, Styles.mt10]}>
-                        <Text style={[Styles.textInformation, Styles.cGray]}>Tidak ada data</Text>
+                        <Text style={[Styles.textInformation, { color: colors.icon }]}>Tidak ada data</Text>
                      </View>
                }
 
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 4fb2042..c49bb5e 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,4 +1,5 @@
 import AuthProvider from '@/providers/AuthProvider';
+import ThemeProvider from '@/providers/ThemeProvider';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
@@ -29,14 +30,16 @@ export default function RootLayout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <NotifierWrapper>
-        <AuthProvider>
-          <Stack>
-            <Stack.Screen name="index" options={{ headerShown: false }} />
-            <Stack.Screen name="verification" options={{ headerShown: false }} />
-            <Stack.Screen name="(application)" options={{ headerShown: false }} />
-          </Stack>
-          <StatusBar style="auto" />
-        </AuthProvider>
+        <ThemeProvider>
+          <AuthProvider>
+            <Stack>
+              <Stack.Screen name="index" options={{ headerShown: false }} />
+              <Stack.Screen name="verification" options={{ headerShown: false }} />
+              <Stack.Screen name="(application)" options={{ headerShown: false }} />
+            </Stack>
+            <StatusBar style="auto" />
+          </AuthProvider>
+        </ThemeProvider>
       </NotifierWrapper>
     </GestureHandlerRootView>
   );
diff --git a/app/verification.tsx b/app/verification.tsx
index b074aef..d0290d1 100644
--- a/app/verification.tsx
+++ b/app/verification.tsx
@@ -3,6 +3,7 @@ import Text from '@/components/Text';
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import CryptoES from "crypto-es";
 import React, { useState } from "react";
 import { Image, View } from "react-native";
@@ -15,6 +16,7 @@ export default function Index() {
       value,
       setValue,
    });
+   const { colors } = useTheme();
 
    const { signIn } = useAuthSession();
    const login = (): void => {
@@ -24,7 +26,7 @@ export default function Index() {
       signIn(encrypted);
    }
    return (
-      <View style={Styles.wrapLogin} >
+      <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
          <View style={{ alignItems: "center", marginVertical: 50 }}>
             <Image
                source={require("../assets/images/logo.png")}
@@ -50,7 +52,7 @@ export default function Index() {
             renderCell={({ index, symbol, isFocused }) => (
                <Text
                   key={index}
-                  style={[Styles.verificationCell, isFocused && Styles.verificationFocusCell]}
+                  style={[Styles.verificationCell, isFocused && Styles.verificationFocusCell, { borderColor: isFocused ? colors.tint : colors.icon, color: colors.text }]}
                   onLayout={getCellOnLayoutHandler(index)}>
                   {symbol || (isFocused ? <Cursor /> : null)}
                </Text>
@@ -61,7 +63,7 @@ export default function Index() {
             // onPress={() => { router.push("/home") }}
             onPress={login}
          />
-         <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}>
+         <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center', color: colors.tint }]}>
             Tidak Menerima kode verifikasi? Kirim Ulang
          </Text>
       </View>
diff --git a/components/Text.tsx b/components/Text.tsx
index 1b66f53..789c323 100644
--- a/components/Text.tsx
+++ b/components/Text.tsx
@@ -1,23 +1,19 @@
+import { useTheme } from '@/providers/ThemeProvider';
 import React from 'react';
-import { Text as RNText, TextProps as RNTextProps, StyleSheet } from 'react-native';
+import { StyleSheet, Text as RNText, TextProps as RNTextProps } from 'react-native';
 
 type TextProps = RNTextProps & {
   children: React.ReactNode;
 };
 
 const Text: React.FC<TextProps> = ({ style, ...props }) => {
+  const { colors } = useTheme();
   return (
-    <RNText 
-      style={[styles.defaultText, style]} 
+    <RNText
+      style={[{ color: colors.text }, style]}
       {...props}
     />
   );
 };
 
-const styles = StyleSheet.create({
-  defaultText: {
-    color: 'black',
-  },
-});
-
 export default Text;
diff --git a/components/announcement/headerAnnouncementDetail.tsx b/components/announcement/headerAnnouncementDetail.tsx
index 38d9649..9a2cc5c 100644
--- a/components/announcement/headerAnnouncementDetail.tsx
+++ b/components/announcement/headerAnnouncementDetail.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate"
 import { apiDeleteAnnouncement } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -18,6 +19,7 @@ type Props = {
 }
 export default function HeaderRightAnnouncementDetail({ id }: Props) {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
    const update = useSelector((state: any) => state.announcementUpdate)
    const dispatch = useDispatch()
@@ -46,7 +48,7 @@ export default function HeaderRightAnnouncementDetail({ id }: Props) {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setVisible(false)
@@ -54,7 +56,7 @@ export default function HeaderRightAnnouncementDetail({ id }: Props) {
                   }}
                />
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/announcement/headerAnnouncementList.tsx b/components/announcement/headerAnnouncementList.tsx
index 039323d..d67346f 100644
--- a/components/announcement/headerAnnouncementList.tsx
+++ b/components/announcement/headerAnnouncementList.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -9,6 +10,7 @@ import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
 
 export default function HeaderRightAnnouncementList() {
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
 
@@ -21,7 +23,7 @@ export default function HeaderRightAnnouncementList() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Pengumuman"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/auth/viewLogin.tsx b/components/auth/viewLogin.tsx
index 4bff550..2b9e4f3 100644
--- a/components/auth/viewLogin.tsx
+++ b/components/auth/viewLogin.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles"
 import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import AsyncStorage from "@react-native-async-storage/async-storage"
 import { StatusBar } from "expo-status-bar"
 import { useState } from "react"
@@ -21,6 +22,7 @@ export default function ViewLogin({ onValidate }: Props) {
    const [disableLogin, setDisableLogin] = useState(true)
    const [phone, setPhone] = useState('')
    const { signIn, encryptToken } = useAuthSession();
+   const { colors, theme } = useTheme();
 
    const handleCheckPhone = async () => {
       try {
@@ -49,8 +51,8 @@ export default function ViewLogin({ onValidate }: Props) {
    };
 
    return (
-      <SafeAreaView>
-         <StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" />
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+         <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
          <ToastCustom />
          <View style={[Styles.p20, Styles.h100]}>
             <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
diff --git a/components/auth/viewVerification.tsx b/components/auth/viewVerification.tsx
index a1ae472..fc921a9 100644
--- a/components/auth/viewVerification.tsx
+++ b/components/auth/viewVerification.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiSendOtp } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { StatusBar } from "expo-status-bar";
 import { useState } from "react";
@@ -20,6 +21,7 @@ export default function ViewVerification({ phone, otp }: Props) {
    const [value, setValue] = useState('');
    const [otpFix, setOtpFix] = useState(otp)
    const { signIn, encryptToken } = useAuthSession();
+   const { colors, theme } = useTheme();
 
    const login = async () => {
       const valueUser = await AsyncStorage.getItem('user');
@@ -57,9 +59,9 @@ export default function ViewVerification({ phone, otp }: Props) {
 
    return (
       <>
-         <StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" />
+         <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
          <ToastCustom />
-         <View style={Styles.wrapLogin} >
+         <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
             <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
                <Image
                   source={require("../../assets/images/logo.png")}
@@ -77,22 +79,22 @@ export default function ViewVerification({ phone, otp }: Props) {
             <OtpInput
                numberOfDigits={4}
                onTextChange={(text) => setValue(text)}
-               focusColor={'#19345E'}
+               focusColor={colors.tint}
                type="numeric"
                theme={{
                   containerStyle: {
                      width: '80%',
                      alignSelf: 'center'
                   },
-                  pinCodeContainerStyle: Styles.verificationCell,
-                  pinCodeTextStyle: { color: 'black' }
+                  pinCodeContainerStyle: { ...Styles.verificationCell, borderColor: colors.icon },
+                  pinCodeTextStyle: { color: colors.text }
                }}
             />
             <ButtonForm
                text="SUBMIT"
                onPress={() => { onCheckOtp() }}
             />
-            <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}>
+            <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center', color: colors.tint }]}>
                Tidak Menerima kode verifikasi?  <Text onPress={() => { resendOtp() }}>Kirim Ulang</Text>
             </Text>
          </View>
diff --git a/components/banner/headerBannerList.tsx b/components/banner/headerBannerList.tsx
index f8a0594..faea4fa 100644
--- a/components/banner/headerBannerList.tsx
+++ b/components/banner/headerBannerList.tsx
@@ -1,21 +1,23 @@
-import { useState } from "react";
-import ButtonMenuHeader from "../buttonMenuHeader";
-import DrawerBottom from "../drawerBottom";
-import { View } from "react-native";
 import Styles from "@/constants/Styles";
-import MenuItemRow from "../menuItemRow";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import ButtonMenuHeader from "../buttonMenuHeader";
+import DrawerBottom from "../drawerBottom";
+import MenuItemRow from "../menuItemRow";
 
 export default function HeaderRightBannerList() {
    const [isVisible, setVisible] = useState(false)
+   const { colors } = useTheme()
    return (
       <>
          <ButtonMenuHeader onPress={() => { setVisible(true) }} />
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={() => setVisible(false)} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Banner"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/borderBottomItem.tsx b/components/borderBottomItem.tsx
index 1a15925..aae246a 100644
--- a/components/borderBottomItem.tsx
+++ b/components/borderBottomItem.tsx
@@ -1,5 +1,6 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import React, { useState } from "react";
 import { Dimensions, Pressable, View } from "react-native";
 import Text from "./Text";
@@ -16,7 +17,7 @@ type Props = {
    leftBottomInfo?: React.ReactNode | string
    rightBottomInfo?: React.ReactNode | string
    titleWeight?: 'normal' | 'bold'
-   bgColor?: 'white' | 'transparent'
+   bgColor?: string
    width?: number
    descEllipsize?: boolean
    textColor?: string,
@@ -26,8 +27,9 @@ type Props = {
 
 export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll }: Props) {
    const lebarDim = Dimensions.get("window").width;
+   const { colors } = useTheme();
    const lebar = width ? lebarDim * width / 100 : 'auto';
-   const textColorFix = textColor ? textColor : 'black';
+   const textColorFix = textColor ? textColor : colors.text;
    const [isTap, setIsTap] = useState(false);
 
 
@@ -37,11 +39,11 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
          onPressOut={() => setIsTap(false)}
          style={({ pressed }) => [
             borderType == 'bottom'
-               ? Styles.wrapItemBorderBottom
+               ? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon }]
                : borderType == 'all'
-                  ? Styles.wrapItemBorderAll
+                  ? [Styles.wrapItemBorderAll, { borderColor: colors.icon }]
                   : Styles.wrapItemBorderNone,
-            bgColor && bgColor == 'white' && ColorsStatus.white,
+            { backgroundColor: bgColor },
             // efek warna saat ditekan (sementara)
             isTap && colorPress && ColorsStatus.pressedGray,
          ]}
diff --git a/components/borderBottomItem2.tsx b/components/borderBottomItem2.tsx
index 441d2bf..31e91b9 100644
--- a/components/borderBottomItem2.tsx
+++ b/components/borderBottomItem2.tsx
@@ -2,6 +2,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import { ConstEnv } from "@/constants/ConstEnv";
 import { isImageFile } from "@/constants/FileExtensions";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import * as FileSystem from 'expo-file-system';
 import { startActivityAsync } from 'expo-intent-launcher';
@@ -45,9 +46,10 @@ type PropsFile = {
 
 
 export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll, dataFile }: Props) {
+   const { colors } = useTheme();
    const lebarDim = Dimensions.get("window").width;
    const lebar = width ? lebarDim * width / 100 : 'auto';
-   const textColorFix = textColor ? textColor : 'black';
+   const textColorFix = textColor ? textColor : colors.text;
    const [isTap, setIsTap] = useState(false);
    const [loadingOpen, setLoadingOpen] = useState(false)
    const [chooseFile, setChooseFile] = useState<PropsFile>()
@@ -115,11 +117,11 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
             onPressOut={() => setIsTap(false)}
             style={({ pressed }) => [
                borderType == 'bottom'
-                  ? Styles.wrapItemBorderBottom
+                  ? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon }]
                   : borderType == 'all'
-                     ? Styles.wrapItemBorderAll
+                     ? [Styles.wrapItemBorderAll, { borderColor: colors.icon }]
                      : Styles.wrapItemBorderNone,
-               bgColor && bgColor == 'white' && ColorsStatus.white,
+               bgColor && bgColor == 'white' && { backgroundColor: colors.card },
                // efek warna saat ditekan (sementara)
                isTap && colorPress && ColorsStatus.pressedGray,
             ]}
@@ -151,7 +153,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
                      {dataFile.map((item, index) => (
                         <Pressable
                            key={index}
-                           style={[Styles.rowItemsCenter, Styles.borderAll, Styles.round10, Styles.ph05, Styles.pv03, Styles.mr05]}
+                           style={[Styles.rowItemsCenter, Styles.borderAll, Styles.round10, Styles.ph05, Styles.pv03, Styles.mr05, { borderColor: colors.icon }]}
                            onPress={() => {
                               isImageFile(item.extension) ?
                                  handleChooseFile(item)
@@ -161,7 +163,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
                            <MaterialCommunityIcons
                               name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"}
                               size={18}
-                              color="grey" />
+                              color={colors.icon} />
                            <Text style={[Styles.textInformation, Styles.cGray]}>{item.name}.{item.extension}</Text>
                         </Pressable>
                      ))}
diff --git a/components/buttonFiturMenu.tsx b/components/buttonFiturMenu.tsx
index d772fa2..3687b68 100644
--- a/components/buttonFiturMenu.tsx
+++ b/components/buttonFiturMenu.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import React from "react";
 import { TouchableWithoutFeedback, View } from "react-native";
 import Text from "./Text";
@@ -10,10 +11,11 @@ type Props = {
 };
 
 export function ButtonFiturMenu({ onPress, icon, text }: Props) {
+   const { colors } = useTheme();
    return (
       <TouchableWithoutFeedback onPress={onPress}>
          <View style={{ alignItems: 'center' }}>
-            <View style={[Styles.btnFiturMenu]}>
+            <View style={[Styles.btnFiturMenu, { backgroundColor: colors.card, borderColor: colors.icon + '20', shadowColor: colors.text }]}>
                {icon}
             </View>
             <Text style={[Styles.mt05]}>{text}</Text>
diff --git a/components/buttonSelect.tsx b/components/buttonSelect.tsx
index 8bca73f..16d5a9f 100644
--- a/components/buttonSelect.tsx
+++ b/components/buttonSelect.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
 import { Pressable, View } from "react-native";
 import Text from "./Text";
@@ -12,12 +13,20 @@ type Props = {
 }
 
 export default function ButtonSelect({ value, onPress, round, error, errorText }: Props) {
+   const { colors } = useTheme();
    return (
       <View style={[Styles.mv05]}>
          <Pressable onPress={onPress}>
-            <View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, round && Styles.round30, Styles.pv10, error && { borderColor: "red" }]}>
-               <Feather name="arrow-right-circle" size={20} color="black" />
-               <Text style={[Styles.cBlack]}>{value}</Text>
+            <View style={[
+               Styles.inputRoundForm,
+               Styles.inputRoundFormRight,
+               round && Styles.round30,
+               Styles.pv10,
+               { borderColor: colors.icon, backgroundColor: colors.card },
+               error && { borderColor: "red" }
+            ]}>
+               <Feather name="arrow-right-circle" size={20} color={colors.text} />
+               <Text style={[{ color: colors.text }]}>{value}</Text>
             </View>
          </Pressable>
          {error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)}
diff --git a/components/buttonTab.tsx b/components/buttonTab.tsx
index b5449a9..746a7a4 100644
--- a/components/buttonTab.tsx
+++ b/components/buttonTab.tsx
@@ -1,5 +1,6 @@
 import { ColorsStatus } from "@/constants/ColorsStatus"
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider";
 import { TouchableOpacity } from "react-native"
 import Text from "./Text";
 
@@ -14,10 +15,11 @@ type Props = {
 
 
 export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
+   const { colors } = useTheme();
    return (
       <TouchableOpacity style={[Styles.btnTab, (active == value) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
          {icon}
-         <Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : 'black' }]}>{label}</Text>
+         <Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : colors.text }]}>{label}</Text>
       </TouchableOpacity>
    )
 }
\ No newline at end of file
diff --git a/components/calendar/headerCalendarDetail.tsx b/components/calendar/headerCalendarDetail.tsx
index 2f694ed..8f88661 100644
--- a/components/calendar/headerCalendarDetail.tsx
+++ b/components/calendar/headerCalendarDetail.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiDeleteCalendar } from "@/lib/api"
 import { setUpdateCalendar } from "@/lib/calendarUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -19,6 +20,7 @@ type Props = {
 }
 
 export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
+   const { colors } = useTheme()
    const [isVisible, setVisible] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const update = useSelector((state: any) => state.calendarUpdate)
@@ -49,7 +51,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialIcons name="groups" color="black" size={25} />}
+                  icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
                   title="Tambah Anggota"
                   onPress={() => {
                      setVisible(false)
@@ -57,7 +59,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setVisible(false)
@@ -65,7 +67,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
                   }}
                />
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/calendar/headerCalendarList.tsx b/components/calendar/headerCalendarList.tsx
index 3547e7b..daaabf9 100644
--- a/components/calendar/headerCalendarList.tsx
+++ b/components/calendar/headerCalendarList.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles"
 import { apiGetDivisionOneFeature } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"
 import { router, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
@@ -11,6 +12,7 @@ import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
 
 export default function HeaderRightCalendarList() {
+   const { colors } = useTheme()
    const [isVisible, setVisible] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>();
@@ -47,7 +49,7 @@ export default function HeaderRightCalendarList() {
                      <></>
                   ) : (
                      <MenuItemRow
-                        icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                        icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                         title="Tambah Acara"
                         onPress={() => {
                            setVisible(false)
@@ -57,7 +59,7 @@ export default function HeaderRightCalendarList() {
                   )
                }
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="history" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="history" color={colors.text} size={25} />}
                   title="Riwayat"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/calendar/itemDateCalendar.tsx b/components/calendar/itemDateCalendar.tsx
index 193b7e9..a932783 100644
--- a/components/calendar/itemDateCalendar.tsx
+++ b/components/calendar/itemDateCalendar.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Pressable, View } from "react-native";
 import Text from "../Text";
 
@@ -11,10 +12,11 @@ type Props = {
 
 
 export default function ItemDateCalendar({ text, isSelected, isSign, onPress }: Props) {
+   const { colors } = useTheme()
    return (
       <>
          <Pressable style={{ alignItems: 'center' }} onPress={onPress}>
-            <Text style={[isSelected ? Styles.cWhite : Styles.cBlack]}>{text}</Text>
+            <Text style={[isSelected ? Styles.cWhite : { color: colors.text }]}>{text}</Text>
             <View style={[Styles.signDate, { backgroundColor: isSign ? 'red' : 'transparent' }]}></View>
          </Pressable>
       </>
diff --git a/components/calendar/itemHistoryEvent.tsx b/components/calendar/itemHistoryEvent.tsx
index 8c95ba8..b4e9248 100644
--- a/components/calendar/itemHistoryEvent.tsx
+++ b/components/calendar/itemHistoryEvent.tsx
@@ -1,5 +1,6 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { View } from "react-native";
 import Text from "../Text";
 
@@ -14,12 +15,13 @@ type Props = {
 }[]
 
 export default function ItemHistoryEvent({ data }: { data: Props }) {
+   const { colors, activeTheme } = useTheme()
    return (
       <>
          {
             data.length > 0 ? (
                data.map((item, index) => (
-                  <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
+                  <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, activeTheme === 'dark' ? { backgroundColor: colors.card } : ColorsStatus.lightGreen, Styles.p10, Styles.round10, { borderBottomWidth: 1, borderColor: colors.background }]}>
                      <View style={[Styles.mr10, Styles.ph05]}>
                         <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
                         <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
diff --git a/components/discussion/headerDiscussionDetail.tsx b/components/discussion/headerDiscussionDetail.tsx
index b2e4e4e..e25af32 100644
--- a/components/discussion/headerDiscussionDetail.tsx
+++ b/components/discussion/headerDiscussionDetail.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiArchiveDiscussion, apiOpenCloseDiscussion } from "@/lib/api"
 import { setUpdateDiscussion } from "@/lib/discussionUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -20,6 +21,7 @@ type Props = {
 }
 
 export default function HeaderRightDiscussionDetail({ id, status, isActive }: Props) {
+   const { colors } = useTheme()
    const [isVisible, setVisible] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const update = useSelector((state: any) => state.discussionUpdate)
@@ -72,7 +74,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
                   isActive &&
                   <>
                      <MenuItemRow
-                        icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                        icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                         title="Edit"
                         onPress={() => {
                            setVisible(false)
@@ -80,7 +82,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
                         }}
                      />
                      <MenuItemRow
-                        icon={<MaterialIcons name={status == 1 ? 'close' : 'check'} color="black" size={25} />}
+                        icon={<MaterialIcons name={status == 1 ? 'close' : 'check'} color={colors.text} size={25} />}
                         title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'}
                         onPress={() => {
                            setVisible(false)
@@ -96,7 +98,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
                   </>
                }
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="archive-outline" color={colors.text} size={25} />}
                   title={isActive ? 'Arsipkan' : 'Aktifkan Diskusi'}
                   onPress={() => {
                      setVisible(false)
diff --git a/components/discussion/headerDiscussionList.tsx b/components/discussion/headerDiscussionList.tsx
index 54b876f..d450bb3 100644
--- a/components/discussion/headerDiscussionList.tsx
+++ b/components/discussion/headerDiscussionList.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles"
 import { apiGetDivisionOneFeature } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { router, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
@@ -11,6 +12,7 @@ import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
 
 export default function HeaderRightDiscussionList() {
+   const { colors } = useTheme()
    const [isVisible, setVisible] = useState(false)
    const [isAdminDivision, setIsAdminDivision] = useState(false);
    const { token, decryptToken } = useAuthSession()
@@ -45,7 +47,7 @@ export default function HeaderRightDiscussionList() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Diskusi"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/discussionItem.tsx b/components/discussionItem.tsx
index 8a9efdc..1b6fc3b 100644
--- a/components/discussionItem.tsx
+++ b/components/discussionItem.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { Pressable, View } from "react-native";
 import Text from "./Text";
@@ -11,21 +12,22 @@ type Props = {
 }
 
 export default function DiscussionItem({ title, user, date, onPress }: Props) {
+   const { colors } = useTheme();
    return (
-      <Pressable style={[Styles.wrapItemDiscussion]} onPress={onPress}>
+      <Pressable style={[Styles.wrapItemDiscussion, { backgroundColor: colors.card, borderColor: colors.background }]} onPress={onPress}>
          <View style={[Styles.rowItemsCenter, Styles.mb10]}>
-            <Ionicons name="chatbox-ellipses-outline" size={22} color="black" style={Styles.mr10} />
+            <Ionicons name="chatbox-ellipses-outline" size={22} color={colors.text} style={Styles.mr10} />
             <View style={[{ flex: 1 }]}>
                <Text style={{ fontWeight: 'bold' }} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
             </View>
          </View>
          <View style={[Styles.rowSpaceBetween]}>
             <View style={[Styles.rowItemsCenter, { flex: 1 }]}>
-               <Feather name="user" size={18} color="grey" style={Styles.mr05} />
+               <Feather name="user" size={18} color={colors.text} style={Styles.mr05} />
                <Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{user}</Text>
             </View>
             <View style={[Styles.rowItemsCenter, { flex: 1, justifyContent: 'flex-end' }]}>
-               <Feather name="clock" size={18} color="grey" style={Styles.mr05} />
+               <Feather name="clock" size={18} color={colors.text} style={Styles.mr05} />
                <Text style={[Styles.textInformation]}>{date}</Text>
             </View>
          </View>
diff --git a/components/discussion_general/headerDiscussionDetail.tsx b/components/discussion_general/headerDiscussionDetail.tsx
index e546387..9a8c128 100644
--- a/components/discussion_general/headerDiscussionDetail.tsx
+++ b/components/discussion_general/headerDiscussionDetail.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiDeleteDiscussionGeneral, apiUpdateStatusDiscussionGeneral } from "@/lib/api"
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -21,6 +22,7 @@ type Props = {
 
 export default function HeaderRightDiscussionGeneralDetail({ id, active, status }: Props) {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
    const dispatch = useDispatch()
@@ -59,7 +61,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialIcons name="groups" color="black" size={25} />}
+                  icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
                   title="Anggota"
                   onPress={() => {
                      setVisible(false)
@@ -74,7 +76,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                            (
                               <>
                                  <MenuItemRow
-                                    icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                                    icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                                     title="Edit"
                                     onPress={() => {
                                        setVisible(false)
@@ -82,7 +84,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                                     }}
                                  />
                                  <MenuItemRow
-                                    icon={<MaterialIcons name="close" color="black" size={25} />}
+                                    icon={<MaterialIcons name="close" color={colors.text} size={25} />}
                                     title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'}
                                     onPress={() => {
                                        setVisible(false)
@@ -99,7 +101,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                            )
                            :
                            <MenuItemRow
-                              icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
+                              icon={<MaterialCommunityIcons name="archive-outline" color={colors.text} size={25} />}
                               title="Aktifkan Diskusi"
                               onPress={() => {
                                  setVisible(false)
@@ -119,7 +121,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                entityUser.role != "user" && entityUser.role != "coadmin" && active &&
                <View style={[Styles.rowItemsCenter, Styles.mt15]}>
                   <MenuItemRow
-                     icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
+                     icon={<MaterialCommunityIcons name="archive-outline" color={colors.text} size={25} />}
                      title="Arsipkan"
                      onPress={() => {
                         setVisible(false)
diff --git a/components/discussion_general/headerDiscussionGeneral.tsx b/components/discussion_general/headerDiscussionGeneral.tsx
index 8b8a88d..adc554e 100644
--- a/components/discussion_general/headerDiscussionGeneral.tsx
+++ b/components/discussion_general/headerDiscussionGeneral.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -10,6 +11,7 @@ import MenuItemRow from "../menuItemRow"
 import ModalFilter from "../modalFilter"
 
 export default function HeaderDiscussionGeneral() {
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
    const [isFilter, setFilter] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
@@ -23,7 +25,7 @@ export default function HeaderDiscussionGeneral() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Diskusi"
                   onPress={() => {
                      setVisible(false)
@@ -33,7 +35,7 @@ export default function HeaderDiscussionGeneral() {
                {
                   (entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
                   <MenuItemRow
-                     icon={<AntDesign name="filter" color="black" size={25} />}
+                     icon={<AntDesign name="filter" color={colors.text} size={25} />}
                      title="Filter"
                      onPress={() => {
                         setVisible(false)
diff --git a/components/division/discussionDivisionDetail.tsx b/components/division/discussionDivisionDetail.tsx
index 9531cbe..4ddfe96 100644
--- a/components/division/discussionDivisionDetail.tsx
+++ b/components/division/discussionDivisionDetail.tsx
@@ -7,6 +7,7 @@ import { View } from "react-native";
 import Text from "../Text";
 import DiscussionItem from "../discussionItem";
 import Skeleton from "../skeleton";
+import { useTheme } from "@/providers/ThemeProvider";
 
 type Props = {
   id: string;
@@ -17,6 +18,7 @@ type Props = {
 };
 
 export default function DiscussionDivisionDetail({ refreshing }: { refreshing: boolean }) {
+  const { colors } = useTheme();
   const { token, decryptToken } = useAuthSession();
   const { id } = useLocalSearchParams<{ id: string }>();
   const [data, setData] = useState<Props[]>([]);
@@ -48,11 +50,11 @@ export default function DiscussionDivisionDetail({ refreshing }: { refreshing: b
     handleLoad(true)
   }, [])
 
-  
+
   return (
     <View style={[Styles.mb15]}>
       <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
-      <View style={[Styles.wrapPaper]}>
+      <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
 
         {
           loading ?
diff --git a/components/division/fileDivisionDetail.tsx b/components/division/fileDivisionDetail.tsx
index a6825d6..781cc97 100644
--- a/components/division/fileDivisionDetail.tsx
+++ b/components/division/fileDivisionDetail.tsx
@@ -13,6 +13,7 @@ import * as mime from 'react-native-mime-types';
 import { ICarouselInstance } from "react-native-reanimated-carousel";
 import ModalLoading from "../modalLoading";
 import Skeleton from "../skeleton";
+import { useTheme } from "@/providers/ThemeProvider";
 import Text from "../Text";
 
 type Props = {
@@ -25,6 +26,7 @@ type Props = {
 }
 
 export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) {
+   const { colors } = useTheme();
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
    const [data, setData] = useState<Props[]>([])
diff --git a/components/division/fiturDivisionDetail.tsx b/components/division/fiturDivisionDetail.tsx
index 9a2e2eb..6c4e287 100644
--- a/components/division/fiturDivisionDetail.tsx
+++ b/components/division/fiturDivisionDetail.tsx
@@ -7,6 +7,7 @@ import { router, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
 import { View } from "react-native"
 import BorderBottomItem from "../borderBottomItem"
+import { useTheme } from "@/providers/ThemeProvider"
 import Text from "../Text"
 
 type Props = {
@@ -17,6 +18,7 @@ type Props = {
 }
 
 export default function FiturDivisionDetail({ refreshing }: { refreshing: boolean }) {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props>({
@@ -51,11 +53,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
          <View>
             <View style={[Styles.rowSpaceBetween]}>
                <BorderBottomItem
-                  bgColor="white"
+                  bgColor={colors.card}
                   borderType="all"
                   icon={
                      <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                        <AntDesign name="filetext1" size={25} color={'#384288'} />
+                        <AntDesign name="filetext1" size={25} color={colors.primary} />
                      </View>
                   }
                   title="Tugas"
@@ -65,11 +67,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
                />
 
                <BorderBottomItem
-                  bgColor="white"
+                  bgColor={colors.card}
                   borderType="all"
                   icon={
                      <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                        <MaterialIcons name="attach-file" size={25} color={'#384288'} />
+                        <MaterialIcons name="attach-file" size={25} color={colors.primary} />
                      </View>
                   }
                   title="Dokumen"
@@ -81,11 +83,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
 
             <View style={[Styles.rowSpaceBetween]}>
                <BorderBottomItem
-                  bgColor="white"
+                  bgColor={colors.card}
                   borderType="all"
                   icon={
                      <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                        <SimpleLineIcons name="bubbles" size={25} color={'#384288'} />
+                        <SimpleLineIcons name="bubbles" size={25} color={colors.primary} />
                      </View>
                   }
                   title="Diskusi"
@@ -95,11 +97,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
                />
 
                <BorderBottomItem
-                  bgColor="white"
+                  bgColor={colors.card}
                   borderType="all"
                   icon={
                      <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                        <AntDesign name="calendar" size={25} color={'#384288'} />
+                        <AntDesign name="calendar" size={25} color={colors.primary} />
                      </View>
                   }
                   title="Kalender"
diff --git a/components/division/headerDivisionDetail.tsx b/components/division/headerDivisionDetail.tsx
index 5b3334d..4b41a9f 100644
--- a/components/division/headerDivisionDetail.tsx
+++ b/components/division/headerDivisionDetail.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider"
 import { MaterialCommunityIcons } from "@expo/vector-icons"
 import { useState } from "react"
 import { View } from "react-native"
@@ -12,6 +13,7 @@ type Props = {
 }
 
 export default function HeaderRightDivisionDetail({ id }: Props) {
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
 
    return (
@@ -20,7 +22,7 @@ export default function HeaderRightDivisionDetail({ id }: Props) {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="information-variant" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="information-variant" color={colors.text} size={25} />}
                   title="Informasi Divisi"
                   onPress={() => {
                      setVisible(false)
@@ -28,7 +30,7 @@ export default function HeaderRightDivisionDetail({ id }: Props) {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="chart-bar" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="chart-bar" color={colors.text} size={25} />}
                   title="Laporan Divisi"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/division/headerDivisionInfo.tsx b/components/division/headerDivisionInfo.tsx
index d7f44e5..6112fac 100644
--- a/components/division/headerDivisionInfo.tsx
+++ b/components/division/headerDivisionInfo.tsx
@@ -12,6 +12,7 @@ import AlertKonfirmasi from "../alertKonfirmasi"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
+import { useTheme } from "@/providers/ThemeProvider"
 
 type Props = {
    id: string | string[]
@@ -19,6 +20,7 @@ type Props = {
 }
 
 export default function HeaderRightDivisionInfo({ id, active }: Props) {
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const update = useSelector((state: any) => state.divisionUpdate)
@@ -48,7 +50,7 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit Divisi"
                   onPress={() => {
                      setVisible(false)
@@ -56,7 +58,7 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
                   title={active ? "Non Aktifkan" : "Aktifkan"}
                   onPress={() => {
                      setVisible(false)
diff --git a/components/division/headerDivisionList.tsx b/components/division/headerDivisionList.tsx
index 8a6147f..6d269ce 100644
--- a/components/division/headerDivisionList.tsx
+++ b/components/division/headerDivisionList.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -10,6 +11,7 @@ import MenuItemRow from "../menuItemRow"
 import ModalFilter from "../modalFilter"
 
 export default function HeaderRightDivisionList() {
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
    const [isFilter, setFilter] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
@@ -23,7 +25,7 @@ export default function HeaderRightDivisionList() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Divisi"
                   onPress={() => {
                      setVisible(false)
@@ -31,9 +33,9 @@ export default function HeaderRightDivisionList() {
                   }}
                />
                {
-                  (entityUser.role == "supadmin" || entityUser.role == "developer") &&
+                  (entityUser.role == "userRole" || entityUser.role == "developer") &&
                   <MenuItemRow
-                     icon={<AntDesign name="filter" color="black" size={25} />}
+                     icon={<AntDesign name="filter" color={colors.text} size={25} />}
                      title="Filter"
                      onPress={() => {
                         setVisible(false)
@@ -47,7 +49,7 @@ export default function HeaderRightDivisionList() {
                {
                   (entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin") &&
                   <MenuItemRow
-                     icon={<MaterialCommunityIcons name="chart-bar" color="black" size={25} />}
+                     icon={<MaterialCommunityIcons name="chart-bar" color={colors.text} size={25} />}
                      title="Laporan"
                      onPress={() => {
                         setVisible(false)
diff --git a/components/division/reportChartDocument.tsx b/components/division/reportChartDocument.tsx
index 7109ca5..865bf5f 100644
--- a/components/division/reportChartDocument.tsx
+++ b/components/division/reportChartDocument.tsx
@@ -1,9 +1,11 @@
 import Styles from "@/constants/Styles";
 import { Dimensions, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
+import { useTheme } from "@/providers/ThemeProvider";
 import Text from "../Text";
 
 export default function ReportChartDocument({ data }: { data: { label: string; value: number; }[] }) {
+   const { colors } = useTheme();
    const maxValue = Math.max(...data.map(i => i.value))
    const barData = [
       { value: 23, label: 'Gambar', },
@@ -12,9 +14,11 @@ export default function ReportChartDocument({ data }: { data: { label: string; v
    const width = Dimensions.get("window").width;
 
    return (
-      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
+      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
          <BarChart
+            xAxisLabelTextStyle={{ color: colors.text }}
+            yAxisTextStyle={{ color: colors.text }}
             showFractionalValues={false}
             showYAxisIndices
             noOfSections={maxValue < 5 ? 2 : 4}
@@ -32,7 +36,7 @@ export default function ReportChartDocument({ data }: { data: { label: string; v
                         justifyContent: 'center',
                         width: width * 0.25
                      }}>
-                     <Text>{item.value}</Text>
+                     <Text style={{ color: colors.text }}>{item.value}</Text>
                   </View>
                );
             }}
diff --git a/components/division/reportChartEvent.tsx b/components/division/reportChartEvent.tsx
index 25beb34..ec3398e 100644
--- a/components/division/reportChartEvent.tsx
+++ b/components/division/reportChartEvent.tsx
@@ -1,9 +1,11 @@
 import Styles from "@/constants/Styles";
 import { Dimensions, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
+import { useTheme } from "@/providers/ThemeProvider";
 import Text from "../Text";
 
 export default function ReportChartEvent({ data }: { data: { label: string; value: number; }[] }) {
+   const { colors } = useTheme();
    const width = Dimensions.get("window").width;
    const maxValue = Math.max(...data.map(i => i.value))
    const barData = [
@@ -12,9 +14,11 @@ export default function ReportChartEvent({ data }: { data: { label: string; valu
    ];
 
    return (
-      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
+      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>ACARA DIVISI</Text>
          <BarChart
+            xAxisLabelTextStyle={{ color: colors.text }}
+            yAxisTextStyle={{ color: colors.text }}
             showFractionalValues={false}
             showYAxisIndices
             noOfSections={maxValue < 5 ? 2 : 4}
@@ -32,7 +36,7 @@ export default function ReportChartEvent({ data }: { data: { label: string; valu
                         justifyContent: 'center',
                         width: width * 0.25
                      }}>
-                     <Text>{item.value}</Text>
+                     <Text style={{ color: colors.text }}>{item.value}</Text>
                   </View>
                );
             }}
diff --git a/components/division/reportChartProgress.tsx b/components/division/reportChartProgress.tsx
index 8fbeed1..2e5d128 100644
--- a/components/division/reportChartProgress.tsx
+++ b/components/division/reportChartProgress.tsx
@@ -1,9 +1,11 @@
 import Styles from "@/constants/Styles";
 import { View } from "react-native";
 import { PieChart } from "react-native-gifted-charts";
+import { useTheme } from "@/providers/ThemeProvider";
 import Text from "../Text";
 
 export default function ReportChartProgress({ data }: { data: { color: string; text: string; value: number; }[] }) {
+   const { colors } = useTheme();
    const pieData = [
       { value: 54, text: "54%", color: '#177AD5' },
       { value: 40, text: "40%", color: '#92cc76' },
@@ -12,13 +14,13 @@ export default function ReportChartProgress({ data }: { data: { color: string; t
    ];
 
    return (
-      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
+      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
          <PieChart
             data={data}
             showText
             showValuesAsTooltipText
-            textColor="black"
+            textColor={colors.text}
             radius={120}
             textSize={15}
             focusOnPress={false}
diff --git a/components/division/taskDivisionDetail.tsx b/components/division/taskDivisionDetail.tsx
index c0ab473..fb385b3 100644
--- a/components/division/taskDivisionDetail.tsx
+++ b/components/division/taskDivisionDetail.tsx
@@ -7,6 +7,7 @@ import React, { useEffect, useState } from "react";
 import { Dimensions, Pressable, View } from "react-native";
 import { ICarouselInstance } from "react-native-reanimated-carousel";
 import Skeleton from "../skeleton";
+import { useTheme } from "@/providers/ThemeProvider";
 import Text from "../Text";
 
 type Props = {
@@ -19,6 +20,7 @@ type Props = {
 }
 
 export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean }) {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props[]>([])
@@ -57,10 +59,10 @@ export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean
                :
                data.length > 0 ?
                   data.map((item, index) => (
-                     <Pressable key={index} style={[Styles.wrapPaper, Styles.mb05]} onPress={() => { router.push(`/division/${id}/task/${item.idProject}`) }}>
+                     <Pressable key={index} style={[Styles.wrapPaper, Styles.mb05, { backgroundColor: colors.card, borderColor: colors.background }]} onPress={() => { router.push(`/division/${id}/task/${item.idProject}`) }}>
                         <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item.title} - {item.projectTitle}</Text>
                         <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                           <Feather name="clock" size={18} color="grey" style={Styles.mr05} />
+                           <Feather name="clock" size={18} color={colors.text} style={Styles.mr05} />
                            <Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{item.dateStart} - {item.dateEnd}</Text>
                         </View>
                      </Pressable>
diff --git a/components/document/headerDocument.tsx b/components/document/headerDocument.tsx
index 03fe8ed..8837ad4 100644
--- a/components/document/headerDocument.tsx
+++ b/components/document/headerDocument.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
 import { apiCreateFolderDocument, apiUploadFileDocument } from "@/lib/api";
 import { setUpdateDokumen } from "@/lib/dokumenUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { useLocalSearchParams } from "expo-router";
@@ -16,6 +17,7 @@ import MenuItemRow from "../menuItemRow";
 import ModalFloat from "../modalFloat";
 
 export default function HeaderRightDocument({ path, isMember }: { path: string, isMember: boolean }) {
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false);
    const [newFolder, setNewFolder] = useState(false);
    const { id } = useLocalSearchParams<{ id: string }>();
@@ -129,7 +131,7 @@ export default function HeaderRightDocument({ path, isMember }: { path: string,
                            icon={
                               <MaterialCommunityIcons
                                  name="folder-open"
-                                 color="black"
+                                 color={colors.text}
                                  size={25}
                               />
                            }
@@ -143,7 +145,7 @@ export default function HeaderRightDocument({ path, isMember }: { path: string,
                         />
 
                         <MenuItemRow
-                           icon={<MaterialIcons name="upload-file" color="black" size={25} />}
+                           icon={<MaterialIcons name="upload-file" color={colors.text} size={25} />}
                            title="Upload File"
                            onPress={pickDocumentAsync}
                         />
diff --git a/components/document/itemFile.tsx b/components/document/itemFile.tsx
index 27c84b3..9d847bd 100644
--- a/components/document/itemFile.tsx
+++ b/components/document/itemFile.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { Pressable, View } from "react-native";
 import Text from "../Text";
@@ -15,8 +16,9 @@ type Props = {
 }
 
 export default function ItemFile({ category, checked, dateTime, title, onChecked, onPress, canChecked }: Props) {
+   const { colors } = useTheme();
    return (
-      <View style={[Styles.wrapItemBorderBottom]}>
+      <View style={[Styles.wrapItemBorderBottom, { borderColor: colors.background }]}>
          <View style={[Styles.rowItemsCenter]}>
             <Pressable onPress={onPress}>
                {
@@ -54,8 +56,8 @@ export default function ItemFile({ category, checked, dateTime, title, onChecked
                      <Pressable onPress={onChecked}>
                         {
                            checked
-                              ? <MaterialCommunityIcons name="checkbox-marked-circle" size={25} color={'black'} />
-                              : <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={25} color={'#ced4da'} />
+                              ? <MaterialCommunityIcons name="checkbox-marked-circle" size={25} color={colors.text} />
+                              : <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={25} color={colors.icon} />
                         }
 
                      </Pressable>
diff --git a/components/document/menuBottomSelectDocument.tsx b/components/document/menuBottomSelectDocument.tsx
index 820314a..f746c71 100644
--- a/components/document/menuBottomSelectDocument.tsx
+++ b/components/document/menuBottomSelectDocument.tsx
@@ -1,5 +1,6 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useState } from "react";
 import { Pressable, ScrollView, View } from "react-native";
@@ -22,6 +23,7 @@ type Props = {
 }
 
 export default function MenuBottomSelectDocument({ onDone }: Props) {
+   const { colors } = useTheme();
    const [isModal, setModal] = useState(false)
    const [isInformasi, setInformasi] = useState(false)
    const [isRename, setRename] = useState(false)
@@ -106,17 +108,17 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="folder-move-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="folder-move-outline" color={colors.text} size={25} />}
                   title="Pindah"
                   onPress={() => { handleMoveCopy('move') }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="folder-multiple-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="folder-multiple-outline" color={colors.text} size={25} />}
                   title="Salin"
                   onPress={() => { handleMoveCopy('copy') }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="information-variant" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="information-variant" color={colors.text} size={25} />}
                   title="Informasi"
                   onPress={() => { setModal(false); setInformasi(true) }}
                />
@@ -134,65 +136,65 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
                <ItemDetailMember category="location" value="home" border />
                <ItemDetailMember category="owner" value="Sosial Kemasyarakatan" border />
                <ItemDetailMember category="calendar" value="12 Maret 2025" border />
-               <Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom]} onPress={onPress}>
+               <Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom, { borderColor: colors.background }]} onPress={onPress}>
                   <View style={[Styles.rowItemsCenter]}>
-                     <MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
+                     <MaterialCommunityIcons name="share-variant-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                      <Text style={[Styles.textDefault]}>Telah dibagikan ke divisi</Text>
                   </View>
-                  <MaterialCommunityIcons name="chevron-down" size={22} color="black" />
+                  <MaterialCommunityIcons name="chevron-down" size={22} color={colors.text} />
                </Pressable>
                <ItemAccordion isExpanded={open} viewKey="Accordion" duration={500}>
                   <ScrollView style={[Styles.w100, { height: 200 }]} >
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                        <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
                      </View>
                      <View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
diff --git a/components/document/modalInformasi.tsx b/components/document/modalInformasi.tsx
index f64efea..912a370 100644
--- a/components/document/modalInformasi.tsx
+++ b/components/document/modalInformasi.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiGetDocumentInformasi } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useEffect, useState } from "react";
 import { ActivityIndicator, Pressable, ScrollView, View } from "react-native";
@@ -26,6 +27,7 @@ type PropsShare = {
 }
 
 export default function ModalInformasi({ data }: { data: any }) {
+   const { colors } = useTheme();
    const open = useSharedValue(false)
    const [dataInformasi, setDataInformasi] = useState<Props>()
    const { token, decryptToken } = useAuthSession()
@@ -76,12 +78,12 @@ export default function ModalInformasi({ data }: { data: any }) {
                   <ItemDetailMember category="location" value={dataInformasi?.path} border />
                   <ItemDetailMember category="owner" value={dataInformasi?.division} border />
                   <ItemDetailMember category="calendar" value={dataInformasi?.createdAt} border />
-                  <Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom]} onPress={() => { open.value = !open.value; }}>
+                  <Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom, { borderColor: colors.background }]} onPress={() => { open.value = !open.value; }}>
                      <View style={[Styles.rowItemsCenter]}>
-                        <MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="share-variant-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.textDefault]}>Telah dibagikan ke divisi</Text>
                      </View>
-                     <MaterialCommunityIcons name="chevron-down" size={22} color="black" />
+                     <MaterialCommunityIcons name="chevron-down" size={22} color={colors.text} />
                   </Pressable>
                   <ItemAccordion isExpanded={open} viewKey="Accordion" duration={500}>
                      <ScrollView style={[Styles.w100, { height: 200 }]} >
@@ -89,7 +91,7 @@ export default function ModalInformasi({ data }: { data: any }) {
                            dataShare.length > 0 ? (
                               dataShare.map((item, index) => (
                                  <View key={index} style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
-                                    <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+                                    <MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                                     <Text style={[Styles.textDefault]}>{item.name}</Text>
                                  </View>
                               ))
diff --git a/components/document/modalMore.tsx b/components/document/modalMore.tsx
index bdd01b3..2f82955 100644
--- a/components/document/modalMore.tsx
+++ b/components/document/modalMore.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
 import { apiCopyDocument, apiMoveDocument } from "@/lib/api";
 import { setUpdateDokumen } from "@/lib/dokumenUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -35,6 +36,7 @@ export default function ModalMore({
    data: Props[];
    share: boolean;
 }) {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [isInformasi, setInformasi] = useState(false);
    const [isCut, setIsCut] = useState(false);
@@ -110,7 +112,7 @@ export default function ModalMore({
                   icon={
                      <MaterialCommunityIcons
                         name="folder-move-outline"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
@@ -125,7 +127,7 @@ export default function ModalMore({
                   icon={
                      <MaterialCommunityIcons
                         name="folder-multiple-outline"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
@@ -140,7 +142,7 @@ export default function ModalMore({
                   icon={
                      <MaterialCommunityIcons
                         name="information-variant"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
diff --git a/components/document/modalNewFolder.tsx b/components/document/modalNewFolder.tsx
index 43927ac..5635e12 100644
--- a/components/document/modalNewFolder.tsx
+++ b/components/document/modalNewFolder.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiCreateFolderDocument } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import { Pressable, View } from "react-native";
@@ -10,6 +11,7 @@ import { InputForm } from "../inputForm";
 import ModalFloat from "../modalFloat";
 
 export function ModalNewFolder({ path, onCreated }: { path: string, onCreated: () => void }) {
+   const { colors } = useTheme()
    const { token, decryptToken } = useAuthSession()
    const [newFolder, setNewFolder] = useState(false)
    const [name, setName] = useState("")
@@ -39,7 +41,7 @@ export function ModalNewFolder({ path, onCreated }: { path: string, onCreated: (
 
    return (
       <>
-         <Pressable style={[Styles.pv05, Styles.borderRight, { width: '50%' }]} onPress={() => setNewFolder(true)}>
+         <Pressable style={[Styles.pv05, Styles.borderRight, { width: '50%', borderColor: colors.background }]} onPress={() => setNewFolder(true)}>
             <Text style={[Styles.textDefaultSemiBold, { textAlign: 'center' }]}>FOLDER BARU</Text>
          </Pressable>
 
diff --git a/components/document/modalSalinMove.tsx b/components/document/modalSalinMove.tsx
index 01a4e96..e39081d 100644
--- a/components/document/modalSalinMove.tsx
+++ b/components/document/modalSalinMove.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles"
 import { apiGetDocument } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign, Ionicons } from "@expo/vector-icons"
 import { useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
@@ -37,6 +38,7 @@ type PropsPath = {
 };
 
 export default function ModalSalinMove({ open, close, category, onConfirm, dataChoose }: Props) {
+   const { colors } = useTheme()
    const [data, setData] = useState<DataProps[]>([])
    const { token, decryptToken } = useAuthSession()
    const [path, setPath] = useState('home')
@@ -73,9 +75,9 @@ export default function ModalSalinMove({ open, close, category, onConfirm, dataC
                      }}
                   >
                      {item.id != "home" && (
-                        <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
+                        <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color={colors.text} />
                      )}
-                     <Text> {item.name} </Text>
+                     <Text style={{ color: colors.text }}> {item.name} </Text>
                   </Pressable>
                ))
             }
@@ -106,7 +108,7 @@ export default function ModalSalinMove({ open, close, category, onConfirm, dataC
                   <Text style={[Styles.textDefault, Styles.cGray, Styles.mt15, { textAlign: 'center' }]}>Tidak ada data</Text>
             }
          </View>
-         <View style={[Styles.rowOnly, Styles.mt15, Styles.absolute0]}>
+         <View style={[Styles.rowOnly, Styles.mt15, Styles.absolute0, { backgroundColor: colors.background }]}>
             <ModalNewFolder path={path} onCreated={() => getData()} />
             <Pressable style={[Styles.pv05, { width: '50%' }]} onPress={() => onConfirm(path)}>
                <Text style={[Styles.textDefaultSemiBold, { textAlign: 'center' }]}>{category == 'copy' ? 'SALIN' : 'PINDAH'}</Text>
@@ -114,4 +116,4 @@ export default function ModalSalinMove({ open, close, category, onConfirm, dataC
          </View>
       </DrawerBottom>
    )
-}
\ No newline at end of file
+}
diff --git a/components/drawerBottom.tsx b/components/drawerBottom.tsx
index 75f0a93..4fada79 100644
--- a/components/drawerBottom.tsx
+++ b/components/drawerBottom.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialIcons } from "@expo/vector-icons";
 import { Dimensions, KeyboardAvoidingView, Platform, Pressable, View } from "react-native";
 import Modal from 'react-native-modal';
@@ -17,6 +18,7 @@ type Props = {
 
 export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true, keyboard = false }: Props) {
    const tinggiScreen = Dimensions.get("window").height;
+   const { colors } = useTheme();
    const tinggiInput = height != undefined ? height : 25
    const tinggiFix = tinggiScreen * tinggiInput / 100;
 
@@ -43,11 +45,11 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
                   behavior={Platform.OS === 'ios' ? 'padding' : undefined}
                   keyboardVerticalOffset={0}
                >
-                  <View style={[Styles.modalContentNew, { height: tinggiFix }]}>
-                     <View style={[Styles.titleContainerNew]}>
+                  <View style={[Styles.modalContentNew, { height: tinggiFix, backgroundColor: colors.background }]}>
+                     <View style={[Styles.titleContainerNew, { borderBottomColor: colors.icon + '20' }]}>
                         <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefault, Styles.w90]}>{title}</Text>
                         <Pressable onPress={() => setVisible(false)}>
-                           <MaterialIcons name="close" color="black" size={22} />
+                           <MaterialIcons name="close" color={colors.text} size={22} />
                         </Pressable>
                      </View>
                      <View style={Styles.contentContainer}>
@@ -56,11 +58,11 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
                   </View>
                </KeyboardAvoidingView>
                :
-               <View style={[Styles.modalContentNew, { height: tinggiFix }]}>
-                  <View style={[Styles.titleContainerNew]}>
+               <View style={[Styles.modalContentNew, { height: tinggiFix, backgroundColor: colors.background }]}>
+                  <View style={[Styles.titleContainerNew, { borderBottomColor: colors.icon + '20' }]}>
                      <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefault, Styles.w90]}>{title}</Text>
                      <Pressable onPress={() => setVisible(false)}>
-                        <MaterialIcons name="close" color="black" size={22} />
+                        <MaterialIcons name="close" color={colors.text} size={22} />
                      </Pressable>
                   </View>
                   <View style={[Styles.contentContainer, { flex: 1 }]}>
diff --git a/components/eventItem.tsx b/components/eventItem.tsx
index 757760c..7ca758a 100644
--- a/components/eventItem.tsx
+++ b/components/eventItem.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Pressable, View } from "react-native";
 import Text from "./Text";
 
@@ -12,8 +13,17 @@ type Props = {
 }
 
 export default function EventItem({ category, title, user, jamAwal, jamAkhir, onPress }: Props) {
+   const { theme } = useTheme();
+
+   const getBackgroundColor = (cat: 'purple' | 'orange') => {
+      if (theme === 'dark') {
+         return cat === 'orange' ? '#5A2D0C' : '#1F2255';
+      }
+      return cat === 'orange' ? '#FED6C5' : '#D8D8F1';
+   };
+
    return (
-      <Pressable style={[Styles.itemEvent, { backgroundColor: category == 'orange' ? '#FED6C5' : '#D8D8F1' }]} onPress={onPress}>
+      <Pressable style={[Styles.itemEvent, { backgroundColor: getBackgroundColor(category) }]} onPress={onPress}>
          <View style={[Styles.dividerEvent, { backgroundColor: category == 'orange' ? '#FB804C' : '#535FCA' }]} />
          <View style={[Styles.w90]}>
             <Text>{jamAwal} - {jamAkhir}</Text>
diff --git a/components/group/headerGroupList.tsx b/components/group/headerGroupList.tsx
index 0cf50ed..10ec969 100644
--- a/components/group/headerGroupList.tsx
+++ b/components/group/headerGroupList.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiCreateGroup } from "@/lib/api"
 import { setUpdateGroup } from "@/lib/groupSlice"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { useState } from "react"
 import { View } from "react-native"
@@ -17,6 +18,7 @@ export default function HeaderRightGroupList() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.groupUpdate)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme()
    const [isVisible, setVisible] = useState(false)
    const [isVisibleTambah, setVisibleTambah] = useState(false)
    const [title, setTitle] = useState('')
@@ -62,7 +64,7 @@ export default function HeaderRightGroupList() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={() => setVisible(false)} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Lembaga"
                   onPress={() => {
                      setVisible(false);
@@ -86,6 +88,7 @@ export default function HeaderRightGroupList() {
                      placeholder="Nama Lembaga Desa"
                      required label="Lembaga Desa"
                      error={error.title}
+                     bg={colors.card}
                      errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter"
                      onChange={(val) => { validationForm(val, 'title') }}
                   />
diff --git a/components/home/carouselHome.tsx b/components/home/carouselHome.tsx
index d2610b1..d570cc1 100644
--- a/components/home/carouselHome.tsx
+++ b/components/home/carouselHome.tsx
@@ -4,6 +4,7 @@ import { apiGetBanner, apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/bannerSlice";
 import { setEntityUser } from "@/lib/userSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import React, { useEffect } from "react";
 import { Dimensions, Image, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
@@ -13,6 +14,7 @@ import Text from "../Text";
 
 export default function CaraouselHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme();
    const ref = React.useRef<ICarouselInstance>(null);
    const width = Dimensions.get("window").width;
    const progress = useSharedValue<number>(0);
@@ -66,12 +68,12 @@ export default function CaraouselHome({ refreshing }: { refreshing: boolean }) {
                   renderItem={({ index }) => (
                      <Image
                         source={{ uri: `${ConstEnv.url_storage}/files/${entities[index].image}` }}
-                        style={[Styles.caraoselContent]}
+                        style={[Styles.caraoselContent, { backgroundColor: colors.primary }]}
                      />
                   )}
                />
                :
-               <View style={[Styles.caraoselContent, { height: width / 2.5 }]}>
+               <View style={[Styles.caraoselContent, { height: width / 2.5, backgroundColor: colors.primary }]}>
                   <Text style={[Styles.textDefault, Styles.cWhite, { textAlign: 'center' }]}>BANNER</Text>
                </View>
          }
diff --git a/components/home/chartDokumenHome.tsx b/components/home/chartDokumenHome.tsx
index f78be1f..ee76ae2 100644
--- a/components/home/chartDokumenHome.tsx
+++ b/components/home/chartDokumenHome.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useEffect, useState } from "react";
 import { Dimensions, View } from "react-native";
 import { BarChart } from "react-native-gifted-charts";
@@ -16,6 +17,7 @@ type Props = {
 export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }) {
    const [loading, setLoading] = useState(true)
    const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme();
    const [data, setData] = useState<Props>([])
    const [maxValue, setMaxValue] = useState(5)
    const barData = [
@@ -56,7 +58,7 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
    }, []);
 
    return (
-      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
+      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
          {
             loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
@@ -70,6 +72,8 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
                   isAnimated
                   width={width - 140}
                   barWidth={width * 0.25}
+                  yAxisTextStyle={{ color: colors.text }}
+                  xAxisLabelTextStyle={{ color: colors.text }}
                   renderTooltip={(item: any, index: any) => {
                      return (
                         <View
diff --git a/components/home/chartProgresHome.tsx b/components/home/chartProgresHome.tsx
index 3b2fe67..ec352aa 100644
--- a/components/home/chartProgresHome.tsx
+++ b/components/home/chartProgresHome.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useEffect, useState } from "react";
 import { View } from "react-native";
 import { PieChart } from "react-native-gifted-charts";
@@ -15,6 +16,7 @@ type Props = {
 
 export default function ChartProgresHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme();
    const [data, setData] = useState<Props>([])
    const [loading, setLoading] = useState(true)
 
@@ -46,7 +48,7 @@ export default function ChartProgresHome({ refreshing }: { refreshing: boolean }
    }, []);
 
    return (
-      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
+      <View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
          <Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
          {
             loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
@@ -56,7 +58,7 @@ export default function ChartProgresHome({ refreshing }: { refreshing: boolean }
                      data={data}
                      showText
                      showValuesAsTooltipText
-                     textColor="black"
+                     textColor={colors.text}
                      radius={120}
                      textSize={15}
                      focusOnPress={false}
diff --git a/components/home/divisionHome.tsx b/components/home/divisionHome.tsx
index 2dfd8b7..872bbb6 100644
--- a/components/home/divisionHome.tsx
+++ b/components/home/divisionHome.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
 import { router } from "expo-router";
 import React, { useEffect, useState } from "react";
@@ -17,6 +18,7 @@ type Props = {
 
 export default function DivisionHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme();
    const ref = React.useRef<ICarouselInstance>(null)
    const width = Dimensions.get("window").width
    const [data, setData] = useState<Props[]>([])
@@ -58,13 +60,13 @@ export default function DivisionHome({ refreshing }: { refreshing: boolean }) {
                :
                data.length > 0 ?
                   data.map((item, index) => (
-                     <Pressable style={[Styles.wrapPaper, Styles.mb05,]} key={index} onPress={() => { router.push(`/division/${item.id}`) }}>
+                     <Pressable style={[Styles.wrapPaper, Styles.mb05, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]} key={index} onPress={() => { router.push(`/division/${item.id}`) }}>
                         <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
                            <View>
                               <Text style={[Styles.textDefaultSemiBold]}>{item.name}</Text>
                               <Text style={[Styles.textDefault]}>{item.jumlah} Kegiatan</Text>
                            </View>
-                           <Feather name="chevron-right" size={20} color="black" />
+                           <Feather name="chevron-right" size={20} color={colors.text} />
                         </View>
                      </Pressable>
                   ))
diff --git a/components/home/eventHome.tsx b/components/home/eventHome.tsx
index 4c03e4f..049b0e0 100644
--- a/components/home/eventHome.tsx
+++ b/components/home/eventHome.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router } from "expo-router";
 import { useEffect, useState } from "react";
 import { View } from "react-native";
@@ -24,6 +25,7 @@ type Props = {
 
 export default function EventHome({ refreshing }: { refreshing: boolean }) {
    const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme();
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
 
@@ -52,7 +54,7 @@ export default function EventHome({ refreshing }: { refreshing: boolean }) {
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Acara Hari Ini</Text>
-         <View style={[Styles.wrapPaper]}>
+         <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
 
             {
                loading ?
diff --git a/components/home/fiturHome.tsx b/components/home/fiturHome.tsx
index 03878cf..43004c7 100644
--- a/components/home/fiturHome.tsx
+++ b/components/home/fiturHome.tsx
@@ -1,12 +1,14 @@
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
+import { router } from "expo-router"
 import React from "react"
 import { View } from "react-native"
 import { ButtonFiturMenu } from "../buttonFiturMenu"
-import { router } from "expo-router"
 import Text from "../Text"
 
 export default function FiturHome() {
+   const { colors } = useTheme();
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
diff --git a/components/inputDate.tsx b/components/inputDate.tsx
index 50115da..c5898d2 100644
--- a/components/inputDate.tsx
+++ b/components/inputDate.tsx
@@ -1,6 +1,7 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { stringToDate, stringToDateTime } from "@/lib/fun_stringToDate";
+import { useTheme } from "@/providers/ThemeProvider";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
@@ -26,6 +27,7 @@ type Props = {
 
 
 export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
+   const { colors } = useTheme();
    const [modal, setModal] = useState(false);
    const [valueFix, setValueFix] = useState(new Date())
    const [valueFirst, setValueFirst] = useState(mode == "date" ? dayjs(new Date()).format("DD-MM-YYYY") : mode == "time" ? dayjs(new Date()).format("HH:mm") : "")
@@ -84,7 +86,7 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
                   </Text>
                )
             }
-            <Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: 'white' }]} onPress={() => setModal(true)} disabled={disable}>
+            <Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: colors.card }]} onPress={() => setModal(true)} disabled={disable}>
                <Text style={!value && [Styles.cGray]}>{value ? value : placeholder}</Text>
             </Pressable>
             {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
@@ -104,7 +106,7 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
                         display="spinner"
                         onChange={(event, date) => { onChangeDate(event.type, date) }}
                         onTouchCancel={() => setModal(false)}
-                        textColor="black"
+                        textColor={colors.text}
                      />
                   </ModalFloat>
                )
diff --git a/components/inputForm.tsx b/components/inputForm.tsx
index e7f0b42..bd3773f 100644
--- a/components/inputForm.tsx
+++ b/components/inputForm.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Dimensions, Platform, TextInput, View } from "react-native";
 import Text from "./Text";
 
@@ -15,7 +16,7 @@ type Props = {
    type: 'default' | 'visible-password' | 'numeric'
    round?: boolean
    width?: number
-   bg?: 'white' | 'transparent'
+   bg?: string
    value?: string
    disable?: boolean
    multiline?: boolean
@@ -26,13 +27,14 @@ type Props = {
 
 export function InputForm({ label, value, placeholder, onChange, info, disable, error, errorText, required, itemLeft, itemRight, type, round, width, bg, multiline, mb = true, focus }: Props) {
    const lebar = Dimensions.get("window").width;
+   const { colors } = useTheme();
 
    if (itemLeft != undefined || itemRight != undefined) {
       return (
          <View style={[mb && Styles.mb10]}>
             {
                label != undefined && (
-                  <Text style={[{ marginBottom: 5, textTransform: "capitalize" }, error && Styles.cError]}>
+                  <Text style={[{ marginBottom: 5, textTransform: "capitalize", color: colors.text }, error && Styles.cError]}>
                      {label}
                      {required && (<Text style={Styles.cError}>*</Text>)}
                   </Text>
@@ -43,13 +45,18 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
                multiline && { alignItems: 'flex-end' },
                round && Styles.round30,
-               { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' },
+               {
+                  backgroundColor: bg
+                     ? (bg === 'white' ? (colors.background === '#151718' ? '#2d2e2f' : 'white') : bg)
+                     : 'transparent',
+                  borderColor: colors.icon
+               },
                error && { borderColor: "red" },
                Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
                { alignItems: 'center' },
                multiline
-                  ? { alignItems: "flex-end" } // multiline: tombol send di bawah
-                  : { alignItems: "center" }, // default: tetap di tengah
+                  ? { alignItems: "flex-end" }
+                  : { alignItems: "center" },
             ]}>
                {itemRight != undefined ? itemRight : itemLeft}
                <TextInput
@@ -58,19 +65,19 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                   placeholder={placeholder}
                   keyboardType={type}
                   onChangeText={onChange}
-                  placeholderTextColor={'gray'}
+                  placeholderTextColor={colors.icon}
                   multiline={multiline}
                   numberOfLines={3}
                   style={[
                      Styles.mh05,
                      multiline && { height: '100%', maxHeight: 100 },
-                     { width: width ? lebar * width / 100 : lebar * 0.78, color: 'black' },
+                     { width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
                      Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 3 } : { paddingVertical: 0 },
                   ]}
                />
             </View>
             {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
-            {info != undefined && (<Text style={[Styles.textInformation, Styles.cGray, Styles.mt05]}>{info}</Text>)}
+            {info != undefined && (<Text style={[Styles.textInformation, { color: colors.icon }, Styles.mt05]}>{info}</Text>)}
          </View>
       )
    }
@@ -81,7 +88,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
       <View style={[Styles.mb10]}>
          {
             label != undefined && (
-               <Text style={[Styles.mb05, error && Styles.cError]}>
+               <Text style={[Styles.mb05, error && Styles.cError, { color: colors.text }]}>
                   {label}
                   {required && (<Text style={Styles.cError}>*</Text>)}
                </Text>
@@ -92,14 +99,27 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
             placeholder={placeholder}
             keyboardType={type}
             editable={!disable}
-            style={[Styles.inputRoundForm, Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 }, error && { borderColor: "red" }, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, { color: 'black' }, multiline && { height: 150, textAlignVertical: 'top' }]}
+            style={[
+               Styles.inputRoundForm,
+               Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 },
+               error && { borderColor: "red" },
+               round && Styles.round30,
+               {
+                  backgroundColor: bg
+                     ? (bg === 'white' ? (colors.background === '#151718' ? '#2d2e2f' : 'white') : bg)
+                     : 'transparent',
+                  borderColor: colors.icon
+               },
+               { color: colors.text },
+               multiline && { height: 150, textAlignVertical: 'top' }
+            ]}
             onChangeText={onChange}
-            placeholderTextColor={'gray'}
+            placeholderTextColor={colors.icon}
             multiline={multiline}
             numberOfLines={multiline ? 5 : undefined}
          />
          {error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
-         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
+         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
       </View>
    )
-}
\ No newline at end of file
+}
diff --git a/components/itemDetailMember.tsx b/components/itemDetailMember.tsx
index 20fa869..42b9caa 100644
--- a/components/itemDetailMember.tsx
+++ b/components/itemDetailMember.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import { View } from "react-native";
 import Text from "./Text";
@@ -10,66 +11,69 @@ type Props = {
 }
 
 
-const data = {
+const getData = (color: string) => ({
    nik: {
       label: 'NIK',
-      icon: <MaterialCommunityIcons name="card-account-details" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialCommunityIcons name="card-account-details" size={22} color={color} style={[Styles.mr10]} />
    },
    group: {
       label: 'Lembaga Desa',
-      icon: <AntDesign name="tags" size={22} color="black" style={[Styles.mr10]} />
+      icon: <AntDesign name="tags" size={22} color={color} style={[Styles.mr10]} />
    },
    position: {
       label: 'Jabatan',
-      icon: <MaterialCommunityIcons name="account-tie" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialCommunityIcons name="account-tie" size={22} color={color} style={[Styles.mr10]} />
    },
    phone: {
       label: 'No Telepon',
-      icon: <MaterialIcons name="phone" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialIcons name="phone" size={22} color={color} style={[Styles.mr10]} />
    },
    email: {
       label: 'Email',
-      icon: <MaterialIcons name="email" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialIcons name="email" size={22} color={color} style={[Styles.mr10]} />
    },
    gender: {
       label: 'Jenis Kelamin',
-      icon: <MaterialCommunityIcons name="gender-male-female" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialCommunityIcons name="gender-male-female" size={22} color={color} style={[Styles.mr10]} />
    },
    dokumen: {
       label: 'Dokumen',
-      icon: <MaterialCommunityIcons name="file-document-outline" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialCommunityIcons name="file-document-outline" size={22} color={color} style={[Styles.mr10]} />
    },
    type: {
       label: 'Tipe',
-      icon: <MaterialIcons name="category" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialIcons name="category" size={22} color={color} style={[Styles.mr10]} />
    },
    location: {
       label: 'Lokasi',
-      icon: <MaterialIcons name="location-pin" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialIcons name="location-pin" size={22} color={color} style={[Styles.mr10]} />
    },
    owner: {
       label: 'Pemilik',
-      icon: <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialCommunityIcons name="account-group-outline" size={22} color={color} style={[Styles.mr10]} />
    },
    calendar: {
       label: 'Tanggal',
-      icon: <MaterialCommunityIcons name="calendar-blank" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialCommunityIcons name="calendar-blank" size={22} color={color} style={[Styles.mr10]} />
    },
    share: {
       label: 'Bagikan',
-      icon: <MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
+      icon: <MaterialCommunityIcons name="share-variant-outline" size={22} color={color} style={[Styles.mr10]} />
    }
-}
+})
 
 
 export default function ItemDetailMember({ category, value, border }: Props) {
+   const { colors } = useTheme();
+   const data = getData(colors.text);
+
    return (
       <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, !border && Styles.mt10, border && Styles.wrapItemBorderBottom]}>
          <View style={[Styles.rowItemsCenter]}>
             {data[category].icon}
-            <Text style={[Styles.textDefault]}>{data[category].label}</Text>
+            <Text style={[Styles.textDefault, { color: colors.text }]}>{data[category].label}</Text>
          </View>
-         <Text style={[Styles.textDefault, Styles.w60, { textAlign: 'right' }]} numberOfLines={1} ellipsizeMode="tail">{value}</Text>
+         <Text style={[Styles.textDefault, Styles.w60, { textAlign: 'right', color: colors.text }]} numberOfLines={1} ellipsizeMode="tail">{value}</Text>
       </View>
    )
 }
\ No newline at end of file
diff --git a/components/itemSectionTanggalTugas.tsx b/components/itemSectionTanggalTugas.tsx
index 440b926..e53f225 100644
--- a/components/itemSectionTanggalTugas.tsx
+++ b/components/itemSectionTanggalTugas.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Pressable, View } from "react-native";
 import Text from "./Text";
@@ -12,19 +13,21 @@ type Props = {
 }
 
 export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, onPress }: Props) {
+   const { colors } = useTheme();
+
    return (
-      <Pressable style={[Styles.mb15, { borderBottomColor: '#d6d8f6', borderBottomWidth: 1 }]} onPress={onPress}>
+      <Pressable style={[Styles.mb15, { borderBottomColor: colors.icon, borderBottomWidth: 1 }]} onPress={onPress}>
          <View style={[Styles.rowItemsCenter]}>
             {
                done != undefined ?
                   done ?
                      <>
-                        <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.cGray]}>Selesai</Text>
                      </>
                      :
                      <>
-                        <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
+                        <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                         <Text style={[Styles.cGray]}>Belum Selesai</Text>
                      </>
                   :
@@ -32,9 +35,9 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
             }
 
          </View>
-         <View style={[Styles.wrapPaper, Styles.mv10, Styles.p10]}>
-            <View style={[Styles.rowItemsCenter, {alignItems:'flex-start'}]}>
-               <MaterialCommunityIcons name="file-table-outline" size={25} color="black" style={[Styles.mr10]} />
+         <View style={[Styles.wrapPaper, Styles.mv10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+            <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
+               <MaterialCommunityIcons name="file-table-outline" size={25} color={colors.text} style={[Styles.mr10]} />
                <View style={[Styles.w90]}>
                   <Text style={[Styles.textDefault]}>{title}</Text>
                </View>
@@ -43,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]}>
+               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <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]}>
+               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <Text style={{ textAlign: 'center' }}>{dateEnd}</Text>
                </View>
             </View>
diff --git a/components/member/headerMemberDetail.tsx b/components/member/headerMemberDetail.tsx
index 7e65b11..0e4d18f 100644
--- a/components/member/headerMemberDetail.tsx
+++ b/components/member/headerMemberDetail.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiDeleteUser } from "@/lib/api"
 import { setUpdateMember } from "@/lib/memberSlice"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { MaterialCommunityIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -22,6 +23,7 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
    const { token, decryptToken } = useAuthSession()
    const [isVisible, setVisible] = useState(false)
    const update = useSelector((state: any) => state.memberUpdate)
+   const { colors } = useTheme();
    const dispatch = useDispatch()
 
    async function handleActive() {
@@ -48,7 +50,7 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
                   title={active ? "Non Aktifkan" : "Aktifkan"}
                   onPress={() => {
                      setVisible(false)
@@ -62,7 +64,7 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/member/headerMemberList.tsx b/components/member/headerMemberList.tsx
index 91d2e32..78a5f04 100644
--- a/components/member/headerMemberList.tsx
+++ b/components/member/headerMemberList.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -13,6 +14,7 @@ export default function HeaderMemberList() {
    const [isVisible, setVisible] = useState(false)
    const [isFilter, setFilter] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
+   const { colors } = useTheme();
 
    return (
       <>
@@ -23,7 +25,7 @@ export default function HeaderMemberList() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={() => setVisible(false)} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Anggota"
                   onPress={() => {
                      setVisible(false)
@@ -33,7 +35,7 @@ export default function HeaderMemberList() {
                {
                   (entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
                   <MenuItemRow
-                     icon={<AntDesign name="filter" color="black" size={25} />}
+                     icon={<AntDesign name="filter" color={colors.text} size={25} />}
                      title="Filter"
                      onPress={() => {
                         setVisible(false)
diff --git a/components/modalFloat.tsx b/components/modalFloat.tsx
index dd6b855..94ff13c 100644
--- a/components/modalFloat.tsx
+++ b/components/modalFloat.tsx
@@ -1,4 +1,5 @@
 import Styles from '@/constants/Styles';
+import { useTheme } from '@/providers/ThemeProvider';
 import { Pressable, View } from 'react-native';
 import Modal from 'react-native-modal';
 import Text from './Text';
@@ -14,6 +15,8 @@ type Props = {
 }
 
 export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit, buttonHide }: Props) {
+   const { colors } = useTheme();
+
    return (
       <Modal
          animationIn={"fadeIn"}
@@ -22,8 +25,8 @@ export default function ModalFloat({ isVisible, setVisible, title, children, onS
          hideModalContentWhileAnimating={true}
          onBackdropPress={() => { setVisible(false) }}
       >
-         <View style={[Styles.modalFloatContent]}>
-            <View style={[Styles.titleContainerModalFloat]}>
+         <View style={[Styles.modalFloatContent, { backgroundColor: colors.card, borderColor: colors.icon }]}>
+            <View style={[Styles.titleContainerModalFloat, { borderBottomColor: colors.icon }]}>
                <Text style={Styles.textDefaultSemiBold}>{title}</Text>
             </View>
             <View style={[Styles.mb10]}>
diff --git a/components/modalSelect.tsx b/components/modalSelect.tsx
index 57a5c29..6ab2eff 100644
--- a/components/modalSelect.tsx
+++ b/components/modalSelect.tsx
@@ -7,6 +7,7 @@ import { apiGetGroup, apiGetPosition, apiGetUser } from "@/lib/api"
 import { setEntityFilterGroup } from "@/lib/filterSlice"
 import { setMemberChoose } from "@/lib/memberChoose"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { useEffect, useState } from "react"
 import { Pressable, ScrollView, View } from "react-native"
@@ -33,6 +34,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
    const entityUser = useSelector((state: any) => state.user)
    const dispatch = useDispatch()
    const entitiesGroup = useSelector((state: any) => state.filterGroup)
+   const { colors } = useTheme();
    const [chooseValue, setChooseValue] = useState({ val: valChoose, label: '' })
    const [data, setData] = useState<any>([])
    const [search, setSearch] = useState('')
@@ -174,9 +176,9 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                               {
                                  (category == 'member')
                                     ?
-                                    selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
+                                    selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                                     :
-                                    chooseValue.val == item.id && <AntDesign name="check" size={20} color={'black'} />
+                                    chooseValue.val == item.id && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         ))
@@ -192,7 +194,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                               }}>
                                  <Text style={[chooseValue.val == item.val ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.label}</Text>
                                  {
-                                    valChoose == item.val && <AntDesign name="check" size={20} color={'black'} />
+                                    valChoose == item.val && <AntDesign name="check" size={20} color={colors.text} />
                                  }
                               </Pressable>
                            ))
diff --git a/components/modalSelectMultiple.tsx b/components/modalSelectMultiple.tsx
index bb19b44..caa7c46 100644
--- a/components/modalSelectMultiple.tsx
+++ b/components/modalSelectMultiple.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles"
 import { apiGetDivisionGroup, apiGetDocumentInformasi, apiGetListDivisionByIdDivision } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { useEffect, useState } from "react"
 import { Pressable, ScrollView, View } from "react-native"
@@ -34,6 +35,7 @@ type GroupData = {
 }
 
 export default function ModalSelectMultiple({ open, close, title, category, choose, onSelect, value, item }: Props) {
+   const { colors } = useTheme()
    const [isChoose, setChoose] = useState(choose)
    const { token, decryptToken } = useAuthSession()
    const [data, setData] = useState<any>([])
@@ -161,7 +163,7 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
                                  <Text numberOfLines={1} style={[Styles.w80]}>{item.name}</Text>
                                  {
                                     selectedDivision.some((i: any) => i.id == item.id)
-                                       ? <AntDesign name="check" size={18} color={'black'}/>
+                                       ? <AntDesign name="check" size={18} color={colors.text} />
                                        : <></>
                                  }
                               </Pressable>
@@ -177,9 +179,9 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
                               <Text style={[Styles.textMediumSemiBold]}>{item.name}</Text>
                               {
                                  checked[item.id] && checked[item.id]?.length === item.Division?.length
-                                    ? <AntDesign name="check" size={20} color={'black'}/>
+                                    ? <AntDesign name="check" size={20} color={colors.text} />
                                     : (checked[item.id] && checked[item.id]?.length > 0 && checked[item.id]?.length < item.Division?.length)
-                                       ? <AntDesign name="minus" size={20} color={'black'}/>
+                                       ? <AntDesign name="minus" size={20} color={colors.text} />
                                        : <></>
                               }
                            </Pressable>
@@ -189,7 +191,7 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
                                     <Pressable key={v} style={[Styles.itemSelectModal]} onPress={() => { handleCheck(item.id, child.id) }}>
                                        <Text style={[Styles.ml10, Styles.textMediumNormal, Styles.w80]} numberOfLines={1} ellipsizeMode="tail" >{child.name}</Text>
                                        {
-                                          checked[item.id] && checked[item.id].includes(child.id) && <AntDesign name="check" size={20} color={'black'}/>
+                                          checked[item.id] && checked[item.id].includes(child.id) && <AntDesign name="check" size={20} color={colors.text} />
                                        }
                                     </Pressable>
                                  )
diff --git a/components/paperGridContent.tsx b/components/paperGridContent.tsx
index 647aa69..6da37bd 100644
--- a/components/paperGridContent.tsx
+++ b/components/paperGridContent.tsx
@@ -1,5 +1,6 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Pressable, View } from "react-native";
 import Text from "./Text";
 
@@ -11,15 +12,21 @@ type Props = {
    onPress?: () => void
    contentPosition?: 'top' | 'center'
    titleTail?: number
+   height?: number
 };
-export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail }: Props) {
+export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail, height }: Props) {
+   const { colors } = useTheme();
    return (
       <Pressable onPress={onPress}>
-         <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
+         <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
             <View style={[Styles.headerPaperGrid]}>
-               <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, {textAlign: 'center' }]}>{title}</Text>
+               <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
             </View>
-            <View style={[contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid]}>
+            <View style={[
+               contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid,
+               { backgroundColor: colors.card },
+               height ? { height: height } : {}
+            ]}>
                {children}
             </View>
          </View>
diff --git a/components/position/headerRightPositionList.tsx b/components/position/headerRightPositionList.tsx
index 549623f..f2de9e7 100644
--- a/components/position/headerRightPositionList.tsx
+++ b/components/position/headerRightPositionList.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { useState } from "react"
 import { View } from "react-native"
@@ -14,6 +15,7 @@ export default function HeaderRightPositionList() {
    const [isVisible, setVisible] = useState(false)
    const [isVisibleTambah, setVisibleTambah] = useState(false)
    const [isFilter, setFilter] = useState(false)
+   const { colors } = useTheme()
 
    return (
       <>
@@ -21,7 +23,7 @@ export default function HeaderRightPositionList() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Jabatan"
                   onPress={() => {
                      setVisible(false)
@@ -33,7 +35,7 @@ export default function HeaderRightPositionList() {
                {
                   (entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
                   <MenuItemRow
-                     icon={<AntDesign name="filter" color="black" size={25} />}
+                     icon={<AntDesign name="filter" color={colors.text} size={25} />}
                      title="Filter"
                      onPress={() => {
                         setVisible(false)
diff --git a/components/position/modalFormCreatePosition.tsx b/components/position/modalFormCreatePosition.tsx
index 256a3f3..1f1db34 100644
--- a/components/position/modalFormCreatePosition.tsx
+++ b/components/position/modalFormCreatePosition.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiCreatePosition } from "@/lib/api"
 import { setUpdatePosition } from "@/lib/positionSlice"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { update } from "@react-native-firebase/database"
 import { useEffect, useState } from "react"
 import { View } from "react-native"
@@ -9,13 +10,14 @@ import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
 import { ButtonForm } from "../buttonForm"
 import { InputForm } from "../inputForm"
-import SelectForm from "../selectForm"
 import ModalSelect from "../modalSelect"
+import SelectForm from "../selectForm"
 
 export default function ModalFormCreatePosition({ onClose }: { onClose: () => void }) {
    const dispatch = useDispatch()
    const { token, decryptToken } = useAuthSession()
    const entityUser = useSelector((state: any) => state.user)
+   const { colors } = useTheme()
    const [choose, setChoose] = useState({ val: '', label: '' })
    const [isSelect, setSelect] = useState(false)
    const [disable, setDisable] = useState(true)
@@ -104,6 +106,7 @@ export default function ModalFormCreatePosition({ onClose }: { onClose: () => vo
                   label="Jabatan"
                   onChange={(value) => { validationForm(value, 'name') }}
                   error={error.name}
+                  bg={colors.card}
                   errorText="Nama jabatan harus diisi"
                   value={dataForm.name}
                />
diff --git a/components/progressBar.tsx b/components/progressBar.tsx
index a736f4f..21def4d 100644
--- a/components/progressBar.tsx
+++ b/components/progressBar.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useEffect, useState } from "react";
 import { Animated, View } from "react-native";
 
@@ -10,6 +11,7 @@ type Props = {
 }
 
 export default function ProgressBar({ margin, value, category }: Props) {
+   const { colors } = useTheme();
    const [progress, setProgress] = useState(new Animated.Value(0));
    const [totalProgress, setTotalProgress] = useState(category == 'carousel' ? 232 : category == 'page' ? 245 : 290);
    const [componentWidth, setComponentWidth] = useState(0);
@@ -34,7 +36,7 @@ export default function ProgressBar({ margin, value, category }: Props) {
 
    return (
       <View style={[Styles.contentItemCenter]}>
-         <View style={[Styles.wrapBar, { margin: margin && margin }]} onLayout={handleLayout}>
+         <View style={[Styles.wrapBar, { margin: margin && margin, backgroundColor: colors.icon + '30' }]} onLayout={handleLayout}>
             <Animated.View style={[Styles.contentBar, { width: progress }]} />
          </View>
       </View>
diff --git a/components/project/headerProjectDetail.tsx b/components/project/headerProjectDetail.tsx
index 83b79cc..6ad1b0f 100644
--- a/components/project/headerProjectDetail.tsx
+++ b/components/project/headerProjectDetail.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiAddLinkProject, apiDeleteProject } from "@/lib/api"
 import { setUpdateProject } from "@/lib/projectUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -23,6 +24,7 @@ type Props = {
 export default function HeaderRightProjectDetail({ id, status }: Props) {
    const entityUser = useSelector((state: any) => state.user)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
@@ -70,7 +72,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu" height={35}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Tugas"
                   onPress={() => {
                      if (status == 3) return
@@ -80,7 +82,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
                   disabled={status == 3}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="file-plus" color={colors.text} size={25} />}
                   title="Tambah File"
                   onPress={() => {
                      if (status == 3) return
@@ -90,7 +92,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
                   disabled={status == 3}
                />
                <MenuItemRow
-                  icon={<Feather name="link" color="black" size={25} />}
+                  icon={<Feather name="link" color={colors.text} size={25} />}
                   title="Tambah Link"
                   onPress={() => {
                      if (status == 3) return
@@ -104,7 +106,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
             </View>
             <View style={[Styles.rowItemsCenter, Styles.mt15]}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-document" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="file-document" color={colors.text} size={25} />}
                   title="Laporan"
                   onPress={() => {
                      if (status == 3) return
@@ -117,7 +119,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
                   entityUser.role != "user" && entityUser.role != "coadmin" &&
                   <>
                      <MenuItemRow
-                        icon={<MaterialIcons name="groups" color="black" size={25} />}
+                        icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
                         title="Tambah Anggota"
                         onPress={() => {
                            if (status == 3) return
@@ -127,7 +129,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
                         disabled={status == 3}
                      />
                      <MenuItemRow
-                        icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                        icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                         title="Edit"
                         onPress={() => {
                            if (status == 3) return
@@ -146,7 +148,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
                      status == 3
                         ?
                         <MenuItemRow
-                           icon={<Ionicons name="trash" color="black" size={25} />}
+                           icon={<Ionicons name="trash" color={colors.text} size={25} />}
                            title="Hapus"
                            onPress={() => {
                               setVisible(false)
@@ -159,7 +161,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
                         />
                         :
                         <MenuItemRow
-                           icon={<MaterialIcons name="close" color="black" size={25} />}
+                           icon={<MaterialIcons name="close" color={colors.text} size={25} />}
                            title="Batal"
                            onPress={() => {
                               setVisible(false)
@@ -182,6 +184,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
                <InputForm
                   type="default"
                   placeholder="Masukkan link"
+                  bg={colors.card}
                   value={link}
                   onChange={(text) => { setLink(text) }}
                />
diff --git a/components/project/headerProjectList.tsx b/components/project/headerProjectList.tsx
index 9652fbc..ddb23ef 100644
--- a/components/project/headerProjectList.tsx
+++ b/components/project/headerProjectList.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -10,6 +11,7 @@ import MenuItemRow from "../menuItemRow"
 import ModalFilter from "../modalFilter"
 
 export default function HeaderRightProjectList() {
+   const { colors } = useTheme();
    const [isVisible, setVisible] = useState(false)
    const [isFilter, setFilter] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
@@ -22,7 +24,7 @@ export default function HeaderRightProjectList() {
                {
                   entityUser.role != "user" && entityUser.role != "coadmin" &&
                   <MenuItemRow
-                     icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                     icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                      title="Tambah Kegiatan"
                      onPress={() => {
                         setVisible(false)
@@ -33,7 +35,7 @@ export default function HeaderRightProjectList() {
                {
                   // (entityUser.role == "user" || entityUser.role == "coadmin" || entityUser.role == "supadmin" || entityUser.role == "developer") &&
                   <MenuItemRow
-                     icon={<AntDesign name="filter" color="black" size={25} />}
+                     icon={<AntDesign name="filter" color={colors.text} size={25} />}
                      title="Filter"
                      onPress={() => {
                         setVisible(false)
diff --git a/components/project/modalAddDetailTugasProject.tsx b/components/project/modalAddDetailTugasProject.tsx
index 30cf6c2..766af45 100644
--- a/components/project/modalAddDetailTugasProject.tsx
+++ b/components/project/modalAddDetailTugasProject.tsx
@@ -1,5 +1,6 @@
 import Styles from "@/constants/Styles";
 import { stringToDateTime } from "@/lib/fun_stringToDate";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useEffect, useState } from "react";
 import { Dimensions, View, VirtualizedList } from "react-native";
 import { InputDate } from "../inputDate";
@@ -13,6 +14,7 @@ interface Props {
 }
 
 export default function ModalAddDetailTugasProject({ isVisible, setVisible, dataTanggal, onSubmit }: { isVisible: boolean, setVisible: (value: boolean) => void, dataTanggal: Props[], onSubmit: (data: Props[]) => void }) {
+   const { colors } = useTheme();
    const [data, setData] = useState<Props[]>(dataTanggal)
    const tinggiScreen = Dimensions.get("window").height;
    const tinggiFix = tinggiScreen * 70 / 100;
@@ -89,14 +91,14 @@ export default function ModalAddDetailTugasProject({ isVisible, setVisible, data
             setVisible(false)
          }}
       >
-         <View style={[{ height: tinggiFix }]} >
+         <View style={[{ height: tinggiFix, }]} >
             <VirtualizedList
                data={data}
                getItemCount={() => data.length}
                getItem={getItem}
                renderItem={({ item, index }: { item: Props, index: number }) => {
                   return (
-                     <View key={index} style={[Styles.borderBottom, Styles.pv05]}>
+                     <View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.icon }]}>
                         <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 26d01c9..4305286 100644
--- a/components/project/modalListDetailTugasProject.tsx
+++ b/components/project/modalListDetailTugasProject.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiGetProjectTask } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useEffect, useState } from "react";
 import { Dimensions, View, VirtualizedList } from "react-native";
 import { InputDate } from "../inputDate";
@@ -16,6 +17,7 @@ interface Props {
 }
 
 export default function ModalListDetailTugasProject({ isVisible, setVisible, idTask }: { isVisible: boolean, setVisible: (value: boolean) => void, idTask: string }) {
+   const { colors } = useTheme();
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(false)
    const { token, decryptToken } = useAuthSession()
@@ -75,7 +77,7 @@ export default function ModalListDetailTugasProject({ isVisible, setVisible, idT
                            getItem={getItem}
                            renderItem={({ item, index }: { item: Props, index: number }) => {
                               return (
-                                 <View key={index} style={[Styles.borderBottom, Styles.pv05]}>
+                                 <View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.icon }]}>
                                     <Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
                                     <View style={[Styles.rowSpaceBetween]}>
                                        <View style={[{ width: "48%" }]}>
diff --git a/components/project/sectionFile.tsx b/components/project/sectionFile.tsx
index b72486e..44177fa 100644
--- a/components/project/sectionFile.tsx
+++ b/components/project/sectionFile.tsx
@@ -3,6 +3,7 @@ import Styles from "@/constants/Styles";
 import { apiDeleteFileProject, apiGetProjectOne } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as FileSystem from 'expo-file-system';
 import { startActivityAsync } from 'expo-intent-launcher';
@@ -30,6 +31,7 @@ type Props = {
 }
 
 export default function SectionFile({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
    const [isModal, setModal] = useState(false)
    const { token, decryptToken } = useAuthSession();
@@ -135,7 +137,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
          <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
          <View style={[Styles.mb15]}>
             <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-            <View style={[Styles.wrapPaper]}>
+            <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                {
                   loading ?
                      arrSkeleton.map((item, index) => {
@@ -150,7 +152,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
                               <BorderBottomItem
                                  key={index}
                                  borderType="all"
-                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                                  title={item.name + '.' + item.extension}
                                  titleWeight="normal"
                                  onPress={() => { setSelectFile(item); setModal(true) }}
@@ -167,7 +169,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
                   title="Lihat / Share"
                   onPress={() => {
                      openFile()
@@ -177,7 +179,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
                   !member && (entityUser.role == "user" || entityUser.role == "coadmin") ? <></>
                      :
                      <MenuItemRow
-                        icon={<Ionicons name="trash" color="black" size={25} />}
+                        icon={<Ionicons name="trash" color={colors.text} size={25} />}
                         title="Hapus"
                         disabled={status == 3}
                         onPress={() => {
diff --git a/components/project/sectionLink.tsx b/components/project/sectionLink.tsx
index cd81e4b..3c14a6d 100644
--- a/components/project/sectionLink.tsx
+++ b/components/project/sectionLink.tsx
@@ -3,6 +3,7 @@ import { apiDeleteLinkProject, apiGetProjectOne } from "@/lib/api";
 import { urlCompleted } from "@/lib/fun_urlCompleted";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -22,6 +23,7 @@ type Props = {
 }
 
 export default function SectionLink({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
    const [isModal, setModal] = useState(false)
    const { token, decryptToken } = useAuthSession();
@@ -82,14 +84,14 @@ export default function SectionLink({ status, member, refreshing }: { status: nu
             <>
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Link</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         data.map((item, index) => {
                            return (
                               <BorderBottomItem
                                  key={index}
                                  borderType="all"
-                                 icon={<Feather name="link" size={25} color="black" />}
+                                 icon={<Feather name="link" size={25} color={colors.text} />}
                                  title={item.link}
                                  titleWeight="normal"
                                  onPress={() => { setSelectLink(item); setModal(true) }}
@@ -104,7 +106,7 @@ export default function SectionLink({ status, member, refreshing }: { status: nu
                <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
                   <View style={Styles.rowItemsCenter}>
                      <MenuItemRow
-                        icon={<Feather name="external-link" color="black" size={25} />}
+                        icon={<Feather name="external-link" color={colors.text} size={25} />}
                         title="Buka Link"
                         onPress={() => {
                            Linking.openURL(urlCompleted(String(selectLink?.link)))
@@ -114,7 +116,7 @@ export default function SectionLink({ status, member, refreshing }: { status: nu
                         !member && (entityUser.role == "user" || entityUser.role == "coadmin") ? <></>
                            :
                            <MenuItemRow
-                              icon={<Ionicons name="trash" color="black" size={25} />}
+                              icon={<Ionicons name="trash" color={colors.text} size={25} />}
                               title="Hapus"
                               disabled={status == 3}
                               onPress={() => {
diff --git a/components/project/sectionListAddTask.tsx b/components/project/sectionListAddTask.tsx
index e466fc3..c2db0c0 100644
--- a/components/project/sectionListAddTask.tsx
+++ b/components/project/sectionListAddTask.tsx
@@ -1,5 +1,6 @@
 import Styles from "@/constants/Styles";
 import { deleteTaskCreate } from "@/lib/taskCreate";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons } from "@expo/vector-icons";
 import { Key, useState } from "react";
 import { View } from "react-native";
@@ -10,6 +11,7 @@ import MenuItemRow from "../menuItemRow";
 import Text from "../Text";
 
 export default function SectionListAddTask() {
+   const { colors } = useTheme();
    const taskCreate = useSelector((state: any) => state.taskCreate)
    const [select, setSelect] = useState<any>(null)
    const [isModal, setModal] = useState(false)
@@ -30,7 +32,7 @@ export default function SectionListAddTask() {
                   <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
                      Tanggal & Tugas
                   </Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <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 (
@@ -58,7 +60,7 @@ export default function SectionListAddTask() {
                >
                   <View style={Styles.rowItemsCenter}>
                      <MenuItemRow
-                        icon={<Ionicons name="trash" color="black" size={25} />}
+                        icon={<Ionicons name="trash" color={colors.text} size={25} />}
                         title="Hapus Tugas"
                         onPress={() => { handleDelete() }}
                      />
diff --git a/components/project/sectionMember.tsx b/components/project/sectionMember.tsx
index 07cf817..44d10d3 100644
--- a/components/project/sectionMember.tsx
+++ b/components/project/sectionMember.tsx
@@ -3,6 +3,7 @@ import Styles from "@/constants/Styles";
 import { apiDeleteProjectMember, apiGetProjectOne } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type Props = {
 };
 
 export default function SectionMember({ status, refreshing }: { status: number | undefined, refreshing?: boolean }) {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const entityUser = useSelector((state: any) => state.user)
    const update = useSelector((state: any) => state.projectUpdate)
@@ -97,7 +99,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
                <Text style={[Styles.textDefault]}>Total {data.length} Anggota</Text>
             </View>
 
-            <View style={[Styles.wrapPaper]}>
+            <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                {
                   loading ?
                      arrSkeleton.map((item, index) => {
@@ -143,7 +145,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
                   icon={
                      <MaterialCommunityIcons
                         name="account-eye"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
@@ -159,7 +161,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
                      icon={
                         <MaterialCommunityIcons
                            name="account-remove"
-                           color="black"
+                           color={colors.text}
                            size={25}
                         />
                      }
diff --git a/components/project/sectionReportProject.tsx b/components/project/sectionReportProject.tsx
index 18e7b82..0d3a139 100644
--- a/components/project/sectionReportProject.tsx
+++ b/components/project/sectionReportProject.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiGetProjectOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { View } from "react-native";
@@ -9,6 +10,7 @@ import Text from "../Text";
 import TextExpandable from "../textExpandable";
 
 export default function SectionReportProject({ refreshing }: { refreshing?: boolean }) {
+   const { colors } = useTheme();
    const update = useSelector((state: any) => state.projectUpdate)
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
@@ -45,7 +47,7 @@ export default function SectionReportProject({ refreshing }: { refreshing?: bool
                <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
                   Laporan Kegiatan
                </Text>
-               <View style={[Styles.wrapPaper]}>
+               <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <TextExpandable content={data} maxLines={2} />
                </View>
             </View>
diff --git a/components/project/sectionTanggalTugas.tsx b/components/project/sectionTanggalTugas.tsx
index 285b55e..c53b305 100644
--- a/components/project/sectionTanggalTugas.tsx
+++ b/components/project/sectionTanggalTugas.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
 import { apiDeleteProjectTask, apiGetProjectOne, apiUpdateStatusProjectTask } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -28,6 +29,7 @@ type Props = {
 };
 
 export default function SectionTanggalTugasProject({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
@@ -116,7 +118,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
             <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
                Tanggal & Tugas
             </Text>
-            <View style={[Styles.wrapPaper]}>
+            <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                {
                   loading ?
                      arrSkeleton.map((item, index) => {
@@ -163,7 +165,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
                   icon={
                      <MaterialCommunityIcons
                         name="list-status"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
@@ -179,7 +181,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
                   icon={
                      <MaterialCommunityIcons
                         name="pencil-outline"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
@@ -194,7 +196,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
                   icon={
                      <MaterialCommunityIcons
                         name="clock-time-three-outline"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
@@ -209,7 +211,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
             </View>
             <View style={[Styles.rowItemsCenter, Styles.mt15]}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus Tugas"
                   onPress={() => {
                      setModal(false)
diff --git a/components/sectionCancel.tsx b/components/sectionCancel.tsx
index 34efbaf..e5d9a94 100644
--- a/components/sectionCancel.tsx
+++ b/components/sectionCancel.tsx
@@ -1,5 +1,6 @@
 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";
@@ -10,10 +11,12 @@ type Props = {
 }
 
 export default function SectionCancel({ text, title }: Props) {
+   const { colors } = useTheme();
+
    return (
-      <View style={[ColorsStatus.lightRed, Styles.p10, Styles.round10, Styles.mb15]}>
+      <View style={[Styles.p10, Styles.round10, Styles.mb15, { backgroundColor: colors.card }]}>
          <View style={[Styles.rowItemsCenter]}>
-            <AntDesign name="warning" size={22} style={[Styles.mr10]} color={'black'}/>
+            <AntDesign name="warning" size={22} style={[Styles.mr10]} color={colors.text} />
             <Text style={[Styles.textDefaultSemiBold]}>{title ? title : 'Kegiatan Dibatalkan'}</Text>
          </View>
          {
diff --git a/components/sectionProgress.tsx b/components/sectionProgress.tsx
index 7215cf2..816c13d 100644
--- a/components/sectionProgress.tsx
+++ b/components/sectionProgress.tsx
@@ -1,5 +1,6 @@
 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";
@@ -11,9 +12,11 @@ type Props = {
 }
 
 export default function SectionProgress({ text, progress }: Props) {
+   const { colors } = useTheme();
+
    return (
-      <View style={[ColorsStatus.lightGreen, Styles.p15, { flexDirection: 'row', borderRadius: 10, alignItems: 'center' }]}>
-         <View style={[Styles.iconContent, ColorsStatus.orange, { alignItems: 'center', justifyContent: 'center' }]}>
+      <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>
          <View style={[Styles.ml10, { flex: 1 }]}>
diff --git a/components/selectForm.tsx b/components/selectForm.tsx
index a6775ac..fdd1531 100644
--- a/components/selectForm.tsx
+++ b/components/selectForm.tsx
@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
 import { Pressable, View } from "react-native";
 import Text from "./Text";
@@ -15,10 +16,11 @@ type Props = {
    errorText?: string;
    required?: boolean;
    round?: boolean
-   bg?: 'white' | 'transparent'
+   bg?: string
 };
 
-export default function SelectForm({ label, value, placeholder, onPress, info, error, errorText, required, itemLeft, round, bg }: Props) {
+export default function SelectForm({ label, value, placeholder, onPress, info, error, errorText, required, round, bg }: Props) {
+   const { colors } = useTheme();
    return (
       <View style={[Styles.mb10]}>
          {
@@ -30,19 +32,27 @@ export default function SelectForm({ label, value, placeholder, onPress, info, e
             )
          }
          <Pressable onPress={onPress}>
-            <View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, error && { borderColor: "red" }, round && Styles.round30, Styles.pv10, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }]}>
-               <Feather name="chevron-right" size={20} color="grey" />
+            <View style={[
+               Styles.inputRoundForm,
+               Styles.inputRoundFormRight,
+               error && { borderColor: "red" },
+               round && Styles.round30,
+               Styles.pv10,
+               { backgroundColor: bg ? bg : 'transparent', borderColor: colors.icon }
+            ]}>
+               <Feather name="chevron-right" size={20} color={colors.icon} />
                {
                   value ? (
-                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.cBlack, Styles.w90]}>{value}</Text>
+                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.w90]}>{value}</Text>
                   ) : (
-                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.cGray, Styles.w90]}>{placeholder}</Text>
+                     <Text numberOfLines={1} ellipsizeMode='tail' style={[{ color: colors.icon }, Styles.w90]}>{placeholder}</Text>
                   )
                }
             </View>
-         </Pressable>
-         {error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)}
-         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
-      </View>
+         </Pressable >
+         {error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)
+         }
+         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
+      </View >
    )
 }
\ No newline at end of file
diff --git a/components/task/headerTaskDetail.tsx b/components/task/headerTaskDetail.tsx
index 248fc26..23cfeda 100644
--- a/components/task/headerTaskDetail.tsx
+++ b/components/task/headerTaskDetail.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiAddLinkTask, apiDeleteTask } from "@/lib/api"
 import { setUpdateTask } from "@/lib/taskUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function HeaderRightTaskDetail({ id, division, status, isAdminDivision }: Props) {
+   const { colors } = useTheme()
    const { token, decryptToken } = useAuthSession()
    const [isVisible, setVisible] = useState(false)
    const entityUser = useSelector((state: any) => state.user);
@@ -72,7 +74,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu" height={35}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                   title="Tambah Tugas"
                   onPress={() => {
                      if (status == 3) return
@@ -82,7 +84,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
                   disabled={status == 3}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="file-plus" color={colors.text} size={25} />}
                   title="Tambah File"
                   onPress={() => {
                      if (status == 3) return
@@ -93,7 +95,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
                />
 
                <MenuItemRow
-                  icon={<Feather name="link" color="black" size={25} />}
+                  icon={<Feather name="link" color={colors.text} size={25} />}
                   title="Tambah Link"
                   onPress={() => {
                      if (status == 3) return
@@ -107,7 +109,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
             </View>
             <View style={[Styles.rowItemsCenter, Styles.mt15]}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-document" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="file-document" color={colors.text} size={25} />}
                   title="Laporan"
                   onPress={() => {
                      if (status == 3) return
@@ -122,7 +124,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
                   &&
                   <>
                      <MenuItemRow
-                        icon={<MaterialIcons name="groups" color="black" size={25} />}
+                        icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
                         title="Tambah Anggota"
                         onPress={() => {
                            if (status == 3) return
@@ -132,7 +134,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
                         disabled={status == 3}
                      />
                      <MenuItemRow
-                        icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                        icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                         title="Edit"
                         onPress={() => {
                            if (status == 3) return
@@ -152,7 +154,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
                      status == 3
                         ?
                         <MenuItemRow
-                           icon={<Ionicons name="trash" color="black" size={25} />}
+                           icon={<Ionicons name="trash" color={colors.text} size={25} />}
                            title="Hapus"
                            onPress={() => {
                               setVisible(false)
@@ -166,7 +168,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
 
                         :
                         <MenuItemRow
-                           icon={<MaterialIcons name="close" color="black" size={25} />}
+                           icon={<MaterialIcons name="close" color={colors.text} size={25} />}
                            title="Batal"
                            onPress={() => {
                               setVisible(false)
@@ -191,6 +193,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
                   placeholder="Masukkan link"
                   value={link}
                   onChange={(text) => { setLink(text) }}
+                  bg={colors.card}
                />
             </View>
          </ModalFloat>
diff --git a/components/task/headerTaskList.tsx b/components/task/headerTaskList.tsx
index df15d06..b2ab7e6 100644
--- a/components/task/headerTaskList.tsx
+++ b/components/task/headerTaskList.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles"
 import { apiGetDivisionOneFeature } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { router, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
@@ -12,6 +13,7 @@ import MenuItemRow from "../menuItemRow"
 import ModalFilter from "../modalFilter"
 
 export default function HeaderRightTaskList() {
+   const { colors } = useTheme()
    const [isVisible, setVisible] = useState(false)
    const [isAdminDivision, setIsAdminDivision] = useState(false);
    const { token, decryptToken } = useAuthSession()
@@ -52,7 +54,7 @@ export default function HeaderRightTaskList() {
                   (entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision
                   &&
                   <MenuItemRow
-                     icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                     icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                      title="Tambah Tugas Divisi"
                      onPress={() => {
                         setVisible(false)
@@ -61,7 +63,7 @@ export default function HeaderRightTaskList() {
                   />
                }
                <MenuItemRow
-                  icon={<AntDesign name="filter" color="black" size={25} />}
+                  icon={<AntDesign name="filter" color={colors.text} size={25} />}
                   title="Filter"
                   onPress={() => {
                      setVisible(false)
diff --git a/components/task/modalAddDetailTugasTask.tsx b/components/task/modalAddDetailTugasTask.tsx
index ca98600..e02271e 100644
--- a/components/task/modalAddDetailTugasTask.tsx
+++ b/components/task/modalAddDetailTugasTask.tsx
@@ -1,5 +1,6 @@
 import Styles from "@/constants/Styles";
 import { stringToDateTime } from "@/lib/fun_stringToDate";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useEffect, useState } from "react";
 import { Dimensions, View, VirtualizedList } from "react-native";
 import { InputDate } from "../inputDate";
@@ -13,6 +14,7 @@ interface Props {
 }
 
 export default function ModalAddDetailTugasTask({ isVisible, setVisible, dataTanggal, onSubmit }: { isVisible: boolean, setVisible: (value: boolean) => void, dataTanggal: Props[], onSubmit: (data: Props[]) => void }) {
+   const { colors } = useTheme()
    const [data, setData] = useState<Props[]>(dataTanggal)
    const tinggiScreen = Dimensions.get("window").height;
    const tinggiFix = tinggiScreen * 70 / 100;
@@ -96,7 +98,7 @@ export default function ModalAddDetailTugasTask({ isVisible, setVisible, dataTan
                getItem={getItem}
                renderItem={({ item, index }: { item: Props, index: number }) => {
                   return (
-                     <View key={index} style={[Styles.borderBottom, Styles.pv05]}>
+                     <View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.background }]}>
                         <Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
                         <View style={[Styles.rowSpaceBetween]}>
                            <View style={[{ width: "48%" }]}>
diff --git a/components/task/modalListDetailTugasTask.tsx b/components/task/modalListDetailTugasTask.tsx
index b909ac2..7a79268 100644
--- a/components/task/modalListDetailTugasTask.tsx
+++ b/components/task/modalListDetailTugasTask.tsx
@@ -1,5 +1,6 @@
 import Styles from "@/constants/Styles";
 import { apiGetProjectTask, apiGetTaskTugas } from "@/lib/api";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useEffect, useState } from "react";
 import { Dimensions, View, VirtualizedList } from "react-native";
@@ -16,6 +17,7 @@ interface Props {
 }
 
 export default function ModalListDetailTugasTask({ isVisible, setVisible, idTask }: { isVisible: boolean, setVisible: (value: boolean) => void, idTask: string }) {
+   const { colors } = useTheme()
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(false)
    const { token, decryptToken } = useAuthSession()
@@ -75,7 +77,7 @@ export default function ModalListDetailTugasTask({ isVisible, setVisible, idTask
                            getItem={getItem}
                            renderItem={({ item, index }: { item: Props, index: number }) => {
                               return (
-                                 <View key={index} style={[Styles.borderBottom, Styles.pv05]}>
+                                 <View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.background }]}>
                                     <Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
                                     <View style={[Styles.rowSpaceBetween]}>
                                        <View style={[{ width: "48%" }]}>
diff --git a/components/task/sectionFileTask.tsx b/components/task/sectionFileTask.tsx
index 33f3c6f..b409972 100644
--- a/components/task/sectionFileTask.tsx
+++ b/components/task/sectionFileTask.tsx
@@ -3,6 +3,7 @@ import Styles from "@/constants/Styles";
 import { apiDeleteFileTask, apiGetTaskOne } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as FileSystem from 'expo-file-system';
 import { startActivityAsync } from 'expo-intent-launcher';
@@ -29,6 +30,7 @@ type Props = {
 }
 
 export default function SectionFileTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
+   const { colors } = useTheme()
    const [isModal, setModal] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const { detail } = useLocalSearchParams<{ detail: string }>()
@@ -126,7 +128,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
          <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
          <View style={[Styles.mb15]}>
             <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-            <View style={[Styles.wrapPaper]}>
+            <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                {
                   loading ?
                      arrSkeleton.map((item, index) => {
@@ -141,7 +143,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
                               <BorderBottomItem
                                  key={index}
                                  borderType="all"
-                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                                  title={item.name + '.' + item.extension}
                                  titleWeight="normal"
                                  onPress={() => { setSelectFile(item); setModal(true) }}
@@ -158,7 +160,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
                   title="Lihat / Share"
                   onPress={() => {
                      openFile()
@@ -168,7 +170,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
                   (entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision
                      ?
                      <MenuItemRow
-                        icon={<Ionicons name="trash" color="black" size={25} />}
+                        icon={<Ionicons name="trash" color={colors.text} size={25} />}
                         title="Hapus"
                         onPress={() => {
                            setModal(false)
diff --git a/components/task/sectionLinkTask.tsx b/components/task/sectionLinkTask.tsx
index 17a3293..fbe6a6b 100644
--- a/components/task/sectionLinkTask.tsx
+++ b/components/task/sectionLinkTask.tsx
@@ -3,6 +3,7 @@ import { apiDeleteLinkTask, apiGetTaskOne } from "@/lib/api";
 import { urlCompleted } from "@/lib/fun_urlCompleted";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -21,6 +22,7 @@ type Props = {
 }
 
 export default function SectionLinkTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
+   const { colors } = useTheme()
    const [isModal, setModal] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const { detail } = useLocalSearchParams<{ detail: string }>()
@@ -74,14 +76,14 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr
             <>
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Link</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         data.map((item, index) => {
                            return (
                               <BorderBottomItem
                                  key={index}
                                  borderType="all"
-                                 icon={<Feather name="link" size={25} color="black" />}
+                                 icon={<Feather name="link" size={25} color={colors.text} />}
                                  title={item.link}
                                  titleWeight="normal"
                                  onPress={() => { setSelectLink(item); setModal(true) }}
@@ -96,7 +98,7 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr
                <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
                   <View style={Styles.rowItemsCenter}>
                      <MenuItemRow
-                        icon={<Feather name="external-link" color="black" size={25} />}
+                        icon={<Feather name="external-link" color={colors.text} size={25} />}
                         title="Buka Link"
                         onPress={() => {
                            Linking.openURL(urlCompleted(String(selectLink?.link)))
@@ -106,7 +108,7 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr
                         (entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision
                            ?
                            <MenuItemRow
-                              icon={<Ionicons name="trash" color="black" size={25} />}
+                              icon={<Ionicons name="trash" color={colors.text} size={25} />}
                               title="Hapus"
                               onPress={() => {
                                  setModal(false)
diff --git a/components/task/sectionMemberTask.tsx b/components/task/sectionMemberTask.tsx
index 39971cc..612a2c4 100644
--- a/components/task/sectionMemberTask.tsx
+++ b/components/task/sectionMemberTask.tsx
@@ -3,6 +3,7 @@ import Styles from "@/constants/Styles";
 import { apiDeleteTaskMember, apiGetTaskOne } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type Props = {
 };
 
 export default function SectionMemberTask({ refreshing, isAdminDivision }: { refreshing: boolean, isAdminDivision: boolean }) {
+   const { colors } = useTheme()
    const [isModal, setModal] = useState(false);
    const entityUser = useSelector((state: any) => state.user);
    const { token, decryptToken } = useAuthSession();
@@ -100,7 +102,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
                <Text style={[Styles.textDefault]}>Total {data.length} Anggota</Text>
             </View>
 
-            <View style={[Styles.wrapPaper]}>
+            <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                {
                   loading ?
                      arrSkeleton.map((item, index) => {
@@ -155,7 +157,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
                   icon={
                      <MaterialCommunityIcons
                         name="account-eye"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
@@ -174,7 +176,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
                         icon={
                            <MaterialCommunityIcons
                               name="account-remove"
-                              color="black"
+                              color={colors.text}
                               size={25}
                            />
                         }
diff --git a/components/task/sectionReportTask.tsx b/components/task/sectionReportTask.tsx
index 3c52f95..64d270b 100644
--- a/components/task/sectionReportTask.tsx
+++ b/components/task/sectionReportTask.tsx
@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles";
 import { apiGetTaskOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { View } from "react-native";
@@ -10,6 +11,7 @@ import TextExpandable from "../textExpandable";
 
 
 export default function SectionReportTask({ refreshing }: { refreshing: boolean }) {
+   const { colors } = useTheme()
    const update = useSelector((state: any) => state.taskUpdate)
    const { token, decryptToken } = useAuthSession()
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
@@ -43,7 +45,7 @@ export default function SectionReportTask({ refreshing }: { refreshing: boolean
                <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
                   Laporan Kegiatan
                </Text>
-               <View style={[Styles.wrapPaper]}>
+               <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <TextExpandable content={data} maxLines={2} />
                </View>
             </View>
diff --git a/components/task/sectionTanggalTugasTask.tsx b/components/task/sectionTanggalTugasTask.tsx
index 5f19055..60b1eb7 100644
--- a/components/task/sectionTanggalTugasTask.tsx
+++ b/components/task/sectionTanggalTugasTask.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
 import { apiDeleteTaskTugas, apiGetTaskOne, apiUpdateStatusTaskDivision } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type Props = {
 }
 
 export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
+   const { colors } = useTheme()
    const dispatch = useDispatch()
    const entityUser = useSelector((state: any) => state.user);
    const update = useSelector((state: any) => state.taskUpdate)
@@ -119,7 +121,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
       <>
          <View style={[Styles.mb15, Styles.mt10]}>
             <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
-            <View style={[Styles.wrapPaper]}>
+            <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                {
                   loading ?
                      arrSkeleton.map((item, index) => {
@@ -160,7 +162,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
                   icon={
                      <MaterialCommunityIcons
                         name="clock-time-three-outline"
-                        color="black"
+                        color={colors.text}
                         size={25}
                      />
                   }
@@ -177,7 +179,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
                      ?
                      <>
                         <MenuItemRow
-                           icon={<MaterialCommunityIcons name="list-status" color="black" size={25} />}
+                           icon={<MaterialCommunityIcons name="list-status" color={colors.text} size={25} />}
                            title="Update Status"
                            onPress={() => {
                               setModal(false)
@@ -187,7 +189,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
                            }}
                         />
                         <MenuItemRow
-                           icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                           icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                            title="Edit Tugas"
                            onPress={() => {
                               setModal(false)
@@ -205,7 +207,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
                   ?
                   <View style={[Styles.rowItemsCenter, Styles.mt15]}>
                      <MenuItemRow
-                        icon={<Ionicons name="trash" color="black" size={25} />}
+                        icon={<Ionicons name="trash" color={colors.text} size={25} />}
                         title="Hapus Tugas"
                         onPress={() => {
                            setModal(false)
diff --git a/constants/Colors.ts b/constants/Colors.ts
index be9eec1..0996736 100644
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -6,7 +6,9 @@ export const Colors = {
     text: '#11181C',
     background: '#f4f9fd',
     tint: tintColorLight,
+    primary: '#19345E',
     icon: '#687076',
+    card: '#ffffff',
     tabIconDefault: '#687076',
     tabIconSelected: tintColorLight,
   },
@@ -14,7 +16,9 @@ export const Colors = {
     text: '#ECEDEE',
     background: '#151718',
     tint: tintColorDark,
+    primary: '#19345E',
     icon: '#9BA1A6',
+    card: '#232526', // slightly lighter than background #151718
     tabIconDefault: '#9BA1A6',
     tabIconSelected: tintColorDark,
   },
diff --git a/providers/ThemeProvider.tsx b/providers/ThemeProvider.tsx
new file mode 100644
index 0000000..0dc31ea
--- /dev/null
+++ b/providers/ThemeProvider.tsx
@@ -0,0 +1,66 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { useColorScheme } from 'react-native';
+import { Colors } from '@/constants/Colors';
+
+type Theme = 'light' | 'dark' | 'system';
+type StartTheme = 'light' | 'dark';
+
+interface ThemeContextType {
+   theme: Theme;
+   activeTheme: StartTheme;
+   setTheme: (theme: Theme) => void;
+   colors: typeof Colors.light;
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+   theme: 'system',
+   activeTheme: 'light',
+   setTheme: () => { },
+   colors: Colors.light,
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+export default function ThemeProvider({ children }: { children: ReactNode }) {
+   const systemColorScheme = useColorScheme();
+   const [theme, setThemeState] = useState<Theme>('system');
+   const [isReady, setIsReady] = useState(false);
+
+   useEffect(() => {
+      (async () => {
+         try {
+            const storedTheme = await AsyncStorage.getItem('@theme');
+            if (storedTheme) {
+               setThemeState(storedTheme as Theme);
+            }
+         } catch (e) {
+            console.error('Failed to load theme', e);
+         } finally {
+            setIsReady(true);
+         }
+      })();
+   }, []);
+
+   const setTheme = async (newTheme: Theme) => {
+      setThemeState(newTheme);
+      try {
+         await AsyncStorage.setItem('@theme', newTheme);
+      } catch (e) {
+         console.error('Failed to save theme', e);
+      }
+   };
+
+   if (!isReady) {
+      return null;
+   }
+
+   const activeTheme = theme === 'system' ? (systemColorScheme || 'light') : theme;
+   const colors = Colors[activeTheme];
+
+   return (
+      <ThemeContext.Provider value={{ theme, activeTheme, setTheme, colors }}>
+         {children}
+      </ThemeContext.Provider>
+   );
+}